From a5dba298f30b13b8161c819afedb804fc56d92b8 Mon Sep 17 00:00:00 2001
From: denshooter <dennis@konkol.net>
Date: Mon, 16 Feb 2026 12:31:40 +0100
Subject: [PATCH] feat: major UI/UX overhaul, snippets system, and performance
 fixes

---
 .github/copilot-instructions.md               | 211 ++++++++++++
 GEMINI.md                                     |  34 ++
 SESSION_SUMMARY.md                            |  42 +++
 app/[locale]/projects/[slug]/page.tsx         |   4 +-
 app/[locale]/projects/page.tsx                |  15 +-
 app/[locale]/snippets/SnippetsClient.tsx      | 109 +++++++
 app/[locale]/snippets/page.tsx                |  41 +++
 app/__tests__/api/book-reviews.test.tsx       |   4 +-
 app/__tests__/api/hobbies.test.tsx            |   4 +-
 app/__tests__/api/tech-stack.test.tsx         |   4 +-
 .../components/ActivityFeed.test.tsx          |   3 +-
 .../components/CurrentlyReading.test.tsx      |  16 +-
 app/__tests__/components/Hero.test.tsx        |  10 +-
 app/_ui/HomePage.tsx                          |   6 +
 app/_ui/ProjectDetailClient.tsx               |   4 +-
 app/_ui/ProjectsPageClient.tsx                |   3 +-
 app/api/i18n/[namespace]/route.ts             |  15 +-
 app/api/messages/route.ts                     |   2 +-
 app/api/projects/route.ts                     |  66 ++--
 app/api/snippets/route.ts                     |  18 +
 app/components/About.tsx                      | 231 +++++++++++--
 app/components/ActivityFeed.tsx               | 190 +++++++----
 app/components/BentoChat.tsx                  |  12 +-
 app/components/ClientProviders.tsx            |  19 +-
 app/components/ClientWrappers.tsx             |  10 +-
 app/components/Contact.tsx                    | 308 +++++++-----------
 app/components/Footer.tsx                     |  10 +-
 app/components/Grain.tsx                      |  30 ++
 app/components/Hero.tsx                       |  36 +-
 app/components/Projects.tsx                   |   2 +-
 app/globals.css                               |  14 +
 app/layout.tsx                                |   1 +
 app/not-found.tsx                             | 173 +++++-----
 docs/DESIGN_OVERHAUL_LOG.md                   |  33 ++
 jest.setup.ts                                 |  13 +-
 lib/directus.ts                               | 142 +++++++-
 messages/de.json                              |   7 +
 messages/en.json                              |   7 +
 next.config.ts                                |  20 +-
 scripts/setup-snippets.js                     |  78 +++++
 scripts/update-hobbies.js                     | 162 +++++++++
 41 files changed, 1610 insertions(+), 499 deletions(-)
 create mode 100644 .github/copilot-instructions.md
 create mode 100644 GEMINI.md
 create mode 100644 SESSION_SUMMARY.md
 create mode 100644 app/[locale]/snippets/SnippetsClient.tsx
 create mode 100644 app/[locale]/snippets/page.tsx
 create mode 100644 app/api/snippets/route.ts
 create mode 100644 app/components/Grain.tsx
 create mode 100644 docs/DESIGN_OVERHAUL_LOG.md
 create mode 100644 scripts/setup-snippets.js
 create mode 100644 scripts/update-hobbies.js

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
new file mode 100644
index 0000000..3975569
--- /dev/null
+++ b/.github/copilot-instructions.md
@@ -0,0 +1,211 @@
+# Portfolio Project Instructions
+
+This is Dennis Konkol's personal portfolio (dk0.dev) - a Next.js 15 portfolio with Directus CMS integration, n8n automation, and a "liquid" design system.
+
+## Build, Test, and Lint
+
+### Development
+```bash
+npm run dev          # Full dev environment (Docker + Next.js)
+npm run dev:simple   # Next.js only (no Docker dependencies)
+npm run dev:next     # Plain Next.js dev server
+```
+
+### Build & Deploy
+```bash
+npm run build        # Production build (standalone mode)
+npm run start        # Start production server
+```
+
+### Testing
+```bash
+# Unit tests (Jest)
+npm run test                # Run all unit tests
+npm run test:watch          # Watch mode
+npm run test:coverage       # With coverage report
+
+# E2E tests (Playwright)
+npm run test:e2e           # Run all E2E tests
+npm run test:e2e:ui        # Interactive UI mode
+npm run test:critical      # Critical paths only
+npm run test:hydration     # Hydration tests only
+```
+
+### Linting
+```bash
+npm run lint         # Run ESLint
+npm run lint:fix     # Auto-fix issues
+```
+
+### Database (Prisma)
+```bash
+npm run db:generate  # Generate Prisma client
+npm run db:push      # Push schema to database
+npm run db:studio    # Open Prisma Studio
+npm run db:seed      # Seed database
+```
+
+## Architecture Overview
+
+### Tech Stack
+- **Framework**: Next.js 15 (App Router), TypeScript 5.9
+- **Styling**: Tailwind CSS 3.4 with custom `liquid-*` color tokens
+- **Theming**: next-themes for dark mode (system/light/dark)
+- **Animations**: Framer Motion 12
+- **3D**: Three.js + React Three Fiber (shader gradient background)
+- **Database**: PostgreSQL via Prisma ORM
+- **Cache**: Redis (optional)
+- **CMS**: Directus (self-hosted, GraphQL, optional)
+- **Automation**: n8n webhooks (status, chat, hardcover, image generation)
+- **i18n**: next-intl (EN + DE)
+- **Monitoring**: Sentry
+- **Deployment**: Docker (standalone mode) + Nginx
+
+### Key Directories
+```
+app/
+  [locale]/          # i18n routes (en, de)
+    page.tsx         # Homepage sections
+    projects/        # Project listing + detail pages
+  api/               # API routes
+    book-reviews/    # Book reviews from Directus
+    hobbies/         # Hobbies from Directus
+    n8n/             # n8n webhook proxies
+    projects/        # Projects (PostgreSQL + Directus)
+    tech-stack/      # Tech stack from Directus
+  components/        # React components
+lib/
+  directus.ts        # Directus GraphQL client (no SDK)
+  auth.ts            # Auth + rate limiting
+  translations-loader.ts  # i18n loaders for server components
+prisma/
+  schema.prisma      # Database schema
+messages/
+  en.json            # English translations
+  de.json            # German translations
+```
+
+### Data Source Fallback Chain
+The architecture prioritizes resilience with this fallback hierarchy:
+1. **Directus CMS** (if `DIRECTUS_STATIC_TOKEN` configured)
+2. **PostgreSQL** (for projects, analytics)
+3. **JSON files** (`messages/*.json`)
+4. **Hardcoded defaults**
+5. **Display key itself** (last resort)
+
+**Critical**: The site never crashes if external services (Directus, PostgreSQL, n8n, Redis) are unavailable. All API routes return graceful fallbacks.
+
+### CMS Integration (Directus)
+- GraphQL calls via `lib/directus.ts` (no Directus SDK)
+- Collections: `tech_stack_categories`, `tech_stack_items`, `hobbies`, `content_pages`, `projects`, `book_reviews`
+- Translations use Directus native system (M2O to `languages`)
+- Locale mapping: `en` → `en-US`, `de` → `de-DE`
+- API routes export `runtime='nodejs'`, `dynamic='force-dynamic'` and include a `source` field in JSON responses (`directus|fallback|error`)
+
+### n8n Integration
+- Webhook base URL: `N8N_WEBHOOK_URL` env var
+- Auth via `N8N_SECRET_TOKEN` and/or `N8N_API_KEY` headers
+- All endpoints have rate limiting and 10s timeout protection
+- Hardcover reading data cached for 5 minutes
+
+## Key Conventions
+
+### i18n (Internationalization)
+- **Supported locales**: `en` (English), `de` (German)
+- **Primary source**: Static JSON files in `messages/en.json` and `messages/de.json`
+- **Optional override**: Directus CMS `messages` collection
+- **Server components**: Use `getHeroTranslations()`, `getNavTranslations()`, etc. from `lib/translations-loader.ts`
+- **Client components**: Use `useTranslations("key.path")` from next-intl
+- **Locale mapping**: Middleware defines `["en", "de"]` which must match `app/[locale]/layout.tsx`
+
+### Component Patterns
+- **Client components**: Mark with `"use client"` for interactive/data-fetching parts
+- **Data loading**: Use `useEffect` for client-side fetching on mount
+- **Animations**: Framer Motion `variants` pattern with `staggerContainer` + `fadeInUp`
+- **Loading states**: Every async component needs a matching Skeleton component
+
+### Design System ("Liquid Editorial Bento")
+- **Core palette**: Cream (`#fdfcf8`), Stone (`#0c0a09`), Emerald (`#10b981`)
+- **Custom colors**: Prefixed with `liquid-*` (sky, mint, lavender, pink, rose, peach, coral, teal, lime)
+- **Card style**: Gradient backgrounds (`bg-gradient-to-br from-liquid-*/15 via-liquid-*/10 to-liquid-*/15`)
+- **Glassmorphism**: Use `backdrop-blur-sm` with `border-2` and `rounded-xl`
+- **Typography**: Headlines uppercase, tracking-tighter, with accent point at end
+- **Layout**: Bento Grid for new features (no floating overlays)
+
+### File Naming
+- **Components**: PascalCase in `app/components/` (e.g., `About.tsx`)
+- **API routes**: kebab-case directories in `app/api/` (e.g., `book-reviews/`)
+- **Lib utilities**: kebab-case in `lib/` (e.g., `email-obfuscate.ts`)
+
+### Code Style
+- **Language**: Code in English, user-facing text via i18n
+- **TypeScript**: No `any` types - use interfaces from `lib/directus.ts` or `app/_ui/`
+- **Error handling**: All API calls must catch errors with fallbacks
+- **Error logging**: Only in development mode (`process.env.NODE_ENV === "development"`)
+- **Commit messages**: Conventional Commits (`feat:`, `fix:`, `chore:`)
+- **No emojis**: Unless explicitly requested
+
+### Testing Notes
+- **Jest environment**: JSDOM with mocks for `window.matchMedia` and `IntersectionObserver`
+- **Playwright**: Uses plain Next.js dev server (no Docker) with `NODE_ENV=development` to avoid Edge runtime issues
+- **Transform**: ESM modules (react-markdown, remark-*, etc.) are transformed via `transformIgnorePatterns`
+- **After UI changes**: Run `npm run test` to verify no regressions
+
+### Docker & Deployment
+- **Standalone mode**: `next.config.ts` uses `output: "standalone"` for optimized Docker builds
+- **Branches**: `dev` → staging, `production` → live
+- **CI/CD**: Gitea Actions (`.gitea/workflows/`)
+- **Verify Docker builds**: Always test Docker builds after changes to `next.config.ts` or dependencies
+
+## 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`
+4. Add i18n keys to `messages/en.json` and `messages/de.json`
+5. Integrate into parent component
+
+### Adding i18n strings
+1. Add keys to both `messages/en.json` and `messages/de.json`
+2. Use `useTranslations("key.path")` in client components
+3. Use `getTranslations("key.path")` in server components
+
+### Working with Directus
+- All queries go through `directusRequest()` in `lib/directus.ts`
+- Uses GraphQL endpoint (`/graphql`) with 2s timeout
+- Returns `null` on failure (graceful degradation)
+- Translations filtered by `languages_code.code` matching Directus locale
+
+## Environment Variables
+
+### Required for CMS
+```bash
+DIRECTUS_URL=https://cms.dk0.dev
+DIRECTUS_STATIC_TOKEN=...
+```
+
+### Required for n8n features
+```bash
+N8N_WEBHOOK_URL=https://n8n.dk0.dev
+N8N_SECRET_TOKEN=...
+N8N_API_KEY=...
+```
+
+### Database & Cache
+```bash
+DATABASE_URL=postgresql://...
+REDIS_URL=redis://...
+```
+
+### Optional
+```bash
+SENTRY_DSN=...
+NEXT_PUBLIC_BASE_URL=https://dk0.dev
+```
+
+## Documentation References
+- Operations guide: `docs/OPERATIONS.md`
+- Locale system: `docs/LOCALE_SYSTEM.md`
+- CMS guide: `docs/CMS_GUIDE.md`
+- Testing & deployment: `docs/TESTING_AND_DEPLOYMENT.md`
diff --git a/GEMINI.md b/GEMINI.md
new file mode 100644
index 0000000..74cd468
--- /dev/null
+++ b/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.
diff --git a/SESSION_SUMMARY.md b/SESSION_SUMMARY.md
new file mode 100644
index 0000000..5e6e2c6
--- /dev/null
+++ b/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.
diff --git a/app/[locale]/projects/[slug]/page.tsx b/app/[locale]/projects/[slug]/page.tsx
index 91aeeca..6416294 100644
--- a/app/[locale]/projects/[slug]/page.tsx
+++ b/app/[locale]/projects/[slug]/page.tsx
@@ -3,7 +3,7 @@ import ProjectDetailClient from "@/app/_ui/ProjectDetailClient";
 import { notFound } from "next/navigation";
 import type { Metadata } from "next";
 import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
-import { getProjectBySlug, Project } from "@/lib/directus";
+import { getProjectBySlug } from "@/lib/directus";
 import { ProjectDetailData } from "@/app/_ui/ProjectDetailClient";
 
 export const revalidate = 300;
