Portfolio: Cyberpunk

LIVE SITE · PRIBADONG REPOSITORY

Pangkalahatang-ideya

• Tungkulin: Solo full-stack at creative engineer.
• Stack: Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4, MDX, next-intl, Framer Motion, custom Canvas waves na may Perlin-style distortion, Three.js, React Three Fiber, provider-neutral na AI integration, MCP/OAuth, Node.js 24 LTS, at Vercel.
• Pangunahing resulta: Isang buhay na portfolio na nagpapakita ng creative frontend work at production-minded na full-stack integration.
• Buod: Pinagsasama ng site ang diagnostic glitch visual language, malinaw na impormasyon, at mga interactive na entry point nang hindi ginagawang demo lamang ang portfolio.

Problema ng produkto

• Hamon: Kailangang maipakita ng portfolio ang teknikal na lalim at visual taste nang mabilis pa ring maunawaan sa unang pagbisita.
• Madla: Recruiters, engineering managers, potensyal na kliyente, at developers na gustong makita ang parehong craft at sistema.
• Limitasyon: Dapat gumana ang experience sa maliit na screen, keyboard, reduced motion, siyam na wika, at sa mga integration na may malinaw na security boundary.

Diskarte at mga desisyon

• Arkitektura: Ginagamit ng Next.js App Router ang localized route shell, server-rendered na content, at hiwalay na client shell para sa interactive na bahagi.
• Mahahalagang desisyon:
  • Siyam na wika, content, at routing: Pinamamahalaan ng next-intl ang locale route at messages, at bawat project ay may localized MDX na may documented English fallback.
  • Canvas at 3D interaction: Ang custom Canvas waves na may Perlin-style distortion, Framer Motion, at focused Three.js/React Three Fiber hero ay nagbibigay ng expressive motion nang hindi ginagawang buong 3D scene ang produkto.
  • FUI diagnostic terminal: CRT texture, scanlines, terminal status readout, at glitch typography ay nagbibigay ng futuristic identity na nananatiling malinaw basahin.
  • Optional voice at dubbing: Local browser feedback, dubbing popup, at audio sequencing ay sumusunod sa user settings at browser support.
  • Overlay coordination: Ang boot screen, navigation, cursor, scanlines, chat, dubbing popup, at 3D hero ay may sinadyang stacking coordination, hindi fixed na layer count.
  • Disenyo ng Oz assistant: Gumagamit ang /api/chat ng neutral na primary at fallback service routing, static portfolio data at mas malalim na MDX context, at malinaw na UI tools.
  • Hangganan ng client, server, at state: Hiwalay ang provider para sa theme, internationalization, at music; local ang chat preference at makitid ang concern ng filter store.
  • MCP at OAuth: Pinoprotektahan ng OAuth 2.1, PKCE S256, at portfolio.read scope ang read-only tools.
• Siyam na lokal: Inililipat ng next-intl ang ruta, messages, metadata, at project MDX, na may maingat na English fallback kung wala ang isang entry.
• Canvas na galaw: Ang waves at distortion ay naka-isolate sa UI layer para hindi itali ang content route sa animation lifecycle.
• 3D hero: Three.js at React Three Fiber ang ginagamit lamang kung ang hero ay nasa angkop na client context; hindi ito requirement para mabasa ang page.
• Design system: CSS custom properties at shared glitch primitives ang pinagmumulan ng kulay, typography, overlays, at state feedback.
• Accessibility: Gumagalang ang motion branches sa reduced-motion preference at nawawala ang custom cursor sa coarse pointer.
• Trade-off: Pinili ang progressive enhancement kaysa gawing dependency ng pag-navigate ang Canvas, audio, o 3D.
• Trade-off: Pinili ang purpose-built Canvas at optional 3D kaysa sa mabigat na all-3D presentation, at optional browser feedback ang voice sa halip na server speech pipeline.
• Daloy ng datos: Dumarating ang visitor input sa /api/chat na may static portfolio data at mas malalim na MDX context. Nagbabalik ang streamed response ng text o UI action, at maaaring gumamit ng local voice ang supported browser.

