Entwicklung von robinwichmann.com
Konzeption und Entwicklung einer modernen Portfolio-Website mit Next.js und React
PROJEKT
Entwicklung von robinwichmann.com
TECHNOLOGIEN
Herausforderung
Als Webentwickler wollte ich eine persönliche Portfolio-Website schaffen, die nicht nur meine Fähigkeiten zeigt, sondern selbst ein Beispiel für mein Können ist – modern, interaktiv und technisch sauber umgesetzt.
Die größte Herausforderung bestand darin, all meine Anforderungen unter einen Hut zu bringen:
- Eine moderne, ansprechende Benutzeroberfläche mit intuitivem und lebendigem Design, das zum Entdecken und Ausprobieren einlädt
- Schnelle Ladezeiten und optimale Performance
- Responsive Design für alle Geräte
- SEO-Optimierung
- Einfache Wartbarkeit und Erweiterbarkeit
- Barrierefreiheit nach WCAG-Standards
Lösung
Ich entschied mich für einen modernen Tech-Stack, der Leistung, Entwicklerfreundlichkeit und Zukunftssicherheit bietet:
1. Frontend-Framework
Ich wählte Next.js 15 als Framework, das Server-Side Rendering (SSR), statische Seitengenerierung und optimierte Performance bietet. Die Kombination mit React 19 ermöglichte eine effiziente Komponenten-basierte Entwicklung.
2. Sprache und Typisierung
Mit TypeScript konnte ich eine robuste Codebase erstellen, die Typfehler frühzeitig erkennt und die Wartbarkeit verbessert. Die strikte Typisierung sorgt für konsistente Datenstrukturen und erleichtert zukünftige Erweiterungen.
3. Styling und Animationen
TailwindCSS 4 revolutionierte mein Styling-System durch den Einsatz des OKLCH-Farbraums für lebhaftere Farbdarstellung und präzisere Farbverläufe. Die CSS-First-Konfiguration ermöglichte mir, auf eine separate tailwind.config.js zu verzichten und stattdessen Design-Tokens direkt über CSS-Variablen und die @theme-Direktive zu definieren. Besonders für die komplexen Hintergrundanimationen nutzte ich CSS @property-Definitionen in Kombination mit CSS-Variablen, die sich über die Seiten hinweg sanft verändern. Für interaktive Komponenten wie die Bildergalerie setzte ich auf Framer Motion, das mit seiner AnimatePresence-Komponente und gerichteten Transitionen für flüssige Ein- und Ausblendeffekte sorgt, ohne die Performance zu beeinträchtigen.
4. Deployment und Hosting
Die Website wird auf Cloudflare Pages gehostet, was eine globale Content Delivery Network (CDN) Verteilung, automatisches SSL und CI/CD-Integration bietet. Die Seite lädt dadurch weltweit schnell und ist sicher erreichbar.
5. Modulare Datenstruktur
Ich implementierte eine modulare Datenstruktur mit TypeScript-Interfaces, die alle Inhalte der Website in strukturierten, typisierten Formaten organisiert. Dies erleichtert die Wartung und macht Content-Updates einfach.
6. Testing und Qualitätssicherung
Mit Cypress implementierte ich End-to-End-Tests, die kritische Benutzerpfade und Funktionalitäten automatisch überprüfen. Dies stellt sicher, dass neue Features oder Änderungen keine Regressionen verursachen.
Code-Beispiele
Ergebnisse
Die Entwicklung resultierte in einer modernen, performanten Portfolio-Website:
- Lighthouse-Score von über 95 in allen Kategorien (Performance, Accessibility, Best Practices, SEO)
- Schnelle Ladezeiten unter 2 Sekunden auch auf mobilen Netzwerken
- Responsive Design, das auf allen Geräten optimal funktioniert
- Automatisierte Deployment-Pipeline mit Cloudflare Pages
- Umfassende Teststrategie mit Cypress für E2E-Tests
- Modulare, gut strukturierte Codebasis für einfache Erweiterungen
- WCAG-konforme Barrierefreiheit für eine inklusive Nutzererfahrung
- Optimierte Farbpalette mit OKLCH-Farbraum für ein lebendigeres Erscheinungsbild und bessere Farbverläufe, besonders sichtbar bei den seitenspezifischen Hintergrundanimationen
Die Website dient nicht nur als Portfolio, sondern auch als Experimentierfeld für neue Web-Technologien und Best Practices. Durch die gewählte Architektur kann ich neue Features schnell implementieren und testen, während ich gleichzeitig eine optimale Benutzererfahrung biete.
Visuelle Eindrücke
Lighthouse-Bewertung mit ausgezeichneten Werten für Performance, Accessibility, Best Practices und SEO.
