Persönliches Portfolio
Eine umfassende Präsentation meiner Frontend-Entwicklungsfähigkeiten, erstellt mit Next.js 16, TypeScript und Tailwind CSS v4. Mit flüssigen Animationen, mehrsprachiger Unterstützung und einer kreativen Terminal-404-Seite.
Die Herausforderung
Ein Portfolio zu erstellen, das technische Fähigkeiten effektiv präsentiert und gleichzeitig eine saubere, professionelle Ästhetik beibehält. Das Ziel war es, etwas zu bauen, das moderne Frontend-Fähigkeiten demonstriert, ohne Leistung oder Barrierefreiheit zu opfern.
Technische Entscheidungen
Next.js 16 mit App Router
Die neueste Version von Next.js bietet hervorragende Leistung mit Turbopack und dem App Router-Muster. Wichtige Vorteile:
- Server Components für optimale Leistung
- Statische Generierung für blitzschnelle Seitenladezeiten
- Eingebaute Internationalisierung
- Dateibasiertes Routing für saubere Projektstruktur
Tailwind CSS v4
Für das Styling habe ich Tailwind CSS v4 gewählt wegen:
- Utility-first-Ansatz für schnelles Prototyping
- CSS-Variablen-Theming für konsistente Design-Token
- Hervorragende Leistung mit automatischem Purging
- Großartige Entwicklererfahrung mit IDE-Unterstützung
Framer Motion
Animationen werden von Framer Motion angetrieben und bieten:
- Deklarative API für komplexe Animationen
- Federphysik für natürliche Bewegungen
- Layout-Animationen für sanfte Übergänge
- Gestenunterstützung für interaktive Elemente
Hauptfunktionen
Mehrsprachige Unterstützung
Vollständige i18n-Implementierung mit Englisch und Deutsch, einschließlich:
- URL-basierter Sprachumschaltung
- Übersetzte Inhalte und UI-Texte
- SEO-optimierte alternative Links
Blog-Plattform
MDX-basierter technischer Blog mit:
- Syntax-Highlighting mit Shiki
- Benutzerdefinierten Callout-Komponenten
- Lesezeitschätzung
- Tag-basierter Filterung
Kreative 404-Seite
Eine Terminal-404-Seite, die:
- Befehlszeilen-Interaktionen simuliert
- Spielerische Fehlermeldungen zeigt
- Klare Navigationsoptionen bietet
Was ich gelernt habe
Der Bau dieses Portfolios hat mehrere wichtige Konzepte verstärkt:
- Type-first-Entwicklung zahlt sich in der Wartbarkeit aus
- Komponentenkomposition macht komplexe UIs handhabbar
- Statische Generierung ist unglaublich leistungsfähig für Inhaltsseiten
- Barrierefreiheit ist wichtig - semantisches HTML und Tastaturnavigation
Quellcode
Der vollständige Quellcode ist auf GitHub verfügbar. Fühlen Sie sich frei, ihn zu erkunden, davon zu lernen oder für Ihre eigenen Projekte zu forken.