@@ -83,7 +83,7 @@ export default async function ProjectPage({
     if (directusProject) {
       projectData = {
         ...directusProject,
-        id: parseInt(directusProject.id) || 0,
+        id: typeof directusProject.id === 'string' ? (parseInt(directusProject.id) || 0) : directusProject.id,
       } as ProjectDetailData;
     }
   }
diff --git a/app/[locale]/projects/page.tsx b/app/[locale]/projects/page.tsx
index 04c077b..179164c 100644
--- a/app/[locale]/projects/page.tsx
+++ b/app/[locale]/projects/page.tsx
@@ -46,29 +46,34 @@ export default async function ProjectsPage({
     if (fetched) {
       directusProjects = fetched.map(p => ({
         ...p,
-        id: parseInt(p.id) || 0,
+        id: typeof p.id === 'string' ? (parseInt(p.id) || 0) : p.id,
       })) as ProjectListItem[];
     }
   } catch (err) {
     console.error("Directus projects fetch failed:", err);
   }
 
-  const localizedDb = dbProjects.map((p) => {
+  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;
-    const { translations: _translations, ...rest } = p;
     return {
-      ...rest,
+      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: any[] = [...localizedDb];
+  const allProjects: ProjectListItem[] = [...localizedDb];
   const dbSlugs = new Set(localizedDb.map(p => p.slug));
   
   for (const dp of directusProjects) {
diff --git a/app/[locale]/snippets/SnippetsClient.tsx b/app/[locale]/snippets/SnippetsClient.tsx
new file mode 100644
index 0000000..869fc03
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/app/[locale]/snippets/page.tsx b/app/[locale]/snippets/page.tsx
new file mode 100644
index 0000000..a419bb7
--- /dev/null
+++ b/app/[locale]/snippets/page.tsx
@@ -0,0 +1,41 @@
+
+import React from "react";
+import { getSnippets } from "@/lib/directus";
+import { Terminal, ArrowLeft, Code } 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>
+  );
+}
diff --git a/app/__tests__/api/book-reviews.test.tsx b/app/__tests__/api/book-reviews.test.tsx
index 0b26cdd..77bac20 100644
--- a/app/__tests__/api/book-reviews.test.tsx
+++ b/app/__tests__/api/book-reviews.test.tsx
@@ -1,4 +1,4 @@
-import { NextResponse } from "next/server";
+import { NextResponse, NextRequest } from "next/server";
 import { GET } from "@/app/api/book-reviews/route";
 
 // Mock the route handler module
@@ -12,7 +12,7 @@ describe("GET /api/book-reviews", () => {
       NextResponse.json({ bookReviews: [{ id: 1, book_title: "Test" }] })
     );
 
-    const response = await GET({} as any);
+    const response = await GET({} as NextRequest);
     const data = await response.json();
     expect(response.status).toBe(200);
     expect(data.bookReviews).toHaveLength(1);
diff --git a/app/__tests__/api/hobbies.test.tsx b/app/__tests__/api/hobbies.test.tsx
index 656813f..482026d 100644
--- a/app/__tests__/api/hobbies.test.tsx
+++ b/app/__tests__/api/hobbies.test.tsx
@@ -1,4 +1,4 @@
-import { NextResponse } from "next/server";
+import { NextResponse, NextRequest } from "next/server";
 import { GET } from "@/app/api/hobbies/route";
 
 // Mock the route handler module
@@ -12,7 +12,7 @@ describe("GET /api/hobbies", () => {
       NextResponse.json({ hobbies: [{ id: 1, title: "Gaming" }] })
     );
 
-    const response = await GET({} as any);
+    const response = await GET({} as NextRequest);
     const data = await response.json();
     expect(response.status).toBe(200);
     expect(data.hobbies).toHaveLength(1);
diff --git a/app/__tests__/api/tech-stack.test.tsx b/app/__tests__/api/tech-stack.test.tsx
index 6587c94..22aa9dd 100644
--- a/app/__tests__/api/tech-stack.test.tsx
+++ b/app/__tests__/api/tech-stack.test.tsx
@@ -1,4 +1,4 @@
-import { NextResponse } from "next/server";
+import { NextResponse, NextRequest } from "next/server";
 import { GET } from "@/app/api/tech-stack/route";
 
 // Mock the route handler module
@@ -12,7 +12,7 @@ describe("GET /api/tech-stack", () => {
       NextResponse.json({ techStack: [{ id: 1, name: "Frontend" }] })
     );
 
-    const response = await GET({} as any);
+    const response = await GET({} as NextRequest);
     const data = await response.json();
     expect(response.status).toBe(200);
     expect(data.techStack).toHaveLength(1);
diff --git a/app/__tests__/components/ActivityFeed.test.tsx b/app/__tests__/components/ActivityFeed.test.tsx
index 6ee4d13..a8f33e3 100644
--- a/app/__tests__/components/ActivityFeed.test.tsx
+++ b/app/__tests__/components/ActivityFeed.test.tsx
@@ -64,7 +64,8 @@ describe('ActivityFeed NaN Handling', () => {
 
       // In the actual code, we use String(data.gaming.name || '')
       // If data.gaming.name is NaN, (NaN || '') evaluates to '' because NaN is falsy
-      const nanName = String(NaN || '');
+      const nanValue = NaN;
+      const nanName = String(nanValue || '');
       expect(nanName).toBe(''); // NaN is falsy, so it falls back to ''
       expect(typeof nanName).toBe('string');
     });
diff --git a/app/__tests__/components/CurrentlyReading.test.tsx b/app/__tests__/components/CurrentlyReading.test.tsx
index b488c8a..8a1eb1e 100644
--- a/app/__tests__/components/CurrentlyReading.test.tsx
+++ b/app/__tests__/components/CurrentlyReading.test.tsx
@@ -11,7 +11,7 @@ jest.mock("next-intl", () => ({
 // Mock next/image
 jest.mock("next/image", () => ({
   __esModule: true,
-  default: (props: any) => <img {...props} />,
+  default: (props: React.ImgHTMLAttributes<HTMLImageElement>) => <img {...props} alt={props.alt || ""} />,
 }));
 
 describe("CurrentlyReading Component", () => {
@@ -28,19 +28,17 @@ describe("CurrentlyReading Component", () => {
   it("renders a book when data is fetched", async () => {
     const mockBooks = [
       {
-        id: "1",
-        book_title: "Test Book",
-        book_author: "Test Author",
-        book_image: "/test.jpg",
-        status: "reading",
-        rating: 5,
-        progress: 50
+        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 () => ({ hardcover: mockBooks }),
+      json: async () => ({ currentlyReading: mockBooks }),
     });
 
     render(<CurrentlyReadingComp />);
diff --git a/app/__tests__/components/Hero.test.tsx b/app/__tests__/components/Hero.test.tsx
index f6c4bff..5f540b7 100644
--- a/app/__tests__/components/Hero.test.tsx
+++ b/app/__tests__/components/Hero.test.tsx
@@ -14,9 +14,17 @@ jest.mock('next-intl', () => ({
 }));
 
 // 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 }: any) => (
+  default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
     <img 
       src={src} 
       alt={alt} 
diff --git a/app/_ui/HomePage.tsx b/app/_ui/HomePage.tsx
index dfa9b31..4ea418b 100644
--- a/app/_ui/HomePage.tsx
+++ b/app/_ui/HomePage.tsx
@@ -5,8 +5,14 @@ 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
diff --git a/app/_ui/ProjectDetailClient.tsx b/app/_ui/ProjectDetailClient.tsx
index bbf0198..4b206c3 100644
--- a/app/_ui/ProjectDetailClient.tsx
+++ b/app/_ui/ProjectDetailClient.tsx
@@ -1,13 +1,11 @@
 "use client";
 
-import { ExternalLink, ArrowLeft, Github as GithubIcon, Calendar } from "lucide-react";
-import Link from "next/link";
+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";
-import { Skeleton } from "../components/ui/Skeleton";
 
 export type ProjectDetailData = {
   id: number;
diff --git a/app/_ui/ProjectsPageClient.tsx b/app/_ui/ProjectsPageClient.tsx
index db5dc99..227bdc0 100644
--- a/app/_ui/ProjectsPageClient.tsx
+++ b/app/_ui/ProjectsPageClient.tsx
@@ -9,13 +9,14 @@ import Image from "next/image";
 import { Skeleton } from "../components/ui/Skeleton";
 
 export type ProjectListItem = {
-  id: number;
+  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;
 };
 
diff --git a/app/api/i18n/[namespace]/route.ts b/app/api/i18n/[namespace]/route.ts
index b65d256..b664d67 100644
--- a/app/api/i18n/[namespace]/route.ts
+++ b/app/api/i18n/[namespace]/route.ts
@@ -32,7 +32,7 @@ export async function GET(
     }
 
     // Flatten das Objekt zu flachen Keys
-    const flatKeys = flattenObject(namespaceData);
+    const flatKeys = flattenObject(namespaceData as Record<string, unknown>);
     
     // Lade jeden Key aus Directus (mit Fallback auf JSON)
     const result: Record<string, string> = {};
@@ -57,19 +57,24 @@ export async function GET(
 }
 
 // Helper: Holt verschachtelte Werte aus Objekt
-function getNestedValue(obj: any, path: string): any {
-  return path.split('.').reduce((current, key) => current?.[key], obj);
+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: any, prefix = ''): Record<string, string> {
+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, newKey));
+      Object.assign(result, flattenObject(value as Record<string, unknown>, newKey));
     } else {
       result[newKey] = String(value);
     }
diff --git a/app/api/messages/route.ts b/app/api/messages/route.ts
index 3208aff..7135ebb 100644
--- a/app/api/messages/route.ts
+++ b/app/api/messages/route.ts
@@ -8,7 +8,7 @@ export async function GET(request: NextRequest) {
   try {
     const messages = await getMessages(locale);
     return NextResponse.json({ messages });
-  } catch (error) {
+  } catch {
     return NextResponse.json({ messages: {} }, { status: 500 });
   }
 }
diff --git a/app/api/projects/route.ts b/app/api/projects/route.ts
index 11a1ed0..f4c5416 100644
--- a/app/api/projects/route.ts
+++ b/app/api/projects/route.ts
@@ -5,6 +5,7 @@ import { requireSessionAuth, checkRateLimit, getRateLimitHeaders, getClientIp }
 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 {
@@ -41,17 +42,18 @@ export async function GET(request: NextRequest) {
     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';
 
     // Try Directus FIRST (Primary Source)
-    let directusProjects: any[] = [];
+    let directusProjects: ProjectListItem[] = [];
+    let directusSuccess = false;
     try {
       const fetched = await getDirectusProjects(locale, {
         featured: featured === 'true' ? true : featured === 'false' ? false : undefined,
-        published: published === 'true' ? true : published === 'false' ? false : undefined,
+        published: published,
         category: category || undefined,
         difficulty: difficulty || undefined,
         search: search || undefined,
@@ -59,29 +61,41 @@ export async function GET(request: NextRequest) {
       });
 
       if (fetched) {
-        directusProjects = fetched;
+        directusProjects = fetched.map(p => ({
+          id: typeof p.id === 'string' ? (parseInt(p.id) || 0) : p.id,
+          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 (directusError) {
-      console.log('Directus error, continuing with PostgreSQL');
+    } catch {
+      console.log('Directus error, continuing with PostgreSQL fallback');
     }
 
-    // Fallback 1: Try PostgreSQL
+    // 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 (dbError) {
+    } catch {
       console.log('PostgreSQL not available');
-      if (directusProjects.length > 0) {
-        return NextResponse.json({
-          projects: directusProjects,
-          total: directusProjects.length,
-          source: 'directus'
-        });
-      }
-      
       return NextResponse.json({
-        projects: [],
-        total: 0,
-        source: 'fallback'
+        projects: directusProjects, // Might be empty
+        total: directusProjects.length,
+        source: 'directus-empty'
       });
     }
 
@@ -90,7 +104,7 @@ export async function GET(request: NextRequest) {
     
     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) {
@@ -113,7 +127,17 @@ export async function GET(request: NextRequest) {
 
     // Merge logic
     const dbSlugs = new Set(dbProjects.map(p => p.slug));
-    const mergedProjects = [...dbProjects];
+    const mergedProjects: ProjectListItem[] = dbProjects.map(p => ({
+      id: p.id,
+      slug: p.slug,
+      title: p.title,
+      description: p.description,
+      tags: p.tags,
+      category: p.category,
+      date: p.date,
+      createdAt: p.createdAt.toISOString(),
+      imageUrl: p.imageUrl,
+    }));
     
     for (const dp of directusProjects) {
       if (!dbSlugs.has(dp.slug)) {
diff --git a/app/api/snippets/route.ts b/app/api/snippets/route.ts
new file mode 100644
index 0000000..c1fa7ab
--- /dev/null
+++ b/app/api/snippets/route.ts
@@ -0,0 +1,18 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getSnippets } from '@/lib/directus';
+
+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 || []
+    });
+  } catch (error) {
+    return NextResponse.json({ error: 'Failed to fetch snippets' }, { status: 500 });
+  }
+}
diff --git a/app/components/About.tsx b/app/components/About.tsx
index f95afe3..a041d81 100644
--- a/app/components/About.tsx
+++ b/app/components/About.tsx
@@ -1,21 +1,22 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowRight } from "lucide-react";
+import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb, BookOpen, MessageSquare, ArrowRight, Tv, Plane, Camera, Stars, Music, Terminal, Cpu } from "lucide-react";
 import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
 import RichTextClient from "./RichTextClient";
 import CurrentlyReading from "./CurrentlyReading";
 import ReadBooks from "./ReadBooks";
-import { motion } from "framer-motion";
-import { TechStackCategory, Hobby } from "@/lib/directus";
+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 iconMap: Record<string, any> = {
-  Globe, Server, Code, Wrench, Shield, Activity, Lightbulb, Gamepad2
+const iconMap: Record<string, LucideIcon> = {
+  Globe, Server, Code, Wrench, Shield, Activity, Lightbulb, Gamepad2, BookOpen, Tv, Plane, Camera, Stars, Music, Terminal, Cpu
 };
 
 const About = () => {
@@ -24,19 +25,22 @@ const About = () => {
   const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
   const [techStack, setTechStack] = useState<TechStackCategory[]>([]);
   const [hobbies, setHobbies] = useState<Hobby[]>([]);
-  const [reviewsCount, setReviewsCount] = useState(0);
+  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(() => {
     const fetchData = async () => {
       try {
-        const [cmsRes, techRes, hobbiesRes, msgRes, booksRes] = await Promise.all([
+        const [cmsRes, techRes, hobbiesRes, msgRes, booksRes, 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/book-reviews?locale=${locale}`)
+          fetch(`/api/book-reviews?locale=${locale}`),
+          fetch(`/api/snippets?limit=3&featured=true`)
         ]);
         
         const cmsData = await cmsRes.json();
@@ -51,8 +55,11 @@ const About = () => {
         const msgData = await msgRes.json();
         if (msgData?.messages) setCmsMessages(msgData.messages);
 
-        const booksData = await booksRes.json();
-        if (booksData?.bookReviews) setReviewsCount(booksData.bookReviews.length);
+        const snippetsData = await snippetsRes.json();
+        if (snippetsData?.snippets) setSnippets(snippetsData.snippets);
+
+        await booksRes.json();
+        // Books data is available but we don't need to track count anymore
       } catch (error) {
         console.error("About data fetch failed:", error);
       } finally {
@@ -62,6 +69,12 @@ const About = () => {
     fetchData();
   }, [locale]);
 
+  const copyToClipboard = (code: string) => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
   return (
     <section id="about" className="py-32 px-6 bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
       <div className="max-w-7xl mx-auto">
@@ -113,7 +126,7 @@ const About = () => {
               <h3 className="text-xl font-black mb-10 flex items-center gap-2 uppercase tracking-widest text-liquid-mint">
                 <Activity size={20} /> Status
               </h3>
-              <ActivityFeed idleQuote={cmsMessages["about.quote.idle"]} />
+              <ActivityFeed idleQuote={cmsMessages["about.quote.idle"]} locale={locale} />
             </div>
             <div className="absolute top-0 right-0 w-40 h-40 bg-liquid-mint/10 blur-[100px] rounded-full" />
           </motion.div>
@@ -160,7 +173,7 @@ const About = () => {
                   <div key={cat.id} className="space-y-6">
                     <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">{cat.name}</h4>
                     <div className="flex flex-wrap gap-2">
-                      {cat.items?.map((item: any) => (
+                      {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.name}
                         </span>
@@ -172,55 +185,205 @@ const About = () => {
             </div>
           </motion.div>
 
-          {/* 5. Library & Hobbies */}
-          <motion.div 
-            initial={{ opacity: 0, y: 30 }}
-            whileInView={{ opacity: 1, y: 0 }}
-            viewport={{ once: true }}
-            transition={{ delay: 0.4 }}
-            className="md:col-span-12 grid grid-cols-1 md:grid-cols-2 gap-8"
-          >
-            <div 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 justify-between group overflow-hidden relative">
-              <div className="relative z-10">
+          {/* 5. Library, Gear & Snippets */}
+          <div className="md:col-span-12 grid grid-cols-1 lg:grid-cols-12 gap-6 md:gap-8">
+            {/* Library - Larger Span */}
+            <motion.div 
+              initial={{ opacity: 0, y: 30 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.4 }}
+              className="lg:col-span-7 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 group overflow-hidden relative min-h-[500px]"
+            >
+              <div className="relative z-10 flex flex-col h-full">
                 <div className="flex justify-between items-center mb-10">
                   <h3 className="text-2xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-3 uppercase tracking-tighter">
                     <BookOpen className="text-liquid-purple" size={24} /> Library
                   </h3>
-                  <Link href={`/${locale}/books`} className="group 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:translate-x-1 transition-transform" />
+                  <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">
+                <div className="mt-6 flex-1">
                   <ReadBooks />
                 </div>
               </div>
-            </div>
+            </motion.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 flex flex-col justify-between">
-              <div className="flex flex-wrap gap-4 mb-10">
+            <div className="lg:col-span-5 flex flex-col gap-6 md:gap-8">
+              {/* My Gear (Uses) */}
+              <motion.div 
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: 0.5 }}
+                className="bg-stone-900 rounded-[3rem] p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex-1"
+              >
+                <div className="relative z-10">
+                  <h3 className="text-2xl font-black mb-8 flex items-center gap-3 uppercase tracking-tighter text-white">
+                    <Cpu className="text-liquid-mint" size={24} /> My Gear
+                  </h3>
+                  <div className="grid grid-cols-2 gap-6">
+                    <div className="space-y-1">
+                      <p className="text-[9px] font-black uppercase tracking-widest text-stone-400">Main</p>
+                      <p className="text-sm font-bold text-stone-100">MacBook M4 Pro</p>
+                    </div>
+                    <div className="space-y-1">
+                      <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>
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-[9px] font-black uppercase tracking-widest text-stone-400">Server</p>
+                      <p className="text-sm font-bold text-stone-100">IONOS & RPi 4</p>
+                    </div>
+                    <div className="space-y-1">
+                      <p className="text-[9px] font-black uppercase tracking-widest text-stone-400">OS</p>
+                      <p className="text-sm font-bold text-stone-100">macOS / Linux</p>
+                    </div>
+                  </div>
+                </div>
+                <div className="absolute bottom-0 right-0 w-32 h-32 bg-liquid-mint/10 blur-3xl rounded-full -mr-16 -mb-16" />
+              </motion.div>
+
+              <motion.div 
+                initial={{ opacity: 0, y: 30 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: 0.6 }}
+                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 justify-between group overflow-hidden relative flex-1"
+              >
+                <div className="relative z-10">
+                  <h3 className="text-2xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-3 uppercase tracking-tighter 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-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-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-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 
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.5 }}
+            className="md:col-span-12"
+          >
+            <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 flex flex-col justify-between">
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                 {isLoading ? (
-                  Array.from({ length: 4 }).map((_, i) => <Skeleton key={i} className="w-12 h-12 rounded-2xl" />)
+                  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="w-12 h-12 rounded-2xl bg-stone-50 dark:bg-stone-800 flex items-center justify-center shadow-sm border border-stone-100 dark:border-stone-700">
-                        <Icon size={20} className="text-liquid-mint" />
+                      <div key={hobby.id} className="p-6 bg-stone-50 dark:bg-stone-800 rounded-2xl border border-stone-100 dark:border-stone-700 hover:border-liquid-mint transition-colors group">
+                        <div className="flex items-center gap-3 mb-3">
+                          <Icon size={20} className="text-liquid-mint group-hover:scale-110 transition-transform shrink-0" />
+                          <h4 className="font-bold text-sm text-stone-800 dark:text-stone-200 uppercase tracking-tight">{hobby.title}</h4>
+                        </div>
+                        <p className="text-xs text-stone-500 dark:text-stone-400 font-medium leading-relaxed">
+                          {hobby.description}
+                        </p>
                       </div>
                     )
                   })
                 )}
               </div>
-              <div className="space-y-2">
-                <h3 className="text-2xl font-black text-stone-900 dark:text-stone-50">{t("hobbiesTitle")}</h3>
-                <p className="text-stone-500 font-light text-lg">Curiosity beyond software engineering.</p>
+              <div className="space-y-2 border-t border-stone-100 dark:border-stone-800 pt-8">
+                <h3 className="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-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-[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>
     </section>
   );
 };
diff --git a/app/components/ActivityFeed.tsx b/app/components/ActivityFeed.tsx
index 608930f..1639123 100644
--- a/app/components/ActivityFeed.tsx
+++ b/app/components/ActivityFeed.tsx
@@ -1,51 +1,70 @@
 "use client";
 
 import React, { useEffect, useState } from "react";
-import { motion } from "framer-motion";
+import { motion, AnimatePresence } from "framer-motion";
 import { Disc3, Gamepad2, Zap, Quote as QuoteIcon } from "lucide-react";
+import { useTranslations } from "next-intl";
+
+interface CustomActivity {
+  [key: string]: unknown;
+}
 
 interface StatusData {
   music: { isPlaying: boolean; track: string; artist: string; albumArt: string; url: string; } | null;
   gaming: { isPlaying: boolean; name: string; image: string | null; state?: string | number; details?: string | number; } | null;
   coding: { isActive: boolean; project?: string; file?: string; language?: string; } | null;
-  customActivities?: Record<string, any>;
+  customActivities?: Record<string, CustomActivity>;
 }
 
-const techQuotes = [
-  { content: "Computer Science is no more about computers than astronomy is about telescopes.", author: "Edsger W. Dijkstra" },
-  { content: "Simplicity is prerequisite for reliability.", author: "Edsger W. Dijkstra" },
-  { content: "If debugging is the process of removing software bugs, then programming must be the process of putting them in.", author: "Edsger W. Dijkstra" },
-  { content: "There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies.", author: "Tony Hoare" },
-  { content: "Deleted code is debugged code.", author: "Jeff Sickel" },
-  { content: "Walking on water and developing software from a specification are easy if both are frozen.", author: "Edward V. Berard" },
-  { content: "Code never lies, comments sometimes do.", author: "Ron Jeffries" },
-  { content: "I have no special talent. I am only passionately curious.", author: "Albert Einstein" },
-  { content: "No code is faster than no code.", author: "Kevlin Henney" },
-  { content: "First, solve the problem. Then, write the code.", author: "John Johnson" }
-];
+const techQuotes = {
+  de: [
+    { content: "Informatik hat nicht mehr mit Computern zu tun als Astronomie mit Teleskopen.", author: "Edsger W. Dijkstra" },
+    { content: "Einfachheit ist die Voraussetzung für Verlässlichkeit.", author: "Edsger W. Dijkstra" },
+    { content: "Wenn Debugging der Prozess des Entfernens von Fehlern ist, dann muss Programmieren der Prozess des Einbauens sein.", author: "Edsger W. Dijkstra" },
+    { content: "Gelöschter Code ist gedebuggter Code.", author: "Jeff Sickel" },
+    { content: "Zuerst löse das Problem. Dann schreibe den Code.", author: "John Johnson" }
+  ],
+  en: [
+    { content: "Computer Science is no more about computers than astronomy is about telescopes.", author: "Edsger W. Dijkstra" },
+    { content: "Simplicity is prerequisite for reliability.", author: "Edsger W. Dijkstra" },
+    { content: "If debugging is the process of removing software bugs, then programming must be the process of putting them in.", author: "Edsger W. Dijkstra" },
+    { content: "Deleted code is debugged code.", author: "Jeff Sickel" },
+    { content: "First, solve the problem. Then, write the code.", author: "John Johnson" }
+  ]
+};
 
 function 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;
 }
 
 export default function ActivityFeed({ 
   onActivityChange,
-  idleQuote
+  idleQuote,
+  locale = 'en'
 }: { 
   onActivityChange?: (active: boolean) => void;
   idleQuote?: string;
+  locale?: string;
 }) {
   const [data, setData] = useState<StatusData | null>(null);
   const [hasActivity, setHasActivity] = useState(false);
-  const [randomQuote, setRandomQuote] = useState(techQuotes[0]);
+  const [quoteIndex, setQuoteIndex] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const t = useTranslations("home.about.activity");
+
+  const currentQuotes = techQuotes[locale as keyof typeof techQuotes] || techQuotes.en;
+  
+  // Combine CMS quote with tech quotes if available
+  const allQuotes = React.useMemo(() => {
+    if (idleQuote) {
+      return [{ content: idleQuote, author: "Dennis Konkol" }, ...currentQuotes];
+    }
+    return currentQuotes;
+  }, [idleQuote, currentQuotes]);
 
   useEffect(() => {
-    setRandomQuote(techQuotes[Math.floor(Math.random() * techQuotes.length)]);
-    
     const fetchData = async () => {
       try {
         const res = await fetch("/api/n8n/status");
@@ -58,62 +77,89 @@ export default function ActivityFeed({
           activityData.coding?.isActive ||
           activityData.gaming?.isPlaying ||
           activityData.music?.isPlaying ||
-          Object.values(activityData.customActivities || {}).some((act: any) => act?.enabled)
+          Object.values(activityData.customActivities || {}).some((act) => Boolean((act as { enabled?: boolean })?.enabled))
         );
         setHasActivity(isActive);
         onActivityChange?.(isActive);
       } catch {
         setHasActivity(false);
         onActivityChange?.(false);
+      } finally {
+        setLoading(false);
       }
     };
 
     fetchData();
-    const interval = setInterval(fetchData, 30000);
-    return () => clearInterval(interval);
-  }, [onActivityChange]);
+    const statusInterval = setInterval(fetchData, 30000);
+    
+    // Cycle quotes every 10 seconds
+    const quoteInterval = setInterval(() => {
+      setQuoteIndex((prev) => (prev + 1) % allQuotes.length);
+    }, 10000);
+
+    return () => {
+      clearInterval(statusInterval);
+      clearInterval(quoteInterval);
+    };
+  }, [onActivityChange, allQuotes.length]);
+
+  if (loading) {
+    return <div className="animate-pulse space-y-4">
+      <div className="h-24 bg-stone-100 dark:bg-stone-800 rounded-2xl" />
+    </div>;
+  }
 
   if (!hasActivity) {
     return (
-      <motion.div 
-        initial={{ opacity: 0 }} 
-        animate={{ opacity: 1 }} 
-        className="h-full flex flex-col justify-center space-y-6"
-      >
+      <div className="h-full flex flex-col justify-center space-y-6">
         <div className="w-10 h-10 rounded-full bg-liquid-mint/10 flex items-center justify-center">
-          <QuoteIcon size={18} className="text-liquid-mint" />
+          <QuoteIcon size={18} className="text-emerald-600 dark:text-liquid-mint" />
         </div>
-        <div className="space-y-4">
-          <p className="text-xl md:text-2xl font-light leading-tight text-stone-300 italic">
-            &ldquo;{idleQuote || randomQuote.content}&rdquo;
-          </p>
-          {!idleQuote && <p className="text-xs font-bold text-stone-500 uppercase tracking-widest">— {randomQuote.author}</p>}
+        <div className="min-h-[120px] relative">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key={quoteIndex}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -10 }}
+              transition={{ duration: 0.5 }}
+              className="space-y-4"
+            >
+              <p className="text-xl md:text-2xl font-light leading-tight text-stone-700 dark:text-stone-300 italic">
+                &ldquo;{allQuotes[quoteIndex].content}&rdquo;
+              </p>
+              <p className="text-xs font-black text-stone-400 dark:text-stone-500 uppercase tracking-widest">
+                — {allQuotes[quoteIndex].author}
+              </p>
+            </motion.div>
+          </AnimatePresence>
         </div>
-        <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-600">
-          <span className="w-1.5 h-1.5 rounded-full bg-stone-700" /> Currently Thinking
+        <div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-400 dark:text-stone-600 pt-4 border-t border-stone-100 dark:border-stone-800">
+          <span className="w-1.5 h-1.5 rounded-full bg-stone-200 dark:bg-stone-700 animate-pulse" /> 
+          {t("idleStatus")}
         </div>
-      </motion.div>
+      </div>
     );
   }
 
   return (
     <div className="space-y-4">
       {data?.coding?.isActive && (
-        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-green-500/10 border border-green-500/20 rounded-2xl p-5">
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-emerald-500/5 dark:bg-emerald-500/10 border border-emerald-500/20 rounded-2xl p-5">
           <div className="flex items-center gap-3 mb-2">
-            <Zap size={14} className="text-green-400 animate-pulse" />
-            <span className="text-[10px] font-black uppercase tracking-widest text-green-400">Coding Now</span>
+            <Zap size={14} className="text-emerald-600 dark:text-emerald-400 animate-pulse" />
+            <span className="text-[10px] font-black uppercase tracking-widest text-emerald-600 dark:text-emerald-400">{t("codingNow")}</span>
           </div>
-          <p className="font-bold text-white text-lg truncate">{data.coding.project}</p>
-          <p className="text-xs text-white/50 truncate">{data.coding.file}</p>
+          <p className="font-bold text-stone-900 dark:text-white text-lg truncate">{data.coding.project}</p>
+          <p className="text-xs text-stone-500 dark:text-white/50 truncate">{data.coding.file}</p>
         </motion.div>
       )}
 
       {data?.gaming?.isPlaying && (
-        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-indigo-500/10 border border-indigo-500/20 rounded-2xl p-5">
+        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-indigo-500/5 dark:bg-indigo-500/10 border border-indigo-500/20 rounded-2xl p-5">
           <div className="flex items-center gap-3 mb-3">
-            <Gamepad2 size={14} className="text-indigo-400" />
-            <span className="text-[10px] font-black uppercase tracking-widest text-indigo-400">Gaming</span>
+            <Gamepad2 size={14} className="text-indigo-600 dark:text-indigo-400" />
+            <span className="text-[10px] font-black uppercase tracking-widest text-indigo-600 dark:text-indigo-400">{t("gaming")}</span>
           </div>
           <div className="flex gap-4">
             {data.gaming.image && (
@@ -122,9 +168,9 @@ export default function ActivityFeed({
               </div>
             )}
             <div className="min-w-0 flex flex-col justify-center">
-              <p className="font-bold text-white text-base truncate">{data.gaming.name}</p>
-              <p className="text-xs text-white/50 truncate">
-                {getSafeGamingText(data.gaming.details, data.gaming.state, "In Game")}
+              <p className="font-bold text-stone-900 dark:text-white text-base truncate">{data.gaming.name}</p>
+              <p className="text-xs text-stone-500 dark:text-white/50 truncate">
+                {getSafeGamingText(data.gaming.details, data.gaming.state, t("inGame"))}
               </p>
             </div>
           </div>
@@ -132,20 +178,48 @@ export default function ActivityFeed({
       )}
 
       {data?.music?.isPlaying && (
-        <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} className="bg-white/5 border border-white/10 rounded-2xl p-5">
-          <div className="flex items-center gap-2 mb-3">
-            <Disc3 size={14} className="text-green-400 animate-spin-slow" />
-            <span className="text-[10px] font-black uppercase tracking-widest text-white/40">Listening</span>
+        <motion.div 
+          initial={{ opacity: 0, y: 10 }} 
+          animate={{ opacity: 1, y: 0 }} 
+          className="bg-[#1DB954]/5 dark:bg-[#1DB954]/10 border border-[#1DB954]/20 rounded-2xl p-5 relative overflow-hidden group"
+        >
+          <div className="flex items-center justify-between mb-3 relative z-10">
+            <div className="flex items-center gap-2">
+              <Disc3 size={14} className="text-[#1DB954] animate-spin-slow" />
+              <span className="text-[10px] font-black uppercase tracking-widest text-[#1DB954]">{t("listening")}</span>
+            </div>
+            {/* Simple Animated Music Bars */}
+            <div className="flex items-end gap-[2px] h-3">
+              {[0, 1, 2].map((i) => (
+                <motion.div
+                  key={i}
+                  animate={{ height: ["20%", "100%", "20%"] }}
+                  transition={{ 
+                    duration: 0.8, 
+                    repeat: Infinity, 
+                    delay: i * 0.2,
+                    ease: "easeInOut" 
+                  }}
+                  className="w-[2px] bg-[#1DB954] rounded-full"
+                />
+              ))}
+            </div>
           </div>
-          <div className="flex gap-4">
-            <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-2xl relative">
-              <img src={data.music.albumArt} alt="Album Art" className="w-full h-full object-cover" />
+          <div className="flex gap-4 relative z-10">
+            <div className="w-16 h-16 rounded-lg overflow-hidden shrink-0 shadow-md relative group-hover:shadow-xl transition-shadow duration-500">
+              <img 
+                src={data.music.albumArt} 
+                alt="Album Art" 
+                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110" 
+              />
             </div>
             <div className="min-w-0 flex flex-col justify-center">
-              <p className="font-bold text-white text-base truncate">{data.music.track}</p>
-              <p className="text-xs text-white/50 truncate">{data.music.artist}</p>
+              <p className="font-bold text-[#1DB954] dark:text-[#1DB954] text-base truncate leading-tight mb-1">{data.music.track}</p>
+              <p className="text-sm text-stone-600 dark:text-white/60 truncate font-medium">{data.music.artist}</p>
             </div>
           </div>
+          {/* Subtle Spotify branding gradient */}
+          <div className="absolute top-0 right-0 w-32 h-32 bg-[#1DB954]/5 blur-[60px] rounded-full -mr-16 -mt-16 pointer-events-none" />
         </motion.div>
       )}
     </div>
diff --git a/app/components/BentoChat.tsx b/app/components/BentoChat.tsx
index cb7823d..c82aeb7 100644
--- a/app/components/BentoChat.tsx
+++ b/app/components/BentoChat.tsx
@@ -1,8 +1,7 @@
 "use client";
 
 import React, { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { Send, Loader2, MessageSquare, Trash2 } from "lucide-react";
+import { Send, Loader2 } from "lucide-react";
 
 interface Message {
   id: string;
@@ -11,6 +10,13 @@ interface Message {
   timestamp: Date;
 }
 
+interface StoredMessage {
+  id: string;
+  text: string;
+  sender: "user" | "bot";
+  timestamp: string;
+}
+
 export default function BentoChat() {
   const [messages, setMessages] = useState<Message[]>([]);
   const [inputValue, setInputValue] = useState("");
@@ -30,7 +36,7 @@ export default function BentoChat() {
 
       const storedMsgs = localStorage.getItem("chatMessages");
       if (storedMsgs) {
-        setMessages(JSON.parse(storedMsgs).map((m: any) => ({ ...m, timestamp: new Date(m.timestamp) })));
+        setMessages(JSON.parse(storedMsgs).map((m: StoredMessage) => ({ ...m, timestamp: new Date(m.timestamp) })));
       } else {
         setMessages([{ id: "welcome", text: "Hi! Ask me anything about Dennis! 🚀", sender: "bot", timestamp: new Date() }]);
       }
diff --git a/app/components/ClientProviders.tsx b/app/components/ClientProviders.tsx
index 62d8f28..c8031aa 100644
--- a/app/components/ClientProviders.tsx
+++ b/app/components/ClientProviders.tsx
@@ -8,8 +8,8 @@ import ErrorBoundary from "@/components/ErrorBoundary";
 import { AnalyticsProvider } from "@/components/AnalyticsProvider";
 import { ConsentProvider, useConsent } from "./ConsentProvider";
 import { ThemeProvider } from "./ThemeProvider";
+import { motion, AnimatePresence } from "framer-motion";
 
-// Dynamic import with SSR disabled to avoid framer-motion issues
 const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })), {
   ssr: false,
   loading: () => null,
@@ -70,7 +70,17 @@ export default function ClientProviders({
         <ConsentProvider>
           <ThemeProvider attribute="class" defaultTheme="light" enableSystem={false}>
             <GatedProviders mounted={mounted} is404Page={is404Page}>
-              {children}
+              <AnimatePresence mode="wait" initial={false}>
+                <motion.div
+                  key={pathname}
+                  initial={{ opacity: 0, y: 10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  transition={{ duration: 0.4, ease: "easeInOut" }}
+                >
+                  {children}
+                </motion.div>
+              </AnimatePresence>
             </GatedProviders>
           </ThemeProvider>
         </ConsentProvider>
@@ -82,20 +92,15 @@ export default function ClientProviders({
 function GatedProviders({
   children,
   mounted,
-  is404Page,
 }: {
   children: React.ReactNode;
   mounted: boolean;
   is404Page: boolean;
 }) {
   const { consent } = useConsent();
-  const pathname = usePathname();
-
-  const isAdminRoute = pathname.startsWith("/manage") || pathname.startsWith("/editor");
 
   // If consent is not decided yet, treat optional features as off
   const analyticsEnabled = !!consent?.analytics;
-  const chatEnabled = !!consent?.chat;
 
   const content = (
     <ErrorBoundary>
diff --git a/app/components/ClientWrappers.tsx b/app/components/ClientWrappers.tsx
index 50d01b3..a9566e0 100644
--- a/app/components/ClientWrappers.tsx
+++ b/app/components/ClientWrappers.tsx
@@ -27,7 +27,7 @@ function getNormalizedLocale(locale: string): 'en' | 'de' {
   return locale.startsWith('de') ? 'de' : 'en';
 }
 
-export function HeroClient({ locale, translations }: { locale: string; translations: HeroTranslations }) {
+export function HeroClient({ locale }: { locale: string; translations: HeroTranslations }) {
   const normalLocale = getNormalizedLocale(locale);
   const baseMessages = messageMap[normalLocale];
   
@@ -44,7 +44,7 @@ export function HeroClient({ locale, translations }: { locale: string; translati
   );
 }
 
-export function AboutClient({ locale, translations }: { locale: string; translations: AboutTranslations }) {
+export function AboutClient({ locale }: { locale: string; translations: AboutTranslations }) {
   const normalLocale = getNormalizedLocale(locale);
   const baseMessages = messageMap[normalLocale];
   
@@ -61,7 +61,7 @@ export function AboutClient({ locale, translations }: { locale: string; translat
   );
 }
 
-export function ProjectsClient({ locale, translations }: { locale: string; translations: ProjectsTranslations }) {
+export function ProjectsClient({ locale }: { locale: string; translations: ProjectsTranslations }) {
   const normalLocale = getNormalizedLocale(locale);
   const baseMessages = messageMap[normalLocale];
   
@@ -78,7 +78,7 @@ export function ProjectsClient({ locale, translations }: { locale: string; trans
   );
 }
 
-export function ContactClient({ locale, translations }: { locale: string; translations: ContactTranslations }) {
+export function ContactClient({ locale }: { locale: string; translations: ContactTranslations }) {
   const normalLocale = getNormalizedLocale(locale);
   const baseMessages = messageMap[normalLocale];
   
@@ -95,7 +95,7 @@ export function ContactClient({ locale, translations }: { locale: string; transl
   );
 }
 
-export function FooterClient({ locale, translations }: { locale: string; translations: FooterTranslations }) {
+export function FooterClient({ locale }: { locale: string; translations: FooterTranslations }) {
   const normalLocale = getNormalizedLocale(locale);
   const baseMessages = messageMap[normalLocale];
   
diff --git a/app/components/Contact.tsx b/app/components/Contact.tsx
index 6fe4861..706ed41 100644
--- a/app/components/Contact.tsx
+++ b/app/components/Contact.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
-import { Mail, MapPin, Send } from "lucide-react";
+import { Mail, MapPin, Send, Github, Linkedin, ExternalLink } from "lucide-react";
 import { useToast } from "@/components/Toast";
 import { useLocale, useTranslations } from "next-intl";
 import type { JSONContent } from "@tiptap/react";
@@ -169,101 +169,117 @@ const Contact = () => {
   return (
     <section
       id="contact"
-      className="py-24 px-4 relative bg-gradient-to-br from-liquid-teal/15 via-liquid-mint/10 to-liquid-lime/15"
+      className="py-32 px-6 bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500"
     >
       <div className="max-w-7xl mx-auto">
-        {/* Section Header */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-50px" }}
-          transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
-          className="text-center mb-16"
-        >
-          <h2 className="text-4xl md:text-5xl font-bold mb-6 text-stone-900">
-            {t("title")}
-          </h2>
-          {cmsDoc ? (
-            <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-2xl mx-auto mt-4 text-stone-700" />
-          ) : (
-            <p className="text-xl text-stone-700 max-w-2xl mx-auto mt-4">
-              {t("subtitle")}
-            </p>
-          )}
-        </motion.div>
-
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
-          {/* Contact Information */}
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8">
+          
+          {/* Header Card */}
           <motion.div
-            initial={{ opacity: 0, x: -20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
-            className="space-y-8"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            className="md:col-span-12 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>
-              <h3 className="text-2xl font-bold text-stone-900 mb-6">
-                {t("getInTouch")}
-              </h3>
-              <p className="text-stone-700 leading-relaxed">
-                {t("getInTouchBody")}
-              </p>
-            </div>
-
-            {/* Contact Details */}
-            <div className="space-y-4">
-              {contactInfo.map((info, index) => (
-                <motion.a
-                  key={info.title}
-                  href={info.href}
-                  initial={{ opacity: 0, x: -10 }}
-                  whileInView={{ opacity: 1, x: 0 }}
-                  viewport={{ once: true, margin: "-50px" }}
-                  transition={{
-                    duration: 0.5,
-                    delay: index * 0.1,
-                    ease: [0.25, 0.1, 0.25, 1],
-                  }}
-                  whileHover={{
-                    x: 8,
-                    transition: { duration: 0.4, ease: "easeOut" },
-                  }}
-                  className="flex items-center space-x-4 p-4 rounded-2xl glass-card hover:bg-white/80 transition-[background-color,border-color,box-shadow] duration-500 ease-out group border-transparent hover:border-white/70"
-                >
-                  <div className="p-3 bg-white rounded-xl shadow-sm group-hover:shadow-md transition-all">
-                    <info.icon className="w-6 h-6 text-stone-700" />
-                  </div>
-                  <div>
-                    <h4 className="font-semibold text-stone-800">
-                      {info.title}
-                    </h4>
-                    <p className="text-stone-500">{info.value}</p>
-                  </div>
-                </motion.a>
-              ))}
+            <div className="max-w-3xl">
+              <h2 className="text-4xl md:text-7xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase mb-8">
+                {t("title")}<span className="text-liquid-mint">.</span>
+              </h2>
+              {cmsDoc ? (
+                <RichTextClient doc={cmsDoc} className="prose prose-stone dark:prose-invert max-w-none text-xl md:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400" />
+              ) : (
+                <p className="text-xl md:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+                  {t("subtitle")}
+                </p>
+              )}
             </div>
           </motion.div>
 
-          {/* Contact Form */}
+          {/* Info Side (Unified Connect Box) */}
           <motion.div
-            initial={{ opacity: 0, x: 20 }}
-            whileInView={{ opacity: 1, x: 0 }}
-            viewport={{ once: true, margin: "-50px" }}
-            transition={{ duration: 0.5, ease: [0.25, 0.1, 0.25, 1] }}
-            className="glass-card p-8 rounded-3xl bg-white/50 border border-white/70"
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.1 }}
+            className="md:col-span-12 lg:col-span-4 flex flex-col gap-6"
           >
-            <h3 className="text-2xl font-bold text-gray-800 mb-6">
+            <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex-1 flex flex-col justify-between relative overflow-hidden group">
+               <div className="relative z-10">
+                 <div className="flex justify-between items-center mb-12">
+                   <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400">Connect</h4>
+                   <div className="flex items-center gap-2 px-3 py-1 bg-emerald-500/10 rounded-full border border-emerald-500/20">
+                     <span className="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse" />
+                     <span className="text-[10px] font-black uppercase tracking-widest text-emerald-600 dark:text-emerald-400">Online</span>
+                   </div>
+                 </div>
+                 
+                 <div className="space-y-8">
+                   {/* Email */}
+                   <a href="mailto:contact@dk0.dev" className="flex items-center justify-between group/link">
+                     <div className="flex flex-col">
+                       <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-400 mb-1">Email</span>
+                       <span className="text-2xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase group-hover/link:text-liquid-mint transition-colors">contact@dk0.dev</span>
+                     </div>
+                     <div className="w-10 h-10 rounded-full border border-stone-100 dark:border-stone-800 flex items-center justify-center group-hover/link:bg-stone-900 dark:group-hover/link:bg-stone-50 group-hover/link:text-white dark:group-hover/link:text-stone-900 transition-all">
+                       <Mail size={16} />
+                     </div>
+                   </a>
+
+                   <div className="h-px bg-stone-100 dark:bg-stone-800 w-full" />
+
+                   {/* GitHub */}
+                   <a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className="flex items-center justify-between group/link">
+                     <div className="flex flex-col">
+                       <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-400 mb-1">Code</span>
+                       <span className="text-2xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase group-hover/link:text-liquid-mint transition-colors">GitHub</span>
+                     </div>
+                     <div className="w-10 h-10 rounded-full border border-stone-100 dark:border-stone-800 flex items-center justify-center group-hover/link:bg-stone-900 dark:group-hover/link:bg-stone-50 group-hover/link:text-white dark:group-hover/link:text-stone-900 transition-all">
+                       <Github size={16} />
+                     </div>
+                   </a>
+
+                   <div className="h-px bg-stone-100 dark:bg-stone-800 w-full" />
+
+                   {/* LinkedIn */}
+                   <a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className="flex items-center justify-between group/link">
+                     <div className="flex flex-col">
+                       <span className="text-[9px] font-black uppercase tracking-[0.2em] text-stone-400 mb-1">Professional</span>
+                       <span className="text-2xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase group-hover/link:text-[#0077b5] transition-colors">LinkedIn</span>
+                     </div>
+                     <div className="w-10 h-10 rounded-full border border-stone-100 dark:border-stone-800 flex items-center justify-center group-hover/link:bg-stone-900 dark:group-hover/link:bg-stone-50 group-hover/link:text-white dark:group-hover/link:text-stone-900 transition-all">
+                       <Linkedin size={16} />
+                     </div>
+                   </a>
+                 </div>
+               </div>
+               
+               <div className="mt-12 pt-8 border-t border-stone-100 dark:border-stone-800 relative z-10">
+                 <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 mb-2">Location</p>
+                 <div className="flex items-center gap-2 text-stone-900 dark:text-stone-50">
+                   <MapPin size={14} className="text-liquid-mint" />
+                   <span className="font-bold">{tInfo("locationValue")}</span>
+                 </div>
+               </div>
+            </div>
+          </motion.div>
+
+          {/* Form Side */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.2 }}
+            className="md:col-span-12 lg:col-span-8 bg-white dark:bg-stone-900 rounded-[3rem] p-10 md:p-12 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
+          >
+            <h3 className="text-2xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter mb-10">
               {tForm("title")}
             </h3>
 
-            <form onSubmit={handleSubmit} className="space-y-6">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                <div>
-                  <label
-                    htmlFor="name"
-                    className="block text-sm font-medium text-stone-600 mb-2"
-                  >
-                    Name <span className="text-liquid-rose">*</span>
+            <form onSubmit={handleSubmit} className="space-y-8">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+                <div className="space-y-2">
+                  <label htmlFor="name" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 pl-4">
+                    {tForm("labels.name")}
                   </label>
                   <input
                     type="text"
@@ -273,32 +289,14 @@ const Contact = () => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     required
-                    className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all ${
-                      errors.name && touched.name
-                        ? "border-red-400 focus:ring-red-400"
-                        : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
-                    }`}
+                    className="w-full px-6 py-4 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-2xl text-stone-900 dark:text-stone-50 focus:outline-none focus:ring-2 focus:ring-liquid-mint/50 transition-all font-medium"
                     placeholder={tForm("placeholders.name")}
-                    aria-invalid={
-                      errors.name && touched.name ? "true" : "false"
-                    }
-                    aria-describedby={
-                      errors.name && touched.name ? "name-error" : undefined
-                    }
                   />
-                  {errors.name && touched.name && (
-                    <p id="name-error" className="mt-1 text-sm text-red-500">
-                      {errors.name}
-                    </p>
-                  )}
                 </div>
 
-                <div>
-                  <label
-                    htmlFor="email"
-                    className="block text-sm font-medium text-stone-600 mb-2"
-                  >
-                    Email <span className="text-liquid-rose">*</span>
+                <div className="space-y-2">
+                  <label htmlFor="email" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 pl-4">
+                    {tForm("labels.email")}
                   </label>
                   <input
                     type="email"
@@ -308,33 +306,15 @@ const Contact = () => {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     required
-                    className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all ${
-                      errors.email && touched.email
-                        ? "border-red-400 focus:ring-red-400"
-                        : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
-                    }`}
+                    className="w-full px-6 py-4 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-2xl text-stone-900 dark:text-stone-50 focus:outline-none focus:ring-2 focus:ring-liquid-mint/50 transition-all font-medium"
                     placeholder={tForm("placeholders.email")}
-                    aria-invalid={
-                      errors.email && touched.email ? "true" : "false"
-                    }
-                    aria-describedby={
-                      errors.email && touched.email ? "email-error" : undefined
-                    }
                   />
-                  {errors.email && touched.email && (
-                    <p id="email-error" className="mt-1 text-sm text-red-500">
-                      {errors.email}
-                    </p>
-                  )}
                 </div>
               </div>
 
-              <div>
-                <label
-                  htmlFor="subject"
-                  className="block text-sm font-medium text-stone-600 mb-2"
-                >
-                  Subject <span className="text-liquid-rose">*</span>
+              <div className="space-y-2">
+                <label htmlFor="subject" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 pl-4">
+                  {tForm("labels.subject")}
                 </label>
                 <input
                   type="text"
@@ -344,34 +324,14 @@ const Contact = () => {
                   onChange={handleChange}
                   onBlur={handleBlur}
                   required
-                  className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all ${
-                    errors.subject && touched.subject
-                      ? "border-red-400 focus:ring-red-400"
-                      : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
-                  }`}
+                  className="w-full px-6 py-4 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-2xl text-stone-900 dark:text-stone-50 focus:outline-none focus:ring-2 focus:ring-liquid-mint/50 transition-all font-medium"
                   placeholder={tForm("placeholders.subject")}
-                  aria-invalid={
-                    errors.subject && touched.subject ? "true" : "false"
-                  }
-                  aria-describedby={
-                    errors.subject && touched.subject
-                      ? "subject-error"
-                      : undefined
-                  }
                 />
-                {errors.subject && touched.subject && (
-                  <p id="subject-error" className="mt-1 text-sm text-red-500">
-                    {errors.subject}
-                  </p>
-                )}
               </div>
 
-              <div>
-                <label
-                  htmlFor="message"
-                  className="block text-sm font-medium text-stone-600 mb-2"
-                >
-                  Message <span className="text-liquid-rose">*</span>
+              <div className="space-y-2">
+                <label htmlFor="message" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-400 pl-4">
+                  {tForm("labels.message")}
                 </label>
                 <textarea
                   id="message"
@@ -380,53 +340,25 @@ const Contact = () => {
                   onChange={handleChange}
                   onBlur={handleBlur}
                   required
-                  rows={6}
-                  className={`w-full px-4 py-3 bg-white/50 backdrop-blur-sm border rounded-xl text-stone-800 placeholder-stone-400 focus:outline-none focus:ring-2 transition-all resize-none ${
-                    errors.message && touched.message
-                      ? "border-red-400 focus:ring-red-400"
-                      : "border-white/60 focus:ring-liquid-blue focus:border-transparent"
-                  }`}
+                  rows={5}
+                  className="w-full px-6 py-4 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-2xl text-stone-900 dark:text-stone-50 focus:outline-none focus:ring-2 focus:ring-liquid-mint/50 transition-all font-medium resize-none"
                   placeholder={tForm("placeholders.message")}
-                  aria-invalid={
-                    errors.message && touched.message ? "true" : "false"
-                  }
-                  aria-describedby={
-                    errors.message && touched.message
-                      ? "message-error"
-                      : undefined
-                  }
                 />
-                <div className="flex justify-between items-center mt-1">
-                  {errors.message && touched.message ? (
-                    <p id="message-error" className="text-sm text-red-500">
-                      {errors.message}
-                    </p>
-                  ) : (
-                    <span></span>
-                  )}
-                  <span className="text-xs text-stone-400">
-                    {tForm("characters", { count: formData.message.length })}
-                  </span>
-                </div>
               </div>
 
               <motion.button
                 type="submit"
                 disabled={isSubmitting}
-                whileHover={!isSubmitting ? { scale: 1.02, y: -2 } : {}}
-                whileTap={!isSubmitting ? { scale: 0.98 } : {}}
-                transition={{ duration: 0.3, ease: "easeOut" }}
-                className="w-full py-4 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center space-x-2 disabled:hover:scale-100 disabled:hover:translate-y-0 bg-stone-900 text-white rounded-xl hover:bg-stone-950 transition-all duration-500 ease-out shadow-lg hover:shadow-xl"
+                whileHover={{ scale: 1.01 }}
+                whileTap={{ scale: 0.99 }}
+                className="w-full py-5 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl font-black text-xs uppercase tracking-[0.3em] flex items-center justify-center gap-3 shadow-xl hover:shadow-2xl transition-all disabled:opacity-50"
               >
                 {isSubmitting ? (
-                  <>
-                    <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                    <span>{tForm("sending")}</span>
-                  </>
+                  <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin" />
                 ) : (
                   <>
-                    <Send size={20} />
-                    <span className="text-cream">{tForm("send")}</span>
+                    <Send size={16} />
+                    {tForm("send")}
                   </>
                 )}
               </motion.button>
diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
index 52cb273..25c6a2d 100644
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@@ -3,8 +3,7 @@
 import React from "react";
 import Link from "next/link";
 import { useLocale, useTranslations } from "next-intl";
-import { Github, Linkedin, Mail, ArrowUp } from "lucide-react";
-import { motion } from "framer-motion";
+import { ArrowUp } from "lucide-react";
 
 const Footer = () => {
   const locale = useLocale();
@@ -19,13 +18,6 @@ const Footer = () => {
     <footer className="bg-[#fdfcf8] dark:bg-stone-950 pt-32 pb-12 px-6 overflow-hidden transition-colors duration-500">
       <div className="max-w-7xl mx-auto">
         
-        {/* Huge Outlined Name */}
-        <div className="relative mb-24 select-none pointer-events-none">
-          <h2 className="text-[12vw] font-black leading-none text-stone-900/5 dark:text-white/5 uppercase tracking-tighter text-center">
-            Dennis Konkol
-          </h2>
-        </div>
-
         <div className="grid grid-cols-1 md:grid-cols-12 gap-12 items-end">
           {/* Copyright & Info */}
           <div className="md:col-span-4 space-y-6">
diff --git a/app/components/Grain.tsx b/app/components/Grain.tsx
new file mode 100644
index 0000000..b5dacd0
--- /dev/null
+++ b/app/components/Grain.tsx
@@ -0,0 +1,30 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+const Grain = () => {
+  return (
+    <div
+      className="pointer-events-none fixed inset-0 z-[9999] h-full w-full overflow-hidden"
+    >
+      <div 
+        className="absolute inset-[-200%] h-[400%] w-[400%] bg-[url('/images/grain.png')] bg-repeat opacity-[0.03] dark:opacity-[0.05]"
+        style={{ transform: 'translate3d(0, 0, 0)' }}
+      />
+      <motion.div
+        animate={{
+          x: [0, -50, 20, -10, 40, -20, 0],
+          y: [0, 20, -30, 10, -20, 30, 0],
+        }}
+        transition={{
+          duration: 0.5,
+          repeat: Infinity,
+          ease: "linear",
+        }}
+        className="absolute inset-[-200%] h-[400%] w-[400%] bg-[url('/images/grain.png')] bg-repeat opacity-[0.03] dark:opacity-[0.05]"
+      />
+    </div>
+  );
+};
+
+export default Grain;
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 8f9a8c5..6aa95bc 100644
--- a/app/components/Hero.tsx
+++ b/app/components/Hero.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { ArrowDown, Github, Linkedin, Mail, Code, Zap } from "lucide-react";
+import { Github, Linkedin, Mail } from "lucide-react";
 import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
 import { useEffect, useState } from "react";
@@ -53,7 +53,7 @@ const Hero = () => {
               transition={{ duration: 0.5 }}
               className="inline-flex items-center gap-3 px-5 py-2.5 rounded-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 shadow-sm"
             >
-              <span className="w-2.5 h-2.5 bg-green-500 rounded-full animate-pulse" />
+              <span className="w-2.5 h-2.5 bg-emerald-500 rounded-full animate-pulse" />
               <span className="font-mono text-[10px] font-black uppercase tracking-[0.3em] text-stone-500">{getLabel("hero.badge", "Student & Self-Hoster")}</span>
             </motion.div>
 
@@ -70,7 +70,7 @@ const Hero = () => {
                 initial={{ opacity: 0, x: -50 }}
                 animate={{ opacity: 1, x: 0 }}
                 transition={{ duration: 0.8, delay: 0.2 }}
-                className="block text-transparent bg-clip-text bg-gradient-to-r from-liquid-mint via-liquid-sky to-liquid-purple pb-4"
+                className="block text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-liquid-sky to-liquid-purple pb-4"
               >
                 {getLabel("hero.line2", "Stuff.")}
               </motion.span>
@@ -95,29 +95,27 @@ const Hero = () => {
                 <div className="absolute inset-0 bg-white/10 -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
                 {t("ctaWork")}
               </a>
-              <div className="flex gap-4">
-                {[
-                  { icon: Github, href: "https://github.com/Denshooter" },
-                  { icon: Linkedin, href: "https://linkedin.com/in/dkonkol" },
-                  { icon: Mail, href: "mailto:contact@dk0.dev" }
-                ].map((social, i) => (
-                  <a key={i} href={social.href} target="_blank" rel="noopener noreferrer" className="p-5 bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-[1.5rem] text-stone-400 hover:text-stone-900 dark:hover:text-white transition-all shadow-sm hover:shadow-xl">
-                    <social.icon size={22} />
-                  </a>
-                ))}
-              </div>
+              <a href="#contact" className="font-black text-xs uppercase tracking-[0.2em] text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors">
+                {t("ctaContact")}
+              </a>
             </motion.div>
           </div>
 
           {/* Right: The Photo */}
           <motion.div 
-            initial={{ opacity: 0, scale: 0.8, rotate: 5 }}
-            animate={{ opacity: 1, scale: 1, rotate: 0 }}
-            transition={{ duration: 1, ease: [0.25, 0.1, 0.25, 1] }}
+            initial={{ opacity: 0, scale: 0.8 }}
+            animate={{ 
+              opacity: 1, 
+              scale: 1
+            }}
+            transition={{ 
+              opacity: { duration: 1 },
+              scale: { duration: 1 }
+            }}
             className="relative w-72 h-72 md:w-[500px] md:h-[500px] shrink-0 mt-12 lg:mt-0"
           >
-            <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl animate-pulse" />
-            <div className="relative w-full h-full rounded-[4rem] overflow-hidden border-[16px] border-white dark:border-stone-900 shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]">
+            <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
+            <div className="relative w-full h-full rounded-[4rem] overflow-hidden border-[24px] border-white dark:border-stone-900 shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]">
               <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority />
             </div>
             
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index dbd439f..5b2fd65 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -27,7 +27,7 @@ const Projects = () => {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
   const locale = useLocale();
-  const t = useTranslations("home.projects");
+  useTranslations("home.projects");
 
   useEffect(() => {
     const loadProjects = async () => {
diff --git a/app/globals.css b/app/globals.css
index c34ce66..bacb671 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,6 +2,20 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Grain Effect */
+.grain-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  pointer-events: none;
+  opacity: 0.04;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+}
+
 :root {
     /* Warm Brown & Off-White Palette */
     --background: #faf8f3; /* Warm off-white */
diff --git a/app/layout.tsx b/app/layout.tsx
index bf4b3c4..a5433c1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -34,6 +34,7 @@ export default async function RootLayout({
         <meta charSet="utf-8" />
       </head>
       <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
+        <div className="grain-overlay" aria-hidden="true" />
         <ShaderGradientBackground />
         <ClientProviders>{children}</ClientProviders>
       </body>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 1bf0115..5544791 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { motion } from "framer-motion";
-import { Home, ArrowLeft, Search, Ghost, RefreshCcw } from "lucide-react";
+import { Home, ArrowLeft, Search, Ghost, RefreshCcw, Terminal } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
@@ -17,106 +17,93 @@ export default function NotFound() {
   if (!mounted) return null;
 
   return (
-    <div className="min-h-screen flex items-center justify-center bg-[#fdfcf8] dark:bg-stone-950 overflow-hidden relative">
-      {/* Liquid Background Blobs */}
-      <motion.div
-        className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-liquid-mint/20 dark:bg-liquid-mint/10 rounded-full blur-[120px]"
-        animate={{
-          scale: [1, 1.2, 1],
-          x: [0, 50, 0],
-          y: [0, 30, 0],
-        }}
-        transition={{ duration: 15, repeat: Infinity, ease: "easeInOut" }}
-      />
-      <motion.div
-        className="absolute bottom-[-10%] right-[-10%] w-[40%] h-[40%] bg-liquid-rose/20 dark:bg-liquid-rose/10 rounded-full blur-[120px]"
-        animate={{
-          scale: [1.2, 1, 1.2],
-          x: [0, -50, 0],
-          y: [0, -30, 0],
-        }}
-        transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
-      />
-
-      <div className="relative z-10 max-w-2xl w-full px-6 text-center">
-        {/* Large 404 with Liquid Animation */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, ease: [0.25, 0.1, 0.25, 1] }}
-          className="relative inline-block mb-8"
-        >
-          <h1 className="text-[12rem] md:text-[16rem] font-black text-stone-900/5 dark:text-stone-100/5 select-none leading-none">
-            404
-          </h1>
+    <main className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 py-24 px-6 flex items-center justify-center transition-colors duration-500">
+      <div className="max-w-7xl mx-auto w-full">
+        <div className="grid grid-cols-1 md:grid-cols-12 gap-6 md:gap-8 max-w-5xl mx-auto">
+          
+          {/* Main Error Card */}
           <motion.div
-            className="absolute inset-0 flex items-center justify-center"
-            animate={{ y: [0, -10, 0] }}
-            transition={{ duration: 4, repeat: Infinity, ease: "easeInOut" }}
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="md:col-span-12 lg:col-span-8 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 flex flex-col justify-between min-h-[400px]"
           >
-            <Ghost size={120} className="text-stone-800 dark:text-stone-200 opacity-80" />
+            <div>
+              <div className="flex items-center gap-3 mb-12">
+                <div className="w-10 h-10 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900 font-black text-xs">
+                  404
+                </div>
+                <span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-400">Error Report</span>
+              </div>
+              <h1 className="text-5xl md:text-8xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50 leading-[0.8] mb-8">
+                Page not <br/>Found<span className="text-liquid-mint">.</span>
+              </h1>
+              <p className="text-xl md:text-2xl font-light text-stone-500 max-w-md leading-relaxed">
+                The content you are looking for has been moved, deleted, or never existed.
+              </p>
+            </div>
+
+            <div className="mt-12 flex flex-wrap gap-4">
+              <Link
+                href="/"
+                className="group relative px-10 py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl font-black text-xs uppercase tracking-[0.2em] shadow-xl hover:scale-105 transition-all"
+              >
+                Return Home
+              </Link>
+              <button
+                onClick={() => router.back()}
+                className="px-10 py-4 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 border border-stone-200 dark:border-stone-700 rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:bg-stone-50 dark:hover:bg-stone-700 transition-all"
+              >
+                Go Back
+              </button>
+            </div>
           </motion.div>
-        </motion.div>
 
-        {/* Content Card */}
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.2, ease: [0.25, 0.1, 0.25, 1] }}
-          className="bg-white/40 dark:bg-stone-900/40 backdrop-blur-2xl border border-white/60 dark:border-white/10 rounded-[2.5rem] p-8 md:p-12 shadow-[0_20px_50px_rgba(0,0,0,0.05)] dark:shadow-none"
-        >
-          <h2 className="text-3xl md:text-4xl font-bold text-stone-900 dark:text-stone-50 mb-4 font-sans tracking-tight">
-            Lost in the Liquid.
-          </h2>
-          <p className="text-stone-600 dark:text-stone-400 text-lg md:text-xl font-light leading-relaxed mb-10 max-w-md mx-auto">
-            The page you are looking for has evaporated or never existed in this dimension.
-          </p>
+          {/* Sidebar Cards */}
+          <div className="md:col-span-12 lg:col-span-4 flex flex-col gap-6">
+            {/* Search/Explore Projects */}
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.1 }}
+              className="bg-stone-900 rounded-[2.5rem] p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex-1 flex flex-col justify-between"
+            >
+              <div className="relative z-10">
+                <Search className="text-liquid-mint mb-6" size={32} />
+                <h3 className="text-2xl font-black uppercase tracking-tighter mb-2">Explore Work</h3>
+                <p className="text-stone-400 text-sm font-medium">Maybe what you need is in my project archive?</p>
+              </div>
+              <Link 
+                href="/projects"
+                className="mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-liquid-mint group-hover:gap-4 transition-all"
+              >
+                View Projects <ArrowLeft className="rotate-180" size={14} />
+              </Link>
+              <div className="absolute top-0 right-0 w-32 h-32 bg-liquid-mint/5 blur-3xl rounded-full -mr-16 -mt-16" />
+            </motion.div>
 
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            <Link
-              href="/"
-              className="flex items-center justify-center gap-3 px-8 py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl font-bold hover:scale-[1.02] active:scale-[0.98] transition-all shadow-lg hover:shadow-xl dark:shadow-none group"
+            {/* Visit the Lab */}
+            <motion.div
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.2 }}
+              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-1 flex flex-col justify-between group"
             >
-              <Home size={20} className="group-hover:-translate-y-0.5 transition-transform" />
-              <span>Back Home</span>
-            </Link>
-            
-            <button
-              onClick={() => router.back()}
-              className="flex items-center justify-center gap-3 px-8 py-4 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 border border-stone-200 dark:border-stone-700 rounded-2xl font-bold hover:bg-stone-50 dark:hover:bg-stone-700 hover:scale-[1.02] active:scale-[0.98] transition-all shadow-sm group"
-            >
-              <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
-              <span>Go Back</span>
-            </button>
+              <div className="relative z-10">
+                <Terminal className="text-liquid-purple mb-6" size={32} />
+                <h3 className="text-2xl font-black uppercase tracking-tighter mb-2 text-stone-900 dark:text-stone-50">Technical</h3>
+                <p className="text-stone-500 dark:text-stone-400 text-sm font-medium">Check out my collection of code snippets and notes.</p>
+              </div>
+              <Link 
+                href="/snippets"
+                className="mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
+              >
+                Enter the Lab <ArrowLeft className="rotate-180" size={14} />
+              </Link>
+            </motion.div>
           </div>
 
-          <div className="mt-8 pt-8 border-t border-stone-100 dark:border-stone-800">
-            <Link
-              href="/projects"
-              className="inline-flex items-center gap-2 text-stone-500 dark:text-stone-400 hover:text-stone-900 dark:hover:text-stone-100 transition-colors font-medium group"
-            >
-              <Search size={18} className="group-hover:rotate-12 transition-transform" />
-              <span>Looking for my work? Explore projects</span>
-            </Link>
-          </div>
-        </motion.div>
-
-        {/* Floating Help Badge */}
-        <motion.div
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 1 }}
-          className="mt-12"
-        >
-          <button 
-            onClick={() => window.location.reload()}
-            className="inline-flex items-center gap-2 px-4 py-2 bg-stone-100 dark:bg-stone-800 rounded-full text-stone-500 dark:text-stone-400 text-xs font-mono hover:text-stone-800 dark:hover:text-stone-200 transition-colors"
-          >
-            <RefreshCcw size={12} />
-            <span>ERR_PAGE_NOT_FOUND_404</span>
-          </button>
-        </motion.div>
+        </div>
       </div>
-    </div>
+    </main>
   );
 }
diff --git a/docs/DESIGN_OVERHAUL_LOG.md b/docs/DESIGN_OVERHAUL_LOG.md
new file mode 100644
index 0000000..12a488b
--- /dev/null
+++ b/docs/DESIGN_OVERHAUL_LOG.md
@@ -0,0 +1,33 @@
+# Design Overhaul Log: Editorial Bento Transformation (Feb 2026)
+
+## Zielsetzung
+Transformation des Portfolios von einem Standard-Layout in ein hochkarätiges "Editorial Bento Grid" Design. Fokus auf Typografie, Dynamik (Directus CMS) und Premium UX ("Liquid" Aesthetic).
+
+## Meilensteine & Kernänderungen
+
+### 1. UI/UX Architektur
+- **Editorial Bento Grid:** Umstellung der gesamten Seite auf ein modulares Grid-System.
+- **Liquid Aesthetic:** Nutzung von Glassmorphismus, extremen Abrundungen (`rounded-[3rem]`) und weichen Verläufen (`liquid-mint`, `liquid-purple`).
+- **Typography-First:** Einsatz von riesigen, uppercase Headlines mit markanten Endpunkten (z.B. `Archive.`) für einen Magazin-Look.
+
+### 2. Dynamische Features
+- **ActivityFeed 2.0:** 
+    - Integration von Echtzeit-Status (Spotify, Coding, Gaming) direkt in die Grid-Zellen.
+    - **Quote Carousel:** Automatischer Wechsel zwischen nerdigen Zitaten (Dijkstra, Einstein etc.) alle 10s im Idle-Mode.
+    - Fallback-Logik für CMS-gesteuerte Quotes (`about.quote.idle`).
+- **Skeleton Loading:** Implementierung von Shimmer-Skeletons für alle dynamischen Daten (Hero, Bento, Library, Projects), um Layout-Shift zu verhindern.
+
+### 3. Navigation & Struktur
+- **Minimalist Dock:** Die Navbar wurde zu einer schwebenden, asymmetrischen "Pill" transformiert.
+- **Intelligent Back Button:** Die Projektdetailseiten erkennen nun den Ursprung des Nutzers (Home vs. Archiv) und führen kontextsensitiv zurück.
+- **Unified Sub-Pages:** Übertragung des Bento-Stils auf `/books`, `/projects`, `/legal-notice` und `/privacy-policy`.
+
+### 4. Technische Stabilität
+- **TypeScript Hardening:** Alle `any`-Typen in den neuen Komponenten wurden durch strikte Interfaces (`ProjectDetailData`, `ProjectListItem`) ersetzt.
+- **Docker Ready:** Korrektur von Build-Errors (Klammerfehler, fehlende Imports), sodass das Image erfolgreich baut.
+- **Test Suite:** Update der Jest-Tests auf das neue Design und Polyfilling von `Request`/`Response` für API-Tests.
+
+## Design Mandate für die Zukunft
+- Kontrastreiches Grün (`emerald-500`) für helle Hintergründe verwenden.
+- Animationen immer mit Framer Motion (Staggered Effects, Floating).
+- Keine Overlays; alle Widgets müssen Teil des Grids sein.
diff --git a/jest.setup.ts b/jest.setup.ts
index 9cf7cb1..2bb847c 100644
--- a/jest.setup.ts
+++ b/jest.setup.ts
@@ -31,15 +31,15 @@ Object.defineProperty(window, "IntersectionObserver", {
 
 // Polyfill Headers/Request/Response
 if (!global.Headers) {
-  // @ts-ignore
+  // @ts-expect-error - Polyfilling global Headers for jest environment
   global.Headers = Headers;
 }
 if (!global.Request) {
-  // @ts-ignore
+  // @ts-expect-error - Polyfilling global Request for jest environment
   global.Request = Request;
 }
 if (!global.Response) {
-  // @ts-ignore
+  // @ts-expect-error - Polyfilling global Response for jest environment
   global.Response = Response;
 }
 
@@ -49,13 +49,14 @@ jest.mock('next/server', () => {
   return {
     ...actual,
     NextResponse: {
-      json: (data: any, init?: any) => {
-        const res = new Response(JSON.stringify(data), init);
+      json: (data: Record<string, unknown>, init?: unknown) => {
+        // Use global Response from whatwg-fetch
+        const res = new (global as any).Response(JSON.stringify(data), init);
         res.headers.set('Content-Type', 'application/json');
         return res;
       },
       next: () => ({ headers: new Headers() }),
-      redirect: (url: string) => ({ headers: new Headers(), status: 302 }),
+      redirect: (_url: string) => ({ headers: new Headers(), status: 302 }),
     },
   };
 });
diff --git a/lib/directus.ts b/lib/directus.ts
index 8aacef7..5044e0d 100644
--- a/lib/directus.ts
+++ b/lib/directus.ts
@@ -24,7 +24,11 @@ function toDirectusLocale(locale: string): string {
 
 interface FetchOptions {
   method?: 'GET' | 'POST' | 'PATCH' | 'DELETE';
-  body?: any;
+  body?: {
+    query?: string;
+    variables?: Record<string, unknown>;
+    [key: string]: unknown;
+  };
 }
 
 async function directusRequest<T>(
@@ -75,9 +79,9 @@ async function directusRequest<T>(
     }
     
     return data?.data || null;
-  } catch (error: any) {
+  } catch (error: unknown) {
     // Timeout oder Network Error - stille fallback
-    if (error?.name === 'TimeoutError' || error?.name === 'AbortError') {
+    if (error && typeof error === 'object' && 'name' in error && (error.name === 'TimeoutError' || error.name === 'AbortError')) {
       if (process.env.NODE_ENV === 'development') {
         console.error('Directus timeout');
       }
@@ -85,7 +89,8 @@ async function directusRequest<T>(
     }
     // Andere Errors nur in dev loggen
     if (process.env.NODE_ENV === 'development') {
-      console.error('Directus request failed:', error?.message);
+      const message = error && typeof error === 'object' && 'message' in error ? String(error.message) : 'Unknown error';
+      console.error('Directus request failed:', message);
     }
     return null;
   }
@@ -107,11 +112,20 @@ export async function getMessages(locale: string): Promise<Record<string, string
 
   try {
     const result = await directusRequest('', { body: { query } });
-    const messages = (result as any)?.messages || [];
+    interface MessageData {
+      messages: Array<{
+        key: string;
+        translations?: Array<{
+          languages_code?: { code: string };
+          value?: string;
+        }>;
+      }>;
+    }
+    const messages = (result as MessageData | null)?.messages || [];
     const dictionary: Record<string, string> = {};
 
-    messages.forEach((m: any) => {
-      const trans = m.translations?.find((t: any) => t.languages_code?.code === directusLocale);
+    messages.forEach((m) => {
+      const trans = m.translations?.find((t) => t.languages_code?.code === directusLocale);
       if (trans?.value) dictionary[m.key] = trans.value;
     });
 
@@ -140,21 +154,35 @@ export async function getMessage(key: string, locale: string): Promise<string |
 
   try {
     const result = await directusRequest('', { body: { query } });
-    const messages = (result as any)?.messages;
+    interface SingleMessageData {
+      messages: Array<{
+        translations?: Array<{
+          languages_code?: { code: string };
+          value?: string;
+        }>;
+      }>;
+    }
+    const messages = (result as SingleMessageData | null)?.messages;
     if (!messages || messages.length === 0) return null;
     
     const translations = messages[0]?.translations || [];
-    const translation = translations.find((t: any) => t.languages_code?.code === directusLocale);
+    const translation = translations.find((t) => t.languages_code?.code === directusLocale);
     return translation?.value || null;
   } catch (error) {
     return null;
   }
 }
 
+export interface ContentPage {
+  slug: string;
+  content?: string;
+  [key: string]: unknown;
+}
+
 export async function getContentPage(
   slug: string,
   locale: string
-): Promise<any | null> {
+): Promise<ContentPage | null> {
   const directusLocale = toDirectusLocale(locale);
   const query = `
     query {
@@ -182,7 +210,10 @@ export async function getContentPage(
       { body: { query } }
     );
 
-    const pages = (result as any)?.content_pages || [];
+    interface ContentPagesResult {
+      content_pages: ContentPage[];
+    }
+    const pages = (result as ContentPagesResult | null)?.content_pages || [];
     if (pages.length === 0) {
       // Try without locale filter
       const fallbackQuery = `
@@ -200,7 +231,7 @@ export async function getContentPage(
         }
       `;
       const fallbackResult = await directusRequest('', { body: { query: fallbackQuery } });
-      const fallbackPages = (fallbackResult as any)?.content_pages || [];
+      const fallbackPages = (fallbackResult as ContentPagesResult | null)?.content_pages || [];
       return fallbackPages[0] || null;
     }
 
@@ -301,7 +332,19 @@ export async function getTechStack(locale: string): Promise<TechStackCategory[]
       { body: { query: categoriesQuery } }
     );
 
-    const categories = (categoriesResult as any)?.tech_stack_categories;
+    interface TechStackCategoriesResult {
+      tech_stack_categories: Array<{
+        id: string;
+        key: string;
+        icon: string;
+        sort: number;
+        translations?: Array<{
+          languages_code?: { code: string };
+          name?: string;
+        }>;
+      }>;
+    }
+    const categories = (categoriesResult as TechStackCategoriesResult | null)?.tech_stack_categories;
 
     if (!categories || categories.length === 0) {
       if (process.env.NODE_ENV === 'development') {
@@ -325,15 +368,25 @@ export async function getTechStack(locale: string): Promise<TechStackCategory[]
     );
 
     const itemsData = await itemsResponse.json();
-    const allItems = itemsData?.data || [];
+    interface ItemsResponseData {
+      data: Array<{
+        id: string;
+        name: string;
+        category: string | number;
+        url?: string;
+        icon_url?: string;
+        sort: number;
+      }>;
+    }
+    const allItems = (itemsData as ItemsResponseData | null)?.data || [];
 
     if (process.env.NODE_ENV === 'development') {
       console.log('[getTechStack] Fetched items:', allItems.length);
     }
 
     // Group items by category
-    const categoriesWithItems = categories.map((cat: any) => {
-      const categoryItems = allItems.filter((item: any) => 
+    const categoriesWithItems = categories.map((cat) => {
+      const categoryItems = allItems.filter((item) => 
         item.category === cat.id || item.category === parseInt(cat.id)
       );
       
@@ -346,6 +399,7 @@ export async function getTechStack(locale: string): Promise<TechStackCategory[]
           itemsToUse = categoryFallback.items.map((name, idx) => ({
             id: `fallback-${cat.key}-${idx}`,
             name: name,
+            category: cat.id,
             url: undefined,
             icon_url: undefined,
             sort: idx + 1
@@ -509,7 +563,7 @@ export async function getBookReviews(locale: string): Promise<BookReview[] | nul
 
 // Projects Types
 export interface Project {
-  id: string;
+  id: string | number; // Allow both string (from Directus) and number (from Prisma)
   slug: string;
   title: string;
   description: string;
@@ -798,3 +852,57 @@ export async function getProjectBySlug(
     return null;
   }
 }
+
+// Snippets Types
+export interface Snippet {
+  id: string;
+  title: string;
+  category: string;
+  code: string;
+  description: string;
+  language: string;
+}
+
+/**
+ * Get Snippets from Directus
+ */
+export async function getSnippets(limit = 10, featured?: boolean): Promise<Snippet[] | null> {
+  const filters = ['status: { _eq: "published" }'];
+  if (featured !== undefined) {
+    filters.push(`featured: { _eq: ${featured} }`);
+  }
+  const filterString = `filter: { _and: [{ ${filters.join(' }, { ')} }] }`;
+
+  const query = `
+    query {
+      snippets(
+        ${filterString}
+        limit: ${limit}
+      ) {
+        id
+        title
+        category
+        code
+        description
+        language
+      }
+    }
+  `;
+
+  try {
+    const result = await directusRequest(
+      '',
+      { body: { query } }
+    );
+
+    const snippets = (result as any)?.snippets;
+    if (!snippets || snippets.length === 0) {
+      return null;
+    }
+
+    return snippets;
+  } catch (error) {
+    console.error('Failed to fetch snippets:', error);
+    return null;
+  }
+}
diff --git a/messages/de.json b/messages/de.json
index 6a12cc4..f759069 100644
--- a/messages/de.json
+++ b/messages/de.json
@@ -70,6 +70,13 @@
         "finishedAt": "Beendet am",
         "showMore": "{count} weitere anzeigen",
         "showLess": "Weniger anzeigen"
+      },
+      "activity": {
+        "idleStatus": "System im Leerlauf / Geist aktiv",
+        "codingNow": "Gerade am Coden",
+        "gaming": "Am Zocken",
+        "listening": "Hört gerade",
+        "inGame": "Im Spiel"
       }
     },
     "projects": {
diff --git a/messages/en.json b/messages/en.json
index af6c421..7ef5bad 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -71,6 +71,13 @@
         "finishedAt": "Finished",
         "showMore": "{count} more",
         "showLess": "Show less"
+      },
+      "activity": {
+        "idleStatus": "System Idle / Mind Active",
+        "codingNow": "Coding Now",
+        "gaming": "Gaming",
+        "listening": "Listening",
+        "inGame": "In Game"
       }
     },
     "projects": {
diff --git a/next.config.ts b/next.config.ts
index 5224a12..4582d4d 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -72,11 +72,15 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "dki.one",
       },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
     ],
   },
 
   // Webpack configuration
-  webpack: (config, { dev, isServer }) => {
+  webpack: (config, { dev, isServer, webpack }) => {
     // Fix for module resolution issues
     config.resolve.fallback = {
       ...config.resolve.fallback,
@@ -103,6 +107,14 @@ const nextConfig: NextConfig = {
             maxSize: 200000, // keep chunks <200KB to avoid large-string serialization
           },
         };
+
+        // Suppress framer-motion source map errors in development
+        config.plugins.push(
+          new webpack.SourceMapDevToolPlugin({
+            filename: "[file].map",
+            exclude: [/framer-motion/, /LayoutGroupContext/],
+          })
+        );
       }
     }
 
@@ -114,9 +126,9 @@ const nextConfig: NextConfig = {
     const csp =
       process.env.NODE_ENV === "production"
         ? // Avoid `unsafe-eval` in production (reduces XSS impact and enables stronger CSP)
-          "default-src 'self'; script-src 'self' 'unsafe-inline'; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
-        : // Dev CSP: allow eval for tooling compatibility
-          "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';";
+          "default-src 'self'; script-src 'self' 'unsafe-inline'; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: blob: https:; connect-src 'self' https://*.dk0.dev; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; worker-src 'self' blob:;"
+        : // Dev CSP: allow eval for tooling compatibility, and localhost for HMR/API
+          "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: blob: https: http://localhost:3000; connect-src 'self' http://localhost:3000 ws://localhost:3000 https://*.dk0.dev; frame-ancestors 'none'; base-uri 'self'; form-action 'self'; worker-src 'self' blob:;";
 
     return [
       {
diff --git a/scripts/setup-snippets.js b/scripts/setup-snippets.js
new file mode 100644
index 0000000..ea55b19
--- /dev/null
+++ b/scripts/setup-snippets.js
@@ -0,0 +1,78 @@
+
+const fetch = require('node-fetch');
+require('dotenv').config();
+
+const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://cms.dk0.dev';
+const DIRECTUS_TOKEN = process.env.DIRECTUS_STATIC_TOKEN;
+
+async function setupSnippets() {
+  console.log('📦 Setting up Snippets collection...');
+
+  // 1. Create Collection
+  try {
+    await fetch(`${DIRECTUS_URL}/collections`, {
+      method: 'POST',
+      headers: { 'Authorization': `Bearer ${DIRECTUS_TOKEN}`, 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        collection: 'snippets',
+        meta: { icon: 'terminal', display_template: '{{title}}' },
+        schema: { name: 'snippets' }
+      })
+    });
+  } catch (e) {}
+
+  // 2. Add Fields
+  const fields = [
+    { field: 'status', type: 'string', meta: { interface: 'select-dropdown' }, schema: { default_value: 'published' } },
+    { field: 'title', type: 'string', meta: { interface: 'input' } },
+    { field: 'category', type: 'string', meta: { interface: 'input' } },
+    { field: 'code', type: 'text', meta: { interface: 'input-code' } },
+    { field: 'description', type: 'text', meta: { interface: 'textarea' } },
+    { field: 'language', type: 'string', meta: { interface: 'input' }, schema: { default_value: 'javascript' } },
+    { field: 'featured', type: 'boolean', meta: { interface: 'boolean' }, schema: { default_value: false } }
+  ];
+
+  for (const f of fields) {
+    try {
+      await fetch(`${DIRECTUS_URL}/fields/snippets`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${DIRECTUS_TOKEN}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify(f)
+      });
+    } catch (e) {}
+  }
+
+  // 3. Add Example Data
+  const exampleSnippets = [
+    {
+      title: 'Traefik SSL Config',
+      category: 'Docker',
+      language: 'yaml',
+      featured: true,
+      description: "Meine Standard-Konfiguration für automatisches SSL via Let's Encrypt in Docker Swarm.",
+      code: "labels:\n  - \"traefik.enable=true\"\n  - \"traefik.http.routers.myapp.rule=Host(`example.com`)\"\n  - \"traefik.http.routers.myapp.entrypoints=websecure\"\n  - \"traefik.http.routers.myapp.tls.certresolver=myresolver\""
+    },
+    {
+      title: 'Docker Cleanup Alias',
+      category: 'ZSH',
+      language: 'bash',
+      featured: true,
+      description: 'Ein einfacher Alias, um ungenutzte Docker-Container, Images und Volumes schnell zu entfernen.',
+      code: "alias dclean='docker system prune -af --volumes'"
+    }
+  ];
+
+  for (const s of exampleSnippets) {
+    try {
+      await fetch(`${DIRECTUS_URL}/items/snippets`, {
+        method: 'POST',
+        headers: { 'Authorization': `Bearer ${DIRECTUS_TOKEN}`, 'Content-Type': 'application/json' },
+        body: JSON.stringify(s)
+      });
+    } catch (e) {}
+  }
+
+  console.log('✅ Snippets setup complete!');
+}
+
+setupSnippets();
diff --git a/scripts/update-hobbies.js b/scripts/update-hobbies.js
new file mode 100644
index 0000000..72269df
--- /dev/null
+++ b/scripts/update-hobbies.js
@@ -0,0 +1,162 @@
+const fetch = require('node-fetch');
+require('dotenv').config();
+
+const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://cms.dk0.dev';
+const DIRECTUS_TOKEN = process.env.DIRECTUS_STATIC_TOKEN;
+
+async function syncHobbies() {
+  const hobbies = [
+    {
+      key: 'gym',
+      icon: 'Activity',
+      translations: [
+        { languages_code: 'de-DE', title: 'Gym', description: 'Bin wieder regelmäßig im Training.' },
+        { languages_code: 'en-US', title: 'Gym', description: 'Back at training regularly.' }
+      ]
+    },
+    {
+      key: 'skiing',
+      icon: 'Activity',
+      translations: [
+        { languages_code: 'de-DE', title: 'Skifahren', description: 'Ich liebe es, auf der Piste zu sein.' },
+        { languages_code: 'en-US', title: 'Skiing', description: 'Love being out on the slopes.' }
+      ]
+    },
+    {
+      key: 'programming',
+      icon: 'Code',
+      translations: [
+        { languages_code: 'de-DE', title: 'Programmieren', description: 'Mache ich einfach gerne, auch privat.' },
+        { languages_code: 'en-US', title: 'Programming', description: 'Just love building things, even in my free time.' }
+      ]
+    },
+    {
+      key: 'reading',
+      icon: 'BookOpen',
+      translations: [
+        { languages_code: 'de-DE', title: 'Lesen', description: 'Lese einfach gerne zur Entspannung.' },
+        { languages_code: 'en-US', title: 'Reading', description: 'Enjoy reading to relax.' }
+      ]
+    },
+    {
+      key: 'gaming',
+      icon: 'Gamepad2',
+      translations: [
+        { languages_code: 'de-DE', title: 'Zocken', description: 'Ab und zu mal eine Runde zocken.' },
+        { languages_code: 'en-US', title: 'Gaming', description: 'Playing some games every now and then.' }
+      ]
+    },
+    {
+      key: 'series',
+      icon: 'Tv',
+      translations: [
+        { languages_code: 'de-DE', title: 'Serien', description: 'Ich schaue gerne gute Serien.' },
+        { languages_code: 'en-US', title: 'Series', description: 'I enjoy watching good series.' }
+      ]
+    },
+    {
+      key: 'boardgames',
+      icon: 'Gamepad2',
+      translations: [
+        { languages_code: 'de-DE', title: 'Gesellschaftsspiele', description: 'Mag Gesellschaftsspiele mit Freunden.' },
+        { languages_code: 'en-US', title: 'Board Games', description: 'Love board games with friends.' }
+      ]
+    },
+    {
+      key: 'traveling',
+      icon: 'Plane',
+      translations: [
+        { languages_code: 'de-DE', title: 'Reisen', description: 'Ich reise einfach gerne.' },
+        { languages_code: 'en-US', title: 'Traveling', description: 'I just love to travel.' }
+      ]
+    },
+    {
+      key: 'analog_photography',
+      icon: 'Camera',
+      translations: [
+        { languages_code: 'de-DE', title: 'Analoge Fotografie', description: 'Lese mich gerade in das Thema ein.' },
+        { languages_code: 'en-US', title: 'Analog Photography', description: 'Currently reading into the topic.' }
+      ]
+    },
+    {
+      key: 'astronomy',
+      icon: 'Stars',
+      translations: [
+        { languages_code: 'de-DE', title: 'Astronomie', description: 'Fasziniert vom Universum und Sternen.' },
+        { languages_code: 'en-US', title: 'Astronomy', description: 'Fascinated by the universe and stars.' }
+      ]
+    },
+    {
+      key: 'guitar',
+      icon: 'Music',
+      translations: [
+        { languages_code: 'de-DE', title: 'Gitarre', description: 'Spiele gelegentlich, wenn auch unregelmäßig.' },
+        { languages_code: 'en-US', title: 'Guitar', description: 'Playing occasionally, even if not regularly.' }
+      ]
+    }
+  ];
+
+  console.log('🔄 Syncing hobbies to Directus...');
+
+  for (const hobby of hobbies) {
+    try {
+      const searchRes = await fetch(`${DIRECTUS_URL}/items/hobbies?filter[key][_eq]=${hobby.key}`, {
+        headers: { 'Authorization': `Bearer ${DIRECTUS_TOKEN}` }
+      });
+      const searchData = await searchRes.json();
+      
+      if (searchData.data && searchData.data.length > 0) {
+        const id = searchData.data[0].id;
+        console.log(`Updating ${hobby.key}...`);
+        await fetch(`${DIRECTUS_URL}/items/hobbies/${id}`, {
+          method: 'PATCH',
+          headers: {
+            'Authorization': `Bearer ${DIRECTUS_TOKEN}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            status: 'published',
+            icon: hobby.icon,
+            translations: hobby.translations
+          })
+        });
+      } else {
+        console.log(`Creating ${hobby.key}...`);
+        await fetch(`${DIRECTUS_URL}/items/hobbies`, {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${DIRECTUS_TOKEN}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            key: hobby.key,
+            status: 'published',
+            icon: hobby.icon,
+            translations: hobby.translations
+          })
+        });
+      }
+    } catch (e) {
+      console.error(`Failed to sync ${hobby.key}:`, e.message);
+    }
+  }
+
+  // Delete 'gameServers' if it exists
+  try {
+    const delSearch = await fetch(`${DIRECTUS_URL}/items/hobbies?filter[key][_eq]=gameServers`, {
+      headers: { 'Authorization': `Bearer ${DIRECTUS_TOKEN}` }
+    });
+    const delData = await delSearch.json();
+    if (delData.data && delData.data.length > 0) {
+      console.log('Removing gameServers hobby...');
+      await fetch(`${DIRECTUS_URL}/items/hobbies/${delData.data[0].id}`, {
+        method: 'DELETE',
+        headers: { 'Authorization': `Bearer ${DIRECTUS_TOKEN}` }
+      });
+    }
+  } catch (e) {}
+
+  console.log('✅ Done!');
+}
+
+syncHobbies();