Portfolio: Cyberpunk

Ein interaktives Portfolio mit digitaler Glitch-Identität, umgesetzt mit Next.js 16, React 19, TypeScript, Tailwind CSS 4 und MDX.

LIVE-DEMO · PRIVATES REPOSITORY

Übersicht

• Rolle: Ersteller, Full-Stack-Entwickler und Creative Engineer.
• Zweck: Arbeit, Erfahrung und technisches Urteilsvermögen in einer editoriellen, interaktiven Erfahrung zeigen.
• Zielgruppe: Recruiter, Engineering Leads, Kunden und Entwicklerkollegen.
• Kern-Stack: Next.js 16 App Router, React 19, TypeScript, Tailwind CSS 4, MDX, next-intl, Framer Motion, benutzerdefinierte Canvas-Wellen mit Perlin-artiger Verzerrung, Three.js, React Three Fiber, anbieterneutrale KI-Integration, MCP/OAuth, Node.js 24 LTS und Vercel.
• Inhalte: Statische Daten und lokalisierte MDX-Dokumente in neun Sprachen.
• Deployment: Vercel mit Fluid compute.
• Kernergebnis: Ein öffentliches Produkt, das kreative und wartbare Architektur mit lokalisierten Inhalten demonstriert.
• Zusammenfassung: Glitch-Identität, editorische Lesbarkeit und kontrollierte Integrationen bilden eine gemeinsame Erfahrung.

Problem

• Herausforderung: Persönlichkeit und technische Tiefe vermitteln, ohne wesentliche Informationen zu verdecken.
• Zielgruppe: Recruiter, Engineering Leads, Kunden und Entwickler, die Design und Architektur bewerten.
• Rahmenbedingungen: Kleine Bildschirme, Tastatur, reduced motion, neun Sprachen und sichere Integrationsgrenzen mussten zugleich funktionieren.
• Ein Portfolio soll Persönlichkeit und technische Tiefe vermitteln, ohne wichtige Informationen zu verstecken.
• Die Website brauchte eine ausdrucksstarke Navigation, die auf kleinen Bildschirmen verständlich bleibt.
• Projektinhalte sollten ausführlich erzählbar sein, ohne jede Seite in Interface-Code zu verwandeln.
• KI-Funktionen und externe Integrationen mussten von der Präsentationsschicht getrennt bleiben.
• Die Internationalisierung musste für jede Sprache konsistente Routen, Metadaten und Abläufe erhalten.
• Weil das Repository privat ist, muss die Architektur beschrieben werden, ohne Quellcode zu veröffentlichen.

Ansatz

• Architektur: Next.js App Router organisiert lokalisierte Server-Dokumente und Route Handler; interaktive Shells bleiben im Client.
• Wichtige Entscheidungen:
  • Inhalte und Routing in neun Sprachen: next-intl verwaltet Locale-Routen und Nachrichten, jedes Projekt hat lokalisiertes MDX mit dokumentiertem englischem Fallback.
  • Canvas- und 3D-Interaktion: Benutzerdefinierte Canvas-Wellen mit Perlin-artiger Verzerrung, Framer Motion und ein fokussiertes Three.js/React-Three-Fiber-Hero bringen ausdrucksvolle Bewegung, ohne das gesamte Produkt zu einer 3D-Szene zu machen.
  • FUI und Diagnose-Terminal: CRT-Textur, Scanlines, Glitch-Typografie und Statusanzeigen schaffen eine futuristische Oberfläche mit lesbarer Hierarchie.
  • Optionale Sprache und Synchronisation: Lokales Sprachfeedback, Synchronisations-Popup und Audioreihenfolge folgen den Einstellungen und der Browserunterstützung.
  • Koordination von Überlagerungen: Startbildschirm, Navigation, Cursor, Scanlines, Chat, Synchronisations-Popup und 3D-Hero nutzen bewusstes Stacking statt einer festen Ebenenzahl.
  • Design des Oz-Assistenten: /api/chat nutzt neutrales Routing zwischen primärem und Fallback-Service, statische Portfolio-Daten und tieferen MDX-Kontext sowie explizite UI-Tools.
  • Grenzen von Client, Server und State: Provider trennen Theme, Internationalisierung und Musik; Chat-Präferenzen bleiben lokal, der Filter-Store hat einen engen Zweck.
  • MCP und OAuth: Schreibgeschützte Tools sind durch OAuth 2.1, PKCE S256 und den Scope portfolio.read geschützt.
