144 lines
7 KiB
Markdown
144 lines
7 KiB
Markdown
# 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.
|
|
|
|
[](https://git.andre-kempf.com/Chneemann/portfolio/actions)
|
|
[](https://andre-kempf.com)
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
## 🚀 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](https://nextjs.org/) (App Router)
|
|
- **UI & Styling:** [React 19](https://react.dev/), [Tailwind CSS v4](https://tailwindcss.com/)
|
|
- **Localization:** [next-intl](https://next-intl-docs.vercel.app/) (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:**
|
|
|
|
```bash
|
|
git clone [https://git.andre-kempf.com/Chneemann/portfolio.git](https://git.andre-kempf.com/Chneemann/portfolio.git)
|
|
cd portfolio
|
|
```
|
|
|
|
2. **Install dependencies:**
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
3. **Start development server:**
|
|
```bash
|
|
npm run dev
|
|
```
|
|
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
|
|
|
---
|
|
|
|
## 📁 Repository Structure
|
|
|
|
```text
|
|
├── 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](mailto:dev@andre-kempf.com))
|
|
- **Design & Code:** Built from scratch with Next.js, React & Tailwind CSS.
|