// This codebase: Digital Glitch Portfolio

Digital Glitch Portfolio

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

One-liner summary:
A premium portfolio built with Next.js, featuring digital glitch aesthetics, canvas-based wave physics, interactive AI voice chatbot, and smooth GSAP ScrollTrigger parallax.

Development Duration: April 2026 - June 2026

Note(s):

• Hosting/code availability disclaimer:
  The full source code is available upon request. The project is live, but not published publicly to avoid exposing potential vulnerabilities.
• Contact for more info or demos:
  Reach out to Franz Phillip G. Domingo via franzdomingo.dev.
• Navigation note:
  Blog and project pages are accessible via the site’s navigation.

Features

• 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

My Contributions (Role & Responsibilities)

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.

Challenges Faced

• Synchronizing complex animations:
  Coordinating canvas-based wave physics with React state and GSAP ScrollTrigger.
• AI Chatbot Performance:
  Optimizing TTS vocal synthesis and LLM streaming within a Next.js Edge environment.
• Agent Orchestration:
  Managing a complex multi-agent orchestration pipeline for feature delivery.
• Accessibility:
  Balancing high-performance visual glitch effects with strict reduced-motion accessibility standards.

Project Architecture

• 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:
  The live demo for the Digital Glitch Portfolio is available at franzdomingo.dev. All UI features, layouts, and interactions are available to explore directly.

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

• Functionality Shown:

  • Digital glitch landing page
  • Physics-based canvas transitions
  • AI Voice Chatbot interactions
  • Bento grid skill highlights
  • GSAP Parallax scrolling

• Demo Instructions:
  Visit the live site at franzdomingo.dev.
  For full source or private demo, contact the author.

If you need further details or want to see the codebase, please contact the author directly.