feat: major UI/UX overhaul, snippets system, and performance fixes

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;
     }
   }

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) {

app/[locale]/snippets/SnippetsClient.tsx

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

app/[locale]/snippets/page.tsx

@@ -0,0 +1,41 @@
+
+import React from "react";
+import { getSnippets } from "@/lib/directus";
+import { Terminal, ArrowLeft, 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>
+  );
+}

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);

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);

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);

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');
     });

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 />);

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} 

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

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;

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;
 };
 

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);
     }

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 });
   }
 }

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)) {

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 });
+  }
+}

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>
   );
 };

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>

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() }]);
       }

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>

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];
   

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>

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">

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;

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>
             

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 () => {

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 */

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>

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>
   );
 }