• Abwägungen: Zweckmäßiges Canvas und optionales 3D wurden einer schweren Komplett-3D-Erfahrung vorgezogen; Browserstimme bleibt optionales Feedback.
• Datenfluss: Eingaben erreichen /api/chat, erhalten statische Portfolio-Daten und tieferen MDX-Kontext und liefern eine Streaming-Antwort oder UI-Aktion; unterstützte Browser können lokale Stimme verwenden.
• Der App Router bündelt Seiten, Handler und Infrastrukturdokumente in einer Anwendung.
• next-intl löst lokalisierte Routen auf und lädt Nachrichten für die neun unterstützten Locales.
• Portfolio-Bereiche verwenden typisierte Daten, während Fallstudien als MDX verfasst werden.
• Interaktive Ebenen sind in Client-Komponenten und Provider ausgelagert, wenn sie Browserzustand benötigen.
• Die visuelle Sprache verbindet kontrastreiche Typografie, Terminal-Panels, Rauschen, Scanlinien und Glitch-Details.
• Der Chatbot ruft einen Server-Handler auf, sodass Schlüssel und Anbieterregeln nicht in den Browser gelangen.

Ergebnisse

• Ergebnis: Die Website ermöglicht schnelle Orientierung und eine vertiefte Erklärung der zugrunde liegenden Systeme.
• Qualität und Validierung: ESLint, TypeScript-Prüfung und Produktions-Build sind wiederholbare Qualitätsgates.
• Sicherheitskontrollen: Chat nutzt signierten temporären Lockdown und Rate-Grenzen, MCP nutzt Read-only-Scopes und einmalige Autorisierungscodes.
• Vergleich und Entwicklung: Aus Portfolio: Glass wurde ein modulareres Produkt für lokalisierte Narrative und Agentenzugriff.
• Wirkung: Es zeigt kreatives Frontend neben wartbaren Entscheidungen für Inhalte, Integration, Sicherheit und Deployment.
• Das Projekt ist öffentliche Website und zugleich wartbare Demonstration einer aktuellen Next.js-Architektur.
• Die zentralen Inhalte sind auf Englisch, Tagalog, Deutsch, Spanisch, Französisch, Arabisch, Koreanisch, Japanisch und Chinesisch verfügbar.
• Projekte unterstützen Titelbild, ausführliche Erzählung, Tabellen und gemeinsam genutzte MDX-Komponenten.
• Die Oberfläche bietet Navigation, einen benutzerdefinierten Cursor für präzise Zeiger und optionale Musiksteuerung.
• Operative Routen stellen menschenlesbare Dokumentation und für Tools nutzbare Verträge bereit.

Technische Vertiefung

