André Kempf — Developer Portfolio

A fast, privacy-focused, and accessible developer portfolio built with Next.js 16 (App Router), Tailwind CSS, and React 19, backed by multi-language support (next-intl) and a custom analytics setup.

---

🚀 Key Features

• Command Palette (Cmd + K): Interactive utility menu with keyboard shortcuts, quick social navigation, resume downloads, and contextual actions.
• Internationalization (next-intl): Fully integrated multi-language support (English and German) with localized routing (/en, /de) and dynamic message loading.
• Privacy-First Analytics Engine: Custom Next.js API backend providing real-time page metric tracking using session-based rate limiting and GDPR-compliant IP hashing.
• Terminal Inspector: Integrated terminal widget and modal to view live system metrics, device usage ratios, and ping response latency.
• Performance & Accessibility: Zero layout shifts (CLS), optimized font loading, dynamic SSR/client component boundaries, and high contrast Dark/Slate aesthetic.

---

🛠️ Tech Stack & Architecture

Frontend

• Framework: Next.js 16 (App Router)
• UI & Styling: React 19, Tailwind CSS v4
• Localization: next-intl (Routing, Middleware Proxy & Client/Server translation context)
• Icons & Components: Lucide Icons, Custom UI Components
• State & Events: Native CustomEvents, React State

Backend & Analytics

• Runtime: Node.js / Next.js API Routes (App Router)
• Data Privacy: One-way IP Hashing (SHA-256 / daily salt), Session Rate Limiting
• Protocol: JSON REST API / Server Actions

Infrastructure & CI/CD

• Hosting: VPS / Docker Containers
• CI/CD Pipeline: Self-hosted Forgejo Actions (Automated build & SSH deployment)
• Mirroring: Automated sync to GitHub

---

🛠️ Getting Started

Prerequisites

• Node.js: v18.18.0 or higher (v20+ / v26+ recommended)
• Package Manager: npm / pnpm / yarn

Local Setup

1. Clone the repository:

   git clone [https://git.andre-kempf.com/Chneemann/portfolio.git](https://git.andre-kempf.com/Chneemann/portfolio.git)
   cd portfolio
   

2. Install dependencies:

   npm install
   

3. Start development server:

   npm run dev
   

   Open http://localhost:3000 in your browser.

---

📁 Repository Structure

├── src/                            # Source Code
│   ├── app/                        # Next.js App Router (Pages, Routes & API)
│   │   ├── [locale]/               # Localized App Routes (en / de)
│   │   │   ├── layout.tsx          # Localized Layout (NextIntlClientProvider & Shell UI)
│   │   │   └── page.tsx            # Landing Page / Main View
│   │   ├── api/                    # Native Next.js Route Handlers
│   │   │   └── analytics/
│   │   │       └── route.ts        # Live Metrics & Traffic Handler (JSON-based)
│   │   ├── imprint/
│   │   │   └── page.tsx            # Imprint Page
│   │   ├── privacy/
│   │   │   └── page.tsx            # Privacy Policy Page
│   │   ├── globals.css             # Global Styles & Tailwind Imports
│   │
│   ├── components/                 # Reusable UI & Layout Components
│   │   ├── About.tsx               # About Me & Bio Section
│   │   ├── AnalyticsModal.tsx      # Terminal-Style Analytics Modal
│   │   ├── AnalyticsWidget.tsx     # Footer Performance & Metrics Badge
│   │   ├── Background.tsx          # Dynamic Canvas / Background Effects
│   │   ├── CommandPalette.tsx      # Cmd+K Interactive Command Menu
│   │   ├── Contact.tsx             # Contact Form Section (Formspree Integration)
│   │   ├── Footer.tsx              # Footer with Links & Credits
│   │   ├── Header.tsx              # Navigation Header & Search Trigger
│   │   ├── Hero.tsx                # Hero Section / Intro Banner
│   │   ├── Portfolio.tsx           # Project Showcase & Cards
│   │   ├── Skills.tsx              # Tech Stack & Skill Matrix
│   │   └── Social.tsx              # Social Media Links & Bar Component
│   │
│   ├── lib/                        # Pure Utility Scripts, Configs & Helpers
│   │   ├── paletteCommands.ts      # Registered Cmd+K Commands & Actions
│   │   └── playSudoEasterEgg.ts    # Easter-Egg Shell Simulation Logic
│   │
│   ├── i18n/                       # Localization Core & Configurations
│   │   ├── messages/               # Translation JSON files (en.json, de.json)
│   │   ├── navigation.ts           # Localized navigation utilities (Link, redirect, useRouter)
│   │   ├── request.ts              # Dynamic message loading per request locale
│   │   └── routing.ts              # Supported locales and default fallback rules
│   │
│   └── proxy.ts                    # Next.js Middleware Proxy for next-intl routing
│
├── public/                         # Static Assets (Client Access)
│   ├── robots.txt                  # Search Engine Directives
│   ├── sitemap.xml                 # XML Sitemap
│   └── assets/
│       ├── downloads/              # Downloadable Files (e.g. CV PDF)
│       ├── icons/                  # SVG Icons & Favicons
│       ├── images/                 # Profile Assets & Screenshots
│       └── projects/               # Project Graphics & Previews
│
├── Dockerfile                      # Container Build Instructions
├── eslint.config.mjs               # ESLint Rules
├── next.config.ts                  # Next.js Configuration
├── package.json                    # Project Dependencies & Scripts
├── postcss.config.mjs              # PostCSS Setup
├── README.md                       # Project Documentation
└── tsconfig.json                   # TypeScript Compiler Rules

---

📜 License & Credits

• Author: André Kempf (dev@andre-kempf.com)
• Design & Code: Built from scratch with Next.js, React & Tailwind CSS.