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 a custom lightweight PHP analytics engine.

---

🚀 Key Features

• Command Palette (Cmd + K): Interactive utility menu with keyboard shortcuts, quick social navigation, resume downloads, and contextual actions.
• Privacy-First Analytics Engine: Custom PHP backend providing real-time page metric tracking using session-based rate limiting and GDPR-compliant IP hashing (no cookie consent required).
• 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
• Icons & Components: Lucide Icons, Custom UI Components
• State & Events: Native CustomEvents, React State

Backend & Analytics

• Language: PHP 8.x
• Data Privacy: One-way IP Hashing (MD5 + daily salt), Session Rate Limiting
• Protocol: JSON REST API (analytics.php)

---

🛠️ 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://codeberg.org/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 & Metadata)
│   │   ├── favicon.ico
│   │   ├── globals.css             # Global Styles & Tailwind Imports
│   │   ├── layout.tsx              # Root Layout (Fonts, Metadata, Providers)
│   │   ├── page.tsx                # Landing Page / Main View
│   │   ├── imprint/                # Imprint Page
│   │   │   └── page.tsx
│   │   └── privacy/                # Privacy Policy Page
│   │       └── page.tsx
│   │
│   ├── 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
│   │   ├── 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 Commands & Actions
│       └── playSudoEasterEgg.ts    # Easter-Egg Shell Simulation Logic
│
├── backend/                        # Lightweight Backend & Mail/Analytics Engine
│   ├── templates/
│   │   └── emailTemplate.php       # HTML/CSS Mail Template
│   ├── analytics.php               # REST API for Traffic & Metrics
│   ├── config.php                  # Security, Rate Limiting & Hashing Setup
│   └── sendMail.php                # Contact Form Mailer & Handler
│
├── public/                         # Static Assets (Client Access)
│   ├── robots.txt                  # Search Engine Directives
│   ├── sitemap.xml                 # XML Sitemap
│   └── assets/
│       ├── icons/                  # SVG Icons & Favicons
│       ├── images/                 # Screenshots & Profile Assets
│       └── projects/               # Project Graphics & Previews
│
├── AGENTS.md                       # AI Agent Instructions
├── CLAUDE.md                       # Claude Code 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.