• Bemerkenswerte Details: CRT-Textur, Glitch-Typografie, Canvas, ein fokussiertes 3D-Hero, Musiksteuerung und lokalisierter Inhalt teilen Verantwortung ohne übergroßen globalen State.
• Verifizierung: Lint, Typprüfung und Produktions-Build sind Quality Gates; responsive, reduced-motion und coarse-pointer Pfade werden bei UI-Änderungen geprüft.
• Optimierungen: Client-only Shells isolieren Browserfähigkeiten; MDX, Datenmodule und modulare Komponenten vermeiden unnötige Interaktion.
• Codequalität: TypeScript-Typen, geordnete Handler, fokussierte Provider, schmale Stores sowie Service- und Sicherheitsmodule machen Ownership nachvollziehbar.
• Links und Referenzen: Siehe components/sections, components/ui, components/chatbot, components/providers, content/projects, messages, data, lib/mcp, lib/security, lib/services und stores.
• /api/chat validiert Same-Origin-Anfragen, wendet den Portfolio-Kontext an und delegiert an den Chatbot-Service. Wenn Missbrauchskontrollen greifen, übermittelt ein signiertes temporäres Lockdown-Cookie die Einschränkung, nicht die Anfrage selbst.
• Ein primärer KI-Anbieter bearbeitet die Anfragen, bei Bedarf übernimmt eine Alternative gemäß der Service-Policy.
• /api/contact übermittelt Formularnachrichten über die SMTP-Konfiguration der Umgebung.
• Der Player verwendet Spotify-Routen für Anmeldung, Callback und die aktuelle Wiedergabe.
• /api/gallery/[slug] ist eine ratenbegrenzte Oberfläche für Medien und unterstützte Projektgalerien.
• Freigegebene Oz-Aktionen können eine Projektgalerie öffnen, wenn sie aktiviert und unterstützt ist, jedoch nicht als universelle Mobile-Aktion.
• Die MCP-Integration veröffentlicht streambares HTTP, ältere SSE-Kompatibilität und eine Gesundheitsprüfung.
• OAuth 2.1 mit PKCE S256 schützt den schreibgeschützten Zugriff für MCP-Clients.
• Einmalige Autorisierungscodes verwenden auf Vercel einen mit Upstash kompatiblen Redis-Dienst, sofern verfügbar.
• Client-Provider begrenzen Theme-, Musik-, Chatbot- und browserabhängige Shell-Zustände.
• Server-Komponenten bereiten Inhalte und Metadaten vor, bevor interaktive Widgets die Darstellung ergänzen.
• Barrierefreiheit stützt sich auf semantische Struktur, beschriftete Controls, nutzbaren Fokus und einen bei grobem Zeiger deaktivierten Cursor.
• Das Internationalisierungs-Middleware leitet Anfragen an die passende Locale weiter.
• Projektkomponenten teilen über die MDX-Schicht Konventionen für Cover, Überschriften und Tabellen.
• Metadaten jeder Seite entstehen aus Sprachkontext und verfügbarem Inhalt.
• Die Navigation verwendet next-intl-Hilfen, um den korrekten Locale-Präfix beizubehalten.
• CSS-Tokens vermeiden verstreute Farben und erlauben die Anpassung der Identität im globalen System.
• Ladebildschirm und Navigation koordinieren sich mit dem Interaktionszyklus des Dokuments.
• Formulare validieren die Grenze zwischen Client und Handler, bevor sie E-Mail senden.
• Gesundheitsrouten bieten eine begrenzte Prüfung integrierter Systeme.
• Öffentliche Inhalte werden aus statischen Daten und MDX gerendert und benötigen keinen Projekt-Speicher zur Laufzeit.
• Die Konfiguration von Geheimnissen bleibt in Umgebungsvariablen und erscheint nie in MDX oder Client-Nachrichten.
• Qualitätsbefehle umfassen ESLint, Typprüfung und Produktions-Build.
• Das Paket legt Node.js 24 LTS mit engines und einer .nvmrc fest.
• Discovery-Ressourcen helfen MCP-Clients und automatisierten Lesern, die Website zu verstehen.
• Visuelle Verbesserungen sind so gestaltet, dass sie bei fehlender Fähigkeit elegant zurückfallen.
• Das responsive Design passt Hierarchie, Abstände und Controls an, bevor es Text beliebig verkürzt.

Reflexionen

• Anders machen: Die anspruchsvollsten visuellen Pfade weiter vereinfachen und die editorische Persönlichkeit bewahren.
• Erfolge: Oberfläche, lokalisierte Narrative, Assistent, Musik und Discovery wirken als ein Produkt.
• Lernpunkte: Reichhaltige Interaktion bleibt wartbar, wenn Server-Integrationen, Browserverhalten und lokalisierter Inhalt klare Grenzen haben.
• Ein intensives visuelles System braucht ausreichend Freiraum, damit der Inhalt im Mittelpunkt bleibt.
• Klare Grenzen zwischen statischen Daten, MDX, Client-Zustand und Server-Services senken die Änderungskosten.
• Performance-Aussagen sollen reproduzierbare Praktiken und Prüfungen beschreiben, nicht kontextlose feste Kennzahlen.

Beiträge

