// Ang codebase na ito: Digital Glitch Portfolio

Digital Glitch Portfolio

Cyberpunk, Glitch-Themed Portfolio / Personal Website / Next.js App Router Project

One-liner summary:
Isang statically generated na portfolio site na binuo gamit ang Next.js 15 App Router, TypeScript, Tailwind CSS 4, at MDX.
Nagpapakita ng glassmorphic UI, modular na arkitektura, at mabilis na customization—hindi kailangan ng CMS.

Tagal ng Pag-develop: Hunyo 2025 - Hulyo 2025

(Mga) Tala:

• Disclaimer sa availability ng hosting/code:
  Ang buong source code ay available kapag hiniling. Ang proyekto ay live, ngunit hindi inilathala nang publiko upang maiwasan ang paglalantad ng mga potensyal na kahinaan.
• Kontak para sa karagdagang impormasyon o demo:
  Makipag-ugnayan kay Franz Phillip G. Domingo sa pamamagitan ng franzdomingo.dev.
• Tala sa nabigasyon:
  Ang mga pahina ng blog at proyekto ay accessible sa pamamagitan ng nabigasyon ng site.

Mga Tampok

• Physics-Based Canvas Transitions (animated Perlin noise wave distortion)
• Interactive AI Voice Chatbot with TTS, context-awareness, and next-intl support
• GSAP ScrollTrigger Parallax with staggered section entry triggers
• Bento Grid Skill Showcases for language proficiency and cloud expertise
• Accessibility and Performance optimizations (reduced-motion fallbacks, edge runtime)
• Multi-agent Orchestration Pipeline Architecture
• Dark/Cyberpunk signature palette with Coral, Cream, and Glitch Cyan/Magenta

Aking mga Kontribusyon (Tungkulin at Responsibilidad)

Frontend Architecture:

• Developed physics-based canvas transitions and custom scroll snap engines.
• Integrated an AI chatbot with vocal synthesis and local storage persistence.

Multi-Agent Orchestration:

• Orchestrated a pipeline of specialized agents (Coder, Front-End, QA, Tech Writer, Infra).

Performance & DevOps:

• Configured Vercel Edge Runtime and DNS routing for optimal performance.
• Ensured accessibility with reduced-motion fallbacks and Core Web Vitals audits.

Mga Hamon na Kinaharap

• Pagbalanse ng minimalism at feature richness:
  Kailangang panatilihing malinis ang UI habang sinusuportahan ang mga advanced features tulad ng command menu, dock, at chatbot.

• Pagpapatupad ng glassmorphic design:
  Nakamit ang consistent na glassmorphic effects sa iba't ibang browsers gamit ang Tailwind CSS at custom utilities.

• Extensibility nang walang boilerplate:
  Inayos ang codebase para sa madaling pagdaragdag ng mga bagong section at component, na binabawasan ang paulit-ulit na code.

• Security at pagbabahagi ng code:
  Nagpasya na huwag i-publish ang buong source nang publiko para maiwasan ang paglalantad ng sensitive na logic at detalye ng deployment.

Arkitektura ng Proyekto

• Architecture Style:
  Modular, functional React with Next.js App Router (Turbopack).
• Component Organization:
  • app/: Edge runtime routing, layouts, and internationalization (next-intl).
  • components/: Bento grids, 3D Canvas scenes, AI chatbot interface, and GSAP triggers.
  • messages/: Localization JSON dictionaries.
• Integrations:
  Three.js for WebGL, GSAP for high-performance scrolling, and @google/generative-ai for the chatbot.

Demo Preview

• Screenshots/Video:
  Ang live demo para sa Digital Glitch Portfolio ay available sa franzdomingo.dev. Lahat ng UI features, layouts, at interactions ay pwedeng i-explore nang direkta.

• Platform Views:
  Web (responsive, mobile-first)

• Functionality na Ipinakita:

  • Glassmorphic landing page
  • Animated dock navigation
  • Command menu (CMD+K)
  • Blog at project pages
  • Chatbot at toast notifications

• Mga Instruksyon sa Demo:
  Bisitahin ang live site sa franzdomingo.dev.
  Para sa buong source o pribadong demo, makipag-ugnayan sa may-akda.

Kung kailangan mo ng karagdagang detalye o gustong makita ang codebase, mangyaring makipag-ugnayan nang direkta sa may-akda.