docs: add README with setup guide and project details
This commit is contained in:
Chneemann
parent
e547986940
commit
2a7546ebf9
1 changed files with 123 additions and 29 deletions
138
README.md
138
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:
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## 🚀 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
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
git clone https://codeberg.org/Chneemann/portfolio.git
|
||||
cd portfolio
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
2. **Install dependencies:**
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
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.
|
||||
3. **Start development server:**
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
Open [http://localhost:3000](http://localhost:3000) in your browser.
|
||||
|
||||
## Learn More
|
||||
---
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
## 📁 Repository Structure
|
||||
|
||||
- [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.
|
||||
```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
|
||||
```
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
---
|
||||
|
||||
## Deploy on Vercel
|
||||
## 📜 License & Credits
|
||||
|
||||
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.
|
||||
|
|
|
|||
Loading…
Reference in a new issue