Portfolio: Cyberpunk

Interaktives Entwickler-Portfolio mit digitalem Glitch und FUI-Terminal-Ästhetik (Futuristic User Interface), entwickelt mit Next.js 16, React 19 und benutzerdefinierter GSAP-/Canvas-Physik

LIVE-DEMO • GITHUB-REPOSITORY (Privater Zugriff)

Übersicht

• Rolle: Ersteller, 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 (vollständige Lokalisierung der Inhalte in Englisch, Tagalog, Deutsch, Spanisch, Französisch, Arabisch, Koreanisch, Japanisch und Chinesisch)
• Wichtigstes Ergebnis: 100 % interaktive Portfolio-Abdeckung mit dynamischer, sprachgesteuerter Chatbot-Navigation und Ladezeiten unter einer Sekunde
• Zusammenfassung: Ein erstklassiges digitales Portfolio und Schaufenster für kreatives Engineering im digitalen Glitch-Design. Es bietet interaktive KI-Sprachkonversationen, Canvas-basierte Wellenphysik-Übergänge und flüssige Scroll-Erlebnisse, um erstklassiges Design und Frontend-Meisterschaft zu demonstrieren.

Das Problem

• Herausforderung: Standard-Portfolios sind statisch, langweilig und demonstrieren keine realen Full-Stack- und KI-Integrationsfähigkeiten. Ziel war es, eine immersive, hochgradig interaktive persönliche Website zu erstellen, die als lebendiger Machbarkeitsnachweis für komplexe Animationen, Layouts, Zustandsverwaltung und Echtzeit-KI-Tools dient, ohne die Leistung oder Barrierefreiheit zu beeinträchtigen.
• Zielgruppe: Recruiter, Engineering Manager, potenzielle Kunden und Entwickler, die nach technischer Tiefe, erstklassigem Designgeschmack und robuster Softwarearchitektur suchen.
• Einschränkungen: Aufrechterhaltung flüssiger 60-fps-Animationen und hoher Leistung (Ladezeiten unter einer Sekunde) auf Mobilgeräten bei gleichzeitiger Ausführung webbasierter Canvas-Simulationen, eines 3D-Modell-Betrachters und eines benutzerdefinierten Streaming-KI-Chatbots.

Ansatz & Entscheidungen

• Architektur: Next.js App Router für Edge-gerenderte internationalisierte Routen, gepaart mit einem globalen React-Kontext für Theme-, Musik- und Chatbot-Zustände.
• Wichtige Entscheidungen:
  • Mehrsprachige Architektur: Aufbau eines robusten i18n-Frameworks mit next-intl zur Lokalisierung von Routing, Seitenmetadaten, Chat-Prompts und Projektdokumentstrukturen (mit vollständig lokalisierten Seiten in 9 Sprachen).
  • Canvas-basierte Übergänge: Integration einer benutzerdefinierten Perlin-Noise-Wellenverzerrung anstelle einfacher CSS-Übergänge, um einen fühlbaren digitalen Welleneffekt bei Seitenübergängen zu erzeugen.
  • Sprachsynthese & KI-Chatbot: Konfiguration des Google Generative AI SDK mit benutzerdefinierten Sprachsynthese-Warteschlangen unter Verwendung von Edge-Routing für eine schnelle Stream-Antwort.
  • Z-Index-Layering: Etablierung eines strengen 15-stufigen z-index-Stapelkontexts, um Layout- und Interaktionskonflikte zwischen Overlays, benutzerdefinierten Cursorn und 3D-Szenen zu verhindern.
• Kompromisse: Entscheidung zur Verwendung von CSS-Overlays und leichtgewichtigen 2D-Canvas-Effekten anstelle schwerer 3D-Assets, um das anfängliche Seiten-Bundle minimal zu halten und Ladezeiten unter 100 ms zu gewährleisten.
• Datenfluss: Benutzereingabe -> Next.js Route Handler -> Google Generative AI -> Text Stream -> Sprachsynthese-Warteschlange -> Benutzerdefinierter Web-Audio-Player.

Wichtigste Ergebnisse & Auswirkungen

• Ergebnis: Flüssige 60-fps-Animationen auf allen Geräten, eine Time-to-First-Byte (TTFB) von unter 100 ms und ein voll interaktiver, zweisprachiger Sprachassistent.
• Lighthouse-Leistung: Perfekte Punktzahl von 100/100/100/100 bei Lighthouse in allen Kernkategorien (Performance, Barrierefreiheit, Best Practices und SEO).
• Sicherheitskonformität: Perfekte Punktzahl von 100/100 bei Sicherheitsüberprüfungen via Cloudflares isagentready-Bewertung.
• Vergleich: Upgrade vom ersten, suboptimalen Portfolio des Erstellers, Portfolio: Glass, zu einem benutzerdefinierten interaktiven Terminal, was zu einer längeren Benutzerbindung und direkten technischen Anfragen führte.
• Auswirkung: Nachgewiesene Fähigkeit zum Erstellen moderner, komplexer Benutzeroberflächen und produktionstauglicher Full-Stack-Architekturen.

Technische Details

