Multilingual Portfolio Website

This project showcases a modern, responsive portfolio website built with cutting-edge web technologies.

Features

Internationalization (i18n)

The website supports multiple languages (English and German) using next-intl with YAML translations:

• Automatic language detection
• Language switcher that preserves scroll position
• SEO-friendly URLs with locale prefixes

Blog System

A powerful markdown-powered blog system:

• Gray-matter frontmatter parsing
• GitHub Flavored Markdown support
• Syntax highlighting for code blocks
• Mermaid diagram support

Dark Mode

Full dark mode support across all pages with automatic system preference detection.

Tech Stack

Technology	Purpose
Next.js 16	React framework with App Router
TypeScript	Type-safe development
Tailwind CSS	Utility-first styling
DaisyUI	Component library
next-intl	Internationalization

Code Example

// i18n configuration
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

The website is deployed using Docker with a multi-stage build optimized for ARM64 (Raspberry Pi):

1. deps stage: pnpm fetch + install with frozen lockfile
2. builder stage: pnpm build with standalone output
3. runner stage: minimal production image

Results

• Lighthouse performance score: 95+
• Full mobile responsiveness
• Fast page loads with automatic code splitting