Portfolio: Cyberpunk

Interactive na developer portfolio na may digital glitch at FUI (Futuristic User Interface) terminal aesthetic, binuo gamit ang Next.js 16, React 19, at custom na GSAP/Canvas physics

LIVE DEMO • GITHUB REPOSITORY (Pribadong Access)

Pangkalahatang-ideya

• Tungkulin: Tagalikha, Solo Full-Stack & Creative Engineer
• Stack: Next.js 16 (App Router), React 19, TypeScript, Tailwind CSS 4, GSAP, WebGL (Three.js), Web Audio API (Text-to-Speech), Google Generative AI SDK, next-intl (ganap na nilalokalisa ang nilalaman sa English, Tagalog, German, Spanish, French, Arabic, Korean, Japanese, at Chinese)
• Pangunahing Resulta: 100% interactive na saklaw ng portfolio na may dynamic na voice-driven chatbot navigation at sub-second na bilis ng pag-load ng pahina
• Buod: Isang premium na digital portfolio at malikhaing engineering showcase na idinisenyo gamit ang digital glitch aesthetic. Nagtatampok ito ng interactive na pakikipag-usap sa boses gamit ang AI, mga transition ng wave physics na batay sa canvas, at makinis na karanasan sa pag-scroll upang maipakita ang mataas na antas ng disenyo at masteri sa frontend.

Ang Suliranin

• Hamon: Ang mga karaniwang portfolio ay static, nakakainip, at hindi nagpapakita ng tunay na kakayahan sa full-stack at AI integration. Ang layunin ay lumikha ng isang nakaka-engganyo, napaka-interactive na personal na website na nagsisilbing isang buhay na patunay-ng-konsepto (proof-of-concept) para sa mga kumplikadong animation, layout, pamamahala ng estado, at real-time na mga tool sa AI nang hindi binabawasan ang performance o accessibility.
• Madla: Mga recruiter, engineering manager, potensyal na kliyente, at developer na naghahanap ng teknikal na lalim, premium na panlasa sa disenyo, at matatag na arkitektura ng software.
• Mga Limitasyon: Pagpapanatili ng makinis na 60fps na mga animation at mataas na performance (mas mababa sa isang segundong oras ng pag-load) sa mga mobile device habang nagpapatakbo ng mga simulation ng canvas na batay sa web, isang 3D model viewer, at isang custom na streaming AI chatbot.

Diskarte at mga Desisyon

• Arkitektura: Next.js App Router para sa Edge-rendered na mga internationalized na ruta, na may kasamang global na React context para sa tema, musika, at mga estado ng chatbot.
• Mahahalagang Desisyon:
  • Arkitekturang Pangmaramihang Wika: Bumuo ng isang matatag na i18n framework gamit ang next-intl upang ilokalisa ang routing, metadata ng pahina, mga chat prompt, at mga istruktura ng dokumento ng proyekto (na may kumpletong localized na mga pahina sa 9 na wika).
  • Mga Transition na Batay sa Canvas: Nag-integrate ng custom na Perlin noise wave distortion sa halip na simpleng mga CSS transition upang lumikha ng isang tactile na digital wave effect sa mga transition ng pahina.
  • Vocal Synthesis at AI Chatbot: Pinasinungalingan ang Google Generative AI SDK na may mga custom na speech synthesis queue, gamit ang Edge routing para mabilis na mai-stream ang mga tugon.
  • Z-Index Layering: Nagtatag ng mahigpit na 15-tier na z-index stacking context upang maiwasan ang mga salungatan sa layout at interaksyon sa pagitan ng mga overlay, custom cursor, at mga eksenang 3D.
• Mga Trade-off: Nagpasyang gumamit ng mga CSS overlay at magagaan na 2D canvas effect sa halip na mabibigat na 3D asset upang panatilihing minimal ang paunang bundle ng pahina at mas mababa sa 100ms ang bilis ng pag-load.
• Daloy ng Datos: Input ng User -> Tagapamahala ng Ruta ng Next.js -> Google Generative AI -> Text Stream -> Speech Synthesis Queue -> Custom Web Audio Player.

Pangunahing Resulta at Epekto

• Kinalabasan: Nakatamo ng makinis na 60fps na mga animation sa iba't ibang device, mas mababa sa 100ms na time-to-first-byte (TTFB), at isang ganap na interactive na bilingual voice assistant.
• Performance ng Lighthouse: Nakakuha ng perpektong 100/100/100/100 sa Lighthouse sa lahat ng pangunahing kategorya (Performance, Accessibility, Best Practices, at SEO).
• Pagsunod sa Seguridad: Nakakuha ng perpektong 100/100 sa mga audit sa pag-verify ng seguridad sa pamamagitan ng pagsusuri ng isagentready ng Cloudflare.
• Paghahambing: In-upgrade mula sa unang hindi masyadong optimal na portfolio ng tagalikha, ang Portfolio: Glass, patungo sa isang custom na interactive na terminal, na nagresulta sa mas mahabang pakikipag-ugnayan ng user at direktang mga teknikal na tanong.
• Epekto: Naipakitang kakayahan sa pagbuo ng mga modernong, kumplikadong user interface at mga produksyon-grade na full-stack na arkitektura.

Teknikal na Malalimang Pagsusuri

