Portfolio: Glas

Minimalistisches, glassmorphes Portfolio, erstellt mit Next.js 15 App Router, TypeScript, Tailwind CSS und MDX

LIVE-DEMO (V1) • [GITHUB: Privater Quellcode]

Overview

• Rolle: Alleiniger Entwickler, UI/UX Designer & Frontend-Entwickler
• Stack: Next.js 15 (App Router), React 18, TypeScript, Tailwind CSS 4, Framer Motion, Radix UI, MDX, next-intl
• Wichtigstes Ergebnis: Perfekter PageSpeed-Score von 100/100/100/100 & SEO-Optimierung
• Zusammenfassung: Ein statisch generiertes Entwickler-Portfolio, das High-End-Minimalismus-Ästhetik demonstriert. Es wurde während der Suche nach einer Praktikumsstelle im Bereich Frontend-Engineering entwickelt (in dessen Verlauf ich erfolgreich bei Trend Micro eingestiegen bin). Mit modularen UI-Primitiven, lokalisierten Inhalten und vollständig responsiven glassmorphen Oberflächen.

The Problem

• Herausforderung: Die größte Herausforderung bestand darin, als Entwickler in einer frühen Phase seiner Design-Reise eine kohärente visuelle Sprache von Grund auf zu implementieren. Da dies erst das zweite Mal war, dass ich eine Portfolio-Website von Grund auf neu entworfen habe, erwies es sich als schwierig, den richtigen Ausgangspunkt zu finden, ausgewogene Layouts zu erstellen und eine hohe ästhetische Qualität ohne fertige Vorlagen zu gewährleisten.
• Zielgruppe: Technische Recruiter, Engineering Leads und Teams bei Unternehmen, bei denen ich mich zu dieser Zeit für Praktika beworben habe (wie z. B. Trend Micro).
• Einschränkungen: Erzielung einer konsistenten, mattierten glassmorphen UI über mehrere Mobil- und Desktop-Browser hinweg bei gleichzeitiger Beibehaltung kleiner initialer Client-Bundle-Größen, responsiver Seiten und der Erfüllung von Barrierefreiheitsstandards.

Approach & Decisions

• Architektur: Next.js App Router für mehrsprachige Seiten. Basiert auf React Server Components (RSC) zum Rendern statischer Markdown-Seiten (MDX), kombiniert mit Client-Komponenten nur dort, wo interaktive Elemente (Animationen, Dock, Befehlsmenü) erforderlich sind.
• Wichtige Entscheidungen:
  • Start mit Tailwind CSS 4: Nutzung früher Builds von Tailwind 4 zur Implementierung flüssiger CSS-Glassmorph-Variablen, benutzerdefinierter Backdrop-Filter und Randverläufe.
  • Modulare UI-Primitive: Erstellung wiederverwendbarer Layout-Blöcke (ui/, motion-primitives/, dock/), um verschiedene Ansichten einfach zu erstellen, ohne technische Schulden anzuhäufen.
  • next-intl für mehrsprachigen Support: Strukturierung der Codebasis zur nativen Unterstützung der Internationalisierung für Englisch und andere Zielsprachen.
• Kompromisse: Entscheidung für statische Generierung mit clientseitiger Komponenten-Hydratisierung anstelle von dynamischem Server-Rendering zur Optimierung der Ladezeiten, wodurch jedoch dynamische Echtzeit-Datenbankinteraktionen eingeschränkt wurden.
• Datenfluss: Seitenanfragen direkt auf statische MDX-Kompilierungen abgebildet, die in Layout-Vorlagen eingebunden sind. Client-Zustände verwaltet über React-Hooks für Menüs, Theme-Umschalter und Modals.

Key Results & Impact

• Ergebnis: Eine ausgefeilte, moderne glassmorphe Oberfläche, die unglaublich schnell lädt und in Suchmaschinen gut rankt.
• Lighthouse-Performance: Perfekter Score von 100 / 100 / 100 / 100 bei PageSpeed Insights für Mobilgeräte und Desktops in den Bereichen Performance, Barrierefreiheit, Best Practices und SEO.
• Kontext: Erstellt während einer Phase aktiver Praktikumssuche, was schließlich zu einer Anstellung bei Trend Micro führte.
• Einschränkungen bei der Optimierung: Bei diesem V1-Projekt war die Optimierung streng auf die Standard-Suchmaschinenoptimierung (SEO) beschränkt. Moderne Optimierungsparadigmen wie KI-Optimierung (AIO), Answer Engine Optimization (AEO) und Generative Engine Optimization (GEO) fehlten vollständig und wurden erst im V2-Layout adressiert.
• Vergleich: Dies war das V1-Layout. Obwohl es hochperformant war, fehlten ihm die benutzerdefinierte Terminal-Interaktivität, die 3D-Canvas-Physik und der sprachgesteuerte KI-Chatbot des V2-Layouts (Portfolio: Cyberpunk).
• Auswirkung: Nachgewiesene Fähigkeit, High-Fidelity-Benutzeroberflächendesigns auszuführen und suchmaschinenoptimierte React-Codebasen aufzubauen.