Mga resulta at ebidensiya

• Kinalabasan: Nagbibigay ang portfolio ng mabilis na orientation at mas malalim na paliwanag sa mga system sa likod nito.

• Kalidad at validation: Ang ESLint, TypeScript checking, at production build ay repeatable quality gates.

• Security controls: Gumagamit ang chat ng signed temporary lockdown at rate boundaries, habang gumagamit ang MCP ng read-only scopes at one-time authorization codes.

• Paghahambing at ebolusyon: Mula sa naunang Portfolio: Glass, naging mas modular itong produkto para sa localized narrative at agent access.

• Epekto: Ipinapakita nito ang creative frontend kasama ng maintainable na content, integration, security, at deployment decisions.

• Ang landing view ay naghahatid ng malinaw na pagkakakilanlan bago ang mas malalim na interactive na mga layer.

• Maaaring mag-browse ang bisita sa projects, skills, experience, at contact nang walang kailangang account.

• Ang localized routes ay nagbibigay ng kaparehong hierarchy sa lahat ng suportadong wika.

• Ang Oz assistant ay nagbibigay ng conversational na daan papunta sa parehong verified portfolio facts.

• Ang mga external integration ay idinisenyo bilang optional na pagpapahusay, hindi bilang kondisyon para sa pangunahing content.

Teknikal na malalimang pagsusuri

• Mahahalagang detalye: CRT-like texture, glitch typography, Canvas, focused 3D hero, music controls, at locale-aware content ay may malinaw na responsibilidad nang walang sobrang global state container.

• Pagpapatunay: Lint, typecheck, at production build ang quality gates; sinusuri ang responsive, reduced-motion, at coarse-pointer branch sa mga UI change.

• Optimizations: Inihihiwalay ng client-only shell ang browser features, habang iniiwasan ng MDX, data module, at modular components ang hindi kailangang interaction load.

• Code quality: Nililinaw ng TypeScript types, organized handlers, focused providers, narrow stores, at service/security modules ang ownership.

• Mga link at sanggunian: Tingnan ang components/sections, components/ui, components/chatbot, components/providers, content/projects, messages, data, lib/mcp, lib/security, lib/services, at stores.

• Naglilingkod ang /api/chat sa streaming Oz replies gamit ang multi-provider routing at maingat na fallback.

• Gumagamit ang assistant ng static portfolio data at MDX context bilang malinaw na pinagmulang sanggunian.

• Optional ang browser voice, kaya nananatiling text-first at usable ang assistant kapag unavailable ang speech feature.

• Read-only ang MCP endpoint, Streamable HTTP ang pangunahing transport, at OAuth 2.1 Authorization Code na may PKCE S256 ang access flow.

• Ginagamit ang Upstash Redis sa Vercel para sa atomic, one-time authorization-code redemption, na may compatibility behavior para sa local development.

• Hiwalay ang theme, provider state, component-local browser persistence, at chatbot filter store para hindi lumawak ang global state nang walang dahilan.

Mga pagninilay

• Gagawin nang iba: Patuloy na pasimplehin ang pinakamabibigat na visual path habang pinananatili ang editorial personality.

• Mga tagumpay: Mukhang iisang produkto ang interface, localized narrative, assistant, music, at discovery.

• Mga aral: Mas madaling panatilihin ang rich interaction kapag malinaw ang hangganan ng server integration, browser-only behavior, at localized content.

• Mas tumitibay ang creative interaction kapag ang content hierarchy ang una at ang effect ay pangalawang layer.

• Ang malinaw na client at server boundary ay mas mahalaga kaysa paramihin ang integrations.

• Ang localized case study ay kailangang panatilihing kasabay ng aktuwal na codebase, hindi lamang isalin minsan.

Aking mga kontribusyon

• Frontend at design: Dinisenyo ko ang visual system, responsive section, HUD composition, Canvas, 3D hero, at content presentation.