• Mga Kapansin-pansing Detalye: Custom na binuong CRT screen scanline filter, responsive na pagsunod ng custom cursor, dynamic na audio visualizer, at custom na multi-language na next-intl routing.
• Pag-verify: Na-verify gamit ang mga audit ng Lighthouse, mga pagsusuri sa accessibility (contrast ratios >= 4.5:1), at mobile emulation sa mga low-end na device.
• Mga Pag-optimize: Pinasinungalingan ang mga pattern ng Next.js image remote, lazy-loaded na mga asset ng Three.js canvas, at pinasimpleng mga istilo ng tailwind upang mabawasan ang hindi nagagamit na CSS.
• Kalidad ng Code: Mahigpit na pagsasaayos ng ESLint, TypeScript typing, at mga modular component na self-contained.
• Mga Link: Sumangguni sa package.json, next.config.ts, at app/data.ts.

Mga Pagninilay

• Gagawing Iba: I-optimize pa ang mga 3D model o magpatupad ng mga custom shader para sa background waves upang mabawasan ang overhead ng CPU sa mga mobile device.
• Mga Tagumpay: Naghatid ng nagkakaisang aesthetic ng disenyo kung saan ang soundtrack, graphics, at mga interaksyon ng chatbot ay gumagana nang magkasama nang walang putol.
• Mga Aral: Ang pamamahala sa mga kumplikadong animation kasabay ng streaming AI APIs ay nangangailangan ng maingat na asynchronous state isolation sa React.

Aking mga Kontribusyon

• Arkitektura ng Frontend: Dinisenyo at ipinatupad ang pangunahing UI shell, kabilang ang mga custom cursor, HUDs, bento grids, at ang tagapagbigay ng musika (music provider).
• Integrasyon ng AI Chatbot: Pinaramutan ang voice chatbot gamit ang speech synthesis, mga tagubilin sa system, at locale-aware na konteksto.
• Pag-tune ng Animation: Pinangasiwaan ang mga timeline entry ng GSAP ScrollTrigger at ini-sync ang mga ito sa mga transition ng canvas wave distort.

Arkitektura ng Proyekto

Ang app na ito ay sumusunod sa isang modular na Next.js App Router pattern na batay sa tampok na may mga localized na folder ng ruta.

• Istrukturang May-layer: Ang mga server component ang namamahala sa mga parameter ng localization at structural routing, habang ang mga Client Component naman ang nagre-render ng mga interactive na widget.
• Mga Tampok na Module:
  • components/sections/: Mga seksyon ng layout (Hero, About, Projects, Skills, Contact).
  • components/ui/: Mga interactive na UI node (ASCIIText, CustomCursor, MusicPlayer, VerticalHUD).
• Pamamahala ng Estado: Kinokontrol ng React Context API ang global na estado ng pag-play ng audio, pagpili ng tema, at mga estado ng wika.
• Refactoring at mga Pagpapabuti: In-upgrade ang pagsasaayos sa Next.js 16 gamit ang Turbopack para sa malapit na instant na hot-module replacement sa panahon ng pag-develop.

Compiled Route Structure (App Router)

Ang application ay nagko-compile sa sumusunod na static (○) at dynamic (ƒ) na istruktura ng ruta (hindi kasama ang mga indibidwal na landas ng proyekto sa portfolio):

• Imprastraktura ng PWA at SEO (○ Static):
  • /_not-found — Static global 404 handler.
  • /manifest.webmanifest — Web App Manifest.
  • /robots.txt & /sitemap.xml — Mga crawler directory.
• Bilingual Routing (ƒ Dynamic):
  • /[locale] & /[locale]/[...rest] — Locale-aware layout wrapper gamit ang next-intl.
• Model Context Protocol (MCP) at AI Agents (ƒ Dynamic):
  • /.well-known/mcp.json & /openapi.json — Mga schema ng kakayahan ng server na nababasa ng makina.
  • /.well-known/agent-skills/ — Mga skill directory (hal., SKILL.md) para sa AI integration.
  • /api/mcp & /api/mcp/sse — Mga endpoint ng komunikasyon sa SSE (Server-Sent Events) para sa mga agent client.
• Generative AI Chatbot at Media System (ƒ Dynamic):
  • /api/chat & /api/chat/health — Stream route handler na sumusuporta sa AI chatbot voice processor.
  • /api/music & /api/music/health — Audio stream controller routing.
• LLM Context Exporters (ƒ Dynamic):
  • /llms.txt & /llms-full.txt — Token-efficient na mga pag-export ng teksto ng mga katotohanan sa portfolio, konteksto, at mga kredensyal na na-optimize para sa pagbabasa ng LLM.

Preview ng Demo

• Digital Glitch Landing Page: Immersive na home view na nagpapakita ng standard-compliant na tipograpiya, mga CRT scanning overlay, at live status readouts.
• Interactive na AI Chatbot: Conversational bot na matatagpuan sa kanang ibaba na dynamic na nag-a-update ng estado ng layout at nagpapatugtog ng vocal feedback.
• Mga Layout ng Bento Grid: Malinis, mataas ang densidad na mga layout ng dashboard na nagpapakita ng mga kasanayan, timeline, at sertipikasyon.

Tala sa Pagho-host:
Ang proyekto ay live at naka-host sa Vercel sa franzdomingo.dev. Tandaan na ang codebase na ito mismo ang proyekto sa portfolio; kasalukuyan mong tinitingnan at pinapatakbo ang mismong proyektong ito.