• Besonderheiten: Eigens entwickelter CRT-Bildschirm-Scanlinienfilter, reaktionsschnelle benutzerdefinierte Cursor-Verfolgung, dynamischer Audio-Visualisierer und benutzerdefiniertes mehrsprachiges next-intl-Routing.
• Verifizierung: Verifiziert durch Lighthouse-Audits, Barrierefreiheitsprüfungen (Kontrastverhältnisse >= 4,5:1) und mobile Emulation auf leistungsschwachen Geräten.
• Optimierungen: Konfiguration von Next.js Image-Remote-Patterns, Lazy-Loading von Three.js-Canvas-Assets und optimierte Tailwind-Styles zur Minimierung ungenutzter CSS-Regeln.
• Codequalität: Strenge ESLint-Konfiguration, TypeScript-Typisierung und in sich geschlossene modulare Komponenten.
• Links: Siehe package.json, next.config.ts und app/data.ts.

Reflexionen

• Besser machen: Weitere Optimierung von 3D-Modellen oder Implementierung benutzerdefinierter Shader für Hintergrundwellen, um die CPU-Belastung auf Mobilgeräten zu reduzieren.
• Erfolge: Bereitstellung einer einheitlichen Designästhetik, bei der Soundtrack, Grafik und Chatbot-Interaktionen nahtlos zusammenwirken.
• Erkenntnisse: Die Verwaltung komplexer Animationen parallel zu Streaming-KI-APIs erfordert eine sorgfältige asynchrone Zustandsisolierung in React.

Meine Beiträge

• Frontend-Architektur: Entwurf und Implementierung der Kern-UI-Shell, einschließlich benutzerdefinierter Cursor, HUDs, Bento-Grids und des Musik-Providers.
• KI-Chatbot-Integration: Programmierung des Sprach-Chatbots mit Sprachsynthese, Systemanweisungen und lokalisierungsbewusstem Kontext.
• Animations-Tuning: Orchestrierung von GSAP ScrollTrigger Timeline-Einträgen und deren Synchronisierung mit Canvas-Wellenverzerrungsübergängen.

Projektarchitektur

Diese App folgt einem modularen, funktionsbasierten Next.js App Router-Muster mit lokalisierten Routenordnern.

• Schichtstruktur: Serverkomponenten verarbeiten Lokalisierungsparameter und strukturelles Routing, während Clientkomponenten interaktive Widgets rendern.
• Funktionsmodule:
  • components/sections/: Layout-Abschnitte (Hero, About, Projects, Skills, Contact).
  • components/ui/: Interaktive UI-Knoten (ASCIIText, CustomCursor, MusicPlayer, VerticalHUD).
• Zustandsverwaltung: Die React Context API steuert den globalen Audio-Wiedergabezustand, die Theme-Auswahl und die Sprachzustände.
• Refactoring & Verbesserungen: Upgrade der Konfiguration auf Next.js 16 mit Turbopack für nahezu sofortigen Hot-Module-Replacement (HMR) während der Entwicklung.

Struktur der kompilierten Routen (App Router)

Die Anwendung wird in die folgende statische (○) und dynamische (ƒ) Routenstruktur kompiliert (ausgenommen individuelle Portfolio-Projektpfade):

• PWA- & SEO-Infrastruktur (○ Statisch):
  • /_not-found — Globaler statischer 404-Handler.
  • /manifest.webmanifest — Web-App-Manifest.
  • /robots.txt & /sitemap.xml — Crawler-Verzeichnisse.
• Zweisprachiges Routing (ƒ Dynamisch):
  • /[locale] & /[locale]/[...rest] — Lokalisierungsbewusster Layout-Wrapper unter Verwendung von next-intl.
• Model Context Protocol (MCP) & KI-Agenten (ƒ Dynamisch):
  • /.well-known/mcp.json & /openapi.json — Maschinenlesbare Schemata für Serverfunktionen.
  • /.well-known/agent-skills/ — Skill-Verzeichnisse (z. B. SKILL.md) für KI-Integration.
  • /api/mcp & /api/mcp/sse — SSE (Server-Sent Events) Kommunikations-Endpunkte für Agenten-Clients.
• Generativer KI-Chatbot & Mediensystem (ƒ Dynamisch):
  • /api/chat & /api/chat/health — Stream-Route-Handler zur Unterstützung des Sprachprozessors des KI-Chatbots.
  • /api/music & /api/music/health — Audio-Stream-Controller-Routing.
• LLM-Kontext-Exporter (ƒ Dynamisch):
  • /llms.txt & /llms-full.txt — Token-effiziente Textexporte von Portfolio-Fakten, Kontext und Referenzen, optimiert für das Lesen durch LLMs.

Demo-Vorschau

• Digital Glitch Landingpage: Immersive Startansicht mit standardkonformer Typografie, CRT-Scanlinien-Overlays und Live-Statusanzeigen.
• Interaktiver KI-Chatbot: Konversations-Bot unten rechts, der den Layout-Zustand dynamisch aktualisiert und Sprachfeedback abspielt.
• Bento-Grid-Layouts: Übersichtliche Dashboard-Layouts mit hoher Dichte zur Anzeige von Fähigkeiten, Timelines und Zertifizierungen.

Hosting-Hinweis:
Das Projekt ist live und wird auf Vercel unter franzdomingo.dev gehostet. Bitte beachten Sie, dass diese Codebasis selbst das Portfolio-Projekt ist; Sie betrachten und führen derzeit genau dieses Projekt aus.