Meine Portfolio Website
Meine Portfolio-Website ist ein komplett neu entwickeltes Projekt, das ich von Grund auf gestaltet und technisch umgesetzt habe. Ziel war es, meine Arbeiten strukturiert, modern und authentisch darzustellen – mit Fokus auf Performance, Klarheit und einer angenehmen User Experience. Das Layout, die Animationen und das Designsystem wurden in Figma geplant und anschließend mit Next.js, TailwindCSS und Framer Motion realisiert.
Übersicht
- Kategorie: Web Development · UI/UX Design · Branding · Frontend Engineering
- Zeitraum: 2025
- Aufgaben:
- Konzeption & Moodboard
- UI/UX Design, Wireframes, Komponenten-System
- Entwicklung in Next.js (App Router)
- Responsive Layouts & Animationen
- Content-Struktur, Slug-basierte Projektseiten, Image-Handling
- Git-Versionierung & Deployment
- Tools & Technologien:
- Next.js · React · TailwindCSS · Framer Motion
- GitHub (Repository & Version Control)
- Figma (Design, Prototyping)
- Milanote (Moodboard, Strukturierung)
Problemstellung
Ich wollte eine Portfolio-Website, die sowohl technisch als auch gestalterisch meinen aktuellen Fähigkeiten entspricht. Alte Projekte von mir waren teilweise unübersichtlich oder zu statisch aufgebaut und boten keine flexible Möglichkeit, Arbeiten sauber zu präsentieren. Zudem brauchte ich ein System, in dem ich Projekte jederzeit erweitern oder neu strukturieren kann – ohne mich durch WordPress-Limitierungen zu kämpfen.
Konzeption
Design
Implementierung
Ergebnis
Das Ergebnis ist ein schlankes, modernes Portfolio, das schnell lädt, klar strukturiert ist und sich angenehm bedienen lässt. Die flexible Architektur mit dynamischen Slugs ermöglicht es, neue Projekte in wenigen Minuten anzulegen. Das Design ist reduziert, aber charakterstark, unterstützt durch gezielte Animationen und ein konsistentes Farb- & Typografiesystem. Durch TailwindCSS konnte ich sauber und effizient entwickeln, während Next.js für Performance und Ordnung im Code sorgt.
Desktop
Laptop
Mobile
Learnings
- Ein eigenes Designsystem erspart extrem viel Aufwand beim Bau einer skalierbaren Website
- Gute Vorbereitung (Milanote, Moodboard, Struktur) beschleunigt spätere Entscheidungen
- Animationen sollten sparsam eingesetzt werden – kleine Microinteractions haben die größte Wirkung
- Git-Versionierung macht Änderungen nachvollziehbar und sorgt dafür, dass Ideen risikofrei ausprobiert werden können
- Der App Router von Next.js ist mächtig, aber verlangt gute Strukturierung, besonders bei dynamischen Projektseiten