Technical Deep Dive

• Besondere Details: Interaktive animierte Dock-Navigation, benutzerdefinierte Milchglaseffekte mit Backdrop-Utilities, CMD+K Befehlssuchmenü.
• Verifizierung: Lokal erstellt und getestet mit next build sowie Laufzeit-Profiling mit Lighthouse, Vercel Analytics und manueller Layout-Prüfung in Safari, Chrome und Firefox.
• Optimierungen: Statische Seitengenerierung (SSG) für alle MDX-Seiten, verzögertes Laden schwerer interaktiver Client-Komponenten und Bildoptimierung mit Standard-Next.js-Bildkonfigurationen.
• Codequalität: Durchsetzung strenger TypeScript-Prüfungen, Formatierungs- und Linting-Regeln.
• Links: Siehe die Ordnerstrukturen in package.json und components/.

Reflections

• Anders machen: Ich hätte vorher ein Design-System oder visuelle Richtlinien in Figma etabliert. Das direkte Entwerfen im Code führte als relativer Neuling im Design zu mehreren Iterationszyklen des Layouts, bevor die endgültige kohärente glassmorphe Ästhetik erreicht wurde.
• Erfolge: Perfekter 100/100 PageSpeed-Score und Bereitstellung einer eleganten, sauberen Milchglas-Ästhetik.
• Lehren: Ein minimalistisches Design sieht einfach aus, erfordert jedoch präzise Abstände, typografische Hierarchie und Paddings, um professionell zu wirken. Die Implementierung von glassmorphen Oberflächen erfordert zudem sorgfältige Backdrop-Filter-Fallbacks für die Browserkompatibilität.

My Contributions

• Volle Verantwortung: Design, Architektur und 100-prozentige Implementierung des Projekts von Grund auf, einschließlich UI-Design, Layoutsystemen, Komponentenstruktur, Animationen und Lokalisierungskonfigurationen.

Project Architecture

Diese Anwendung nutzt ein strukturiertes Next.js App Router-Muster, das für die statische clientseitige Generierung konfiguriert ist.

• Schichtenstruktur: Globale Konfigurationen und Core-Layout-Wrapper verwalten Theme-Provider und Basis-Styling, während MDX-Loader die rohen Markdown-Dateien analysieren.
• Feature-Module:
  • components/ui/ - Layoutmodule und visuelle Kernkomponenten.
  • components/motion-primitives/ - Animierte Wrapper für reibungslose Übergänge.
  • components/dock/ - Anpassbares schwebendes Navigations-Utility.
• Zustandsverwaltung: Hält den clientseitigen Zustand lokal innerhalb einzelner Wrapper (z. B. Indizes aktiver Elemente, Sichtbarkeit von Overlays).

Routen- und Ressourcen-Mapping

Im Gegensatz zur V2-Architektur (Cyberpunk) ist V1 ein leichtgewichtiges, reines Client-Build:

• Was es hat:
  • Statische Root- und Anker-Routen: Single-Page-Struktur unter Verwendung von Fragment-Routing (#home, #about, #featured-projects, #experience-education-certificates, #blog, #connect).
  • Metadaten & Discovery: Lokalisierte Manifestdateien (/site.webmanifest, /browserconfig.xml).
  • Hydratisierte Hydrations-Bundles: Statische Next-Chunks für Layout, Seitenelemente und verzögerte Ladezustände.
• Was es nicht hat:
  • Keine Backend-APIs: Es fehlen Stream-Endpunkte, Musik-Routen oder Chatbot-Handler (/api/chat, /api/music).
  • Keine KI- / Agenten-Integrationen: Es fehlen Model Context Protocol (MCP) Endpunkte (/api/mcp) und LLM-Discovery-Textschemata (/llms.txt, /llms-full.txt) vollständig.

Demo Preview

• Glassmorphe Landingpage: Milchglas-Panels, dezente farbige Hintergründe und präzise typografische Ausrichtung.
• Animierte Dock-Navigation: Reibungslose, mausgesteuerte Dock-Icon-Erweiterung und Sektionsansteuerung.
• Befehlsmenü (CMD+K): Sofortiges Overlay-Menü für direkte Seitennavigation und Tastaturkürzel.
• Live-Demo-Link: Das Live-Projekt kann unter franzdomingov1.vercel.app eingesehen werden.

Hosting-Hinweis:
Das V1 Glas-Portfolio ist auf Vercel bereitgestellt und über die oben genannten Live-Demo-Links erreichbar. Bitte beachten Sie, dass das Hauptportfolio seitdem auf das Cyberpunk-Layout (V2) aktualisiert wurde.