• AI at Oz: Binuo ko ang streaming assistant surface, primary/fallback routing, portfolio at MDX context, at UI actions.

• Interaction at animation: Tinono ko ang motion, scroll, reduced-motion, at responsive interaction.

• Dinisenyo at ipinatupad ko ang visual system, page structure, at responsive interaction.

• Binuo ko ang localized content pipeline, project presentation, at MDX components.

• Isinama ko ang Oz assistant, AI provider fallback, at security controls nito.

• Ipinatupad ko ang MCP discovery, OAuth flow, contact, media, analytics, at deployment integration.

Arkitektura ng proyekto

• May-layer na istruktura: Ang server component ang humahawak sa locale at document structure, client component ang interaction, at inihihiwalay ng API route ang chat, contact, media, at MCP.

• Feature modules: Gumagamit ang proyekto ng feature-oriented na Next.js structure upang manatiling magkakahiwalay ang content, UI, server integrations, at machine-readable discovery.

• May-layer na disenyo: Ang route at server components ang humahawak sa locale at document structure; ang client components ang humahawak sa interaction at browser-only APIs.

• src/app/[locale]: Localized pages, layouts, loading, error, at project routes.

• src/components/sections: Hero, About, Experience, Skills, Projects, Contact, at Certification sections.

• src/components/ui: GlitchText, Waves, CustomCursor, HeroModel, SkillGraph, at iba pang reusable visual primitives.

• src/components/layout: Navigation, boot experience, at scroll-to-top behavior.

• src/components/chatbot: Widget, conversation UI, at client-side chat services.

• src/components/providers: Client-only shells at music-player provider boundaries.

• src/content/projects: Locale-specific MDX source para sa project detail pages.

• src/data at src/messages: Verified static portfolio facts at translation catalogs.

• src/lib, src/hooks, at src/stores: Shared services, reusable behavior, at maliit na scoped UI/filter state.

• State management: Nasa provider ang theme, internationalization, at music; nananatili sa pinakamaliit na kinakailangang scope ang chat preference at filter state.

• Refactoring at improvements: Nagbibigay ang modular boundaries ng independent evolution para sa visual features, route handlers, content, at integration.

Ang state ay hindi iisang global bucket: themes at providers ay may sariling context, ang chat session preferences ay browser-local kung naaangkop, at ang filter store ay para lamang sa sariling UI concern nito.

Ang modular na anyo ay nagpapahintulot na mapalitan ang isang visual effect o provider nang hindi ginagalaw ang localized content at server contracts.

Mga ruta at mga surface

• PWA at SEO: Manifest, robots, sitemap, JSON-LD, at localized metadata ang naglalarawan ng site sa browser at crawler.
• Siyam na wika: Ang /[locale] at project paths nito ay nagbibigay ng locale-aware page hierarchy sa pamamagitan ng next-intl.
• MCP at AI: /api/mcp, OpenAPI, at .well-known discovery documents ang naglalantad ng read-only agent access; /api/chat ang Oz stream surface.
• Operasyon ng Oz: Nagbibigay ang /api/chat, /api/chat/health, at /api/gallery/[slug] ng streaming, health, at rate-limited project-media surfaces, habang ang mga aprubadong UI tool ang humahawak sa navigation, project filtering, enabled gallery, contact review, musika, tema, at mga aksyon sa wika.
• LLM at human exports: llms.txt, llms-full.txt, auth.md, at mga public discovery document ay nagbibigay ng malinaw na machine at human-readable na context.

Mga operasyonal na detalye

