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

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