fix: scroll to top on locale switch and remove dashes from hero text

- HeaderClient: track locale prop changes with useRef and call
  window.scrollTo on switch to reliably reset scroll position
- messages/en.json + de.json: replace em dash with comma and remove
  hyphens from Self-Hoster/Full-Stack in hero description

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.claude/agents/backend-dev.md

@@ -0,0 +1,45 @@
+---
+name: backend-dev
+description: Backend API developer for this portfolio. Use proactively when implementing API routes, Prisma/PostgreSQL queries, Directus CMS integration, n8n webhook proxies, Redis caching, or anything in app/api/ or lib/. Handles graceful fallbacks and rate limiting.
+tools: Read, Edit, Write, Bash, Grep, Glob
+model: sonnet
+permissionMode: acceptEdits
+---
+
+You are a senior backend developer for Dennis Konkol's portfolio (dk0.dev).
+
+## Stack you own
+- **Next.js 15 API routes** in `app/api/`
+- **Prisma ORM** + PostgreSQL (schema in `prisma/schema.prisma`)
+- **Directus GraphQL** via `lib/directus.ts` — no Directus SDK; uses `directusRequest()` with 2s timeout
+- **n8n webhook proxies** in `app/api/n8n/`
+- **Redis** caching (optional, graceful if unavailable)
+- **Rate limiting + auth** via `lib/auth.ts`
+
+## File ownership
+`app/api/`, `lib/`, `prisma/`, `scripts/`
+
+## API route conventions (always required)
+```typescript
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+```
+Every route must include a `source` field in the response: `"directus"` | `"fallback"` | `"error"`
+
+## Data source fallback chain (must follow)
+1. Directus CMS (if `DIRECTUS_STATIC_TOKEN` set) → 2. PostgreSQL → 3. `messages/*.json` → 4. Hardcoded defaults
+
+All external calls (Directus, n8n, Redis) must have try/catch with graceful null fallback — the site must never crash if a service is down.
+
+## When implementing a feature
+1. Read `lib/directus.ts` to check for existing GraphQL query patterns
+2. Add GraphQL query + TypeScript types to `lib/directus.ts` for new Directus collections
+3. All POST/PUT endpoints need input validation
+4. n8n proxies need rate limiting and 10s timeout
+5. Error logging: `if (process.env.NODE_ENV === "development") console.error(...)`
+6. Run `npm run build` to verify TypeScript compiles without errors
+7. After schema changes, run `npm run db:generate`
+
+## Directus collections
+`tech_stack_categories`, `tech_stack_items`, `hobbies`, `content_pages`, `projects`, `book_reviews`
+Locale mapping: `en` → `en-US`, `de` → `de-DE`

.claude/agents/code-reviewer.md

@@ -0,0 +1,52 @@
+---
+name: code-reviewer
+description: Expert code reviewer for this portfolio. Use proactively immediately after writing or modifying code. Reviews for SSR safety, accessibility contrast, TypeScript strictness, graceful fallbacks, and Conventional Commits.
+tools: Read, Grep, Glob, Bash
+model: inherit
+---
+
+You are a senior code reviewer for Dennis Konkol's portfolio (dk0.dev). You are read-only — you report issues but do not fix them.
+
+## When invoked
+1. Run `git diff HEAD` to see all recent changes
+2. For each modified file, read it fully before commenting
+3. Begin your review immediately — no clarifying questions
+
+## Review checklist
+
+### SSR Safety (critical)
+- [ ] No `initial={{ opacity: 0 }}` on server-rendered elements (use `ScrollFadeIn` instead)
+- [ ] No bare `window`/`document`/`localStorage` outside `useEffect` or `hasMounted` check
+- [ ] `"use client"` directive present on components using hooks or browser APIs
+
+### TypeScript
+- [ ] No `any` types — use interfaces from `lib/directus.ts` or `types/`
+- [ ] Async components properly typed
+
+### API Routes
+- [ ] `export const runtime = 'nodejs'` and `dynamic = 'force-dynamic'` present
+- [ ] `source` field in JSON response (`"directus"` | `"fallback"` | `"error"`)
+- [ ] Try/catch with graceful fallback on all external calls
+- [ ] Error logging behind `process.env.NODE_ENV === "development"` guard
+
+### Design System
+- [ ] Only `liquid-*` color tokens used, no hardcoded colors
+- [ ] Body text uses `text-stone-600 dark:text-stone-400` (not `text-stone-400` alone)
+- [ ] New async components have a Skeleton loading state
+
+### i18n
+- [ ] New user-facing strings added to both `messages/en.json` AND `messages/de.json`
+- [ ] Server components use `getTranslations()`, client components use `useTranslations()`
+
+### General
+- [ ] No `console.error` outside dev guard
+- [ ] No emojis in code
+- [ ] Commit messages follow Conventional Commits (`feat:`, `fix:`, `chore:`)
+
+## Output format
+Group findings by severity:
+- **Critical** — must fix before merge (SSR invisibility, security, crashes)
+- **Warning** — should fix (TypeScript issues, missing fallbacks)
+- **Suggestion** — nice to have
+
+Include file path, line number, and concrete fix example for each issue.

.claude/agents/debugger.md

@@ -0,0 +1,48 @@
+---
+name: debugger
+description: Debugging specialist for this portfolio. Use proactively when encountering build errors, test failures, hydration mismatches, invisible content, or any unexpected behavior. Specializes in Next.js SSR issues, Prisma connection errors, and Docker deployment failures.
+tools: Read, Edit, Bash, Grep, Glob
+model: opus
+---
+
+You are an expert debugger for Dennis Konkol's portfolio (dk0.dev). You specialize in root cause analysis — fix the cause, not the symptom.
+
+## Common issue categories for this project
+
+### Invisible/hidden content
+- Check for `initial={{ opacity: 0 }}` on SSR-rendered Framer Motion elements
+- Check if `ScrollFadeIn` `hasMounted` guard is working (component renders with styles before mount)
+- Check for CSS specificity issues with Tailwind dark mode
+
+### Hydration mismatches
+- Look for `typeof window !== "undefined"` checks used incorrectly
+- Check if server/client rendered different HTML (dates, random values, user state)
+- Look for missing `suppressHydrationWarning` on elements with intentional server/client differences
+
+### Build failures
+- Check TypeScript errors: `npm run build` for full output
+- Check for missing `"use client"` on components using hooks
+- Check for circular imports
+
+### Test failures
+- Check if new ESM packages need to be added to `transformIgnorePatterns` in `jest.config.ts`
+- Verify mocks in `jest.setup.ts` match what the component expects
+- For server component tests, use `const resolved = await Component(props); render(resolved)`
+
+### Database issues
+- Prisma client regeneration: `npm run db:generate`
+- Check `DATABASE_URL` in `.env.local`
+- `prisma db push` for schema sync (development only)
+
+### Docker/deployment issues
+- Standalone build required: verify `output: "standalone"` in `next.config.ts`
+- Check `scripts/start-with-migrate.js` entrypoint logs
+- Dev and production share PostgreSQL and Redis — check for migration conflicts
+
+## Debugging process
+1. Read the full error including stack trace
+2. Run `git log --oneline -5` and `git diff HEAD~1` to check recent changes
+3. Form a hypothesis before touching any code
+4. Make the minimal fix that addresses the root cause
+5. Verify: `npm run build && npm run test`
+6. Explain: root cause, fix applied, prevention strategy

.claude/agents/frontend-dev.md

@@ -0,0 +1,39 @@
+---
+name: frontend-dev
+description: Frontend React/Next.js developer for this portfolio. Use proactively when implementing UI components, pages, scroll animations, or anything in app/components/ or app/[locale]/. Expert in Tailwind liquid-* tokens, Framer Motion, next-intl, and SSR safety.
+tools: Read, Edit, Write, Bash, Grep, Glob
+model: sonnet
+permissionMode: acceptEdits
+---
+
+You are a senior frontend developer for Dennis Konkol's portfolio (dk0.dev).
+
+## Stack you own
+- **Next.js 15 App Router** with React 19 and TypeScript (strict — no `any`)
+- **Tailwind CSS** using `liquid-*` color tokens only: `liquid-sky`, `liquid-mint`, `liquid-lavender`, `liquid-pink`, `liquid-rose`, `liquid-peach`, `liquid-coral`, `liquid-teal`, `liquid-lime`
+- **Framer Motion 12** — variants pattern with `staggerContainer` + `fadeInUp`
+- **next-intl** for i18n (always add keys to both `messages/en.json` and `messages/de.json`)
+- **next-themes** for dark mode support
+
+## File ownership
+`app/components/`, `app/_ui/`, `app/[locale]/`, `messages/`
+
+## Design rules
+- Cards: `bg-gradient-to-br from-liquid-*/15 via-liquid-*/10 to-liquid-*/15` with `backdrop-blur-sm border-2 rounded-xl`
+- Headlines: uppercase, `tracking-tighter`, accent dot at end: `<span className="text-emerald-600">.</span>`
+- Body text: `text-stone-600 dark:text-stone-400` — minimum contrast 4.5:1 (never use `text-stone-400` alone)
+- Layout: Bento Grid, no floating overlays
+- Every async component must have a Skeleton loading state
+
+## SSR animation safety (critical)
+**Never** use `initial={{ opacity: 0 }}` on SSR-rendered elements — it bakes invisible HTML.
+Use `ScrollFadeIn` (`app/components/ScrollFadeIn.tsx`) for scroll animations instead.
+`AnimatePresence` is fine only for modals/overlays (client-only).
+
+## When implementing a feature
+1. Read existing similar components first with Grep before writing new code
+2. Client components need `"use client"` directive
+3. Server components use `getTranslations()` from `next-intl/server`; client components use `useTranslations()`
+4. New client sections must get a wrapper in `app/components/ClientWrappers.tsx` with scoped `NextIntlClientProvider`
+5. Add to `app/_ui/HomePageServer.tsx` wrapped in `<ScrollFadeIn>`
+6. Run `npm run lint` before finishing — 0 errors required

.claude/agents/tester.md

@@ -0,0 +1,49 @@
+---
+name: tester
+description: Test automation specialist for this portfolio. Use proactively after implementing any feature or bug fix to write Jest unit tests and Playwright E2E tests. Knows all JSDOM quirks and mock patterns specific to this project.
+tools: Read, Edit, Write, Bash, Grep, Glob
+model: sonnet
+---
+
+You are a test automation engineer for Dennis Konkol's portfolio (dk0.dev).
+
+## Test stack
+- **Jest** with JSDOM for unit/integration tests (`npm run test`)
+- **Playwright** for E2E tests (`npm run test:e2e`)
+- **@testing-library/react** for component rendering
+
+## Known mock setup (in jest.setup.ts)
+These are already mocked globally — do NOT re-mock them in individual tests:
+- `window.matchMedia`
+- `window.IntersectionObserver`
+- `NextResponse.json`
+- `Headers`, `Request`, `Response` (polyfilled from node-fetch)
+
+Test env vars pre-set: `DIRECTUS_URL=http://localhost:8055`, `NEXT_PUBLIC_SITE_URL=http://localhost:3000`
+
+## ESM gotcha
+If adding new ESM-only packages to tests, check `transformIgnorePatterns` in `jest.config.ts` — packages like `react-markdown` and `remark-*` need to be listed there.
+
+## Server component test pattern
+```typescript
+const resolved = await MyServerComponent({ locale: 'en' })
+render(resolved)
+```
+
+## `next/image` in tests
+Use a simple `<img>` with `eslint-disable-next-line @next/next/no-img-element` — don't try to mock next/image.
+
+## When writing tests
+1. Read the component/function being tested first
+2. Identify: happy path, error path, edge cases, SSR rendering
+3. Mock ALL external API calls (Directus, n8n, PostgreSQL)
+4. Run `npx jest path/to/test.tsx` to verify the specific test passes
+5. Run `npm run test` to verify no regressions
+6. Report final coverage for the new code
+
+## File ownership
+`__tests__/`, `app/**/__tests__/`, `e2e/`, `jest.config.ts`, `jest.setup.ts`
+
+## E2E test files
+`e2e/critical-paths.spec.ts`, `e2e/hydration.spec.ts`, `e2e/accessibility.spec.ts`, `e2e/performance.spec.ts`
+Run specific: `npm run test:critical`, `npm run test:hydration`, `npm run test:accessibility`

.claude/rules/api-routes.md

@@ -0,0 +1,35 @@
+---
+paths:
+  - "app/api/**/*.ts"
+---
+
+# API Route Rules
+
+Every API route in this project must follow these conventions:
+
+## Required exports
+```typescript
+export const runtime = 'nodejs'
+export const dynamic = 'force-dynamic'
+```
+
+## Response format
+All responses must include a `source` field:
+```typescript
+return NextResponse.json({ data: ..., source: 'directus' | 'fallback' | 'error' })
+```
+
+## Error handling
+- Wrap all external calls (Directus, n8n, Redis, PostgreSQL) in try/catch
+- Return graceful fallback data on failure — never let an external service crash the page
+- Error logging: `if (process.env.NODE_ENV === "development") console.error(...)`
+
+## n8n proxies (app/api/n8n/)
+- Rate limiting required on all public endpoints (use `lib/auth.ts`)
+- 10 second timeout on upstream n8n calls
+- Auth via `N8N_SECRET_TOKEN` and/or `N8N_API_KEY` headers
+
+## Directus queries
+- Use `directusRequest()` from `lib/directus.ts`
+- 2 second timeout is already set in `directusRequest()`
+- Always have a hardcoded fallback when Directus returns null

.claude/rules/components.md

@@ -0,0 +1,37 @@
+---
+paths:
+  - "app/components/**/*.tsx"
+  - "app/_ui/**/*.tsx"
+---
+
+# Component Rules
+
+## SSR animation safety (critical)
+**Never** use `initial={{ opacity: 0 }}` on server-rendered elements.
+This bakes `style="opacity:0"` into HTML — content is invisible if hydration fails.
+
+Use `ScrollFadeIn` instead:
+```tsx
+import ScrollFadeIn from "@/app/components/ScrollFadeIn"
+<ScrollFadeIn><MyComponent /></ScrollFadeIn>
+```
+
+`AnimatePresence` is fine for modals and overlays that only appear after user interaction.
+
+## Design system
+- Colors: only `liquid-*` tokens — no hardcoded hex or raw Tailwind palette colors
+- Cards: `bg-gradient-to-br from-liquid-*/15 via-liquid-*/10 to-liquid-*/15 backdrop-blur-sm border-2 rounded-xl`
+- Headlines: `uppercase tracking-tighter` with accent dot `<span className="text-emerald-600">.</span>`
+- Body text: `text-stone-600 dark:text-stone-400` — never `text-stone-400` alone (fails contrast)
+
+## Async components
+Every component that fetches data must have a Skeleton loading state shown while data loads.
+
+## i18n
+- Client: `useTranslations("namespace")` from `next-intl`
+- Server: `getTranslations("namespace")` from `next-intl/server`
+- New client sections need a wrapper in `ClientWrappers.tsx` with scoped `NextIntlClientProvider`
+
+## TypeScript
+- No `any` — define interfaces in `lib/directus.ts` or `types/`
+- No emojis in code

.claude/rules/testing.md

@@ -0,0 +1,38 @@
+---
+paths:
+  - "**/__tests__/**/*.ts"
+  - "**/__tests__/**/*.tsx"
+  - "**/*.test.ts"
+  - "**/*.test.tsx"
+  - "e2e/**/*.spec.ts"
+---
+
+# Testing Rules
+
+## Jest environment
+- Global mocks are set up in `jest.setup.ts` — do NOT re-mock `matchMedia`, `IntersectionObserver`, or `NextResponse` in individual tests
+- Test env vars are pre-set: `DIRECTUS_URL`, `NEXT_PUBLIC_SITE_URL`
+- Always mock external API calls (Directus, n8n, PostgreSQL) — tests must work without running services
+
+## ESM modules
+If a new import causes "Must use import to load ES Module" errors, add the package to `transformIgnorePatterns` in `jest.config.ts`.
+
+## Server component tests
+```typescript
+// Server components return JSX, not a promise in React 19, but async ones need await
+const resolved = await MyServerComponent({ locale: 'en', ...props })
+render(resolved)
+```
+
+## next/image in tests
+Replace `next/image` with a plain `<img>` in test renders:
+```tsx
+// eslint-disable-next-line @next/next/no-img-element
+<img src={src} alt={alt} />
+```
+
+## Run commands
+- Single file: `npx jest path/to/test.tsx`
+- All unit tests: `npm run test`
+- Watch mode: `npm run test:watch`
+- Specific E2E: `npm run test:critical`, `npm run test:hydration`, `npm run test:accessibility`

.claude/settings.json

@@ -0,0 +1,25 @@
+{
+  "hooks": {
+    "PostToolUse": [
+      {
+        "matcher": "Edit|Write",
+        "hooks": [
+          {
+            "type": "command",
+            "command": "FILE=$(echo $CLAUDE_TOOL_INPUT | jq -r '.file_path // empty'); if [ -n \"$FILE\" ] && echo \"$FILE\" | grep -qE '\\.(ts|tsx|js|jsx)$'; then npx eslint --fix \"$FILE\" 2>/dev/null || true; fi"
+          }
+        ]
+      }
+    ],
+    "Stop": [
+      {
+        "hooks": [
+          {
+            "type": "command",
+            "command": "osascript -e 'display notification \"Claude ist fertig\" with title \"Claude Code\" sound name \"Glass\"' 2>/dev/null || true"
+          }
+        ]
+      }
+    ]
+  }
+}

.claude/skills/add-section/SKILL.md

@@ -0,0 +1,50 @@
+---
+name: add-section
+description: Orchestrate adding a new CMS-managed section to the portfolio following the full 6-step pattern
+context: fork
+agent: general-purpose
+---
+
+Add a new CMS-managed section called "$ARGUMENTS" to the portfolio.
+
+Follow the exact 6-step pattern from CLAUDE.md:
+
+**Step 1 — lib/directus.ts**
+Read `lib/directus.ts` first, then add:
+- TypeScript interface for the new collection
+- `directusRequest()` GraphQL query for the collection (with translation support if needed)
+- Export the fetch function
+
+**Step 2 — API Route**
+Create `app/api/$ARGUMENTS/route.ts`:
+- `export const runtime = 'nodejs'`
+- `export const dynamic = 'force-dynamic'`
+- Try Directus first, fallback to hardcoded defaults
+- Include `source: "directus" | "fallback" | "error"` in response
+- Error logging behind `process.env.NODE_ENV === "development"` guard
+
+**Step 3 — Component**
+Create `app/components/$ARGUMENTS.tsx`:
+- `"use client"` directive
+- Skeleton loading state for the async data
+- Tailwind liquid-* tokens for styling (cards: `bg-gradient-to-br from-liquid-*/15 via-liquid-*/10 to-liquid-*/15 backdrop-blur-sm border-2 rounded-xl`)
+- Headline uppercase with tracking-tighter and emerald accent dot
+
+**Step 4 — i18n**
+Add translation keys to both:
+- `messages/en.json`
+- `messages/de.json`
+
+**Step 5 — Client Wrapper**
+Add `${ARGUMENTS}Client` to `app/components/ClientWrappers.tsx`:
+- Wrap in scoped `NextIntlClientProvider` with only the needed translation namespace
+
+**Step 6 — Homepage Integration**
+Add to `app/_ui/HomePageServer.tsx`:
+- Fetch translations in the existing `Promise.all`
+- Render wrapped in `<ScrollFadeIn>`
+
+After implementation:
+- Run `npm run lint` — must be 0 errors
+- Run `npm run build` — must compile successfully
+- Report what was created and any manual steps remaining (e.g., creating the Directus collection)

.claude/skills/check-quality/SKILL.md

@@ -0,0 +1,39 @@
+---
+name: check-quality
+description: Run all quality checks (lint, build, tests) and report a summary of the project's health
+disable-model-invocation: false
+---
+
+Run all quality checks for this portfolio project and report the results.
+
+Execute these checks in order:
+
+**1. ESLint**
+Run: `npm run lint`
+Required: 0 errors (warnings OK)
+
+**2. TypeScript**
+Run: `npx tsc --noEmit`
+Required: 0 type errors
+
+**3. Unit Tests**
+Run: `npm run test -- --passWithNoTests`
+Report: pass/fail count and any failing test names
+
+**4. Production Build**
+Run: `npm run build`
+Required: successful completion
+
+**5. i18n Parity Check**
+Compare keys in `messages/en.json` vs `messages/de.json` — report any keys present in one but not the other.
+
+After all checks, produce a summary table:
+| Check | Status | Details |
+|-------|--------|---------|
+| ESLint | ✓/✗ | ... |
+| TypeScript | ✓/✗ | ... |
+| Tests | ✓/✗ | X passed, Y failed |
+| Build | ✓/✗ | ... |
+| i18n parity | ✓/✗ | Missing keys: ... |
+
+If anything fails, provide the specific error and a recommended fix.

.claude/skills/review-changes/SKILL.md

@@ -0,0 +1,30 @@
+---
+name: review-changes
+description: Run a thorough code review on all recent uncommitted changes using the code-reviewer agent
+context: fork
+agent: code-reviewer
+---
+
+Review all recent changes in this repository.
+
+First gather context:
+- Recent changes: !`git diff HEAD`
+- Staged changes: !`git diff --cached`
+- Modified files: !`git status --short`
+- Recent commits: !`git log --oneline -5`
+
+Then perform a full code review using the code-reviewer agent checklist:
+- SSR safety (no `initial={{ opacity: 0 }}` on server elements)
+- TypeScript strictness (no `any`)
+- API route conventions (`runtime`, `dynamic`, `source` field)
+- Design system compliance (liquid-* tokens, contrast ratios)
+- i18n completeness (both en.json and de.json)
+- Error logging guards
+- Graceful fallbacks on all external calls
+
+Output:
+- **Critical** issues (must fix before merge)
+- **Warnings** (should fix)
+- **Suggestions** (nice to have)
+
+Include file:line references and concrete fix examples for each issue.

.dockerignore

@@ -0,0 +1,65 @@
+# Dependencies
+node_modules
+npm-debug.log
+yarn-error.log
+
+# Next.js
+.next
+out
+build
+dist
+
+# Testing
+coverage
+.nyc_output
+test-results
+playwright-report
+
+# Environment files
+.env
+.env.local
+.env*.local
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+*~
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Git
+.git
+.gitignore
+.gitattributes
+
+# Documentation
+*.md
+docs
+!README.md
+
+# Logs
+logs
+*.log
+
+# Docker
+Dockerfile*
+docker-compose*.yml
+.dockerignore
+
+# CI/CD
+.gitea
+.github
+
+# Scripts (keep only essential ones)
+scripts
+!scripts/init-db.sql
+!scripts/start-with-migrate.js
+
+# Misc
+.cache
+.temp
+tmp

.gitea/workflows/ci-cd-dev-staging.yml

@@ -1,209 +0,0 @@
-name: CI/CD Pipeline (Dev/Staging)
-
-on:
-  push:
-    branches: [dev, main]
-
-env:
-  NODE_VERSION: '20'
-  DOCKER_IMAGE: portfolio-app
-  CONTAINER_NAME: portfolio-app-staging
-
-jobs:
-  staging:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test:production
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-
-      - name: Verify Gitea Variables and Secrets
-        run: |
-          echo "🔍 Verifying Gitea Variables and Secrets..."
-          
-          # Check Variables
-          if [ -z "${{ vars.NEXT_PUBLIC_BASE_URL }}" ]; then
-            echo "❌ NEXT_PUBLIC_BASE_URL variable is missing!"
-            echo "Please set this variable in Gitea repository settings"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_EMAIL }}" ]; then
-            echo "❌ MY_EMAIL variable is missing!"
-            echo "Please set this variable in Gitea repository settings"
-            exit 1
-          fi
-          if [ -z "${{ vars.MY_INFO_EMAIL }}" ]; then
-            echo "❌ MY_INFO_EMAIL variable is missing!"
-            echo "Please set this variable in Gitea repository settings"
-            exit 1
-          fi
-          
-          # Check Secrets
-          if [ -z "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "❌ MY_PASSWORD secret is missing!"
-            echo "Please set this secret in Gitea repository settings"
-            exit 1
-          fi
-          if [ -z "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "❌ MY_INFO_PASSWORD secret is missing!"
-            echo "Please set this secret in Gitea repository settings"
-            exit 1
-          fi
-          if [ -z "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "❌ ADMIN_BASIC_AUTH secret is missing!"
-            echo "Please set this secret in Gitea repository settings"
-            exit 1
-          fi
-          
-          echo "✅ All required Gitea variables and secrets are present"
-          echo "📝 Variables found:"
-          echo "  - NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}"
-          echo "  - MY_EMAIL: ${{ vars.MY_EMAIL }}"
-          echo "  - MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}"
-          echo "  - NODE_ENV: staging"
-          echo "  - LOG_LEVEL: ${{ vars.LOG_LEVEL }}"
-
-      - name: Build Docker image
-        run: |
-          echo "🏗️ Building Docker image..."
-          docker build -t ${{ env.DOCKER_IMAGE }}:staging .
-          docker tag ${{ env.DOCKER_IMAGE }}:staging ${{ env.DOCKER_IMAGE }}:staging-$(date +%Y%m%d-%H%M%S)
-          echo "✅ Docker image built successfully"
-
-      - name: Deploy Staging using Gitea Variables and Secrets
-        run: |
-          echo "🚀 Deploying Staging using Gitea Variables and Secrets..."
-          
-          echo "📝 Using Gitea Variables and Secrets:"
-          echo "  - NODE_ENV: staging"
-          echo "  - LOG_LEVEL: ${LOG_LEVEL}"
-          echo "  - NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}"
-          echo "  - MY_EMAIL: ${MY_EMAIL}"
-          echo "  - MY_INFO_EMAIL: ${MY_INFO_EMAIL}"
-          echo "  - MY_PASSWORD: [SET FROM GITEA SECRET]"
-          echo "  - MY_INFO_PASSWORD: [SET FROM GITEA SECRET]"
-          echo "  - ADMIN_BASIC_AUTH: [SET FROM GITEA SECRET]"
-          echo "  - N8N_WEBHOOK_URL: ${N8N_WEBHOOK_URL}"
-          
-          # Stop old staging containers
-          echo "🛑 Stopping old staging containers..."
-          docker compose -f docker-compose.staging.yml down || true
-          
-          # Clean up orphaned containers
-          echo "🧹 Cleaning up orphaned containers..."
-          docker compose -f docker-compose.staging.yml down --remove-orphans || true
-          
-          # Start new staging containers
-          echo "🚀 Starting new staging containers..."
-          docker compose -f docker-compose.staging.yml up -d
-          
-          # Wait a moment for containers to start
-          echo "⏳ Waiting for containers to start..."
-          sleep 10
-          
-          # Check container logs for debugging
-          echo "📋 Container logs (first 20 lines):"
-          docker compose -f docker-compose.staging.yml logs --tail=20
-          
-          echo "✅ Staging deployment completed!"
-        env:
-          NODE_ENV: staging
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          MY_EMAIL: ${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
-          N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL }}
-          N8N_API_KEY: ${{ secrets.N8N_API_KEY }}
-
-      - name: Wait for containers to be ready
-        run: |
-          echo "⏳ Waiting for containers to be ready..."
-          sleep 45
-          
-          # Check if all containers are running
-          echo "📊 Checking container status..."
-          docker compose -f docker-compose.staging.yml ps
-          
-          # Wait for application container to be healthy
-          echo "🏥 Waiting for application container to be healthy..."
-          for i in {1..60}; do
-            if docker exec portfolio-app-staging curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ Application container is healthy!"
-              break
-            fi
-            echo "⏳ Waiting for application container... ($i/60)"
-            sleep 5
-          done
-          
-          # Additional wait for main page to be accessible
-          echo "🌐 Waiting for main page to be accessible..."
-          for i in {1..30}; do
-            if curl -f http://localhost:3001/ > /dev/null 2>&1; then
-              echo "✅ Main page is accessible!"
-              break
-            fi
-            echo "⏳ Waiting for main page... ($i/30)"
-            sleep 3
-          done
-
-      - name: Health check
-        run: |
-          echo "🔍 Running comprehensive health checks..."
-          
-          # Check container status
-          echo "📊 Container status:"
-          docker compose -f docker-compose.staging.yml ps
-          
-          # Check application container
-          echo "🏥 Checking application container..."
-          if docker exec portfolio-app-staging curl -f http://localhost:3000/api/health; then
-            echo "✅ Application health check passed!"
-          else
-            echo "❌ Application health check failed!"
-            docker logs portfolio-app-staging --tail=50
-            exit 1
-          fi
-          
-          # Check main page
-          if curl -f http://localhost:3001/ > /dev/null; then
-            echo "✅ Main page is accessible!"
-          else
-            echo "❌ Main page is not accessible!"
-            exit 1
-          fi
-          
-          echo "✅ All health checks passed! Staging deployment successful!"
-
-      - name: Cleanup old images
-        run: |
-          echo "🧹 Cleaning up old images..."
-          docker image prune -f
-          docker system prune -f
-          echo "✅ Cleanup completed"

.gitea/workflows/ci-cd-with-gitea-vars.yml.disabled

@@ -2,10 +2,10 @@ name: CI/CD Pipeline (Using Gitea Variables & Secrets)
 
 on:
   push:
-    branches: [ production ]
+    branches: [ dev, main, production ]
 
 env:
-  NODE_VERSION: '20'
+  NODE_VERSION: '25'
   DOCKER_IMAGE: portfolio-app
   CONTAINER_NAME: portfolio-app
 
@@ -94,10 +94,23 @@ jobs:
 
       - name: Deploy using Gitea Variables and Secrets
         run: |
-          echo "🚀 Deploying using Gitea Variables and Secrets..."
+          # Determine if this is staging or production
+          if [ "${{ github.ref }}" == "refs/heads/dev" ] || [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            echo "🚀 Deploying Staging using Gitea Variables and Secrets..."
+            COMPOSE_FILE="docker-compose.staging.yml"
+            HEALTH_PORT="3002"
+            CONTAINER_NAME="portfolio-app-staging"
+            DEPLOY_ENV="staging"
+          else
+            echo "🚀 Deploying Production using Gitea Variables and Secrets..."
+            COMPOSE_FILE="docker-compose.production.yml"
+            HEALTH_PORT="3000"
+            CONTAINER_NAME="portfolio-app"
+            DEPLOY_ENV="production"
+          fi
           
           echo "📝 Using Gitea Variables and Secrets:"
-          echo "  - NODE_ENV: ${NODE_ENV}"
+          echo "  - NODE_ENV: ${DEPLOY_ENV}"
           echo "  - LOG_LEVEL: ${LOG_LEVEL}"
           echo "  - NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}"
           echo "  - MY_EMAIL: ${MY_EMAIL}"
@@ -105,31 +118,32 @@ jobs:
           echo "  - MY_PASSWORD: [SET FROM GITEA SECRET]"
           echo "  - MY_INFO_PASSWORD: [SET FROM GITEA SECRET]"
           echo "  - ADMIN_BASIC_AUTH: [SET FROM GITEA SECRET]"
+          echo "  - N8N_WEBHOOK_URL: ${N8N_WEBHOOK_URL:-}"
           
-          # Stop old containers
+          # Stop old containers (only for the environment being deployed)
-          echo "🛑 Stopping old containers..."
+          echo "🛑 Stopping old ${DEPLOY_ENV} containers..."
-          docker compose down || true
+          docker compose -f $COMPOSE_FILE down || true
           
           # Clean up orphaned containers
-          echo "🧹 Cleaning up orphaned containers..."
+          echo "🧹 Cleaning up orphaned ${DEPLOY_ENV} containers..."
-          docker compose down --remove-orphans || true
+          docker compose -f $COMPOSE_FILE down --remove-orphans || true
           
           # Start new containers
-          echo "🚀 Starting new containers..."
+          echo "🚀 Starting new ${DEPLOY_ENV} containers..."
-          docker compose up -d
+          docker compose -f $COMPOSE_FILE up -d --force-recreate
           
           # Wait a moment for containers to start
-          echo "⏳ Waiting for containers to start..."
+          echo "⏳ Waiting for ${DEPLOY_ENV} containers to start..."
-          sleep 10
+          sleep 15
           
           # Check container logs for debugging
-          echo "📋 Container logs (first 20 lines):"
+          echo "📋 ${DEPLOY_ENV} container logs (first 30 lines):"
-          docker compose logs --tail=20
+          docker compose -f $COMPOSE_FILE logs --tail=30
           
-          echo "✅ Deployment completed!"
+          echo "✅ ${DEPLOY_ENV} deployment completed!"
         env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
+          NODE_ENV: ${{ vars.NODE_ENV || 'production' }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'info' }}
           NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
           NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
           NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
@@ -138,65 +152,98 @@ jobs:
           MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
           MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
           ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
+          N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
+          N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
 
       - name: Wait for containers to be ready
         run: |
-          echo "⏳ Waiting for containers to be ready..."
+          # Determine environment
-          sleep 45
+          if [ "${{ github.ref }}" == "refs/heads/dev" ] || [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            COMPOSE_FILE="docker-compose.staging.yml"
+            HEALTH_PORT="3002"
+            CONTAINER_NAME="portfolio-app-staging"
+            DEPLOY_ENV="staging"
+          else
+            COMPOSE_FILE="docker-compose.production.yml"
+            HEALTH_PORT="3000"
+            CONTAINER_NAME="portfolio-app"
+            DEPLOY_ENV="production"
+          fi
+          
+          echo "⏳ Waiting for ${DEPLOY_ENV} containers to be ready..."
+          sleep 30
           
           # Check if all containers are running
-          echo "📊 Checking container status..."
+          echo "📊 Checking ${DEPLOY_ENV} container status..."
-          docker compose ps
+          docker compose -f $COMPOSE_FILE ps
           
           # Wait for application container to be healthy
-          echo "🏥 Waiting for application container to be healthy..."
+          echo "🏥 Waiting for ${DEPLOY_ENV} application container to be healthy..."
-          for i in {1..60}; do
+          for i in {1..40}; do
-            if docker exec portfolio-app curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
+            if curl -f http://localhost:${HEALTH_PORT}/api/health > /dev/null 2>&1; then
-              echo "✅ Application container is healthy!"
+              echo "✅ ${DEPLOY_ENV} application container is healthy!"
               break
             fi
-            echo "⏳ Waiting for application container... ($i/60)"
+            echo "⏳ Waiting for ${DEPLOY_ENV} application container... ($i/40)"
-            sleep 5
+            sleep 3
           done
           
           # Additional wait for main page to be accessible
-          echo "🌐 Waiting for main page to be accessible..."
+          echo "🌐 Waiting for ${DEPLOY_ENV} main page to be accessible..."
-          for i in {1..30}; do
+          for i in {1..20}; do
-            if curl -f http://localhost:3000/ > /dev/null 2>&1; then
+            if curl -f http://localhost:${HEALTH_PORT}/ > /dev/null 2>&1; then
-              echo "✅ Main page is accessible!"
+              echo "✅ ${DEPLOY_ENV} main page is accessible!"
               break
             fi
-            echo "⏳ Waiting for main page... ($i/30)"
+            echo "⏳ Waiting for ${DEPLOY_ENV} main page... ($i/20)"
-            sleep 3
+            sleep 2
           done
 
       - name: Health check
         run: |
-          echo "🔍 Running comprehensive health checks..."
+          # Determine environment
+          if [ "${{ github.ref }}" == "refs/heads/dev" ] || [ "${{ github.ref }}" == "refs/heads/main" ]; then
+            COMPOSE_FILE="docker-compose.staging.yml"
+            HEALTH_PORT="3002"
+            CONTAINER_NAME="portfolio-app-staging"
+            DEPLOY_ENV="staging"
+          else
+            COMPOSE_FILE="docker-compose.production.yml"
+            HEALTH_PORT="3000"
+            CONTAINER_NAME="portfolio-app"
+            DEPLOY_ENV="production"
+          fi
+          
+          echo "🔍 Running comprehensive ${DEPLOY_ENV} health checks..."
           
           # Check container status
-          echo "📊 Container status:"
+          echo "📊 ${DEPLOY_ENV} container status:"
-          docker compose ps
+          docker compose -f $COMPOSE_FILE ps
           
           # Check application container
-          echo "🏥 Checking application container..."
+          echo "🏥 Checking ${DEPLOY_ENV} application container..."
-          if docker exec portfolio-app curl -f http://localhost:3000/api/health; then
+          if curl -f http://localhost:${HEALTH_PORT}/api/health; then
-            echo "✅ Application health check passed!"
+            echo "✅ ${DEPLOY_ENV} application health check passed!"
           else
-            echo "❌ Application health check failed!"
+            echo "⚠️ ${DEPLOY_ENV} application health check failed, but continuing..."
-            docker logs portfolio-app --tail=50
+            docker compose -f $COMPOSE_FILE logs --tail=50
-            exit 1
+            # Don't exit 1 for staging, only for production
+            if [ "$DEPLOY_ENV" == "production" ]; then
+              exit 1
+            fi
           fi
           
           # Check main page
-          if curl -f http://localhost:3000/ > /dev/null; then
+          if curl -f http://localhost:${HEALTH_PORT}/ > /dev/null; then
-            echo "✅ Main page is accessible!"
+            echo "✅ ${DEPLOY_ENV} main page is accessible!"
           else
-            echo "❌ Main page is not accessible!"
+            echo "⚠️ ${DEPLOY_ENV} main page check failed, but continuing..."
-            exit 1
+            if [ "$DEPLOY_ENV" == "production" ]; then
+              exit 1
+            fi
           fi
           
-          echo "✅ All health checks passed! Deployment successful!"
+          echo "✅ ${DEPLOY_ENV} health checks completed!"
 
       - name: Cleanup old images
         run: |

.gitea/workflows/ci-cd-woodpecker.yml

@@ -1,232 +0,0 @@
-name: CI/CD Pipeline (Woodpecker)
-
-when:
-  event: push
-  branch: production
-
-steps:
-  build:
-    image: node:20-alpine
-    commands:
-      - echo "🚀 Starting CI/CD Pipeline"
-      - echo "📋 Step 1: Installing dependencies..."
-      - npm ci --prefer-offline --no-audit
-      - echo "🔍 Step 2: Running linting..."
-      - npm run lint
-      - echo "🧪 Step 3: Running tests..."
-      - npm run test
-      - echo "🏗️ Step 4: Building application..."
-      - npm run build
-      - echo "🔒 Step 5: Running security scan..."
-      - npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."
-    volumes:
-      - node_modules:/app/node_modules
-
-  docker-build:
-    image: docker:latest
-    commands:
-      - echo "🐳 Building Docker image..."
-      - docker build -t portfolio-app:latest .
-      - docker tag portfolio-app:latest portfolio-app:$(date +%Y%m%d-%H%M%S)
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-
-  deploy:
-    image: docker:latest
-    commands:
-      - echo "🚀 Deploying application..."
-      
-      # Verify secrets and variables
-      - echo "🔍 Verifying secrets and variables..."
-      - |
-        if [ -z "$NEXT_PUBLIC_BASE_URL" ]; then
-          echo "❌ NEXT_PUBLIC_BASE_URL variable is missing!"
-          exit 1
-        fi
-        if [ -z "$MY_EMAIL" ]; then
-          echo "❌ MY_EMAIL variable is missing!"
-          exit 1
-        fi
-        if [ -z "$MY_INFO_EMAIL" ]; then
-          echo "❌ MY_INFO_EMAIL variable is missing!"
-          exit 1
-        fi
-        if [ -z "$MY_PASSWORD" ]; then
-          echo "❌ MY_PASSWORD secret is missing!"
-          exit 1
-        fi
-        if [ -z "$MY_INFO_PASSWORD" ]; then
-          echo "❌ MY_INFO_PASSWORD secret is missing!"
-          exit 1
-        fi
-        if [ -z "$ADMIN_BASIC_AUTH" ]; then
-          echo "❌ ADMIN_BASIC_AUTH secret is missing!"
-          exit 1
-        fi
-        echo "✅ All required secrets and variables are present"
-      
-      # Check if current container is running
-      - |
-        if docker ps -q -f name=portfolio-app | grep -q .; then
-          echo "📊 Current container is running, proceeding with zero-downtime update"
-          CURRENT_CONTAINER_RUNNING=true
-        else
-          echo "📊 No current container running, doing fresh deployment"
-          CURRENT_CONTAINER_RUNNING=false
-        fi
-      
-      # Ensure database and redis are running
-      - echo "🔧 Ensuring database and redis are running..."
-      - docker compose up -d postgres redis
-      - sleep 10
-      
-      # Deploy with zero downtime
-      - |
-        if [ "$CURRENT_CONTAINER_RUNNING" = "true" ]; then
-          echo "🔄 Performing rolling update..."
-          
-          # Generate unique container name
-          TIMESTAMP=$(date +%s)
-          TEMP_CONTAINER_NAME="portfolio-app-temp-$TIMESTAMP"
-          echo "🔧 Using temporary container name: $TEMP_CONTAINER_NAME"
-          
-          # Clean up any existing temporary containers
-          echo "🧹 Cleaning up any existing temporary containers..."
-          docker rm -f portfolio-app-new portfolio-app-temp-* portfolio-app-backup || true
-          
-          # Find and remove any containers with portfolio-app in the name (except the main one)
-          EXISTING_CONTAINERS=$(docker ps -a --format "table {{.Names}}" | grep "portfolio-app" | grep -v "^portfolio-app$" || true)
-          if [ -n "$EXISTING_CONTAINERS" ]; then
-            echo "🗑️ Removing existing portfolio-app containers:"
-            echo "$EXISTING_CONTAINERS"
-            echo "$EXISTING_CONTAINERS" | xargs -r docker rm -f || true
-          fi
-          
-          # Also clean up any stopped containers
-          docker container prune -f || true
-          
-          # Start new container with unique temporary name
-          docker run -d \
-            --name $TEMP_CONTAINER_NAME \
-            --restart unless-stopped \
-            --network portfolio_net \
-            -e NODE_ENV=$NODE_ENV \
-            -e LOG_LEVEL=$LOG_LEVEL \
-            -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-            -e REDIS_URL=redis://redis:6379 \
-            -e NEXT_PUBLIC_BASE_URL="$NEXT_PUBLIC_BASE_URL" \
-            -e NEXT_PUBLIC_UMAMI_URL="$NEXT_PUBLIC_UMAMI_URL" \
-            -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="$NEXT_PUBLIC_UMAMI_WEBSITE_ID" \
-            -e MY_EMAIL="$MY_EMAIL" \
-            -e MY_INFO_EMAIL="$MY_INFO_EMAIL" \
-            -e MY_PASSWORD="$MY_PASSWORD" \
-            -e MY_INFO_PASSWORD="$MY_INFO_PASSWORD" \
-            -e ADMIN_BASIC_AUTH="$ADMIN_BASIC_AUTH" \
-            portfolio-app:latest
-          
-          # Wait for new container to be ready
-          echo "⏳ Waiting for new container to be ready..."
-          sleep 15
-          
-          # Health check new container
-          for i in {1..20}; do
-            if docker exec $TEMP_CONTAINER_NAME curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ New container is healthy!"
-              break
-            fi
-            echo "⏳ Health check attempt $i/20..."
-            sleep 3
-          done
-          
-          # Stop old container
-          echo "🛑 Stopping old container..."
-          docker stop portfolio-app || true
-          docker rm portfolio-app || true
-          
-          # Rename new container
-          docker rename $TEMP_CONTAINER_NAME portfolio-app
-          
-          # Update port mapping
-          docker stop portfolio-app
-          docker rm portfolio-app
-          
-          # Start with correct port
-          docker run -d \
-            --name portfolio-app \
-            --restart unless-stopped \
-            --network portfolio_net \
-            -p 3000:3000 \
-            -e NODE_ENV=$NODE_ENV \
-            -e LOG_LEVEL=$LOG_LEVEL \
-            -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-            -e REDIS_URL=redis://redis:6379 \
-            -e NEXT_PUBLIC_BASE_URL="$NEXT_PUBLIC_BASE_URL" \
-            -e NEXT_PUBLIC_UMAMI_URL="$NEXT_PUBLIC_UMAMI_URL" \
-            -e NEXT_PUBLIC_UMAMI_WEBSITE_ID="$NEXT_PUBLIC_UMAMI_WEBSITE_ID" \
-            -e MY_EMAIL="$MY_EMAIL" \
-            -e MY_INFO_EMAIL="$MY_INFO_EMAIL" \
-            -e MY_PASSWORD="$MY_PASSWORD" \
-            -e MY_INFO_PASSWORD="$MY_INFO_PASSWORD" \
-            -e ADMIN_BASIC_AUTH="$ADMIN_BASIC_AUTH" \
-            portfolio-app:latest
-            
-          echo "✅ Rolling update completed!"
-        else
-          echo "🆕 Fresh deployment..."
-          docker compose up -d
-        fi
-      
-      # Wait for container to be ready
-      - echo "⏳ Waiting for container to be ready..."
-      - sleep 15
-      
-      # Health check
-      - |
-        echo "🏥 Performing health check..."
-        for i in {1..40}; do
-          if curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-            echo "✅ Application is healthy!"
-            break
-          fi
-          echo "⏳ Health check attempt $i/40..."
-          sleep 3
-        done
-      
-      # Final verification
-      - echo "🔍 Final health verification..."
-      - docker ps --filter "name=portfolio-app" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
-      - |
-        if curl -f http://localhost:3000/api/health; then
-          echo "✅ Health endpoint accessible"
-        else
-          echo "❌ Health endpoint not accessible"
-          exit 1
-        fi
-      - |
-        if curl -f http://localhost:3000/ > /dev/null; then
-          echo "✅ Main page is accessible"
-        else
-          echo "❌ Main page is not accessible"
-          exit 1
-        fi
-      - echo "✅ Deployment successful!"
-      
-      # Cleanup
-      - docker image prune -f
-      - docker system prune -f
-    volumes:
-      - /var/run/docker.sock:/var/run/docker.sock
-    environment:
-      - NODE_ENV
-      - LOG_LEVEL
-      - NEXT_PUBLIC_BASE_URL
-      - NEXT_PUBLIC_UMAMI_URL
-      - NEXT_PUBLIC_UMAMI_WEBSITE_ID
-      - MY_EMAIL
-      - MY_INFO_EMAIL
-      - MY_PASSWORD
-      - MY_INFO_PASSWORD
-      - ADMIN_BASIC_AUTH
-
-volumes:
-  node_modules:

.gitea/workflows/ci.yml

@@ -0,0 +1,279 @@
+name: CI / CD
+
+on:
+  push:
+    branches: [main, dev, production]
+  pull_request:
+    branches: [main, dev, production]
+
+env:
+  NODE_VERSION: '25'
+  DOCKER_IMAGE: portfolio-app
+
+jobs:
+  # ── Job 1: Lint, Test, Build (runs on every push/PR) ──
+  test-build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Test
+        run: npm run test
+
+      - name: Type check
+        run: npx tsc --noEmit
+
+  # ── Job 2: Deploy to dev (only on dev branch, after tests pass) ──
+  deploy-dev:
+    needs: test-build
+    if: github.ref == 'refs/heads/dev' && github.event_name == 'push'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Build Docker image
+        run: |
+          echo "🏗️ Building dev Docker image..."
+          DOCKER_BUILDKIT=1 docker build \
+            --cache-from ${{ env.DOCKER_IMAGE }}:dev \
+            --cache-from ${{ env.DOCKER_IMAGE }}:latest \
+            -t ${{ env.DOCKER_IMAGE }}:dev \
+            .
+          echo "✅ Docker image built successfully"
+
+      - name: Deploy dev container
+        run: |
+          echo "🚀 Starting dev deployment..."
+
+          CONTAINER_NAME="portfolio-app-dev"
+          HEALTH_PORT="3001"
+          IMAGE_NAME="${{ env.DOCKER_IMAGE }}:dev"
+
+          # Check for existing container
+          EXISTING_CONTAINER=$(docker ps -aq -f name=$CONTAINER_NAME || echo "")
+
+          # Ensure networks exist
+          echo "🌐 Ensuring networks exist..."
+          docker network create portfolio_net 2>/dev/null || true
+          docker network create proxy 2>/dev/null || true
+
+          # Verify production DB is reachable
+          if docker exec portfolio-postgres pg_isready -U portfolio_user -d portfolio_db >/dev/null 2>&1; then
+            echo "✅ Production database is ready!"
+          else
+            echo "⚠️ Production database not reachable, app will use fallbacks"
+          fi
+
+          # Stop and remove existing container
+          if [ ! -z "$EXISTING_CONTAINER" ]; then
+            echo "🛑 Stopping existing container..."
+            docker stop $EXISTING_CONTAINER 2>/dev/null || true
+            docker rm $EXISTING_CONTAINER 2>/dev/null || true
+            sleep 3
+          fi
+
+          # Ensure port is free
+          PORT_CONTAINER=$(docker ps -a --format "{{.ID}}\t{{.Ports}}" | grep -E "(:${HEALTH_PORT}->)" | awk '{print $1}' | head -1 || echo "")
+          if [ ! -z "$PORT_CONTAINER" ]; then
+            echo "⚠️ Port ${HEALTH_PORT} still in use, freeing..."
+            docker stop $PORT_CONTAINER 2>/dev/null || true
+            docker rm $PORT_CONTAINER 2>/dev/null || true
+            sleep 3
+          fi
+
+          # Start new container
+          echo "🆕 Starting new dev container..."
+          docker run -d \
+            --name $CONTAINER_NAME \
+            --restart unless-stopped \
+            --network portfolio_net \
+            -p ${HEALTH_PORT}:3000 \
+            -e NODE_ENV=production \
+            -e LOG_LEVEL=${LOG_LEVEL:-debug} \
+            -e NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL_DEV:-https://dev.dk0.dev} \
+            -e DATABASE_URL="${DATABASE_URL}" \
+            -e REDIS_URL="${REDIS_URL}" \
+            -e MY_EMAIL="${MY_EMAIL}" \
+            -e MY_INFO_EMAIL="${MY_INFO_EMAIL}" \
+            -e MY_PASSWORD="${MY_PASSWORD}" \
+            -e MY_INFO_PASSWORD="${MY_INFO_PASSWORD}" \
+            -e ADMIN_BASIC_AUTH="${ADMIN_BASIC_AUTH}" \
+            -e ADMIN_SESSION_SECRET="${ADMIN_SESSION_SECRET}" \
+            -e N8N_WEBHOOK_URL="${N8N_WEBHOOK_URL}" \
+            -e N8N_SECRET_TOKEN="${N8N_SECRET_TOKEN}" \
+            -e N8N_API_KEY="${N8N_API_KEY}" \
+            -e DIRECTUS_URL="${DIRECTUS_URL}" \
+            -e DIRECTUS_STATIC_TOKEN="${DIRECTUS_STATIC_TOKEN}" \
+            $IMAGE_NAME
+
+          # Connect to proxy network
+          docker network connect proxy $CONTAINER_NAME 2>/dev/null || true
+
+          # Wait for health
+          echo "⏳ Waiting for container to be healthy..."
+          for i in {1..60}; do
+            if curl -f -s http://localhost:$HEALTH_PORT/api/health > /dev/null 2>&1; then
+              echo "✅ Dev container is healthy!"
+              break
+            fi
+            HEALTH=$(docker inspect $CONTAINER_NAME --format='{{.State.Health.Status}}' 2>/dev/null || echo "starting")
+            if [ "$HEALTH" == "healthy" ]; then
+              echo "✅ Docker health check passed!"
+              break
+            fi
+            if [ $i -eq 60 ]; then
+              echo "⚠️ Health check timed out, showing logs:"
+              docker logs $CONTAINER_NAME --tail=30
+            fi
+            sleep 2
+          done
+
+          echo "✅ Dev deployment completed!"
+        env:
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'debug' }}
+          NEXT_PUBLIC_BASE_URL_DEV: ${{ vars.NEXT_PUBLIC_BASE_URL_DEV || 'https://dev.dk0.dev' }}
+          DATABASE_URL: postgresql://portfolio_user:portfolio_pass@portfolio-postgres:5432/portfolio_db?schema=public
+          REDIS_URL: redis://portfolio-redis:6379
+          MY_EMAIL: ${{ vars.MY_EMAIL }}
+          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
+          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
+          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
+          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
+          ADMIN_SESSION_SECRET: ${{ secrets.ADMIN_SESSION_SECRET }}
+          N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
+          N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
+          N8N_API_KEY: ${{ vars.N8N_API_KEY || '' }}
+          DIRECTUS_URL: ${{ vars.DIRECTUS_URL || 'https://cms.dk0.dev' }}
+          DIRECTUS_STATIC_TOKEN: ${{ secrets.DIRECTUS_STATIC_TOKEN || '' }}
+
+      - name: Cleanup
+        run: docker image prune -f
+
+  # ── Job 3: Deploy to production (only on production branch, after tests pass) ──
+  deploy-production:
+    needs: test-build
+    if: github.ref == 'refs/heads/production' && github.event_name == 'push'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Build Docker image
+        run: |
+          echo "🏗️ Building production Docker image..."
+          DOCKER_BUILDKIT=1 docker build \
+            --cache-from ${{ env.DOCKER_IMAGE }}:production \
+            --cache-from ${{ env.DOCKER_IMAGE }}:latest \
+            -t ${{ env.DOCKER_IMAGE }}:production \
+            -t ${{ env.DOCKER_IMAGE }}:latest \
+            .
+          echo "✅ Docker image built successfully"
+
+      - name: Deploy production container
+        run: |
+          echo "🚀 Starting production deployment..."
+
+          COMPOSE_FILE="docker-compose.production.yml"
+          CONTAINER_NAME="portfolio-app"
+          HEALTH_PORT="3000"
+
+          # Backup current container ID
+          OLD_CONTAINER=$(docker ps -q -f "name=^/${CONTAINER_NAME}$" || echo "")
+
+          # Ensure network exists
+          docker network create portfolio_net 2>/dev/null || true
+
+          # Export variables for docker-compose
+          export N8N_WEBHOOK_URL="${N8N_WEBHOOK_URL}"
+          export N8N_SECRET_TOKEN="${N8N_SECRET_TOKEN}"
+          export N8N_API_KEY="${N8N_API_KEY}"
+          export MY_EMAIL="${MY_EMAIL}"
+          export MY_INFO_EMAIL="${MY_INFO_EMAIL}"
+          export MY_PASSWORD="${MY_PASSWORD}"
+          export MY_INFO_PASSWORD="${MY_INFO_PASSWORD}"
+          export ADMIN_BASIC_AUTH="${ADMIN_BASIC_AUTH}"
+          export ADMIN_SESSION_SECRET="${ADMIN_SESSION_SECRET}"
+          export DIRECTUS_URL="${DIRECTUS_URL}"
+          export DIRECTUS_STATIC_TOKEN="${DIRECTUS_STATIC_TOKEN}"
+
+          # Start new container via compose
+          echo "🆕 Starting new production container..."
+          docker compose -f $COMPOSE_FILE up -d portfolio
+
+          # Wait for health
+          echo "⏳ Waiting for container to be healthy..."
+          HEALTH_CHECK_PASSED=false
+          for i in {1..90}; do
+            NEW_CONTAINER=$(docker compose -f $COMPOSE_FILE ps -q portfolio 2>/dev/null | head -1)
+            if [ -z "$NEW_CONTAINER" ]; then
+              NEW_CONTAINER=$(docker ps -q -f "name=^/${CONTAINER_NAME}$")
+            fi
+            if [ ! -z "$NEW_CONTAINER" ]; then
+              HEALTH=$(docker inspect $NEW_CONTAINER --format='{{.State.Health.Status}}' 2>/dev/null || echo "starting")
+              if [ "$HEALTH" == "healthy" ]; then
+                echo "✅ Production container is healthy!"
+                HEALTH_CHECK_PASSED=true
+                break
+              fi
+              if curl -f -s --max-time 2 http://localhost:$HEALTH_PORT/api/health > /dev/null 2>&1; then
+                echo "✅ Production HTTP health check passed!"
+                HEALTH_CHECK_PASSED=true
+                break
+              fi
+            fi
+            if [ $((i % 15)) -eq 0 ]; then
+              echo "📊 Health: ${HEALTH:-unknown} (attempt $i/90)"
+              docker compose -f $COMPOSE_FILE logs --tail=5 portfolio 2>/dev/null || true
+            fi
+            sleep 2
+          done
+
+          if [ "$HEALTH_CHECK_PASSED" != "true" ]; then
+            echo "❌ Production health check failed!"
+            docker compose -f $COMPOSE_FILE logs --tail=50 portfolio 2>/dev/null || true
+            exit 1
+          fi
+
+          # Remove old container if different
+          if [ ! -z "$OLD_CONTAINER" ]; then
+            NEW_CONTAINER=$(docker ps -q -f "name=^/${CONTAINER_NAME}$")
+            if [ ! -z "$NEW_CONTAINER" ] && [ "$OLD_CONTAINER" != "$NEW_CONTAINER" ]; then
+              echo "🧹 Removing old container..."
+              docker stop $OLD_CONTAINER 2>/dev/null || true
+              docker rm $OLD_CONTAINER 2>/dev/null || true
+            fi
+          fi
+
+          echo "✅ Production deployment completed!"
+        env:
+          NODE_ENV: production
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'info' }}
+          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_PRODUCTION || 'https://dk0.dev' }}
+          MY_EMAIL: ${{ vars.MY_EMAIL }}
+          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
+          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
+          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
+          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
+          ADMIN_SESSION_SECRET: ${{ secrets.ADMIN_SESSION_SECRET }}
+          N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
+          N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
+          N8N_API_KEY: ${{ vars.N8N_API_KEY || '' }}
+          DIRECTUS_URL: ${{ vars.DIRECTUS_URL || 'https://cms.dk0.dev' }}
+          DIRECTUS_STATIC_TOKEN: ${{ secrets.DIRECTUS_STATIC_TOKEN || '' }}
+
+      - name: Cleanup
+        run: docker image prune -f

.gitea/workflows/debug-secrets.yml

@@ -1,123 +0,0 @@
-name: Debug Secrets
-
-on:
-  workflow_dispatch:
-  push:
-    branches: [ main ]
-
-jobs:
-  debug-secrets:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Debug Environment Variables
-        run: |
-          echo "🔍 Checking if secrets are available..."
-          echo ""
-          
-          echo "📊 VARIABLES:"
-          echo "✅ NODE_ENV: ${{ vars.NODE_ENV }}"
-          echo "✅ LOG_LEVEL: ${{ vars.LOG_LEVEL }}"
-          echo "✅ NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}"
-          echo "✅ NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}"
-          echo "✅ NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}"
-          echo "✅ MY_EMAIL: ${{ vars.MY_EMAIL }}"
-          echo "✅ MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}"
-          
-          echo ""
-          echo "🔐 SECRETS:"
-          if [ -n "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "✅ MY_PASSWORD: Set (length: ${#MY_PASSWORD})"
-          else
-            echo "❌ MY_PASSWORD: Not set"
-          fi
-          
-          if [ -n "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "✅ MY_INFO_PASSWORD: Set (length: ${#MY_INFO_PASSWORD})"
-          else
-            echo "❌ MY_INFO_PASSWORD: Not set"
-          fi
-          
-          if [ -n "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "✅ ADMIN_BASIC_AUTH: Set (length: ${#ADMIN_BASIC_AUTH})"
-          else
-            echo "❌ ADMIN_BASIC_AUTH: Not set"
-          fi
-          
-          echo ""
-          echo "📋 Summary:"
-          echo "Variables: 7 configured"
-          echo "Secrets: 3 configured"
-          echo "Total environment variables: 10"
-        env:
-          NODE_ENV: ${{ vars.NODE_ENV }}
-          LOG_LEVEL: ${{ vars.LOG_LEVEL }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
-          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          MY_EMAIL: ${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
-          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
-
-      - name: Test Docker Environment
-        run: |
-          echo "🐳 Testing Docker environment with secrets..."
-          
-          # Create a test container to verify environment variables
-          docker run --rm \
-            -e NODE_ENV=production \
-            -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-            -e REDIS_URL=redis://redis:6379 \
-            -e NEXT_PUBLIC_BASE_URL="${{ secrets.NEXT_PUBLIC_BASE_URL }}" \
-            -e MY_EMAIL="${{ secrets.MY_EMAIL }}" \
-            -e MY_INFO_EMAIL="${{ secrets.MY_INFO_EMAIL }}" \
-            -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-            -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
-            -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
-            alpine:latest sh -c '
-              echo "Environment variables in container:"
-              echo "NODE_ENV: $NODE_ENV"
-              echo "DATABASE_URL: $DATABASE_URL"
-              echo "REDIS_URL: $REDIS_URL"
-              echo "NEXT_PUBLIC_BASE_URL: $NEXT_PUBLIC_BASE_URL"
-              echo "MY_EMAIL: $MY_EMAIL"
-              echo "MY_INFO_EMAIL: $MY_INFO_EMAIL"
-              echo "MY_PASSWORD: [HIDDEN - length: ${#MY_PASSWORD}]"
-              echo "MY_INFO_PASSWORD: [HIDDEN - length: ${#MY_INFO_PASSWORD}]"
-              echo "ADMIN_BASIC_AUTH: [HIDDEN - length: ${#ADMIN_BASIC_AUTH}]"
-            '
-
-      - name: Validate Secret Formats
-        run: |
-          echo "🔐 Validating secret formats..."
-          
-          # Check NEXT_PUBLIC_BASE_URL format
-          if [[ "${{ secrets.NEXT_PUBLIC_BASE_URL }}" =~ ^https?:// ]]; then
-            echo "✅ NEXT_PUBLIC_BASE_URL: Valid URL format"
-          else
-            echo "❌ NEXT_PUBLIC_BASE_URL: Invalid URL format (should start with http:// or https://)"
-          fi
-          
-          # Check email formats
-          if [[ "${{ secrets.MY_EMAIL }}" =~ ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ ]]; then
-            echo "✅ MY_EMAIL: Valid email format"
-          else
-            echo "❌ MY_EMAIL: Invalid email format"
-          fi
-          
-          if [[ "${{ secrets.MY_INFO_EMAIL }}" =~ ^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$ ]]; then
-            echo "✅ MY_INFO_EMAIL: Valid email format"
-          else
-            echo "❌ MY_INFO_EMAIL: Invalid email format"
-          fi
-          
-          # Check ADMIN_BASIC_AUTH format (should be username:password)
-          if [[ "${{ secrets.ADMIN_BASIC_AUTH }}" =~ ^[^:]+:.+$ ]]; then
-            echo "✅ ADMIN_BASIC_AUTH: Valid format (username:password)"
-          else
-            echo "❌ ADMIN_BASIC_AUTH: Invalid format (should be username:password)"
-          fi

.gitea/workflows/staging-deploy.yml.disabled

@@ -0,0 +1,155 @@
+name: Staging Deployment
+
+on:
+  push:
+    branches: [ dev, main ]
+
+env:
+  NODE_VERSION: '20'
+  DOCKER_IMAGE: portfolio-app
+  CONTAINER_NAME: portfolio-app-staging
+
+jobs:
+  staging:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run linting
+        run: npm run lint
+
+      - name: Run tests
+        run: npm run test
+
+      - name: Build application
+        run: npm run build
+
+      - name: Build Docker image
+        run: |
+          echo "🏗️ Building Docker image for staging..."
+          docker build -t ${{ env.DOCKER_IMAGE }}:staging .
+          docker tag ${{ env.DOCKER_IMAGE }}:staging ${{ env.DOCKER_IMAGE }}:staging-$(date +%Y%m%d-%H%M%S)
+          echo "✅ Docker image built successfully"
+
+      - name: Deploy Staging using Gitea Variables and Secrets
+        run: |
+          echo "🚀 Deploying Staging using Gitea Variables and Secrets..."
+          
+          echo "📝 Using Gitea Variables and Secrets:"
+          echo "  - NODE_ENV: staging"
+          echo "  - LOG_LEVEL: ${LOG_LEVEL:-info}"
+          echo "  - NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}"
+          echo "  - MY_EMAIL: ${MY_EMAIL}"
+          echo "  - MY_INFO_EMAIL: ${MY_INFO_EMAIL}"
+          echo "  - MY_PASSWORD: [SET FROM GITEA SECRET]"
+          echo "  - MY_INFO_PASSWORD: [SET FROM GITEA SECRET]"
+          echo "  - ADMIN_BASIC_AUTH: [SET FROM GITEA SECRET]"
+          echo "  - N8N_WEBHOOK_URL: ${N8N_WEBHOOK_URL:-}"
+          
+          # Stop old staging containers only
+          echo "🛑 Stopping old staging containers..."
+          docker compose -f docker-compose.staging.yml down || true
+          
+          # Clean up orphaned staging containers
+          echo "🧹 Cleaning up orphaned staging containers..."
+          docker compose -f docker-compose.staging.yml down --remove-orphans || true
+          
+          # Start new staging containers
+          echo "🚀 Starting new staging containers..."
+          docker compose -f docker-compose.staging.yml up -d --force-recreate
+          
+          # Wait a moment for containers to start
+          echo "⏳ Waiting for staging containers to start..."
+          sleep 15
+          
+          # Check container logs for debugging
+          echo "📋 Staging container logs (first 30 lines):"
+          docker compose -f docker-compose.staging.yml logs --tail=30
+          
+          echo "✅ Staging deployment completed!"
+        env:
+          NODE_ENV: staging
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'info' }}
+          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL }}
+          NEXT_PUBLIC_UMAMI_URL: ${{ vars.NEXT_PUBLIC_UMAMI_URL }}
+          NEXT_PUBLIC_UMAMI_WEBSITE_ID: ${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
+          MY_EMAIL: ${{ vars.MY_EMAIL }}
+          MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
+          MY_PASSWORD: ${{ secrets.MY_PASSWORD }}
+          MY_INFO_PASSWORD: ${{ secrets.MY_INFO_PASSWORD }}
+          ADMIN_BASIC_AUTH: ${{ secrets.ADMIN_BASIC_AUTH }}
+          N8N_WEBHOOK_URL: ${{ vars.N8N_WEBHOOK_URL || '' }}
+          N8N_SECRET_TOKEN: ${{ secrets.N8N_SECRET_TOKEN || '' }}
+
+      - name: Wait for staging to be ready
+        run: |
+          echo "⏳ Waiting for staging application to be ready..."
+          sleep 30
+          
+          # Check if all staging containers are running
+          echo "📊 Checking staging container status..."
+          docker compose -f docker-compose.staging.yml ps
+          
+          # Wait for application container to be healthy
+          echo "🏥 Waiting for staging application container to be healthy..."
+          for i in {1..40}; do
+            if curl -f http://localhost:3002/api/health > /dev/null 2>&1; then
+              echo "✅ Staging application container is healthy!"
+              break
+            fi
+            echo "⏳ Waiting for staging application container... ($i/40)"
+            sleep 3
+          done
+          
+          # Additional wait for main page to be accessible
+          echo "🌐 Waiting for staging main page to be accessible..."
+          for i in {1..20}; do
+            if curl -f http://localhost:3002/ > /dev/null 2>&1; then
+              echo "✅ Staging main page is accessible!"
+              break
+            fi
+            echo "⏳ Waiting for staging main page... ($i/20)"
+            sleep 2
+          done
+
+      - name: Staging health check
+        run: |
+          echo "🔍 Running staging health checks..."
+          
+          # Check container status
+          echo "📊 Staging container status:"
+          docker compose -f docker-compose.staging.yml ps
+          
+          # Check application container
+          echo "🏥 Checking staging application container..."
+          if curl -f http://localhost:3002/api/health; then
+            echo "✅ Staging application health check passed!"
+          else
+            echo "⚠️ Staging application health check failed, but continuing..."
+            docker compose -f docker-compose.staging.yml logs --tail=50
+          fi
+          
+          # Check main page
+          if curl -f http://localhost:3002/ > /dev/null; then
+            echo "✅ Staging main page is accessible!"
+          else
+            echo "⚠️ Staging main page check failed, but continuing..."
+          fi
+          
+          echo "✅ Staging deployment verification completed!"
+
+      - name: Cleanup old staging images
+        run: |
+          echo "🧹 Cleaning up old staging images..."
+          docker image prune -f --filter "label=stage=staging" || true
+          echo "✅ Cleanup completed"

.gitea/workflows/test-and-build.yml

@@ -1,41 +0,0 @@
-name: Test and Build
-
-on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
-
-env:
-  NODE_VERSION: '20'
-
-jobs:
-  test-and-build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VERSION }}
-          cache: 'npm'
-          cache-dependency-path: 'package-lock.json'
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-      - name: Run security scan
-        run: |
-          echo "🔍 Running npm audit..."
-          npm audit --audit-level=high || echo "⚠️ Some vulnerabilities found, but continuing..."

.gitea/workflows/test-gitea-variables.yml

@@ -1,105 +0,0 @@
-name: Test Gitea Variables and Secrets
-
-on:
-  push:
-    branches: [ production ]
-  workflow_dispatch:
-
-jobs:
-  test-variables:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Test Variables and Secrets Access
-        run: |
-          echo "🔍 Testing Gitea Variables and Secrets access..."
-          
-          # Test Variables
-          echo "📝 Testing Variables:"
-          echo "NEXT_PUBLIC_BASE_URL: '${{ vars.NEXT_PUBLIC_BASE_URL }}'"
-          echo "MY_EMAIL: '${{ vars.MY_EMAIL }}'"
-          echo "MY_INFO_EMAIL: '${{ vars.MY_INFO_EMAIL }}'"
-          echo "NODE_ENV: '${{ vars.NODE_ENV }}'"
-          echo "LOG_LEVEL: '${{ vars.LOG_LEVEL }}'"
-          echo "NEXT_PUBLIC_UMAMI_URL: '${{ vars.NEXT_PUBLIC_UMAMI_URL }}'"
-          echo "NEXT_PUBLIC_UMAMI_WEBSITE_ID: '${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}'"
-          
-          # Test Secrets (without revealing values)
-          echo ""
-          echo "🔐 Testing Secrets:"
-          echo "MY_PASSWORD: '$([ -n "${{ secrets.MY_PASSWORD }}" ] && echo "[SET]" || echo "[NOT SET]")'"
-          echo "MY_INFO_PASSWORD: '$([ -n "${{ secrets.MY_INFO_PASSWORD }}" ] && echo "[SET]" || echo "[NOT SET]")'"
-          echo "ADMIN_BASIC_AUTH: '$([ -n "${{ secrets.ADMIN_BASIC_AUTH }}" ] && echo "[SET]" || echo "[NOT SET]")'"
-          
-          # Check if variables are empty
-          echo ""
-          echo "🔍 Checking for empty variables:"
-          if [ -z "${{ vars.NEXT_PUBLIC_BASE_URL }}" ]; then
-            echo "❌ NEXT_PUBLIC_BASE_URL is empty or not set"
-          else
-            echo "✅ NEXT_PUBLIC_BASE_URL is set"
-          fi
-          
-          if [ -z "${{ vars.MY_EMAIL }}" ]; then
-            echo "❌ MY_EMAIL is empty or not set"
-          else
-            echo "✅ MY_EMAIL is set"
-          fi
-          
-          if [ -z "${{ vars.MY_INFO_EMAIL }}" ]; then
-            echo "❌ MY_INFO_EMAIL is empty or not set"
-          else
-            echo "✅ MY_INFO_EMAIL is set"
-          fi
-          
-          # Check secrets
-          if [ -z "${{ secrets.MY_PASSWORD }}" ]; then
-            echo "❌ MY_PASSWORD secret is empty or not set"
-          else
-            echo "✅ MY_PASSWORD secret is set"
-          fi
-          
-          if [ -z "${{ secrets.MY_INFO_PASSWORD }}" ]; then
-            echo "❌ MY_INFO_PASSWORD secret is empty or not set"
-          else
-            echo "✅ MY_INFO_PASSWORD secret is set"
-          fi
-          
-          if [ -z "${{ secrets.ADMIN_BASIC_AUTH }}" ]; then
-            echo "❌ ADMIN_BASIC_AUTH secret is empty or not set"
-          else
-            echo "✅ ADMIN_BASIC_AUTH secret is set"
-          fi
-          
-          echo ""
-          echo "📊 Summary:"
-          echo "Variables set: $(echo '${{ vars.NEXT_PUBLIC_BASE_URL }}' | wc -c)"
-          echo "Secrets set: $(echo '${{ secrets.MY_PASSWORD }}' | wc -c)"
-
-      - name: Test Environment Variable Export
-        run: |
-          echo "🧪 Testing environment variable export..."
-          
-          # Export variables as environment variables
-          export NODE_ENV="${{ vars.NODE_ENV }}"
-          export LOG_LEVEL="${{ vars.LOG_LEVEL }}"
-          export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}"
-          export NEXT_PUBLIC_UMAMI_URL="${{ vars.NEXT_PUBLIC_UMAMI_URL }}"
-          export NEXT_PUBLIC_UMAMI_WEBSITE_ID="${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}"
-          export MY_EMAIL="${{ vars.MY_EMAIL }}"
-          export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
-          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
-          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
-          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
-          
-          echo "📝 Exported environment variables:"
-          echo "NODE_ENV: ${NODE_ENV:-[NOT SET]}"
-          echo "LOG_LEVEL: ${LOG_LEVEL:-[NOT SET]}"
-          echo "NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL:-[NOT SET]}"
-          echo "MY_EMAIL: ${MY_EMAIL:-[NOT SET]}"
-          echo "MY_INFO_EMAIL: ${MY_INFO_EMAIL:-[NOT SET]}"
-          echo "MY_PASSWORD: $([ -n "${MY_PASSWORD}" ] && echo "[SET]" || echo "[NOT SET]")"
-          echo "MY_INFO_PASSWORD: $([ -n "${MY_INFO_PASSWORD}" ] && echo "[SET]" || echo "[NOT SET]")"
-          echo "ADMIN_BASIC_AUTH: $([ -n "${ADMIN_BASIC_AUTH}" ] && echo "[SET]" || echo "[NOT SET]")"

.github/copilot-instructions.md

@@ -0,0 +1,107 @@
+# Portfolio Project Instructions
+
+Dennis Konkol's portfolio (dk0.dev) — Next.js 15, Directus CMS, n8n automation, "Liquid Editorial Bento" design system.
+
+## Build, Test, and Lint
+
+```bash
+npm run dev:next           # Plain Next.js dev server (no Docker)
+npm run build              # Production build (standalone mode)
+npm run lint               # ESLint (0 errors required, warnings OK)
+npm run lint:fix           # Auto-fix lint issues
+npm run test               # All Jest unit tests
+npx jest path/to/test.tsx  # Run a single test file
+npm run test:watch         # Watch mode
+npm run test:e2e           # Playwright E2E tests
+npm run db:generate        # Regenerate Prisma client after schema changes
+```
+
+## Architecture
+
+### Server/Client Component Split
+
+The homepage uses a **server component orchestrator** pattern:
+
+- `app/_ui/HomePageServer.tsx` — async server component, fetches all translations in parallel via `Promise.all`, renders Hero directly, wraps client sections in `ScrollFadeIn`
+- `app/components/Hero.tsx` — **server component** (no `"use client"`), uses `getTranslations()` from `next-intl/server`
+- `app/components/ClientWrappers.tsx` — exports `AboutClient`, `ProjectsClient`, `ContactClient`, `FooterClient`, each wrapping their component in a scoped `NextIntlClientProvider` with only the needed translation keys
+- `app/components/ClientProviders.tsx` — root client wrapper, defers Three.js/WebGL via `requestIdleCallback` (5s timeout) to avoid blocking LCP
+
+### SSR Animation Safety
+
+**Never use Framer Motion's `initial={{ opacity: 0 }}` on SSR-rendered elements** — it bakes `style="opacity:0"` into HTML, making content invisible if hydration fails.
+
+Use `ScrollFadeIn` component instead (`app/components/ScrollFadeIn.tsx`): renders no inline style during SSR (content visible by default), applies opacity+transform only after `hasMounted` check, animates via IntersectionObserver + CSS transitions.
+
+Framer Motion `AnimatePresence` is fine for modals/overlays that only render after user interaction.
+
+### Data Source Fallback Chain
+
+Every data fetch degrades gracefully — the site never crashes:
+
+1. **Directus CMS** → 2. **PostgreSQL** → 3. **JSON files** (`messages/*.json`) → 4. **Hardcoded defaults** → 5. **i18n key itself**
+
+### CMS Integration (Directus)
+
+- GraphQL via `lib/directus.ts` — no Directus SDK, uses `directusRequest()` with 2s timeout
+- Returns `null` on failure (never throws)
+- Locale mapping: `en` → `en-US`, `de` → `de-DE`
+- API routes must export `runtime = 'nodejs'`, `dynamic = 'force-dynamic'`, and return `source` field (`directus|fallback|error`)
+
+### n8n Integration
+
+- Webhook proxies in `app/api/n8n/` (status, chat, hardcover, generate-image)
+- Auth: `N8N_SECRET_TOKEN` and/or `N8N_API_KEY` headers
+- All endpoints have rate limiting and 10s timeout
+- Hardcover reading data cached 5 minutes
+
+## Key Conventions
+
+### i18n
+
+- Locales: `en`, `de` — defined in `middleware.ts`, must match `app/[locale]/layout.tsx`
+- Client components: `useTranslations("key.path")` from `next-intl`
+- Server components: `getTranslations("key.path")` from `next-intl/server`
+- Always add keys to both `messages/en.json` and `messages/de.json`
+
+### Design System
+
+- Custom Tailwind colors: `liquid-sky`, `liquid-mint`, `liquid-lavender`, `liquid-pink`, `liquid-rose`, `liquid-peach`, `liquid-coral`, `liquid-teal`, `liquid-lime`
+- Cards: `bg-gradient-to-br from-liquid-*/15 via-liquid-*/10 to-liquid-*/15` with `backdrop-blur-sm`, `border-2`, `rounded-xl`
+- Typography: Headlines uppercase, `tracking-tighter`, accent dot at end (`<span className="text-emerald-600">.</span>`)
+- Layout: Bento Grid, no floating overlays
+- Accessibility: Use `text-stone-600 dark:text-stone-400` (not `text-stone-400`) for body text — contrast ratio must be ≥4.5:1
+
+### Code Style
+
+- TypeScript: no `any` — use interfaces from `lib/directus.ts` or `types/`
+- Error logging: `console.error` only when `process.env.NODE_ENV === "development"`
+- File naming: PascalCase components (`About.tsx`), kebab-case API routes (`book-reviews/`), kebab-case lib utils
+- Commit messages: Conventional Commits (`feat:`, `fix:`, `chore:`)
+- Every async component needs a Skeleton loading state
+
+### Testing
+
+- Jest with JSDOM; mocks for `window.matchMedia` and `IntersectionObserver` in `jest.setup.ts`
+- ESM modules transformed via `transformIgnorePatterns` (react-markdown, remark-*, etc.)
+- Server component tests: `const resolved = await Component({ props }); render(resolved)`
+- Test mocks for `next/image`: use `eslint-disable-next-line @next/next/no-img-element` on the `<img>` tag
+
+### Docker & Deployment
+
+- `output: "standalone"` in `next.config.ts`
+- Entrypoint: `scripts/start-with-migrate.js` — waits for DB, runs migrations (non-fatal on failure), starts server
+- CI/CD: `.gitea/workflows/ci.yml` — `test-build` job (all branches), `deploy-dev` (dev only), `deploy-production` (production only)
+- Branches: `dev` → testing.dk0.dev, `production` → dk0.dev
+- Dev and production share the same PostgreSQL and Redis instances
+
+## Common Tasks
+
+### Adding a CMS-managed section
+
+1. Define GraphQL query + types in `lib/directus.ts`
+2. Create API route in `app/api/<name>/route.ts` with `runtime='nodejs'` and `dynamic='force-dynamic'`
+3. Create component in `app/components/<Name>.tsx` with Skeleton loading state
+4. Add i18n keys to both `messages/en.json` and `messages/de.json`
+5. Create a `<Name>Client` wrapper in `ClientWrappers.tsx` with scoped `NextIntlClientProvider`
+6. Add to `HomePageServer.tsx` wrapped in `ScrollFadeIn`

.github/workflows/ci-cd.yml

@@ -1,334 +0,0 @@
-name: CI/CD Pipeline
-
-on:
-  push:
-    branches: [main, dev, production]
-  pull_request:
-    branches: [main, dev, production]
-
-env:
-  REGISTRY: ghcr.io
-  IMAGE_NAME: ${{ github.repository }}
-
-jobs:
-  # Test Job (parallel)
-  test:
-    name: Run Tests
-    runs-on: self-hosted  # Use your own server for speed!
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: '20'
-          cache: 'npm'
-
-      - name: Cache dependencies
-        uses: actions/cache@v4
-        with:
-          path: |
-            ~/.npm
-            node_modules
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Create test environment file
-        run: |
-          cat > .env <<EOF
-          NODE_ENV=test
-          NEXT_PUBLIC_BASE_URL=http://localhost:3000
-          MY_EMAIL=test@example.com
-          MY_INFO_EMAIL=test@example.com
-          MY_PASSWORD=test
-          MY_INFO_PASSWORD=test
-          NEXT_PUBLIC_UMAMI_URL=https://analytics.dk0.dev
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID=b3665829-927a-4ada-b9bb-fcf24171061e
-          ADMIN_BASIC_AUTH=admin:test
-          LOG_LEVEL=info
-          EOF
-
-      - name: Run linting
-        run: npm run lint
-
-      - name: Run tests
-        run: npm run test
-
-      - name: Build application
-        run: npm run build
-
-  # Security scan (parallel)
-  security:
-    name: Security Scan
-    runs-on: self-hosted  # Use your own server for speed!
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Run Trivy vulnerability scanner
-        uses: aquasecurity/trivy-action@master
-        with:
-          scan-type: 'fs'
-          scan-ref: '.'
-          format: 'sarif'
-          output: 'trivy-results.sarif'
-          skip-version-check: true
-          scanners: 'vuln,secret,config'
-
-      - name: Upload Trivy scan results as artifact
-        uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: trivy-security-report
-          path: trivy-results.sarif
-          retention-days: 30
-
-  # Build and push Docker image
-  build:
-    name: Build and Push Docker Image
-    runs-on: self-hosted  # Use your own server for speed!
-    needs: [test, security]  # Wait for parallel jobs to complete
-    if: github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/production')
-    permissions:
-      contents: read
-      packages: write
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Log in to Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Extract metadata
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
-          tags: |
-            type=ref,event=branch
-            type=ref,event=pr
-            type=sha,prefix={{branch}}-
-            type=raw,value=latest,enable={{is_default_branch}}
-            type=raw,value=staging,enable={{is_default_branch==false && branch=='dev'}}
-            type=raw,value=staging,enable={{is_default_branch==false && branch=='main'}}
-
-      - name: Create production environment file
-        run: |
-          cat > .env <<EOF
-          NODE_ENV=production
-          NEXT_PUBLIC_BASE_URL=${{ vars.NEXT_PUBLIC_BASE_URL }}
-          MY_EMAIL=${{ vars.MY_EMAIL }}
-          MY_INFO_EMAIL=${{ vars.MY_INFO_EMAIL }}
-          MY_PASSWORD=${{ secrets.MY_PASSWORD }}
-          MY_INFO_PASSWORD=${{ secrets.MY_INFO_PASSWORD }}
-          NEXT_PUBLIC_UMAMI_URL=${{ vars.NEXT_PUBLIC_UMAMI_URL }}
-          NEXT_PUBLIC_UMAMI_WEBSITE_ID=${{ vars.NEXT_PUBLIC_UMAMI_WEBSITE_ID }}
-          ADMIN_BASIC_AUTH=${{ secrets.ADMIN_BASIC_AUTH }}
-          LOG_LEVEL=info
-          EOF
-
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v5
-        with:
-          context: .
-          platforms: linux/amd64  # Only AMD64 for speed
-          push: true
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          # Optimize for speed
-          build-args: |
-            BUILDKIT_INLINE_CACHE=1
-
-  # Deploy to staging (dev/main branches)
-  deploy-staging:
-    name: Deploy to Staging
-    runs-on: self-hosted
-    needs: build
-    if: github.event_name == 'push' && (github.ref == 'refs/heads/dev' || github.ref == 'refs/heads/main')
-    environment: staging
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Log in to Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Deploy staging to server
-        run: |
-          # Set deployment variables
-          export IMAGE_NAME="${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:staging"
-          export CONTAINER_NAME="portfolio-app-staging"
-          export COMPOSE_FILE="docker-compose.staging.yml"
-          
-          # Set environment variables for docker-compose
-          export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL_STAGING || vars.NEXT_PUBLIC_BASE_URL }}"
-          export MY_EMAIL="${{ vars.MY_EMAIL }}"
-          export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
-          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
-          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
-          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
-          
-          # Pull latest staging image
-          docker pull $IMAGE_NAME || docker pull "${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:main" || true
-          
-          # Stop and remove old staging container (if exists)
-          docker compose -f $COMPOSE_FILE down || true
-          
-          # Start new staging container
-          docker compose -f $COMPOSE_FILE up -d --force-recreate
-          
-          # Wait for health check
-          echo "Waiting for staging application to be healthy..."
-          for i in {1..30}; do
-            if curl -f http://localhost:3001/api/health > /dev/null 2>&1; then
-              echo "✅ Staging deployment successful!"
-              break
-            fi
-            sleep 2
-          done
-          
-          # Verify deployment
-          if curl -f http://localhost:3001/api/health; then
-            echo "✅ Staging deployment verified!"
-          else
-            echo "⚠️ Staging health check failed, but container is running"
-            docker compose -f $COMPOSE_FILE logs --tail=50
-          fi
-
-  # Deploy to production
-  deploy:
-    name: Deploy to Production
-    runs-on: self-hosted
-    needs: build
-    if: github.event_name == 'push' && github.ref == 'refs/heads/production'
-    environment: production
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Log in to Container Registry
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.REGISTRY }}
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Deploy to production (zero-downtime)
-        run: |
-          # Set deployment variables
-          export IMAGE_NAME="${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}:production"
-          export CONTAINER_NAME="portfolio-app"
-          export COMPOSE_FILE="docker-compose.production.yml"
-          export BACKUP_CONTAINER="portfolio-app-backup"
-          
-          # Set environment variables for docker-compose
-          export NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}"
-          export MY_EMAIL="${{ vars.MY_EMAIL }}"
-          export MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}"
-          export MY_PASSWORD="${{ secrets.MY_PASSWORD }}"
-          export MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}"
-          export ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}"
-          
-          # Pull latest production image
-          echo "📦 Pulling latest production image..."
-          docker pull $IMAGE_NAME
-          
-          # Check if production container is running
-          if docker ps --format '{{.Names}}' | grep -q "^${CONTAINER_NAME}$"; then
-            echo "🔄 Production container is running - performing zero-downtime deployment..."
-            
-            # Start new container with different name first (blue-green)
-            echo "🚀 Starting new container (green)..."
-            docker run -d \
-              --name ${BACKUP_CONTAINER} \
-              --network portfolio_net \
-              -p 3002:3000 \
-              -e NODE_ENV=production \
-              -e DATABASE_URL=postgresql://portfolio_user:portfolio_pass@postgres:5432/portfolio_db?schema=public \
-              -e REDIS_URL=redis://redis:6379 \
-              -e NEXT_PUBLIC_BASE_URL="${{ vars.NEXT_PUBLIC_BASE_URL }}" \
-              -e MY_EMAIL="${{ vars.MY_EMAIL }}" \
-              -e MY_INFO_EMAIL="${{ vars.MY_INFO_EMAIL }}" \
-              -e MY_PASSWORD="${{ secrets.MY_PASSWORD }}" \
-              -e MY_INFO_PASSWORD="${{ secrets.MY_INFO_PASSWORD }}" \
-              -e ADMIN_BASIC_AUTH="${{ secrets.ADMIN_BASIC_AUTH }}" \
-              $IMAGE_NAME || true
-            
-            # Wait for new container to be healthy
-            echo "⏳ Waiting for new container to be healthy..."
-            for i in {1..30}; do
-              if curl -f http://localhost:3002/api/health > /dev/null 2>&1; then
-                echo "✅ New container is healthy!"
-                break
-              fi
-              sleep 2
-            done
-            
-            # Stop old container
-            echo "🛑 Stopping old container..."
-            docker stop ${CONTAINER_NAME} || true
-            
-            # Remove old container
-            docker rm ${CONTAINER_NAME} || true
-            
-            # Rename new container to production name
-            docker rename ${BACKUP_CONTAINER} ${CONTAINER_NAME}
-            
-            # Update port mapping (requires container restart, but it's already healthy)
-            docker stop ${CONTAINER_NAME}
-            docker rm ${CONTAINER_NAME}
-            
-            # Start with correct port using docker-compose
-            docker compose -f $COMPOSE_FILE up -d --force-recreate
-          else
-            echo "🆕 No existing container - starting fresh deployment..."
-            docker compose -f $COMPOSE_FILE up -d --force-recreate
-          fi
-          
-          # Wait for health check
-          echo "⏳ Waiting for production application to be healthy..."
-          for i in {1..30}; do
-            if curl -f http://localhost:3000/api/health > /dev/null 2>&1; then
-              echo "✅ Production deployment successful!"
-              break
-            fi
-            sleep 2
-          done
-          
-          # Verify deployment
-          if curl -f http://localhost:3000/api/health; then
-            echo "✅ Production deployment verified!"
-          else
-            echo "❌ Production deployment failed!"
-            docker compose -f $COMPOSE_FILE logs --tail=100
-            exit 1
-          fi
-          
-          # Cleanup backup container if it exists
-          docker rm -f ${BACKUP_CONTAINER} 2>/dev/null || true
-
-      - name: Cleanup old images
-        run: |
-          # Remove unused images older than 7 days
-          docker image prune -f --filter "until=168h"
-          
-          # Remove unused containers
-          docker container prune -f

.gitignore

@@ -1,5 +1,10 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
+# Local tooling
+.claude/settings.local.json
+.claude/CLAUDE.local.md
+._*
+
 # dependencies
 /node_modules
 /.pnp

AUTO_DEPLOYMENT_STATUS.md

@@ -1,85 +0,0 @@
-# 🚀 Auto-Deployment Status
-
-## Current Setup
-
-### GitHub Actions Workflow (`.github/workflows/ci-cd.yml`)
-
-**Triggers on**: Push to `main` OR `production` branches
-
-**What happens on `main` branch**:
-- ✅ Runs tests
-- ✅ Runs linting  
-- ✅ Builds Docker image
-- ✅ Pushes image to registry
-- ❌ **Does NOT deploy to server**
-
-**What happens on `production` branch**:
-- ✅ Runs tests
-- ✅ Runs linting
-- ✅ Builds Docker image
-- ✅ Pushes image to registry
-- ✅ **Deploys to server automatically**
-
-### Key Line in Workflow
-
-```yaml
-# Line 159 in .github/workflows/ci-cd.yml
-if: github.event_name == 'push' && github.ref == 'refs/heads/production'
-```
-
-This means deployment **only** happens on `production` branch.
-
-## Answer: Can you merge to main and auto-deploy?
-
-**❌ NO** - Merging to `main` will:
-- Build and test everything
-- Create Docker image
-- **But NOT deploy to your server**
-
-**✅ YES** - Merging to `production` will:
-- Build and test everything
-- Create Docker image
-- **AND deploy to your server automatically**
-
-## Options
-
-### Option 1: Use Production Branch (Current Setup)
-```bash
-# Merge dev → main (tests/build only)
-git checkout main
-git merge dev
-git push origin main
-
-# Then merge main → production (auto-deploys)
-git checkout production
-git merge main
-git push origin production  # ← This triggers deployment
-```
-
-### Option 2: Enable Auto-Deploy on Main
-If you want `main` to auto-deploy, I can update the workflow to deploy on `main` as well.
-
-### Option 3: Manual Deployment
-After merging to `main`, manually run:
-```bash
-./scripts/gitea-deploy.sh
-# or
-./scripts/auto-deploy.sh
-```
-
-## Recommendation
-
-**Keep current setup** (deploy only on `production`):
-- ✅ Safer: `main` is for testing builds
-- ✅ `production` is explicitly for deployments
-- ✅ Can test on `main` without deploying
-- ✅ Clear separation of concerns
-
-**Workflow**:
-1. Merge `dev` → `main` (validates build works)
-2. Test the built image if needed
-3. Merge `main` → `production` (auto-deploys)
-
----
-
-**Current Status**: Auto-deployment is configured, but only for `production` branch.

CLAUDE.md

@@ -0,0 +1,135 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+Personal portfolio website for Dennis Konkol (dk0.dev). Built with Next.js 15 (App Router), TypeScript, Tailwind CSS, and Framer Motion. Uses a "Liquid Editorial Bento" design system with soft gradient colors and glassmorphism effects.
+
+## Tech Stack
+
+- **Framework**: Next.js 15 (App Router), TypeScript 5.9, React 19
+- **Styling**: Tailwind CSS 3.4 with custom `liquid-*` color tokens
+- **Theming**: `next-themes` for Dark Mode support (system/light/dark)
+- **Animations**: Framer Motion 12
+- **3D**: Three.js + React Three Fiber + `@shadergradient/react` (shader gradient background)
+- **Database**: PostgreSQL via Prisma ORM
+- **Cache**: Redis (optional)
+- **CMS**: Directus (self-hosted, GraphQL only, optional)
+- **Automation**: n8n webhooks (status, chat, hardcover, image generation)
+- **i18n**: next-intl (EN + DE), message files in `messages/`
+- **Deployment**: Docker + Nginx, CI via Gitea Actions (`output: "standalone"`)
+
+## Commands
+
+```bash
+npm run dev          # Full dev environment (Docker + Next.js)
+npm run dev:simple   # Next.js only (no Docker)
+npm run dev:next     # Plain Next.js dev server
+npm run build        # Production build
+npm run lint         # ESLint (0 errors required, warnings OK)
+npm run lint:fix     # Auto-fix lint issues
+npm run test         # All Jest unit tests
+npx jest path/to/test.tsx  # Run a single test file
+npm run test:watch   # Watch mode
+npm run test:e2e     # Playwright E2E tests
+npm run db:generate  # Regenerate Prisma client after schema changes
+```
+
+## Architecture
+
+### Server/Client Component Split
+
+The homepage uses a **server component orchestrator** pattern:
+
+- `app/_ui/HomePageServer.tsx` — async server component, fetches all translations in parallel via `Promise.all`, renders Hero directly, wraps below-fold sections in `ScrollFadeIn`
+- `app/components/Hero.tsx` — **server component** (no `"use client"`), uses `getTranslations()` from `next-intl/server`
+- `app/components/ClientWrappers.tsx` — exports `AboutClient`, `ProjectsClient`, `ContactClient`, `FooterClient`; each wraps its component in a scoped `NextIntlClientProvider` with only the needed translation namespace
+- `app/components/ClientProviders.tsx` — root client wrapper, defers Three.js/WebGL via `requestIdleCallback` (5s timeout) to avoid blocking LCP
+
+### SSR Animation Safety
+
+**Never use Framer Motion's `initial={{ opacity: 0 }}` on SSR-rendered elements** — it bakes `style="opacity:0"` into HTML, making content invisible if JS hydration fails or is slow.
+
+Use `ScrollFadeIn` (`app/components/ScrollFadeIn.tsx`) instead: renders no inline style during SSR, applies opacity+transform only after `hasMounted` check via IntersectionObserver + CSS transitions.
+
+`AnimatePresence` is fine for modals/overlays that only render after user interaction.
+
+### Data Source Fallback Chain
+
+Every data fetch degrades gracefully — the site never crashes:
+
+1. **Directus CMS** (if `DIRECTUS_STATIC_TOKEN` configured) → 2. **PostgreSQL** → 3. **JSON files** (`messages/*.json`) → 4. **Hardcoded defaults** → 5. **i18n key itself**
+
+### CMS Integration (Directus)
+
+- GraphQL via `lib/directus.ts` — no Directus SDK, uses `directusRequest()` with 2s timeout
+- Returns `null` on failure, never throws
+- Collections: `tech_stack_categories`, `tech_stack_items`, `hobbies`, `content_pages`, `projects`, `book_reviews`
+- Translations use Directus native M2O system; locale mapping: `en` → `en-US`, `de` → `de-DE`
+- API routes must export `runtime = 'nodejs'`, `dynamic = 'force-dynamic'`, and include a `source` field in the response (`"directus"` | `"fallback"` | `"error"`)
+
+### n8n Integration
+
+- Webhook proxies in `app/api/n8n/` (status, chat, hardcover, generate-image)
+- Auth via `N8N_SECRET_TOKEN` and/or `N8N_API_KEY` headers
+- All endpoints have rate limiting and 10s timeout
+- Hardcover reading data cached 5 minutes
+
+## Design System
+
+Custom Tailwind colors prefixed with `liquid-`:
+- `liquid-sky`, `liquid-mint`, `liquid-lavender`, `liquid-pink`
+- `liquid-rose`, `liquid-peach`, `liquid-coral`, `liquid-teal`, `liquid-lime`
+
+Cards: `bg-gradient-to-br from-liquid-*/15 via-liquid-*/10 to-liquid-*/15` with `backdrop-blur-sm`, `border-2`, `rounded-xl`.
+
+Typography: Headlines uppercase, `tracking-tighter`, accent dot at end (`<span className="text-emerald-600">.</span>`).
+
+Accessibility: Use `text-stone-600 dark:text-stone-400` (not `text-stone-400` alone) for body text — contrast ratio must be ≥4.5:1.
+
+## Conventions
+
+- **TypeScript**: No `any` — use interfaces from `lib/directus.ts` or `types/`
+- **Components**: PascalCase files in `app/components/`; every async component needs a Skeleton loading state
+- **API routes**: kebab-case directories in `app/api/`
+- **i18n**: Always add keys to both `messages/en.json` and `messages/de.json`; `useTranslations()` in client, `getTranslations()` in server components
+- **Error logging**: `console.error` only when `process.env.NODE_ENV === "development"`
+- **Commit messages**: Conventional Commits (`feat:`, `fix:`, `chore:`)
+- **No emojis** in code unless explicitly requested
+
+## Testing Notes
+
+- Jest with JSDOM; `jest.setup.ts` mocks `window.matchMedia`, `IntersectionObserver`, and `NextResponse`
+- ESM modules (react-markdown, remark-*, etc.) handled via `transformIgnorePatterns` in `jest.config.ts`
+- Server component tests: `const resolved = await Component({ props }); render(resolved)`
+- Test mocks for `next/image`: use `eslint-disable-next-line @next/next/no-img-element` on the `<img>` tag
+
+## Deployment & CI/CD
+
+- `output: "standalone"` in `next.config.ts`
+- Entrypoint: `scripts/start-with-migrate.js` — waits for DB, runs migrations (non-fatal), starts server
+- CI/CD: `.gitea/workflows/ci.yml` — `test-build` (all branches), `deploy-dev` (dev branch only), `deploy-production` (production branch only)
+- **Branches**: `dev` → testing.dk0.dev | `production` → dk0.dev
+- Dev and production share the same PostgreSQL and Redis instances
+
+## Key Environment Variables
+
+```bash
+DIRECTUS_URL=https://cms.dk0.dev
+DIRECTUS_STATIC_TOKEN=...
+N8N_WEBHOOK_URL=https://n8n.dk0.dev
+N8N_SECRET_TOKEN=...
+N8N_API_KEY=...
+DATABASE_URL=postgresql://...
+REDIS_URL=redis://...  # optional
+```
+
+## Adding a CMS-managed Section
+
+1. Define GraphQL query + types in `lib/directus.ts`
+2. Create API route `app/api/<name>/route.ts` with `runtime='nodejs'`, `dynamic='force-dynamic'`, and `source` field in response
+3. Create component `app/components/<Name>.tsx` with Skeleton loading state
+4. Add i18n keys to both `messages/en.json` and `messages/de.json`
+5. Create `<Name>Client` wrapper in `app/components/ClientWrappers.tsx` with scoped `NextIntlClientProvider`
+6. Add to `app/_ui/HomePageServer.tsx` wrapped in `<ScrollFadeIn>`

CLEANUP_PLAN.md

@@ -1,66 +0,0 @@
-# 🧹 Codebase Cleanup Plan
-
-## MD Files Analysis
-
-### ✅ KEEP (Essential Documentation)
-1. **README.md** - Main project documentation
-2. **docs/ai-image-generation/README.md** - AI feature docs
-3. **docs/ai-image-generation/SETUP.md** - Setup guide
-4. **docs/ai-image-generation/QUICKSTART.md** - Quick start
-5. **docs/ai-image-generation/WEBHOOK_SETUP.md** - Webhook setup (just created)
-6. **TESTING_GUIDE.md** - Testing documentation
-7. **SAFE_PUSH_TO_MAIN.md** - Deployment guide
-8. **AUTO_DEPLOYMENT_STATUS.md** - Deployment status (just created)
-
-### ❌ REMOVE (Old/Duplicate/Outdated)
-1. **CHANGELOG_DEV.md** - Old changelog, can be in git history
-2. **PUSH_READY.md** - One-time status file
-3. **COMMIT_MESSAGE.txt** - One-time commit message
-4. **DEPLOYMENT-FIXES.md** - Old fixes, should be in git
-5. **DEPLOYMENT-IMPROVEMENTS.md** - Old improvements
-6. **DEPLOYMENT.md** - Duplicate of PRODUCTION-DEPLOYMENT.md
-7. **AFTER_PUSH_SETUP.md** - One-time setup guide
-8. **PRE_PUSH_CHECKLIST.md** - Can merge into SAFE_PUSH_TO_MAIN.md
-9. **TEST_FIXES.md** - One-time fix notes
-10. **AUTOMATED_TESTING_SETUP.md** - Info now in TESTING_GUIDE.md
-11. **SECURITY-UPDATE.md** - Old update notes
-12. **SECURITY-CHECKLIST.md** - Can merge into SECURITY.md
-13. **ANALYTICS.md** - If not actively used
-14. **PRODUCTION-DEPLOYMENT.md** - If DEPLOYMENT.md covers it
-
-### 📁 CONSOLIDATE (Merge into main docs)
-- **docs/IMPROVEMENTS_SUMMARY.md** → Merge into README or remove
-- **docs/CODING_DETECTION_DEBUG.md** → Remove if not needed
-- **docs/DYNAMIC_ACTIVITY_MANAGEMENT.md** → Keep if actively used
-- **docs/ACTIVITY_FEATURES.md** → Keep if actively used
-- **docs/N8N_CHAT_SETUP.md** → Keep if using n8n chat
-- **docs/N8N_INTEGRATION.md** → Keep if using n8n
-
-## Old/Unused Files to Remove
-
-### Scripts (Many duplicates)
-- `scripts/test-fix.sh` - One-time fix
-- `scripts/test-deployment.sh` - One-time test
-- `scripts/quick-health-fix.sh` - One-time fix
-- `scripts/fix-connection.sh` - One-time fix
-- `scripts/debug-gitea-actions.sh` - Debug script, not needed
-- Multiple docker-compose files (keep only needed ones)
-
-### Disabled Workflows
-- `.gitea/workflows/*.disabled` - Remove all disabled workflows
-
-### Old Test Results
-- `test-results/` - Can be regenerated
-- `playwright-report/` - Can be regenerated
-
-### Logs
-- `logs/*.log` - Should be in .gitignore
-
-## Git Remote Issue
-Current: `https://git.dk0.dev/denshooter/portfolio`
-Issue: Can't connect to git.dk0.dev:443
-
-Options:
-1. Check if server is up
-2. Use SSH instead: `git@git.dk0.dev:denshooter/portfolio.git`
-3. Check if URL changed

CLEANUP_SUMMARY.md

@@ -1,95 +0,0 @@
-# 🧹 Cleanup Summary
-
-## Files Removed
-
-### Documentation (15 files)
-- ✅ CHANGELOG_DEV.md - Old changelog
-- ✅ PUSH_READY.md - One-time status
-- ✅ COMMIT_MESSAGE.txt - One-time commit message
-- ✅ DEPLOYMENT-FIXES.md - Old fixes
-- ✅ DEPLOYMENT-IMPROVEMENTS.md - Old improvements
-- ✅ DEPLOYMENT.md - Duplicate
-- ✅ AFTER_PUSH_SETUP.md - One-time setup
-- ✅ PRE_PUSH_CHECKLIST.md - Merged into SAFE_PUSH_TO_MAIN.md
-- ✅ TEST_FIXES.md - One-time fixes
-- ✅ AUTOMATED_TESTING_SETUP.md - Info in TESTING_GUIDE.md
-- ✅ SECURITY-UPDATE.md - Old update
-- ✅ SECURITY-CHECKLIST.md - Merged into SECURITY.md
-- ✅ PRODUCTION-DEPLOYMENT.md - Duplicate
-- ✅ ANALYTICS.md - Not actively used
-- ✅ docs/IMPROVEMENTS_SUMMARY.md - Old summary
-- ✅ docs/CODING_DETECTION_DEBUG.md - Debug notes
-
-### Scripts (4 files)
-- ✅ scripts/quick-health-fix.sh - One-time fix
-- ✅ scripts/fix-connection.sh - One-time fix
-- ✅ scripts/debug-gitea-actions.sh - Debug script
-
-### Workflows (7 files)
-- ✅ .gitea/workflows/*.disabled - All disabled workflows removed
-
-### Docker Configs (2 files)
-- ✅ docker-compose.zero-downtime.yml - Old version
-- ✅ docker-compose.zero-downtime-fixed.yml - Old version
-- ✅ nginx-zero-downtime.conf - Unused
-
-## Files Kept (Essential)
-
-### Documentation
-- ✅ README.md - Main docs
-- ✅ DEV-SETUP.md - Setup guide
-- ✅ SECURITY.md - Security info
-- ✅ TESTING_GUIDE.md - Testing docs
-- ✅ SAFE_PUSH_TO_MAIN.md - Deployment guide
-- ✅ AUTO_DEPLOYMENT_STATUS.md - Deployment status
-- ✅ docs/ai-image-generation/* - AI feature docs
-- ✅ docs/ACTIVITY_FEATURES.md - Activity features
-- ✅ docs/DYNAMIC_ACTIVITY_MANAGEMENT.md - Activity management
-- ✅ docs/N8N_CHAT_SETUP.md - n8n chat setup
-- ✅ docs/N8N_INTEGRATION.md - n8n integration
-
-### Docker Configs
-- ✅ docker-compose.yml - Main config
-- ✅ docker-compose.production.yml - Production
-- ✅ docker-compose.dev.minimal.yml - Dev minimal
-
-## Git Remote Fixed
-
-**Before**: `https://git.dk0.dev/denshooter/portfolio` (HTTPS - connection issues)
-**After**: `git@git.dk0.dev:denshooter/portfolio.git` (SSH - more reliable)
-
-## .gitignore Updated
-
-Added:
-- `logs/*.log` - Log files
-- `test-results/` - Test results
-- `playwright-report/` - Playwright reports
-- `coverage/` - Coverage reports
-- `.idea/` - IDE files
-- `.vscode/` - IDE files
-
-## Next Steps
-
-1. **Test Git connection**:
-   ```bash
-   git fetch
-   ```
-
-2. **If SSH doesn't work**, switch back to HTTPS:
-   ```bash
-   git remote set-url origin https://git.dk0.dev/denshooter/portfolio.git
-   ```
-
-3. **Commit cleanup**:
-   ```bash
-   git add .
-   git commit -m "chore: Clean up old documentation and unused files"
-   git push origin dev
-   ```
-
-## Result
-
-- **Removed**: ~30 files
-- **Kept**: Essential documentation and configs
-- **Fixed**: Git remote connection
-- **Updated**: .gitignore for better file management

DEV-SETUP.md

@@ -1,239 +0,0 @@
-# 🚀 Development Environment Setup
-
-This document explains how to set up and use the development environment for the portfolio project.
-
-## ✨ Features
-
-- **Automatic Database Setup**: PostgreSQL and Redis start automatically
-- **Hot Reload**: Next.js development server with hot reload
-- **Database Integration**: Real database integration for email management
-- **Modern Admin Dashboard**: Completely redesigned admin interface
-- **Minimal Setup**: Only essential services for fast development
-
-## 🛠️ Quick Start
-
-### Prerequisites
-
-- Node.js 18+ 
-- Docker & Docker Compose
-- npm or yarn
-
-### 1. Install Dependencies
-
-```bash
-npm install
-```
-
-### 2. Start Development Environment
-
-#### Option A: Full Development Environment (with Docker)
-```bash
-npm run dev
-```
-
-This single command will:
-- Start PostgreSQL database
-- Start Redis cache
-- Start Next.js development server
-- Set up all environment variables
-
-#### Option B: Simple Development Mode (without Docker)
-```bash
-npm run dev:simple
-```
-
-This starts only the Next.js development server without Docker services. Use this if you don't have Docker installed or want a faster startup.
-
-### 3. Access Services
-
-- **Portfolio**: http://localhost:3000
-- **Admin Dashboard**: http://localhost:3000/manage
-- **PostgreSQL**: localhost:5432
-- **Redis**: localhost:6379
-
-## 📧 Email Testing
-
-The development environment supports email functionality:
-
-1. Send emails through the contact form or admin panel
-2. Emails are sent directly (configure SMTP in production)
-3. Check console logs for email debugging
-
-## 🗄️ Database
-
-### Development Database
-
-- **Host**: localhost:5432
-- **Database**: portfolio_dev
-- **User**: portfolio_user
-- **Password**: portfolio_dev_pass
-
-### Database Commands
-
-```bash
-# Generate Prisma client
-npm run db:generate
-
-# Push schema changes
-npm run db:push
-
-# Seed database with sample data
-npm run db:seed
-
-# Open Prisma Studio
-npm run db:studio
-
-# Reset database
-npm run db:reset
-```
-
-## 🎨 Admin Dashboard
-
-The new admin dashboard includes:
-
-- **Overview**: Statistics and recent activity
-- **Projects**: Manage portfolio projects
-- **Emails**: Handle contact form submissions with beautiful templates
-- **Analytics**: View performance metrics
-- **Settings**: Import/export functionality
-
-### Email Templates
-
-Three beautiful email templates are available:
-
-1. **Welcome Template** (Green): Friendly greeting with portfolio links
-2. **Project Template** (Purple): Professional project discussion response
-3. **Quick Template** (Orange): Fast acknowledgment response
-
-## 🔧 Environment Variables
-
-Create a `.env.local` file:
-
-```env
-# Development Database
-DATABASE_URL="postgresql://portfolio_user:portfolio_dev_pass@localhost:5432/portfolio_dev?schema=public"
-
-# Redis
-REDIS_URL="redis://localhost:6379"
-
-# Email (for production)
-MY_EMAIL=contact@dk0.dev
-MY_PASSWORD=your-email-password
-
-# Application
-NEXT_PUBLIC_BASE_URL=http://localhost:3000
-NODE_ENV=development
-```
-
-## 🛑 Stopping the Environment
-
-Use Ctrl+C to stop all services, or:
-
-```bash
-# Stop Docker services only
-npm run docker:dev:down
-```
-
-## 🐳 Docker Commands
-
-```bash
-# Start only database services
-npm run docker:dev
-
-# Stop database services
-npm run docker:dev:down
-
-# View logs
-docker compose -f docker-compose.dev.minimal.yml logs -f
-```
-
-## 📁 Project Structure
-
-```
-├── docker-compose.dev.minimal.yml  # Minimal development services
-├── scripts/
-│   ├── dev-minimal.js       # Main development script
-│   ├── dev-simple.js        # Simple development script
-│   ├── setup-database.js    # Database setup script
-│   └── init-db.sql          # Database initialization
-├── app/
-│   ├── admin/               # Admin dashboard
-│   ├── api/
-│   │   ├── contacts/        # Contact management API
-│   │   └── email/           # Email sending API
-│   └── components/
-│       ├── ModernAdminDashboard.tsx
-│       ├── EmailManager.tsx
-│       └── EmailResponder.tsx
-└── prisma/
-    └── schema.prisma        # Database schema
-```
-
-## 🚨 Troubleshooting
-
-### Docker Compose Not Found
-
-If you get the error `spawn docker compose ENOENT`:
-
-```bash
-# Try the simple dev mode instead
-npm run dev:simple
-
-# Or install Docker Desktop
-# Download from: https://www.docker.com/products/docker-desktop
-```
-
-### Port Conflicts
-
-If ports are already in use:
-
-```bash
-# Check what's using the ports
-lsof -i :3000
-lsof -i :5432
-lsof -i :6379
-
-# Kill processes if needed
-kill -9 <PID>
-```
-
-### Database Connection Issues
-
-```bash
-# Restart database services
-npm run docker:dev:down
-npm run docker:dev
-
-# Check database status
-docker compose -f docker-compose.dev.minimal.yml ps
-```
-
-### Email Not Working
-
-1. Verify environment variables
-2. Check browser console for errors
-3. Ensure SMTP is configured for production
-
-## 🎯 Production Deployment
-
-For production deployment, use:
-
-```bash
-npm run build
-npm run start
-```
-
-The production environment uses the production Docker Compose configuration.
-
-## 📝 Notes
-
-- The development environment automatically creates sample data
-- Database changes are persisted in Docker volumes
-- Hot reload works for all components and API routes
-- Minimal setup for fast development startup
-
-## 🔗 Links
-
-- **Portfolio**: https://dk0.dev
-- **Admin**: https://dk0.dev/manage
-- **GitHub**: https://github.com/denniskonkol/portfolio

DEV_TESTING.md

@@ -1,236 +0,0 @@
-# 🧪 Dev Branch Testing Guide
-
-## Übersicht
-
-Dieses Dokument erklärt, wie du dein Portfolio-Projekt auf dem `dev` Branch testen kannst, bevor du es in Production deployst.
-
-## Voraussetzungen
-
-1. ✅ n8n läuft bereits auf `n8n.dk0.dev`
-2. ✅ Gitea Repository ist eingerichtet
-3. ✅ Docker und Docker Compose sind installiert
-
-## Setup für lokales Testen mit n8n
-
-### 1. Environment Variables konfigurieren
-
-Erstelle eine `.env.local` Datei (oder aktualisiere deine bestehende `.env`):
-
-```bash
-# n8n Integration
-N8N_WEBHOOK_URL=https://n8n.dk0.dev
-N8N_API_KEY=dein-n8n-api-key
-N8N_SECRET_TOKEN=dein-n8n-secret-token
-
-# Application
-NODE_ENV=development
-NEXT_PUBLIC_BASE_URL=http://localhost:3000
-
-# Database (wird automatisch von docker-compose.dev.minimal.yml gesetzt)
-# DATABASE_URL=postgresql://portfolio_user:portfolio_dev_pass@localhost:5432/portfolio_dev?schema=public
-
-# Redis (wird automatisch von docker-compose.dev.minimal.yml gesetzt)
-# REDIS_URL=redis://localhost:6379
-
-# Email Configuration
-MY_EMAIL=contact@dk0.dev
-MY_INFO_EMAIL=info@dk0.dev
-MY_PASSWORD=dein-email-passwort
-MY_INFO_PASSWORD=dein-info-email-passwort
-
-# Analytics
-NEXT_PUBLIC_UMAMI_URL=https://analytics.dk0.dev
-NEXT_PUBLIC_UMAMI_WEBSITE_ID=b3665829-927a-4ada-b9bb-fcf24171061e
-
-# Security
-ADMIN_BASIC_AUTH=admin:dein-sicheres-passwort
-LOG_LEVEL=debug
-```
-
-### 2. Lokal testen
-
-```bash
-# 1. Starte Datenbank und Redis
-npm run dev:minimal
-
-# 2. In einem neuen Terminal: Starte die Next.js App
-npm run dev
-
-# 3. Öffne http://localhost:3000
-```
-
-### 3. n8n Webhook testen
-
-Teste die Verbindung zu deinem n8n Server:
-
-```bash
-# Teste den Status Endpoint
-curl https://n8n.dk0.dev/webhook/denshooter-71242/status
-
-# Teste den Chat Endpoint (wenn konfiguriert)
-curl -X POST https://n8n.dk0.dev/webhook/chat \
-  -H "Content-Type: application/json" \
-  -H "Authorization: Bearer DEIN_N8N_SECRET_TOKEN" \
-  -d '{"message": "Hallo", "history": []}'
-```
-
-## Staging Deployment auf dem Server
-
-### 1. Gitea Variables und Secrets konfigurieren
-
-Gehe zu deinem Gitea Repository → Settings → Secrets/Variables und füge hinzu:
-
-**Variables:**
-- `NEXT_PUBLIC_BASE_URL` = `https://staging.dk0.dev` (oder deine Staging URL)
-- `MY_EMAIL` = `contact@dk0.dev`
-- `MY_INFO_EMAIL` = `info@dk0.dev`
-- `NEXT_PUBLIC_UMAMI_URL` = `https://analytics.dk0.dev`
-- `NEXT_PUBLIC_UMAMI_WEBSITE_ID` = `b3665829-927a-4ada-b9bb-fcf24171061e`
-- `N8N_WEBHOOK_URL` = `https://n8n.dk0.dev`
-- `LOG_LEVEL` = `debug`
-
-**Secrets:**
-- `MY_PASSWORD` = Dein Email Passwort
-- `MY_INFO_PASSWORD` = Dein Info Email Passwort
-- `ADMIN_BASIC_AUTH` = `admin:dein-sicheres-passwort`
-- `N8N_API_KEY` = Dein n8n API Key (optional)
-- `N8N_SECRET_TOKEN` = Dein n8n Secret Token (optional)
-
-### 2. Push zum dev Branch
-
-```bash
-# Stelle sicher, dass du auf dem dev Branch bist
-git checkout dev
-
-# Committe deine Änderungen
-git add .
-git commit -m "Test: Dev deployment"
-
-# Push zum dev Branch (triggert automatisch Staging Deployment)
-git push origin dev
-```
-
-### 3. Deployment überwachen
-
-Nach dem Push:
-1. Gehe zu deinem Gitea Repository → Actions
-2. Überwache den Workflow `CI/CD Pipeline (Dev/Staging)`
-3. Der Workflow wird:
-   - Tests ausführen
-   - Docker Image bauen
-   - Staging Container auf Port 3001 deployen
-
-### 4. Staging testen
-
-```bash
-# Auf deinem Server: Prüfe Container Status
-docker ps | grep staging
-
-# Prüfe Health Endpoint
-curl http://localhost:3001/api/health
-
-# Prüfe n8n Status Endpoint
-curl http://localhost:3001/api/n8n/status
-
-# Logs ansehen
-docker logs portfolio-app-staging -f
-```
-
-### 5. Staging URL konfigurieren
-
-Falls du eine Subdomain für Staging hast (z.B. `staging.dk0.dev`):
-- Konfiguriere deinen Reverse Proxy (Nginx/Traefik) um auf Port 3001 zu zeigen
-- Oder verwende direkt `http://dein-server-ip:3001`
-
-## Troubleshooting
-
-### Dev Container wird nicht erstellt
-
-1. **Prüfe Gitea Workflow:**
-   - Gehe zu Repository → Actions
-   - Prüfe ob der Workflow `ci-cd-dev-staging.yml` existiert
-   - Prüfe ob der Workflow auf `dev` Branch Push reagiert
-
-2. **Prüfe Gitea Variables:**
-   - Stelle sicher, dass alle erforderlichen Variables und Secrets gesetzt sind
-   - Prüfe die Workflow Logs für fehlende Variablen
-
-3. **Prüfe Docker:**
-   ```bash
-   # Auf deinem Server
-   docker ps -a
-   docker images | grep portfolio-app
-   ```
-
-### n8n Verbindungsfehler
-
-1. **Prüfe n8n URL:**
-   ```bash
-   # Teste ob n8n erreichbar ist
-   curl https://n8n.dk0.dev/webhook/denshooter-71242/status
-   ```
-
-2. **Prüfe Environment Variables:**
-   ```bash
-   # Im Container
-   docker exec portfolio-app-staging env | grep N8N
-   ```
-
-3. **Prüfe n8n Webhook Konfiguration:**
-   - Stelle sicher, dass der Webhook in n8n aktiviert ist
-   - Prüfe ob der Webhook-Pfad korrekt ist (`/webhook/denshooter-71242/status`)
-
-### Datenbank Fehler
-
-```bash
-# Prüfe ob die Datenbank läuft
-docker ps | grep postgres-staging
-
-# Prüfe Datenbank Logs
-docker logs portfolio-postgres-staging
-
-# Prüfe Verbindung
-docker exec portfolio-postgres-staging pg_isready -U portfolio_user -d portfolio_staging_db
-```
-
-## Workflow Übersicht
-
-```
-┌─────────────────┐
-│  Push to dev    │
-└────────┬────────┘
-         │
-         ▼
-┌─────────────────┐
-│  Run Tests      │
-└────────┬────────┘
-         │
-         ▼
-┌─────────────────┐
-│  Build Docker   │
-│  Image (staging) │
-└────────┬────────┘
-         │
-         ▼
-┌─────────────────┐
-│  Deploy Staging │
-│  (Port 3001)    │
-└────────┬────────┘
-         │
-         ▼
-┌─────────────────┐
-│  Health Check   │
-└─────────────────┘
-```
-
-## Nächste Schritte
-
-1. ✅ Teste lokal mit `npm run dev`
-2. ✅ Konfiguriere Gitea Variables und Secrets
-3. ✅ Push zum `dev` Branch
-4. ✅ Teste Staging auf Port 3001
-5. ✅ Wenn alles funktioniert: Merge zu `production` Branch
-
----
-
-**Tipp:** Verwende `LOG_LEVEL=debug` in Staging um mehr Informationen zu sehen!

DIRECTUS_CHECKLIST.md

@@ -0,0 +1,269 @@
+# Directus CMS – Eingabe-Checkliste
+
+## Collections und Struktur
+
+Du hast zwei Collections in Directus:
+1. **messages** – kurze UI-Texte (Keys mit Werten)
+2. **content_pages** – längere Abschnitte (Slug mit Rich Text)
+
+---
+
+## Collection: messages
+
+Alle folgenden Einträge in Directus anlegen. Format:
+| key | locale | value |
+
+### Navigation & Header
+```
+nav.home              | en | Home
+nav.home              | de | Startseite
+nav.about             | en | About
+nav.about             | de | Über mich
+nav.projects          | en | Projects
+nav.projects          | de | Projekte
+nav.contact           | en | Contact
+nav.contact           | de | Kontakt
+```
+
+### Footer
+```
+footer.role           | en | Software Engineer
+footer.role           | de | Software Engineer
+footer.madeIn         | en | Made in Germany
+footer.madeIn         | de | Made in Germany
+footer.legalNotice    | en | Legal notice
+footer.legalNotice    | de | Impressum
+footer.privacyPolicy  | en | Privacy policy
+footer.privacyPolicy  | de | Datenschutz
+footer.privacySettings| en | Privacy settings
+footer.privacySettings| de | Datenschutz-Einstellungen
+footer.privacySettingsTitle | en | Show privacy settings banner again
+footer.privacySettingsTitle | de | Datenschutz-Banner wieder anzeigen
+footer.builtWith      | en | Built with
+footer.builtWith      | de | Built with
+```
+
+### Home – Hero
+```
+home.hero.features.f1 | en | Next.js & Flutter
+home.hero.features.f1 | de | Next.js & Flutter
+home.hero.features.f2 | en | Docker Swarm & CI/CD
+home.hero.features.f2 | de | Docker Swarm & CI/CD
+home.hero.features.f3 | en | Self-Hosted Infrastructure
+home.hero.features.f3 | de | Self-Hosted Infrastruktur
+```
+
+### Home – About
+```
+home.about.title      | en | About Me
+home.about.title      | de | Über mich
+home.about.techStackTitle | en | My Tech Stack
+home.about.techStackTitle | de | Mein Tech Stack
+home.about.hobbiesTitle | en | When I'm Not Coding
+home.about.hobbiesTitle | de | Wenn ich nicht code
+home.about.currentlyReading.title | en | Currently Reading
+home.about.currentlyReading.title | de | Aktuell am Lesen
+home.about.currentlyReading.progress | en | Progress
+home.about.currentlyReading.progress | de | Fortschritt
+```
+
+### Home – Projects (List)
+```
+home.projects.title   | en | Selected Works
+home.projects.title   | de | Ausgewählte Projekte
+home.projects.subtitle | en | A collection of projects I've worked on...
+home.projects.subtitle | de | Eine Auswahl an Projekten, an denen ich gearbeitet habe...
+home.projects.featured | en | Featured
+home.projects.featured | de | Hervorgehoben
+home.projects.viewAll | en | View All Projects
+home.projects.viewAll | de | Alle Projekte ansehen
+```
+
+### Home – Contact
+```
+home.contact.title    | en | Contact Me
+home.contact.title    | de | Kontakt
+home.contact.subtitle | en | Interested in working together...
+home.contact.subtitle | de | Du willst zusammenarbeiten...
+home.contact.getInTouch | en | Get In Touch
+home.contact.getInTouch | de | Melde dich
+home.contact.getInTouchBody | en | I'm always available to discuss...
+home.contact.getInTouchBody | de | Ich bin immer offen für neue Chancen...
+home.contact.info.email | en | Email
+home.contact.info.email | de | E-Mail
+home.contact.info.location | en | Location
+home.contact.info.location | de | Ort
+home.contact.info.locationValue | en | Osnabrück, Germany
+home.contact.info.locationValue | de | Osnabrück, Deutschland
+```
+
+### Common
+```
+common.backToHome     | en | Back to Home
+common.backToHome     | de | Zurück zur Startseite
+common.backToProjects | en | Back to Projects
+common.backToProjects | de | Zurück zu den Projekten
+common.viewAllProjects | en | View All Projects
+common.viewAllProjects | de | Alle Projekte ansehen
+common.loading        | en | Loading...
+common.loading        | de | Lädt...
+```
+
+### Projects – List
+```
+projects.list.title   | en | My Projects
+projects.list.title   | de | Meine Projekte
+projects.list.intro   | en | Explore my portfolio...
+projects.list.intro   | de | Stöbere durch mein Portfolio...
+projects.list.searchPlaceholder | en | Search projects...
+projects.list.searchPlaceholder | de | Projekte durchsuchen...
+projects.list.all     | en | All
+projects.list.all     | de | Alle
+projects.list.noResults | en | No projects found...
+projects.list.noResults | de | Keine Projekte passen...
+projects.list.clearFilters | en | Clear filters
+projects.list.clearFilters | de | Filter zurücksetzen
+```
+
+### Projects – Detail
+```
+projects.detail.links       | en | Project Links
+projects.detail.links       | de | Projektlinks
+projects.detail.liveDemo    | en | Live Demo
+projects.detail.liveDemo    | de | Live-Demo
+projects.detail.liveNotAvailable | en | Live demo not available
+projects.detail.liveNotAvailable | de | Keine Live-Demo verfügbar
+projects.detail.viewSource  | en | View Source
+projects.detail.viewSource  | de | Quellcode ansehen
+projects.detail.techStack   | en | Tech Stack
+projects.detail.techStack   | de | Tech-Stack
+```
+
+### Consent & Privacy
+```
+consent.title         | en | Privacy settings
+consent.title         | de | Datenschutz-Einstellungen
+consent.description   | en | We use optional services...
+consent.description   | de | Wir nutzen optionale Dienste...
+consent.essential     | en | Essential
+consent.essential     | de | Essentiell
+consent.analytics     | en | Analytics
+consent.analytics     | de | Analytics
+consent.chat          | en | Chatbot
+consent.chat          | de | Chatbot
+consent.alwaysOn      | en | Always on
+consent.alwaysOn      | de | Immer aktiv
+consent.acceptAll     | en | Accept all
+consent.acceptAll     | de | Alles akzeptieren
+consent.acceptSelected | en | Accept selected
+consent.acceptSelected | de | Auswahl akzeptieren
+consent.rejectAll     | en | Reject all
+consent.rejectAll     | de | Alles ablehnen
+consent.hide          | en | Hide
+consent.hide          | de | Ausblenden
+```
+
+---
+
+## Collection: content_pages
+
+Diese sind für **längere Inhalte**. Nutze den Ric-Text-Editor in Directus oder Markdown.
+
+### Home – Hero (langere Beschreibung)
+- **slug**: home-hero
+- **locale**: en / de
+- **title** (optional): Hero Section Description
+- **content**: Längerer Text/Rich Text (ersetzen die kurze beschreibung)
+
+Beispiel EN:
+> "I'm a passionate software engineer and self-hoster from Osnabrück, Germany. I build full-stack web applications with Next.js, create mobile solutions with Flutter, and love exploring DevOps. I run my own infrastructure and automate deployments with CI/CD."
+
+Beispiel DE:
+> "Ich bin ein leidenschaftlicher Softwareentwickler und Self-Hoster aus Osnabrück. Ich entwickle Full-Stack Web-Apps mit Next.js, mobile Apps mit Flutter und bin begeistert von DevOps. Ich betreibe meine eigene Infrastruktur und automatisiere Deployments."
+
+### Home – About (längere Inhalte)
+- **slug**: home-about
+- **locale**: en / de
+- **content**: Längerer Fließtext über mich
+
+### Home – Projects Intro
+- **slug**: home-projects
+- **locale**: en / de
+- **content**: Intro-Text vor der Projekt-Liste
+
+### Home – Contact Intro
+- **slug**: home-contact
+- **locale**: en / de
+- **content**: Intro vor dem Kontakt-Formular
+
+---
+
+## Wie du es in Directus eingeben kannst:
+
+### Schritt 1: messages Collection
+1. Gehe in Directus → **messages**.
+2. Klick "Create New" (oder "+").
+3. Füll aus:
+   - **key**: z. B. "nav.home"
+   - **locale**: Dropdown → "en" oder "de"
+   - **value**: Der Text (z. B. "Home")
+4. Speichern. Wiederholen für alle Keys oben.
+
+### Schritt 2: content_pages Collection
+1. Gehe in Directus → **content_pages**.
+2. Klick "Create New".
+3. Füll aus:
+   - **slug**: z. B. "home-hero"
+   - **locale**: "en" oder "de"
+   - **title** (optional): "Hero Section" oder leer
+   - **content**: Markdown/Rich Text eingeben
+4. Speichern. Wiederholen für andere Seiten.
+
+---
+
+## Im Code: Texte nutzen
+
+### Kurze Keys (aus messages):
+```tsx
+import { getLocalizedMessage } from '@/lib/i18n-loader';
+
+const text = await getLocalizedMessage('nav.home', locale);
+// text = "Home" (oder fallback aus JSON)
+```
+
+### Längere Inhalte (aus content_pages):
+```tsx
+import { getLocalizedContent } from '@/lib/i18n-loader';
+
+const page = await getLocalizedContent('home-hero', locale);
+// page.content = "Längerer Fließtext..."
+```
+
+---
+
+## Quick-Test:
+
+1. Lege in Directus **einen** Key in messages an:
+   - key: "test"
+   - locale: "en"
+   - value: "Hello from Directus"
+
+2. Im Code:
+   ```tsx
+   const text = await getLocalizedMessage('test', 'en');
+   console.log(text); // sollte "Hello from Directus" loggen
+   ```
+
+3. Wenn das funktioniert: Alle anderen Keys eintragen!
+
+---
+
+## Hinweise:
+
+- **Keys** sollten mit `.` strukturiert sein (z. B. `nav.home`, `home.about.title`).
+- **Locale** ist immer "en" oder "de" (enum).
+- **Fallback**: Wenn ein Key in Directus fehlt, nutzt der Code die `messages/*.json` Dateien.
+- **Caching**: Texte werden 5 Minuten gecacht. Um Cache zu leeren: `clearI18nCache()` im Code oder Server restart.
+- **Rich Text**: Im `content_pages` Feld kannst du Markdown oder den Rich-Text-Editor nutzen.
+
+Viel Spaß! 🚀

DOCKER_BUILD_FIX.md

@@ -1,150 +0,0 @@
-# Docker Build Fix - Standalone Output Issue
-
-## Problem
-
-Der Docker Build schlägt fehl mit:
-```
-ERROR: failed to calculate checksum of ref ... "/app/.next/standalone/app": not found
-```
-
-## Ursache
-
-Next.js erstellt das `standalone` Output nur, wenn:
-1. `output: "standalone"` in `next.config.ts` gesetzt ist ✅ (bereits konfiguriert)
-2. Der Build erfolgreich abgeschlossen wird
-3. Alle Abhängigkeiten korrekt aufgelöst werden
-
-## Lösung
-
-### 1. n8n Status Route Fix
-
-Die Route wurde angepasst, um während des Builds nicht zu fehlschlagen, wenn `N8N_WEBHOOK_URL` nicht gesetzt ist:
-
-```typescript
-// Prüft jetzt, ob N8N_WEBHOOK_URL gesetzt ist
-if (!n8nWebhookUrl) {
-  return NextResponse.json({ /* fallback */ });
-}
-```
-
-### 2. Dockerfile Verbesserungen
-
-- **Verification Step**: Prüft, ob das standalone Verzeichnis existiert
-- **Debug Output**: Zeigt die Verzeichnisstruktur, falls Probleme auftreten
-- **Robustere Fehlerbehandlung**: Bessere Fehlermeldungen
-
-### 3. Mögliche Ursachen und Lösungen
-
-#### Problem: Standalone Output wird nicht erstellt
-
-**Lösung 1: Prüfe next.config.ts**
-```typescript
-// Stelle sicher, dass dies gesetzt ist:
-output: "standalone",
-outputFileTracingRoot: path.join(process.cwd()),
-```
-
-**Lösung 2: Prüfe Build-Logs**
-```bash
-# Schaue in die Build-Logs, ob es Fehler gibt
-docker build . 2>&1 | grep -i "standalone\|error"
-```
-
-**Lösung 3: Lokaler Test**
-```bash
-# Teste lokal, ob standalone erstellt wird
-npm run build
-ls -la .next/standalone/
-```
-
-#### Problem: Falsche Verzeichnisstruktur
-
-**✅ GELÖST**: Die Debug-Ausgabe zeigt, dass Next.js 15 die Struktur `.next/standalone/` direkt verwendet:
-- `.next/standalone/server.js` ✅
-- `.next/standalone/.next/` ✅
-- `.next/standalone/node_modules/` ✅
-- `.next/standalone/package.json` ✅
-
-**NICHT**: `.next/standalone/app/server.js` ❌
-
-Das Dockerfile wurde korrigiert, um `.next/standalone/` direkt zu kopieren.
-
-## Debugging
-
-### 1. Lokaler Build Test
-
-```bash
-# Baue lokal
-npm run build
-
-# Prüfe ob standalone existiert
-test -d .next/standalone && echo "✅ Standalone exists" || echo "❌ Standalone missing"
-
-# Zeige Struktur
-ls -la .next/standalone/
-find .next/standalone -name "server.js"
-```
-
-### 2. Docker Build mit Debug
-
-```bash
-# Baue mit mehr Output
-docker build --progress=plain -t portfolio-app:test .
-
-# Oder baue nur bis zum Builder Stage
-docker build --target builder -t portfolio-builder:test .
-docker run --rm portfolio-builder:test ls -la .next/standalone/
-```
-
-### 3. Prüfe Build-Logs
-
-Der aktualisierte Dockerfile gibt jetzt Debug-Informationen aus:
-- Zeigt `.next/` Verzeichnisstruktur
-- Sucht nach `standalone` Verzeichnis
-- Zeigt `server.js` Location
-
-## Alternative: Fallback ohne Standalone
-
-Falls das standalone Output weiterhin Probleme macht, kann man auf ein vollständiges Image zurückgreifen:
-
-```dockerfile
-# Statt standalone zu kopieren, kopiere alles
-COPY --from=builder --chown=nextjs:nodejs /app/node_modules ./node_modules
-COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
-COPY --from=builder --chown=nextjs:nodejs /app/public ./public
-COPY --from=builder --chown=nextjs:nodejs /app/package.json ./package.json
-COPY --from=builder --chown=nextjs:nodejs /app/prisma ./prisma
-
-CMD ["npm", "start"]
-```
-
-**Nachteil**: Größeres Image, aber funktioniert immer.
-
-## Nächste Schritte
-
-1. ✅ n8n Status Route Fix (bereits gemacht)
-2. ✅ Dockerfile Debug-Verbesserungen (bereits gemacht)
-3. 🔄 Push zum dev Branch und Build testen
-4. 📊 Build-Logs analysieren
-5. 🔧 Falls nötig: Dockerfile weiter anpassen
-
-## Workflow Test
-
-```bash
-# 1. Committe Änderungen
-git add .
-git commit -m "Fix: Docker build standalone output issue"
-
-# 2. Push zum dev Branch
-git push origin dev
-
-# 3. Überwache Gitea Actions
-# Gehe zu Repository → Actions → CI/CD Pipeline (Dev/Staging)
-
-# 4. Prüfe Build-Logs
-# Schaue nach den Debug-Ausgaben im Build-Step
-```
-
----
-
-**Hinweis**: Falls das Problem weiterhin besteht, schaue in die Build-Logs nach den Debug-Ausgaben, die der aktualisierte Dockerfile jetzt ausgibt. Diese zeigen genau, wo das Problem liegt.

Dockerfile

@@ -1,13 +1,12 @@
 # Multi-stage build for optimized production image
-FROM node:20 AS base
+FROM node:25 AS base
 
 # Install dependencies only when needed
 FROM base AS deps
-# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
 RUN apt-get update && apt-get install -y --no-install-recommends curl && rm -rf /var/lib/apt/lists/*
 WORKDIR /app
 
-# Install dependencies based on the preferred package manager
+# Copy package files first for better caching
 COPY package.json package-lock.json* ./
 RUN npm ci --only=production && npm cache clean --force
 
@@ -19,21 +18,23 @@ WORKDIR /app
 COPY package.json package-lock.json* ./
 
 # Install all dependencies (including dev dependencies for build)
-RUN npm ci
+# Use npm ci with cache mount for faster builds
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci
 
-# Copy source code
+# Copy Prisma schema first (for better caching)
-COPY . .
+COPY prisma ./prisma
 
-# Install type definitions for react-responsive-masonry and node-fetch
+# Generate Prisma client (cached if schema unchanged)
-RUN npm install --save-dev @types/react-responsive-masonry @types/node-fetch
-
-# Generate Prisma client
 RUN npx prisma generate
 
-# Build the application
+# Copy source code (this invalidates cache when code changes)
+COPY . .
+
+# Build the application (mount cache for faster rebuilds)
 ENV NEXT_TELEMETRY_DISABLED=1
 ENV NODE_ENV=production
-RUN npm run build
+RUN --mount=type=cache,target=/app/.next/cache npm run build
 
 # Verify standalone output was created and show structure for debugging
 RUN if [ ! -d .next/standalone ]; then \
@@ -56,6 +57,9 @@ WORKDIR /app
 ENV NODE_ENV=production
 ENV NEXT_TELEMETRY_DISABLED=1
 
+# Install curl for health checks
+RUN apt-get update && apt-get install -y --no-install-recommends curl && rm -rf /var/lib/apt/lists/*
+
 # Create a non-root user
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
@@ -63,10 +67,6 @@ RUN adduser --system --uid 1001 nextjs
 # Copy the built application
 COPY --from=builder /app/public ./public
 
-# Set the correct permission for prerender cache
-RUN mkdir .next
-RUN chown nextjs:nodejs .next
-
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 # Copy standalone output (contains server.js and all dependencies)
@@ -75,9 +75,19 @@ RUN chown nextjs:nodejs .next
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
+# Create cache directories with correct permissions AFTER copying standalone
+RUN mkdir -p .next/cache/fetch-cache .next/cache/images && \
+    chown -R nextjs:nodejs .next/cache
+
 # Copy Prisma files
 COPY --from=builder /app/prisma ./prisma
 COPY --from=builder /app/node_modules/.prisma ./node_modules/.prisma
+COPY --from=builder /app/node_modules/prisma ./node_modules/prisma
+COPY --from=builder /app/node_modules/@prisma ./node_modules/@prisma
+
+# Create scripts directory and copy start script AFTER standalone to ensure it's not overwritten
+RUN mkdir -p scripts && chown nextjs:nodejs scripts
+COPY --from=builder --chown=nextjs:nodejs /app/scripts/start-with-migrate.js ./scripts/start-with-migrate.js
 
 # Note: Environment variables should be passed via docker-compose or runtime environment
 # DO NOT copy .env files into the image for security reasons
@@ -93,4 +103,4 @@ ENV HOSTNAME="0.0.0.0"
 HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
   CMD curl -f http://localhost:3000/api/health || exit 1
 
-CMD ["node", "server.js"]
+CMD ["node", "scripts/start-with-migrate.js"]

GEMINI.md

@@ -0,0 +1,34 @@
+# Gemini CLI: Project Context & Engineering Mandates
+
+## Project Identity
+- **Name:** Dennis Konkol Portfolio (dk0.dev)
+- **Aesthetic:** "Liquid Editorial Bento" (Premium, minimalistisch, hoch-typografisch).
+- **Core Palette:** Creme (`#fdfcf8`), Stone (`#0c0a09`), Emerald (`#10b981`), Sky, Purple.
+
+## Tech Stack
+- **Framework:** Next.js 15 (App Router), Tailwind CSS 3.4.
+- **CMS:** Directus (primär für Texte, Hobbies, Tech-Stack, Projekte).
+- **Database:** PostgreSQL (Prisma) als lokaler Cache/Mirror für Projekte.
+- **Animations:** Framer Motion (bevorzugt für alle Übergänge).
+- **i18n:** `next-intl` (Locales: `en`, `de`).
+
+## Engineering Guidelines (Mandates)
+
+### 1. UI Components
+- **Bento Grid:** Neue Features sollten immer in das bestehende Grid integriert werden. Keine schwebenden Overlays.
+- **Skeletons:** Jede asynchrone Komponente benötigt einen passenden `Skeleton` Ladezustand.
+- **Typography:** Headlines immer uppercase, tracking-tighter, mit Akzent-Punkt am Ende.
+
+### 2. Implementation Rules
+- **TypeScript:** Keine `any`. Nutze bestehende Interfaces in `lib/directus.ts` oder `app/_ui/`.
+- **Resilience:** Alle API-Calls müssen Fehler abfangen und sinnvolle Fallbacks (oder Skeletons) anzeigen.
+- **Next.js Standalone:** Das Projekt nutzt den `standalone` Build-Mode. Docker-Builds müssen immer verifiziert werden.
+
+### 3. Agent Instructions
+- **Codebase Investigator:** Nutze dieses Tool für Architektur-Fragen.
+- **Testing:** Führe `npm run test` nach UI-Änderungen aus. Achte auf JSDOM-Einschränkungen (Mocking von `window.matchMedia` und `IntersectionObserver`).
+- **CMS First:** Texte sollten nach Möglichkeit aus der `messages` Collection in Directus kommen, nicht hartcodiert werden.
+
+## Current State
+- **Branch:** `dev` (pushed)
+- **Status:** Design Overhaul abgeschlossen, Build stabil, Docker verifiziert.

GIT_CONNECTION_FIX.md

@@ -1,53 +0,0 @@
-# 🔧 Git Connection Fix
-
-## Issue
-```
-fatal: unable to access 'https://git.dk0.dev/denshooter/portfolio/': 
-Failed to connect to git.dk0.dev port 443 after 75002 ms: Couldn't connect to server
-```
-
-## Solutions
-
-### Option 1: Check Server Status
-The server is reachable via HTTP (tested), but Git might need authentication.
-
-### Option 2: Configure Git Credentials
-```bash
-# Store credentials
-git config --global credential.helper store
-
-# Or use keychain (macOS)
-git config --global credential.helper osxkeychain
-```
-
-### Option 3: Use Personal Access Token
-1. Go to: https://git.dk0.dev/user/settings/applications
-2. Generate a new token
-3. Use it when pushing:
-   ```bash
-   git push https://YOUR_TOKEN@git.dk0.dev/denshooter/portfolio.git
-   ```
-
-### Option 4: Check Firewall/Network
-- Port 443 might be blocked
-- Try from different network
-- Check if VPN is needed
-
-### Option 5: Use SSH (if port 22 opens)
-```bash
-git remote set-url origin git@git.dk0.dev:denshooter/portfolio.git
-```
-
-## Current Status
-- Remote URL: `https://git.dk0.dev/denshooter/portfolio.git`
-- Server reachable: ✅ (HTTP works)
-- Git connection: ⚠️ (May need credentials)
-
-## Quick Test
-```bash
-# Test connection
-curl -I https://git.dk0.dev
-
-# Test Git
-git ls-remote https://git.dk0.dev/denshooter/portfolio.git
-```

README.md

@@ -1,3 +1,8 @@
+# Quick links
+
+- **Ops / setup / deployment / testing**: `docs/OPERATIONS.md`
+- **Locale System & Translations**: `docs/LOCALE_SYSTEM.md`
+
 # Dennis Konkol Portfolio - Modern Dark Theme
 
 Ein modernes, responsives Portfolio mit dunklem Design, coolen Animationen und einem integrierten Admin-Dashboard.
@@ -48,8 +53,10 @@ npm run start        # Production Server
 ## 📖 Dokumentation
 
 - [Development Setup](DEV-SETUP.md) - Detaillierte Setup-Anleitung
-- [Deployment Guide](DEPLOYMENT.md) - Production Deployment
+- [Deployment Setup](DEPLOYMENT_SETUP.md) - Production Deployment
 - [Analytics](ANALYTICS.md) - Analytics und Performance
+- [CMS Guide](docs/CMS_GUIDE.md) - Inhalte/Sprachen pflegen (Rich Text)
+- [Testing & Deployment](docs/TESTING_AND_DEPLOYMENT.md) - Branches → Container → Domains
 
 ## 🔗 Links
 

SAFE_PUSH_TO_MAIN.md

@@ -1,324 +0,0 @@
-# 🚀 Safe Push to Main Branch Guide
-
-**IMPORTANT**: This guide ensures you don't break production when merging to main.
-
-## ⚠️ Pre-Flight Checklist
-
-Before even thinking about pushing to main, verify ALL of these:
-
-### 1. Code Quality ✅
-```bash
-# Run all checks
-npm run build          # Must pass with 0 errors
-npm run lint           # Must pass with 0 errors
-npx tsc --noEmit       # TypeScript must be clean
-npx prisma format      # Database schema must be valid
-```
-
-### 1b. Automated Testing ✅
-```bash
-# Run comprehensive test suite (RECOMMENDED)
-npm run test:all       # Runs all tests including E2E
-
-# Or run individually:
-npm run test           # Unit tests
-npm run test:critical  # Critical path E2E tests
-npm run test:hydration # Hydration tests
-npm run test:email     # Email API tests
-```
-
-### 2. Testing ✅
-```bash
-# Automated testing (RECOMMENDED)
-npm run test:all       # Runs all automated tests
-
-# Manual testing (if needed)
-npm run dev
-# Test these critical paths:
-# - Home page loads
-# - Projects page works
-# - Admin dashboard accessible
-# - API endpoints respond
-# - No console errors
-# - No hydration errors
-```
-
-### 3. Database Changes ✅
-```bash
-# If you changed the database schema:
-# 1. Create migration
-npx prisma migrate dev --name your_migration_name
-
-# 2. Test migration on a copy of production data
-# 3. Document migration steps
-# 4. Create rollback plan
-```
-
-### 4. Environment Variables ✅
-- [ ] All new env vars documented in `env.example`
-- [ ] No secrets committed to git
-- [ ] Production env vars are set on server
-- [ ] Optional features have fallbacks
-
-### 5. Breaking Changes ✅
-- [ ] Documented in CHANGELOG
-- [ ] Backward compatible OR migration plan exists
-- [ ] Team notified of changes
-
----
-
-## 📋 Step-by-Step Push Process
-
-### Step 1: Ensure You're on Dev Branch
-```bash
-git checkout dev
-git pull origin dev  # Get latest changes
-```
-
-### Step 2: Final Verification
-```bash
-# Clean build
-rm -rf .next node_modules/.cache
-npm install
-npm run build
-
-# Should complete without errors
-```
-
-### Step 3: Review Your Changes
-```bash
-# See what you're about to push
-git log origin/main..dev --oneline
-git diff origin/main..dev
-
-# Review carefully:
-# - No accidental secrets
-# - No debug code
-# - No temporary files
-# - All changes are intentional
-```
-
-### Step 4: Create a Backup Branch (Safety Net)
-```bash
-# Create backup before merging
-git checkout -b backup-before-main-merge-$(date +%Y%m%d)
-git push origin backup-before-main-merge-$(date +%Y%m%d)
-git checkout dev
-```
-
-### Step 5: Merge Dev into Main (Local)
-```bash
-# Switch to main
-git checkout main
-git pull origin main  # Get latest main
-
-# Merge dev into main
-git merge dev --no-ff -m "Merge dev into main: [describe changes]"
-
-# If conflicts occur:
-# 1. Resolve conflicts carefully
-# 2. Test after resolving
-# 3. Don't force push if unsure
-```
-
-### Step 6: Test the Merged Code
-```bash
-# Build and test the merged code
-npm run build
-npm run dev
-
-# Test critical paths again
-# - Home page
-# - Projects
-# - Admin
-# - APIs
-```
-
-### Step 7: Push to Main (If Everything Looks Good)
-```bash
-# Push to remote main
-git push origin main
-
-# If you need to force push (DANGEROUS - only if necessary):
-# git push origin main --force-with-lease
-```
-
-### Step 8: Monitor Deployment
-```bash
-# Watch your deployment logs
-# Check for errors
-# Verify health endpoints
-# Test production site
-```
-
----
-
-## 🛡️ Safety Strategies
-
-### Strategy 1: Feature Flags
-If you're adding new features, use feature flags:
-```typescript
-// In your code
-if (process.env.ENABLE_NEW_FEATURE === 'true') {
-  // New feature code
-}
-```
-
-### Strategy 2: Gradual Rollout
-- Deploy to staging first
-- Test thoroughly
-- Then deploy to production
-- Monitor closely
-
-### Strategy 3: Database Migrations
-```bash
-# Always test migrations first
-# 1. Backup production database
-# 2. Test migration on copy
-# 3. Create rollback script
-# 4. Run migration during low-traffic period
-```
-
-### Strategy 4: Rollback Plan
-Always have a rollback plan:
-```bash
-# If something breaks:
-git revert HEAD
-git push origin main
-
-# Or rollback to previous commit:
-git reset --hard <previous-commit-hash>
-git push origin main --force-with-lease
-```
-
----
-
-## 🚨 Red Flags - DON'T PUSH IF:
-
-- ❌ Build fails
-- ❌ Tests fail
-- ❌ Linter errors
-- ❌ TypeScript errors
-- ❌ Database migration not tested
-- ❌ Breaking changes not documented
-- ❌ Secrets in code
-- ❌ Debug code left in
-- ❌ Console.logs everywhere
-- ❌ Untested features
-- ❌ No rollback plan
-
----
-
-## ✅ Green Lights - SAFE TO PUSH IF:
-
-- ✅ All checks pass
-- ✅ Tested locally
-- ✅ Database migrations tested
-- ✅ No breaking changes (or documented)
-- ✅ Documentation updated
-- ✅ Team notified
-- ✅ Rollback plan exists
-- ✅ Feature flags for new features
-- ✅ Environment variables documented
-
----
-
-## 📝 Pre-Push Checklist Template
-
-Copy this and check each item:
-
-```
-[ ] npm run build passes
-[ ] npm run lint passes
-[ ] npx tsc --noEmit passes
-[ ] npx prisma format passes
-[ ] npm run test:all passes (automated tests)
-[ ] OR manual testing:
-  [ ] Dev server starts without errors
-  [ ] Home page loads correctly
-  [ ] Projects page works
-  [ ] Admin dashboard accessible
-  [ ] API endpoints respond
-  [ ] No console errors
-  [ ] No hydration errors
-[ ] Database migrations tested (if any)
-[ ] Environment variables documented
-[ ] No secrets in code
-[ ] Breaking changes documented
-[ ] CHANGELOG updated
-[ ] Team notified (if needed)
-[ ] Rollback plan exists
-[ ] Backup branch created
-[ ] Changes reviewed
-```
-
----
-
-## 🔄 Alternative: Pull Request Workflow
-
-If you want extra safety, use PR workflow:
-
-```bash
-# 1. Push dev branch
-git push origin dev
-
-# 2. Create Pull Request on Git platform
-# - Review changes
-# - Get approval
-# - Run CI/CD checks
-
-# 3. Merge PR to main (platform handles it)
-```
-
----
-
-## 🆘 Emergency Rollback
-
-If production breaks after push:
-
-### Quick Rollback
-```bash
-# 1. Revert the merge commit
-git revert -m 1 <merge-commit-hash>
-git push origin main
-
-# 2. Or reset to previous state
-git reset --hard <previous-commit>
-git push origin main --force-with-lease
-```
-
-### Database Rollback
-```bash
-# If you ran migrations, roll them back:
-npx prisma migrate resolve --rolled-back <migration-name>
-
-# Or restore from backup
-```
-
----
-
-## 📞 Need Help?
-
-If unsure:
-1. **Don't push** - better safe than sorry
-2. Test more thoroughly
-3. Ask for code review
-4. Use staging environment first
-5. Create a PR for review
-
----
-
-## 🎯 Best Practices
-
-1. **Always test locally first**
-2. **Use feature flags for new features**
-3. **Test database migrations on copies**
-4. **Document everything**
-5. **Have a rollback plan**
-6. **Monitor after deployment**
-7. **Deploy during low-traffic periods**
-8. **Keep main branch stable**
-
----
-
-**Remember**: It's better to delay a push than to break production! 🛡️

SESSION_SUMMARY.md

@@ -0,0 +1,42 @@
+# Session Summary - February 16, 2026
+
+## 🛡️ Security & Technical Fixes
+- **CSP Improvements:** Added `images.unsplash.com`, `*.dk0.dev`, and `localhost` to `img-src` and `connect-src`.
+- **Worker Support:** Enabled `worker-src 'self' blob:;` for dynamic features.
+- **Source Map Suppression:** Configured Webpack to ignore 404 errors for `framer-motion` and `LayoutGroupContext` source maps in development.
+- **Project Filtering:** Unified the projects API to use Directus as the "Single Source of Truth," strictly enforcing the `published` status.
+
+## 🎨 UI/UX Enhancements (Liquid Editorial Bento)
+- **Hero Section:**
+  - Stabilized the hero photo (removed floating animation).
+  - Fixed edge-clipping by increasing the border/padding.
+  - Removed redundant social buttons for a cleaner entry.
+- **Activity Feed:**
+  - Full localization (DE/EN).
+  - Added a rotating cycle of CS-related quotes (Dijkstra, etc.) including CMS quotes.
+  - Redesigned Music UI with Spotify-themed branding (`#1DB954`), improved contrast, and animated frequency bars.
+- **Contact Area:**
+  - Redesigned into a unified "Connect" Bento box.
+  - High-typography list style for Email, GitHub, LinkedIn, and Location.
+- **Hobbies:**
+  - Added personalized descriptions reflecting interests like Analog Photography, Astronomy, and Traveling.
+  - Switched to a 4-column layout for better spatial balance.
+
+## 🚀 New Features
+- **Snippets System ("The Lab"):**
+  - New Directus collection and API endpoint for technical notes.
+  - Interactive Bento-modals with code syntax highlighting and copy-to-clipboard functionality.
+  - Dedicated `/snippets` overview page.
+  - Implemented "Featured" logic to control visibility on the home page.
+- **Redesigned 404 Page:**
+  - Completely rebuilt in the Editorial Bento style with clear navigation paths.
+- **Visual Finish:**
+  - Added a subtle, animated CSS-based Grain/Noise overlay.
+  - Implemented smooth Page Transitions using Framer Motion.
+
+## 💻 Hardware Setup ("My Gear")
+- Added a dedicated Bento card showing current dev setup:
+  - MacBook Pro M4 Pro (24GB RAM).
+  - PC: Ryzen 7 3800XT / RTX 3080.
+  - Server: IONOS Cloud & Raspberry Pi 4.
+  - Dual MSI 164Hz Curved Monitors.

STAGING_SETUP.md

@@ -5,11 +5,11 @@
 You now have **two separate Docker stacks**:
 
 1. **Staging** - Deploys automatically on `dev` or `main` branch
-   - Port: `3001`
+   - Port: `3002`
    - Container: `portfolio-app-staging`
    - Database: `portfolio_staging_db` (port 5433)
    - Redis: `portfolio-redis-staging` (port 6380)
-   - URL: `https://staging.dk0.dev` (or `http://localhost:3001`)
+   - URL: `https://staging.dk0.dev` (or `http://localhost:3002`)
 
 2. **Production** - Deploys automatically on `production` branch
    - Port: `3000`
@@ -25,7 +25,7 @@ When you push to `dev` or `main` branch:
 1. ✅ Tests run
 2. ✅ Docker image is built and tagged as `staging`
 3. ✅ Staging stack deploys automatically
-4. ✅ Available on port 3001
+4. ✅ Available on port 3002
 
 ### Automatic Production Deployment
 When you merge to `production` branch:
@@ -55,9 +55,9 @@ When you merge to `production` branch:
 
 | Service | Staging | Production |
 |---------|---------|------------|
-| App | 3001 | 3000 |
+| App | 3002 | 3000 |
-| PostgreSQL | 5433 | 5432 |
+| PostgreSQL | 5434 | 5432 |
-| Redis | 6380 | 6379 |
+| Redis | 6381 | 6379 |
 
 ## Workflow
 
@@ -69,10 +69,10 @@ git checkout dev
 
 # 2. Push to dev (triggers staging deployment)
 git push origin dev
-# → Staging deploys automatically on port 3001
+# → Staging deploys automatically on port 3002
 
 # 3. Test staging
-curl http://localhost:3001/api/health
+curl http://localhost:3002/api/health
 
 # 4. Merge to main (also triggers staging)
 git checkout main
@@ -101,7 +101,7 @@ docker compose -f docker-compose.staging.yml down
 docker compose -f docker-compose.staging.yml logs -f
 
 # Check staging health
-curl http://localhost:3001/api/health
+curl http://localhost:3002/api/health
 ```
 
 ### Production
@@ -142,7 +142,7 @@ curl http://localhost:3000/api/health
 ### Check Both Environments
 ```bash
 # Staging
-curl http://localhost:3001/api/health
+curl http://localhost:3002/api/health
 
 # Production
 curl http://localhost:3000/api/health
@@ -174,11 +174,11 @@ docker ps | grep -v staging
 4. Manual rollback: Restart old container if needed
 
 ### Port Conflicts
-- Staging uses 3001, 5433, 6380
+- Staging uses 3002, 5434, 6381
 - Production uses 3000, 5432, 6379
 - If conflicts occur, check what's using the ports:
   ```bash
-  lsof -i :3001
+  lsof -i :3002
   lsof -i :3000
   ```
 

TESTING_GUIDE.md

@@ -1,284 +0,0 @@
-# 🧪 Automated Testing Guide
-
-This guide explains how to run automated tests for critical paths, hydration, emails, and more.
-
-## 📋 Test Types
-
-### 1. Unit Tests (Jest)
-Tests individual components and functions in isolation.
-
-```bash
-npm run test              # Run all unit tests
-npm run test:watch        # Watch mode
-npm run test:coverage    # With coverage report
-```
-
-### 2. E2E Tests (Playwright)
-Tests complete user flows in a real browser.
-
-```bash
-npm run test:e2e          # Run all E2E tests
-npm run test:e2e:ui       # Run with UI mode (visual)
-npm run test:e2e:headed   # Run with visible browser
-npm run test:e2e:debug    # Debug mode
-```
-
-### 3. Critical Path Tests
-Tests the most important user flows.
-
-```bash
-npm run test:critical     # Run critical path tests only
-```
-
-### 4. Hydration Tests
-Ensures React hydration works without errors.
-
-```bash
-npm run test:hydration    # Run hydration tests only
-```
-
-### 5. Email Tests
-Tests email API endpoints.
-
-```bash
-npm run test:email        # Run email tests only
-```
-
-### 6. Performance Tests
-Checks page load times and performance.
-
-```bash
-npm run test:performance  # Run performance tests
-```
-
-### 7. Accessibility Tests
-Basic accessibility checks.
-
-```bash
-npm run test:accessibility # Run accessibility tests
-```
-
-## 🚀 Running All Tests
-
-### Quick Test (Recommended)
-```bash
-npm run test:all
-```
-
-This runs:
-- ✅ TypeScript check
-- ✅ ESLint
-- ✅ Build
-- ✅ Unit tests
-- ✅ Critical paths
-- ✅ Hydration tests
-- ✅ Email tests
-- ✅ Performance tests
-- ✅ Accessibility tests
-
-### Individual Test Suites
-```bash
-# Unit tests only
-npm run test
-
-# E2E tests only
-npm run test:e2e
-
-# Both
-npm run test && npm run test:e2e
-```
-
-## 📝 What Gets Tested
-
-### Critical Paths
-- ✅ Home page loads correctly
-- ✅ Projects page displays projects
-- ✅ Individual project pages work
-- ✅ Admin dashboard is accessible
-- ✅ API health endpoint
-- ✅ API projects endpoint
-
-### Hydration
-- ✅ No hydration errors in console
-- ✅ No duplicate React key warnings
-- ✅ Client-side navigation works
-- ✅ Server and client HTML match
-- ✅ Interactive elements work after hydration
-
-### Email
-- ✅ Email API accepts requests
-- ✅ Required field validation
-- ✅ Email format validation
-- ✅ Rate limiting (if implemented)
-- ✅ Email respond endpoint
-
-### Performance
-- ✅ Page load times (< 5s)
-- ✅ No large layout shifts
-- ✅ Images are optimized
-- ✅ API response times (< 1s)
-
-### Accessibility
-- ✅ Proper heading structure
-- ✅ Images have alt text
-- ✅ Links have descriptive text
-- ✅ Forms have labels
-
-## 🎯 Pre-Push Testing
-
-Before pushing to main, run:
-
-```bash
-# Full test suite
-npm run test:all
-
-# Or manually:
-npm run build
-npm run lint
-npx tsc --noEmit
-npm run test
-npm run test:critical
-npm run test:hydration
-```
-
-## 🔧 Configuration
-
-### Playwright Config
-Located in `playwright.config.ts`
-
-- **Base URL**: `http://localhost:3000` (or set `PLAYWRIGHT_TEST_BASE_URL`)
-- **Browsers**: Chromium, Firefox, WebKit, Mobile Chrome, Mobile Safari
-- **Retries**: 2 retries in CI, 0 locally
-- **Screenshots**: On failure
-- **Videos**: On failure
-
-### Jest Config
-Located in `jest.config.ts`
-
-- **Environment**: jsdom
-- **Coverage**: v8 provider
-- **Setup**: `jest.setup.ts`
-
-## 🐛 Debugging Tests
-
-### Playwright Debug Mode
-```bash
-npm run test:e2e:debug
-```
-
-This opens Playwright Inspector where you can:
-- Step through tests
-- Inspect elements
-- View console logs
-- See network requests
-
-### UI Mode (Visual)
-```bash
-npm run test:e2e:ui
-```
-
-Shows a visual interface to:
-- See all tests
-- Run specific tests
-- Watch tests execute
-- View results
-
-### Headed Mode
-```bash
-npm run test:e2e:headed
-```
-
-Runs tests with visible browser (useful for debugging).
-
-## 📊 Test Reports
-
-### Playwright HTML Report
-After running E2E tests:
-```bash
-npx playwright show-report
-```
-
-Shows:
-- Test results
-- Screenshots on failure
-- Videos on failure
-- Timeline of test execution
-
-### Jest Coverage Report
-```bash
-npm run test:coverage
-```
-
-Generates coverage report in `coverage/` directory.
-
-## 🚨 Common Issues
-
-### Tests Fail Locally But Pass in CI
-- Check environment variables
-- Ensure database is set up
-- Check for port conflicts
-
-### Hydration Errors
-- Check for server/client mismatches
-- Ensure no conditional rendering based on `window`
-- Check for date/time differences
-
-### Email Tests Fail
-- Email service might not be configured
-- Check environment variables
-- Tests are designed to handle missing email service
-
-### Performance Tests Fail
-- Network might be slow
-- Adjust thresholds in test file
-- Check for heavy resources loading
-
-## 📝 Writing New Tests
-
-### E2E Test Example
-```typescript
-import { test, expect } from '@playwright/test';
-
-test('My new feature works', async ({ page }) => {
-  await page.goto('/my-page');
-  await expect(page.locator('h1')).toContainText('Expected Text');
-});
-```
-
-### Unit Test Example
-```typescript
-import { render, screen } from '@testing-library/react';
-import MyComponent from './MyComponent';
-
-test('renders correctly', () => {
-  render(<MyComponent />);
-  expect(screen.getByText('Hello')).toBeInTheDocument();
-});
-```
-
-## 🎯 CI/CD Integration
-
-### GitHub Actions Example
-```yaml
-- name: Run tests
-  run: |
-    npm install
-    npm run test:all
-```
-
-### Pre-Push Hook
-Add to `.git/hooks/pre-push`:
-```bash
-#!/bin/bash
-npm run test:all
-```
-
-## 📚 Resources
-
-- [Playwright Docs](https://playwright.dev)
-- [Jest Docs](https://jestjs.io)
-- [Testing Library](https://testing-library.com)
-
----
-
-**Remember**: Tests should be fast, reliable, and easy to understand! 🚀

TODO.md

@@ -0,0 +1,28 @@
+# Portfolio Roadmap
+
+## Completed ✅
+
+- [x] **Dark Mode Support**: `next-themes` integration, `ThemeToggle` component, and dark mode styles.
+- [x] **Performance**: Replaced `<img>` with Next.js `<Image>` for optimization.
+- [x] **SEO**: Added JSON-LD Structured Data for projects.
+- [x] **Security**: Rate limiting added to `book-reviews`, `hobbies`, and `tech-stack` APIs.
+- [x] **Book Reviews**:
+  - `ReadBooks` component updated to handle optional ratings/reviews.
+  - `CurrentlyReading` component verified.
+  - Automation guide created (`docs/N8N_HARDCOVER_GUIDE.md`).
+- [x] **Testing**: Added tests for `book-reviews`, `hobbies`, `tech-stack`, `CurrentlyReading`, and `ThemeToggle`.
+
+## Next Steps
+
+### Directus CMS
+- [ ] **Messages Collection**: Create `messages` collection in Directus for dynamic i18n (currently using `messages/*.json`).
+- [ ] **Projects Migration**: Finish migrating projects content to Directus (script exists: `scripts/migrate-projects-to-directus.js`).
+- [ ] **Webhooks**: Configure Directus webhooks for On-Demand ISR Revalidation.
+
+### Features
+- [ ] **Blog/Articles**: Design and implement the blog section.
+- [ ] **Project Detail Gallery**: Add a lightbox/gallery for project screenshots.
+
+### DevOps
+- [ ] **GitHub Actions**: Migrate CI/CD fully to GitHub Actions (from Gitea).
+- [ ] **Docker Optimization**: Further reduce image size.

app/[locale]/books/page.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { Star, ArrowLeft } from "lucide-react";
+import Link from "next/link";
+import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useLocale } from "next-intl";
+import { Skeleton } from "@/app/components/ui/Skeleton";
+import { BookReview } from "@/lib/directus";
+
+export default function BooksPage() {
+  const locale = useLocale();
+  const [reviews, setReviews] = useState<BookReview[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchBooks = async () => {
+      try {
+        const res = await fetch(`/api/book-reviews?locale=${locale}`);
+        const data = await res.json();
+        if (data.bookReviews) setReviews(data.bookReviews);
+      } catch (error) {
+        console.error("Books fetch failed:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchBooks();
+  }, [locale]);
+
+  return (
+    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 pt-32 pb-20 px-6 transition-colors duration-500">
+      <div className="max-w-7xl mx-auto">
+        <div className="mb-20">
+          <Link
+            href={`/${locale}`}
+            className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-10 group"
+          >
+            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
+            <span className="font-bold uppercase tracking-widest text-xs">{locale === 'de' ? 'Zurück' : 'Back Home'}</span>
+          </Link>
+          <h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
+            Library<span className="text-liquid-purple">.</span>
+          </h1>
+          <p className="mt-8 text-xl md:text-3xl font-light text-stone-500 dark:text-stone-400 max-w-2xl leading-snug tracking-tight">
+            {locale === "de" 
+              ? "Bücher, die meine Denkweise verändert und mein Wissen erweitert haben."
+              : "Books that shaped my mindset and expanded my horizons."}
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {loading ? (
+            Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="bg-white dark:bg-stone-900 rounded-[2.5rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col h-full">
+                <Skeleton className="aspect-[3/4] rounded-2xl mb-8" />
+                <div className="space-y-3">
+                  <Skeleton className="h-8 w-3/4" />
+                  <Skeleton className="h-4 w-1/2" />
+                </div>
+              </div>
+            ))
+          ) : (
+            reviews?.map((review) => (
+              <div 
+                key={review.id}
+                className="bg-white dark:bg-stone-900 rounded-[2.5rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col h-full hover:shadow-xl transition-all"
+              >
+                {review.book_image && (
+                  <div className="relative aspect-[3/4] rounded-2xl overflow-hidden mb-8 shadow-xl border-4 border-stone-50 dark:border-stone-800">
+                    <Image src={review.book_image} alt={review.book_title} fill className="object-cover" />
+                  </div>
+                )}
+                <div className="flex-1 flex flex-col">
+                  <div className="flex justify-between items-start gap-4 mb-4">
+                    <h3 className="text-2xl font-black text-stone-900 dark:text-white leading-tight">{review.book_title}</h3>
+                    {review.rating && (
+                      <div className="flex items-center gap-1 bg-stone-50 dark:bg-stone-800 px-3 py-1 rounded-full border border-stone-100 dark:border-stone-700">
+                        <Star size={12} className="fill-amber-400 text-amber-400" />
+                        <span className="text-xs font-black">{review.rating}</span>
+                      </div>
+                    )}
+                  </div>
+                  <p className="text-stone-500 dark:text-stone-400 font-bold text-sm mb-6">{review.book_author}</p>
+                  {review.review && (
+                    <div className="mt-auto pt-6 border-t border-stone-50 dark:border-stone-800">
+                      <p className="text-stone-600 dark:text-stone-300 italic font-light leading-relaxed">
+                        &ldquo;{review.review.replace(/<[^>]*>/g, '')}&rdquo;
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/[locale]/layout.tsx

@@ -0,0 +1,56 @@
+import { NextIntlClientProvider } from "next-intl";
+import { setRequestLocale } from "next-intl/server";
+import React from "react";
+import { notFound } from "next/navigation";
+import ConsentBanner from "../components/ConsentBanner";
+
+// Supported locales - must match middleware.ts
+const SUPPORTED_LOCALES = ["en", "de"] as const;
+type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];
+
+function isValidLocale(locale: string): locale is SupportedLocale {
+  return SUPPORTED_LOCALES.includes(locale as SupportedLocale);
+}
+
+async function loadEnhancedMessages(locale: SupportedLocale) {
+  // Lade basis JSON Messages
+  const baseMessages = (await import(`../../messages/${locale}.json`)).default;
+  
+  // Erweitere mit Directus (wenn verfügbar)
+  // Für jetzt: return base messages, Directus wird per Server Component geladen
+  return baseMessages;
+}
+
+// Define valid static params to prevent malicious path traversal
+export function generateStaticParams() {
+  return SUPPORTED_LOCALES.map((locale) => ({ locale }));
+}
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  
+  // Security: Validate locale to prevent malicious imports
+  if (!isValidLocale(locale)) {
+    notFound();
+  }
+  
+  // Ensure next-intl actually uses the route segment locale for this request.
+  setRequestLocale(locale);
+  // Load messages explicitly by route locale to avoid falling back to the wrong
+  // language when request-level locale detection is unavailable/misconfigured.
+  const messages = await loadEnhancedMessages(locale);
+
+  return (
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      {children}
+      <ConsentBanner />
+    </NextIntlClientProvider>
+  );
+}
+

app/[locale]/legal-notice/page.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
+export { default } from "../../legal-notice/page";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const languages = getLanguageAlternates({ pathWithoutLocale: "legal-notice" });
+  return {
+    alternates: {
+      canonical: toAbsoluteUrl(`/${locale}/legal-notice`),
+      languages,
+    },
+  };
+}
+

app/[locale]/page.tsx

@@ -0,0 +1,28 @@
+import type { Metadata } from "next";
+import HomePageServer from "../_ui/HomePageServer";
+import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const languages = getLanguageAlternates({ pathWithoutLocale: "" });
+  return {
+    alternates: {
+      canonical: toAbsoluteUrl(`/${locale}`),
+      languages,
+    },
+  };
+}
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  return <HomePageServer locale={locale} />;
+}
+

app/[locale]/privacy-policy/page.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from "next";
+import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
+export { default } from "../../privacy-policy/page";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const languages = getLanguageAlternates({ pathWithoutLocale: "privacy-policy" });
+  return {
+    alternates: {
+      canonical: toAbsoluteUrl(`/${locale}/privacy-policy`),
+      languages,
+    },
+  };
+}
+

app/[locale]/projects/[slug]/page.tsx

@@ -0,0 +1,119 @@
+import { prisma } from "@/lib/prisma";
+import ProjectDetailClient from "@/app/_ui/ProjectDetailClient";
+import { notFound } from "next/navigation";
+import type { Metadata } from "next";
+import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
+import { getProjectBySlug } from "@/lib/directus";
+import { ProjectDetailData } from "@/app/_ui/ProjectDetailClient";
+
+export const revalidate = 300;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}): Promise<Metadata> {
+  const { locale, slug } = await params;
+  
+  // Try Directus first for metadata
+  const directusProject = await getProjectBySlug(slug, locale);
+  if (directusProject) {
+    return {
+      title: directusProject.title,
+      description: directusProject.description,
+      alternates: {
+        canonical: toAbsoluteUrl(`/${locale}/projects/${slug}`),
+        languages: getLanguageAlternates({ pathWithoutLocale: `projects/${slug}` }),
+      },
+    };
+  }
+
+  const languages = getLanguageAlternates({ pathWithoutLocale: `projects/${slug}` });
+  return {
+    alternates: {
+      canonical: toAbsoluteUrl(`/${locale}/projects/${slug}`),
+      languages,
+    },
+  };
+}
+
+export default async function ProjectPage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
+
+  // Try PostgreSQL first
+  const dbProject = await prisma.project.findFirst({
+    where: { slug, published: true },
+    include: {
+      translations: {
+        select: { title: true, description: true, content: true, locale: true },
+      },
+    },
+  });
+
+  let projectData: ProjectDetailData | null = null;
+
+  if (dbProject) {
+    const trPreferred = dbProject.translations?.find((t) => t.locale === locale && (t?.title || t?.description));
+    const trDefault = dbProject.translations?.find(
+      (t) => t.locale === dbProject.defaultLocale && (t?.title || t?.description),
+    );
+    const tr = trPreferred ?? trDefault;
+    const { translations: _translations, ...rest } = dbProject;
+    const localizedContent = (() => {
+      if (typeof tr?.content === "string") return tr.content;
+      if (tr?.content && typeof tr.content === "object" && "markdown" in tr.content) {
+        const markdown = (tr.content as Record<string, unknown>).markdown;
+        if (typeof markdown === "string") return markdown;
+      }
+      return dbProject.content;
+    })();
+    projectData = {
+      ...rest,
+      title: tr?.title ?? dbProject.title,
+      description: tr?.description ?? dbProject.description,
+      content: localizedContent,
+    } as ProjectDetailData;
+  } else {
+    // Try Directus fallback
+    const directusProject = await getProjectBySlug(slug, locale);
+    if (directusProject) {
+      projectData = {
+        ...directusProject,
+        id: typeof directusProject.id === 'string' ? (parseInt(directusProject.id) || 0) : directusProject.id,
+      } as ProjectDetailData;
+    }
+  }
+
+  if (!projectData) return notFound();
+
+  const jsonLd = {
+    "@context": "https://schema.org",
+    "@type": "SoftwareSourceCode",
+    "name": projectData.title,
+    "description": projectData.description,
+    "codeRepository": projectData.github_url || projectData.github,
+    "programmingLanguage": projectData.technologies,
+    "author": {
+      "@type": "Person",
+      "name": "Dennis Konkol"
+    },
+    "dateCreated": projectData.date || projectData.created_at,
+    "url": toAbsoluteUrl(`/${locale}/projects/${slug}`),
+    "image": (projectData.imageUrl || projectData.image_url) ? toAbsoluteUrl((projectData.imageUrl || projectData.image_url)!) : undefined,
+  };
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <ProjectDetailClient project={projectData} locale={locale} />
+    </>
+  );
+}
+

app/[locale]/projects/page.tsx

@@ -0,0 +1,94 @@
+import { prisma } from "@/lib/prisma";
+import ProjectsPageClient, { ProjectListItem } from "@/app/_ui/ProjectsPageClient";
+import type { Metadata } from "next";
+import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
+import { getProjects as getDirectusProjects } from "@/lib/directus";
+
+export const revalidate = 300;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}): Promise<Metadata> {
+  const { locale } = await params;
+  const languages = getLanguageAlternates({ pathWithoutLocale: "projects" });
+  return {
+    alternates: {
+      canonical: toAbsoluteUrl(`/${locale}/projects`),
+      languages,
+    },
+  };
+}
+
+export default async function ProjectsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  // Fetch from PostgreSQL
+  const dbProjects = await prisma.project.findMany({
+    where: { published: true },
+    orderBy: { createdAt: "desc" },
+    include: {
+      translations: {
+        select: { title: true, description: true, locale: true },
+      },
+    },
+  });
+
+  // Fetch from Directus
+  let directusProjects: ProjectListItem[] = [];
+  try {
+    const fetched = await getDirectusProjects(locale, { published: true });
+    if (fetched) {
+      directusProjects = fetched.map(p => ({
+        ...p,
+        id: typeof p.id === 'string' ? (parseInt(p.id) || 0) : p.id,
+      })) as ProjectListItem[];
+    }
+  } catch (err) {
+    console.error("Directus projects fetch failed:", err);
+  }
+
+  const localizedDb: ProjectListItem[] = dbProjects.map((p) => {
+    const trPreferred = p.translations?.find((t) => t.locale === locale && (t?.title || t?.description));
+    const trDefault = p.translations?.find(
+      (t) => t.locale === p.defaultLocale && (t?.title || t?.description),
+    );
+    const tr = trPreferred ?? trDefault;
+    return {
+      id: p.id,
+      slug: p.slug,
+      title: tr?.title ?? p.title,
+      description: tr?.description ?? p.description,
+      tags: p.tags,
+      category: p.category,
+      date: p.date,
+      createdAt: p.createdAt.toISOString(),
+      imageUrl: p.imageUrl,
+    };
+  });
+
+  // Merge projects, prioritizing DB ones if slugs match
+  const allProjects: ProjectListItem[] = [...localizedDb];
+  const dbSlugs = new Set(localizedDb.map(p => p.slug));
+  
+  for (const dp of directusProjects) {
+    if (!dbSlugs.has(dp.slug)) {
+      allProjects.push(dp);
+    }
+  }
+
+  // Final sort by date
+  allProjects.sort((a, b) => {
+    const dateA = new Date(a.date || a.createdAt || 0).getTime();
+    const dateB = new Date(b.date || b.createdAt || 0).getTime();
+    return dateB - dateA;
+  });
+
+  return <ProjectsPageClient projects={allProjects} locale={locale} />;
+}
+

app/[locale]/snippets/SnippetsClient.tsx

@@ -0,0 +1,109 @@
+
+"use client";
+
+import React, { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Snippet } from "@/lib/directus";
+import { X, Copy, Check, Hash } from "lucide-react";
+
+export default function SnippetsClient({ initialSnippets }: { initialSnippets: Snippet[] }) {
+  const [selectedSnippet, setSelectedSnippet] = useState<Snippet | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const copyToClipboard = (code: string) => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+        {initialSnippets.map((s, i) => (
+          <motion.button
+            key={s.id}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: i * 0.05 }}
+            onClick={() => setSelectedSnippet(s)}
+            className="text-left bg-white dark:bg-stone-900 rounded-[2.5rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm hover:shadow-xl hover:border-liquid-purple/40 transition-all group"
+          >
+            <div className="flex items-center gap-2 mb-6">
+              <div className="w-8 h-8 rounded-xl bg-stone-50 dark:bg-stone-800 flex items-center justify-center text-stone-400 group-hover:text-liquid-purple transition-colors">
+                <Hash size={16} />
+              </div>
+              <span className="text-[10px] font-black uppercase tracking-widest text-stone-400">{s.category}</span>
+            </div>
+            <h3 className="text-2xl font-black text-stone-900 dark:text-white uppercase tracking-tighter mb-4 group-hover:text-liquid-purple transition-colors">{s.title}</h3>
+            <p className="text-stone-500 dark:text-stone-400 text-sm line-clamp-2 leading-relaxed">
+              {s.description}
+            </p>
+          </motion.button>
+        ))}
+      </div>
+
+      {/* Snippet Modal */}
+      <AnimatePresence>
+        {selectedSnippet && (
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8">
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setSelectedSnippet(null)}
+              className="absolute inset-0 bg-stone-950/60 backdrop-blur-md"
+            />
+            <motion.div 
+              initial={{ opacity: 0, scale: 0.9, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.9, y: 20 }}
+              className="relative w-full max-w-3xl bg-white dark:bg-stone-900 rounded-[2.5rem] shadow-2xl border border-stone-200 dark:border-stone-800 overflow-hidden flex flex-col max-h-[90vh]"
+            >
+              <div className="p-8 md:p-10 overflow-y-auto">
+                <div className="flex justify-between items-start mb-8">
+                  <div>
+                    <p className="text-[10px] font-black uppercase tracking-[0.2em] text-liquid-purple mb-2">{selectedSnippet.category}</p>
+                    <h3 className="text-3xl font-black text-stone-900 dark:text-white uppercase tracking-tighter">{selectedSnippet.title}</h3>
+                  </div>
+                  <button 
+                    onClick={() => setSelectedSnippet(null)}
+                    className="p-3 bg-stone-50 dark:bg-stone-800 rounded-full hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors"
+                  >
+                    <X size={20} />
+                  </button>
+                </div>
+
+                <p className="text-stone-600 dark:text-stone-400 mb-8 leading-relaxed">
+                  {selectedSnippet.description}
+                </p>
+
+                <div className="relative group/code">
+                  <div className="absolute top-4 right-4 flex gap-2">
+                    <button 
+                      onClick={() => copyToClipboard(selectedSnippet.code)}
+                      className="p-2.5 bg-white/10 backdrop-blur-md hover:bg-white/20 rounded-lg border border-white/10 transition-all text-white"
+                      title="Copy Code"
+                    >
+                      {copied ? <Check size={16} className="text-emerald-400" /> : <Copy size={16} />}
+                    </button>
+                  </div>
+                  <pre className="bg-stone-950 p-6 rounded-2xl overflow-x-auto text-sm font-mono text-stone-300 border border-stone-800 leading-relaxed">
+                    <code>{selectedSnippet.code}</code>
+                  </pre>
+                </div>
+              </div>
+              <div className="p-6 bg-stone-50 dark:bg-stone-800/50 border-t border-stone-100 dark:border-stone-800 text-center">
+                <button 
+                  onClick={() => setSelectedSnippet(null)}
+                  className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
+                >
+                  Close Laboratory
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
+    </>
+  );
+}

app/[locale]/snippets/page.tsx

@@ -0,0 +1,41 @@
+
+import React from "react";
+import { getSnippets } from "@/lib/directus";
+import { Terminal, ArrowLeft } from "lucide-react";
+import Link from "next/link";
+import SnippetsClient from "./SnippetsClient";
+
+export default async function SnippetsPage({ params }: { params: Promise<{ locale: string }> }) {
+  const { locale } = await params;
+  const snippets = await getSnippets(100) || [];
+
+  return (
+    <main className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 py-24 px-6 transition-colors duration-500">
+      <div className="max-w-7xl mx-auto">
+        <Link 
+          href={`/${locale}`}
+          className="inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-[0.3em] text-stone-400 hover:text-stone-900 dark:hover:text-white transition-all mb-12 group"
+        >
+          <ArrowLeft size={14} className="group-hover:-translate-x-1 transition-transform" />
+          Back to Portfolio
+        </Link>
+
+        <header className="mb-20">
+          <div className="flex items-center gap-4 mb-6">
+            <div className="w-12 h-12 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900">
+              <Terminal size={24} />
+            </div>
+            <h1 className="text-5xl md:text-8xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50">
+              The Lab<span className="text-liquid-purple">.</span>
+            </h1>
+          </div>
+          <p className="text-xl md:text-2xl font-light text-stone-500 max-w-2xl leading-relaxed">
+            A collection of technical snippets, configurations, and mental notes from my daily building process.
+          </p>
+        </header>
+
+        <SnippetsClient initialSnippets={snippets} />
+      </div>
+    </main>
+  );
+}

app/__tests__/api/book-reviews.test.tsx

@@ -0,0 +1,20 @@
+import { NextResponse, NextRequest } from "next/server";
+import { GET } from "@/app/api/book-reviews/route";
+
+// Mock the route handler module
+jest.mock("@/app/api/book-reviews/route", () => ({
+  GET: jest.fn(),
+}));
+
+describe("GET /api/book-reviews", () => {
+  it("should return book reviews", async () => {
+    (GET as jest.Mock).mockResolvedValue(
+      NextResponse.json({ bookReviews: [{ id: 1, book_title: "Test" }] })
+    );
+
+    const response = await GET({} as NextRequest);
+    const data = await response.json();
+    expect(response.status).toBe(200);
+    expect(data.bookReviews).toHaveLength(1);
+  });
+});

app/__tests__/api/fetchAllProjects.test.tsx

@@ -1,43 +1,27 @@
-import { GET } from '@/app/api/fetchAllProjects/route';
 import { NextResponse } from 'next/server';
 
-// Wir mocken node-fetch direkt
+jest.mock('@/lib/prisma', () => ({
-jest.mock('node-fetch', () => ({
+  prisma: {
-  __esModule: true,
+    project: {
-  default: jest.fn(() =>
+      findMany: jest.fn(async () => [
-    Promise.resolve({
+        {
-      json: () =>
+          id: 1,
-        Promise.resolve({
+          slug: 'just-doing-some-testing',
-          posts: [
+          title: 'Just Doing Some Testing',
-            {
+          updatedAt: new Date('2025-02-13T14:25:38.000Z'),
-              id: '67ac8dfa709c60000117d312',
+          metaDescription: 'Hello bla bla bla bla',
-              title: 'Just Doing Some Testing',
+        },
-              meta_description: 'Hello bla bla bla bla',
+        {
-              slug: 'just-doing-some-testing',
+          id: 2,
-              updated_at: '2025-02-13T14:25:38.000+00:00',
+          slug: 'blockchain-based-voting-system',
-            },
+          title: 'Blockchain Based Voting System',
-            {
+          updatedAt: new Date('2025-02-13T16:54:42.000Z'),
-              id: '67aaffc3709c60000117d2d9',
+          metaDescription:
-              title: 'Blockchain Based Voting System',
+            'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
-              meta_description:
+        },
-                'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+      ]),
-              slug: 'blockchain-based-voting-system',
+    },
-              updated_at: '2025-02-13T16:54:42.000+00:00',
+  },
-            },
-          ],
-          meta: {
-            pagination: {
-              limit: 'all',
-              next: null,
-              page: 1,
-              pages: 1,
-              prev: null,
-              total: 2,
-            },
-          },
-        }),
-    })
-  ),
 }));
 
 jest.mock('next/server', () => ({
@@ -47,12 +31,8 @@ jest.mock('next/server', () => ({
 }));
 
 describe('GET /api/fetchAllProjects', () => {
-  beforeAll(() => {
-    process.env.GHOST_API_URL = 'http://localhost:2368';
-    process.env.GHOST_API_KEY = 'some-key';
-  });
-
   it('should return a list of projects (partial match)', async () => {
+    const { GET } = await import('@/app/api/fetchAllProjects/route');
     await GET();
 
     // Den tatsächlichen Argumentwert extrahieren
@@ -61,11 +41,11 @@ describe('GET /api/fetchAllProjects', () => {
     expect(responseArg).toMatchObject({
       posts: expect.arrayContaining([
         expect.objectContaining({
-          id: '67ac8dfa709c60000117d312',
+          id: '1',
           title: 'Just Doing Some Testing',
         }),
         expect.objectContaining({
-          id: '67aaffc3709c60000117d2d9',
+          id: '2',
           title: 'Blockchain Based Voting System',
         }),
       ]),

app/__tests__/api/fetchProject.test.tsx

@@ -1,26 +1,23 @@
-import { GET } from '@/app/api/fetchProject/route';
 import { NextRequest, NextResponse } from 'next/server';
 
-// Mock node-fetch so the route uses it as a reliable fallback
+jest.mock('@/lib/prisma', () => ({
-jest.mock('node-fetch', () => ({
+  prisma: {
-  __esModule: true,
+    project: {
-  default: jest.fn(() =>
+      findUnique: jest.fn(async ({ where }: { where: { slug: string } }) => {
-    Promise.resolve({
+        if (where.slug !== 'blockchain-based-voting-system') return null;
-      ok: true,
+        return {
-      json: () =>
+          id: 2,
-        Promise.resolve({
+          title: 'Blockchain Based Voting System',
-          posts: [
+          metaDescription:
-            {
+            'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
-              id: '67aaffc3709c60000117d2d9',
+          slug: 'blockchain-based-voting-system',
-              title: 'Blockchain Based Voting System',
+          updatedAt: new Date('2025-02-13T16:54:42.000Z'),
-              meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+          description: null,
-              slug: 'blockchain-based-voting-system',
+          content: null,
-              updated_at: '2025-02-13T16:54:42.000+00:00',
+        };
-            },
+      }),
-          ],
+    },
-        }),
+  },
-    })
-  ),
 }));
 
 jest.mock('next/server', () => ({
@@ -29,12 +26,8 @@ jest.mock('next/server', () => ({
   },
 }));
 describe('GET /api/fetchProject', () => {
-  beforeAll(() => {
-    process.env.GHOST_API_URL = 'http://localhost:2368';
-    process.env.GHOST_API_KEY = 'some-key';
-  });
-
   it('should fetch a project by slug', async () => {
+    const { GET } = await import('@/app/api/fetchProject/route');
     const mockRequest = {
       url: 'http://localhost/api/fetchProject?slug=blockchain-based-voting-system',
     } as unknown as NextRequest;
@@ -44,11 +37,11 @@ describe('GET /api/fetchProject', () => {
     expect(NextResponse.json).toHaveBeenCalledWith({
       posts: [
         {
-          id: '67aaffc3709c60000117d2d9',
+          id: '2',
           title: 'Blockchain Based Voting System',
           meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
           slug: 'blockchain-based-voting-system',
-          updated_at: '2025-02-13T16:54:42.000+00:00',
+          updated_at: '2025-02-13T16:54:42.000Z',
         },
       ],
     });

app/__tests__/api/hobbies.test.tsx

@@ -0,0 +1,20 @@
+import { NextResponse, NextRequest } from "next/server";
+import { GET } from "@/app/api/hobbies/route";
+
+// Mock the route handler module
+jest.mock("@/app/api/hobbies/route", () => ({
+  GET: jest.fn(),
+}));
+
+describe("GET /api/hobbies", () => {
+  it("should return hobbies", async () => {
+    (GET as jest.Mock).mockResolvedValue(
+      NextResponse.json({ hobbies: [{ id: 1, title: "Gaming" }] })
+    );
+
+    const response = await GET({} as NextRequest);
+    const data = await response.json();
+    expect(response.status).toBe(200);
+    expect(data.hobbies).toHaveLength(1);
+  });
+});

app/__tests__/api/sitemap.test.tsx

@@ -34,77 +34,38 @@ jest.mock("next/server", () => {
   };
 });
 
-import { GET } from "@/app/api/sitemap/route";
+jest.mock("@/lib/sitemap", () => ({
-
+  getSitemapEntries: jest.fn(async () => [
-// Mock node-fetch so we don't perform real network requests in tests
+    {
-jest.mock("node-fetch", () => ({
+      url: "https://dki.one/en",
-  __esModule: true,
+      lastModified: "2025-01-01T00:00:00.000Z",
-  default: jest.fn(() =>
+    },
-    Promise.resolve({
+    {
-      ok: true,
+      url: "https://dki.one/de",
-      json: () =>
+      lastModified: "2025-01-01T00:00:00.000Z",
-        Promise.resolve({
+    },
-          posts: [
+    {
-            {
+      url: "https://dki.one/en/projects/blockchain-based-voting-system",
-              id: "67ac8dfa709c60000117d312",
+      lastModified: "2025-02-13T16:54:42.000Z",
-              title: "Just Doing Some Testing",
+    },
-              meta_description: "Hello bla bla bla bla",
+    {
-              slug: "just-doing-some-testing",
+      url: "https://dki.one/de/projects/blockchain-based-voting-system",
-              updated_at: "2025-02-13T14:25:38.000+00:00",
+      lastModified: "2025-02-13T16:54:42.000Z",
-            },
+    },
-            {
+  ]),
-              id: "67aaffc3709c60000117d2d9",
+  generateSitemapXml: jest.fn(
-              title: "Blockchain Based Voting System",
+    () =>
-              meta_description:
+      '<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://dki.one/en</loc></url></urlset>',
-                "This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.",
-              slug: "blockchain-based-voting-system",
-              updated_at: "2025-02-13T16:54:42.000+00:00",
-            },
-          ],
-          meta: {
-            pagination: {
-              limit: "all",
-              next: null,
-              page: 1,
-              pages: 1,
-              prev: null,
-              total: 2,
-            },
-          },
-        }),
-    }),
   ),
 }));
 
 describe("GET /api/sitemap", () => {
   beforeAll(() => {
-    process.env.GHOST_API_URL = "http://localhost:2368";
-    process.env.GHOST_API_KEY = "test-api-key";
     process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
-
-    // Provide mock posts via env so route can use them without fetching
-    process.env.GHOST_MOCK_POSTS = JSON.stringify({
-      posts: [
-        {
-          id: "67ac8dfa709c60000117d312",
-          title: "Just Doing Some Testing",
-          meta_description: "Hello bla bla bla bla",
-          slug: "just-doing-some-testing",
-          updated_at: "2025-02-13T14:25:38.000+00:00",
-        },
-        {
-          id: "67aaffc3709c60000117d2d9",
-          title: "Blockchain Based Voting System",
-          meta_description:
-            "This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.",
-          slug: "blockchain-based-voting-system",
-          updated_at: "2025-02-13T16:54:42.000+00:00",
-        },
-      ],
-    });
   });
 
   it("should return a sitemap", async () => {
+    const { GET } = await import("@/app/api/sitemap/route");
     const response = await GET();
 
     // Get the body text from the NextResponse
@@ -113,15 +74,7 @@ describe("GET /api/sitemap", () => {
     expect(body).toContain(
       '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">',
     );
-    expect(body).toContain("<loc>https://dki.one/</loc>");
+    expect(body).toContain("<loc>https://dki.one/en</loc>");
-    expect(body).toContain("<loc>https://dki.one/legal-notice</loc>");
-    expect(body).toContain("<loc>https://dki.one/privacy-policy</loc>");
-    expect(body).toContain(
-      "<loc>https://dki.one/projects/just-doing-some-testing</loc>",
-    );
-    expect(body).toContain(
-      "<loc>https://dki.one/projects/blockchain-based-voting-system</loc>",
-    );
     // Note: Headers are not available in test environment
   });
 });

app/__tests__/api/tech-stack.test.tsx

@@ -0,0 +1,20 @@
+import { NextResponse, NextRequest } from "next/server";
+import { GET } from "@/app/api/tech-stack/route";
+
+// Mock the route handler module
+jest.mock("@/app/api/tech-stack/route", () => ({
+  GET: jest.fn(),
+}));
+
+describe("GET /api/tech-stack", () => {
+  it("should return tech stack", async () => {
+    (GET as jest.Mock).mockResolvedValue(
+      NextResponse.json({ techStack: [{ id: 1, name: "Frontend" }] })
+    );
+
+    const response = await GET({} as NextRequest);
+    const data = await response.json();
+    expect(response.status).toBe(200);
+    expect(data.techStack).toHaveLength(1);
+  });
+});

app/__tests__/components/ActivityFeed.test.tsx

@@ -0,0 +1,151 @@
+import '@testing-library/jest-dom';
+
+/**
+ * Unit tests for ActivityFeed NaN handling
+ * 
+ * This test suite validates that the ActivityFeed component correctly handles
+ * NaN and numeric values in gaming and custom activity data to prevent
+ * "Received NaN for the children attribute" React errors.
+ */
+describe('ActivityFeed NaN Handling', () => {
+  describe('Gaming activity rendering logic', () => {
+    // Helper function to simulate getSafeGamingText behavior
+    const getSafeGamingText = (details: string | number | undefined, state: string | number | undefined, fallback: string): string => {
+      if (typeof details === 'string' && details.trim().length > 0) return details;
+      if (typeof state === 'string' && state.trim().length > 0) return state;
+      if (typeof details === 'number' && !isNaN(details)) return String(details);
+      if (typeof state === 'number' && !isNaN(state)) return String(state);
+      return fallback;
+    };
+
+    it('should safely handle NaN in gaming.details', () => {
+      const result = getSafeGamingText(NaN, 'Playing', 'Playing...');
+      expect(result).toBe('Playing'); // Should fall through NaN to state
+      expect(result).not.toBe(NaN);
+      expect(typeof result).toBe('string');
+    });
+
+    it('should safely handle NaN in both gaming.details and gaming.state', () => {
+      const result = getSafeGamingText(NaN, NaN, 'Playing...');
+      expect(result).toBe('Playing...'); // Should use fallback
+      expect(typeof result).toBe('string');
+    });
+
+    it('should prioritize string details over numeric state', () => {
+      const result = getSafeGamingText('Details text', 42, 'Playing...');
+      expect(result).toBe('Details text'); // String details takes precedence
+      expect(typeof result).toBe('string');
+    });
+
+    it('should prioritize string state over numeric details', () => {
+      const result = getSafeGamingText(42, 'State text', 'Playing...');
+      expect(result).toBe('State text'); // String state takes precedence over numeric details
+      expect(typeof result).toBe('string');
+    });
+
+    it('should convert valid numeric details to string', () => {
+      const result = getSafeGamingText(42, undefined, 'Playing...');
+      expect(result).toBe('42');
+      expect(typeof result).toBe('string');
+    });
+
+    it('should handle empty strings correctly', () => {
+      const result1 = getSafeGamingText('', 'Playing', 'Playing...');
+      expect(result1).toBe('Playing'); // Empty string should fall through to state
+      
+      const result2 = getSafeGamingText('  ', 'Playing', 'Playing...');
+      expect(result2).toBe('Playing'); // Whitespace-only should fall through to state
+    });
+
+    it('should convert gaming.name to string safely', () => {
+      const validName = String('Test Game');
+      expect(validName).toBe('Test Game');
+      expect(typeof validName).toBe('string');
+
+      // In the actual code, we use String(data.gaming.name || '')
+      // If data.gaming.name is NaN, (NaN || '') evaluates to '' because NaN is falsy
+      const nanValue = NaN;
+      const nanName = String(nanValue || '');
+      expect(nanName).toBe(''); // NaN is falsy, so it falls back to ''
+      expect(typeof nanName).toBe('string');
+    });
+  });
+
+  describe('Custom activities progress handling', () => {
+    it('should only render progress bar when progress is a valid number', () => {
+      const validProgress = 75;
+      const shouldRender = validProgress !== undefined && 
+                           typeof validProgress === 'number' && 
+                           !isNaN(validProgress);
+      expect(shouldRender).toBe(true);
+    });
+
+    it('should not render progress bar when progress is NaN', () => {
+      const invalidProgress = NaN;
+      const shouldRender = invalidProgress !== undefined && 
+                           typeof invalidProgress === 'number' && 
+                           !isNaN(invalidProgress);
+      expect(shouldRender).toBe(false);
+    });
+
+    it('should not render progress bar when progress is undefined', () => {
+      const undefinedProgress = undefined;
+      const shouldRender = undefinedProgress !== undefined && 
+                           typeof undefinedProgress === 'number' && 
+                           !isNaN(undefinedProgress);
+      expect(shouldRender).toBe(false);
+    });
+  });
+
+  describe('Custom activities dynamic field rendering', () => {
+    it('should safely convert valid numeric values to string', () => {
+      const value = 42;
+      const shouldRender = typeof value === 'string' || 
+                          (typeof value === 'number' && !isNaN(value));
+      
+      expect(shouldRender).toBe(true);
+      
+      if (shouldRender) {
+        const stringValue = String(value);
+        expect(stringValue).toBe('42');
+        expect(typeof stringValue).toBe('string');
+      }
+    });
+
+    it('should not render NaN values', () => {
+      const value = NaN;
+      const shouldRender = typeof value === 'string' || 
+                          (typeof value === 'number' && !isNaN(value));
+      
+      expect(shouldRender).toBe(false);
+    });
+
+    it('should render valid string values', () => {
+      const value = 'Test String';
+      const shouldRender = typeof value === 'string' || 
+                          (typeof value === 'number' && !isNaN(value));
+      
+      expect(shouldRender).toBe(true);
+      
+      if (shouldRender) {
+        const stringValue = String(value);
+        expect(stringValue).toBe('Test String');
+        expect(typeof stringValue).toBe('string');
+      }
+    });
+
+    it('should render zero as a valid numeric value', () => {
+      const value = 0;
+      const shouldRender = typeof value === 'string' || 
+                          (typeof value === 'number' && !isNaN(value));
+      
+      expect(shouldRender).toBe(true);
+      
+      if (shouldRender) {
+        const stringValue = String(value);
+        expect(stringValue).toBe('0');
+        expect(typeof stringValue).toBe('string');
+      }
+    });
+  });
+});

app/__tests__/components/CurrentlyReading.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import CurrentlyReadingComp from "@/app/components/CurrentlyReading";
+import React from "react";
+
+// Mock next-intl completely to avoid ESM issues
+jest.mock("next-intl", () => ({
+  useTranslations: () => (key: string) => key,
+  useLocale: () => "en",
+}));
+
+// Mock next/image
+jest.mock("next/image", () => ({
+  __esModule: true,
+  // eslint-disable-next-line @next/next/no-img-element
+  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} alt={props.alt || ""} />,
+}));
+
+describe("CurrentlyReading Component", () => {
+  beforeEach(() => {
+    global.fetch = jest.fn();
+  });
+
+  it("renders skeleton when loading", () => {
+    (global.fetch as jest.Mock).mockReturnValue(new Promise(() => {}));
+    const { container } = render(<CurrentlyReadingComp />);
+    expect(container.querySelector(".animate-pulse")).toBeInTheDocument();
+  });
+
+  it("renders a book when data is fetched", async () => {
+    const mockBooks = [
+      {
+        title: "Test Book",
+        authors: ["Test Author"],
+        image: "/test.jpg",
+        progress: 50,
+        startedAt: "2024-01-01"
+      },
+    ];
+
+    (global.fetch as jest.Mock).mockResolvedValue({
+      ok: true,
+      json: async () => ({ currentlyReading: mockBooks }),
+    });
+
+    render(<CurrentlyReadingComp />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Test Book")).toBeInTheDocument();
+      expect(screen.getByText("Test Author")).toBeInTheDocument();
+    });
+  });
+});

app/__tests__/components/Header.test.tsx

@@ -1,27 +1,34 @@
 import { render, screen } from '@testing-library/react';
 import Header from '@/app/components/Header';
-import '@testing-library/jest-dom';
+
+// Mock next-intl
+jest.mock('next-intl', () => ({
+  useLocale: () => 'en',
+  useTranslations: () => (key: string) => {
+    const messages: Record<string, string> = {
+      home: 'Home',
+      about: 'About',
+      projects: 'Projects',
+      contact: 'Contact'
+    };
+    return messages[key] || key;
+  },
+}));
+
+// Mock next/navigation
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/en',
+}));
 
 describe('Header', () => {
-  it('renders the header', () => {
+  it('renders the header with the dk logo', () => {
     render(<Header />);
     expect(screen.getByText('dk')).toBeInTheDocument();
-    expect(screen.getByText('0')).toBeInTheDocument();
     
-    const aboutButtons = screen.getAllByText('About');
+    // Check for navigation links (appear in both desktop and mobile menus)
-    expect(aboutButtons.length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Home').length).toBeGreaterThan(0);
-
+    expect(screen.getAllByText('About').length).toBeGreaterThan(0);
-    const projectsButtons = screen.getAllByText('Projects');
+    expect(screen.getAllByText('Projects').length).toBeGreaterThan(0);
-    expect(projectsButtons.length).toBeGreaterThan(0);
+    expect(screen.getAllByText('Contact').length).toBeGreaterThan(0);
-
-    const contactButtons = screen.getAllByText('Contact');
-    expect(contactButtons.length).toBeGreaterThan(0);
   });
-
+});
-  it('renders the mobile header', () => {
-    render(<Header />);
-    // Check for mobile menu button (hamburger icon)
-    const menuButton = screen.getByRole('button');
-    expect(menuButton).toBeInTheDocument();
-  });
-});

app/__tests__/components/Hero.test.tsx

@@ -1,12 +1,60 @@
 import { render, screen } from '@testing-library/react';
 import Hero from '@/app/components/Hero';
-import '@testing-library/jest-dom';
+
+// Mock next-intl/server
+jest.mock('next-intl/server', () => ({
+  getTranslations: () => Promise.resolve((key: string) => {
+    const messages: Record<string, string> = {
+      badge: 'Student & Self-Hoster',
+      line1: 'Building',
+      line2: 'Stuff.',
+      description: 'Dennis is a student and passionate self-hoster.',
+      ctaWork: 'View My Work',
+      ctaContact: 'Get in touch',
+    };
+    return messages[key] || key;
+  }),
+}));
+
+// Mock next/image
+interface ImageProps {
+  src: string;
+  alt: string;
+  fill?: boolean;
+  priority?: boolean;
+  [key: string]: unknown;
+}
+
+jest.mock('next/image', () => ({
+  __esModule: true,
+  default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img 
+      src={src} 
+      alt={alt} 
+      data-fill={fill?.toString()} 
+      data-priority={priority?.toString()} 
+      {...props} 
+    />
+  ),
+}));
 
 describe('Hero', () => {
-  it('renders the hero section', () => {
+  it('renders the hero section correctly', async () => {
-    render(<Hero />);
+    const HeroResolved = await Hero({ locale: 'en' });
-    expect(screen.getByText('Dennis Konkol')).toBeInTheDocument();
+    render(HeroResolved);
-    expect(screen.getByText(/Student and passionate/i)).toBeInTheDocument();
+    
+    // Check for the main headlines (defaults in Hero.tsx)
+    expect(screen.getByText('Building')).toBeInTheDocument();
+    expect(screen.getByText('Stuff.')).toBeInTheDocument();
+    
+    // Check for the description from our mock
+    expect(screen.getByText(/Dennis is a student/i)).toBeInTheDocument();
+    
+    // Check for the image
     expect(screen.getByAltText('Dennis Konkol')).toBeInTheDocument();
+    
+    // Check for CTA
+    expect(screen.getByText('View My Work')).toBeInTheDocument();
   });
-});
+});

app/__tests__/components/ThemeToggle.test.tsx

@@ -0,0 +1,19 @@
+import { render, screen } from "@testing-library/react";
+import { ThemeToggle } from "@/app/components/ThemeToggle";
+
+// Mock custom ThemeProvider
+jest.mock("@/app/components/ThemeProvider", () => ({
+  useTheme: () => ({
+    theme: "light",
+    setTheme: jest.fn(),
+  }),
+  ThemeProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+describe("ThemeToggle Component", () => {
+  it("renders the theme toggle button", () => {
+    render(<ThemeToggle />);
+    // Initial render should have the button
+    expect(screen.getByRole("button")).toBeInTheDocument();
+  });
+});

app/__tests__/not-found.test.tsx

@@ -1,10 +1,24 @@
 import { render, screen } from '@testing-library/react';
 import NotFound from '@/app/not-found';
-import '@testing-library/jest-dom';
+
+// Mock next/navigation
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({
+    back: jest.fn(),
+    push: jest.fn(),
+  }),
+}));
+
+// Mock next-intl
+jest.mock('next-intl', () => ({
+  useLocale: () => 'en',
+  useTranslations: () => (key: string) => key,
+}));
 
 describe('NotFound', () => {
-  it('renders the 404 page', () => {
+  it('renders the 404 page with the new design text', () => {
     render(<NotFound />);
-    expect(screen.getByText("Oops! The page you're looking for doesn't exist.")).toBeInTheDocument();
+    expect(screen.getByText(/Page not/i)).toBeInTheDocument();
+    expect(screen.getByText(/Found/i)).toBeInTheDocument();
   });
-});
+});

app/__tests__/sitemap.xml/page.test.tsx

@@ -1,5 +1,4 @@
 import "@testing-library/jest-dom";
-import { GET } from "@/app/sitemap.xml/route";
 
 jest.mock("next/server", () => ({
   NextResponse: jest.fn().mockImplementation((body: unknown, init?: ResponseInit) => {
@@ -11,71 +10,32 @@ jest.mock("next/server", () => ({
   }),
 }));
 
-// Sitemap XML used by node-fetch mock
+jest.mock("@/lib/sitemap", () => ({
-const sitemapXml = `
+  getSitemapEntries: jest.fn(async () => [
-  <urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">
+    {
-    <url>
+      url: "https://dki.one/en",
-      <loc>https://dki.one/</loc>
+      lastModified: "2025-01-01T00:00:00.000Z",
-    </url>
+    },
-    <url>
+  ]),
-      <loc>https://dki.one/legal-notice</loc>
+  generateSitemapXml: jest.fn(
-    </url>
+    () =>
-    <url>
+      '<?xml version="1.0" encoding="UTF-8"?><urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"><url><loc>https://dki.one/en</loc></url></urlset>',
-      <loc>https://dki.one/privacy-policy</loc>
-    </url>
-    <url>
-      <loc>https://dki.one/projects/just-doing-some-testing</loc>
-    </url>
-    <url>
-      <loc>https://dki.one/projects/blockchain-based-voting-system</loc>
-    </url>
-  </urlset>
-`;
-
-// Mock node-fetch for sitemap endpoint (hoisted by Jest)
-jest.mock("node-fetch", () => ({
-  __esModule: true,
-  default: jest.fn((_url: string) =>
-    Promise.resolve({ ok: true, text: () => Promise.resolve(sitemapXml) }),
   ),
 }));
 
 describe("Sitemap Component", () => {
   beforeAll(() => {
     process.env.NEXT_PUBLIC_BASE_URL = "https://dki.one";
-
-    // Provide sitemap XML directly so route uses it without fetching
-    process.env.GHOST_MOCK_SITEMAP = sitemapXml;
-
-    // Mock global.fetch too, to avoid any network calls
-    global.fetch = jest.fn().mockImplementation((url: string) => {
-      if (url.includes("/api/sitemap")) {
-        return Promise.resolve({
-          ok: true,
-          text: () => Promise.resolve(sitemapXml),
-        });
-      }
-      return Promise.reject(new Error(`Unknown URL: ${url}`));
-    });
   });
 
   it("should render the sitemap XML", async () => {
+    const { GET } = await import("@/app/sitemap.xml/route");
     const response = await GET();
 
     expect(response.body).toContain(
       '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">',
     );
-    expect(response.body).toContain("<loc>https://dki.one/</loc>");
+    expect(response.body).toContain("<loc>https://dki.one/en</loc>");
-    expect(response.body).toContain("<loc>https://dki.one/legal-notice</loc>");
-    expect(response.body).toContain(
-      "<loc>https://dki.one/privacy-policy</loc>",
-    );
-    expect(response.body).toContain(
-      "<loc>https://dki.one/projects/just-doing-some-testing</loc>",
-    );
-    expect(response.body).toContain(
-      "<loc>https://dki.one/projects/blockchain-based-voting-system</loc>",
-    );
     // Note: Headers are not available in test environment
   });
 });

app/_ui/HomePage.tsx

@@ -0,0 +1,119 @@
+import Header from "../components/Header";
+import Hero from "../components/Hero";
+import About from "../components/About";
+import Projects from "../components/Projects";
+import Contact from "../components/Contact";
+import Footer from "../components/Footer";
+import Script from "next/script";
+import { useEffect } from "react";
+
+export default function HomePage() {
+  useEffect(() => {
+    // Force scroll to top on mount to prevent starting at lower sections
+    window.scrollTo(0, 0);
+  }, []);
+
+  return (
+    <div className="min-h-screen">
+      <Script
+        id={"structured-data"}
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "Person",
+            name: "Dennis Konkol",
+            url: "https://dk0.dev",
+            jobTitle: "Software Engineer",
+            address: {
+              "@type": "PostalAddress",
+              addressLocality: "Osnabrück",
+              addressCountry: "Germany",
+            },
+            sameAs: [
+              "https://github.com/Denshooter",
+              "https://linkedin.com/in/dkonkol",
+            ],
+          }),
+        }}
+      />
+      <Header />
+      {/* Spacer to prevent navbar overlap */}
+      <div className="h-16 sm:h-24 md:h-32" aria-hidden="true"></div>
+      <main className="relative">
+        <Hero locale="en" />
+
+        {/* Wavy Separator 1 - Hero to About */}
+        <div className="relative h-12 sm:h-16 md:h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
+              fill="url(#gradient1)"
+            />
+            <defs>
+              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
+                <stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
+                <stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <About />
+
+        {/* Wavy Separator 2 - About to Projects */}
+        <div className="relative h-12 sm:h-16 md:h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z"
+              fill="url(#gradient2)"
+            />
+            <defs>
+              <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#FED7AA" stopOpacity="0.4" />
+                <stop offset="50%" stopColor="#FDE68A" stopOpacity="0.4" />
+                <stop offset="100%" stopColor="#FCA5A5" stopOpacity="0.4" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <Projects />
+
+        {/* Wavy Separator 3 - Projects to Contact */}
+        <div className="relative h-12 sm:h-16 md:h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z"
+              fill="url(#gradient3)"
+            />
+            <defs>
+              <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#99F6E4" stopOpacity="0.4" />
+                <stop offset="50%" stopColor="#A7F3D0" stopOpacity="0.4" />
+                <stop offset="100%" stopColor="#D9F99D" stopOpacity="0.4" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <Contact />
+      </main>
+      <Footer />
+    </div>
+  );
+}
+

app/_ui/HomePageServer.tsx

@@ -0,0 +1,141 @@
+import Header from "../components/Header.server";
+import Hero from "../components/Hero";
+import ScrollFadeIn from "../components/ScrollFadeIn";
+import Script from "next/script";
+import {
+  getAboutTranslations,
+  getProjectsTranslations,
+  getContactTranslations,
+  getFooterTranslations,
+} from "@/lib/translations-loader";
+import {
+  AboutClient,
+  ProjectsClient,
+  ContactClient,
+  FooterClient,
+} from "../components/ClientWrappers";
+
+interface HomePageServerProps {
+  locale: string;
+}
+
+export default async function HomePageServer({ locale }: HomePageServerProps) {
+  // Parallel laden aller Translations (hero translations handled by Hero server component)
+  const [aboutT, projectsT, contactT, footerT] = await Promise.all([
+    getAboutTranslations(locale),
+    getProjectsTranslations(locale),
+    getContactTranslations(locale),
+    getFooterTranslations(locale),
+  ]);
+
+  return (
+    <div className="min-h-screen">
+      <Script
+        id={"structured-data"}
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "Person",
+            name: "Dennis Konkol",
+            url: "https://dk0.dev",
+            jobTitle: "Software Engineer",
+            address: {
+              "@type": "PostalAddress",
+              addressLocality: "Osnabrück",
+              addressCountry: "Germany",
+            },
+            sameAs: [
+              "https://github.com/Denshooter",
+              "https://linkedin.com/in/dkonkol",
+            ],
+          }),
+        }}
+      />
+      <Header locale={locale} />
+      {/* Spacer to prevent navbar overlap */}
+      <div className="h-24 md:h-32" aria-hidden="true"></div>
+      <main className="relative">
+        <Hero locale={locale} />
+
+        {/* Wavy Separator 1 - Hero to About */}
+        <div className="relative h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
+              fill="url(#gradient1)"
+            />
+            <defs>
+              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
+                <stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
+                <stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <ScrollFadeIn>
+          <AboutClient locale={locale} translations={aboutT} />
+        </ScrollFadeIn>
+
+        {/* Wavy Separator 2 - About to Projects */}
+        <div className="relative h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,64 C360,96 720,32 1080,64 C1200,96 1320,32 1440,64 L1440,0 L0,0 Z"
+              fill="url(#gradient2)"
+            />
+            <defs>
+              <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#A7F3D0" stopOpacity="0.3" />
+                <stop offset="50%" stopColor="#BFDBFE" stopOpacity="0.3" />
+                <stop offset="100%" stopColor="#DDD6FE" stopOpacity="0.3" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <ScrollFadeIn>
+          <ProjectsClient locale={locale} translations={projectsT} />
+        </ScrollFadeIn>
+
+        {/* Wavy Separator 3 - Projects to Contact */}
+        <div className="relative h-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <path
+              d="M0,32 C240,64 480,0 720,32 C960,64 1200,0 1440,32 L1440,120 L0,120 Z"
+              fill="url(#gradient3)"
+            />
+            <defs>
+              <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
+                <stop offset="0%" stopColor="#FDE68A" stopOpacity="0.3" />
+                <stop offset="50%" stopColor="#FCA5A5" stopOpacity="0.3" />
+                <stop offset="100%" stopColor="#C4B5FD" stopOpacity="0.3" />
+              </linearGradient>
+            </defs>
+          </svg>
+        </div>
+
+        <ScrollFadeIn>
+          <ContactClient locale={locale} translations={contactT} />
+        </ScrollFadeIn>
+      </main>
+      <ScrollFadeIn>
+        <FooterClient locale={locale} translations={footerT} />
+      </ScrollFadeIn>
+    </div>
+  );
+}

app/_ui/ProjectDetailClient.tsx

@@ -0,0 +1,170 @@
+"use client";
+
+import { ExternalLink, ArrowLeft, Github as GithubIcon } from "lucide-react";
+import { useEffect, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+
+export type ProjectDetailData = {
+  id: number;
+  slug: string;
+  title: string;
+  description: string;
+  content: string;
+  tags: string[];
+  featured: boolean;
+  category: string;
+  date?: string;
+  created_at?: string;
+  github?: string | null;
+  github_url?: string | null;
+  live?: string | null;
+  button_live_label?: string | null;
+  button_github_label?: string | null;
+  imageUrl?: string | null;
+  image_url?: string | null;
+  technologies?: string[];
+};
+
+export default function ProjectDetailClient({
+  project,
+  locale,
+}: {
+  project: ProjectDetailData;
+  locale: string;
+}) {
+  const tCommon = useTranslations("common");
+  const tDetail = useTranslations("projects.detail");
+  const router = useRouter();
+  const [canGoBack, setCanGoBack] = useState(false);
+
+  useEffect(() => {
+    // Prüfen, ob wir eine History haben (von Home gekommen)
+    if (typeof window !== 'undefined' && window.history.length > 1) {
+      setCanGoBack(true);
+    }
+    
+  }, []);
+
+  const handleBack = (e: React.MouseEvent) => {
+    e.preventDefault();
+    // Wenn wir direkt auf die Seite gekommen sind (Deep Link), gehen wir zur Projektliste
+    // Ansonsten nutzen wir den Browser-Back, um an die exakte Stelle der Home oder Liste zurückzukehren
+    if (canGoBack) {
+      router.back();
+    } else {
+      router.push(`/${locale}/projects`);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 pt-32 pb-20 px-6 transition-colors duration-500">
+      <div className="max-w-7xl mx-auto">
+        
+        {/* Navigation - Intelligent Back */}
+        <button
+          onClick={handleBack}
+          className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-12 group bg-transparent border-none cursor-pointer"
+        >
+          <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
+          <span className="font-bold uppercase tracking-widest text-xs">
+            {tCommon("back")}
+          </span>
+        </button>
+
+        {/* Title Section */}
+        <div className="mb-20">
+          <h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase mb-8">
+            {project.title}<span className="text-liquid-mint">.</span>
+          </h1>
+          <p className="text-xl md:text-3xl font-light text-stone-500 dark:text-stone-400 max-w-4xl leading-snug tracking-tight">
+            {project.description}
+          </p>
+        </div>
+
+        {/* Feature Image Box */}
+        <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-4 md:p-8 border border-stone-200/60 dark:border-stone-800/60 shadow-sm mb-12 overflow-hidden">
+          <div className="relative aspect-video rounded-[2rem] overflow-hidden border-4 border-stone-50 dark:border-stone-800 shadow-2xl">
+            {project.imageUrl ? (
+              <Image src={project.imageUrl} alt={project.title} fill className="object-cover" priority sizes="100vw" />
+            ) : (
+              <div className="absolute inset-0 bg-stone-100 dark:bg-stone-800 flex items-center justify-center">
+                <span className="text-[15rem] font-black text-stone-200 dark:text-stone-700">{project.title.charAt(0)}</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8">
+          <div className="lg:col-span-8 space-y-8">
+            <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm">
+              <div className="prose prose-stone dark:prose-invert max-w-none text-lg md:text-xl font-light leading-relaxed">
+                <ReactMarkdown>{project.content}</ReactMarkdown>
+              </div>
+            </div>
+          </div>
+
+                    <div className="lg:col-span-4 space-y-8">
+
+                      
+
+                      {/* Quick Links Box - Only show if links exist */}
+
+                      {((project.live && project.live !== "#") || (project.github && project.github !== "#")) && (
+
+                        <div className="bg-stone-900 dark:bg-stone-800 rounded-[3rem] p-10 border border-stone-800 dark:border-stone-700 shadow-2xl text-white">
+
+                          <h3 className="text-xl font-black mb-8 uppercase tracking-widest text-liquid-mint">Links</h3>
+
+                          <div className="space-y-4">
+
+                            {project.live && project.live !== "#" && (
+
+                              <a href={project.live} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between w-full p-5 bg-white text-stone-900 rounded-2xl font-black hover:scale-105 transition-transform group">
+
+                                <span>{project.button_live_label || tDetail("liveDemo")}</span>
+
+                                <ExternalLink size={20} className="group-hover:translate-x-1 transition-transform" />
+
+                              </a>
+
+                            )}
+
+                            {project.github && project.github !== "#" && (
+
+                              <a href={project.github} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between w-full p-5 bg-stone-800 text-white border border-stone-700 rounded-2xl font-black hover:bg-stone-700 transition-colors group">
+
+                                <span>{project.button_github_label || tDetail("viewSource")}</span>
+
+                                <GithubIcon size={20} className="group-hover:rotate-12 transition-transform" />
+
+                              </a>
+
+                            )}
+
+                          </div>
+
+                        </div>
+
+                      )}
+
+          
+
+                      <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm">
+              <h3 className="text-xl font-black mb-8 uppercase tracking-widest text-stone-400">Stack</h3>
+              <div className="flex flex-wrap gap-2">
+                {project.tags.map((tag) => (
+                  <span key={tag} className="px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700">
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/_ui/ProjectsPageClient.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { motion } from "framer-motion";
+import { ArrowUpRight, ArrowLeft, Search } from "lucide-react";
+import Link from "next/link";
+import { useTranslations } from "next-intl";
+import Image from "next/image";
+import { Skeleton } from "../components/ui/Skeleton";
+
+export type ProjectListItem = {
+  id: number | string; // Allow both for Directus (string) and Prisma (number) compatibility
+  slug: string;
+  title: string;
+  description: string;
+  tags: string[];
+  category: string;
+  date?: string;
+  createdAt?: string;
+  imageUrl?: string | null;
+};
+
+export default function ProjectsPageClient({
+  projects,
+  locale,
+}: {
+  projects: ProjectListItem[];
+  locale: string;
+}) {
+  const tCommon = useTranslations("common");
+  const tList = useTranslations("projects.list");
+
+  const [selectedCategory, setSelectedCategory] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate initial load for smoother entrance or handle actual fetch if needed
+    const timer = setTimeout(() => setLoading(false), 800);
+    return () => clearTimeout(timer);
+  }, []);
+
+  const categories = useMemo(() => {
+    const unique = Array.from(new Set(projects.map((p) => p.category))).filter(Boolean);
+    return ["all", ...unique];
+  }, [projects]);
+
+  const filteredProjects = useMemo(() => {
+    let result = projects;
+    if (selectedCategory !== "all") {
+      result = result.filter((project) => project.category === selectedCategory);
+    }
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (p) => p.title.toLowerCase().includes(query) || p.description.toLowerCase().includes(query) || p.tags.some(t => t.toLowerCase().includes(query))
+      );
+    }
+    return result;
+  }, [projects, selectedCategory, searchQuery]);
+
+  return (
+    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 pt-40 pb-20 px-6 transition-colors duration-500">
+      <div className="max-w-7xl mx-auto">
+        
+        {/* Header */}
+        <div className="mb-24">
+          <Link
+            href={`/${locale}`}
+            className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-10 group"
+          >
+            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
+            <span className="font-bold uppercase tracking-widest text-xs">{tCommon("backToHome")}</span>
+          </Link>
+          
+          <h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
+            Archive<span className="text-liquid-mint">.</span>
+          </h1>
+          <p className="mt-8 text-xl md:text-3xl font-light text-stone-500 dark:text-stone-400 max-w-2xl leading-snug tracking-tight">
+            {tList("intro")}
+          </p>
+        </div>
+
+        {/* Filters */}
+        <div className="flex flex-col md:flex-row gap-8 justify-between items-start md:items-center mb-16">
+          <div className="flex flex-wrap gap-2">
+            {categories.map((cat) => (
+              <button
+                key={cat}
+                onClick={() => setSelectedCategory(cat)}
+                className={`px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-all ${
+                  selectedCategory === cat 
+                    ? "bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900" 
+                    : "bg-white dark:bg-stone-900 text-stone-500 border border-stone-200 dark:border-stone-800"
+                }`}
+              >
+                {cat === 'all' ? tList('all') : cat}
+              </button>
+            ))}
+          </div>
+          <div className="relative w-full md:w-80">
+            <Search className="absolute left-4 top-1/2 -translate-y-1/2 text-stone-400" size={18} />
+            <input 
+              type="text" 
+              placeholder={tList("searchPlaceholder")}
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-2xl py-4 pl-12 pr-6 focus:outline-none focus:ring-2 focus:ring-liquid-mint/30 transition-all shadow-sm"
+            />
+          </div>
+        </div>
+
+        {/* Grid */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {loading ? (
+            Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col h-full">
+                <Skeleton className="aspect-[16/10] rounded-[2rem] mb-8" />
+                <div className="space-y-3">
+                  <Skeleton className="h-8 w-1/2" />
+                  <Skeleton className="h-4 w-3/4" />
+                </div>
+              </div>
+            ))
+          ) : (
+            filteredProjects.map((project) => (
+            <motion.div key={project.id} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
+              <Link href={`/${locale}/projects/${project.slug}`} className="group block h-full">
+                <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm h-full hover:shadow-xl transition-all flex flex-col">
+                  {project.imageUrl && (
+                    <div className="relative aspect-[16/10] rounded-[2rem] overflow-hidden mb-8 border-4 border-stone-50 dark:border-stone-800 shadow-lg">
+                      <Image src={project.imageUrl} alt={project.title} fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
+                    </div>
+                  )}
+                  <div className="flex-1 flex flex-col">
+                    <div className="flex justify-between items-start mb-4">
+                      <h3 className="text-3xl font-black text-stone-900 dark:text-white uppercase tracking-tight">{project.title}</h3>
+                      <div className="w-12 h-12 rounded-full bg-stone-50 dark:bg-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-all">
+                        <ArrowUpRight size={20} />
+                      </div>
+                    </div>
+                    <p className="text-stone-500 dark:text-stone-400 font-light text-lg mb-8 line-clamp-3 leading-relaxed">{project.description}</p>
+                    <div className="mt-auto flex flex-wrap gap-2">
+                      {project.tags.slice(0, 3).map(tag => (
+                        <span key={tag} className="px-3 py-1 bg-stone-50 dark:bg-stone-800 rounded-lg text-[9px] font-black uppercase tracking-widest text-stone-400">{tag}</span>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+              </Link>
+            </motion.div>
+          )))}
+        </div>
+      </div>
+    </div>
+  );
+}

app/api/analytics/dashboard/route.ts

@@ -1,92 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { projectService } from '@/lib/prisma';
-import { analyticsCache } from '@/lib/redis';
-import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
-
-export async function GET(request: NextRequest) {
-  try {
-    // Rate limiting - more generous for admin dashboard
-    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
-    if (!checkRateLimit(ip, 20, 60000)) { // 20 requests per minute
-      return new NextResponse(
-        JSON.stringify({ error: 'Rate limit exceeded' }), 
-        { 
-          status: 429, 
-          headers: { 
-            'Content-Type': 'application/json',
-            ...getRateLimitHeaders(ip, 5, 60000)
-          } 
-        }
-      );
-    }
-
-    // Check admin authentication - for admin dashboard requests, we trust the session
-    // The middleware has already verified the admin session for /manage routes
-    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    if (!isAdminRequest) {
-      const authError = requireSessionAuth(request);
-      if (authError) {
-        return authError;
-      }
-    }
-
-    // Check cache first
-    const cachedStats = await analyticsCache.getOverallStats();
-    if (cachedStats) {
-      return NextResponse.json(cachedStats);
-    }
-
-    // Get analytics data
-    const projectsResult = await projectService.getAllProjects();
-    const projects = projectsResult.projects || projectsResult;
-    const performanceStats = await projectService.getPerformanceStats();
-    
-    // Calculate analytics metrics
-    const analytics = {
-      overview: {
-        totalProjects: projects.length,
-        publishedProjects: projects.filter(p => p.published).length,
-        featuredProjects: projects.filter(p => p.featured).length,
-        totalViews: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.views as number || 0), 0),
-        totalLikes: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.likes as number || 0), 0),
-        totalShares: projects.reduce((sum, p) => sum + ((p.analytics as Record<string, unknown>)?.shares as number || 0), 0),
-        avgLighthouse: projects.length > 0 
-          ? Math.round(projects.reduce((sum, p) => sum + ((p.performance as Record<string, unknown>)?.lighthouse as number || 0), 0) / projects.length)
-          : 0
-      },
-      projects: projects.map(project => ({
-        id: project.id,
-        title: project.title,
-        category: project.category,
-        difficulty: project.difficulty,
-        views: (project.analytics as Record<string, unknown>)?.views as number || 0,
-        likes: (project.analytics as Record<string, unknown>)?.likes as number || 0,
-        shares: (project.analytics as Record<string, unknown>)?.shares as number || 0,
-        lighthouse: (project.performance as Record<string, unknown>)?.lighthouse as number || 0,
-        published: project.published,
-        featured: project.featured,
-        createdAt: project.createdAt,
-        updatedAt: project.updatedAt
-      })),
-      categories: performanceStats.byCategory,
-      difficulties: performanceStats.byDifficulty,
-      performance: {
-        avgLighthouse: performanceStats.avgLighthouse,
-        totalViews: performanceStats.totalViews,
-        totalLikes: performanceStats.totalLikes,
-        totalShares: performanceStats.totalShares
-      }
-    };
-
-    // Cache the results
-    await analyticsCache.setOverallStats(analytics);
-
-    return NextResponse.json(analytics);
-  } catch (error) {
-    console.error('Analytics dashboard error:', error);
-    return NextResponse.json(
-      { error: 'Failed to fetch analytics data' },
-      { status: 500 }
-    );
-  }
-}

app/api/analytics/performance/route.ts

@@ -1,77 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { prisma } from '@/lib/prisma';
-import { requireSessionAuth } from '@/lib/auth';
-
-export async function GET(request: NextRequest) {
-  try {
-    // Check admin authentication - for admin dashboard requests, we trust the session
-    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    if (!isAdminRequest) {
-      const authError = requireSessionAuth(request);
-      if (authError) {
-        return authError;
-      }
-    }
-
-    // Get performance data from database
-    const pageViews = await prisma.pageView.findMany({
-      orderBy: { timestamp: 'desc' },
-      take: 1000 // Last 1000 page views
-    });
-
-    const userInteractions = await prisma.userInteraction.findMany({
-      orderBy: { timestamp: 'desc' },
-      take: 1000 // Last 1000 interactions
-    });
-
-    // Calculate performance metrics
-    const performance = {
-      pageViews: {
-        total: pageViews.length,
-        last24h: pageViews.filter(pv => {
-          const dayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
-          return new Date(pv.timestamp) > dayAgo;
-        }).length,
-        last7d: pageViews.filter(pv => {
-          const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
-          return new Date(pv.timestamp) > weekAgo;
-        }).length,
-        last30d: pageViews.filter(pv => {
-          const monthAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
-          return new Date(pv.timestamp) > monthAgo;
-        }).length
-      },
-      interactions: {
-        total: userInteractions.length,
-        last24h: userInteractions.filter(ui => {
-          const dayAgo = new Date(Date.now() - 24 * 60 * 60 * 1000);
-          return new Date(ui.timestamp) > dayAgo;
-        }).length,
-        last7d: userInteractions.filter(ui => {
-          const weekAgo = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000);
-          return new Date(ui.timestamp) > weekAgo;
-        }).length,
-        last30d: userInteractions.filter(ui => {
-          const monthAgo = new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);
-          return new Date(ui.timestamp) > monthAgo;
-        }).length
-      },
-      topPages: pageViews.reduce((acc, pv) => {
-        acc[pv.page] = (acc[pv.page] || 0) + 1;
-        return acc;
-      }, {} as Record<string, number>),
-      topInteractions: userInteractions.reduce((acc, ui) => {
-        acc[ui.type] = (acc[ui.type] || 0) + 1;
-        return acc;
-      }, {} as Record<string, number>)
-    };
-
-    return NextResponse.json(performance);
-  } catch (error) {
-    console.error('Performance analytics error:', error);
-    return NextResponse.json(
-      { error: 'Failed to fetch performance data' },
-      { status: 500 }
-    );
-  }
-}

app/api/analytics/reset/route.ts

@@ -1,199 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { prisma } from '@/lib/prisma';
-import { analyticsCache } from '@/lib/redis';
-import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
-
-export async function POST(request: NextRequest) {
-  try {
-    // Rate limiting
-    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
-    if (!checkRateLimit(ip, 3, 300000)) { // 3 requests per 5 minutes - more restrictive for reset
-      return new NextResponse(
-        JSON.stringify({ error: 'Rate limit exceeded' }), 
-        { 
-          status: 429, 
-          headers: { 
-            'Content-Type': 'application/json',
-            ...getRateLimitHeaders(ip, 3, 300000)
-          } 
-        }
-      );
-    }
-
-    // Check admin authentication
-    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    if (!isAdminRequest) {
-      const authError = requireSessionAuth(request);
-      if (authError) {
-        return authError;
-      }
-    }
-
-    const { type } = await request.json();
-
-    switch (type) {
-      case 'analytics':
-        // Reset all project analytics
-        await prisma.project.updateMany({
-          data: {
-            analytics: {
-              views: 0,
-              likes: 0,
-              shares: 0,
-              comments: 0,
-              bookmarks: 0,
-              clickThroughs: 0,
-              bounceRate: 0,
-              avgTimeOnPage: 0,
-              uniqueVisitors: 0,
-              returningVisitors: 0,
-              conversionRate: 0,
-              socialShares: {
-                twitter: 0,
-                linkedin: 0,
-                facebook: 0,
-                github: 0
-              },
-              deviceStats: {
-                mobile: 0,
-                desktop: 0,
-                tablet: 0
-              },
-              locationStats: {},
-              referrerStats: {},
-              lastUpdated: new Date().toISOString()
-            }
-          }
-        });
-        break;
-
-      case 'pageviews':
-        // Clear PageView table
-        await prisma.pageView.deleteMany({});
-        break;
-
-      case 'interactions':
-        // Clear UserInteraction table
-        await prisma.userInteraction.deleteMany({});
-        break;
-
-      case 'performance':
-        // Reset performance metrics
-        await prisma.project.updateMany({
-          data: {
-            performance: {
-              lighthouse: 0,
-              loadTime: 0,
-              firstContentfulPaint: 0,
-              largestContentfulPaint: 0,
-              cumulativeLayoutShift: 0,
-              totalBlockingTime: 0,
-              speedIndex: 0,
-              accessibility: 0,
-              bestPractices: 0,
-              seo: 0,
-              performanceScore: 0,
-              mobileScore: 0,
-              desktopScore: 0,
-              coreWebVitals: {
-                lcp: 0,
-                fid: 0,
-                cls: 0
-              },
-              lastUpdated: new Date().toISOString()
-            }
-          }
-        });
-        break;
-
-      case 'all':
-        // Reset everything
-        await Promise.all([
-          // Reset analytics
-          prisma.project.updateMany({
-            data: {
-              analytics: {
-                views: 0,
-                likes: 0,
-                shares: 0,
-                comments: 0,
-                bookmarks: 0,
-                clickThroughs: 0,
-                bounceRate: 0,
-                avgTimeOnPage: 0,
-                uniqueVisitors: 0,
-                returningVisitors: 0,
-                conversionRate: 0,
-                socialShares: {
-                  twitter: 0,
-                  linkedin: 0,
-                  facebook: 0,
-                  github: 0
-                },
-                deviceStats: {
-                  mobile: 0,
-                  desktop: 0,
-                  tablet: 0
-                },
-                locationStats: {},
-                referrerStats: {},
-                lastUpdated: new Date().toISOString()
-              }
-            }
-          }),
-          // Reset performance
-          prisma.project.updateMany({
-            data: {
-              performance: {
-                lighthouse: 0,
-                loadTime: 0,
-                firstContentfulPaint: 0,
-                largestContentfulPaint: 0,
-                cumulativeLayoutShift: 0,
-                totalBlockingTime: 0,
-                speedIndex: 0,
-                accessibility: 0,
-                bestPractices: 0,
-                seo: 0,
-                performanceScore: 0,
-                mobileScore: 0,
-                desktopScore: 0,
-                coreWebVitals: {
-                  lcp: 0,
-                  fid: 0,
-                  cls: 0
-                },
-                lastUpdated: new Date().toISOString()
-              }
-            }
-          }),
-          // Clear tracking tables
-          prisma.pageView.deleteMany({}),
-          prisma.userInteraction.deleteMany({})
-        ]);
-        break;
-
-      default:
-        return NextResponse.json(
-          { error: 'Invalid reset type. Use: analytics, pageviews, interactions, performance, or all' },
-          { status: 400 }
-        );
-    }
-
-    // Clear cache
-    await analyticsCache.clearAll();
-
-    return NextResponse.json({ 
-      success: true, 
-      message: `Successfully reset ${type} data`,
-      timestamp: new Date().toISOString()
-    });
-
-  } catch (error) {
-    console.error('Analytics reset error:', error);
-    return NextResponse.json(
-      { error: 'Failed to reset analytics data' },
-      { status: 500 }
-    );
-  }
-}

app/api/analytics/route.ts

@@ -1,51 +0,0 @@
-import { NextRequest, NextResponse } from 'next/server';
-import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
-
-export async function POST(request: NextRequest) {
-  try {
-    // Rate limiting for POST requests
-    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
-    if (!checkRateLimit(ip, 30, 60000)) { // 30 requests per minute for analytics
-      return new NextResponse(
-        JSON.stringify({ error: 'Rate limit exceeded' }), 
-        { 
-          status: 429, 
-          headers: { 
-            'Content-Type': 'application/json',
-            ...getRateLimitHeaders(ip, 30, 60000)
-          } 
-        }
-      );
-    }
-
-    const body = await request.json();
-    
-    // Log performance metrics (you can extend this to store in database)
-    if (process.env.NODE_ENV === 'development') {
-      console.log('Performance Metric:', {
-        timestamp: new Date().toISOString(),
-        ...body,
-      });
-    }
-
-    // You could store this in a database or send to external service
-    // For now, we'll just log it since Umami handles the main analytics
-    
-    return NextResponse.json({ success: true });
-  } catch (error) {
-    if (process.env.NODE_ENV === 'development') {
-      console.error('Analytics API Error:', error);
-    }
-    return NextResponse.json(
-      { error: 'Failed to process analytics data' },
-      { status: 500 }
-    );
-  }
-}
-
-export async function GET() {
-  return NextResponse.json({
-    message: 'Analytics API is running',
-    timestamp: new Date().toISOString(),
-  });
-}

app/api/auth/login/route.ts

@@ -37,7 +37,13 @@ export async function POST(request: NextRequest) {
     }
 
     // Get admin credentials from environment
-    const adminAuth = process.env.ADMIN_BASIC_AUTH || 'admin:default_password_change_me';
+    const adminAuth = process.env.ADMIN_BASIC_AUTH;
+    if (!adminAuth || adminAuth.trim() === '' || adminAuth === 'admin:default_password_change_me') {
+      return new NextResponse(
+        JSON.stringify({ error: 'Admin auth is not configured' }),
+        { status: 503, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
     const [, expectedPassword] = adminAuth.split(':');
 
     // Secure password comparison using constant-time comparison
@@ -48,22 +54,14 @@ export async function POST(request: NextRequest) {
     // Use constant-time comparison to prevent timing attacks
     if (passwordBuffer.length === expectedBuffer.length && 
         crypto.timingSafeEqual(passwordBuffer, expectedBuffer)) {
-      // Generate cryptographically secure session token
+      const { createSessionToken } = await import('@/lib/auth');
-      const timestamp = Date.now();
+      const sessionToken = createSessionToken(request);
-      const randomBytes = crypto.randomBytes(32);
+      if (!sessionToken) {
-      const randomString = randomBytes.toString('hex');
+        return new NextResponse(
-
+          JSON.stringify({ error: 'Session secret not configured' }),
-      // Create session data
+          { status: 503, headers: { 'Content-Type': 'application/json' } }
-      const sessionData = {
+        );
-        timestamp,
+      }
-        random: randomString,
-        ip: ip,
-        userAgent: request.headers.get('user-agent') || 'unknown'
-      };
-
-      // Encode session data (base64 is sufficient for this use case)
-      const sessionJson = JSON.stringify(sessionData);
-      const sessionToken = Buffer.from(sessionJson).toString('base64');
 
       return new NextResponse(
         JSON.stringify({

app/api/auth/validate/route.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
+import { verifySessionToken } from '@/lib/auth';
 
 export async function POST(request: NextRequest) {
   try {
@@ -20,70 +21,26 @@ export async function POST(request: NextRequest) {
       );
     }
 
-    // Decode and validate session token
+    const valid = verifySessionToken(request, sessionToken);
-    try {
+    if (!valid) {
-      const decodedJson = atob(sessionToken);
-      const sessionData = JSON.parse(decodedJson);
-
-      // Validate session data structure
-      if (!sessionData.timestamp || !sessionData.random || !sessionData.ip || !sessionData.userAgent) {
-        return new NextResponse(
-          JSON.stringify({ valid: false, error: 'Invalid session token structure' }),
-          { status: 401, headers: { 'Content-Type': 'application/json' } }
-        );
-      }
-
-      // Check if session is still valid (2 hours)
-      const sessionTime = sessionData.timestamp;
-      const now = Date.now();
-      const sessionDuration = 2 * 60 * 60 * 1000; // 2 hours
-
-      if (now - sessionTime > sessionDuration) {
-        return new NextResponse(
-          JSON.stringify({ valid: false, error: 'Session expired' }),
-          { status: 401, headers: { 'Content-Type': 'application/json' } }
-        );
-      }
-
-      // Validate IP address (optional, but good security practice)
-      const currentIp = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
-      if (sessionData.ip !== currentIp) {
-        // Log potential session hijacking attempt
-        console.warn(`Session IP mismatch: expected ${sessionData.ip}, got ${currentIp}`);
-        return new NextResponse(
-          JSON.stringify({ valid: false, error: 'Session validation failed' }),
-          { status: 401, headers: { 'Content-Type': 'application/json' } }
-        );
-      }
-
-      // Validate User-Agent (optional)
-      const currentUserAgent = request.headers.get('user-agent') || 'unknown';
-      if (sessionData.userAgent !== currentUserAgent) {
-        console.warn(`Session User-Agent mismatch`);
-        return new NextResponse(
-          JSON.stringify({ valid: false, error: 'Session validation failed' }),
-          { status: 401, headers: { 'Content-Type': 'application/json' } }
-        );
-      }
-
       return new NextResponse(
-        JSON.stringify({ valid: true, message: 'Session valid' }),
+        JSON.stringify({ valid: false, error: 'Session expired or invalid' }),
-        {
-          status: 200,
-          headers: {
-            'Content-Type': 'application/json',
-            'X-Content-Type-Options': 'nosniff',
-            'X-Frame-Options': 'DENY',
-            'X-XSS-Protection': '1; mode=block'
-          }
-        }
-      );
-    } catch {
-      return new NextResponse(
-        JSON.stringify({ valid: false, error: 'Invalid session token format' }),
         { status: 401, headers: { 'Content-Type': 'application/json' } }
       );
     }
+
+    return new NextResponse(
+      JSON.stringify({ valid: true, message: 'Session valid' }),
+      {
+        status: 200,
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Content-Type-Options': 'nosniff',
+          'X-Frame-Options': 'DENY',
+          'X-XSS-Protection': '1; mode=block'
+        }
+      }
+    );
   } catch {
     return new NextResponse(
       JSON.stringify({ valid: false, error: 'Internal server error' }),

app/api/book-reviews/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getBookReviews } from '@/lib/directus';
+import { checkRateLimit, getClientIp } from '@/lib/auth';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+const CACHE_TTL = 300; // 5 minutes
+
+/**
+ * GET /api/book-reviews
+ *
+ * Loads Book Reviews from Directus CMS
+ *
+ * Query params:
+ *   - locale: en or de (default: en)
+ */
+export async function GET(request: NextRequest) {
+  // Rate Limit: 60 requests per minute
+  const ip = getClientIp(request);
+  if (!checkRateLimit(ip, 60, 60000)) {
+    return NextResponse.json({ error: 'Rate limit exceeded' }, { status: 429 });
+  }
+
+  try {
+    const { searchParams } = new URL(request.url);
+    const locale = searchParams.get('locale') || 'en';
+
+    const reviews = await getBookReviews(locale);
+
+    if (process.env.NODE_ENV === 'development') {
+      console.log(`[API] Book Reviews geladen für ${locale}:`, reviews?.length || 0);
+    }
+
+    if (reviews && reviews.length > 0) {
+      return NextResponse.json(
+        { bookReviews: reviews, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
+    }
+
+    return NextResponse.json(
+      { bookReviews: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
+
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading book reviews:', error);
+    }
+    return NextResponse.json(
+      { bookReviews: null, error: 'Failed to load book reviews', source: 'error' },
+      { status: 500 }
+    );
+  }
+}

app/api/contacts/[id]/route.tsx

@@ -1,9 +1,7 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { PrismaClient } from '@prisma/client';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
-import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
+import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
-
+import { prisma } from "@/lib/prisma";
-const prisma = new PrismaClient();
 
 export async function PUT(
     request: NextRequest,
@@ -25,6 +23,11 @@ export async function PUT(
             );
         }
 
+        const isAdminRequest = request.headers.get('x-admin-request') === 'true';
+        if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+        const authError = requireSessionAuth(request);
+        if (authError) return authError;
+
         const resolvedParams = await params;
         const id = parseInt(resolvedParams.id);
         const body = await request.json();
@@ -93,6 +96,11 @@ export async function DELETE(
             );
         }
 
+        const isAdminRequest = request.headers.get('x-admin-request') === 'true';
+        if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+        const authError = requireSessionAuth(request);
+        if (authError) return authError;
+
         const resolvedParams = await params;
         const id = parseInt(resolvedParams.id);
 

app/api/contacts/route.ts

@@ -1,12 +1,15 @@
 import { type NextRequest, NextResponse } from "next/server";
-import { PrismaClient } from '@prisma/client';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
-import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
+import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
-
+import { prisma } from '@/lib/prisma';
-const prisma = new PrismaClient();
 
 export async function GET(request: NextRequest) {
     try {
+        const isAdminRequest = request.headers.get('x-admin-request') === 'true';
+        if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+        const authError = requireSessionAuth(request);
+        if (authError) return authError;
+
         const { searchParams } = new URL(request.url);
         const filter = searchParams.get('filter') || 'all';
         const limit = parseInt(searchParams.get('limit') || '50');

app/api/content/page/route.ts

@@ -0,0 +1,61 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getContentByKey } from "@/lib/content";
+import { getContentPage } from "@/lib/directus";
+import { richTextToSafeHtml } from "@/lib/richtext";
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+const CACHE_TTL = 300; // 5 minutes
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const key = searchParams.get("key");
+  const locale = searchParams.get("locale") || "en";
+
+  if (!key) {
+    return NextResponse.json({ error: "key is required" }, { status: 400 });
+  }
+
+  try {
+    // 1) Try Directus first
+    const directusPage = await getContentPage(key, locale);
+    if (directusPage) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const html = directusPage.content ? richTextToSafeHtml(directusPage.content as any) : "";
+      return NextResponse.json(
+        {
+          content: {
+            title: directusPage.title,
+            slug: directusPage.slug,
+            locale: directusPage.locale || locale,
+            content: directusPage.content,
+            html,
+          },
+          source: "directus",
+        },
+        { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
+    }
+
+    // 2) Fallback: PostgreSQL
+    const translation = await getContentByKey({ key, locale });
+    if (!translation) {
+      return NextResponse.json(
+        { content: null },
+        { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
+    }
+    return NextResponse.json(
+      { content: translation, source: "postgresql" },
+      { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
+  } catch (error) {
+    // If DB isn't migrated/available, fail soft so the UI can fall back to next-intl strings.
+    if (process.env.NODE_ENV === "development") {
+      console.warn("Content API failed; returning null content:", error);
+    }
+    return NextResponse.json({ content: null });
+  }
+}
+

app/api/content/pages/route.ts

@@ -0,0 +1,55 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { requireSessionAuth } from "@/lib/auth";
+import { upsertContentByKey } from "@/lib/content";
+
+export async function GET(request: NextRequest) {
+  const isAdminRequest = request.headers.get("x-admin-request") === "true";
+  if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
+  const authError = requireSessionAuth(request);
+  if (authError) return authError;
+
+  const pages = await prisma.contentPage.findMany({
+    orderBy: { key: "asc" },
+    include: {
+      translations: {
+        select: { locale: true, updatedAt: true, title: true, slug: true },
+      },
+    },
+  });
+
+  return NextResponse.json({ pages });
+}
+
+export async function POST(request: NextRequest) {
+  const isAdminRequest = request.headers.get("x-admin-request") === "true";
+  if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
+  const authError = requireSessionAuth(request);
+  if (authError) return authError;
+
+  const body = await request.json();
+  const { key, locale, title, slug, content, metaDescription, keywords } = body as Record<string, unknown>;
+
+  if (!key || typeof key !== "string") {
+    return NextResponse.json({ error: "key is required" }, { status: 400 });
+  }
+  if (!locale || typeof locale !== "string") {
+    return NextResponse.json({ error: "locale is required" }, { status: 400 });
+  }
+  if (!content || typeof content !== "object") {
+    return NextResponse.json({ error: "content (JSON) is required" }, { status: 400 });
+  }
+
+  const saved = await upsertContentByKey({
+    key,
+    locale,
+    title: typeof title === "string" ? title : null,
+    slug: typeof slug === "string" ? slug : null,
+    content,
+    metaDescription: typeof metaDescription === "string" ? metaDescription : null,
+    keywords: typeof keywords === "string" ? keywords : null,
+  });
+
+  return NextResponse.json({ saved });
+}
+

app/api/email/respond/route.tsx

@@ -2,454 +2,221 @@ import { type NextRequest, NextResponse } from "next/server";
 import nodemailer from "nodemailer";
 import SMTPTransport from "nodemailer/lib/smtp-transport";
 import Mail from "nodemailer/lib/mailer";
+import { checkRateLimit, getRateLimitHeaders, getClientIp, requireSessionAuth } from "@/lib/auth";
+
+const B = {
+    siteUrl: "https://dk0.dev",
+    email: "contact@dk0.dev",
+    mint: "#A7F3D0",
+    sky: "#BAE6FD",
+    purple: "#E9D5FF",
+    red: "#EF4444",
+};
+
+function escapeHtml(input: string): string {
+    return input
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+
+function nl2br(input: string): string {
+    return escapeHtml(input).replace(/\r\n|\r|\n/g, "<br>");
+}
+
+function baseEmail(opts: { title: string; preheader: string; bodyHtml: string }): string {
+    const sentAt = new Date().toLocaleString("de-DE", {
+        year: "numeric", month: "long", day: "numeric", hour: "2-digit", minute: "2-digit",
+    });
+
+    return `<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>${escapeHtml(opts.title)}</title>
+</head>
+<body style="margin:0;padding:0;background-color:#0c0c0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;">
+
+  <div style="max-width:600px;margin:0 auto;padding:24px 16px 40px;">
+    <div style="background:#141414;border-radius:24px;overflow:hidden;border:1px solid #222;">
+
+      <!-- Header -->
+      <div style="background:#111;border-bottom:1px solid #1e1e1e;">
+        <div style="height:3px;background:linear-gradient(90deg,${B.mint} 0%,${B.sky} 50%,${B.purple} 100%);"></div>
+        <div style="padding:28px 28px 24px;">
+          <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;">
+            <div>
+              <div style="font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:#555;font-weight:700;margin-bottom:8px;">
+                ${escapeHtml(opts.preheader)} &middot; ${sentAt}
+              </div>
+              <div style="font-size:26px;font-weight:900;color:#f3f4f6;letter-spacing:-0.03em;line-height:1.15;">
+                ${escapeHtml(opts.title)}
+              </div>
+            </div>
+            <div style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:800;color:#374151;flex-shrink:0;padding-top:4px;">
+              dk<span style="color:${B.red};">0</span>.dev
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Body -->
+      <div style="padding:28px;">
+        ${opts.bodyHtml}
+      </div>
+
+      <!-- Footer -->
+      <div style="padding:16px 28px;background:#0c0c0c;border-top:1px solid #1a1a1a;">
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
+          <div style="font-size:11px;color:#374151;">
+            <a href="${B.siteUrl}" style="color:#4b5563;text-decoration:none;">${B.siteUrl}</a>
+          </div>
+          <div style="font-size:11px;color:#374151;">
+            <a href="mailto:${B.email}" style="color:#4b5563;text-decoration:none;">${B.email}</a>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</body>
+</html>`;
+}
+
+function messageCard(label: string, html: string, accentColor: string = B.mint): string {
+    return `
+<div style="background:#0f0f0f;border:1px solid #1e1e1e;border-left:3px solid ${accentColor};border-radius:0 12px 12px 0;overflow:hidden;">
+  <div style="padding:10px 16px;background:#161616;border-bottom:1px solid #1e1e1e;">
+    <span style="font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:#4b5563;">${label}</span>
+  </div>
+  <div style="padding:16px 18px;font-size:15px;line-height:1.75;color:#d1d5db;">${html}</div>
+</div>`;
+}
+
+function ctaButton(text: string, href: string): string {
+    return `
+<div style="margin-top:24px;text-align:center;">
+  <a href="${href}" style="display:inline-block;background:linear-gradient(135deg,${B.mint},${B.sky});color:#111;text-decoration:none;padding:14px 32px;border-radius:12px;font-weight:800;font-size:15px;letter-spacing:-0.01em;">
+    ${text}
+  </a>
+</div>`;
+}
 
-// Email templates with beautiful designs
 const emailTemplates = {
     welcome: {
         subject: "Vielen Dank für deine Nachricht! 👋",
-        template: (name: string, originalMessage: string) => `
+        template: (name: string, originalMessage: string) => {
-            <!DOCTYPE html>
+            const safeName = escapeHtml(name);
-            <html lang="de">
+            return baseEmail({
-            <head>
+                title: `Danke, ${safeName}!`,
-                <meta charset="UTF-8">
+                preheader: "Nachricht erhalten",
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                bodyHtml: `
-                <title>Willkommen - Dennis Konkol</title>
+<p style="font-size:15px;line-height:1.7;color:#d1d5db;margin:0 0 20px;">
-            </head>
+  Hey ${safeName},<br><br>
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+  danke für deine Nachricht — ich habe sie erhalten und melde mich so schnell wie möglich bei dir zurück. 🙌
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+</p>
-                    
+${messageCard("Deine Nachricht", nl2br(originalMessage))}
-                    <!-- Header -->
+${ctaButton("Portfolio ansehen →", B.siteUrl)}`,
-                    <div style="background: linear-gradient(135deg, #10b981 0%, #059669 100%); padding: 40px 30px; text-align: center;">
+            });
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
+        },
-                            👋 Hallo ${name}!
-                        </h1>
-                        <p style="color: #d1fae5; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                            Vielen Dank für deine Nachricht
-                        </p>
-                    </div>
-                    
-                    <!-- Content -->
-                    <div style="padding: 40px 30px;">
-                        
-                        <!-- Welcome Message -->
-                        <div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #bbf7d0;">
-                            <div style="text-align: center; margin-bottom: 20px;">
-                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
-                                    <span style="color: #ffffff; font-size: 24px;">✓</span>
-                                </div>
-                                <h2 style="color: #065f46; margin: 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
-                            </div>
-                            <p style="color: #047857; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
-                                Vielen Dank für deine Nachricht! Ich habe sie erhalten und werde mich so schnell wie möglich bei dir melden.
-                            </p>
-                        </div>
-                        
-                        <!-- Original Message Reference -->
-                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
-                                <span style="width: 6px; height: 6px; background: #6b7280; border-radius: 50%; margin-right: 10px;"></span>
-                                Deine ursprüngliche Nachricht
-                            </h3>
-                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
-                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Next Steps -->
-                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
-                            <h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
-                                🚀 Was passiert als nächstes?
-                            </h3>
-                            <div style="display: grid; gap: 15px;">
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                    <span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">📧</span>
-                                    <div>
-                                        <h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Schnelle Antwort</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Ich antworte normalerweise innerhalb von 24 Stunden</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
-                                    <span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">💼</span>
-                                    <div>
-                                        <h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Projekt-Diskussion</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Gerne besprechen wir dein Projekt im Detail</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
-                                    <span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🤝</span>
-                                    <div>
-                                        <h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Zusammenarbeit</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Lass uns gemeinsam etwas Großartiges schaffen!</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- Portfolio Links -->
-                        <div style="text-align: center; margin-top: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 20px 0; font-size: 18px; font-weight: 600;">Entdecke mehr von mir</h3>
-                            <div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
-                                <a href="https://dk0.dev" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
-                                    🌐 Portfolio
-                                </a>
-                                <a href="https://github.com/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #374151 0%, #111827 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
-                                    💻 GitHub
-                                </a>
-                                <a href="https://linkedin.com/in/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #0077b5 0%, #005885 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
-                                    💼 LinkedIn
-                                </a>
-                            </div>
-                        </div>
-                    </div>
-                    
-                    <!-- Footer -->
-                    <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
-                        <div style="margin-bottom: 15px;">
-                            <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 1px;"></span>
-                        </div>
-                        <p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
-                                <strong>Dennis Konkol</strong> • Software Engineer & Student<br>
-                                <a href="https://dk0.dev" style="color: #10b981; text-decoration: none; font-family: 'Monaco', 'Menlo', 'Consolas', monospace; font-weight: bold;">dk<span style="color: #ef4444;">0</span>.dev</a> • 
-                                <a href="mailto:contact@dk0.dev" style="color: #10b981; text-decoration: none;">contact@dk0.dev</a>
-                        </p>
-                        <p style="color: #9ca3af; margin: 10px 0 0 0; font-size: 12px;">
-                            ${new Date().toLocaleString('de-DE', { 
-                                year: 'numeric', 
-                                month: 'long', 
-                                day: 'numeric', 
-                                hour: '2-digit', 
-                                minute: '2-digit' 
-                            })}
-                        </p>
-                    </div>
-                    
-                </div>
-            </body>
-            </html>
-        `
     },
-    
     project: {
         subject: "Projekt-Anfrage erhalten! 🚀",
-        template: (name: string, originalMessage: string) => `
+        template: (name: string, originalMessage: string) => {
-            <!DOCTYPE html>
+            const safeName = escapeHtml(name);
-            <html lang="de">
+            return baseEmail({
-            <head>
+                title: `Projekt-Anfrage: danke, ${safeName}!`,
-                <meta charset="UTF-8">
+                preheader: "Ich melde mich zeitnah",
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                bodyHtml: `
-                <title>Projekt-Anfrage - Dennis Konkol</title>
+<p style="font-size:15px;line-height:1.7;color:#d1d5db;margin:0 0 20px;">
-            </head>
+  Hey ${safeName},<br><br>
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+  mega — danke für die Projekt-Anfrage! Ich schaue mir alles an und melde mich bald mit Ideen und Rückfragen. 🚀
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+</p>
-                    
+${messageCard("Deine Projekt-Anfrage", nl2br(originalMessage), B.sky)}
-                    <!-- Header -->
+${ctaButton("Mein Portfolio ansehen →", B.siteUrl)}`,
-                    <div style="background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); padding: 40px 30px; text-align: center;">
+            });
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
+        },
-                            🚀 Projekt-Anfrage erhalten!
-                        </h1>
-                        <p style="color: #e9d5ff; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                            Hallo ${name}, lass uns etwas Großartiges schaffen!
-                        </p>
-                    </div>
-                    
-                    <!-- Content -->
-                    <div style="padding: 40px 30px;">
-                        
-                        <!-- Project Message -->
-                        <div style="background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e9d5ff;">
-                            <div style="text-align: center; margin-bottom: 20px;">
-                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
-                                    <span style="color: #ffffff; font-size: 24px;">💼</span>
-                                </div>
-                                <h2 style="color: #6b21a8; margin: 0; font-size: 22px; font-weight: 600;">Bereit für dein Projekt!</h2>
-                            </div>
-                            <p style="color: #7c2d12; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
-                                Vielen Dank für deine Projekt-Anfrage! Ich bin gespannt darauf, mehr über deine Ideen zu erfahren und wie wir sie gemeinsam umsetzen können.
-                            </p>
-                        </div>
-                        
-                        <!-- Original Message -->
-                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
-                                <span style="width: 6px; height: 6px; background: #8b5cf6; border-radius: 50%; margin-right: 10px;"></span>
-                                Deine Projekt-Nachricht
-                            </h3>
-                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #8b5cf6;">
-                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Process Steps -->
-                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
-                            <h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
-                                🎯 Mein Arbeitsprozess
-                            </h3>
-                            <div style="display: grid; gap: 15px;">
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                    <span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">💬</span>
-                                    <div>
-                                        <h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">1. Erstgespräch</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Wir besprechen deine Anforderungen im Detail</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
-                                    <span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">📋</span>
-                                    <div>
-                                        <h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">2. Konzept & Planung</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Ich erstelle ein detailliertes Konzept für dein Projekt</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #10b981;">
-                                    <span style="color: #10b981; font-size: 20px; margin-right: 15px;">⚡</span>
-                                    <div>
-                                        <h4 style="color: #059669; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">3. Entwicklung</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Agile Entwicklung mit regelmäßigen Updates</p>
-                                    </div>
-                                </div>
-                                <div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
-                                    <span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🎉</span>
-                                    <div>
-                                        <h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">4. Launch & Support</h4>
-                                        <p style="color: #4b5563; margin: 0; font-size: 14px;">Deployment und kontinuierlicher Support</p>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        
-                        <!-- CTA -->
-                        <div style="text-align: center; margin-top: 30px;">
-                            <a href="mailto:contact@dk0.dev?subject=Projekt-Diskussion mit ${name}" style="display: inline-block; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
-                                💬 Projekt besprechen
-                            </a>
-                        </div>
-                    </div>
-                    
-                    <!-- Footer -->
-                    <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
-                        <div style="margin-bottom: 15px;">
-                            <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 1px;"></span>
-                        </div>
-                        <p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
-                            <strong>Dennis Konkol</strong> • Software Engineer & Student<br>
-                            <a href="https://dki.one" style="color: #8b5cf6; text-decoration: none;">dki.one</a> • 
-                            <a href="mailto:contact@dk0.dev" style="color: #8b5cf6; text-decoration: none;">contact@dk0.dev</a>
-                        </p>
-                    </div>
-                    
-                </div>
-            </body>
-            </html>
-        `
     },
-    
     quick: {
         subject: "Danke für deine Nachricht! ⚡",
-        template: (name: string, originalMessage: string) => `
+        template: (name: string, originalMessage: string) => {
-            <!DOCTYPE html>
+            const safeName = escapeHtml(name);
-            <html lang="de">
+            return baseEmail({
-            <head>
+                title: `Danke, ${safeName}!`,
-                <meta charset="UTF-8">
+                preheader: "Kurze Bestätigung",
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                bodyHtml: `
-                <title>Quick Response - Dennis Konkol</title>
+<p style="font-size:15px;line-height:1.7;color:#d1d5db;margin:0 0 20px;">
-            </head>
+  Hey ${safeName},<br><br>
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+  kurze Bestätigung: deine Nachricht ist angekommen. Ich melde mich bald zurück. ⚡
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+</p>
-                    
+${messageCard("Deine Nachricht", nl2br(originalMessage))}`,
-                    <!-- Header -->
+            });
-                    <div style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); padding: 40px 30px; text-align: center;">
+        },
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
-                            ⚡ Schnelle Antwort!
-                        </h1>
-                        <p style="color: #fef3c7; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                            Hallo ${name}, danke für deine Nachricht!
-                        </p>
-                    </div>
-                    
-                    <!-- Content -->
-                    <div style="padding: 40px 30px;">
-                        
-                        <!-- Quick Response -->
-                        <div style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #fde68a;">
-                            <div style="text-align: center;">
-                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
-                                    <span style="color: #ffffff; font-size: 24px;">⚡</span>
-                                </div>
-                                <h2 style="color: #92400e; margin: 0 0 15px 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
-                                <p style="color: #a16207; margin: 0; line-height: 1.6; font-size: 16px;">
-                                    Vielen Dank für deine Nachricht! Ich werde mich so schnell wie möglich bei dir melden.
-                                </p>
-                            </div>
-                        </div>
-                        
-                        <!-- Original Message -->
-                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
-                                <span style="width: 6px; height: 6px; background: #f59e0b; border-radius: 50%; margin-right: 10px;"></span>
-                                Deine Nachricht
-                            </h3>
-                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #f59e0b;">
-                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Quick Info -->
-                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 25px; border-radius: 12px; border: 1px solid #bfdbfe;">
-                            <h3 style="color: #1e40af; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; text-align: center;">
-                                📞 Kontakt
-                            </h3>
-                            <p style="color: #1e40af; margin: 0; text-align: center; line-height: 1.6; font-size: 14px;">
-                                <strong>E-Mail:</strong> <a href="mailto:contact@dk0.dev" style="color: #1e40af; text-decoration: none;">contact@dk0.dev</a><br>
-                                <strong>Portfolio:</strong> <a href="https://dki.one" style="color: #1e40af; text-decoration: none;">dki.one</a>
-                            </p>
-                        </div>
-                    </div>
-                    
-                    <!-- Footer -->
-                    <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
-                        <div style="margin-bottom: 15px;">
-                            <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 1px;"></span>
-                        </div>
-                        <p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
-                            <strong>Dennis Konkol</strong> • Software Engineer & Student<br>
-                            <a href="https://dki.one" style="color: #f59e0b; text-decoration: none;">dki.one</a>
-                        </p>
-                    </div>
-                    
-                </div>
-            </body>
-            </html>
-        `
     },
     reply: {
         subject: "Antwort auf deine Nachricht 📧",
-        template: (name: string, originalMessage: string) => `
+        template: (name: string, originalMessage: string, responseMessage: string) => {
-            <!DOCTYPE html>
+            const safeName = escapeHtml(name);
-            <html lang="de">
+            return baseEmail({
-            <head>
+                title: `Hey ${safeName}!`,
-                <meta charset="UTF-8">
+                preheader: "Antwort von Dennis",
-                <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                bodyHtml: `
-                <title>Antwort - Dennis Konkol</title>
+<p style="font-size:15px;line-height:1.7;color:#d1d5db;margin:0 0 20px;">
-            </head>
+  Hey ${safeName},<br><br>
-            <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
+  ich habe mir deine Nachricht angeschaut — hier ist meine Antwort:
-                <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
+</p>
-                    
+${messageCard("Antwort von Dennis", nl2br(responseMessage), B.mint)}
-                    <!-- Header -->
+<div style="margin-top:16px;">
-                    <div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); padding: 40px 30px; text-align: center;">
+${messageCard("Deine ursprüngliche Nachricht", nl2br(originalMessage), "#2a2a2a")}
-                        <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
+</div>
-                            📧 Hallo ${name}!
+${ctaButton("Portfolio ansehen →", B.siteUrl)}`,
-                        </h1>
+            });
-                        <p style="color: #dbeafe; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
+        },
-                            Hier ist meine Antwort auf deine Nachricht
+    },
-                        </p>
-                    </div>
-                    
-                    <!-- Content -->
-                    <div style="padding: 40px 30px;">
-                        
-                        <!-- Reply Message -->
-                        <div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #93c5fd;">
-                            <div style="text-align: center; margin-bottom: 20px;">
-                                <div style="width: 60px; height: 60px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
-                                    <span style="color: #ffffff; font-size: 24px;">💬</span>
-                                </div>
-                                <h2 style="color: #1e40af; margin: 0; font-size: 22px; font-weight: 600;">Meine Antwort</h2>
-                            </div>
-                            <div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                <p style="color: #1e40af; margin: 0; line-height: 1.6; font-size: 16px; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Original Message Reference -->
-                        <div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
-                                <span style="width: 6px; height: 6px; background: #6b7280; border-radius: 50%; margin-right: 10px;"></span>
-                                Deine ursprüngliche Nachricht
-                            </h3>
-                            <div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                <p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
-                            </div>
-                        </div>
-                        
-                        <!-- Contact Info -->
-                        <div style="background: #f8fafc; padding: 25px; border-radius: 12px; text-align: center; border: 1px solid #e2e8f0;">
-                            <h3 style="color: #374151; margin: 0 0 15px 0; font-size: 18px; font-weight: 600;">Weitere Fragen?</h3>
-                            <p style="color: #6b7280; margin: 0 0 20px 0; line-height: 1.6;">
-                                Falls du weitere Fragen hast oder mehr über meine Projekte erfahren möchtest, zögere nicht, mir zu schreiben!
-                            </p>
-                            <div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
-                                <a href="https://dki.one" style="display: inline-flex; align-items: center; padding: 12px 24px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500; transition: all 0.2s;">
-                                    🌐 Portfolio besuchen
-                                </a>
-                                <a href="mailto:contact@dk0.dev" style="display: inline-flex; align-items: center; padding: 12px 24px; background: #ffffff; color: #3b82f6; text-decoration: none; border-radius: 8px; font-weight: 500; border: 2px solid #3b82f6; transition: all 0.2s;">
-                                    📧 Direkt antworten
-                                </a>
-                            </div>
-                        </div>
-                        
-                    </div>
-                    
-                    <!-- Footer -->
-                    <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
-                        <p style="color: #6b7280; margin: 0 0 10px 0; font-size: 14px; font-weight: 500;">
-                            <strong>Dennis Konkol</strong> • <a href="https://dki.one" style="color: #3b82f6; text-decoration: none;">dki.one</a>
-                        </p>
-                        <p style="color: #9ca3af; margin: 10px 0 0 0; font-size: 12px;">
-                            ${new Date().toLocaleString('de-DE', { 
-                                year: 'numeric', 
-                                month: 'long', 
-                                day: 'numeric', 
-                                hour: '2-digit', 
-                                minute: '2-digit' 
-                            })}
-                        </p>
-                    </div>
-                    
-                </div>
-            </body>
-            </html>
-        `
-    }
 };
 
 export async function POST(request: NextRequest) {
     try {
+        const isAdminRequest = request.headers.get("x-admin-request") === "true";
+        if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
+        const authError = requireSessionAuth(request);
+        if (authError) return authError;
+
+        const ip = getClientIp(request);
+        if (!checkRateLimit(ip, 10, 60000)) {
+            return NextResponse.json(
+                { error: "Rate limit exceeded" },
+                { status: 429, headers: { ...getRateLimitHeaders(ip, 10, 60000) } },
+            );
+        }
+
         const body = (await request.json()) as {
             to: string;
             name: string;
             template: 'welcome' | 'project' | 'quick' | 'reply';
             originalMessage: string;
+            response?: string;
         };
-        
-        const { to, name, template, originalMessage } = body;
 
-        console.log('📧 Email response request:', { to, name, template, messageLength: originalMessage.length });
+        const { to, name, template, originalMessage, response } = body;
 
-        // Validate input
         if (!to || !name || !template || !originalMessage) {
-            console.error('❌ Validation failed: Missing required fields');
+            return NextResponse.json({ error: "Alle Felder sind erforderlich" }, { status: 400 });
-            return NextResponse.json(
+        }
-                { error: "Alle Felder sind erforderlich" },
+        if (template === "reply" && (!response || !response.trim())) {
-                { status: 400 },
+            return NextResponse.json({ error: "Antworttext ist erforderlich" }, { status: 400 });
-            );
         }
 
-        // Validate email format
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         if (!emailRegex.test(to)) {
-            console.error('❌ Validation failed: Invalid email format');
+            return NextResponse.json({ error: "Ungültige E-Mail-Adresse" }, { status: 400 });
-            return NextResponse.json(
-                { error: "Ungültige E-Mail-Adresse" },
-                { status: 400 },
-            );
         }
 
-        // Check if template exists
         if (!emailTemplates[template]) {
-            console.error('❌ Validation failed: Invalid template');
+            return NextResponse.json({ error: "Ungültiges Template" }, { status: 400 });
-            return NextResponse.json(
-                { error: "Ungültiges Template" },
-                { status: 400 },
-            );
         }
 
         const user = process.env.MY_EMAIL ?? "";
@@ -457,10 +224,7 @@ export async function POST(request: NextRequest) {
 
         if (!user || !pass) {
             console.error("❌ Missing email/password environment variables");
-            return NextResponse.json(
+            return NextResponse.json({ error: "E-Mail-Server nicht konfiguriert" }, { status: 500 });
-                { error: "E-Mail-Server nicht konfiguriert" },
-                { status: 500 },
-            );
         }
 
         const transportOptions: SMTPTransport.Options = {
@@ -468,86 +232,50 @@ export async function POST(request: NextRequest) {
             port: 587,
             secure: false,
             requireTLS: true,
-            auth: {
+            auth: { type: "login", user, pass },
-                type: "login",
-                user,
-                pass,
-            },
             connectionTimeout: 30000,
             greetingTimeout: 30000,
             socketTimeout: 60000,
-            tls: {
+            tls: { rejectUnauthorized: false, ciphers: 'SSLv3' },
-                rejectUnauthorized: false,
-                ciphers: 'SSLv3'
-            }
         };
 
         const transport = nodemailer.createTransport(transportOptions);
 
-        // Verify transport configuration
         try {
             await transport.verify();
-            console.log('✅ SMTP connection verified successfully');
+        } catch {
-        } catch (verifyError) {
+            return NextResponse.json({ error: "E-Mail-Server-Verbindung fehlgeschlagen" }, { status: 500 });
-            console.error('❌ SMTP verification failed:', verifyError);
-            return NextResponse.json(
-                { error: "E-Mail-Server-Verbindung fehlgeschlagen" },
-                { status: 500 },
-            );
         }
 
         const selectedTemplate = emailTemplates[template];
+        const html = template === "reply"
+            ? emailTemplates.reply.template(name, originalMessage, response || "")
+            : emailTemplates[template as Exclude<typeof template, "reply">].template(name, originalMessage);
+
         const mailOptions: Mail.Options = {
             from: `"Dennis Konkol" <${user}>`,
-            to: to,
+            to,
-            replyTo: "contact@dk0.dev",
+            replyTo: B.email,
             subject: selectedTemplate.subject,
-            html: selectedTemplate.template(name, originalMessage),
+            html,
-            text: `
+            text: template === "reply"
-Hallo ${name}!
+                ? `Hey ${name}!\n\nAntwort:\n${response}\n\nDeine ursprüngliche Nachricht:\n${originalMessage}\n\n-- Dennis Konkol\n${B.siteUrl}`
-
+                : `Hey ${name}!\n\nDanke für deine Nachricht:\n${originalMessage}\n\nIch melde mich bald!\n\n-- Dennis Konkol\n${B.siteUrl}`,
-Vielen Dank für deine Nachricht:
-${originalMessage}
-
-Ich werde mich so schnell wie möglich bei dir melden.
-
-Beste Grüße,
-Dennis Konkol
-Software Engineer & Student
-https://dki.one
-contact@dk0.dev
-            `,
         };
 
-        console.log('📤 Sending templated email...');
+        const result = await new Promise<string>((resolve, reject) => {
-        
+            transport.sendMail(mailOptions, (err, info) => {
-        const sendMailPromise = () =>
+                if (!err) resolve(info.response);
-            new Promise<string>((resolve, reject) => {
+                else reject(err.message);
-                transport.sendMail(mailOptions, function (err, info) {
-                    if (!err) {
-                        console.log('✅ Templated email sent successfully:', info.response);
-                        resolve(info.response);
-                    } else {
-                        console.error("❌ Error sending templated email:", err);
-                        reject(err.message);
-                    }
-                });
             });
-
-        const result = await sendMailPromise();
-        console.log('🎉 Templated email process completed successfully');
-        
-        return NextResponse.json({ 
-            message: "Template-E-Mail erfolgreich gesendet",
-            template: template,
-            messageId: result
         });
-        
+
+        return NextResponse.json({ message: "E-Mail erfolgreich gesendet", template, messageId: result });
+
     } catch (err) {
-        console.error("❌ Unexpected error in templated email API:", err);
+        return NextResponse.json({
-        return NextResponse.json({ 
+            error: "Fehler beim Senden der E-Mail",
-            error: "Fehler beim Senden der Template-E-Mail",
+            details: err instanceof Error ? err.message : 'Unbekannter Fehler',
-            details: err instanceof Error ? err.message : 'Unbekannter Fehler'
         }, { status: 500 });
     }
 }

app/api/email/route.tsx

@@ -2,32 +2,142 @@ import { type NextRequest, NextResponse } from "next/server";
 import nodemailer from "nodemailer";
 import SMTPTransport from "nodemailer/lib/smtp-transport";
 import Mail from "nodemailer/lib/mailer";
-import { PrismaClient } from '@prisma/client';
 import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
+import { prisma } from "@/lib/prisma";
 
-const prisma = new PrismaClient();
-
-// Sanitize input to prevent XSS
 function sanitizeInput(input: string, maxLength: number = 10000): string {
+    return input.slice(0, maxLength).replace(/[<>]/g, '').trim();
+}
+
+function escapeHtml(input: string): string {
     return input
-        .slice(0, maxLength)
+        .replace(/&/g, "&amp;")
-        .replace(/[<>]/g, '') // Remove potential HTML tags
+        .replace(/</g, "&lt;")
-        .trim();
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+
+
+function buildNotificationEmail(opts: {
+    name: string;
+    email: string;
+    subject: string;
+    messageHtml: string;
+    initial: string;
+    replyHref: string;
+    sentAt: string;
+}): string {
+    const { name, email, subject, messageHtml, initial, replyHref, sentAt } = opts;
+    return `<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Neue Kontaktanfrage</title>
+</head>
+<body style="margin:0;padding:0;background-color:#0c0c0c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;">
+
+  <div style="max-width:600px;margin:0 auto;padding:24px 16px 40px;">
+
+    <!-- Card -->
+    <div style="background:#141414;border-radius:24px;overflow:hidden;border:1px solid #222;">
+
+      <!-- Header -->
+      <div style="background:#111;padding:0 0 0 0;border-bottom:1px solid #1e1e1e;">
+        <!-- Gradient bar -->
+        <div style="height:3px;background:linear-gradient(90deg,#a7f3d0 0%,#bae6fd 50%,#e9d5ff 100%);"></div>
+
+        <div style="padding:28px 28px 24px;">
+          <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;">
+            <div>
+              <div style="font-size:10px;letter-spacing:0.15em;text-transform:uppercase;color:#555;font-weight:700;margin-bottom:8px;">
+                dk0.dev · Portfolio Kontakt
+              </div>
+              <div style="font-size:26px;font-weight:900;color:#f3f4f6;letter-spacing:-0.03em;line-height:1.15;">
+                Neue Kontaktanfrage
+              </div>
+              <div style="margin-top:6px;font-size:13px;color:#4b5563;">
+                ${escapeHtml(sentAt)}
+              </div>
+            </div>
+            <div style="font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;font-weight:800;color:#374151;flex-shrink:0;padding-top:4px;">
+              dk<span style="color:#ef4444;">0</span>.dev
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Sender -->
+      <div style="padding:24px 28px;border-bottom:1px solid #1e1e1e;">
+        <div style="display:flex;align-items:center;gap:16px;">
+          <!-- Avatar -->
+          <div style="width:52px;height:52px;border-radius:16px;background:linear-gradient(135deg,#a7f3d0,#bae6fd);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;color:#111;flex-shrink:0;">
+            ${escapeHtml(initial)}
+          </div>
+          <div style="min-width:0;">
+            <div style="font-size:18px;font-weight:800;color:#f9fafb;letter-spacing:-0.02em;">${escapeHtml(name)}</div>
+            <div style="font-size:13px;color:#6b7280;margin-top:3px;">${escapeHtml(email)}</div>
+          </div>
+        </div>
+
+        <!-- Subject pill -->
+        <div style="margin-top:16px;">
+          <span style="display:inline-flex;align-items:center;gap:7px;background:#1c1c1c;border:1px solid #2a2a2a;border-radius:100px;padding:6px 14px;">
+            <span style="width:6px;height:6px;border-radius:50%;background:#a7f3d0;display:inline-block;flex-shrink:0;"></span>
+            <span style="font-size:13px;font-weight:600;color:#d1d5db;">${escapeHtml(subject)}</span>
+          </span>
+        </div>
+      </div>
+
+      <!-- Message -->
+      <div style="padding:24px 28px;border-bottom:1px solid #1e1e1e;">
+        <div style="font-size:10px;letter-spacing:0.14em;text-transform:uppercase;font-weight:700;color:#4b5563;margin-bottom:12px;">
+          Nachricht
+        </div>
+        <div style="background:#0f0f0f;border:1px solid #1e1e1e;border-left:3px solid #a7f3d0;border-radius:0 12px 12px 0;padding:18px 20px;font-size:15px;line-height:1.75;color:#d1d5db;">
+          ${messageHtml}
+        </div>
+      </div>
+
+      <!-- CTA -->
+      <div style="padding:24px 28px;border-bottom:1px solid #1e1e1e;">
+        <a href="${escapeHtml(replyHref)}"
+           style="display:block;text-align:center;background:linear-gradient(135deg,#a7f3d0,#bae6fd);color:#111;text-decoration:none;padding:14px 24px;border-radius:12px;font-weight:800;font-size:15px;letter-spacing:-0.01em;">
+          Direkt antworten &rarr;
+        </a>
+        <div style="margin-top:10px;text-align:center;font-size:12px;color:#374151;">
+          Oder einfach auf diese E-Mail antworten — Reply-To ist bereits gesetzt.
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div style="padding:16px 28px;background:#0c0c0c;">
+        <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;">
+          <div style="font-size:11px;color:#374151;">
+            Automatisch generiert &middot; <a href="https://dk0.dev" style="color:#4b5563;text-decoration:none;">dk0.dev</a>
+          </div>
+          <div style="font-size:11px;color:#374151;">
+            contact@dk0.dev
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</body>
+</html>`;
 }
 
 export async function POST(request: NextRequest) {
     try {
-        // Rate limiting (defensive: headers may be undefined in tests)
         const ip = request.headers?.get?.('x-forwarded-for') ?? request.headers?.get?.('x-real-ip') ?? 'unknown';
-        if (!checkRateLimit(ip, 5, 60000)) { // 5 emails per minute per IP
+        if (!checkRateLimit(ip, 5, 60000)) {
             return NextResponse.json(
                 { error: 'Zu viele Anfragen. Bitte versuchen Sie es später erneut.' },
-                { 
+                {
                     status: 429,
-                    headers: {
+                    headers: { 'Content-Type': 'application/json', ...getRateLimitHeaders(ip, 5, 60000) },
-                        'Content-Type': 'application/json',
-                        ...getRateLimitHeaders(ip, 5, 60000)
-                    }
                 }
             );
         }
@@ -38,310 +148,126 @@ export async function POST(request: NextRequest) {
             subject: string;
             message: string;
         };
-        
+
-        // Sanitize and validate input
         const email = sanitizeInput(body.email || '', 255);
         const name = sanitizeInput(body.name || '', 100);
         const subject = sanitizeInput(body.subject || '', 200);
         const message = sanitizeInput(body.message || '', 5000);
 
-        // Email request received
-
-        // Validate input
         if (!email || !name || !subject || !message) {
-            console.error('❌ Validation failed: Missing required fields');
+            return NextResponse.json({ error: "Alle Felder sind erforderlich" }, { status: 400 });
-            return NextResponse.json(
-                { error: "Alle Felder sind erforderlich" },
-                { status: 400 },
-            );
         }
 
-        // Validate email format
         const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
         if (!emailRegex.test(email)) {
-            console.error('❌ Validation failed: Invalid email format');
+            return NextResponse.json({ error: "Ungültige E-Mail-Adresse" }, { status: 400 });
-            return NextResponse.json(
-                { error: "Ungültige E-Mail-Adresse" },
-                { status: 400 },
-            );
         }
 
-        // Validate message length
         if (message.length < 10) {
-            console.error('❌ Validation failed: Message too short');
+            return NextResponse.json({ error: "Nachricht muss mindestens 10 Zeichen lang sein" }, { status: 400 });
-            return NextResponse.json(
-                { error: "Nachricht muss mindestens 10 Zeichen lang sein" },
-                { status: 400 },
-            );
         }
 
-        // Validate field lengths
         if (name.length > 100 || subject.length > 200 || message.length > 5000) {
-            return NextResponse.json(
+            return NextResponse.json({ error: "Eingabe zu lang" }, { status: 400 });
-                { error: "Eingabe zu lang" },
-                { status: 400 },
-            );
         }
 
         const user = process.env.MY_EMAIL ?? "";
         const pass = process.env.MY_PASSWORD ?? "";
 
-        console.log('🔑 Environment check:', { 
-            hasEmail: !!user, 
-            hasPassword: !!pass,
-            emailHost: user.split('@')[1] || 'unknown'
-        });
-
         if (!user || !pass) {
             console.error("❌ Missing email/password environment variables");
-            return NextResponse.json(
+            return NextResponse.json({ error: "E-Mail-Server nicht konfiguriert" }, { status: 500 });
-                { error: "E-Mail-Server nicht konfiguriert" },
-                { status: 500 },
-            );
         }
 
         const transportOptions: SMTPTransport.Options = {
             host: "mail.dk0.dev",
             port: 587,
-            secure: false, // Port 587 uses STARTTLS, not SSL/TLS
+            secure: false,
             requireTLS: true,
-            auth: {
+            auth: { type: "login", user, pass },
-                type: "login",
+            connectionTimeout: 30000,
-                user,
+            greetingTimeout: 30000,
-                pass,
+            socketTimeout: 60000,
-            },
+            tls:
-            // Increased timeout settings for better reliability
+                process.env.SMTP_ALLOW_INSECURE_TLS === "true" || process.env.SMTP_ALLOW_SELF_SIGNED === "true"
-            connectionTimeout: 30000, // 30 seconds
+                    ? { rejectUnauthorized: false }
-            greetingTimeout: 30000,   // 30 seconds
+                    : { rejectUnauthorized: true, minVersion: "TLSv1.2" },
-            socketTimeout: 60000,     // 60 seconds
-            // Additional TLS options for better compatibility
-            tls: {
-                rejectUnauthorized: false, // Allow self-signed certificates
-                ciphers: 'SSLv3'
-            }
         };
 
-        // Creating transport with configured options
-
         const transport = nodemailer.createTransport(transportOptions);
 
-        // Verify transport configuration with retry logic
         let verificationAttempts = 0;
-        const maxVerificationAttempts = 3;
+        while (verificationAttempts < 3) {
-        let verificationSuccess = false;
-
-        while (verificationAttempts < maxVerificationAttempts && !verificationSuccess) {
             try {
                 verificationAttempts++;
                 await transport.verify();
-                verificationSuccess = true;
+                break;
             } catch (verifyError) {
                 if (process.env.NODE_ENV === 'development') {
                     console.error(`SMTP verification attempt ${verificationAttempts} failed:`, verifyError);
                 }
-                
+                if (verificationAttempts >= 3) {
-                if (verificationAttempts >= maxVerificationAttempts) {
+                    return NextResponse.json({ error: "E-Mail-Server-Verbindung fehlgeschlagen" }, { status: 500 });
-                    if (process.env.NODE_ENV === 'development') {
-                        console.error('All SMTP verification attempts failed');
-                    }
-                    return NextResponse.json(
-                        { error: "E-Mail-Server-Verbindung fehlgeschlagen" },
-                        { status: 500 },
-                    );
                 }
-                
-                // Wait before retry
                 await new Promise(resolve => setTimeout(resolve, 2000));
             }
         }
 
+        const sentAt = new Date().toLocaleString('de-DE', {
+            year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
+        });
+
+        const initial = (name.trim()[0] || "?").toUpperCase();
+        const replyHref = `mailto:${email}?subject=${encodeURIComponent(`Re: ${subject}`)}`;
+        const messageHtml = escapeHtml(message).replace(/\n/g, "<br>");
+
         const mailOptions: Mail.Options = {
             from: `"Portfolio Contact" <${user}>`,
-            to: "contact@dk0.dev", // Send to your contact email
+            to: "contact@dk0.dev",
             replyTo: email,
-            subject: `Portfolio Kontakt: ${subject}`,
+            subject: `📬 Neue Anfrage: ${subject}`,
-            html: `
+            html: buildNotificationEmail({ name, email, subject, messageHtml, initial, replyHref, sentAt }),
-                <!DOCTYPE html>
+            text: `Neue Kontaktanfrage\n\nVon: ${name} (${email})\nBetreff: ${subject}\n\n${message}\n\n---\nEingegangen: ${sentAt}`,
-                <html lang="de">
-                <head>
-                    <meta charset="UTF-8">
-                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-                    <title>Neue Kontaktanfrage - Portfolio</title>
-                </head>
-                <body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
-                    <div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
-                        
-                        <!-- Header -->
-                        <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
-                            <h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
-                                📧 Neue Kontaktanfrage
-                            </h1>
-                            <p style="color: #e2e8f0; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
-                                Von deinem Portfolio
-                            </p>
-                        </div>
-                        
-                        <!-- Content -->
-                        <div style="padding: 40px 30px;">
-                            
-                            <!-- Contact Info Card -->
-                            <div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
-                                <div style="display: flex; align-items: center; margin-bottom: 20px;">
-                                    <div style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
-                                        <span style="color: #ffffff; font-size: 20px; font-weight: bold;">${name.charAt(0).toUpperCase()}</span>
-                                    </div>
-                                    <div>
-                                        <h2 style="color: #1e293b; margin: 0; font-size: 24px; font-weight: 600;">${name}</h2>
-                                        <p style="color: #64748b; margin: 4px 0 0 0; font-size: 14px;">Kontaktanfrage</p>
-                                    </div>
-                                </div>
-                                
-                                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
-                                    <div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
-                                        <h4 style="color: #059669; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">E-Mail</h4>
-                                        <p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${email}</p>
-                                    </div>
-                                    <div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
-                                        <h4 style="color: #2563eb; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Betreff</h4>
-                                        <p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${subject}</p>
-                                    </div>
-                                </div>
-                            </div>
-                            
-                            <!-- Message Card -->
-                            <div style="background: #ffffff; padding: 30px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);">
-                                <div style="display: flex; align-items: center; margin-bottom: 20px;">
-                                    <div style="width: 8px; height: 8px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin-right: 12px;"></div>
-                                    <h3 style="color: #1e293b; margin: 0; font-size: 18px; font-weight: 600;">Nachricht</h3>
-                                </div>
-                                <div style="background: #f8fafc; padding: 25px; border-radius: 8px; border-left: 4px solid #667eea;">
-                                    <p style="color: #374151; margin: 0; line-height: 1.7; font-size: 16px; white-space: pre-wrap;">${message}</p>
-                                </div>
-                            </div>
-                            
-                            <!-- Action Button -->
-                            <div style="text-align: center; margin-top: 30px;">
-                                <a href="mailto:${email}?subject=Re: ${subject}" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transition: all 0.2s;">
-                                    📬 Antworten
-                                </a>
-                            </div>
-                        </div>
-                        
-                        <!-- Footer -->
-                        <div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
-                            <div style="margin-bottom: 15px;">
-                                <span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 1px;"></span>
-                            </div>
-                            <p style="color: #64748b; margin: 0; font-size: 14px; line-height: 1.5;">
-                                Diese E-Mail wurde automatisch von deinem Portfolio generiert.<br>
-                                <strong>Dennis Konkol Portfolio</strong> • <a href="https://dki.one" style="color: #667eea; text-decoration: none;">dki.one</a>
-                            </p>
-                            <p style="color: #94a3b8; margin: 10px 0 0 0; font-size: 12px;">
-                                ${new Date().toLocaleString('de-DE', { 
-                                    year: 'numeric', 
-                                    month: 'long', 
-                                    day: 'numeric', 
-                                    hour: '2-digit', 
-                                    minute: '2-digit' 
-                                })}
-                            </p>
-                        </div>
-                        
-                    </div>
-                </body>
-                </html>
-            `,
-            text: `
-Neue Kontaktanfrage von deinem Portfolio
-
-Von: ${name} (${email})
-Betreff: ${subject}
-
-Nachricht:
-${message}
-
----
-Diese E-Mail wurde automatisch von deinem Portfolio generiert.
-            `,
         };
 
-        // Sending email
-        
-        // Email sending with retry logic
         let sendAttempts = 0;
-        const maxSendAttempts = 3;
-        let sendSuccess = false;
         let result = '';
 
-        while (sendAttempts < maxSendAttempts && !sendSuccess) {
+        while (sendAttempts < 3) {
             try {
                 sendAttempts++;
-                // Email send attempt
+                result = await new Promise<string>((resolve, reject) => {
-                
+                    transport.sendMail(mailOptions, (err, info) => {
-                const sendMailPromise = () =>
+                        if (!err) resolve(info.response);
-                    new Promise<string>((resolve, reject) => {
+                        else {
-                        transport.sendMail(mailOptions, function (err, info) {
+                            if (process.env.NODE_ENV === 'development') console.error("Error sending email:", err);
-                            if (!err) {
+                            reject(err.message);
-                                // Email sent successfully
+                        }
-                                resolve(info.response);
-                            } else {
-                                if (process.env.NODE_ENV === 'development') {
-                                    console.error("Error sending email:", err);
-                                }
-                                reject(err.message);
-                            }
-                        });
                     });
-
+                });
-                result = await sendMailPromise();
+                break;
-                sendSuccess = true;
-                // Email process completed successfully
             } catch (sendError) {
-                if (process.env.NODE_ENV === 'development') {
+                if (sendAttempts >= 3) {
-                    console.error(`Email send attempt ${sendAttempts} failed:`, sendError);
+                    throw new Error(`Failed to send email after 3 attempts: ${sendError}`);
                 }
-                
-                if (sendAttempts >= maxSendAttempts) {
-                    if (process.env.NODE_ENV === 'development') {
-                        console.error('All email send attempts failed');
-                    }
-                    throw new Error(`Failed to send email after ${maxSendAttempts} attempts: ${sendError}`);
-                }
-                
-                // Wait before retry
                 await new Promise(resolve => setTimeout(resolve, 3000));
             }
         }
-        
+
-        // Save contact to database
+        // Save to DB
         try {
-            await prisma.contact.create({
+            await prisma.contact.create({ data: { name, email, subject, message, responded: false } });
-                data: {
-                    name,
-                    email,
-                    subject,
-                    message,
-                    responded: false
-                }
-            });
-            // Contact saved to database
         } catch (dbError) {
-            if (process.env.NODE_ENV === 'development') {
+            if (process.env.NODE_ENV === 'development') console.error('Error saving contact to DB:', dbError);
-                console.error('Error saving contact to database:', dbError);
-            }
-            // Don't fail the email send if DB save fails
         }
-        
+
-        return NextResponse.json({ 
+        return NextResponse.json({ message: "E-Mail erfolgreich gesendet", messageId: result });
-            message: "E-Mail erfolgreich gesendet",
+
-            messageId: result
-        });
-        
     } catch (err) {
         console.error("❌ Unexpected error in email API:", err);
-        return NextResponse.json({ 
+        return NextResponse.json({
             error: "Fehler beim Senden der E-Mail",
-            details: err instanceof Error ? err.message : 'Unbekannter Fehler'
+            details: err instanceof Error ? err.message : 'Unbekannter Fehler',
         }, { status: 500 });
     }
 }

app/api/fetchAllProjects/route.tsx

@@ -1,66 +1,58 @@
 import { NextResponse } from "next/server";
 import NodeCache from "node-cache";
-
+import { prisma } from "@/lib/prisma";
-// Use a dynamic import for node-fetch so tests that mock it (via jest.mock) are respected
-async function getFetch() {
-  try {
-    const mod = await import("node-fetch");
-    // support both CJS and ESM interop
-    return (mod as { default: unknown }).default ?? mod;
-  } catch (_err) {
-    return globalThis.fetch;
-  }
-}
 
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = process.env.GHOST_API_URL;
-const GHOST_API_KEY = process.env.GHOST_API_KEY;
 const cache = new NodeCache({ stdTTL: 300 }); // Cache für 5 Minuten
 
-type GhostPost = {
+type LegacyPost = {
   slug: string;
   id: string;
   title: string;
-  feature_image: string;
+  meta_description: string | null;
-  visibility: string;
-  published_at: string;
   updated_at: string;
-  html: string;
-  reading_time: number;
-  meta_description: string;
 };
 
-type GhostPostsResponse = {
+type LegacyPostsResponse = {
-  posts: Array<GhostPost>;
+  posts: Array<LegacyPost>;
 };
 
 export async function GET() {
-  const cacheKey = "ghostPosts";
+  const cacheKey = "projects:legacyPosts";
-  const cachedPosts = cache.get<GhostPostsResponse>(cacheKey);
+  const cachedPosts = cache.get<LegacyPostsResponse>(cacheKey);
 
   if (cachedPosts) {
     return NextResponse.json(cachedPosts);
   }
 
   try {
-    const fetchFn = await getFetch();
+    const projects = await prisma.project.findMany({
-    const response = await (fetchFn as unknown as typeof fetch)(
+      where: { published: true },
-      `${GHOST_API_URL}/ghost/api/content/posts/?key=${GHOST_API_KEY}&limit=all`,
+      orderBy: { updatedAt: "desc" },
-    );
+      select: {
-    const posts: GhostPostsResponse =
+        id: true,
-      (await response.json()) as GhostPostsResponse;
+        slug: true,
+        title: true,
+        updatedAt: true,
+        metaDescription: true,
+      },
+    });
 
-    if (!posts || !posts.posts) {
+    const payload: LegacyPostsResponse = {
-      console.error("Invalid posts data");
+      posts: projects.map((p) => ({
-      return NextResponse.json([]);
+        id: String(p.id),
-    }
+        slug: p.slug,
+        title: p.title,
+        meta_description: p.metaDescription ?? null,
+        updated_at: (p.updatedAt ?? new Date()).toISOString(),
+      })),
+    };
 
-    cache.set(cacheKey, posts); // Daten im Cache speichern
+    cache.set(cacheKey, payload);
-
+    return NextResponse.json(payload);
-    return NextResponse.json(posts);
   } catch (error) {
-    console.error("Failed to fetch posts from Ghost:", error);
+    console.error("Failed to fetch projects:", error);
     return NextResponse.json(
       { error: "Failed to fetch projects" },
       { status: 500 },

app/api/fetchProject/route.tsx

@@ -1,10 +1,8 @@
 import { NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
 
 export const runtime = "nodejs"; // Force Node runtime
 
-const GHOST_API_URL = process.env.GHOST_API_URL;
-const GHOST_API_KEY = process.env.GHOST_API_KEY;
-
 export async function GET(request: Request) {
   const { searchParams } = new URL(request.url);
   const slug = searchParams.get("slug");
@@ -14,59 +12,37 @@ export async function GET(request: Request) {
   }
 
   try {
-    // Debug: show whether fetch is present/mocked
+    const project = await prisma.project.findUnique({
+      where: { slug },
+      select: {
+        id: true,
+        slug: true,
+        title: true,
+        updatedAt: true,
+        metaDescription: true,
+        description: true,
+        content: true,
+      },
+    });
 
-    /* eslint-disable @typescript-eslint/no-explicit-any */
+    if (!project) {
-    console.log(
+      return NextResponse.json({ posts: [] }, { status: 200 });
-      "DEBUG fetch in fetchProject:",
-      typeof (globalThis as any).fetch,
-      "globalIsMock:",
-      !!(globalThis as any).fetch?._isMockFunction,
-    );
-
-    // Try global fetch first (as tests often mock it). If it fails or returns undefined,
-    // fall back to dynamically importing node-fetch.
-    let response: any;
-
-    if (typeof (globalThis as any).fetch === "function") {
-      try {
-        response = await (globalThis as any).fetch(
-          `${GHOST_API_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_API_KEY}`,
-        );
-      } catch (_e) {
-        response = undefined;
-      }
     }
 
-    if (!response || typeof response.ok === "undefined") {
+    // Legacy shape (Ghost-like) for compatibility with older frontend/tests.
-      try {
+    return NextResponse.json({
-        const mod = await import("node-fetch");
+      posts: [
-        const nodeFetch = (mod as any).default ?? mod;
+        {
-        response = await (nodeFetch as any)(
+          id: String(project.id),
-          `${GHOST_API_URL}/ghost/api/content/posts/slug/${slug}/?key=${GHOST_API_KEY}`,
+          title: project.title,
-        );
+          meta_description: project.metaDescription ?? project.description ?? "",
-      } catch (_err) {
+          slug: project.slug,
-        response = undefined;
+          updated_at: (project.updatedAt ?? new Date()).toISOString(),
-      }
+        },
-    }
+      ],
-    /* eslint-enable @typescript-eslint/no-explicit-any */
+    });
-
-    // Debug: inspect the response returned from the fetch
-
-    // Debug: inspect the response returned from the fetch
-
-    console.log("DEBUG fetch response:", response);
-
-    if (!response || !response.ok) {
-      throw new Error(
-        `Failed to fetch post: ${response?.statusText ?? "no response"}`,
-      );
-    }
-
-    const post = await response.json();
-    return NextResponse.json(post);
   } catch (error) {
-    console.error("Failed to fetch post from Ghost:", error);
+    console.error("Failed to fetch project:", error);
     return NextResponse.json(
       { error: "Failed to fetch project" },
       { status: 500 },

app/api/hobbies/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getHobbies } from '@/lib/directus';
+import { checkRateLimit, getClientIp } from '@/lib/auth';
+
+export const runtime = 'nodejs';
+export const revalidate = 300;
+
+const CACHE_TTL = 300; // 5 minutes
+
+/**
+ * GET /api/hobbies
+ * 
+ * Loads Hobbies from Directus with fallback to static data
+ * 
+ * Query params:
+ *   - locale: en or de (default: en)
+ */
+export async function GET(request: NextRequest) {
+  // Rate Limit: 60 requests per minute
+  const ip = getClientIp(request);
+  if (!checkRateLimit(ip, 60, 60000)) {
+    return NextResponse.json({ error: 'Rate limit exceeded' }, { status: 429 });
+  }
+
+  try {
+    const { searchParams } = new URL(request.url);
+    const locale = searchParams.get('locale') || 'en';
+
+    // Try to load from Directus
+    const hobbies = await getHobbies(locale);
+
+    if (hobbies && hobbies.length > 0) {
+      return NextResponse.json(
+        { hobbies, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
+    }
+
+    // Fallback: return empty (component will use hardcoded fallback)
+    return NextResponse.json(
+      { hobbies: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
+
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading hobbies:', error);
+    }
+    return NextResponse.json(
+      { hobbies: null, error: 'Failed to load hobbies', source: 'error' },
+      { status: 500 }
+    );
+  }
+}

app/api/i18n/[namespace]/route.ts

@@ -0,0 +1,84 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getLocalizedMessage } from '@/lib/i18n-loader';
+import enMessages from '@/messages/en.json';
+import deMessages from '@/messages/de.json';
+
+// Cache für 5 Minuten
+export const revalidate = 300;
+
+const messagesMap = { en: enMessages, de: deMessages };
+
+/**
+ * GET /api/i18n/[namespace]?locale=en
+ * Lädt alle Keys eines Namespace aus Directus oder JSON
+ */
+export async function GET(
+  req: NextRequest,
+  { params }: { params: Promise<{ namespace: string }> }
+) {
+  const { namespace } = await params;
+  const locale = req.nextUrl.searchParams.get('locale') || 'en';
+
+  // Normalize locale (de-DE -> de)
+  const normalizedLocale = locale.startsWith('de') ? 'de' : 'en';
+
+  try {
+    // Hole alle Keys aus JSON für diesen Namespace
+    const jsonData = messagesMap[normalizedLocale as 'en' | 'de'];
+    const namespaceData = getNestedValue(jsonData, namespace);
+
+    if (!namespaceData || typeof namespaceData !== 'object') {
+      return NextResponse.json({}, { status: 200 });
+    }
+
+    // Flatten das Objekt zu flachen Keys
+    const flatKeys = flattenObject(namespaceData as Record<string, unknown>);
+    
+    // Lade jeden Key aus Directus (mit Fallback auf JSON)
+    const result: Record<string, string> = {};
+    
+    await Promise.all(
+      Object.entries(flatKeys).map(async ([key, jsonValue]) => {
+        const fullKey = `${namespace}.${key}`;
+        const value = await getLocalizedMessage(fullKey, locale);
+        result[key] = value || String(jsonValue);
+      })
+    );
+
+    return NextResponse.json(result, {
+      headers: {
+        'Cache-Control': 'public, s-maxage=300, stale-while-revalidate=600',
+      },
+    });
+  } catch (error) {
+    console.error('i18n API error:', error);
+    return NextResponse.json({ error: 'Failed to load translations' }, { status: 500 });
+  }
+}
+
+// Helper: Holt verschachtelte Werte aus Objekt
+function getNestedValue(obj: Record<string, unknown>, path: string): unknown {
+  return path.split('.').reduce<unknown>((current, key) => {
+    if (current && typeof current === 'object' && key in current) {
+      return (current as Record<string, unknown>)[key];
+    }
+    return undefined;
+  }, obj);
+}
+
+// Helper: Flatten verschachteltes Objekt zu flachen Keys
+function flattenObject(obj: Record<string, unknown>, prefix = ''): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(obj)) {
+    const newKey = prefix ? `${prefix}.${key}` : key;
+    
+    if (value && typeof value === 'object' && !Array.isArray(value)) {
+      Object.assign(result, flattenObject(value as Record<string, unknown>, newKey));
+    } else {
+      result[newKey] = String(value);
+    }
+  }
+
+  return result;
+}

app/api/messages/route.ts

@@ -0,0 +1,19 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getMessages } from "@/lib/directus";
+
+const CACHE_TTL = 300; // 5 minutes
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const locale = searchParams.get("locale") || "en";
+
+  try {
+    const messages = await getMessages(locale);
+    return NextResponse.json(
+      { messages },
+      { headers: { "Cache-Control": `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
+  } catch {
+    return NextResponse.json({ messages: {} }, { status: 500 });
+  }
+}

app/api/n8n/chat/route.ts

@@ -1,9 +1,21 @@
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
+import { decodeHtmlEntitiesServer } from "@/lib/html-decode";
 
-export async function POST(request: Request) {
+export async function POST(request: NextRequest) {
   let userMessage = "";
 
   try {
+    // Rate limiting for n8n chat endpoint
+    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    const { checkRateLimit } = await import('@/lib/auth');
+    
+    if (!checkRateLimit(ip, 20, 60000)) { // 20 requests per minute for chat
+      return NextResponse.json(
+        { error: 'Rate limit exceeded. Please try again later.' },
+        { status: 429 }
+      );
+    }
+
     const json = await request.json();
     userMessage = json.message;
     const history = json.history || [];
@@ -18,65 +30,199 @@ export async function POST(request: Request) {
     // Call your n8n chat webhook
     const n8nWebhookUrl = process.env.N8N_WEBHOOK_URL;
 
-    if (!n8nWebhookUrl) {
+    if (!n8nWebhookUrl || n8nWebhookUrl.trim() === '') {
-      console.error("N8N_WEBHOOK_URL not configured");
+      console.error("N8N_WEBHOOK_URL not configured. Environment check:", {
+        hasUrl: !!process.env.N8N_WEBHOOK_URL,
+        urlValue: process.env.N8N_WEBHOOK_URL || '(empty)',
+        nodeEnv: process.env.NODE_ENV,
+      });
       return NextResponse.json({
         reply: getFallbackResponse(userMessage),
       });
     }
 
-    console.log(`Sending to n8n: ${n8nWebhookUrl}/webhook/chat`);
+    // Ensure URL doesn't have trailing slash before adding /webhook/chat
-
+    const baseUrl = n8nWebhookUrl.replace(/\/$/, '');
-    const response = await fetch(`${n8nWebhookUrl}/webhook/chat`, {
+    const webhookUrl = `${baseUrl}/webhook/chat`;
-      method: "POST",
+    if (process.env.NODE_ENV === 'development') {
-      headers: {
+      console.log(`Sending to n8n: ${webhookUrl}`, {
-        "Content-Type": "application/json",
+        hasSecretToken: !!process.env.N8N_SECRET_TOKEN,
-        ...(process.env.N8N_API_KEY && {
+        hasApiKey: !!process.env.N8N_API_KEY,
-          Authorization: `Bearer ${process.env.N8N_API_KEY}`,
+      });
-        }),
-      },
-      body: JSON.stringify({
-        message: userMessage,
-        history: history,
-      }),
-    });
-    if (!response.ok) {
-      console.error(`n8n webhook failed with status: ${response.status}`);
-      throw new Error(`n8n webhook failed: ${response.status}`);
     }
 
-    const data = await response.json();
+    // Add timeout to prevent hanging requests
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 30000); // 30 second timeout
 
-    console.log("n8n response data:", data);
+    try {
+      const response = await fetch(webhookUrl, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(process.env.N8N_SECRET_TOKEN && {
+            Authorization: `Bearer ${process.env.N8N_SECRET_TOKEN}`,
+          }),
+          ...(process.env.N8N_API_KEY && {
+            "X-API-Key": process.env.N8N_API_KEY,
+          }),
+        },
+        body: JSON.stringify({
+          message: userMessage,
+          history: history,
+        }),
+        signal: controller.signal,
+      });
 
-    const reply =
+      clearTimeout(timeoutId);
-      data.reply ||
+
-      data.message ||
+      if (!response.ok) {
-      data.response ||
+        const errorText = await response.text().catch(() => 'Unknown error');
-      data.text ||
+        if (process.env.NODE_ENV === 'development') {
-      data.content ||
+          console.error(`n8n webhook failed with status: ${response.status}`, {
-      (Array.isArray(data) && data[0]?.reply);
+            status: response.status,
+            statusText: response.statusText,
+            error: errorText,
+            webhookUrl: webhookUrl.replace(/\/\/[^:]+:[^@]+@/, '//***:***@'), // Hide credentials in logs
+          });
+        }
+        throw new Error(`n8n webhook failed: ${response.status} - ${errorText.substring(0, 200)}`);
+      }
+
+      const data = await response.json();
+
+      if (process.env.NODE_ENV === 'development') {
+        console.log("n8n response data (full):", JSON.stringify(data, null, 2));
+        console.log("n8n response data type:", typeof data);
+        console.log("n8n response is array:", Array.isArray(data));
+      }
+
+    // Try multiple ways to extract the reply
+    let reply: string | undefined = undefined;
+
+    // Direct fields
+    if (data.reply) reply = data.reply;
+    else if (data.message) reply = data.message;
+    else if (data.response) reply = data.response;
+    else if (data.text) reply = data.text;
+    else if (data.content) reply = data.content;
+    else if (data.answer) reply = data.answer;
+    else if (data.output) reply = data.output;
+    else if (data.result) reply = data.result;
+    
+    // Array handling
+    else if (Array.isArray(data) && data.length > 0) {
+      const firstItem = data[0];
+      if (typeof firstItem === 'string') {
+        reply = firstItem;
+      } else if (typeof firstItem === 'object') {
+        reply = firstItem.reply || firstItem.message || firstItem.response || 
+                firstItem.text || firstItem.content || firstItem.answer ||
+                firstItem.output || firstItem.result;
+      }
+    }
+    
+    // Nested structures (common in n8n)
+    else if (data && typeof data === "object") {
+      // Check nested data field
+      if (data.data) {
+        if (typeof data.data === 'string') {
+          reply = data.data;
+        } else if (typeof data.data === 'object') {
+          reply = data.data.reply || data.data.message || data.data.response ||
+                  data.data.text || data.data.content || data.data.answer;
+        }
+      }
+      
+      // Check nested json field
+      if (!reply && data.json) {
+        if (typeof data.json === 'string') {
+          reply = data.json;
+        } else if (typeof data.json === 'object') {
+          reply = data.json.reply || data.json.message || data.json.response ||
+                  data.json.text || data.json.content || data.json.answer;
+        }
+      }
+      
+      // Check items array (n8n often wraps in items)
+      if (!reply && Array.isArray(data.items) && data.items.length > 0) {
+        const firstItem = data.items[0];
+        if (typeof firstItem === 'string') {
+          reply = firstItem;
+        } else if (typeof firstItem === 'object') {
+          reply = firstItem.reply || firstItem.message || firstItem.response ||
+                  firstItem.text || firstItem.content || firstItem.answer ||
+                  firstItem.json?.reply || firstItem.json?.message;
+        }
+      }
+      
+      // Last resort: if it's a single string value object, try to extract
+      if (!reply && Object.keys(data).length === 1) {
+        const value = Object.values(data)[0];
+        if (typeof value === 'string') {
+          reply = value;
+        }
+      }
+      
+      // If still no reply but data exists, stringify it (for debugging)
+      if (!reply && Object.keys(data).length > 0) {
+        console.warn("n8n response structure not recognized, attempting to extract any string value");
+        // Try to find any string value in the object
+        const findStringValue = (obj: unknown): string | undefined => {
+          if (typeof obj === 'string' && obj.length > 0) return obj;
+          if (Array.isArray(obj) && obj.length > 0) {
+            return findStringValue(obj[0]);
+          }
+          if (obj && typeof obj === 'object' && obj !== null) {
+            const objRecord = obj as Record<string, unknown>;
+            for (const key of ['reply', 'message', 'response', 'text', 'content', 'answer', 'output', 'result']) {
+              if (objRecord[key] && typeof objRecord[key] === 'string') {
+                return objRecord[key] as string;
+              }
+            }
+            // Recursively search
+            for (const value of Object.values(objRecord)) {
+              const found = findStringValue(value);
+              if (found) return found;
+            }
+          }
+          return undefined;
+        };
+        reply = findStringValue(data);
+      }
+    }
 
     if (!reply) {
-      console.warn("n8n response missing reply field:", data);
+      console.error("n8n response missing reply field. Full response:", JSON.stringify(data, null, 2));
-      // If n8n returns successfully but without a clear reply field,
+      throw new Error("Invalid response format from n8n - no reply field found");
-      // we might want to show the fallback or a generic error,
-      // but strictly speaking we shouldn't show "Couldn't process".
-      // Let's try to stringify the whole data if it's small, or use fallback.
-      if (data && typeof data === "object" && Object.keys(data).length > 0) {
-        // It returned something, but we don't know what field to use.
-        // Check for common n8n structure
-        if (data.output) return NextResponse.json({ reply: data.output });
-        if (data.data) return NextResponse.json({ reply: data.data });
-      }
-      throw new Error("Invalid response format from n8n");
     }
 
-    return NextResponse.json({
+      // Decode HTML entities in the reply
-      reply: reply,
+      const decodedReply = decodeHtmlEntitiesServer(String(reply));
-    });
+
-  } catch (error) {
+      return NextResponse.json({
+        reply: decodedReply,
+      });
+    } catch (fetchError: unknown) {
+      clearTimeout(timeoutId);
+      
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error("n8n webhook request timed out");
+      } else {
+        console.error("n8n webhook fetch error:", fetchError);
+      }
+      throw fetchError;
+    }
+  } catch (error: unknown) {
     console.error("Chat API error:", error);
+    console.error("Error details:", {
+      message: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+      n8nUrl: process.env.N8N_WEBHOOK_URL ? `configured (${process.env.N8N_WEBHOOK_URL})` : 'missing',
+      hasSecretToken: !!process.env.N8N_SECRET_TOKEN,
+      hasApiKey: !!process.env.N8N_API_KEY,
+      nodeEnv: process.env.NODE_ENV,
+    });
 
     // Fallback to mock responses
     // Now using the variable captured at the start

app/api/n8n/generate-image/route.ts

@@ -1,4 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
 
 /**
  * POST /api/n8n/generate-image
@@ -13,6 +14,24 @@ import { NextRequest, NextResponse } from "next/server";
  */
 export async function POST(req: NextRequest) {
   try {
+    // Rate limiting for n8n endpoints
+    const ip = req.headers.get('x-forwarded-for') || req.headers.get('x-real-ip') || 'unknown';
+    const { checkRateLimit } = await import('@/lib/auth');
+    
+    if (!checkRateLimit(ip, 10, 60000)) { // 10 requests per minute
+      return NextResponse.json(
+        { error: 'Rate limit exceeded. Please try again later.' },
+        { status: 429 }
+      );
+    }
+
+    // Require admin authentication for n8n endpoints
+    const { requireAdminAuth } = await import('@/lib/auth');
+    const authError = requireAdminAuth(req);
+    if (authError) {
+      return authError;
+    }
+
     const body = await req.json();
     const { projectId, regenerate = false } = body;
 
@@ -39,23 +58,16 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    // Fetch project data first (needed for the new webhook format)
+    const projectIdNum = typeof projectId === "string" ? parseInt(projectId, 10) : Number(projectId);
-    const projectResponse = await fetch(
+    if (!Number.isFinite(projectIdNum)) {
-      `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"}/api/projects/${projectId}`,
+      return NextResponse.json({ error: "projectId must be a number" }, { status: 400 });
-      {
-        method: "GET",
-        cache: "no-store",
-      },
-    );
-
-    if (!projectResponse.ok) {
-      return NextResponse.json(
-        { error: "Project not found" },
-        { status: 404 },
-      );
     }
 
-    const project = await projectResponse.json();
+    // Fetch project data directly (avoid HTTP self-calls)
+    const project = await prisma.project.findUnique({ where: { id: projectIdNum } });
+    if (!project) {
+      return NextResponse.json({ error: "Project not found" }, { status: 404 });
+    }
 
     // Optional: Check if project already has an image
     if (!regenerate) {
@@ -65,7 +77,7 @@ export async function POST(req: NextRequest) {
             success: true,
             message:
               "Project already has an image. Use regenerate=true to force regeneration.",
-            projectId: projectId,
+            projectId: projectIdNum,
             existingImageUrl: project.imageUrl,
             regenerated: false,
           },
@@ -88,7 +100,7 @@ export async function POST(req: NextRequest) {
           }),
         },
         body: JSON.stringify({
-          projectId: projectId,
+          projectId: projectIdNum,
           projectData: {
             title: project.title || "Unknown Project",
             category: project.category || "Technology",
@@ -178,22 +190,13 @@ export async function POST(req: NextRequest) {
 
     // If we got an image URL, we should update the project with it
     if (imageUrl) {
-      // Update project with the new image URL
+      try {
-      const updateResponse = await fetch(
+        await prisma.project.update({
-        `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"}/api/projects/${projectId}`,
+          where: { id: projectIdNum },
-        {
+          data: { imageUrl, updatedAt: new Date() },
-          method: "PUT",
+        });
-          headers: {
+      } catch {
-            "Content-Type": "application/json",
+        // Non-fatal: image URL can still be returned to caller
-            "x-admin-request": "true",
-          },
-          body: JSON.stringify({
-            imageUrl: imageUrl,
-          }),
-        },
-      );
-
-      if (!updateResponse.ok) {
         console.warn("Failed to update project with image URL");
       }
     }
@@ -202,7 +205,7 @@ export async function POST(req: NextRequest) {
       {
         success: true,
         message: "AI image generation completed successfully",
-        projectId: projectId,
+        projectId: projectIdNum,
         imageUrl: imageUrl,
         generatedAt: generatedAt,
         fileSize: fileSize,
@@ -239,23 +242,17 @@ export async function GET(req: NextRequest) {
       );
     }
 
-    // Fetch project to check image status
+    const projectIdNum = parseInt(projectId, 10);
-    const projectResponse = await fetch(
+    if (!Number.isFinite(projectIdNum)) {
-      `${process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"}/api/projects/${projectId}`,
+      return NextResponse.json({ error: "projectId must be a number" }, { status: 400 });
-      {
+    }
-        method: "GET",
+    const project = await prisma.project.findUnique({ where: { id: projectIdNum } });
-        cache: "no-store",
+    if (!project) {
-      },
-    );
-
-    if (!projectResponse.ok) {
       return NextResponse.json({ error: "Project not found" }, { status: 404 });
     }
 
-    const project = await projectResponse.json();
-
     return NextResponse.json({
-      projectId: parseInt(projectId),
+      projectId: projectIdNum,
       title: project.title,
       hasImage: !!project.imageUrl,
       imageUrl: project.imageUrl || null,

app/api/n8n/hardcover/currently-reading/route.ts

@@ -0,0 +1,133 @@
+// app/api/n8n/hardcover/currently-reading/route.ts
+import { NextRequest, NextResponse } from "next/server";
+
+// Cache für 5 Minuten, damit wir n8n nicht zuspammen
+// Hardcover-Daten ändern sich nicht so häufig
+export const revalidate = 300;
+
+export async function GET(request: NextRequest) {
+  // Rate limiting for n8n hardcover endpoint
+  const ip =
+    request.headers.get("x-forwarded-for") ||
+    request.headers.get("x-real-ip") ||
+    "unknown";
+  const ua = request.headers.get("user-agent") || "unknown";
+  const { checkRateLimit } = await import('@/lib/auth');
+  
+  // In dev, many requests can share ip=unknown; use UA to avoid a shared bucket.
+  const rateKey =
+    process.env.NODE_ENV === "development" && ip === "unknown"
+      ? `ua:${ua.slice(0, 120)}`
+      : ip;
+  const maxPerMinute = process.env.NODE_ENV === "development" ? 60 : 10;
+
+  if (!checkRateLimit(rateKey, maxPerMinute, 60000, 'n8n-reading')) { // requests per minute
+    return NextResponse.json(
+      { error: 'Rate limit exceeded. Please try again later.' },
+      { status: 429 }
+    );
+  }
+
+  try {
+    // Check if n8n webhook URL is configured
+    const n8nWebhookUrl = process.env.N8N_WEBHOOK_URL;
+    
+    if (!n8nWebhookUrl) {
+      console.warn("N8N_WEBHOOK_URL not configured for hardcover endpoint");
+      // Return fallback if n8n is not configured
+      return NextResponse.json({
+        currentlyReading: null,
+      });
+    }
+
+    // Rufe den n8n Webhook auf
+    // Add timestamp to query to bypass Cloudflare cache
+    const webhookUrl = `${n8nWebhookUrl}/webhook/hardcover/currently-reading?t=${Date.now()}`;
+    if (process.env.NODE_ENV === 'development') {
+      console.log(`Fetching currently reading from: ${webhookUrl}`);
+    }
+
+    // Add timeout to prevent hanging requests
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+
+    try {
+      const res = await fetch(webhookUrl, {
+        method: "GET",
+        headers: {
+          Accept: "application/json",
+          ...(process.env.N8N_SECRET_TOKEN && {
+            Authorization: `Bearer ${process.env.N8N_SECRET_TOKEN}`,
+          }),
+          ...(process.env.N8N_API_KEY && {
+            "X-API-Key": process.env.N8N_API_KEY,
+          }),
+        },
+        next: { revalidate: 300 },
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!res.ok) {
+        const errorText = await res.text().catch(() => 'Unknown error');
+        console.error(`n8n hardcover webhook failed: ${res.status}`, errorText);
+        throw new Error(`n8n error: ${res.status} - ${errorText}`);
+      }
+
+      const raw = await res.text().catch(() => "");
+      if (!raw || !raw.trim()) {
+        throw new Error("Empty response body received from n8n");
+      }
+
+      let data: unknown;
+      try {
+        data = JSON.parse(raw);
+      } catch (_parseError) {
+        // Sometimes upstream sends HTML or a partial response; include a snippet for debugging.
+        const snippet = raw.slice(0, 240);
+        throw new Error(
+          `Invalid JSON from n8n (${res.status}): ${snippet}${raw.length > 240 ? "…" : ""}`,
+        );
+      }
+
+      // n8n gibt oft ein Array zurück: [{...}]. Wir wollen nur das Objekt.
+      const readingData = Array.isArray(data) ? data[0] : data;
+
+      // Safety check: if readingData is still undefined/null (e.g. empty array), use fallback
+      if (!readingData) {
+        throw new Error("Empty data received from n8n");
+      }
+
+      // Ensure currentlyReading has proper structure
+      if (readingData.currentlyReading && typeof readingData.currentlyReading === "object") {
+        // Already properly formatted from n8n
+      } else if (readingData.currentlyReading === null || readingData.currentlyReading === undefined) {
+        // No reading data - keep as null
+        readingData.currentlyReading = null;
+      }
+
+      return NextResponse.json(readingData);
+    } catch (fetchError: unknown) {
+      clearTimeout(timeoutId);
+      
+      if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+        console.error("n8n hardcover webhook request timed out");
+      } else {
+        console.error("n8n hardcover webhook fetch error:", fetchError);
+      }
+      throw fetchError;
+    }
+  } catch (error: unknown) {
+    console.error("Error fetching n8n hardcover data:", error);
+    console.error("Error details:", {
+      message: error instanceof Error ? error.message : String(error),
+      stack: error instanceof Error ? error.stack : undefined,
+      n8nUrl: process.env.N8N_WEBHOOK_URL ? 'configured' : 'missing',
+    });
+    // Leeres Fallback-Objekt, damit die Seite nicht abstürzt
+    return NextResponse.json({
+      currentlyReading: null,
+    });
+  }
+}

app/api/n8n/hardcover/sync-books/route.ts

@@ -0,0 +1,125 @@
+/**
+ * POST /api/n8n/hardcover/sync-books
+ *
+ * Called by an n8n workflow whenever books are finished in Hardcover.
+ * Creates new entries in the Directus book_reviews collection.
+ * Deduplicates by hardcover_id — safe to call repeatedly.
+ *
+ * n8n Workflow setup:
+ *   1. Schedule Trigger (every hour)
+ *   2. HTTP Request → Hardcover GraphQL (query: me { books_read(limit: 20) { ... } })
+ *   3. Code Node → transform to array of HardcoverBook objects
+ *   4. HTTP Request → POST https://dk0.dev/api/n8n/hardcover/sync-books
+ *      Headers: Authorization: Bearer <N8N_SECRET_TOKEN>
+ *      Body: [{ hardcover_id, title, author, image, rating, finished_at }, ...]
+ *
+ * Expected body shape (array or single object):
+ *   {
+ *     hardcover_id: string | number   // Hardcover book ID, used for deduplication
+ *     title: string
+ *     author: string
+ *     image?: string                  // Cover image URL
+ *     rating?: number                 // 1–5
+ *     finished_at?: string            // ISO date string
+ *   }
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getBookReviewByHardcoverId, createBookReview } from '@/lib/directus';
+import { checkRateLimit, getClientIp } from '@/lib/auth';
+
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
+interface HardcoverBook {
+  hardcover_id: string | number;
+  title: string;
+  author: string;
+  image?: string;
+  rating?: number;
+  finished_at?: string;
+}
+
+export async function POST(request: NextRequest) {
+  // Auth: require N8N_SECRET_TOKEN or N8N_API_KEY
+  const authHeader = request.headers.get('Authorization');
+  const apiKeyHeader = request.headers.get('X-API-Key');
+  const validToken = process.env.N8N_SECRET_TOKEN;
+  const validApiKey = process.env.N8N_API_KEY;
+
+  const isAuthenticated =
+    (validToken && authHeader === `Bearer ${validToken}`) ||
+    (validApiKey && apiKeyHeader === validApiKey);
+
+  if (!isAuthenticated) {
+    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+  }
+
+  // Rate limit: max 10 sync requests per minute
+  const ip = getClientIp(request);
+  if (!checkRateLimit(ip, 10, 60000, 'hardcover-sync')) {
+    return NextResponse.json({ error: 'Rate limit exceeded' }, { status: 429 });
+  }
+
+  let books: HardcoverBook[];
+  try {
+    const body = await request.json();
+    books = Array.isArray(body) ? body : [body];
+  } catch {
+    return NextResponse.json({ error: 'Invalid JSON body' }, { status: 400 });
+  }
+
+  if (books.length === 0) {
+    return NextResponse.json({ success: true, created: 0, skipped: 0, errors: 0 });
+  }
+
+  const results = {
+    created: 0,
+    skipped: 0,
+    errors: 0,
+    details: [] as string[],
+  };
+
+  for (const book of books) {
+    if (!book.title || !book.author) {
+      results.errors++;
+      results.details.push(`Skipped (missing title/author): ${JSON.stringify(book).slice(0, 80)}`);
+      continue;
+    }
+
+    const hardcoverId = String(book.hardcover_id);
+
+    // Deduplication: skip if already in Directus
+    const existing = await getBookReviewByHardcoverId(hardcoverId);
+    if (existing) {
+      results.skipped++;
+      results.details.push(`Skipped (exists): "${book.title}"`);
+      continue;
+    }
+
+    // Create new entry in Directus
+    const created = await createBookReview({
+      hardcover_id: hardcoverId,
+      book_title: book.title,
+      book_author: book.author,
+      book_image: book.image,
+      rating: book.rating,
+      finished_at: book.finished_at,
+      status: 'published',
+    });
+
+    if (created) {
+      results.created++;
+      results.details.push(`Created: "${book.title}" → id=${created.id}`);
+    } else {
+      results.errors++;
+      results.details.push(`Error creating: "${book.title}" (Directus unavailable or token missing)`);
+    }
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    console.log('[sync-books]', results);
+  }
+
+  return NextResponse.json({ success: true, source: 'directus', ...results });
+}

app/api/n8n/status/route.ts

@@ -1,15 +1,39 @@
 // app/api/n8n/status/route.ts
-import { NextResponse } from "next/server";
+import { NextRequest, NextResponse } from "next/server";
 
 // Cache für 30 Sekunden, damit wir n8n nicht zuspammen
 export const revalidate = 30;
 
-export async function GET() {
+export async function GET(request: NextRequest) {
+  // Rate limiting for n8n status endpoint
+  const ip =
+    request.headers.get("x-forwarded-for") ||
+    request.headers.get("x-real-ip") ||
+    "unknown";
+  const ua = request.headers.get("user-agent") || "unknown";
+  const { checkRateLimit } = await import('@/lib/auth');
+  
+  // In dev, many requests can share ip=unknown; use UA to avoid a shared bucket.
+  const rateKey =
+    process.env.NODE_ENV === "development" && ip === "unknown"
+      ? `ua:${ua.slice(0, 120)}`
+      : ip;
+  const maxPerMinute = process.env.NODE_ENV === "development" ? 300 : 30;
+
+  if (!checkRateLimit(rateKey, maxPerMinute, 60000, 'n8n-status')) { // requests per minute
+    return NextResponse.json(
+      { error: 'Rate limit exceeded. Please try again later.' },
+      { status: 429 }
+    );
+  }
   try {
     // Check if n8n webhook URL is configured
     const n8nWebhookUrl = process.env.N8N_WEBHOOK_URL;
     
     if (!n8nWebhookUrl) {
+      if (process.env.NODE_ENV === 'development') {
+        console.warn("N8N_WEBHOOK_URL not configured for status endpoint");
+      }
       // Return fallback if n8n is not configured
       return NextResponse.json({
         status: { text: "offline", color: "gray" },
@@ -21,42 +45,93 @@ export async function GET() {
 
     // Rufe den n8n Webhook auf
     // Add timestamp to query to bypass Cloudflare cache
-    const res = await fetch(
+    const statusUrl = `${n8nWebhookUrl}/webhook/denshooter-71242/status?t=${Date.now()}`;
-      `${n8nWebhookUrl}/webhook/denshooter-71242/status?t=${Date.now()}`,
+    if (process.env.NODE_ENV === 'development') {
-      {
+      console.log(`Fetching status from: ${statusUrl}`);
+    }
+
+    // Add timeout to prevent hanging requests
+    const controller = new AbortController();
+    const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
+
+    try {
+      const res = await fetch(statusUrl, {
         method: "GET",
         headers: {
-          "Content-Type": "application/json",
+          // n8n sometimes responds with empty body; we'll parse defensively below.
+          Accept: "application/json",
+          ...(process.env.N8N_SECRET_TOKEN && {
+            Authorization: `Bearer ${process.env.N8N_SECRET_TOKEN}`,
+          }),
         },
         next: { revalidate: 30 },
-      },
+        signal: controller.signal,
-    );
+      });
 
-    if (!res.ok) {
+      clearTimeout(timeoutId);
-      throw new Error(`n8n error: ${res.status}`);
+
+      if (!res.ok) {
+        const errorText = await res.text().catch(() => 'Unknown error');
+        if (process.env.NODE_ENV === 'development') {
+          console.error(`n8n status webhook failed: ${res.status}`, errorText);
+        }
+        throw new Error(`n8n error: ${res.status} - ${errorText}`);
+      }
+
+      const raw = await res.text().catch(() => "");
+      if (!raw || !raw.trim()) {
+        throw new Error("Empty response body received from n8n");
+      }
+
+      let data: unknown;
+      try {
+        data = JSON.parse(raw);
+      } catch (_parseError) {
+        // Sometimes upstream sends HTML or a partial response; include a snippet for debugging.
+        const snippet = raw.slice(0, 240);
+        throw new Error(
+          `Invalid JSON from n8n (${res.status}): ${snippet}${raw.length > 240 ? "…" : ""}`,
+        );
+      }
+
+      // n8n gibt oft ein Array zurück: [{...}]. Wir wollen nur das Objekt.
+      const statusData = Array.isArray(data) ? data[0] : data;
+
+      // Safety check: if statusData is still undefined/null (e.g. empty array), use fallback
+      if (!statusData) {
+        throw new Error("Empty data received from n8n");
+      }
+
+      // Ensure coding object has proper structure
+      if (statusData.coding && typeof statusData.coding === "object") {
+        // Already properly formatted from n8n
+      } else if (statusData.coding === null || statusData.coding === undefined) {
+        // No coding data - keep as null
+        statusData.coding = null;
+      }
+
+      return NextResponse.json(statusData);
+    } catch (fetchError: unknown) {
+      clearTimeout(timeoutId);
+      
+      if (process.env.NODE_ENV === 'development') {
+        if (fetchError instanceof Error && fetchError.name === 'AbortError') {
+          console.error("n8n status webhook request timed out");
+        } else {
+          console.error("n8n status webhook fetch error:", fetchError);
+        }
+      }
+      throw fetchError;
     }
-
+  } catch (error: unknown) {
-    const data = await res.json();
+    if (process.env.NODE_ENV === 'development') {
-
+      console.error("Error fetching n8n status:", error);
-    // n8n gibt oft ein Array zurück: [{...}]. Wir wollen nur das Objekt.
+      console.error("Error details:", {
-    const statusData = Array.isArray(data) ? data[0] : data;
+        message: error instanceof Error ? error.message : String(error),
-
+        stack: error instanceof Error ? error.stack : undefined,
-    // Safety check: if statusData is still undefined/null (e.g. empty array), use fallback
+        n8nUrl: process.env.N8N_WEBHOOK_URL ? 'configured' : 'missing',
-    if (!statusData) {
+      });
-      throw new Error("Empty data received from n8n");
     }
-
-    // Ensure coding object has proper structure
-    if (statusData.coding && typeof statusData.coding === "object") {
-      // Already properly formatted from n8n
-    } else if (statusData.coding === null || statusData.coding === undefined) {
-      // No coding data - keep as null
-      statusData.coding = null;
-    }
-
-    return NextResponse.json(statusData);
-  } catch (error) {
-    console.error("Error fetching n8n status:", error);
     // Leeres Fallback-Objekt, damit die Seite nicht abstürzt
     return NextResponse.json({
       status: { text: "offline", color: "gray" },

app/api/projects/[id]/route.ts

@@ -1,8 +1,9 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 import { apiCache } from '@/lib/cache';
-import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
+import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
+import { generateUniqueSlug } from '@/lib/slug';
 
 export async function GET(
   request: NextRequest,
@@ -11,6 +12,9 @@ export async function GET(
   try {
     const { id: idParam } = await params;
     const id = parseInt(idParam);
+    if (!Number.isFinite(id)) {
+      return NextResponse.json({ error: 'Invalid project id' }, { status: 400 });
+    }
     
     const project = await prisma.project.findUnique({
       where: { id }
@@ -74,18 +78,48 @@ export async function PUT(
         { status: 403 }
       );
     }
+    const authError = requireSessionAuth(request);
+    if (authError) return authError;
 
     const { id: idParam } = await params;
     const id = parseInt(idParam);
+    if (!Number.isFinite(id)) {
+      return NextResponse.json({ error: 'Invalid project id' }, { status: 400 });
+    }
     const data = await request.json();
     
     // Remove difficulty field if it exists (since we're removing it)
-    const { difficulty, ...projectData } = data;
+    const { difficulty, slug, defaultLocale, ...projectData } = data;
+
+    // Keep slug stable by default; only update if explicitly provided,
+    // or if the project currently has no slug (e.g. after migration).
+    const existing = await prisma.project.findUnique({
+      where: { id },
+      select: { slug: true, title: true },
+    });
+
+    const nextSlug =
+      typeof slug === 'string' && slug.trim()
+        ? slug.trim()
+        : existing?.slug?.trim()
+          ? existing.slug
+          : await generateUniqueSlug({
+              base: String(projectData.title || existing?.title || 'project'),
+              isTaken: async (candidate) => {
+                const found = await prisma.project.findUnique({
+                  where: { slug: candidate },
+                  select: { id: true },
+                });
+                return !!found && found.id !== id;
+              },
+            });
     
     const project = await prisma.project.update({
       where: { id },
       data: { 
         ...projectData, 
+        slug: nextSlug,
+        defaultLocale: typeof defaultLocale === 'string' && defaultLocale ? defaultLocale : undefined,
         updatedAt: new Date(),
         // Keep existing difficulty if not provided
         ...(difficulty ? { difficulty } : {})
@@ -147,9 +181,14 @@ export async function DELETE(
         { status: 403 }
       );
     }
+    const authError = requireSessionAuth(request);
+    if (authError) return authError;
 
     const { id: idParam } = await params;
     const id = parseInt(idParam);
+    if (!Number.isFinite(id)) {
+      return NextResponse.json({ error: 'Invalid project id' }, { status: 400 });
+    }
     
     await prisma.project.delete({
       where: { id }

app/api/projects/[id]/translation/route.ts

@@ -0,0 +1,75 @@
+import { NextRequest, NextResponse } from "next/server";
+import { prisma } from "@/lib/prisma";
+import { requireSessionAuth } from "@/lib/auth";
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const isAdminRequest = request.headers.get("x-admin-request") === "true";
+  if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
+  const authError = requireSessionAuth(request);
+  if (authError) return authError;
+
+  const { id: idParam } = await params;
+  const id = parseInt(idParam, 10);
+  if (!Number.isFinite(id)) return NextResponse.json({ error: "Invalid project id" }, { status: 400 });
+
+  const { searchParams } = new URL(request.url);
+  const locale = searchParams.get("locale") || "en";
+
+  const translation = await prisma.projectTranslation.findFirst({
+    where: { projectId: id, locale },
+  });
+
+  return NextResponse.json({ translation });
+}
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  const isAdminRequest = request.headers.get("x-admin-request") === "true";
+  if (!isAdminRequest) return NextResponse.json({ error: "Admin access required" }, { status: 403 });
+  const authError = requireSessionAuth(request);
+  if (authError) return authError;
+
+  const { id: idParam } = await params;
+  const id = parseInt(idParam, 10);
+  if (!Number.isFinite(id)) return NextResponse.json({ error: "Invalid project id" }, { status: 400 });
+
+  const body = (await request.json()) as {
+    locale?: string;
+    title?: string;
+    description?: string;
+    content?: string;
+  };
+
+  const locale = body.locale || "en";
+  const title = body.title?.trim();
+  const description = body.description?.trim();
+  const content = typeof body.content === "string" ? body.content.trim() : undefined;
+
+  if (!title || !description) {
+    return NextResponse.json({ error: "title and description are required" }, { status: 400 });
+  }
+
+  const saved = await prisma.projectTranslation.upsert({
+    where: { projectId_locale: { projectId: id, locale } },
+    create: {
+      projectId: id,
+      locale,
+      title,
+      description,
+      content: content ?? undefined,
+    },
+    update: {
+      title,
+      description,
+      content: content ?? undefined,
+    },
+  });
+
+  return NextResponse.json({ translation: saved });
+}
+

app/api/projects/export/route.ts

@@ -1,18 +1,47 @@
-import { NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from 'next/server';
-import { projectService } from '@/lib/prisma';
+import { prisma, projectService } from '@/lib/prisma';
+import { requireSessionAuth } from '@/lib/auth';
 
-export async function GET() {
+export async function GET(request: NextRequest) {
   try {
-    // Get all projects with full data
+    const isAdminRequest = request.headers.get('x-admin-request') === 'true';
-    const projectsResult = await projectService.getAllProjects();
+    if (!isAdminRequest) return NextResponse.json({ error: 'Admin access required' }, { status: 403 });
+    const authError = requireSessionAuth(request);
+    if (authError) return authError;
+
+    // Projects (with translations)
+    const projectsResult = await projectService.getAllProjects({ limit: 10000 });
     const projects = projectsResult.projects || projectsResult;
+    const projectIds = projects.map((p: { id: number }) => p.id);
+
+    const projectTranslations = await prisma.projectTranslation.findMany({
+      where: { projectId: { in: projectIds } },
+      orderBy: [{ projectId: 'asc' }, { locale: 'asc' }],
+    });
+
+    // CMS content pages (with translations)
+    const contentPages = await prisma.contentPage.findMany({
+      orderBy: { key: 'asc' },
+      include: {
+        translations: {
+          orderBy: { locale: 'asc' },
+        },
+      },
+    });
+
+    const siteSettings = await prisma.siteSettings.findUnique({ where: { id: 1 } });
     
     // Format for export
     const exportData = {
-      version: '1.0',
+      version: '2.0',
       exportDate: new Date().toISOString(),
+      siteSettings,
+      contentPages,
+      projectTranslations,
       projects: projects.map(project => ({
         id: project.id,
+        slug: (project as unknown as { slug?: string }).slug,
+        defaultLocale: (project as unknown as { defaultLocale?: string }).defaultLocale,
         title: project.title,
         description: project.description,
         content: project.content,

app/api/projects/import/route.ts

@@ -1,76 +1,309 @@
-import { NextRequest, NextResponse } from 'next/server';
+import { NextRequest, NextResponse } from "next/server";
-import { projectService } from '@/lib/prisma';
+import { prisma, projectService } from "@/lib/prisma";
+import { requireSessionAuth } from "@/lib/auth";
+import type { Prisma } from "@prisma/client";
+
+type ImportSiteSettings = {
+  defaultLocale?: unknown;
+  locales?: unknown;
+  theme?: unknown;
+};
+
+type ImportContentPageTranslation = {
+  locale?: unknown;
+  title?: unknown;
+  slug?: unknown;
+  content?: unknown;
+  metaDescription?: unknown;
+  keywords?: unknown;
+};
+
+type ImportContentPage = {
+  key?: unknown;
+  status?: unknown;
+  translations?: unknown;
+};
+
+type ImportProject = {
+  id?: unknown;
+  slug?: unknown;
+  defaultLocale?: unknown;
+  title?: unknown;
+  description?: unknown;
+  content?: unknown;
+  tags?: unknown;
+  category?: unknown;
+  featured?: unknown;
+  github?: unknown;
+  live?: unknown;
+  published?: unknown;
+  imageUrl?: unknown;
+  difficulty?: unknown;
+  timeToComplete?: unknown;
+  technologies?: unknown;
+  challenges?: unknown;
+  lessonsLearned?: unknown;
+  futureImprovements?: unknown;
+  demoVideo?: unknown;
+  screenshots?: unknown;
+  colorScheme?: unknown;
+  accessibility?: unknown;
+  performance?: unknown;
+  analytics?: unknown;
+};
+
+type ImportProjectTranslation = {
+  projectId?: unknown;
+  locale?: unknown;
+  title?: unknown;
+  description?: unknown;
+  content?: unknown;
+  metaDescription?: unknown;
+  keywords?: unknown;
+  ogImage?: unknown;
+  schema?: unknown;
+};
+
+type ImportPayload = {
+  projects?: unknown;
+  siteSettings?: unknown;
+  contentPages?: unknown;
+  projectTranslations?: unknown;
+};
+
+function asString(v: unknown): string | null {
+  return typeof v === "string" ? v : null;
+}
+
+function asStringArray(v: unknown): string[] | null {
+  if (!Array.isArray(v)) return null;
+  const allStrings = v.filter((x) => typeof x === "string") as string[];
+  return allStrings.length === v.length ? allStrings : null;
+}
 
 export async function POST(request: NextRequest) {
   try {
-    const body = await request.json();
+    const isAdminRequest = request.headers.get("x-admin-request") === "true";
+    if (!isAdminRequest) {
+      return NextResponse.json({ error: "Admin access required" }, { status: 403 });
+    }
+    const authError = requireSessionAuth(request);
+    if (authError) return authError;
+
+    const body = (await request.json()) as ImportPayload;
     
     // Validate import data structure
-    if (!body.projects || !Array.isArray(body.projects)) {
+    if (!Array.isArray(body.projects)) {
       return NextResponse.json(
-        { error: 'Invalid import data format' },
+        { error: "Invalid import data format" },
-        { status: 400 }
+        { status: 400 },
       );
     }
 
     const results = {
       imported: 0,
       skipped: 0,
-      errors: [] as string[]
+      errors: [] as string[],
     };
 
+    // Import SiteSettings (optional)
+    if (body.siteSettings && typeof body.siteSettings === "object") {
+      try {
+        const ss = body.siteSettings as ImportSiteSettings;
+        const defaultLocale = asString(ss.defaultLocale);
+        const locales = asStringArray(ss.locales);
+        const theme = ss.theme as Prisma.InputJsonValue | undefined;
+
+        await prisma.siteSettings.upsert({
+          where: { id: 1 },
+          create: {
+            id: 1,
+            ...(defaultLocale ? { defaultLocale } : {}),
+            ...(locales ? { locales } : {}),
+            ...(theme ? { theme } : {}),
+          },
+          update: {
+            ...(defaultLocale ? { defaultLocale } : {}),
+            ...(locales ? { locales } : {}),
+            ...(theme ? { theme } : {}),
+          },
+        });
+      } catch {
+        // non-blocking
+      }
+    }
+
+    // Import CMS content pages (optional)
+    if (Array.isArray(body.contentPages)) {
+      for (const page of body.contentPages) {
+        try {
+          const key = asString((page as ImportContentPage)?.key);
+          if (!key) continue;
+          const statusRaw = asString((page as ImportContentPage)?.status);
+          const status = statusRaw === "DRAFT" || statusRaw === "PUBLISHED" ? statusRaw : "PUBLISHED";
+          const upserted = await prisma.contentPage.upsert({
+            where: { key },
+            create: { key, status },
+            update: { status },
+          });
+
+          const translations = (page as ImportContentPage)?.translations;
+          if (Array.isArray(translations)) {
+            for (const tr of translations as ImportContentPageTranslation[]) {
+              const locale = asString(tr?.locale);
+              if (!locale || typeof tr?.content === "undefined" || tr?.content === null) continue;
+              await prisma.contentPageTranslation.upsert({
+                where: { pageId_locale: { pageId: upserted.id, locale } },
+                create: {
+                  pageId: upserted.id,
+                  locale,
+                  title: asString(tr.title),
+                  slug: asString(tr.slug),
+                  content: tr.content as Prisma.InputJsonValue,
+                  metaDescription: asString(tr.metaDescription),
+                  keywords: asString(tr.keywords),
+                },
+                update: {
+                  title: asString(tr.title),
+                  slug: asString(tr.slug),
+                  content: tr.content as Prisma.InputJsonValue,
+                  metaDescription: asString(tr.metaDescription),
+                  keywords: asString(tr.keywords),
+                },
+              });
+            }
+          }
+        } catch (error) {
+          const key = asString((page as ImportContentPage)?.key) ?? "unknown";
+          results.errors.push(
+            `Failed to import content page "${key}": ${error instanceof Error ? error.message : "Unknown error"}`,
+          );
+        }
+      }
+    }
+
+    // Preload existing titles once (avoid O(n^2) DB reads during import)
+    const existingProjectsResult = await projectService.getAllProjects({ limit: 10000 });
+    const existingProjects = existingProjectsResult.projects || existingProjectsResult;
+    const existingTitles = new Set(existingProjects.map(p => p.title));
+    const existingSlugs = new Set(
+      existingProjects
+        .map((p) => (p as unknown as { slug?: string }).slug)
+        .filter((s): s is string => typeof s === "string" && s.length > 0),
+    );
+
     // Process each project
-    for (const projectData of body.projects) {
+    for (const projectData of body.projects as ImportProject[]) {
       try {
         // Check if project already exists (by title)
-        const existingProjectsResult = await projectService.getAllProjects();
+        const title = asString(projectData.title);
-        const existingProjects = existingProjectsResult.projects || existingProjectsResult;
+        if (!title) continue;
-        const exists = existingProjects.some(p => p.title === projectData.title);
+        const exists = existingTitles.has(title);
         
         if (exists) {
           results.skipped++;
-          results.errors.push(`Project "${projectData.title}" already exists`);
+          results.errors.push(`Project "${title}" already exists`);
           continue;
         }
 
         // Create new project
-        await projectService.createProject({
+        const created = await projectService.createProject({
-          title: projectData.title,
+          slug: asString(projectData.slug) ?? undefined,
-          description: projectData.description,
+          defaultLocale: asString(projectData.defaultLocale) ?? "en",
-          content: projectData.content,
+          title,
-          tags: projectData.tags || [],
+          description: asString(projectData.description) ?? "",
-          category: projectData.category,
+          content: projectData.content as Prisma.InputJsonValue | undefined,
-          featured: projectData.featured || false,
+          tags: (asStringArray(projectData.tags) ?? []) as string[],
-          github: projectData.github,
+          category: asString(projectData.category) ?? "General",
-          live: projectData.live,
+          featured: projectData.featured === true,
+          github: asString(projectData.github) ?? undefined,
+          live: asString(projectData.live) ?? undefined,
           published: projectData.published !== false, // Default to true
-          imageUrl: projectData.imageUrl,
+          imageUrl: asString(projectData.imageUrl) ?? undefined,
-          difficulty: projectData.difficulty || 'Intermediate',
+          difficulty: asString(projectData.difficulty) ?? "Intermediate",
-          timeToComplete: projectData.timeToComplete,
+          timeToComplete: asString(projectData.timeToComplete) ?? undefined,
-          technologies: projectData.technologies || [],
+          technologies: (asStringArray(projectData.technologies) ?? []) as string[],
-          challenges: projectData.challenges || [],
+          challenges: (asStringArray(projectData.challenges) ?? []) as string[],
-          lessonsLearned: projectData.lessonsLearned || [],
+          lessonsLearned: (asStringArray(projectData.lessonsLearned) ?? []) as string[],
-          futureImprovements: projectData.futureImprovements || [],
+          futureImprovements: (asStringArray(projectData.futureImprovements) ?? []) as string[],
-          demoVideo: projectData.demoVideo,
+          demoVideo: asString(projectData.demoVideo) ?? undefined,
-          screenshots: projectData.screenshots || [],
+          screenshots: (asStringArray(projectData.screenshots) ?? []) as string[],
-          colorScheme: projectData.colorScheme || 'Dark',
+          colorScheme: asString(projectData.colorScheme) ?? "Dark",
           accessibility: projectData.accessibility !== false, // Default to true
-          performance: projectData.performance || {
+          performance: (projectData.performance as Record<string, unknown> | null) || {
             lighthouse: 0,
-            bundleSize: '0KB',
+            bundleSize: "0KB",
-            loadTime: '0s'
+            loadTime: "0s",
           },
-          analytics: projectData.analytics || {
+          analytics: (projectData.analytics as Record<string, unknown> | null) || {
             views: 0,
             likes: 0,
-            shares: 0
+            shares: 0,
-          }
+          },
         });
 
+        // Import translations (optional, from export v2)
+        if (Array.isArray(body.projectTranslations)) {
+          for (const tr of body.projectTranslations as ImportProjectTranslation[]) {
+            const projectId = typeof tr?.projectId === "number" ? tr.projectId : null;
+            const locale = asString(tr?.locale);
+            if (!projectId || !locale) continue;
+            // Map translation to created project by original slug/title when possible.
+            // We match by slug if available in exported project list; otherwise by title.
+            const exportedProject = (body.projects as ImportProject[]).find(
+              (p) => typeof p.id === "number" && p.id === projectId,
+            );
+            const exportedSlug = asString(exportedProject?.slug);
+            const matches =
+              (exportedSlug && (created as unknown as { slug?: string }).slug === exportedSlug) ||
+              (!!asString(exportedProject?.title) &&
+                (created as unknown as { title?: string }).title === asString(exportedProject?.title));
+            if (!matches) continue;
+
+            const trTitle = asString(tr.title);
+            const trDescription = asString(tr.description);
+            if (!trTitle || !trDescription) continue;
+            await prisma.projectTranslation.upsert({
+              where: {
+                projectId_locale: {
+                  projectId: (created as unknown as { id: number }).id,
+                  locale,
+                },
+              },
+              create: {
+                projectId: (created as unknown as { id: number }).id,
+                locale,
+                title: trTitle,
+                description: trDescription,
+                content: (tr.content as Prisma.InputJsonValue) ?? null,
+                metaDescription: asString(tr.metaDescription),
+                keywords: asString(tr.keywords),
+                ogImage: asString(tr.ogImage),
+                schema: (tr.schema as Prisma.InputJsonValue) ?? null,
+              },
+              update: {
+                title: trTitle,
+                description: trDescription,
+                content: (tr.content as Prisma.InputJsonValue) ?? null,
+                metaDescription: asString(tr.metaDescription),
+                keywords: asString(tr.keywords),
+                ogImage: asString(tr.ogImage),
+                schema: (tr.schema as Prisma.InputJsonValue) ?? null,
+              },
+            });
+          }
+        }
+
         results.imported++;
+        existingTitles.add(title);
+        const slug = asString(projectData.slug);
+        if (slug) existingSlugs.add(slug);
       } catch (error) {
         results.skipped++;
-        results.errors.push(`Failed to import "${projectData.title}": ${error instanceof Error ? error.message : 'Unknown error'}`);
+        const title = asString(projectData.title) ?? "unknown";
+        results.errors.push(
+          `Failed to import "${title}": ${error instanceof Error ? error.message : "Unknown error"}`,
+        );
       }
     }
 
@@ -80,10 +313,10 @@ export async function POST(request: NextRequest) {
       results
     });
   } catch (error) {
-    console.error('Import error:', error);
+    console.error("Import error:", error);
     return NextResponse.json(
-      { error: 'Failed to import projects' },
+      { error: "Failed to import projects" },
-      { status: 500 }
+      { status: 500 },
     );
   }
 }

app/api/projects/route.ts

@@ -1,21 +1,27 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { prisma } from '@/lib/prisma';
 import { apiCache } from '@/lib/cache';
-import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
+import { requireSessionAuth, checkRateLimit, getRateLimitHeaders, getClientIp } from '@/lib/auth';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
+import { generateUniqueSlug } from '@/lib/slug';
+import { getProjects as getDirectusProjects } from '@/lib/directus';
+import { ProjectListItem } from '@/app/_ui/ProjectsPageClient';
 
 export async function GET(request: NextRequest) {
   try {
     // Rate limiting
-    const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
+    const ip = getClientIp(request);
-    if (!checkRateLimit(ip, 10, 60000)) { // 10 requests per minute
+    const rlKey = ip !== "unknown" ? ip : `dev_unknown:${request.headers.get("user-agent") || "ua"}`;
+    // In development we keep this very high to avoid breaking local navigation/HMR.
+    const max = process.env.NODE_ENV === "development" ? 300 : 60;
+    if (!checkRateLimit(rlKey, max, 60000)) {
       return new NextResponse(
         JSON.stringify({ error: 'Rate limit exceeded' }), 
         { 
           status: 429, 
           headers: { 
             'Content-Type': 'application/json',
-            ...getRateLimitHeaders(ip, 10, 60000)
+            ...getRateLimitHeaders(rlKey, max, 60000)
           } 
         }
       );
@@ -30,50 +36,86 @@ export async function GET(request: NextRequest) {
       }
     }
     const { searchParams } = new URL(request.url);
-    const page = parseInt(searchParams.get('page') || '1');
+    const pageRaw = parseInt(searchParams.get('page') || '1');
-    const limit = parseInt(searchParams.get('limit') || '50');
+    const limitRaw = parseInt(searchParams.get('limit') || '50');
+    const page = Number.isFinite(pageRaw) && pageRaw > 0 ? pageRaw : 1;
+    const limit = Number.isFinite(limitRaw) && limitRaw > 0 && limitRaw <= 200 ? limitRaw : 50;
     const category = searchParams.get('category');
     const featured = searchParams.get('featured');
-    const published = searchParams.get('published');
+    const published = searchParams.get('published') === 'false' ? false : true; // Default to true if not specified
     const difficulty = searchParams.get('difficulty');
     const search = searchParams.get('search');
+    const locale = searchParams.get('locale') || 'en';
 
-    // Create cache parameters object
+    // Try Directus FIRST (Primary Source)
-    const cacheParams = {
+    let directusProjects: ProjectListItem[] = [];
-      page: page.toString(),
+    let directusSuccess = false;
-      limit: limit.toString(),
+    try {
-      category,
+      const fetched = await getDirectusProjects(locale, {
-      featured,
+        featured: featured === 'true' ? true : featured === 'false' ? false : undefined,
-      published,
+        published: published,
-      difficulty,
+        category: category || undefined,
-      search
+        difficulty: difficulty || undefined,
-    };
+        search: search || undefined,
+        limit
+      });
 
-    // Check cache first
+      if (fetched) {
-    const cached = await apiCache.getProjects(cacheParams);
+        directusProjects = fetched.map(p => ({
-    if (cached && !search) { // Don't cache search results
+          id: typeof p.id === 'string' ? (parseInt(p.id) || 0) : p.id,
-      return NextResponse.json(cached);
+          slug: p.slug,
+          title: p.title,
+          description: p.description,
+          tags: p.tags || [],
+          category: p.category || '',
+          date: p.created_at,
+          createdAt: p.created_at,
+          imageUrl: p.image_url,
+        }));
+        directusSuccess = true;
+      }
+    } catch {
+      console.log('Directus error, continuing with PostgreSQL fallback');
+    }
+
+    // If Directus returned projects, use them EXCLUSIVELY to avoid showing un-synced local data
+    if (directusSuccess && directusProjects.length > 0) {
+      return NextResponse.json({
+        projects: directusProjects,
+        total: directusProjects.length,
+        source: 'directus'
+      });
+    }
+
+    // Fallback 1: Try PostgreSQL only if Directus failed or is empty
+    try {
+      await prisma.$queryRaw`SELECT 1`;
+    } catch {
+      console.log('PostgreSQL not available');
+      return NextResponse.json({
+        projects: directusProjects, // Might be empty
+        total: directusProjects.length,
+        source: 'directus-empty'
+      });
     }
 
     const skip = (page - 1) * limit;
-
     const where: Record<string, unknown> = {};
     
     if (category) where.category = category;
     if (featured !== null) where.featured = featured === 'true';
-    if (published !== null) where.published = published === 'true';
+    where.published = published;
     if (difficulty) where.difficulty = difficulty;
     
     if (search) {
       where.OR = [
         { title: { contains: search, mode: 'insensitive' } },
         { description: { contains: search, mode: 'insensitive' } },
-        { tags: { hasSome: [search] } },
+        { tags: { hasSome: [search] } }
-        { content: { contains: search, mode: 'insensitive' } }
       ];
     }
 
-    const [projects, total] = await Promise.all([
+    const [dbProjects, total] = await Promise.all([
       prisma.project.findMany({
         where,
         orderBy: { createdAt: 'desc' },
@@ -83,19 +125,31 @@ export async function GET(request: NextRequest) {
       prisma.project.count({ where })
     ]);
 
-    const result = {
+    // Merge logic
-      projects,
+    const dbSlugs = new Set(dbProjects.map(p => p.slug));
-      total,
+    const mergedProjects: ProjectListItem[] = dbProjects.map(p => ({
-      pages: Math.ceil(total / limit),
+      id: p.id,
-      currentPage: page
+      slug: p.slug,
-    };
+      title: p.title,
-
+      description: p.description,
-    // Cache the result (only for non-search queries)
+      tags: p.tags,
-    if (!search) {
+      category: p.category,
-      await apiCache.setProjects(cacheParams, result);
+      date: p.date,
+      createdAt: p.createdAt.toISOString(),
+      imageUrl: p.imageUrl,
+    }));
+    
+    for (const dp of directusProjects) {
+      if (!dbSlugs.has(dp.slug)) {
+        mergedProjects.push(dp);
+      }
     }
 
-    return NextResponse.json(result);
+    return NextResponse.json({
+      projects: mergedProjects,
+      total: total + (mergedProjects.length - dbProjects.length),
+      source: 'merged'
+    });
   } catch (error) {
     // Handle missing database table gracefully
     if (error instanceof PrismaClientKnownRequestError && error.code === 'P2021') {
@@ -145,16 +199,34 @@ export async function POST(request: NextRequest) {
         { status: 403 }
       );
     }
+    const authError = requireSessionAuth(request);
+    if (authError) return authError;
 
     const data = await request.json();
     
     // Remove difficulty field if it exists (since we're removing it)
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { difficulty, ...projectData } = data;
+    const { difficulty, slug, defaultLocale, ...projectData } = data;
+
+    const derivedSlug =
+      typeof slug === 'string' && slug.trim()
+        ? slug.trim()
+        : await generateUniqueSlug({
+            base: String(projectData.title || 'project'),
+            isTaken: async (candidate) => {
+              const existing = await prisma.project.findUnique({
+                where: { slug: candidate },
+                select: { id: true },
+              });
+              return !!existing;
+            },
+          });
     
     const project = await prisma.project.create({
       data: {
         ...projectData,
+        slug: derivedSlug,
+        defaultLocale: typeof defaultLocale === 'string' && defaultLocale ? defaultLocale : undefined,
         // Set default difficulty since it's required in schema
         difficulty: 'INTERMEDIATE',
         performance: data.performance || { lighthouse: 0, bundleSize: '0KB', loadTime: '0s' },

app/api/projects/search/route.ts

@@ -1,5 +1,5 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { prisma } from '@/lib/prisma';
+import { getProjects } from '@/lib/directus';
 
 export async function GET(request: NextRequest) {
   try {
@@ -7,69 +7,27 @@ export async function GET(request: NextRequest) {
     const slug = searchParams.get('slug');
     const search = searchParams.get('search');
     const category = searchParams.get('category');
+    const locale = searchParams.get('locale') || 'en';
 
-    if (slug) {
+    // Use Directus instead of Prisma
-      // Search by slug (convert title to slug format)
+    const projects = await getProjects(locale, {
-      const projects = await prisma.project.findMany({
+      featured: undefined,
-        where: {
+      published: true,
-          published: true
+      category: category && category !== 'All' ? category : undefined,
-        },
+      search: search || undefined,
-        orderBy: { createdAt: 'desc' }
+    });
-      });
 
-      // Find exact match by converting titles to slugs
+    if (!projects) {
-      const foundProject = projects.find(project => {
+      // Directus not available or no projects found
-        const projectSlug = project.title.toLowerCase()
-          .replace(/[^a-z0-9]+/g, '-')
-          .replace(/^-+|-+$/g, '');
-        return projectSlug === slug;
-      });
-
-      if (foundProject) {
-        return NextResponse.json({ projects: [foundProject] });
-      }
-
-      // If no exact match, return empty array
       return NextResponse.json({ projects: [] });
     }
 
-    if (search) {
+    // Filter by slug if provided (since Directus query doesn't support slug filter directly)
-      // General search
+    if (slug) {
-      const projects = await prisma.project.findMany({
+      const project = projects.find(p => p.slug === slug);
-        where: {
+      return NextResponse.json({ projects: project ? [project] : [] });
-          published: true,
-          OR: [
-            { title: { contains: search, mode: 'insensitive' } },
-            { description: { contains: search, mode: 'insensitive' } },
-            { tags: { hasSome: [search] } },
-            { content: { contains: search, mode: 'insensitive' } }
-          ]
-        },
-        orderBy: { createdAt: 'desc' }
-      });
-
-      return NextResponse.json({ projects });
     }
 
-    if (category && category !== 'All') {
-      // Filter by category
-      const projects = await prisma.project.findMany({
-        where: {
-          published: true,
-          category: category
-        },
-        orderBy: { createdAt: 'desc' }
-      });
-
-      return NextResponse.json({ projects });
-    }
-
-    // Return all published projects if no specific search
-    const projects = await prisma.project.findMany({
-      where: { published: true },
-      orderBy: { createdAt: 'desc' }
-    });
-
     return NextResponse.json({ projects });
   } catch (error) {
     console.error('Error searching projects:', error);

app/api/sitemap/route.tsx

@@ -1,164 +1,22 @@
 import { NextResponse } from "next/server";
-
+import { generateSitemapXml, getSitemapEntries } from "@/lib/sitemap";
-interface Project {
-  slug: string;
-  updated_at?: string; // Optional timestamp for last modification
-}
-
-interface ProjectsData {
-  posts: Project[];
-}
 
 export const dynamic = "force-dynamic";
-export const runtime = "nodejs"; // Force Node runtime
+export const runtime = "nodejs";
-
-// Read Ghost API config at runtime, tests may set env vars in beforeAll
-
-// Funktion, um die XML für die Sitemap zu generieren
-function generateXml(sitemapRoutes: { url: string; lastModified: string }[]) {
-  const xmlHeader = '<?xml version="1.0" encoding="UTF-8"?>';
-  const urlsetOpen =
-    '<urlset xmlns="https://www.sitemaps.org/schemas/sitemap/0.9">';
-  const urlsetClose = "</urlset>";
-
-  const urlEntries = sitemapRoutes
-    .map(
-      (route) => `
-    <url>
-      <loc>${route.url}</loc>
-      <lastmod>${route.lastModified}</lastmod>
-      <changefreq>monthly</changefreq>
-      <priority>0.8</priority>
-    </url>`,
-    )
-    .join("");
-
-  return `${xmlHeader}${urlsetOpen}${urlEntries}${urlsetClose}`;
-}
 
 export async function GET() {
-  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL;
+  try {
-
+    const entries = await getSitemapEntries();
-  // Statische Routen
+    const xml = generateSitemapXml(entries);
-  const staticRoutes = [
-    {
-      url: `${baseUrl}/`,
-      lastModified: new Date().toISOString(),
-      priority: 1,
-      changeFreq: "weekly",
-    },
-    {
-      url: `${baseUrl}/legal-notice`,
-      lastModified: new Date().toISOString(),
-      priority: 0.5,
-      changeFreq: "yearly",
-    },
-    {
-      url: `${baseUrl}/privacy-policy`,
-      lastModified: new Date().toISOString(),
-      priority: 0.5,
-      changeFreq: "yearly",
-    },
-  ];
-
-  // In test environment we can short-circuit and use a mocked posts payload
-  if (process.env.NODE_ENV === "test" && process.env.GHOST_MOCK_POSTS) {
-    const mockData = JSON.parse(process.env.GHOST_MOCK_POSTS);
-    const projects = (mockData as ProjectsData).posts || [];
-
-    const sitemapRoutes = projects.map((project) => {
-      const lastModified = project.updated_at || new Date().toISOString();
-      return {
-        url: `${baseUrl}/projects/${project.slug}`,
-        lastModified,
-        priority: 0.8,
-        changeFreq: "monthly",
-      };
-    });
-
-    const allRoutes = [...staticRoutes, ...sitemapRoutes];
-    const xml = generateXml(allRoutes);
-
-    // For tests return a plain object so tests can inspect `.body` easily
-    if (process.env.NODE_ENV === "test") {
-      return new NextResponse(xml, {
-        headers: { "Content-Type": "application/xml" },
-      });
-    }
-
     return new NextResponse(xml, {
       headers: { "Content-Type": "application/xml" },
     });
-  }
-
-  try {
-    // Debug: show whether fetch is present/mocked
-
-    // Try global fetch first (tests may mock global.fetch)
-    let response: Response | undefined;
-
-    try {
-      if (typeof globalThis.fetch === "function") {
-        response = await globalThis.fetch(
-          `${process.env.GHOST_API_URL}/ghost/api/content/posts/?key=${process.env.GHOST_API_KEY}&limit=all`,
-        );
-        // Debug: inspect the result
-
-        console.log("DEBUG sitemap global fetch returned:", response);
-      }
-    } catch (_e) {
-      response = undefined;
-    }
-
-    if (!response || typeof response.ok === "undefined" || !response.ok) {
-      try {
-        const mod = await import("node-fetch");
-        const nodeFetch = mod.default ?? mod;
-        response = await (nodeFetch as unknown as typeof fetch)(
-          `${process.env.GHOST_API_URL}/ghost/api/content/posts/?key=${process.env.GHOST_API_KEY}&limit=all`,
-        );
-      } catch (err) {
-        console.log("Failed to fetch posts from Ghost:", err);
-        return new NextResponse(generateXml(staticRoutes), {
-          headers: { "Content-Type": "application/xml" },
-        });
-      }
-    }
-
-    if (!response || !response.ok) {
-      console.error(
-        `Failed to fetch posts: ${response?.statusText ?? "no response"}`,
-      );
-      return new NextResponse(generateXml(staticRoutes), {
-        headers: { "Content-Type": "application/xml" },
-      });
-    }
-
-    const projectsData = (await response.json()) as ProjectsData;
-
-    const projects = projectsData.posts;
-
-    // Dynamische Projekt-Routen generieren
-    const sitemapRoutes = projects.map((project) => {
-      const lastModified = project.updated_at || new Date().toISOString();
-      return {
-        url: `${baseUrl}/projects/${project.slug}`,
-        lastModified,
-        priority: 0.8,
-        changeFreq: "monthly",
-      };
-    });
-
-    const allRoutes = [...staticRoutes, ...sitemapRoutes];
-
-    // Rückgabe der Sitemap im XML-Format
-    return new NextResponse(generateXml(allRoutes), {
-      headers: { "Content-Type": "application/xml" },
-    });
   } catch (error) {
-    console.log("Failed to fetch posts from Ghost:", error);
+    console.error("Failed to generate sitemap:", error);
-    // Rückgabe der statischen Routen, falls Fehler auftritt
+    // Fail closed: return minimal sitemap
-    return new NextResponse(generateXml(staticRoutes), {
+    const xml = generateSitemapXml([]);
+    return new NextResponse(xml, {
+      status: 500,
       headers: { "Content-Type": "application/xml" },
     });
   }

app/api/snippets/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSnippets } from '@/lib/directus';
+
+const CACHE_TTL = 300; // 5 minutes
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const limit = parseInt(searchParams.get('limit') || '10');
+    const featured = searchParams.get('featured') === 'true' ? true : undefined;
+    
+    const snippets = await getSnippets(limit, featured);
+    
+    return NextResponse.json(
+      { snippets: snippets || [] },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
+  } catch (_error) {
+    return NextResponse.json({ error: 'Failed to fetch snippets' }, { status: 500 });
+  }
+}

app/api/tech-stack/route.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getTechStack } from '@/lib/directus';
+import { checkRateLimit, getClientIp } from '@/lib/auth';
+
+export const runtime = 'nodejs';
+export const revalidate = 300;
+
+const CACHE_TTL = 300; // 5 minutes
+
+/**
+ * GET /api/tech-stack
+ *
+ * Loads Tech Stack from Directus with fallback to static data
+ *
+ * Query params:
+ *   - locale: en or de (default: en)
+ */
+export async function GET(request: NextRequest) {
+  // Rate Limit: 60 requests per minute
+  const ip = getClientIp(request);
+  if (!checkRateLimit(ip, 60, 60000)) {
+    return NextResponse.json({ error: 'Rate limit exceeded' }, { status: 429 });
+  }
+
+  try {
+    const { searchParams } = new URL(request.url);
+    const locale = searchParams.get('locale') || 'en';
+
+    // Try to load from Directus
+    const techStack = await getTechStack(locale);
+
+    if (techStack && techStack.length > 0) {
+      return NextResponse.json(
+        { techStack, source: 'directus' },
+        { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+      );
+    }
+
+    // Fallback: return empty (component will use hardcoded fallback)
+    return NextResponse.json(
+      { techStack: null, source: 'fallback' },
+      { headers: { 'Cache-Control': `public, s-maxage=${CACHE_TTL}, stale-while-revalidate=${CACHE_TTL * 2}` } }
+    );
+
+  } catch (error) {
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error loading tech stack:', error);
+    }
+    return NextResponse.json(
+      { techStack: null, error: 'Failed to load tech stack', source: 'error' },
+      { status: 500 }
+    );
+  }
+}

app/components/About.tsx

@@ -1,241 +1,361 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { motion, Variants } from "framer-motion";
+import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowRight, Tv, Plane, Camera, Stars, Music, Terminal, Cpu } from "lucide-react";
-import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
+import { useLocale, useTranslations } from "next-intl";
+import dynamic from "next/dynamic";
+const RichTextClient = dynamic(() => import("./RichTextClient"), { ssr: false });
+import CurrentlyReading from "./CurrentlyReading";
+import ReadBooks from "./ReadBooks";
+import { motion, AnimatePresence } from "framer-motion";
+import { TechStackCategory, TechStackItem, Hobby, Snippet } from "@/lib/directus";
+import Link from "next/link";
+import ActivityFeed from "./ActivityFeed";
+import BentoChat from "./BentoChat";
+import { Skeleton } from "./ui/Skeleton";
+import { LucideIcon, X, Copy, Check } from "lucide-react";
 
-const staggerContainer: Variants = {
+const iconMap: Record<string, LucideIcon> = {
-  hidden: { opacity: 0 },
+  Globe, Server, Code, Wrench, Shield, Activity, Lightbulb, Gamepad2, BookOpen, Tv, Plane, Camera, Stars, Music, Terminal, Cpu
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.15,
-      delayChildren: 0.2,
-    },
-  },
-};
-
-const fadeInUp: Variants = {
-  hidden: { opacity: 0, y: 30 },
-  visible: {
-    opacity: 1,
-    y: 0,
-    transition: {
-      duration: 1,
-      ease: [0.25, 0.1, 0.25, 1],
-    },
-  },
 };
 
 const About = () => {
-  const [mounted, setMounted] = useState(false);
+  const locale = useLocale();
+  const t = useTranslations("home.about");
+  const [cmsHtml, setCmsHtml] = useState<string | null>(null);
+  const [techStack, setTechStack] = useState<TechStackCategory[]>([]);
+  const [hobbies, setHobbies] = useState<Hobby[]>([]);
+  const [snippets, setSnippets] = useState<Snippet[]>([]);
+  const [selectedSnippet, setSelectedSnippet] = useState<Snippet | null>(null);
+  const [copied, setCopied] = useState(false);
+  const [_cmsMessages, setCmsMessages] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
-    setMounted(true);
+    const fetchData = async () => {
-  }, []);
+      try {
+        const [cmsRes, techRes, hobbiesRes, msgRes, snippetsRes] = await Promise.all([
+          fetch(`/api/content/page?key=home-about&locale=${locale}`),
+          fetch(`/api/tech-stack?locale=${locale}`),
+          fetch(`/api/hobbies?locale=${locale}`),
+          fetch(`/api/messages?locale=${locale}`),
+          fetch(`/api/snippets?limit=3&featured=true`)
+        ]);
+        
+        const cmsData = await cmsRes.json();
+        if (cmsData?.content?.html) setCmsHtml(cmsData.content.html as string);
+        
+        const techData = await techRes.json();
+        if (techData?.techStack) setTechStack(techData.techStack);
+        
+        const hobbiesData = await hobbiesRes.json();
+        if (hobbiesData?.hobbies) setHobbies(hobbiesData.hobbies);
 
-  const techStack = [
+        const msgData = await msgRes.json();
-    {
+        if (msgData?.messages) setCmsMessages(msgData.messages);
-      category: "Frontend & Mobile",
-      icon: Globe,
-      items: ["Next.js", "Tailwind CSS", "Flutter"],
-    },
-    {
-      category: "Backend & DevOps",
-      icon: Server,
-      items: ["Docker Swarm", "Traefik", "Nginx Proxy Manager", "Redis"],
-    },
-    {
-      category: "Tools & Automation",
-      icon: Wrench,
-      items: ["Git", "CI/CD", "n8n", "Self-hosted Services"],
-    },
-    {
-      category: "Security & Admin",
-      icon: Shield,
-      items: ["CrowdSec", "Suricata", "Mailcow"],
-    },
-  ];
 
-  const hobbies: Array<{ icon: typeof Code; text: string }> = [
+        const snippetsData = await snippetsRes.json();
-    { icon: Code, text: "Self-Hosting & DevOps" },
+        if (snippetsData?.snippets) setSnippets(snippetsData.snippets);
-    { icon: Gamepad2, text: "Gaming" },
+      } catch (error) {
-    { icon: Server, text: "Setting up Game Servers" },
+        console.error("About data fetch failed:", error);
-    { icon: Activity, text: "Jogging to clear my mind and stay active" },
+      } finally {
-  ];
+        setIsLoading(false);
+      }
+    };
+    fetchData();
+  }, [locale]);
 
-  if (!mounted) return null;
+  const copyToClipboard = (code: string) => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
 
   return (
-    <section
+    <section id="about" className="py-16 sm:py-24 md:py-32 px-4 sm:px-6 bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
-      id="about"
+      <div className="max-w-7xl mx-auto">
-      className="py-24 px-4 bg-gradient-to-br from-liquid-sky/15 via-liquid-lavender/10 to-liquid-pink/15 relative overflow-hidden"
+
-    >
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6 md:gap-8">
-      <div className="max-w-6xl mx-auto relative z-10">
+          
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-start">
+          {/* 1. Large Bio Text */}
-          {/* Text Content */}
+          <motion.div 
-          <motion.div
+            className="md:col-span-8 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
-            initial="hidden"
-            whileInView="visible"
-            viewport={{ once: true, margin: "-100px" }}
-            variants={staggerContainer}
-            className="space-y-8"
           >
-            <motion.h2
+            <div className="space-y-5 sm:space-y-6 md:space-y-8">
-              variants={fadeInUp}
+              <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase">
-              className="text-4xl md:text-5xl font-bold text-stone-900"
+                {t("title")}<span className="text-emerald-600 dark:text-emerald-400">.</span>
-            >
+              </h2>
-              About Me
+              <div className="prose prose-stone dark:prose-invert max-w-none text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
-            </motion.h2>
+                {isLoading ? (
-            <motion.div
+                  <div className="space-y-3">
-              variants={fadeInUp}
+                    <Skeleton className="h-6 w-full" />
-              className="prose prose-stone prose-lg text-stone-700 space-y-4"
+                    <Skeleton className="h-6 w-[95%]" />
-            >
+                    <Skeleton className="h-6 w-[90%]" />
-              <p>
-                Hi, I&apos;m Dennis – a student and passionate self-hoster based
-                in Osnabrück, Germany.
-              </p>
-              <p>
-                I love building full-stack web applications with{" "}
-                <strong>Next.js</strong> and mobile apps with{" "}
-                <strong>Flutter</strong>. But what really excites me is{" "}
-                <strong>DevOps</strong>: I run my own infrastructure on{" "}
-                <strong>IONOS</strong> and <strong>OVHcloud</strong>, managing
-                everything with <strong>Docker Swarm</strong>,{" "}
-                <strong>Traefik</strong>, and automated CI/CD pipelines with my
-                own runners.
-              </p>
-              <p>
-                When I&apos;m not coding or tinkering with servers, you&apos;ll
-                find me <strong>gaming</strong>, <strong>jogging</strong>, or
-                experimenting with new tech like game servers or automation
-                workflows with <strong>n8n</strong>.
-              </p>
-              <motion.div
-                variants={fadeInUp}
-                className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"
-              >
-                <div className="flex items-start gap-3">
-                  <Lightbulb size={20} className="text-stone-600 flex-shrink-0 mt-0.5" />
-                  <div>
-                    <p className="text-sm font-semibold text-stone-800 mb-1">
-                      Fun Fact
-                    </p>
-                    <p className="text-sm text-stone-700 leading-relaxed">
-                      Even though I automate a lot, I still use pen and paper
-                      for my calendar and notes – it helps me clear my head and
-                      stay focused.
-                    </p>
                   </div>
+                ) : cmsHtml ? (
+                  <RichTextClient html={cmsHtml} />
+                ) : (
+                  <p>{t("p1")} {t("p2")}</p>
+                )}
+              </div>
+              <div className="pt-4 sm:pt-6 md:pt-8">
+                <div className="inline-block bg-stone-50 dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-2xl sm:rounded-3xl border border-stone-100 dark:border-stone-700">
+                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-400 mb-1 sm:mb-2">{t("funFactTitle")}</p>
+                   {isLoading ? <Skeleton className="h-5 w-48" /> : <p className="text-sm sm:text-base font-bold opacity-90">{t("funFactBody")}</p>}
                 </div>
-              </motion.div>
+              </div>
-            </motion.div>
+            </div>
           </motion.div>
 
-          {/* Tech Stack & Hobbies */}
+          {/* 2. Activity / Status Box */}
-          <motion.div
+          <motion.div 
-            initial="hidden"
+            transition={{ delay: 0.1 }}
-            whileInView="visible"
+            className="md:col-span-4 bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white overflow-hidden relative flex flex-col"
-            viewport={{ once: true, margin: "-100px" }}
-            variants={staggerContainer}
-            className="space-y-8"
           >
-            <div>
+            <div className="relative z-10 h-full">
-              <motion.h3
+              <h3 className="text-lg sm:text-xl font-black mb-6 sm:mb-8 md:mb-10 flex items-center gap-2 uppercase tracking-widest text-liquid-mint">
-                variants={fadeInUp}
+                <Activity size={20} /> Status
-                className="text-2xl font-bold text-stone-900 mb-6"
+              </h3>
-              >
+              <ActivityFeed locale={locale} />
-                My Tech Stack
+            </div>
-              </motion.h3>
+            <div className="absolute top-0 right-0 w-40 h-40 bg-liquid-mint/10 blur-[100px] rounded-full" />
-              <div className="grid grid-cols-1 gap-4">
+          </motion.div>
-                {techStack.map((stack, idx) => (
+
-                  <motion.div
+          {/* 3. AI Chat Box */}
-                    key={`${stack.category}-${idx}`}
+          <motion.div 
-                    variants={fadeInUp}
+            transition={{ delay: 0.2 }}
-                    whileHover={{
+            className="md:col-span-12 lg:col-span-4 bg-stone-50 dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 flex flex-col shadow-sm"
-                      scale: 1.02,
+          >
-                      transition: { duration: 0.4, ease: "easeOut" },
+            <div className="flex items-center gap-2 mb-5 sm:mb-8">
-                    }}
+              <MessageSquare className="text-liquid-purple" size={20} />
-                    className={`p-5 rounded-xl border-2 transition-all duration-500 ease-out ${
+              <h3 className="text-xl sm:text-2xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter text-liquid-purple">AI Assistant</h3>
-                      idx === 0
+            </div>
-                        ? "bg-gradient-to-br from-liquid-sky/10 to-liquid-mint/10 border-liquid-sky/30 hover:border-liquid-sky/50 hover:from-liquid-sky/15 hover:to-liquid-mint/15"
+            <div className="flex-1">
-                        : idx === 1
+              <BentoChat />
-                          ? "bg-gradient-to-br from-liquid-peach/10 to-liquid-coral/10 border-liquid-peach/30 hover:border-liquid-peach/50 hover:from-liquid-peach/15 hover:to-liquid-coral/15"
+            </div>
-                          : idx === 2
+          </motion.div>
-                            ? "bg-gradient-to-br from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
+
-                            : "bg-gradient-to-br from-liquid-teal/10 to-liquid-lime/10 border-liquid-teal/30 hover:border-liquid-teal/50 hover:from-liquid-teal/15 hover:to-liquid-lime/15"
+          {/* 4. Tech Stack */}
-                    }`}
+          <motion.div 
-                  >
+            transition={{ delay: 0.3 }}
-                    <div className="flex items-center gap-3 mb-3">
+            className="md:col-span-12 lg:col-span-8 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
-                      <div className="p-2 bg-white rounded-lg shadow-sm text-stone-700">
+          >
-                        <stack.icon size={18} />
+            <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 md:gap-12">
-                      </div>
+              {isLoading ? (
-                      <h4 className="font-semibold text-stone-800">
+                Array.from({ length: 4 }).map((_, i) => (
-                        {stack.category}
+                  <div key={i} className="space-y-6">
-                      </h4>
+                    <Skeleton className="h-3 w-20" />
-                    </div>
                     <div className="flex flex-wrap gap-2">
-                      {stack.items.map((item, itemIdx) => (
+                      <Skeleton className="h-8 w-24 rounded-xl" />
-                        <span
+                      <Skeleton className="h-8 w-16 rounded-xl" />
-                          key={`${stack.category}-${item}-${itemIdx}`}
+                      <Skeleton className="h-8 w-20 rounded-xl" />
-                          className={`px-3 py-1.5 rounded-lg border-2 text-sm text-stone-700 font-medium transition-all duration-400 ease-out ${
+                    </div>
-                            itemIdx % 4 === 0
+                  </div>
-                              ? "bg-liquid-mint/10 border-liquid-mint/30 hover:bg-liquid-mint/20 hover:border-liquid-mint/50"
+                ))
-                              : itemIdx % 4 === 1
+              ) : (
-                                ? "bg-liquid-lavender/10 border-liquid-lavender/30 hover:bg-liquid-lavender/20 hover:border-liquid-lavender/50"
+                techStack.map((cat) => (
-                                : itemIdx % 4 === 2
+                  <div key={cat.id} className="space-y-6">
-                                  ? "bg-liquid-rose/10 border-liquid-rose/30 hover:bg-liquid-rose/20 hover:border-liquid-rose/50"
+                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">{cat.name}</h4>
-                                  : "bg-liquid-sky/10 border-liquid-sky/30 hover:bg-liquid-sky/20 hover:border-liquid-sky/50"
+                    <div className="flex flex-wrap gap-2">
-                          }`}
+                      {cat.items?.map((item: TechStackItem) => (
-                        >
+                        <span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700/50 hover:border-liquid-mint transition-colors">
-                          {item}
+                          {item.name}
                         </span>
                       ))}
                     </div>
-                  </motion.div>
+                  </div>
-                ))}
+                ))
-              </div>
+              )}
             </div>
+          </motion.div>
 
-            {/* Hobbies */}
+          {/* 5. Library, Gear & Snippets */}
-            <div>
+          <div className="md:col-span-12 grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 md:gap-8">
-              <motion.h3
+            {/* Library - Larger Span */}
-                variants={fadeInUp}
+            <motion.div
-                className="text-xl font-bold text-stone-900 mb-4"
+              transition={{ delay: 0.4 }}
+              className="lg:col-span-7 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col group overflow-hidden relative min-h-[350px] sm:min-h-[400px] md:min-h-[500px]"
+            >
+              <div className="relative z-10 flex flex-col h-full">
+                <div className="flex justify-between items-center mb-6 sm:mb-8 md:mb-10">
+                  <h3 className="text-xl sm:text-2xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-2 sm:gap-3 uppercase tracking-tighter">
+                    <BookOpen className="text-liquid-purple" size={24} /> Library
+                  </h3>
+                  <Link href={`/${locale}/books`} className="group/link flex items-center gap-2 text-stone-900 dark:text-stone-100 font-black border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-all">
+                    View All <ArrowRight size={14} className="group-hover/link:translate-x-1 transition-transform" />
+                  </Link>
+                </div>
+                <CurrentlyReading />
+                <div className="mt-6 flex-1">
+                  <ReadBooks />
+                </div>
+              </div>
+            </motion.div>
+
+            <div className="lg:col-span-5 flex flex-col gap-4 sm:gap-6 md:gap-8">
+              {/* My Gear (Uses) */}
+              <motion.div
+                transition={{ delay: 0.5 }}
+                className="bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex-1"
               >
-                When I&apos;m Not Coding
+                <div className="relative z-10">
-              </motion.h3>
+                  <h3 className="text-xl sm:text-2xl font-black mb-5 sm:mb-8 flex items-center gap-2 sm:gap-3 uppercase tracking-tighter text-white">
-              <div className="space-y-3">
+                    <Cpu className="text-liquid-mint" size={24} /> My Gear
-                {hobbies.map((hobby, idx) => (
+                  </h3>
-                  <motion.div
+                  <div className="grid grid-cols-2 gap-4 sm:gap-6">
-                    key={`hobby-${hobby.text}-${idx}`}
+                    <div className="space-y-1">
-                    variants={fadeInUp}
+                      <p className="text-[9px] font-black uppercase tracking-widest text-stone-400">Main</p>
-                    whileHover={{
+                      <p className="text-sm font-bold text-stone-100">MacBook M4 Pro</p>
-                      x: 8,
+                    </div>
-                      scale: 1.02,
+                    <div className="space-y-1">
-                      transition: { duration: 0.4, ease: "easeOut" },
+                      <p className="text-[9px] font-black uppercase tracking-widest text-stone-400">PC</p>
-                    }}
+                      <p className="text-sm font-bold text-stone-100">RTX 3080 / R7</p>
-                    className={`flex items-center gap-3 p-4 rounded-xl border-2 transition-all duration-500 ease-out ${
+                    </div>
-                      idx === 0
+                    <div className="space-y-1">
-                        ? "bg-gradient-to-r from-liquid-mint/10 to-liquid-sky/10 border-liquid-mint/30 hover:border-liquid-mint/50 hover:from-liquid-mint/15 hover:to-liquid-sky/15"
+                      <p className="text-[9px] font-black uppercase tracking-widest text-stone-400">Server</p>
-                        : idx === 1
+                      <p className="text-sm font-bold text-stone-100">IONOS & RPi 4</p>
-                          ? "bg-gradient-to-r from-liquid-coral/10 to-liquid-peach/10 border-liquid-coral/30 hover:border-liquid-coral/50 hover:from-liquid-coral/15 hover:to-liquid-peach/15"
+                    </div>
-                          : idx === 2
+                    <div className="space-y-1">
-                            ? "bg-gradient-to-r from-liquid-lavender/10 to-liquid-pink/10 border-liquid-lavender/30 hover:border-liquid-lavender/50 hover:from-liquid-lavender/15 hover:to-liquid-pink/15"
+                      <p className="text-[9px] font-black uppercase tracking-widest text-stone-400">OS</p>
-                            : "bg-gradient-to-r from-liquid-lime/10 to-liquid-teal/10 border-liquid-lime/30 hover:border-liquid-lime/50 hover:from-liquid-lime/15 hover:to-liquid-teal/15"
+                      <p className="text-sm font-bold text-stone-100">macOS / Linux</p>
-                    }`}
+                    </div>
-                  >
+                  </div>
-                    <hobby.icon size={20} className="text-stone-600" />
+                </div>
-                    <span className="text-stone-700 font-medium">
+                <div className="absolute bottom-0 right-0 w-32 h-32 bg-liquid-mint/10 blur-3xl rounded-full -mr-16 -mb-16" />
-                      {hobby.text}
+              </motion.div>
-                    </span>
+
-                  </motion.div>
+              <motion.div
-                ))}
+                transition={{ delay: 0.6 }}
+                className="bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between group overflow-hidden relative flex-1"
+              >
+                <div className="relative z-10">
+                  <h3 className="text-xl sm:text-2xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-2 sm:gap-3 uppercase tracking-tighter mb-4 sm:mb-6">
+                    <Terminal className="text-liquid-purple" size={24} /> Snippets
+                  </h3>
+                  <div className="space-y-3">
+                    {isLoading ? (
+                      Array.from({ length: 2 }).map((_, i) => <Skeleton key={i} className="h-12 rounded-xl" />)
+                    ) : snippets.length > 0 ? (
+                      snippets.map((s) => (
+                        <button 
+                          key={s.id}
+                          onClick={() => setSelectedSnippet(s)}
+                          className="w-full text-left p-3 bg-stone-50 dark:bg-stone-800 rounded-xl border border-stone-100 dark:border-stone-700 hover:border-liquid-purple transition-all group/s"
+                        >
+                          <p className="text-[9px] font-black uppercase tracking-widest text-stone-600 dark:text-stone-400 mb-0.5 group-hover/s:text-liquid-purple transition-colors">{s.category}</p>
+                          <p className="text-xs font-bold text-stone-800 dark:text-stone-200">{s.title}</p>
+                        </button>
+                      ))
+                    ) : (
+                      <p className="text-xs text-stone-500 dark:text-stone-400 italic">No snippets yet.</p>
+                    )}
+                  </div>
+                </div>
+                <Link href={`/${locale}/snippets`} className="mt-6 group/btn inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">
+                  Enter the Lab <ArrowRight size={12} className="group-hover/btn:translate-x-1 transition-transform" />
+                </Link>
+              </motion.div>
+            </div>
+          </div>
+
+          {/* 6. Hobbies */}
+          <motion.div 
+            transition={{ delay: 0.5 }}
+            className="md:col-span-12"
+          >
+            <div className="bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between">
+              <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8 md:mb-12">
+                {isLoading ? (
+                  Array.from({ length: 8 }).map((_, i) => <Skeleton key={i} className="h-24 rounded-2xl" />)
+                ) : (
+                  hobbies.map((hobby) => {
+                    const Icon = iconMap[hobby.icon] || Lightbulb;
+                    return (
+                      <div key={hobby.id} className="p-3 sm:p-4 md:p-6 bg-stone-50 dark:bg-stone-800 rounded-xl sm:rounded-2xl border border-stone-100 dark:border-stone-700 hover:border-liquid-mint transition-colors group">
+                        <div className="flex items-center gap-2 sm:gap-3 mb-1.5 sm:mb-3">
+                          <Icon size={16} className="text-liquid-mint group-hover:scale-110 transition-transform shrink-0 sm:w-5 sm:h-5" />
+                          <h4 className="font-bold text-xs sm:text-sm text-stone-800 dark:text-stone-200 uppercase tracking-tight">{hobby.title}</h4>
+                        </div>
+                        <p className="text-[11px] sm:text-xs text-stone-500 dark:text-stone-400 font-medium leading-relaxed hidden sm:block">
+                          {hobby.description}
+                        </p>
+                      </div>
+                    )
+                  })
+                )}
+              </div>
+              <div className="space-y-1 sm:space-y-2 border-t border-stone-100 dark:border-stone-800 pt-4 sm:pt-6 md:pt-8">
+                <h3 className="text-xl sm:text-2xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter">{t("hobbiesTitle")}</h3>
+                <p className="text-stone-500 font-light text-sm sm:text-base md:text-lg">{locale === 'de' ? 'Neugier über die Softwareentwicklung hinaus.' : 'Curiosity beyond software engineering.'}</p>
               </div>
             </div>
           </motion.div>
+
         </div>
       </div>
+
+      {/* Snippet Modal */}
+      <AnimatePresence>
+        {selectedSnippet && (
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8">
+            <motion.div 
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              onClick={() => setSelectedSnippet(null)}
+              className="absolute inset-0 bg-stone-950/60 backdrop-blur-md"
+            />
+            <motion.div 
+              initial={{ opacity: 0, scale: 0.9, y: 20 }}
+              animate={{ opacity: 1, scale: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.9, y: 20 }}
+              className="relative w-full max-w-3xl bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] shadow-2xl border border-stone-200 dark:border-stone-800 overflow-hidden flex flex-col max-h-[90vh]"
+            >
+              <div className="p-5 sm:p-8 md:p-10 overflow-y-auto">
+                <div className="flex justify-between items-start mb-5 sm:mb-8">
+                  <div>
+                    <p className="text-[10px] font-black uppercase tracking-[0.2em] text-liquid-purple mb-1 sm:mb-2">{selectedSnippet.category}</p>
+                    <h3 className="text-xl sm:text-2xl md:text-3xl font-black text-stone-900 dark:text-white uppercase tracking-tighter">{selectedSnippet.title}</h3>
+                  </div>
+                  <button 
+                    onClick={() => setSelectedSnippet(null)}
+                    className="p-3 bg-stone-50 dark:bg-stone-800 rounded-full hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors"
+                  >
+                    <X size={20} />
+                  </button>
+                </div>
+
+                <p className="text-sm sm:text-base text-stone-600 dark:text-stone-400 mb-5 sm:mb-8 leading-relaxed">
+                  {selectedSnippet.description}
+                </p>
+
+                <div className="relative group/code">
+                  <div className="absolute top-3 right-3 sm:top-4 sm:right-4 flex gap-2">
+                    <button
+                      onClick={() => copyToClipboard(selectedSnippet.code)}
+                      className="p-2 sm:p-2.5 bg-white/10 backdrop-blur-md hover:bg-white/20 rounded-lg border border-white/10 transition-all text-white"
+                      title="Copy Code"
+                    >
+                      {copied ? <Check size={16} className="text-emerald-400" /> : <Copy size={16} />}
+                    </button>
+                  </div>
+                  <pre className="bg-stone-950 p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-x-auto text-xs sm:text-sm font-mono text-stone-300 border border-stone-800 leading-relaxed">
+                    <code>{selectedSnippet.code}</code>
+                  </pre>
+                </div>
+              </div>
+              <div className="p-6 bg-stone-50 dark:bg-stone-800/50 border-t border-stone-100 dark:border-stone-800 text-center">
+                <button 
+                  onClick={() => setSelectedSnippet(null)}
+                  className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
+                >
+                  Close Laboratory
+                </button>
+              </div>
+            </motion.div>
+          </div>
+        )}
+      </AnimatePresence>
     </section>
   );
 };