• Ang layout ang nagtatakda ng fonts, providers, at localized metadata boundary.
• Ang loading at error surfaces ay bahagi ng route experience, hindi hiwalay na demo screen.
• Ang project slug ay nireresolba sa localized MDX source bago i-render ang detalye.
• Sinusuri ng Cover component ang local asset path sa server bago mag-render ng media.
• Ang internal navigation ay gumagamit ng helpers mula sa i18n routing module.
• Ang ghost navigation ay nagtatago sa scroll-down at bumabalik sa scroll-up.
• Ang body layout ay may compensation para sa pansamantalang nav state na ito.
• Ang contact form ay dumadaan sa SMTP handler at hindi naglalantad ng mail credentials sa client.
• Ang Spotify experience ay gumagamit ng login, callback, at now-playing surfaces, hindi ng isang generic music API route.
• Ang /api/gallery/[slug] ay rate-limited na surface para sa project media at mga supported gallery.
• Maaaring magbukas ang approved Oz UI actions ng project gallery kapag enabled at supported ito, hindi bilang universal na mobile action.
• Ang /api/chat ay nagva-validate ng same-origin requests. Kapag nag-activate ang abuse controls, hiwalay na signed temporary lockdown cookie ang nagdadala ng restriction, hindi signed ang request mismo.
• Ang analytics ay may opt-out behavior at hindi bahagi ng critical page content.
• Ang PWA manifest ay sumusuporta sa installable metadata nang hindi binabago ang normal na browser flow.
• Ang JSON-LD ay nagbibigay ng structured context na kaayon ng visible portfolio facts.
• Ang robots at sitemap route ay pinapanatiling discoverable ang public pages.
• Ang security at OAuth discovery ay nasa .well-known documents sa halip na client-only hints.
• Ang authorization scope ay nananatiling portfolio.read, kaya hindi nagiging write surface ang MCP.
• Ang one-time code redemption ay naglilimita sa replay risk sa deployed environment.
• Ang fallback provider ay tumutulong sa availability ngunit hindi nagbabago sa portfolio source of truth.
• Ang chatbot response ay maaaring mag-navigate o maghanap, ngunit hindi nito malayang binabago ang content.
• Ang optional reasoning at subagent behavior ay may malinaw na server-side controls kung naka-enable.
• Ang signed temporary lockdown ay tumutulong laban sa jailbreak at paulit-ulit na abuse.
• Ang bawat visual primitive ay maaaring i-test o i-disable nang hindi binabago ang content model.
• Ang Tailwind v4 ay dumadaan sa PostCSS configuration at CSS token system ng proyekto.
• Ang TypeScript types ay naglilinaw sa portfolio data at MDX module contracts.
• Ang production build ang huling pagsubok na magkakasama ang routes, content, at server boundaries.

Preview ng demo

• Digital glitch landing page: May typographic hierarchy, HUD-like details, at Canvas-driven texture na nananatiling pangalawa sa content.
• Interactive Oz assistant: Nagbibigay ng streamed, locale-aware na sagot at navigation help mula sa portfolio context.
• Project exploration: Ang MDX case studies, cover media, at structured sections ay nagbibigay ng malalim na follow-through mula sa projects grid.
• FUI diagnostic landing: Ang CRT texture, scanlines, terminal-like status readouts, at glitch typography ay bumubuo ng malinaw na futuristic interface identity.
• Optional voice at dubbing: Ang compatible browser ay maaaring magpakita ng user-controlled local voice feedback at dubbing popup, ngunit hindi kailangan ang audio para magamit ang site.
• Responsive grids: Ang projects, skills, experience, at credentials ay nakaayos sa readable na high-density sections para sa pointer, touch, at reduced-motion contexts.
• Localized detail: Maaaring basahin ang parehong project architecture at contribution narrative sa napiling wika ng visitor.
• Agent-ready discovery: Ang OAuth at public discovery documents ay naglalarawan ng controlled read-only machine access na kasama ng human-facing portfolio.
• Overlay coordination: Ang boot screen, navigation, cursor, scanlines, chat, dubbing popup, at 3D hero ay may sinadyang stacking coordination para manatiling mabasa at maabot.
• Pribadong codebase: Inilalarawan ng public case study ang live product habang nananatiling pribado ang codebase.

Tala sa hosting: Live ang dokumentadong portfolio na ito sa franzdomingo.dev, at Vercel ang deployment target na may Node.js 24 LTS runtime.