From 2a7546ebf94153a96883d26045cb32f856b186eb Mon Sep 17 00:00:00 2001 From: Chneemann Date: Wed, 29 Jul 2026 08:40:51 +0200 Subject: [PATCH] docs: add README with setup guide and project details --- README.md | 152 +++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 123 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index e215bc4..b9bdf72 100644 --- a/README.md +++ b/README.md @@ -1,36 +1,130 @@ -This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app). +# AndrΓ© Kempf β€” Developer Portfolio -## Getting Started +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**. -First, run the development server: +![Next.js](https://img.shields.io/badge/Next.js-16-black?style=flat-square&logo=next.js) +![React](https://img.shields.io/badge/React-19-blue?style=flat-square&logo=react) +![Tailwind CSS](https://img.shields.io/badge/Tailwind-v4-38bdf8?style=flat-square&logo=tailwind-css) +![TypeScript](https://img.shields.io/badge/TypeScript-5-blue?style=flat-square&logo=typescript) -```bash -npm run dev -# or -yarn dev -# or -pnpm dev -# or -bun dev +--- + +## πŸš€ 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](https://nextjs.org/) (App Router) +- **UI & Styling:** [React 19](https://react.dev/), [Tailwind CSS](https://tailwindcss.com/) +- **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:** + + ```bash + git clone https://codeberg.org/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 & 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 ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +--- -You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. +## πŸ“œ License & Credits -This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details. +- **Author:** AndrΓ© Kempf ([dev@andre-kempf.com](mailto:dev@andre-kempf.com)) +- **Design & Code:** Built from scratch with Next.js, React & Tailwind CSS.