Mehrsprachige Portfolio-Website

Dieses Projekt zeigt eine moderne, responsive Portfolio-Website mit modernsten Web-Technologien.

Funktionen

Internationalisierung (i18n)

Die Website unterstützt mehrere Sprachen (Englisch und Deutsch) mit next-intl und YAML-Übersetzungen:

• Automatische Spracherkennung
• Sprachwechsler mit Beibehaltung der Scroll-Position
• SEO-freundliche URLs mit Sprach-Präfixen

Blog-System

Ein leistungsstarkes Markdown-basiertes Blog-System:

• Gray-matter Frontmatter-Parsing
• GitHub Flavored Markdown Unterstützung
• Syntax-Highlighting für Code-Blöcke
• Mermaid Diagramm-Unterstützung

Dark Mode

Vollständige Dark-Mode-Unterstützung auf allen Seiten mit automatischer Systemeinstellungserkennung.

Tech Stack

Technologie	Zweck
Next.js 16	React-Framework mit App Router
TypeScript	Typsichere Entwicklung
Tailwind CSS	Utility-first Styling
DaisyUI	Komponenten-Bibliothek
next-intl	Internationalisierung

Code-Beispiel

// i18n Konfiguration
import { getRequestConfig } from 'next-intl/server';
import yaml from 'js-yaml';
import fs from 'fs';

export default getRequestConfig(async ({ locale }) => {
  const messagesPath = `./messages/${locale}.yml`;
  const messages = yaml.load(fs.readFileSync(messagesPath, 'utf8'));

  return {
    messages,
    timeZone: 'Europe/Berlin'
  };
});

Deployment

Die Website wird mit Docker bereitgestellt, mit einem mehrstufigen Build optimiert für ARM64 (Raspberry Pi):

1. deps-Stufe: pnpm fetch + install mit frozen lockfile
2. builder-Stufe: pnpm build mit standalone output
3. runner-Stufe: minimales Produktions-Image

Ergebnisse

• Lighthouse Performance-Score: 95+
• Vollständige mobile Responsivität
• Schnelle Seitenladezeiten mit automatischem Code-Splitting