Portfolio-Website mit Next.js 16 – Konzept, Design & Umsetzung

Ausgangslage

Als Freelance Web Developer brauchte ich eine professionelle Online-Präsenz, die meine Fähigkeiten demonstriert und gleichzeitig als Referenzprojekt dient. Die Anforderungen waren klar:

• Zweisprachigkeit (Deutsch & Englisch) für den internationalen Markt
• DSGVO-Konformität mit Cookie-Consent, Impressum und Datenschutzerklärung
• Herausragende Performance mit Lighthouse-Scores über 90
• Modernes Design das Seriosität und technische Kompetenz vermittelt

Lösung

Tech Stack

Die Website basiert auf Next.js 16 mit dem App Router und nutzt:

• TypeScript für typsichere Entwicklung
• Tailwind CSS 4 mit shadcn/ui Komponenten für konsistentes Design
• next-intl für Internationalisierung (DE/EN)
• Framer Motion für subtile Animationen
• next-themes für Dark/Light Mode

Architektur

Die App verwendet eine [locale]-basierte Routenstruktur mit serverseitigem Message-Loading. Jede Seite generiert locale-spezifische Metadaten für optimale SEO.

app/
├── [locale]/
│   ├── layout.tsx      # i18n Provider, Theme, Navigation
│   ├── page.tsx        # Homepage mit allen Sections
│   ├── blog/           # Blog & Case Studies
│   ├── impressum/      # Impressum (rechtlich erforderlich)
│   └── datenschutz/    # Datenschutzerklärung

DSGVO-Umsetzung

• Cookie-Banner: Google Analytics wird erst nach expliziter Einwilligung geladen
• Consent-Management: gtag('consent', 'default', { analytics_storage: 'denied' }) als Standardeinstellung
• Kontaktformular: Einwilligungs-Checkbox mit Verweis auf Datenschutzerklärung
• Impressum: Vollständig nach § 5 ECG (E-Commerce Gesetz)

SEO-Optimierung

• JSON-LD Structured Data (Person, WebSite, BreadcrumbList)
• Locale-spezifische Open Graph Tags und hreflang
• Automatische Sitemap-Generierung
• Optimierte Meta-Descriptions pro Seite

Ergebnis

• Lighthouse Performance: 95+
• Lighthouse SEO: 100
• Lighthouse Accessibility: 95+
• Ladezeit: unter 1 Sekunde (First Contentful Paint)
• Vollständige DSGVO-Konformität
• Professionelle Online-Präsenz für Kundenakquise

Tech Stack

Next.js 16 · TypeScript · Tailwind CSS 4 · shadcn/ui · next-intl · Framer Motion · Nodemailer · Zod