Portfolio: Cyberpunk

Interactive developer portfolio with a digital glitch and FUI (Futuristic User Interface) terminal aesthetic, built using Next.js 16, React 19, and custom GSAP/Canvas physics

LIVE DEMO • GITHUB REPOSITORY (Private Access)

Overview

• Role: Creator, 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 (fully localizing content across English, Tagalog, German, Spanish, French, Arabic, Korean, Japanese, and Chinese)
• Key Result: 100% interactive portfolio coverage with dynamic voice-driven chatbot navigation and sub-second page loads
• Summary: A premium digital portfolio and creative engineering showcase designed with a digital glitch aesthetic. It features interactive AI voice conversation, canvas-based wave physics transitions, and smooth scrolling experiences to demonstrate high-level design and frontend mastery.

The Problem

• Challenge: Standard portfolios are static, boring, and fail to demonstrate real-world full-stack and AI integration capabilities. The objective was to create an immersive, highly interactive personal website that serves as a living proof-of-concept for complex animations, layouts, state management, and real-time AI tools without compromising performance or accessibility.
• Audience: Recruiters, engineering managers, potential clients, and developers looking for technical depth, premium design taste, and robust software architecture.
• Constraints: Maintaining smooth 60fps animations and high performance (sub-second loading times) on mobile devices while running web-based canvas simulations, a 3D model viewer, and a custom streaming AI chatbot.

Approach & Decisions

• Architecture: Next.js App Router for Edge-rendered internationalized routes, paired with a global React context for theme, music, and chatbot states.
• Key Decisions:
  • Multi-language Architecture: Built a robust i18n framework using next-intl to localize routing, page metadata, chat prompts, and project document structures (with complete localized pages in 9 languages).
  • Canvas-based Transitions: Integrated custom Perlin noise wave distortion instead of simple CSS transitions to create a tactile digital wave effect on page transitions.
  • Vocal Synthesis & AI Chatbot: Configured the Google Generative AI SDK with custom speech synthesis queues, using Edge routing to stream responses quickly.
  • Z-Index Layering: Established a strict 15-tier z-index stacking context to prevent layout and interaction clashes between overlays, custom cursors, and 3D scenes.
• Trade-offs: Decided to utilize CSS overlays and lightweight 2D canvas effects instead of heavy 3D assets to keep the initial page bundle minimal and load speeds under 100ms.
• Data Flow: User Input -> Next.js Route Handler -> Google Generative AI -> Text Stream -> Speech Synthesis Queue -> Custom Web Audio Player.

Key Results & Impact

• Outcome: Achieved smooth 60fps animations across devices, a sub-100ms time-to-first-byte (TTFB), and a fully interactive bilingual voice assistant.
• Lighthouse Performance: Scored a perfect 100/100/100/100 on Lighthouse across all core categories (Performance, Accessibility, Best Practices, and SEO).
• Security Compliance: Scored a perfect 100/100 on security verification audits via Cloudflare's isagentready assessment.
• Comparison: Upgraded from the creator's first, sub-optimal portfolio, Portfolio: Glass, to a custom interactive terminal, leading to longer user engagement and direct technical inquiries.
• Impact: Demonstrated capability in building modern, complex user interfaces and production-grade full-stack architectures.

Technical Deep Dive

• Notable Details: Custom-built CRT screen scanline filter, responsive custom cursor following, dynamic audio visualizer, and custom multi-language next-intl routing.
• Verification: Verified using Lighthouse audits, accessibility checks (contrast ratios >= 4.5:1), and mobile emulation on low-end devices.
• Optimizations: Configured Next.js image remote patterns, lazy-loaded Three.js canvas assets, and streamlined tailwind styles to minimize unused CSS.
• Code Quality: Strict ESLint configuration, TypeScript typing, and self-contained modular components.
• Links: Refer to package.json, next.config.ts, and app/data.ts.

Reflections

• Differently: Optimize 3D models further or implement custom shaders for background waves to reduce CPU overhead on mobile devices.
• Successes: Delivered a unified design aesthetic where the soundtrack, graphics, and chatbot interactions work together seamlessly.
• Lessons: Managing complex animations alongside streaming AI APIs requires careful asynchronous state isolation in React.

---

My Contributions

• Frontend Architecture: Designed and implemented the core UI shell, including custom cursors, HUDs, bento grids, and the music provider.
• AI Chatbot Integration: Programmed the voice chatbot with speech synthesis, system instructions, and locale-aware context.
• Animation Tuning: Orchestrated GSAP ScrollTrigger timeline entries and synced them with canvas wave distort transitions.

---

Project Architecture

This app follows a modular feature-based Next.js App Router pattern with localized route folders.

• Layered Structure: Server components handle localization parameters and structural routing, while Client Components render interactive widgets.
• Feature Modules:
  • components/sections/: Layout sections (Hero, About, Projects, Skills, Contact).
  • components/ui/: Interactive UI nodes (ASCIIText, CustomCursor, MusicPlayer, VerticalHUD).
• State Management: React Context API controls global audio playback state, theme selection, and language states.
• Refactoring & Improvements: Upgraded configuration to Next.js 16 with Turbopack for near-instant hot-module replacement during development.

Compiled Route Structure (App Router)

The application compiles into the following static (○) and dynamic (ƒ) route structure (excluding individual portfolio project paths):

• PWA & SEO Infrastructure (○ Static):
  • /_not-found — Static global 404 handler.
  • /manifest.webmanifest — Web App Manifest.
  • /robots.txt & /sitemap.xml — Crawler directories.
• Bilingual Routing (ƒ Dynamic):
  • /[locale] & /[locale]/[...rest] — Locale-aware layout wrapper using next-intl.
• Model Context Protocol (MCP) & AI Agents (ƒ Dynamic):
  • /.well-known/mcp.json & /openapi.json — Machine-readable server capabilities schemas.
  • /.well-known/agent-skills/ — Skills directories (e.g., SKILL.md) for AI integration.
  • /api/mcp & /api/mcp/sse — SSE (Server-Sent Events) communication endpoints for agent clients.
• Generative AI Chatbot & Media System (ƒ Dynamic):
  • /api/chat & /api/chat/health — Stream route handlers backing the AI chatbot voice processor.
  • /api/music & /api/music/health — Audio stream controller routing.
• LLM Context Exporters (ƒ Dynamic):
  • /llms.txt & /llms-full.txt — Token-efficient text exports of portfolio facts, context, and credentials optimized for LLM reading.

---

Demo Preview

• Digital Glitch Landing Page: Immersive home view showcasing standard-compliant typography, CRT scanning overlays, and live status readouts.
• Interactive AI Chatbot: Conversational bot situated at the bottom right that dynamically updates layout state and plays vocal feedback.
• Bento Grid Layouts: Clean, high-density dashboard layouts displaying skills, timelines, and certifications.

Hosting Note:
The project is live and hosted on Vercel at franzdomingo.dev. Note that this codebase itself is the portfolio project; you are currently viewing and running this very project.