• Frontend und Design: Ich gestaltete das visuelle System, responsive Bereiche, HUD-Komposition, Canvas, 3D-Hero und Content-Präsentation.
• KI und Oz: Ich entwickelte die Streaming-Oberfläche, Primary/Fallback-Routing, Portfolio- und MDX-Kontext sowie UI-Aktionen.
• Sprache, Ebenen und Inhalt: Ich habe lokales Sprach- und Synchronisationsfeedback, Overlay-Koordination, den neunsprachigen MDX-Workflow und den englischen Fallback umgesetzt.
• MCP und Sicherheit: Ich habe den schreibgeschützten Zugriff, OAuth, Discovery, die Same-Origin-Chat-Prüfung und die getrennte temporäre signierte Sperre umgesetzt.
• Interaktion und Animation: Ich stimmte Motion, Scroll, reduced-motion und responsive Interaktion ab.
• Ich entwickelte die visuelle Richtung, Portfolio-Bereiche und wiederverwendbare UI-Komponenten.
• Ich implementierte das MDX-Inhaltssystem, lokalisierte Routen und sprachspezifische Metadaten.
• Ich integrierte Chatbot, Kontaktformular, Spotify und die MCP-Oberfläche mit Sicherheitsgrenzen auf dem Server.

Architektur

• Geschichtete Struktur: Server Components verantworten Locale und Dokumentstruktur, Client Components Browserinteraktion; API-Routen trennen Chat, Kontakt, Medien und MCP.
• Feature-Module:
• Präsentation
  • src/components/sections/ bündelt Hero, About, Experience, Skills, Projects, Contact und Certification.
  • src/components/ui/ enthält GlitchText, Waves, CustomCursor, HeroModel, SkillGraph und visuelle Bausteine.
  • src/components/layout/ enthält Navigation, Startbildschirm und Zurück-nach-oben.
• Inhalt und Zustand
  • src/data/ definiert typisierte statische Daten und src/content/projects/ speichert MDX-Fallstudien.
  • src/messages/ führt übersetzte Nachrichten und src/i18n/ definiert Locales und Request-Auflösung.
  • src/stores/ und src/components/providers/ begrenzen den gemeinsamen Zustand der Client-Erfahrung.
• Services und Routen
  • src/lib/services/chatbot/ abstrahiert KI-Services und src/app/api/ stellt die Handler bereit.
  • src/app/.well-known/, openapi.json, llms.txt und llms-full.txt veröffentlichen Integrationsmetadaten.
• State Management: Provider besitzen Theme, Internationalisierung und Musik; Chat-Präferenzen und Filter-State bleiben auf den nötigen Umfang begrenzt.
• Refactoring und Verbesserungen: Modulare Grenzen erlauben die unabhängige Entwicklung visueller Features, Handler, Inhalte und Integrationen.

Routen- und Systemstruktur

• Lokalisierte Website: /[locale] und /[locale]/projects/[slug] rendern Startseite und jede MDX-Fallstudie.
• Oz, Kontakt und Medien: /api/chat, /api/chat/health, /api/contact, /api/gallery/[slug], /api/spotify/login, /api/spotify/callback und /api/spotify/now-playing bedienen Website-Funktionen.
• Spotify: /api/spotify/login, /api/spotify/callback und /api/spotify/now-playing verbinden den optionalen Player.
• MCP und OAuth: /api/mcp, /api/mcp/message, /api/mcp/sse, /api/mcp/health sowie OAuth-Dokumente unter /.well-known/ bilden die Agentenoberfläche.
• Discovery: /sitemap.xml, /robots.txt, /llms.txt, /llms-full.txt, /auth.md und /openapi.json beschreiben die Website für Crawler und Tools.

Demo

• Editoriale Startseite: Eine Scrollseite verbindet Einleitung, Erfahrung, Skills, Projekte, Zertifikate und Kontakt.
• Interaktive Ebenen: Chatbot, Player und Cursor werden als Verbesserungen geladen, die Gerätefähigkeiten respektieren.
• Projektfallstudien: Jeder Eintrag öffnet eine lokalisierte MDX-Erzählung mit Cover-Komponente und konsistenter Typografie.
• Digitale FUI-Landingpage: CRT, terminalartige Statusanzeigen und Glitch-Details halten den Inhalt im Vordergrund.
• Sprach- und Synchronisationsfeedback: Optionales lokales Audio ist keine Voraussetzung für Navigation oder Lektüre.
• Responsive Raster und lokalisierte Details: Informationsdichte Bereiche und Projektfallstudien passen sich Gerät und gewählter Sprache an.
• Agentenfähige Discovery: OAuth und öffentliche Dokumente beschreiben lesenden Zugriff für kompatible Werkzeuge.

Die Website ist unter franzdomingo.dev veröffentlicht, dieses Repository bleibt privat.