Mein Entwickler-Portfolio mit Next.js 15 erstellen
Ein tiefer Einblick in den Tech-Stack und die Design-Entscheidungen hinter dieser Portfolio-Website.
Ein Entwickler-Portfolio zu erstellen ist eines dieser Projekte, die oberflächlich einfach erscheinen, aber endlose Möglichkeiten zum Lernen und Experimentieren bieten. So bin ich beim Aufbau meines Portfolios vorgegangen.
Der Tech-Stack
Ich habe einen modernen Stack gewählt, der Entwicklererfahrung mit Performance in Einklang bringt:
- Next.js 15 mit App Router als Framework
- TypeScript für Typsicherheit
- Tailwind CSS v4 für das Styling
- Framer Motion für Animationen
- MDX für Blog-Inhalte
MDX ermöglicht die direkte Verwendung von React-Komponenten in Markdown - perfekt für interaktive Code-Demos und benutzerdefinierte UI-Elemente.
Design-Philosophie
Das Design folgt einem minimalistischen Ansatz mit einer Monospace-Ästhetik unter Verwendung von JetBrains Mono durchgehend. Wichtige Prinzipien:
- Einfachheit zuerst - Klare Layouts, die den Inhalt in den Vordergrund stellen
- Dezente Animationen - Framer Motion für sanfte Übergänge ohne abzulenken
- Konsistente Abstände - Nutzung der Tailwind-Abstandsskala für visuellen Rhythmus
Projektstruktur
Ich habe die Codebasis mit einer Feature-basierten Struktur organisiert:
src/
├── app/ # Next.js App Router Seiten
├── components/
│ ├── layout/ # Navbar, Footer
│ ├── sections/ # Seitenbereiche
│ └── ui/ # Wiederverwendbare Komponenten
├── content/ # MDX Blog-Beiträge
├── data/ # Statische Datendateien
├── lib/ # Hilfsfunktionen
└── types/ # TypeScript-TypenDiese Struktur ist nicht in Stein gemeißelt - passe sie an die Bedürfnisse deines Projekts an. Der Schlüssel ist Konsistenz.
Was ich gelernt habe
Der Aufbau dieses Portfolios hat mehrere wichtige Konzepte verstärkt:
- Type-first Entwicklung zahlt sich in der Wartbarkeit aus
- Komponenten-Komposition macht komplexe UIs handhabbar
- Statische Generierung in Next.js ist unglaublich leistungsstark für Content-Seiten
Was kommt als Nächstes
Ich plane, dieses Portfolio weiter zu verbessern und hinzuzufügen:
- Mehr Blog-Beiträge zu technischen Themen
- Interaktive Demos und Code-Playgrounds
- Performance-Optimierungen
Danke fürs Lesen! Schau dir gerne den Quellcode auf GitHub an.