Portfolio Website with Next.js 16 – Concept, Design & Implementation

Starting Point

As a freelance web developer, I needed a professional online presence that demonstrates my skills while serving as a reference project. The requirements were clear:

• Bilingual (German & English) for the international market
• GDPR compliance with cookie consent, legal notice and privacy policy
• Outstanding performance with Lighthouse scores above 90
• Modern design that conveys professionalism and technical competence

Solution

Tech Stack

The website is built on Next.js 16 with the App Router and uses:

• TypeScript for type-safe development
• Tailwind CSS 4 with shadcn/ui components for consistent design
• next-intl for internationalization (DE/EN)
• Framer Motion for subtle animations
• next-themes for Dark/Light Mode

Architecture

The app uses a [locale]-based routing structure with server-side message loading. Each page generates locale-specific metadata for optimal SEO.

app/
├── [locale]/
│   ├── layout.tsx      # i18n Provider, Theme, Navigation
│   ├── page.tsx        # Homepage with all sections
│   ├── blog/           # Blog & Case Studies
│   ├── impressum/      # Legal notice (legally required)
│   └── datenschutz/    # Privacy policy

GDPR Implementation

• Cookie Banner: Google Analytics only loads after explicit consent
• Consent Management: gtag('consent', 'default', { analytics_storage: 'denied' }) as default
• Contact Form: Consent checkbox with link to privacy policy
• Legal Notice: Complete according to § 5 ECG (E-Commerce Act)

SEO Optimization

• JSON-LD Structured Data (Person, WebSite, BreadcrumbList)
• Locale-specific Open Graph tags and hreflang
• Automatic sitemap generation
• Optimized meta descriptions per page

Result

• Lighthouse Performance: 95+
• Lighthouse SEO: 100
• Lighthouse Accessibility: 95+
• Load Time: under 1 second (First Contentful Paint)
• Full GDPR compliance
• Professional online presence for client acquisition

Tech Stack

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