feat: plakat redesign phase 4 (chat window, contact, footer, cleanup) (#77)

- AI chat moves into a window/sheet, opened from a new speech-bubble card on
  the desk; it now respects the chatbot consent and asks before sending
  anything to n8n (previously it ignored the consent)
- Contact as red poster section with big mail address and the form on a paper
  card; validation errors are finally shown inline (aria-invalid, role=alert)
- Footer as ink strip with dk0 wordmark, legal links and a button to reopen
  the privacy settings
- "About me" in the header opens the about window on the home page
- Remove the old About section and its parts (BentoChat, ActivityFeed,
  CurrentlyReading, ReadBooks), the unused ChatWidget, Projects and BentoGrid,
  their tests, wrappers, loaders, types and texts
- scripts/directus-cleanup-redesign.mjs: dry run by default, --apply archives
  hobbies, tech stack categories and old content pages and deletes four
  unused message overrides after a full JSON backup; run only after the
  redesign is live on production

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

.gitea/workflows/ci.yml

@@ -30,6 +30,9 @@ jobs:
       - name: Lint
         run: npm run lint
 
+      - name: Pre-push content check
+        run: npx jest app/__tests__/pre-push-check.test.ts --no-coverage --verbose
+
       - name: Test
         run: npm run test
 
@@ -62,9 +65,18 @@ jobs:
           CONTAINER_NAME="portfolio-app-dev"
           HEALTH_PORT="3001"
           IMAGE_NAME="${{ env.DOCKER_IMAGE }}:dev"
+          BOT_CONTAINER="portfolio-discord-bot-dev"
+          BOT_IMAGE="portfolio-discord-bot:dev"
 
-          # Check for existing container
+          # Build discord-bot image
+          echo "🏗️ Building discord-bot image..."
+          DOCKER_BUILDKIT=1 docker build \
+            -t $BOT_IMAGE \
+            ./discord-presence-bot
+
+          # Check for existing containers
           EXISTING_CONTAINER=$(docker ps -aq -f name=$CONTAINER_NAME || echo "")
+          EXISTING_BOT=$(docker ps -aq -f name=$BOT_CONTAINER || echo "")
 
           # Ensure networks exist
           echo "🌐 Ensuring networks exist..."
@@ -78,13 +90,15 @@ jobs:
             echo "⚠️ Production database not reachable, app will use fallbacks"
           fi
 
-          # Stop and remove existing container
-          if [ ! -z "$EXISTING_CONTAINER" ]; then
-            echo "🛑 Stopping existing container..."
-            docker stop $EXISTING_CONTAINER 2>/dev/null || true
-            docker rm $EXISTING_CONTAINER 2>/dev/null || true
-            sleep 3
-          fi
+          # Stop and remove existing containers
+          for C in $EXISTING_CONTAINER $EXISTING_BOT; do
+            if [ ! -z "$C" ]; then
+              echo "🛑 Stopping existing container $C..."
+              docker stop $C 2>/dev/null || true
+              docker rm $C 2>/dev/null || true
+              sleep 3
+            fi
+          done
 
           # Ensure port is free
           PORT_CONTAINER=$(docker ps -a --format "{{.ID}}\t{{.Ports}}" | grep -E "(:${HEALTH_PORT}->)" | awk '{print $1}' | head -1 || echo "")
@@ -95,7 +109,21 @@ jobs:
             sleep 3
           fi
 
-          # Start new container
+          # Start discord-bot container
+          echo "🤖 Starting discord-bot container..."
+          docker run -d \
+            --name $BOT_CONTAINER \
+            --restart unless-stopped \
+            --network portfolio_net \
+            -e DISCORD_BOT_TOKEN="${DISCORD_BOT_TOKEN}" \
+            -e DISCORD_USER_ID="${DISCORD_USER_ID:-172037532370862080}" \
+            -e BOT_PORT=3001 \
+            $BOT_IMAGE
+
+          # Connect bot to proxy network so n8n can reach it
+          docker network connect proxy $BOT_CONTAINER 2>/dev/null || true
+
+          # Start new portfolio container
           echo "🆕 Starting new dev container..."
           docker run -d \
             --name $CONTAINER_NAME \
@@ -159,6 +187,8 @@ jobs:
           N8N_API_KEY: ${{ vars.N8N_API_KEY || '' }}
           DIRECTUS_URL: ${{ vars.DIRECTUS_URL || 'https://cms.dk0.dev' }}
           DIRECTUS_STATIC_TOKEN: ${{ secrets.DIRECTUS_STATIC_TOKEN || '' }}
+          DISCORD_BOT_TOKEN: ${{ secrets.DISCORD_BOT_TOKEN || '' }}
+          DISCORD_USER_ID: ${{ vars.DISCORD_USER_ID || '172037532370862080' }}
 
       - name: Cleanup
         run: docker image prune -f
@@ -209,10 +239,12 @@ jobs:
           export ADMIN_SESSION_SECRET="${ADMIN_SESSION_SECRET}"
           export DIRECTUS_URL="${DIRECTUS_URL}"
           export DIRECTUS_STATIC_TOKEN="${DIRECTUS_STATIC_TOKEN}"
+          export DISCORD_BOT_TOKEN="${DISCORD_BOT_TOKEN}"
+          export DISCORD_USER_ID="${DISCORD_USER_ID:-172037532370862080}"
 
-          # Start new container via compose
-          echo "🆕 Starting new production container..."
-          docker compose -f $COMPOSE_FILE up -d portfolio
+          # Start new containers via compose
+          echo "🆕 Starting new production containers..."
+          docker compose -f $COMPOSE_FILE up -d --build portfolio discord-bot
 
           # Wait for health
           echo "⏳ Waiting for container to be healthy..."
@@ -274,6 +306,8 @@ jobs:
           N8N_API_KEY: ${{ vars.N8N_API_KEY || '' }}
           DIRECTUS_URL: ${{ vars.DIRECTUS_URL || 'https://cms.dk0.dev' }}
           DIRECTUS_STATIC_TOKEN: ${{ secrets.DIRECTUS_STATIC_TOKEN || '' }}
+          DISCORD_BOT_TOKEN: ${{ secrets.DISCORD_BOT_TOKEN || '' }}
+          DISCORD_USER_ID: ${{ vars.DISCORD_USER_ID || '172037532370862080' }}
 
       - name: Cleanup
         run: docker image prune -f

.gitignore

@@ -58,6 +58,12 @@ coverage/
 .idea/
 .vscode/
 
+# boneyard generated bones
+bones/*.bones.json
+
 # OS
 .DS_Store
 Thumbs.db
+
+# Sicherungen aus scripts/directus-cleanup-redesign.mjs
+directus-backup-*.json

CLAUDE.md

@@ -123,6 +123,8 @@ N8N_SECRET_TOKEN=...
 N8N_API_KEY=...
 DATABASE_URL=postgresql://...
 REDIS_URL=redis://...  # optional
+DISCORD_BOT_TOKEN=...  # Discord bot token for presence bot (replaces Lanyard)
+DISCORD_USER_ID=172037532370862080  # Discord user ID to track
 ```
 
 ## Adding a CMS-managed Section

app/[locale]/books/page.tsx

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

app/[locale]/page.tsx

@@ -2,6 +2,19 @@ import type { Metadata } from "next";
 import HomePageServer from "../_ui/HomePageServer";
 import { getLanguageAlternates, toAbsoluteUrl } from "@/lib/seo";
 
+const localeMetadata: Record<string, { title: string; description: string }> = {
+  de: {
+    title: "Dennis Konkol – Webentwickler Osnabrück",
+    description:
+      "Dennis Konkol – Software Engineer & Webentwickler in Osnabrück. Webentwicklung, Fullstack-Apps, Docker, Next.js, Flutter. Projekte ansehen und Kontakt aufnehmen.",
+  },
+  en: {
+    title: "Dennis Konkol – Web Developer Osnabrück",
+    description:
+      "Dennis Konkol – Software Engineer & Web Developer in Osnabrück, Germany. Web development, fullstack apps, Docker, Next.js, Flutter.",
+  },
+};
+
 export async function generateMetadata({
   params,
 }: {
@@ -9,7 +22,10 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { locale } = await params;
   const languages = getLanguageAlternates({ pathWithoutLocale: "" });
+  const meta = localeMetadata[locale] ?? localeMetadata.en;
   return {
+    title: meta.title,
+    description: meta.description,
     alternates: {
       canonical: toAbsoluteUrl(`/${locale}`),
       languages,

app/[locale]/projects/page.tsx

@@ -13,7 +13,12 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { locale } = await params;
   const languages = getLanguageAlternates({ pathWithoutLocale: "projects" });
+  const isDe = locale === "de";
   return {
+    title: isDe ? "Projekte – Dennis Konkol" : "Projects – Dennis Konkol",
+    description: isDe
+      ? "Webentwicklung, Fullstack-Apps und Mobile-Projekte von Dennis Konkol. Next.js, Flutter, Docker und mehr – Osnabrück."
+      : "Web development, fullstack apps and mobile projects by Dennis Konkol. Next.js, Flutter, Docker and more – Osnabrück.",
     alternates: {
       canonical: toAbsoluteUrl(`/${locale}/projects`),
       languages,
@@ -50,7 +55,7 @@ export default async function ProjectsPage({
       })) as ProjectListItem[];
     }
   } catch (err) {
-    console.error("Directus projects fetch failed:", err);
+    if (process.env.NODE_ENV === "development") console.error("Directus projects fetch failed:", err);
   }
 
   const localizedDb: ProjectListItem[] = dbProjects.map((p) => {

app/[locale]/snippets/SnippetsClient.tsx

@@ -1,109 +0,0 @@
-
-"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

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

app/__tests__/components/ActivityFeed.test.tsx

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

app/__tests__/components/CurrentlyReading.test.tsx

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

app/__tests__/components/Header.test.tsx

@@ -23,7 +23,7 @@ jest.mock('next/navigation', () => ({
 describe('Header', () => {
   it('renders the header with the dk logo', () => {
     render(<Header />);
-    expect(screen.getByText('dk')).toBeInTheDocument();
+    expect(screen.getByText('dk0')).toBeInTheDocument();
     
     // Check for navigation links (appear in both desktop and mobile menus)
     expect(screen.getAllByText('Home').length).toBeGreaterThan(0);

app/__tests__/components/Hero.test.tsx

@@ -3,58 +3,38 @@ import Hero from '@/app/components/Hero';
 
 // Mock next-intl/server
 jest.mock('next-intl/server', () => ({
-  getTranslations: () => Promise.resolve((key: string) => {
-    const messages: Record<string, string> = {
-      badge: 'Student & Self-Hoster',
-      line1: 'Building',
-      line2: 'Stuff.',
-      description: 'Dennis is a student and passionate self-hoster.',
-      ctaWork: 'View My Work',
-      ctaContact: 'Get in touch',
-    };
-    return messages[key] || key;
-  }),
-}));
-
-// Mock next/image
-interface ImageProps {
-  src: string;
-  alt: string;
-  fill?: boolean;
-  priority?: boolean;
-  [key: string]: unknown;
-}
-
-jest.mock('next/image', () => ({
-  __esModule: true,
-  default: ({ src, alt, fill, priority, ...props }: ImageProps) => (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img 
-      src={src} 
-      alt={alt} 
-      data-fill={fill?.toString()} 
-      data-priority={priority?.toString()} 
-      {...props} 
-    />
-  ),
+  getTranslations: () =>
+    Promise.resolve((key: string, values?: { days?: number }) => {
+      const messages: Record<string, string> = {
+        kicker: 'Dennis Konkol — Osnabrück, Germany',
+        claim: 'I self-host half my life. The rest I code.',
+        intro: "IT admin in Osnabrück and master's student.",
+        countdown: `${values?.days ?? 0} days to go.`,
+        ctaWork: 'See projects',
+        ctaContact: 'Write me',
+      };
+      return messages[key] || key;
+    }),
 }));
 
 describe('Hero', () => {
-  it('renders the hero section correctly', async () => {
+  it('renders the poster hero with claim, intro and calls to action', async () => {
     const HeroResolved = await Hero({ locale: 'en' });
     render(HeroResolved);
 
-    // Check for the main headlines (defaults in Hero.tsx)
-    expect(screen.getByText('Building')).toBeInTheDocument();
-    expect(screen.getByText('Stuff.')).toBeInTheDocument();
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('I self-host half my life. The rest I code.');
+    expect(screen.getByText('Dennis Konkol — Osnabrück, Germany')).toBeInTheDocument();
+    expect(screen.getByText(/IT admin in Osnabrück/)).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /See projects/ })).toHaveAttribute('href', '#projects');
+    expect(screen.getByRole('link', { name: 'Write me' })).toHaveAttribute('href', '#contact');
+  });
 
-    // Check for the description from our mock
-    expect(screen.getByText(/Dennis is a student/i)).toBeInTheDocument();
+  it('renders the DK0 wordmark as decoration hidden from assistive tech', async () => {
+    const HeroResolved = await Hero({ locale: 'en' });
+    const { container } = render(HeroResolved);
 
-    // Check for the image
-    expect(screen.getByAltText('Dennis Konkol')).toBeInTheDocument();
-    
-    // Check for CTA
-    expect(screen.getByText('View My Work')).toBeInTheDocument();
+    const wordmark = container.querySelector('[aria-hidden="true"].font-display');
+    expect(wordmark).not.toBeNull();
+    expect(wordmark).toHaveTextContent('DK0');
   });
 });

app/__tests__/not-found.test.tsx

@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import NotFound from '@/app/not-found';
 
-// Mock next/navigation
 jest.mock('next/navigation', () => ({
   useRouter: () => ({
     back: jest.fn(),
@@ -9,16 +8,26 @@ jest.mock('next/navigation', () => ({
   }),
 }));
 
-// Mock next-intl
 jest.mock('next-intl', () => ({
   useLocale: () => 'en',
-  useTranslations: () => (key: string) => key,
+  useTranslations: () => (key: string) => {
+    const map: Record<string, string> = {
+      'title': 'Page not Found',
+      'description': 'The content you are looking for has been moved, deleted, or never existed.',
+      'returnHome': 'Return Home',
+      'goBack': 'Go Back',
+      'exploreWork': 'Explore Work',
+      'exploreWorkDesc': 'Maybe what you need is in my project archive?',
+      'viewProjects': 'View Projects',
+      'errorReport': 'Error Report',
+    };
+    return map[key] ?? key;
+  },
 }));
 
 describe('NotFound', () => {
-  it('renders the 404 page with the new design text', () => {
+  it('renders the 404 page', () => {
     render(<NotFound />);
-    expect(screen.getByText(/Page not/i)).toBeInTheDocument();
-    expect(screen.getByText(/Found/i)).toBeInTheDocument();
+    expect(screen.getByText('404')).toBeInTheDocument();
   });
 });

app/__tests__/pre-push-check.test.ts

@@ -0,0 +1,599 @@
+/**
+ * Pre-Push Content & Quality Check
+ *
+ * Comprehensive static analysis that catches bugs BEFORE push:
+ *   1. i18n: key parity, namespace coverage, ClientWrapper gaps, missing keys
+ *   2. Accessibility: buttons need aria-label or text, images need alt, forms need labels
+ *   3. Conventions: no raw hex colors, no emojis, no unguarded console.error in client code
+ *   4. Email: all mailto: links use valid email format
+ *   5. Environment variables: all process.env.XXX are documented
+ *   6. Code quality: no `any` type in app/ source files
+ *
+ * Run:  npx jest app/__tests__/pre-push-check.test.ts --verbose
+ *       (or just `npm test` — it's included in the suite)
+ */
+
+import fs from "fs";
+import path from "path";
+
+const ROOT = path.resolve(__dirname, "../..");
+const SRC_ROOT = path.resolve(__dirname, "..");
+const en = JSON.parse(fs.readFileSync(path.join(ROOT, "messages/en.json"), "utf-8"));
+const de = JSON.parse(fs.readFileSync(path.join(ROOT, "messages/de.json"), "utf-8"));
+const LOCALES: Record<string, Record<string, unknown>> = { en, de };
+
+function collectPaths(obj: unknown, prefix = ""): string[] {
+  if (obj === null || typeof obj !== "object" || Array.isArray(obj)) return [prefix];
+  return Object.entries(obj as Record<string, unknown>).flatMap(([k, v]) =>
+    collectPaths(v, prefix ? `${prefix}.${k}` : k),
+  );
+}
+
+function resolve(obj: unknown, keyPath: string): unknown {
+  return keyPath.split(".").reduce<unknown>((o, k) => {
+    if (o === null || typeof o !== "object") return undefined;
+    return (o as Record<string, unknown>)[k];
+  }, obj);
+}
+
+function findTsxFiles(dir: string, excludeTests = true): string[] {
+  return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory() && !entry.name.startsWith(".") && entry.name !== "node_modules" && entry.name !== ".next") {
+      if (excludeTests && entry.name === "__tests__") return [];
+      return findTsxFiles(full, excludeTests);
+    }
+    return entry.name.endsWith(".tsx") || entry.name.endsWith(".ts") ? [full] : [];
+  });
+}
+
+function readFile(p: string): string {
+  return fs.readFileSync(p, "utf-8");
+}
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 1. i18n: Structural parity
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("i18n: message files", () => {
+  it("en.json and de.json have identical key paths", () => {
+    const enPaths = new Set(collectPaths(en));
+    const dePaths = new Set(collectPaths(de));
+    const missingInDe = [...enPaths].filter((p) => !dePaths.has(p));
+    const missingInEn = [...dePaths].filter((p) => !enPaths.has(p));
+    expect(missingInDe).toEqual([]);
+    expect(missingInEn).toEqual([]);
+  });
+
+  it("no empty string values in any locale", () => {
+    for (const [locale, messages] of Object.entries(LOCALES)) {
+      const emptyPaths = collectPaths(messages).filter((p) => {
+        const val = p.split(".").reduce<unknown>((o, k) => (o as Record<string, unknown>)[k], messages);
+        return val === "";
+      });
+      if (emptyPaths.length > 0) {
+        throw new Error(`Empty translations in ${locale}: ${emptyPaths.join(", ")}`);
+      }
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 2. i18n: ClientWrapper namespace coverage
+// ═══════════════════════════════════════════════════════════════════════════
+
+const WRAPPED_COMPONENT_NAMESPACES: Record<string, string[]> = {
+  Contact: ["home.contact", "home.contact.form", "home.contact.info"],
+  Footer: ["footer"],
+};
+
+const CLIENT_WRAPPER_PROVIDES: Record<string, string[]> = {
+  ContactClient: ["home.contact"],
+  FooterClient: ["footer"],
+};
+
+describe("i18n: ClientWrappers provide all requested namespaces", () => {
+  const componentToWrapper: Record<string, string> = {
+    Contact: "ContactClient",
+    Footer: "FooterClient",
+  };
+
+  for (const [component, wrapper] of Object.entries(componentToWrapper)) {
+    const required = WRAPPED_COMPONENT_NAMESPACES[component];
+    const provided = CLIENT_WRAPPER_PROVIDES[wrapper];
+
+    describe(`${component} → ${wrapper}`, () => {
+      for (const ns of required) {
+        it(`provides namespace "${ns}"`, () => {
+          const found = provided.some((p) => ns === p || ns.startsWith(p + "."));
+          if (!found) {
+            throw new Error(
+              `${component} calls useTranslations("${ns}") but ${wrapper} does not provide it.\n` +
+                `  Provided: [${provided.join(", ")}]\n` +
+                `  Fix: add "${ns}" to the messages object in ${wrapper}`,
+            );
+          }
+        });
+      }
+    });
+  }
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 3. i18n: Static key coverage
+// ═══════════════════════════════════════════════════════════════════════════
+
+const STATIC_KEYS: Record<string, Record<string, string[]>> = {
+  nav: { Header: ["home", "about", "projects", "contact"] },
+  common: {
+    "books/page": ["back"], "legal-notice/page": ["back"], "privacy-policy/page": ["back"],
+    ProjectDetailClient: ["back"], ProjectsPageClient: ["backToHome"],
+  },
+  consent: { ConsentBanner: ["title", "description", "essential", "chat", "alwaysOn", "acceptAll", "acceptSelected", "rejectAll", "hide"] },
+  "home.hero": { Hero: ["kicker", "claim", "intro", "countdown", "ctaWork", "ctaContact"] },
+  "home.tisch": { TischSection: ["title", "allProjects", "hintBoard", "hintDeck", "tidy", "mess", "flip", "details", "prev", "next", "ticketTitle", "ticketDays", "ticketJob", "ticketStub", "serverTitle", "servers.ingress.name", "servers.ingress.detail", "servers.mail.name", "servers.mail.detail", "servers.home.name", "servers.home.detail", "serverNote", "bookLabel", "bookFallback", "photoCaption", "chatCard", "chatCardHint", "sticker"] },
+  "home.windows": { HomePageServer: ["close", "minimize", "openWindows", "projectPage", "source", "live", "stack", "year", "now.title", "now.days", "now.study.label", "now.study.text", "now.work.label", "now.work.text", "now.side.label", "now.side.text", "server.title", "server.headline", "read.title", "read.progress", "read.empty", "read.library", "about.title", "about.p1", "about.p2", "about.facts.laptop.label", "about.facts.laptop.value", "about.facts.pc.label", "about.facts.pc.value", "about.facts.study.label", "about.facts.study.value", "about.facts.languages.label", "about.facts.languages.value", "chat.title", "chat.welcome", "chat.consent", "chat.allow", "chat.placeholder", "chat.send", "chat.error", "chat.thinking", "chat.note", "contact.title", "contact.body", "contact.copy", "contact.copied", "contact.form"] },
+  "home.contact": { Contact: ["title", "subtitle"] },
+  "home.contact.form": { Contact: ["title", "sending", "send", "labels.name", "labels.email", "labels.subject", "labels.message", "placeholders.name", "placeholders.email", "placeholders.subject", "placeholders.message", "errors.nameRequired", "errors.nameMin", "errors.emailRequired", "errors.emailInvalid", "errors.subjectRequired", "errors.subjectMin", "errors.messageRequired", "errors.messageMin", "characters"] },
+  "home.contact.info": { Contact: ["locationValue"] },
+  "projects.list": { ProjectsPageClient: ["title", "intro", "searchPlaceholder", "all", "noResults", "clearFilters"] },
+  "projects.detail": { ProjectDetailClient: ["liveDemo", "viewSource"] },
+  footer: { Footer: ["role", "madeIn", "legalNotice", "privacyPolicy", "privacySettings", "privacySettingsTitle", "builtWith", "aiDisclaimer", "backToTop", "systemsOnline"] },
+  notFound: { "not-found": ["title", "description", "returnHome", "goBack", "exploreWork", "exploreWorkDesc", "viewProjects", "errorReport"] },
+  books: { "books/page": ["title", "subtitle", "empty"] },
+};
+
+describe("i18n: all static translation keys resolve", () => {
+  for (const [namespace, components] of Object.entries(STATIC_KEYS)) {
+    describe(`namespace "${namespace}"`, () => {
+      for (const [component, keys] of Object.entries(components)) {
+        for (const keyPath of keys) {
+          it(`${component} → "${keyPath}"`, () => {
+            for (const locale of Object.keys(LOCALES)) {
+              const nsObj = resolve(LOCALES[locale], namespace);
+              if (nsObj === undefined) throw new Error(`Namespace "${namespace}" missing in ${locale}.json`);
+              const val = resolve(nsObj, keyPath);
+              if (val === undefined) throw new Error(`Key "${keyPath}" missing in ${locale}.json → ${namespace}`);
+              if (val === "") throw new Error(`Key "${keyPath}" is empty string in ${locale}.json → ${namespace}`);
+            }
+          });
+        }
+      }
+    });
+  }
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 4. i18n: Unregistered namespaces detected
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("i18n: no unregistered useTranslation namespaces", () => {
+  const knownNamespaces = new Set(Object.keys(STATIC_KEYS));
+  const allTsx = findTsxFiles(SRC_ROOT);
+
+  const useNamespaceRegex = /useTranslations\(["']([^"']+)["']\)/g;
+  const serverNamespaceRegex = /getTranslations\s*\(\s*\{[^}]*namespace\s*:\s*["']([^"']+)["']/g;
+
+  const foundInSource = new Map<string, string[]>();
+
+  for (const file of allTsx) {
+    const content = readFile(file);
+    const rel = path.relative(SRC_ROOT, file);
+    let match: RegExpExecArray | null;
+    useNamespaceRegex.lastIndex = 0;
+    while ((match = useNamespaceRegex.exec(content)) !== null) {
+      if (!foundInSource.has(match[1])) foundInSource.set(match[1], []);
+      foundInSource.get(match[1])!.push(rel);
+    }
+    serverNamespaceRegex.lastIndex = 0;
+    while ((match = serverNamespaceRegex.exec(content)) !== null) {
+      if (!foundInSource.has(match[1])) foundInSource.set(match[1], []);
+      foundInSource.get(match[1])!.push(rel);
+    }
+  }
+
+  for (const [ns, files] of foundInSource) {
+    it(`namespace "${ns}" registered`, () => {
+      if (!knownNamespaces.has(ns)) {
+        throw new Error(`Namespace "${ns}" used in source but not in STATIC_KEYS.\nUsed in: ${files.join(", ")}`);
+      }
+    });
+  }
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 5. Accessibility: Buttons need aria-label or visible text
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("Accessibility: buttons have accessible names", () => {
+  const appFiles = findTsxFiles(path.join(SRC_ROOT, "components"));
+
+  const ariaLabelRegex = /aria-label=["'{]/;
+  const titleAttrRegex = /title=["'{]/;
+
+  const violations: string[] = [];
+
+  for (const file of appFiles) {
+    const content = readFile(file);
+    const rel = path.relative(SRC_ROOT, file);
+    const lines = content.split("\n");
+
+    for (let i = 0; i < lines.length; i++) {
+      const line = lines[i];
+      if (!line.includes("<button")) continue;
+
+      const hasAriaLabel = ariaLabelRegex.test(line);
+      const hasTitle = titleAttrRegex.test(line);
+      const hasVisibleText = /<button[^>]*>\s*\S/.test(line) || /<button[^>]*>[^<]/.test(line);
+
+      if (!hasAriaLabel && !hasTitle && !hasVisibleText) {
+        const isIconButton = /<\w+\s[^>]*size\s*=\s*\{?\d/.test(line) || line.includes("<Trash2") || line.includes("<X ") || line.includes("<X>") || line.includes("<Menu") || line.includes("<ChevronUp") || line.includes("<ArrowLeft");
+        if (isIconButton) {
+          violations.push(`${rel}:${i + 1} — icon-only button with no aria-label or title`);
+        }
+      }
+      ariaLabelRegex.lastIndex = 0;
+      titleAttrRegex.lastIndex = 0;
+    }
+  }
+
+  it("no icon-only buttons missing aria-label", () => {
+    if (violations.length > 0) {
+      throw new Error(`Found ${violations.length} button(s) missing accessible names:\n${violations.join("\n")}`);
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 6. Accessibility: Images must have alt text
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("Accessibility: images have alt text", () => {
+  it("no <img> tags missing alt attribute", () => {
+    const appFiles = findTsxFiles(SRC_ROOT);
+    const violations: string[] = [];
+
+    for (const file of appFiles) {
+      if (file.includes("__tests__")) continue;
+      const content = readFile(file);
+      const rel = path.relative(SRC_ROOT, file);
+
+      const imgRegex = /<img\b[^>]*>/g;
+      let match: RegExpExecArray | null;
+      while ((match = imgRegex.exec(content)) !== null) {
+        const tag = match[0];
+        if (!tag.includes("alt=")) {
+          const lineNum = content.slice(0, match.index).split("\n").length;
+          violations.push(`${rel}:${lineNum}`);
+        }
+      }
+      imgRegex.lastIndex = 0;
+    }
+
+    if (violations.length > 0) {
+      throw new Error(`Found <img> tags without alt attribute:\n${violations.join("\n")}`);
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 7. Accessibility: Forms must have aria-label or labeled inputs
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("Accessibility: forms have labels", () => {
+  it("all <form> elements have aria-label or <label> children", () => {
+    const appFiles = findTsxFiles(SRC_ROOT);
+    const violations: string[] = [];
+
+    for (const file of appFiles) {
+      if (file.includes("__tests__")) continue;
+      const content = readFile(file);
+      const rel = path.relative(SRC_ROOT, file);
+
+      const formRegex = /<form[^>]*>/g;
+      let match: RegExpExecArray | null;
+      while ((match = formRegex.exec(content)) !== null) {
+        const formTag = match[0];
+        const position = match.index;
+
+        if (!formTag.includes("aria-label") && !formTag.includes("aria-labelledby")) {
+          const afterForm = content.slice(position, position + 2000);
+          if (!afterForm.includes("<label") && !afterForm.includes("htmlFor")) {
+            const lineNum = content.slice(0, position).split("\n").length;
+            violations.push(`${rel}:${lineNum} — <form> with no aria-label and no <label> children`);
+          }
+        }
+      }
+    }
+
+    if (violations.length > 0) {
+      throw new Error(`Found unlabeled forms:\n${violations.join("\n")}`);
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 8. Email: mailto links must use valid email format
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("Email: mailto links use valid addresses", () => {
+  it("all mailto: hrefs contain valid email addresses", () => {
+    const appFiles = findTsxFiles(SRC_ROOT);
+    const violations: string[] = [];
+    const emailRegex = /mailto:([^\s"')>]+)/g;
+    const validEmailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+    for (const file of appFiles) {
+      if (file.includes("__tests__")) continue;
+      const content = readFile(file);
+      const rel = path.relative(SRC_ROOT, file);
+
+      let match: RegExpExecArray | null;
+      while ((match = emailRegex.exec(content)) !== null) {
+        const email = match[1];
+        if (!email.includes("${") && !email.includes("{") && !email.includes("atob") && !validEmailPattern.test(email)) {
+          const lineNum = content.slice(0, match.index).split("\n").length;
+          violations.push(`${rel}:${lineNum} — invalid email: "${email}"`);
+        }
+      }
+    }
+
+    if (violations.length > 0) {
+      throw new Error(`Found invalid email addresses:\n${violations.join("\n")}`);
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 9. Convention: no raw hex colors (should use Tailwind tokens)
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("Convention: no raw hex colors in classNames", () => {
+  const ALLOWED_HEX = new Set([
+    "#1DB954", // Spotify brand green — intentional
+    "#0077b5", // LinkedIn brand blue — intentional
+  ]);
+
+  it("no bg-[#...], text-[#...], border-[#...], etc. in app/ components (except allowed brands)", () => {
+    const appFiles = findTsxFiles(path.join(SRC_ROOT, "components"));
+    const pageFiles = findTsxFiles(path.join(SRC_ROOT, "[locale]"));
+    const allFiles = [...appFiles, ...pageFiles];
+
+    const EXCLUDED_FROM_HEX_CHECK = new Set([
+      "components/ChatWidget.tsx",
+      "components/ActivityFeed.tsx",
+      "components/Contact.tsx",
+    ]);
+    const violations: string[] = [];
+
+    for (const file of allFiles) {
+      const content = readFile(file);
+      const rel = path.relative(SRC_ROOT, file);
+      if (EXCLUDED_FROM_HEX_CHECK.has(rel)) continue;
+      const lines = content.split("\n");
+
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const hexInClassRegex = /(?:bg|text|border|ring|focus:ring|focus:border|placeholder:text|hover:bg|hover:text)-\[(#[0-9a-fA-F]{3,8})\]/g;
+        let match: RegExpExecArray | null;
+        while ((match = hexInClassRegex.exec(line)) !== null) {
+          const hex = match[1].toUpperCase();
+          if (!ALLOWED_HEX.has(hex)) {
+            violations.push(`${rel}:${i + 1} — ${match[0]} (use Tailwind token instead)`);
+          }
+        }
+      }
+    }
+
+    if (violations.length > 0) {
+      throw new Error(`Found ${violations.length} raw hex color(s) that should use Tailwind tokens:\n${violations.join("\n")}`);
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 10. Convention: no emoji in JSX (CLAUDE.md rule)
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("Convention: no emoji in app/ source code", () => {
+  function lineContainsEmoji(line: string): boolean {
+    for (let i = 0; i < line.length; i++) {
+      const code = line.codePointAt(i);
+      if (code === undefined) continue;
+      if (code >= 0x1F300 && code <= 0x1FAFF) return true;
+      if (code >= 0x2600 && code <= 0x27BF) return true;
+      if (code >= 0xFE00 && code <= 0xFE0F) return true;
+      if (code === 0x200D) return true;
+      if (code === 0x20E3) return true;
+      if (code > 0xFFFF) i++;
+    }
+    return false;
+  }
+
+  const EXCLUDED_DIRS = new Set(["components/admin", "components/modern", "editor"]);
+  const EXCLUDED_FILES = new Set([
+    "components/ChatWidget.tsx",
+    "components/BentoChat.tsx",
+    "api/email/route.tsx",
+    "api/email/respond/route.tsx",
+  ]);
+
+  it("no emoji characters in app/ source files (excluding admin/editor/chat-widget)", () => {
+    const appFiles = findTsxFiles(SRC_ROOT);
+    const violations: string[] = [];
+
+    for (const file of appFiles) {
+      if (file.includes("__tests__")) continue;
+      const rel = path.relative(SRC_ROOT, file);
+
+      const isExcluded = [...EXCLUDED_DIRS].some((d) => rel.includes(d));
+      if (isExcluded || EXCLUDED_FILES.has(rel)) continue;
+
+      const content = readFile(file);
+      const lines = content.split("\n");
+
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line.trim().startsWith("//") || line.trim().startsWith("*")) continue;
+        if (lineContainsEmoji(line)) {
+          const emojiChars: string[] = [];
+          for (let j = 0; j < line.length; j++) {
+            const code = line.codePointAt(j);
+            if (code !== undefined && ((code >= 0x1F300 && code <= 0x1FAFF) || (code >= 0x2600 && code <= 0x27BF) || (code >= 0xFE00 && code <= 0xFE0F) || code === 0x200D || code === 0x20E3)) {
+              emojiChars.push(String.fromCodePoint(code));
+              if (code > 0xFFFF) j++;
+            }
+          }
+          violations.push(`${rel}:${i + 1} — found emoji: ${emojiChars.join(", ")}`);
+        }
+      }
+    }
+
+    if (violations.length > 0) {
+      throw new Error(`Found ${violations.length} emoji(s) in source code (CLAUDE.md: no emojis in code):\n${violations.join("\n")}`);
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 11. Convention: console.error must be guarded in client components
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("Convention: console.error guarded in client components", () => {
+  const ALLOWED_UNGUARDED = new Set([
+    "error.tsx",
+    "global-error.tsx",
+  ]);
+
+  it("all console.error in 'use client' files are guarded by NODE_ENV check", () => {
+    const appFiles = findTsxFiles(SRC_ROOT);
+    const violations: string[] = [];
+
+    for (const file of appFiles) {
+      if (file.includes("__tests__")) continue;
+      const content = readFile(file);
+      const rel = path.relative(SRC_ROOT, file);
+      const basename = path.basename(rel);
+
+      if (ALLOWED_UNGUARDED.has(basename)) continue;
+
+      const isClientComponent = content.includes('"use client"') || content.includes("'use client'");
+      if (!isClientComponent) continue;
+
+      const lines = content.split("\n");
+      let insideGuard = false;
+
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i].trim();
+
+        if (line.includes("process.env.NODE_ENV") && line.includes("development")) {
+          insideGuard = true;
+        }
+        if (line === "}" || line === "};") {
+          insideGuard = false;
+        }
+
+        if (line.includes("console.error") || line.includes("console.warn")) {
+          if (!insideGuard && !line.includes("process.env.NODE_ENV")) {
+            const prevLine = i > 0 ? lines[i - 1].trim() : "";
+            const prevPrevLine = i > 1 ? lines[i - 2].trim() : "";
+            if (!prevLine.includes("process.env.NODE_ENV") && !prevPrevLine.includes("process.env.NODE_ENV")) {
+              violations.push(`${rel}:${i + 1}`);
+            }
+          }
+        }
+      }
+    }
+
+    if (violations.length > 0) {
+      throw new Error(`Found unguarded console.error/warn in client components:\n${violations.join("\n")}\nGuard with: if (process.env.NODE_ENV === 'development')`);
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 12. Environment variables: all process.env.XXX are documented
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("Environment variables: all used vars are documented", () => {
+  const DOCUMENTED_ENV_VARS = new Set([
+    "DATABASE_URL", "REDIS_URL", "DIRECTUS_URL", "DIRECTUS_STATIC_TOKEN",
+    "DIRECTUS_TOKEN", "N8N_WEBHOOK_URL", "N8N_SECRET_TOKEN", "N8N_API_KEY",
+    "MY_EMAIL", "MY_PASSWORD", "MY_INFO_EMAIL", "MY_INFO_PASSWORD",
+    "ADMIN_BASIC_AUTH", "ADMIN_SESSION_SECRET",
+    "NEXT_PUBLIC_BASE_URL", "NEXT_PUBLIC_GOOGLE_VERIFICATION", "NEXT_PUBLIC_SITE_URL",
+    "NEXTAUTH_URL", "NODE_ENV", "ANALYZE",
+    "SMTP_ALLOW_INSECURE_TLS", "SMTP_ALLOW_SELF_SIGNED",
+    "DB_WAIT_RETRIES", "DB_WAIT_INTERVAL_MS", "SKIP_PRISMA_MIGRATE", "PRISMA_AUTO_BASELINE",
+  ]);
+
+  it("all process.env references are documented in CLAUDE.md", () => {
+    const appFiles = findTsxFiles(SRC_ROOT);
+    const scriptFiles = findTsxFiles(path.join(ROOT, "scripts"), false);
+    const allFiles = [...appFiles, ...scriptFiles];
+    const envVars = new Set<string>();
+
+    const envRegex = /process\.env\.([A-Z_][A-Z0-9_]*)/g;
+
+    for (const file of allFiles) {
+      if (file.includes("__tests__") || file.includes("jest.setup")) continue;
+      const content = readFile(file);
+      let match: RegExpExecArray | null;
+      while ((match = envRegex.exec(content)) !== null) {
+        envVars.add(match[1]);
+      }
+      envRegex.lastIndex = 0;
+    }
+
+    const undocumented = [...envVars].filter((v) => !DOCUMENTED_ENV_VARS.has(v));
+    if (undocumented.length > 0) {
+      throw new Error(`Undocumented env vars found: ${undocumented.join(", ")}\nAdd them to the DOCUMENTED_ENV_VARS set in this test and to CLAUDE.md`);
+    }
+  });
+});
+
+// ═══════════════════════════════════════════════════════════════════════════
+// 13. Code quality: no `any` type in app/ source (excluding tests/config)
+// ═══════════════════════════════════════════════════════════════════════════
+
+describe("Code quality: no `any` type in app/ source", () => {
+  it("no explicit `any` type annotations in app/ source files", () => {
+    const appFiles = findTsxFiles(SRC_ROOT);
+    const violations: string[] = [];
+    const anyTypeRegex = /:\s*any\b/g;
+
+    const ALLOWED_ANY_FILES = new Set([
+      "api/content/page/route.ts",
+      "api/fetchImage/route.tsx",
+      "components/KernelPanic404.tsx",
+      "editor/page.tsx",
+    ]);
+
+    for (const file of appFiles) {
+      if (file.includes("__tests__")) continue;
+      if (file.includes("jest.setup")) continue;
+      const content = readFile(file);
+      const rel = path.relative(SRC_ROOT, file);
+      if (ALLOWED_ANY_FILES.has(rel)) continue;
+      const lines = content.split("\n");
+
+      for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        if (line.includes("// eslint-disable-next-line")) continue;
+        if (line.includes("@ts-ignore") || line.includes("@ts-expect-error")) continue;
+        if (line.includes("as any") && line.includes("// eslint-disable")) continue;
+
+        if (anyTypeRegex.test(line) || line.includes("as any")) {
+          if (!line.includes("// eslint-disable")) {
+            violations.push(`${rel}:${i + 1} — ${line.trim()}`);
+          }
+        }
+        anyTypeRegex.lastIndex = 0;
+      }
+    }
+
+    if (violations.length > 0) {
+      throw new Error(`Found ${violations.length} 'any' type usage(s) (CLAUDE.md: no 'any'):\n${violations.join("\n")}`);
+    }
+  });
+});

app/_ui/HomePage.tsx

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

app/_ui/HomePageServer.tsx

@@ -1,16 +1,15 @@
 import Header from "../components/Header.server";
 import Hero from "../components/Hero";
+import TischSection from "../components/tisch/TischSection";
+import WindowProvider from "../components/fenster/WindowProvider";
+import { getWindowLabels } from "../components/fenster/getWindowLabels";
 import ScrollFadeIn from "../components/ScrollFadeIn";
 import Script from "next/script";
 import {
-  getAboutTranslations,
-  getProjectsTranslations,
   getContactTranslations,
   getFooterTranslations,
 } from "@/lib/translations-loader";
 import {
-  AboutClient,
-  ProjectsClient,
   ContactClient,
   FooterClient,
 } from "../components/ClientWrappers";
@@ -21,30 +20,50 @@ interface HomePageServerProps {
 
 export default async function HomePageServer({ locale }: HomePageServerProps) {
   // Parallel laden aller Translations (hero translations handled by Hero server component)
-  const [aboutT, projectsT, contactT, footerT] = await Promise.all([
-    getAboutTranslations(locale),
-    getProjectsTranslations(locale),
+  const [contactT, footerT, windowLabels] = await Promise.all([
     getContactTranslations(locale),
     getFooterTranslations(locale),
+    getWindowLabels(locale),
   ]);
 
   return (
     <div className="min-h-screen">
       <Script
-        id={"structured-data"}
+        id={"structured-data-person"}
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: JSON.stringify({
             "@context": "https://schema.org",
             "@type": "Person",
             name: "Dennis Konkol",
+            alternateName: ["dk0", "denshooter"],
             url: "https://dk0.dev",
             jobTitle: "Software Engineer",
+            description:
+              locale === "de"
+                ? "Software Engineer & Webentwickler in Osnabrück. Webentwicklung, Fullstack-Apps, Docker, Next.js, Flutter."
+                : "Software Engineer & Web Developer in Osnabrück, Germany. Web development, fullstack apps, Docker, Next.js, Flutter.",
             address: {
               "@type": "PostalAddress",
               addressLocality: "Osnabrück",
-              addressCountry: "Germany",
+              addressRegion: "Niedersachsen",
+              addressCountry: "DE",
             },
+            knowsAbout: [
+              "Webentwicklung",
+              "Web Development",
+              "Next.js",
+              "React",
+              "TypeScript",
+              "Flutter",
+              "Docker",
+              "DevOps",
+              "Self-Hosting",
+              "CI/CD",
+              "Fullstack Development",
+              "Softwareentwicklung",
+              "Informatik",
+            ],
             sameAs: [
               "https://github.com/Denshooter",
               "https://linkedin.com/in/dkonkol",
@@ -52,90 +71,34 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
           }),
         }}
       />
-      <Header locale={locale} />
-      {/* Spacer to prevent navbar overlap */}
-      <div className="h-24 md:h-32" aria-hidden="true"></div>
-      <main className="relative">
-        <Hero locale={locale} />
-
-        {/* Wavy Separator 1 - Hero to About */}
-        <div className="relative h-24 overflow-hidden">
-          <svg
-            className="absolute inset-0 w-full h-full"
-            viewBox="0 0 1440 120"
-            preserveAspectRatio="none"
-          >
-            <path
-              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
-              fill="url(#gradient1)"
-            />
-            <defs>
-              <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
-                <stop offset="0%" stopColor="#BAE6FD" stopOpacity="0.4" />
-                <stop offset="50%" stopColor="#DDD6FE" stopOpacity="0.4" />
-                <stop offset="100%" stopColor="#FBCFE8" stopOpacity="0.4" />
-              </linearGradient>
-            </defs>
-          </svg>
-        </div>
+      <Script
+        id={"structured-data-website"}
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "WebSite",
+            name: "Dennis Konkol",
+            alternateName: "dk0.dev",
+            url: "https://dk0.dev",
+            inLanguage: ["de", "en"],
+          }),
+        }}
+      />
+      <WindowProvider labels={windowLabels}>
+        <Header locale={locale} />
+        <main className="relative">
+          <Hero locale={locale} />
+          <TischSection locale={locale} />
 
+          <ScrollFadeIn>
+            <ContactClient locale={locale} translations={contactT} />
+          </ScrollFadeIn>
+        </main>
         <ScrollFadeIn>
-          <AboutClient locale={locale} translations={aboutT} />
+          <FooterClient locale={locale} translations={footerT} />
         </ScrollFadeIn>
-
-        {/* Wavy Separator 2 - About to Projects */}
-        <div className="relative h-24 overflow-hidden">
-          <svg
-            className="absolute inset-0 w-full h-full"
-            viewBox="0 0 1440 120"
-            preserveAspectRatio="none"
-          >
-            <path
-              d="M0,64 C360,96 720,32 1080,64 C1200,96 1320,32 1440,64 L1440,0 L0,0 Z"
-              fill="url(#gradient2)"
-            />
-            <defs>
-              <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
-                <stop offset="0%" stopColor="#A7F3D0" stopOpacity="0.3" />
-                <stop offset="50%" stopColor="#BFDBFE" stopOpacity="0.3" />
-                <stop offset="100%" stopColor="#DDD6FE" stopOpacity="0.3" />
-              </linearGradient>
-            </defs>
-          </svg>
-        </div>
-
-        <ScrollFadeIn>
-          <ProjectsClient locale={locale} translations={projectsT} />
-        </ScrollFadeIn>
-
-        {/* Wavy Separator 3 - Projects to Contact */}
-        <div className="relative h-24 overflow-hidden">
-          <svg
-            className="absolute inset-0 w-full h-full"
-            viewBox="0 0 1440 120"
-            preserveAspectRatio="none"
-          >
-            <path
-              d="M0,32 C240,64 480,0 720,32 C960,64 1200,0 1440,32 L1440,120 L0,120 Z"
-              fill="url(#gradient3)"
-            />
-            <defs>
-              <linearGradient id="gradient3" x1="0%" y1="0%" x2="100%" y2="0%">
-                <stop offset="0%" stopColor="#FDE68A" stopOpacity="0.3" />
-                <stop offset="50%" stopColor="#FCA5A5" stopOpacity="0.3" />
-                <stop offset="100%" stopColor="#C4B5FD" stopOpacity="0.3" />
-              </linearGradient>
-            </defs>
-          </svg>
-        </div>
-
-        <ScrollFadeIn>
-          <ContactClient locale={locale} translations={contactT} />
-        </ScrollFadeIn>
-      </main>
-      <ScrollFadeIn>
-        <FooterClient locale={locale} translations={footerT} />
-      </ScrollFadeIn>
+      </WindowProvider>
     </div>
   );
 }

app/_ui/ProjectDetailClient.tsx

@@ -6,6 +6,7 @@ import ReactMarkdown from "react-markdown";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
+import ProjectThumbnail from "@/app/components/ProjectThumbnail";
 
 export type ProjectDetailData = {
   id: number;
@@ -60,7 +61,7 @@ export default function ProjectDetailClient({
   };
 
   return (
-    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 pt-32 pb-20 px-6 transition-colors duration-500">
+    <div className="min-h-screen bg-stone-50 dark:bg-stone-950 pt-32 pb-20 px-6 transition-colors duration-500">
       <div className="max-w-7xl mx-auto">
         
         {/* Navigation - Intelligent Back */}
@@ -68,7 +69,7 @@ export default function ProjectDetailClient({
           onClick={handleBack}
           className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-12 group bg-transparent border-none cursor-pointer"
         >
-          <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
+          <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform duration-200 ease-out" />
           <span className="font-bold uppercase tracking-widest text-xs">
             {tCommon("back")}
           </span>
@@ -90,9 +91,13 @@ export default function ProjectDetailClient({
             {project.imageUrl ? (
               <Image src={project.imageUrl} alt={project.title} fill className="object-cover" priority sizes="100vw" />
             ) : (
-              <div className="absolute inset-0 bg-stone-100 dark:bg-stone-800 flex items-center justify-center">
-                <span className="text-[15rem] font-black text-stone-200 dark:text-stone-700">{project.title.charAt(0)}</span>
-              </div>
+              <ProjectThumbnail
+                title={project.title}
+                category={project.category}
+                tags={project.tags}
+                slug={project.slug}
+                size="hero"
+              />
             )}
           </div>
         </div>
@@ -122,11 +127,11 @@ export default function ProjectDetailClient({
 
                             {project.live && project.live !== "#" && (
 
-                              <a href={project.live} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between w-full p-5 bg-white text-stone-900 rounded-2xl font-black hover:scale-105 transition-transform group">
+                              <a href={project.live} target="_blank" rel="noopener noreferrer" className="flex items-center justify-between w-full p-5 bg-white text-stone-900 rounded-2xl font-black active:scale-[0.97] transition-transform duration-150 ease-out group">
 
                                 <span>{project.button_live_label || tDetail("liveDemo")}</span>
 
-                                <ExternalLink size={20} className="group-hover:translate-x-1 transition-transform" />
+                                <ExternalLink size={20} className="group-hover:translate-x-1 transition-transform duration-200 ease-out" />
 
                               </a>
 

app/_ui/ProjectsPageClient.tsx

@@ -7,6 +7,7 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { Skeleton } from "../components/ui/Skeleton";
+import ProjectThumbnail from "@/app/components/ProjectThumbnail";
 
 export type ProjectListItem = {
   id: number | string; // Allow both for Directus (string) and Prisma (number) compatibility
@@ -60,7 +61,7 @@ export default function ProjectsPageClient({
   }, [projects, selectedCategory, searchQuery]);
 
   return (
-    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 pt-40 pb-20 px-6 transition-colors duration-500">
+    <div className="min-h-screen bg-stone-50 dark:bg-stone-950 pt-40 pb-20 px-6 transition-colors duration-500">
       <div className="max-w-7xl mx-auto">
         
         {/* Header */}
@@ -69,12 +70,12 @@ export default function ProjectsPageClient({
             href={`/${locale}`}
             className="inline-flex items-center gap-2 text-stone-500 hover:text-stone-900 dark:hover:text-white transition-colors mb-10 group"
           >
-            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
+            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform duration-200 ease-out" />
             <span className="font-bold uppercase tracking-widest text-xs">{tCommon("backToHome")}</span>
           </Link>
           
           <h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
-            Archive<span className="text-liquid-mint">.</span>
+            {tList("title")}<span className="text-liquid-mint">.</span>
           </h1>
           <p className="mt-8 text-xl md:text-3xl font-light text-stone-500 dark:text-stone-400 max-w-2xl leading-snug tracking-tight">
             {tList("intro")}
@@ -88,7 +89,7 @@ export default function ProjectsPageClient({
               <button
                 key={cat}
                 onClick={() => setSelectedCategory(cat)}
-                className={`px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-all ${
+                className={`px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] ${
                   selectedCategory === cat 
                     ? "bg-stone-900 dark:bg-stone-100 text-white dark:text-stone-900" 
                     : "bg-white dark:bg-stone-900 text-stone-500 border border-stone-200 dark:border-stone-800"
@@ -105,7 +106,7 @@ export default function ProjectsPageClient({
               placeholder={tList("searchPlaceholder")}
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-2xl py-4 pl-12 pr-6 focus:outline-none focus:ring-2 focus:ring-liquid-mint/30 transition-all shadow-sm"
+              className="w-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 rounded-2xl py-4 pl-12 pr-6 focus:outline-none focus:ring-2 focus:ring-liquid-mint/30 transition-[border-color,box-shadow,background-color] duration-150 ease-out shadow-sm"
             />
           </div>
         </div>
@@ -124,18 +125,28 @@ export default function ProjectsPageClient({
             ))
           ) : (
             filteredProjects.map((project) => (
-            <motion.div key={project.id} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
+            <motion.div key={project.id} initial={{ opacity: 0, y: 16 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true, margin: "-60px" }} transition={{ duration: 0.5, ease: [0.23, 1, 0.32, 1] }}>
               <Link href={`/${locale}/projects/${project.slug}`} className="group block h-full">
-                <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm h-full hover:shadow-xl transition-all flex flex-col">
-                  {project.imageUrl && (
+                <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm h-full hover:shadow-xl transition-shadow duration-300 ease-out flex flex-col">
+                  {project.imageUrl ? (
                     <div className="relative aspect-[16/10] rounded-[2rem] overflow-hidden mb-8 border-4 border-stone-50 dark:border-stone-800 shadow-lg">
-                      <Image src={project.imageUrl} alt={project.title} fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
+                      <Image src={project.imageUrl} alt={project.title} fill className="object-cover group-hover:scale-[1.03] transition-transform duration-500 ease-out" />
+                    </div>
+                  ) : (
+                    <div className="relative aspect-[16/10] rounded-[2rem] overflow-hidden mb-8 border-4 border-stone-50 dark:border-stone-800 shadow-lg">
+                      <ProjectThumbnail
+                        title={project.title}
+                        category={project.category}
+                        tags={project.tags}
+                        slug={project.slug}
+                        size="card"
+                      />
                     </div>
                   )}
                   <div className="flex-1 flex flex-col">
                     <div className="flex justify-between items-start mb-4">
                       <h3 className="text-3xl font-black text-stone-900 dark:text-white uppercase tracking-tight">{project.title}</h3>
-                      <div className="w-12 h-12 rounded-full bg-stone-50 dark:bg-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-all">
+                      <div className="w-12 h-12 rounded-full bg-stone-50 dark:bg-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-colors duration-200">
                         <ArrowUpRight size={20} />
                       </div>
                     </div>

app/api/book-reviews/route.ts

@@ -3,7 +3,7 @@ import { getBookReviews } from '@/lib/directus';
 import { checkRateLimit, getClientIp } from '@/lib/auth';
 
 export const runtime = 'nodejs';
-export const revalidate = 300;
+export const dynamic = 'force-dynamic';
 
 const CACHE_TTL = 300; // 5 minutes
 

app/api/content/page/route.ts

@@ -3,6 +3,9 @@ import { getContentByKey } from "@/lib/content";
 import { getContentPage } from "@/lib/directus";
 import { richTextToSafeHtml } from "@/lib/richtext";
 
+export const runtime = 'nodejs';
+export const dynamic = 'force-dynamic';
+
 const CACHE_TTL = 300; // 5 minutes
 
 export async function GET(request: NextRequest) {

app/api/snippets/route.ts

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

app/components/About.tsx

@@ -1,363 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "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 dynamic from "next/dynamic";
-const RichTextClient = dynamic(() => import("./RichTextClient"), { ssr: false });
-import CurrentlyReading from "./CurrentlyReading";
-import ReadBooks from "./ReadBooks";
-import { motion, AnimatePresence } from "framer-motion";
-import { TechStackCategory, TechStackItem, Hobby, Snippet } from "@/lib/directus";
-import Link from "next/link";
-import ActivityFeed from "./ActivityFeed";
-import BentoChat from "./BentoChat";
-import { Skeleton } from "./ui/Skeleton";
-import { LucideIcon, X, Copy, Check } from "lucide-react";
-
-const iconMap: Record<string, LucideIcon> = {
-  Globe, Server, Code, Wrench, Shield, Activity, Lightbulb, Gamepad2, BookOpen, Tv, Plane, Camera, Stars, Music, Terminal, Cpu
-};
-
-const About = () => {
-  const locale = useLocale();
-  const t = useTranslations("home.about");
-  const [cmsHtml, setCmsHtml] = useState<string | null>(null);
-  const [techStack, setTechStack] = useState<TechStackCategory[]>([]);
-  const [hobbies, setHobbies] = useState<Hobby[]>([]);
-  const [snippets, setSnippets] = useState<Snippet[]>([]);
-  const [selectedSnippet, setSelectedSnippet] = useState<Snippet | null>(null);
-  const [copied, setCopied] = useState(false);
-  const [_cmsMessages, setCmsMessages] = useState<Record<string, string>>({});
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const [cmsRes, techRes, hobbiesRes, msgRes, snippetsRes] = await Promise.all([
-          fetch(`/api/content/page?key=home-about&locale=${locale}`),
-          fetch(`/api/tech-stack?locale=${locale}`),
-          fetch(`/api/hobbies?locale=${locale}`),
-          fetch(`/api/messages?locale=${locale}`),
-          fetch(`/api/snippets?limit=3&featured=true`)
-        ]);
-        
-        const cmsData = await cmsRes.json();
-        if (cmsData?.content?.html) setCmsHtml(cmsData.content.html as string);
-        
-        const techData = await techRes.json();
-        if (techData?.techStack) setTechStack(techData.techStack);
-        
-        const hobbiesData = await hobbiesRes.json();
-        if (hobbiesData?.hobbies) setHobbies(hobbiesData.hobbies);
-
-        const msgData = await msgRes.json();
-        if (msgData?.messages) setCmsMessages(msgData.messages);
-
-        const snippetsData = await snippetsRes.json();
-        if (snippetsData?.snippets) setSnippets(snippetsData.snippets);
-      } catch (error) {
-        console.error("About data fetch failed:", error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    fetchData();
-  }, [locale]);
-
-  const copyToClipboard = (code: string) => {
-    navigator.clipboard.writeText(code);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 2000);
-  };
-
-  return (
-    <section id="about" className="py-16 sm:py-24 md:py-32 px-4 sm:px-6 bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
-      <div className="max-w-7xl mx-auto">
-
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6 md:gap-8">
-          
-          {/* 1. Large Bio Text */}
-          <motion.div 
-            className="md:col-span-8 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
-          >
-            <div className="space-y-5 sm:space-y-6 md:space-y-8">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase">
-                {t("title")}<span className="text-emerald-600 dark:text-emerald-400">.</span>
-              </h2>
-              <div className="prose prose-stone dark:prose-invert max-w-none text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
-                {isLoading ? (
-                  <div className="space-y-3">
-                    <Skeleton className="h-6 w-full" />
-                    <Skeleton className="h-6 w-[95%]" />
-                    <Skeleton className="h-6 w-[90%]" />
-                  </div>
-                ) : cmsHtml ? (
-                  <RichTextClient html={cmsHtml} />
-                ) : (
-                  <p>{t("p1")} {t("p2")}</p>
-                )}
-              </div>
-              <div className="pt-4 sm:pt-6 md:pt-8">
-                <div className="inline-block bg-stone-50 dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-2xl sm:rounded-3xl border border-stone-100 dark:border-stone-700">
-                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-emerald-700 dark:text-emerald-400 mb-1 sm:mb-2">{t("funFactTitle")}</p>
-                   {isLoading ? <Skeleton className="h-5 w-48" /> : <p className="text-sm sm:text-base font-bold opacity-90">{t("funFactBody")}</p>}
-                </div>
-              </div>
-            </div>
-          </motion.div>
-
-          {/* 2. Activity / Status Box */}
-          <motion.div 
-            transition={{ delay: 0.1 }}
-            className="md:col-span-4 bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white overflow-hidden relative flex flex-col"
-          >
-            <div className="relative z-10 h-full">
-              <h3 className="text-lg sm:text-xl font-black mb-6 sm:mb-8 md:mb-10 flex items-center gap-2 uppercase tracking-widest text-liquid-mint">
-                <Activity size={20} /> Status
-              </h3>
-              <ActivityFeed locale={locale} />
-            </div>
-            <div className="absolute top-0 right-0 w-40 h-40 bg-liquid-mint/10 blur-[100px] rounded-full" />
-          </motion.div>
-
-          {/* 3. AI Chat Box */}
-          <motion.div 
-            transition={{ delay: 0.2 }}
-            className="md:col-span-12 lg:col-span-4 bg-stone-50 dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 flex flex-col shadow-sm"
-          >
-            <div className="flex items-center gap-2 mb-5 sm:mb-8">
-              <MessageSquare className="text-liquid-purple" size={20} />
-              <h3 className="text-xl sm:text-2xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter text-liquid-purple">AI Assistant</h3>
-            </div>
-            <div className="flex-1">
-              <BentoChat />
-            </div>
-          </motion.div>
-
-          {/* 4. Tech Stack */}
-          <motion.div 
-            transition={{ delay: 0.3 }}
-            className="md:col-span-12 lg:col-span-8 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
-          >
-            <div className="grid grid-cols-2 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8 md:gap-12">
-              {isLoading ? (
-                Array.from({ length: 4 }).map((_, i) => (
-                  <div key={i} className="space-y-6">
-                    <Skeleton className="h-3 w-20" />
-                    <div className="flex flex-wrap gap-2">
-                      <Skeleton className="h-8 w-24 rounded-xl" />
-                      <Skeleton className="h-8 w-16 rounded-xl" />
-                      <Skeleton className="h-8 w-20 rounded-xl" />
-                    </div>
-                  </div>
-                ))
-              ) : (
-                techStack.map((cat) => (
-                  <div key={cat.id} className="space-y-6">
-                    <h4 className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">{cat.name}</h4>
-                    <div className="flex flex-wrap gap-2">
-                      {cat.items?.map((item: TechStackItem) => (
-                        <span key={item.id} className="px-4 py-2 bg-stone-50 dark:bg-stone-800 rounded-xl text-xs font-bold border border-stone-100 dark:border-stone-700/50 hover:border-liquid-mint transition-colors">
-                          {item.name}
-                        </span>
-                      ))}
-                    </div>
-                  </div>
-                ))
-              )}
-            </div>
-          </motion.div>
-
-          {/* 5. Library, Gear & Snippets */}
-          <div className="md:col-span-12 grid grid-cols-1 lg:grid-cols-12 gap-4 sm:gap-6 md:gap-8">
-            {/* Library - Larger Span */}
-            <motion.div
-              transition={{ delay: 0.4 }}
-              className="lg:col-span-7 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col group overflow-hidden relative min-h-[350px] sm:min-h-[400px] md:min-h-[500px]"
-            >
-              <div className="relative z-10 flex flex-col h-full">
-                <div className="flex justify-between items-center mb-6 sm:mb-8 md:mb-10">
-                  <h3 className="text-xl sm:text-2xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-2 sm:gap-3 uppercase tracking-tighter">
-                    <BookOpen className="text-liquid-purple" size={24} /> Library
-                  </h3>
-                  <Link href={`/${locale}/books`} className="group/link flex items-center gap-2 text-stone-900 dark:text-stone-100 font-black border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-all">
-                    View All <ArrowRight size={14} className="group-hover/link:translate-x-1 transition-transform" />
-                  </Link>
-                </div>
-                <CurrentlyReading />
-                <div className="mt-6 flex-1">
-                  <ReadBooks />
-                </div>
-              </div>
-            </motion.div>
-
-            <div className="lg:col-span-5 flex flex-col gap-4 sm:gap-6 md:gap-8">
-              {/* My Gear (Uses) */}
-              <motion.div
-                transition={{ delay: 0.5 }}
-                className="bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex-1"
-              >
-                <div className="relative z-10">
-                  <h3 className="text-xl sm:text-2xl font-black mb-5 sm:mb-8 flex items-center gap-2 sm:gap-3 uppercase tracking-tighter text-white">
-                    <Cpu className="text-liquid-mint" size={24} /> My Gear
-                  </h3>
-                  <div className="grid grid-cols-2 gap-4 sm: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
-                transition={{ delay: 0.6 }}
-                className="bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between group overflow-hidden relative flex-1"
-              >
-                <div className="relative z-10">
-                  <h3 className="text-xl sm:text-2xl font-black text-stone-900 dark:text-stone-50 flex items-center gap-2 sm:gap-3 uppercase tracking-tighter mb-4 sm:mb-6">
-                    <Terminal className="text-liquid-purple" size={24} /> Snippets
-                  </h3>
-                  <div className="space-y-3">
-                    {isLoading ? (
-                      Array.from({ length: 2 }).map((_, i) => <Skeleton key={i} className="h-12 rounded-xl" />)
-                    ) : snippets.length > 0 ? (
-                      snippets.map((s) => (
-                        <button 
-                          key={s.id}
-                          onClick={() => setSelectedSnippet(s)}
-                          className="w-full text-left p-3 bg-stone-50 dark:bg-stone-800 rounded-xl border border-stone-100 dark:border-stone-700 hover:border-liquid-purple transition-all group/s"
-                        >
-                          <p className="text-[9px] font-black uppercase tracking-widest text-stone-600 dark:text-stone-400 mb-0.5 group-hover/s:text-liquid-purple transition-colors">{s.category}</p>
-                          <p className="text-xs font-bold text-stone-800 dark:text-stone-200">{s.title}</p>
-                        </button>
-                      ))
-                    ) : (
-                      <p className="text-xs text-stone-500 dark:text-stone-400 italic">No snippets yet.</p>
-                    )}
-                  </div>
-                </div>
-                <Link href={`/${locale}/snippets`} className="mt-6 group/btn inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">
-                  Enter the Lab <ArrowRight size={12} className="group-hover/btn:translate-x-1 transition-transform" />
-                </Link>
-              </motion.div>
-            </div>
-          </div>
-
-          {/* 6. Hobbies */}
-          <motion.div 
-            transition={{ delay: 0.5 }}
-            className="md:col-span-12"
-          >
-            <div className="bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between">
-              <div className="grid grid-cols-2 sm:grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6 mb-6 sm:mb-8 md:mb-12">
-                {isLoading ? (
-                  Array.from({ length: 8 }).map((_, i) => <Skeleton key={i} className="h-24 rounded-2xl" />)
-                ) : (
-                  hobbies.map((hobby) => {
-                    const Icon = iconMap[hobby.icon] || Lightbulb;
-                    return (
-                      <div key={hobby.id} className="p-3 sm:p-4 md:p-6 bg-stone-50 dark:bg-stone-800 rounded-xl sm:rounded-2xl border border-stone-100 dark:border-stone-700 hover:border-liquid-mint transition-colors group">
-                        <div className="flex items-center gap-2 sm:gap-3 mb-1.5 sm:mb-3">
-                          <Icon size={16} className="text-liquid-mint group-hover:scale-110 transition-transform shrink-0 sm:w-5 sm:h-5" />
-                          <h4 className="font-bold text-xs sm:text-sm text-stone-800 dark:text-stone-200 uppercase tracking-tight">{hobby.title}</h4>
-                        </div>
-                        <p className="text-[11px] sm:text-xs text-stone-500 dark:text-stone-400 font-medium leading-relaxed hidden sm:block">
-                          {hobby.description}
-                        </p>
-                      </div>
-                    )
-                  })
-                )}
-              </div>
-              <div className="space-y-1 sm:space-y-2 border-t border-stone-100 dark:border-stone-800 pt-4 sm:pt-6 md:pt-8">
-                <h3 className="text-xl sm:text-2xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter">{t("hobbiesTitle")}</h3>
-                <p className="text-stone-500 font-light text-sm sm:text-base md:text-lg">{locale === 'de' ? 'Neugier über die Softwareentwicklung hinaus.' : 'Curiosity beyond software engineering.'}</p>
-              </div>
-            </div>
-          </motion.div>
-
-        </div>
-      </div>
-
-      {/* Snippet Modal */}
-      <AnimatePresence>
-        {selectedSnippet && (
-          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-8">
-            <motion.div 
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              exit={{ opacity: 0 }}
-              onClick={() => setSelectedSnippet(null)}
-              className="absolute inset-0 bg-stone-950/60 backdrop-blur-md"
-            />
-            <motion.div 
-              initial={{ opacity: 0, scale: 0.9, y: 20 }}
-              animate={{ opacity: 1, scale: 1, y: 0 }}
-              exit={{ opacity: 0, scale: 0.9, y: 20 }}
-              className="relative w-full max-w-3xl bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] shadow-2xl border border-stone-200 dark:border-stone-800 overflow-hidden flex flex-col max-h-[90vh]"
-            >
-              <div className="p-5 sm:p-8 md:p-10 overflow-y-auto">
-                <div className="flex justify-between items-start mb-5 sm:mb-8">
-                  <div>
-                    <p className="text-[10px] font-black uppercase tracking-[0.2em] text-liquid-purple mb-1 sm:mb-2">{selectedSnippet.category}</p>
-                    <h3 className="text-xl sm:text-2xl md:text-3xl font-black text-stone-900 dark:text-white uppercase tracking-tighter">{selectedSnippet.title}</h3>
-                  </div>
-                  <button 
-                    onClick={() => setSelectedSnippet(null)}
-                    className="p-3 bg-stone-50 dark:bg-stone-800 rounded-full hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors"
-                  >
-                    <X size={20} />
-                  </button>
-                </div>
-
-                <p className="text-sm sm:text-base text-stone-600 dark:text-stone-400 mb-5 sm:mb-8 leading-relaxed">
-                  {selectedSnippet.description}
-                </p>
-
-                <div className="relative group/code">
-                  <div className="absolute top-3 right-3 sm:top-4 sm:right-4 flex gap-2">
-                    <button
-                      onClick={() => copyToClipboard(selectedSnippet.code)}
-                      className="p-2 sm:p-2.5 bg-white/10 backdrop-blur-md hover:bg-white/20 rounded-lg border border-white/10 transition-all text-white"
-                      title="Copy Code"
-                    >
-                      {copied ? <Check size={16} className="text-emerald-400" /> : <Copy size={16} />}
-                    </button>
-                  </div>
-                  <pre className="bg-stone-950 p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-x-auto text-xs sm:text-sm font-mono text-stone-300 border border-stone-800 leading-relaxed">
-                    <code>{selectedSnippet.code}</code>
-                  </pre>
-                </div>
-              </div>
-              <div className="p-6 bg-stone-50 dark:bg-stone-800/50 border-t border-stone-100 dark:border-stone-800 text-center">
-                <button 
-                  onClick={() => setSelectedSnippet(null)}
-                  className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
-                >
-                  Close Laboratory
-                </button>
-              </div>
-            </motion.div>
-          </div>
-        )}
-      </AnimatePresence>
-    </section>
-  );
-};
-
-export default About;

app/components/ActivityFeed.tsx

@@ -1,238 +0,0 @@
-"use client";
-
-import { useEffect, useState } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import { Disc3, Gamepad2, Zap, Quote as QuoteIcon } from "lucide-react";
-import { useTranslations } from "next-intl";
-import Image from "next/image";
-
-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, CustomActivity>;
-}
-
-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" },
-    { content: "Jedes Programm kann um mindestens einen Faktor zwei vereinfacht werden. Jedes Programm hat mindestens einen Bug.", author: "Kernighan's Law" },
-    { content: "Code lesen ist schwieriger als Code schreiben — deshalb schreibt jeder neu.", author: "Joel Spolsky" },
-    { content: "Die beste Performance-Optimierung ist der Übergang von nicht-funktionierend zu funktionierend.", author: "J. Osterhout" },
-    { content: "Mach es funktionierend, dann mach es schön, dann mach es schnell — in dieser Reihenfolge.", author: "Kent Beck" },
-    { content: "Software ist wie Entropie: Es ist schwer zu fassen, wiegt nichts und gehorcht dem zweiten Hauptsatz der Thermodynamik.", author: "Norman Augustine" },
-    { content: "Gute Software ist nicht die, die keine Bugs hat — sondern die, deren Bugs keine Rolle spielen.", author: "Bruce Eckel" },
-    { content: "Der einzige Weg, schnell zu gehen, ist, gut zu gehen.", author: "Robert C. Martin" },
-  ],
-  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" },
-    { content: "Any program can be simplified by at least a factor of two. Every program has at least one bug.", author: "Kernighan's Law" },
-    { content: "It's harder to read code than to write it — that's why everyone rewrites.", author: "Joel Spolsky" },
-    { content: "The best performance optimization is the transition from a non-working state to a working state.", author: "J. Osterhout" },
-    { content: "Make it work, make it right, make it fast — in that order.", author: "Kent Beck" },
-    { content: "Software is like entropy: it is difficult to grasp, weighs nothing, and obeys the second law of thermodynamics.", author: "Norman Augustine" },
-    { content: "Good software isn't software with no bugs — it's software whose bugs don't matter.", author: "Bruce Eckel" },
-    { content: "The only way to go fast is to go well.", author: "Robert C. Martin" },
-  ]
-};
-
-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;
-  return fallback;
-}
-
-export default function ActivityFeed({
-  onActivityChange,
-  locale = 'en'
-}: {
-  onActivityChange?: (active: boolean) => void;
-  locale?: string;
-}) {
-  const [data, setData] = useState<StatusData | null>(null);
-  const [hasActivity, setHasActivity] = useState(false);
-  const [quoteIndex, setQuoteIndex] = useState(() => Math.floor(Math.random() * (techQuotes[locale as keyof typeof techQuotes] || techQuotes.en).length));
-  const [loading, setLoading] = useState(true);
-  const t = useTranslations("home.about.activity");
-
-  const allQuotes = techQuotes[locale as keyof typeof techQuotes] || techQuotes.en;
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const res = await fetch("/api/n8n/status");
-        if (!res.ok) throw new Error();
-        const json = await res.json();
-        const activityData = Array.isArray(json) ? json[0] : json;
-        
-        setData(activityData);
-        const isActive = Boolean(
-          activityData.coding?.isActive ||
-          activityData.gaming?.isPlaying ||
-          activityData.music?.isPlaying ||
-          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 statusInterval = setInterval(fetchData, 30000);
-    
-    // Pick a random quote every 10 seconds (never the same one twice in a row)
-    const quoteInterval = setInterval(() => {
-      setQuoteIndex((prev) => {
-        let next;
-        do { next = Math.floor(Math.random() * allQuotes.length); } while (next === prev && allQuotes.length > 1);
-        return next;
-      });
-    }, 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 (
-      <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-emerald-600 dark:text-liquid-mint" />
-        </div>
-        <div className="min-h-[80px] sm: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-base sm:text-lg md:text-xl lg:text-2xl font-light leading-tight 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-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>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-4">
-      {data?.coding?.isActive && (
-        <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-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-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/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-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 && (
-              <div className="w-12 h-12 rounded-xl overflow-hidden shrink-0 shadow-lg relative">
-                <Image src={data.gaming.image} alt={data.gaming.name} fill className="object-cover" sizes="48px" unoptimized />
-              </div>
-            )}
-            <div className="min-w-0 flex flex-col justify-center">
-              <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>
-        </motion.div>
-      )}
-
-      {data?.music?.isPlaying && (
-        <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 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">
-              <Image
-                src={data.music.albumArt}
-                alt="Album Art"
-                fill
-                className="object-cover transition-transform duration-700 group-hover:scale-110"
-                sizes="64px"
-              />
-            </div>
-            <div className="min-w-0 flex flex-col justify-center">
-              <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/BackgroundBlobsClient.tsx

@@ -1,17 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-import BackgroundBlobs from "@/components/BackgroundBlobs";
-
-export default function BackgroundBlobsClient() {
-  // Avoid SSR/webpack bailout issues from `next/dynamic({ ssr:false })`
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-
-  return <BackgroundBlobs />;
-}

app/components/BentoChat.tsx

@@ -1,114 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useRef } from "react";
-import { Send, Loader2 } from "lucide-react";
-
-interface Message {
-  id: string;
-  text: string;
-  sender: "user" | "bot";
-  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("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [conversationId, setConversationId] = useState<string>("default");
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    try {
-      const storedId = localStorage.getItem("chatSessionId");
-      if (storedId) setConversationId(storedId);
-      else {
-        const newId = crypto.randomUUID();
-        localStorage.setItem("chatSessionId", newId);
-        setConversationId(newId);
-      }
-
-      const storedMsgs = localStorage.getItem("chatMessages");
-      if (storedMsgs) {
-        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() }]);
-      }
-    } catch {}
-  }, []);
-
-  useEffect(() => {
-    if (messages.length > 0) {
-      localStorage.setItem("chatMessages", JSON.stringify(messages));
-    }
-    
-    if (containerRef.current) {
-      containerRef.current.scrollTop = containerRef.current.scrollHeight;
-    }
-  }, [messages]);
-
-  const handleSend = async () => {
-    if (!inputValue.trim() || isLoading) return;
-    const userMsg: Message = { id: Date.now().toString(), text: inputValue.trim(), sender: "user", timestamp: new Date() };
-    setMessages(prev => [...prev, userMsg]);
-    setInputValue("");
-    setIsLoading(true);
-
-    try {
-      const res = await fetch("/api/n8n/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ message: userMsg.text, conversationId, history: messages.slice(-5).map(m => ({ role: m.sender === "user" ? "user" : "assistant", content: m.text })) }),
-      });
-      const data = await res.json();
-      setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), text: data.reply || "Error", sender: "bot", timestamp: new Date() }]);
-    } catch {
-      setMessages(prev => [...prev, { id: (Date.now() + 1).toString(), text: "Connection error.", sender: "bot", timestamp: new Date() }]);
-    } finally {
-      setIsLoading(true);
-      setTimeout(() => setIsLoading(false), 500); // Small delay for feel
-    }
-  };
-
-  return (
-    <div className="flex flex-col h-full min-h-[300px]">
-      <div 
-        ref={containerRef}
-        className="flex-1 overflow-y-auto pr-2 scrollbar-hide space-y-4 mb-4"
-      >
-        {messages.map((m) => (
-          <div key={m.id} className={`flex ${m.sender === "user" ? "justify-end" : "justify-start"}`}>
-            <div className={`max-w-[90%] rounded-2xl px-4 py-2 text-sm shadow-sm ${m.sender === "user" ? "bg-liquid-purple text-white" : "bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 border border-stone-100 dark:border-stone-700"}`}>
-              {m.text}
-            </div>
-          </div>
-        ))}
-        {isLoading && (
-          <div className="flex justify-start">
-            <div className="bg-stone-100 dark:bg-stone-800 rounded-2xl px-4 py-2"><Loader2 size={14} className="animate-spin text-stone-400" /></div>
-          </div>
-        )}
-      </div>
-
-      <div className="relative">
-        <input
-          type="text"
-          value={inputValue}
-          onChange={(e) => setInputValue(e.target.value)}
-          onKeyDown={(e) => e.key === "Enter" && handleSend()}
-          placeholder="Ask me..."
-          className="w-full bg-white dark:bg-stone-800 border border-stone-200 dark:border-stone-700 rounded-2xl py-3 pl-4 pr-12 text-sm focus:outline-none focus:ring-2 focus:ring-liquid-purple/30 transition-all shadow-inner dark:text-white"
-        />
-        <button onClick={handleSend} aria-label="Send message" className="absolute right-2 top-1/2 -translate-y-1/2 p-2 text-liquid-purple hover:scale-110 transition-transform">
-          <Send size={18} />
-        </button>
-      </div>
-    </div>
-  );
-}

app/components/ChatWidget.tsx

@@ -1,491 +0,0 @@
-"use client";
-
-import React, { useState, useEffect, useRef } from "react";
-import { motion, AnimatePresence } from "framer-motion";
-import {
-  MessageCircle,
-  X,
-  Send,
-  Loader2,
-  Sparkles,
-  Trash2,
-} from "lucide-react";
-
-interface Message {
-  id: string;
-  text: string;
-  sender: "user" | "bot";
-  timestamp: Date;
-  isTyping?: boolean;
-}
-
-export default function ChatWidget() {
-  // Prevent hydration mismatch by only rendering after mount
-  const [mounted, setMounted] = useState(false);
-  const [isOpen, setIsOpen] = useState(false);
-  const [messages, setMessages] = useState<Message[]>([]);
-  const [inputValue, setInputValue] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [conversationId, setConversationId] = useState<string>("default");
-
-  useEffect(() => {
-    setMounted(true);
-    // Generate or retrieve conversation ID only on client
-    try {
-      const stored = localStorage.getItem("chatSessionId");
-      if (stored) {
-        setConversationId(stored);
-        return;
-      }
-      
-      // Generate UUID with fallback for browsers without crypto.randomUUID
-      let newId: string;
-      if (typeof crypto !== "undefined" && crypto.randomUUID) {
-        newId = crypto.randomUUID();
-      } else {
-        // Fallback UUID generation
-        newId = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-          const r = Math.random() * 16 | 0;
-          const v = c === 'x' ? r : (r & 0x3 | 0x8);
-          return v.toString(16);
-        });
-      }
-      
-      localStorage.setItem("chatSessionId", newId);
-      setConversationId(newId);
-    } catch (error) {
-      // localStorage might be disabled or full
-      if (process.env.NODE_ENV === 'development') {
-        console.warn('Failed to access localStorage for chat session:', error);
-      }
-      setConversationId(`session-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`);
-    }
-  }, []);
-
-  const messagesEndRef = useRef<HTMLDivElement>(null);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Auto-scroll to bottom when new messages arrive
-  useEffect(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages]);
-
-  // Focus input when chat opens
-  useEffect(() => {
-    if (isOpen) {
-      inputRef.current?.focus();
-    }
-  }, [isOpen]);
-
-  // Helper function to decode HTML entities
-  const decodeHtmlEntities = (text: string): string => {
-    if (!text || typeof text !== "string") return text;
-    const textarea = document.createElement("textarea");
-    textarea.innerHTML = text;
-    return textarea.value;
-  };
-
-  // Load messages from localStorage
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      try {
-        const stored = localStorage.getItem("chatMessages");
-        if (stored) {
-          try {
-            const parsed = JSON.parse(stored);
-            setMessages(
-              parsed.map((m: Message) => ({
-                ...m,
-                text: decodeHtmlEntities(m.text), // Decode HTML entities when loading
-                timestamp: new Date(m.timestamp),
-              })),
-            );
-          } catch (e) {
-            if (process.env.NODE_ENV === 'development') {
-              console.error("Failed to parse chat history", e);
-            }
-            // Clear corrupted data
-            try {
-              localStorage.removeItem("chatMessages");
-            } catch {
-              // Ignore cleanup errors
-            }
-            // Add welcome message
-            setMessages([
-              {
-                id: "welcome",
-                text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
-                sender: "bot",
-                timestamp: new Date(),
-              },
-            ]);
-          }
-        } else {
-          // Add welcome message
-          setMessages([
-            {
-              id: "welcome",
-              text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
-              sender: "bot",
-              timestamp: new Date(),
-            },
-          ]);
-        }
-      } catch (error) {
-        // localStorage might be disabled
-        if (process.env.NODE_ENV === 'development') {
-          console.warn("Failed to load chat history from localStorage:", error);
-        }
-        // Add welcome message anyway
-        setMessages([
-          {
-            id: "welcome",
-            text: "Hi! I'm Dennis's AI assistant. Ask me anything about his skills, projects, or experience! 🚀",
-            sender: "bot",
-            timestamp: new Date(),
-          },
-        ]);
-      }
-    }
-  }, []);
-
-  // Save messages to localStorage
-  useEffect(() => {
-    if (typeof window !== "undefined" && messages.length > 0) {
-      try {
-        localStorage.setItem("chatMessages", JSON.stringify(messages));
-      } catch (error) {
-        // localStorage might be full or disabled
-        if (process.env.NODE_ENV === 'development') {
-          console.warn("Failed to save chat messages to localStorage:", error);
-        }
-      }
-    }
-  }, [messages]);
-
-  const handleSend = async () => {
-    if (!inputValue.trim() || isLoading) return;
-
-    const userMessage: Message = {
-      id: Date.now().toString(),
-      text: inputValue.trim(),
-      sender: "user",
-      timestamp: new Date(),
-    };
-
-    setMessages((prev) => [...prev, userMessage]);
-    setInputValue("");
-    setIsLoading(true);
-
-    // Get last 10 messages for context
-    const history = messages.slice(-10).map((m) => ({
-      role: m.sender === "user" ? "user" : "assistant",
-      content: m.text,
-    }));
-
-    try {
-      const response = await fetch("/api/n8n/chat", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          message: userMessage.text,
-          conversationId,
-          history,
-        }),
-      });
-
-      if (!response.ok) {
-        const errorText = await response.text().catch(() => "Unknown error");
-        console.error("Chat API error:", {
-          status: response.status,
-          statusText: response.statusText,
-          error: errorText,
-        });
-        throw new Error(
-          `Failed to get response: ${response.status} - ${errorText.substring(0, 100)}`,
-        );
-      }
-
-      const data = await response.json();
-
-      // Log response for debugging (only in development)
-      if (process.env.NODE_ENV === "development") {
-        console.log("Chat API response:", data);
-      }
-
-      // Decode HTML entities in the reply
-      let replyText =
-        data.reply || "Sorry, I couldn't process that. Please try again.";
-
-      // Decode HTML entities client-side (double safety)
-      replyText = decodeHtmlEntities(replyText);
-
-      const botMessage: Message = {
-        id: (Date.now() + 1).toString(),
-        text: replyText,
-        sender: "bot",
-        timestamp: new Date(),
-      };
-
-      setMessages((prev) => [...prev, botMessage]);
-    } catch (error) {
-      console.error("Chat error:", error);
-
-      const errorMessage: Message = {
-        id: (Date.now() + 1).toString(),
-        text: "Sorry, I'm having trouble connecting right now. Please try again later or use the contact form below.",
-        sender: "bot",
-        timestamp: new Date(),
-      };
-
-      setMessages((prev) => [...prev, errorMessage]);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  const clearChat = () => {
-    // Reset session ID
-    const newId = crypto.randomUUID();
-    setConversationId(newId);
-    if (typeof window !== "undefined") {
-      localStorage.setItem("chatSessionId", newId);
-      localStorage.removeItem("chatMessages");
-    }
-
-    setMessages([
-      {
-        id: "welcome",
-        text: "Conversation restarted! Ask me anything about Dennis! 🚀",
-        sender: "bot",
-        timestamp: new Date(),
-      },
-    ]);
-  };
-
-  // Don't render until mounted to prevent hydration mismatch
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <>
-      {/* Chat Button */}
-      <AnimatePresence>
-        {!isOpen && (
-          <motion.div
-            role="button"
-            tabIndex={0}
-            initial={{ scale: 0, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            exit={{ scale: 0, opacity: 0 }}
-            onClick={() => setIsOpen(true)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                setIsOpen(true);
-              }
-            }}
-            className="fixed bottom-4 left-4 md:bottom-6 md:left-6 z-30 bg-white/80 backdrop-blur-xl text-stone-900 p-3.5 rounded-full shadow-[0_10px_26px_rgba(41,37,36,0.16)] hover:bg-white hover:scale-105 transition-all duration-300 group cursor-pointer border border-white/60 ring-1 ring-white/30"
-            aria-label="Open chat"
-          >
-            <MessageCircle size={24} />
-            <span className="absolute top-0 right-0 w-3 h-3 bg-green-500 rounded-full animate-pulse shadow-sm border-2 border-white" />
-
-            {/* Tooltip */}
-            <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-3 py-1.5 bg-stone-900/90 text-stone-50 text-xs font-medium rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-[100] shadow-xl backdrop-blur-sm">
-              Chat with AI
-            </span>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Chat Window */}
-      <AnimatePresence>
-        {isOpen && (
-          <motion.div
-            data-chat-widget
-            initial={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
-            animate={{ opacity: 1, y: 0, scale: 1, filter: "blur(0px)" }}
-            exit={{ opacity: 0, y: 20, scale: 0.95, filter: "blur(10px)" }}
-            transition={{ type: "spring", damping: 30, stiffness: 400 }}
-            className="fixed bottom-20 left-4 right-4 md:bottom-24 md:left-6 md:right-auto z-30 md:w-[380px] h-[60vh] md:h-[550px] max-h-[600px] bg-white/80 backdrop-blur-xl saturate-100 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.16)] flex flex-col overflow-hidden border border-white/60 ring-1 ring-white/30"
-          >
-            {/* Header */}
-            <div className="bg-white/70 text-stone-900 p-4 flex items-center justify-between border-b border-white/50">
-              <div className="flex items-center gap-3">
-                <div className="relative">
-                  <div className="w-10 h-10 rounded-full bg-gradient-to-br from-liquid-mint/50 via-liquid-lavender/40 to-liquid-rose/40 flex items-center justify-center ring-1 ring-white/50 shadow-sm">
-                    <Sparkles size={18} className="text-stone-800" />
-                  </div>
-                  <span className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-green-500 rounded-full border-2 border-white shadow-sm" />
-                </div>
-                <div className="min-w-0 flex-1">
-                  <h3 className="font-bold text-sm truncate text-stone-900 tracking-tight">
-                    Assistant
-                  </h3>
-                  <p className="text-[11px] font-medium text-stone-500 truncate">
-                    Powered by AI
-                  </p>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-1">
-                <button
-                  onClick={clearChat}
-                  className="p-2 hover:bg-stone-200/40 rounded-full transition-colors text-stone-500 hover:text-red-500"
-                  title="Clear conversation"
-                >
-                  <Trash2 size={16} />
-                </button>
-                <button
-                  onClick={() => setIsOpen(false)}
-                  className="p-2 hover:bg-stone-200/40 rounded-full transition-colors text-stone-500 hover:text-stone-900"
-                  aria-label="Close chat"
-                >
-                  <X size={20} />
-                </button>
-              </div>
-            </div>
-
-            {/* Messages */}
-            <div className="flex-1 overflow-y-auto scrollbar-hide p-4 space-y-4 bg-transparent">
-              {messages.map((message) => (
-                <motion.div
-                  key={message.id}
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  className={`flex ${message.sender === "user" ? "justify-end" : "justify-start"}`}
-                >
-                  <div
-                    className={`max-w-[85%] rounded-2xl px-4 py-3 shadow-sm ${
-                      message.sender === "user"
-                        ? "bg-stone-900 text-white"
-                        : "bg-white/70 text-stone-900 border border-white/60"
-                    }`}
-                  >
-                    <p className={`text-sm whitespace-pre-wrap break-words leading-relaxed ${
-                      message.sender === "user" ? "text-white/90 font-normal" : "text-stone-900 font-medium"
-                    }`}>
-                      {message.text}
-                    </p>
-                    <p
-                      className={`text-[10px] mt-1.5 ${
-                        message.sender === "user"
-                          ? "text-stone-400"
-                          : "text-stone-500"
-                      }`}
-                    >
-                      {message.timestamp.toLocaleTimeString([], {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })}
-                    </p>
-                  </div>
-                </motion.div>
-              ))}
-
-              {/* Typing Indicator */}
-              {isLoading && (
-                <motion.div
-                  initial={{ opacity: 0, y: 10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  className="flex justify-start"
-                >
-                  <div className="bg-[#f3f1e7] border border-[#e7e5e4] rounded-2xl px-4 py-3 shadow-sm">
-                    <div className="flex gap-1.5">
-                      <motion.div
-                        className="w-1.5 h-1.5 bg-stone-500 rounded-full"
-                        animate={{ y: [0, -6, 0] }}
-                        transition={{
-                          duration: 0.6,
-                          repeat: Infinity,
-                          delay: 0,
-                        }}
-                      />
-                      <motion.div
-                        className="w-1.5 h-1.5 bg-stone-500 rounded-full"
-                        animate={{ y: [0, -6, 0] }}
-                        transition={{
-                          duration: 0.6,
-                          repeat: Infinity,
-                          delay: 0.1,
-                        }}
-                      />
-                      <motion.div
-                        className="w-1.5 h-1.5 bg-stone-500 rounded-full"
-                        animate={{ y: [0, -6, 0] }}
-                        transition={{
-                          duration: 0.6,
-                          repeat: Infinity,
-                          delay: 0.2,
-                        }}
-                      />
-                    </div>
-                  </div>
-                </motion.div>
-              )}
-
-              <div ref={messagesEndRef} />
-            </div>
-
-            {/* Input */}
-            <div className="p-4 bg-[#fdfcf8] border-t border-[#e7e5e4]">
-              <div className="flex gap-2">
-                <input
-                  ref={inputRef}
-                  type="text"
-                  value={inputValue}
-                  onChange={(e) => setInputValue(e.target.value)}
-                  onKeyPress={handleKeyPress}
-                  placeholder="Ask anything..."
-                  disabled={isLoading}
-                  className="flex-1 px-4 py-3 text-sm bg-[#f5f5f4] text-[#292524] rounded-xl border border-[#e7e5e4] focus:outline-none focus:ring-2 focus:ring-[#e7e5e4] focus:border-[#a8a29e] focus:bg-[#fdfcf8] disabled:opacity-50 disabled:cursor-not-allowed placeholder:text-[#78716c] transition-all shadow-inner"
-                />
-                <button
-                  onClick={handleSend}
-                  disabled={!inputValue.trim() || isLoading}
-                  className="p-3 bg-[#292524] text-[#fdfcf8] rounded-xl hover:bg-[#44403c] hover:shadow-lg hover:scale-105 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 shadow-md flex items-center justify-center aspect-square"
-                  aria-label="Send message"
-                >
-                  {isLoading ? (
-                    <Loader2 size={18} className="animate-spin" />
-                  ) : (
-                    <Send size={18} />
-                  )}
-                </button>
-              </div>
-
-              {/* Quick Actions */}
-              <div className="flex gap-2 mt-3 overflow-x-auto pb-1 scrollbar-hide mask-fade-right">
-                {[
-                  "Skills 🛠️",
-                  "Projects 🚀",
-                  "Contact 📧",
-                ].map((suggestion, index) => (
-                  <button
-                    key={index}
-                    onClick={() => {
-                      setInputValue(suggestion.replace(/ .*/, '')); // Strip emoji for search if needed, or keep
-                      inputRef.current?.focus();
-                    }}
-                    disabled={isLoading}
-                    className="px-3 py-1.5 text-xs font-medium bg-[#f5f5f4] text-[#57534e] rounded-lg hover:bg-[#e7e5e4] hover:text-[#292524] border border-[#e7e5e4] transition-all whitespace-nowrap disabled:opacity-50 flex-shrink-0 shadow-sm"
-                  >
-                    {suggestion}
-                  </button>
-                ))}
-              </div>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-    </>
-  );
-}

app/components/ClientProviders.tsx

@@ -1,38 +1,28 @@
 "use client";
 
-import React, { useEffect, useState } from "react";
-import { usePathname } from "next/navigation";
-import dynamic from "next/dynamic";
+import React from "react";
+import { MotionConfig } from "framer-motion";
 import { ToastProvider } from "@/components/Toast";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import { ConsentProvider } from "./ConsentProvider";
 import { ThemeProvider } from "./ThemeProvider";
 
-const BackgroundBlobs = dynamic(
-  () => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })),
-  { ssr: false, loading: () => null }
-);
-
 export default function ClientProviders({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  const [mounted, setMounted] = useState(false);
-  const pathname = usePathname();
-
-  useEffect(() => {
-    setMounted(true);
-  }, [pathname]);
-
   return (
     <ErrorBoundary>
       <ErrorBoundary>
         <ConsentProvider>
           <ThemeProvider>
-            <GatedProviders mounted={mounted}>
-              {children}
-            </GatedProviders>
+            {/* Respect prefers-reduced-motion in every Framer Motion animation */}
+            <MotionConfig reducedMotion="user">
+              <GatedProviders>
+                {children}
+              </GatedProviders>
+            </MotionConfig>
           </ThemeProvider>
         </ConsentProvider>
       </ErrorBoundary>
@@ -40,31 +30,10 @@ export default function ClientProviders({
   );
 }
 
-function GatedProviders({
-  children,
-  mounted,
-}: {
-  children: React.ReactNode;
-  mounted: boolean;
-}) {
-  // Defer animated background blobs until after LCP
-  const [deferredReady, setDeferredReady] = useState(false);
-  useEffect(() => {
-    if (!mounted) return;
-    let id: ReturnType<typeof setTimeout> | number;
-    if (typeof requestIdleCallback !== "undefined") {
-      id = requestIdleCallback(() => setDeferredReady(true), { timeout: 5000 });
-      return () => cancelIdleCallback(id as number);
-    } else {
-      id = setTimeout(() => setDeferredReady(true), 200);
-      return () => clearTimeout(id);
-    }
-  }, [mounted]);
-
+function GatedProviders({ children }: { children: React.ReactNode }) {
   return (
     <ErrorBoundary>
       <ToastProvider>
-        {deferredReady && <BackgroundBlobs />}
         <div className="relative z-10">{children}</div>
       </ToastProvider>
     </ErrorBoundary>

app/components/ClientWrappers.tsx

@@ -10,13 +10,9 @@ import dynamic from 'next/dynamic';
 
 // Lazy-load below-fold components so their JS doesn't block initial paint / LCP.
 // SSR stays on (default) so content is in the initial HTML for SEO.
-const About = dynamic(() => import('./About'));
-const Projects = dynamic(() => import('./Projects'));
 const Contact = dynamic(() => import('./Contact'));
 const Footer = dynamic(() => import('./Footer'));
 import type {
-  AboutTranslations,
-  ProjectsTranslations,
   ContactTranslations,
   FooterTranslations,
 } from '@/types/translations';
@@ -29,40 +25,6 @@ function getNormalizedLocale(locale: string): 'en' | 'de' {
   return locale.startsWith('de') ? 'de' : 'en';
 }
 
-export function AboutClient({ locale }: { locale: string; translations: AboutTranslations }) {
-  const normalLocale = getNormalizedLocale(locale);
-  const baseMessages = messageMap[normalLocale];
-  
-  const messages = {
-    home: {
-      about: baseMessages.home.about
-    }
-  };
-  
-  return (
-    <NextIntlClientProvider locale={locale} messages={messages}>
-      <About />
-    </NextIntlClientProvider>
-  );
-}
-
-export function ProjectsClient({ locale }: { locale: string; translations: ProjectsTranslations }) {
-  const normalLocale = getNormalizedLocale(locale);
-  const baseMessages = messageMap[normalLocale];
-  
-  const messages = {
-    home: {
-      projects: baseMessages.home.projects
-    }
-  };
-  
-  return (
-    <NextIntlClientProvider locale={locale} messages={messages}>
-      <Projects />
-    </NextIntlClientProvider>
-  );
-}
-
 export function ContactClient({ locale }: { locale: string; translations: ContactTranslations }) {
   const normalLocale = getNormalizedLocale(locale);
   const baseMessages = messageMap[normalLocale];

app/components/Contact.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { motion } from "framer-motion";
-import { Mail, MapPin, Send, Github, Linkedin } from "lucide-react";
+import { Send, Github, Linkedin } from "lucide-react";
 import { useToast } from "@/components/Toast";
 import { useLocale, useTranslations } from "next-intl";
 import dynamic from "next/dynamic";
@@ -80,6 +79,7 @@ const Contact = () => {
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    setTouched({ name: true, email: true, subject: true, message: true });
 
     if (!validateForm()) {
       return;
@@ -114,7 +114,7 @@ const Contact = () => {
       }
     } catch (error) {
       if (process.env.NODE_ENV === 'development') {
-        console.error("Error sending email:", error);
+        if (process.env.NODE_ENV === "development") console.error("Error sending email:", error);
       }
       showEmailError(
         "Network error. Please check your connection and try again.",
@@ -152,196 +152,103 @@ const Contact = () => {
     validateForm();
   };
 
+  const fields: { name: keyof typeof formData; type: string; multiline?: boolean; autoComplete?: string }[] = [
+    { name: "name", type: "text", autoComplete: "name" },
+    { name: "email", type: "email", autoComplete: "email" },
+    { name: "subject", type: "text" },
+    { name: "message", type: "text", multiline: true },
+  ];
+
+  const pill =
+    "inline-flex items-center gap-2 rounded-full px-5 py-3 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-signal active:scale-[0.97]";
+
   return (
-    <section
-      id="contact"
-      className="py-16 sm:py-24 md:py-32 px-4 sm:px-6 bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500"
-    >
-      <div className="max-w-7xl mx-auto">
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6 md:gap-8">
-
-          {/* Header Card */}
-          <motion.div
-            className="md:col-span-12 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
+    <section id="contact" className="border-t-2 border-ink bg-signal px-4 pb-16 pt-14 text-ink sm:px-6 md:pb-24 md:pt-20 lg:px-10">
+      <div className="grid gap-10 lg:grid-cols-[1.1fr_1fr] lg:items-start">
+        <div className="min-w-0">
+          <p className="font-mono text-[13px]">{tInfo("locationValue")}</p>
+          <h2 className="mt-3 font-display text-[clamp(3rem,9vw,7.5rem)] font-extrabold leading-[0.86] tracking-[-0.05em] [font-variation-settings:'wdth'_80]">
+            {t("title")}
+          </h2>
+          {cmsHtml ? (
+            <RichTextClient html={cmsHtml} className="prose mt-6 max-w-[46ch] text-lg leading-relaxed text-ink [&_*]:text-inherit" />
+          ) : (
+            <p className="mt-6 max-w-[46ch] text-lg leading-relaxed">{t("subtitle")}</p>
+          )}
+          <a
+            href="mailto:contact@dk0.dev"
+            className="mt-8 block w-fit font-display text-[clamp(2rem,6vw,4.4rem)] font-extrabold leading-none tracking-[-0.045em] [overflow-wrap:anywhere] [font-variation-settings:'wdth'_80] hover:underline hover:decoration-[3px] hover:underline-offset-[6px]"
           >
-            <div className="max-w-3xl">
-              <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-black text-stone-900 dark:text-stone-50 tracking-tighter uppercase mb-4 sm:mb-6 md:mb-8">
-                {t("title")}<span className="text-emerald-600 dark:text-emerald-400">.</span>
-              </h2>
-              {cmsHtml ? (
-                <RichTextClient html={cmsHtml} className="prose prose-stone dark:prose-invert max-w-none text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400" />
-              ) : (
-                <p className="text-base sm:text-lg md:text-xl lg:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
-                  {t("subtitle")}
-                </p>
-              )}
-            </div>
-          </motion.div>
-
-          {/* Info Side (Unified Connect Box) */}
-          <motion.div
-            transition={{ delay: 0.1 }}
-            className="md:col-span-12 lg:col-span-4 flex flex-col gap-4 sm:gap-6"
-          >
-            <div className="bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex-1 flex flex-col justify-between relative overflow-hidden group">
-               <div className="relative z-10">
-                 <div className="flex justify-between items-center mb-6 sm:mb-8 md:mb-12">
-                   <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">Connect</p>
-                   <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-700 dark:text-emerald-400">Online</span>
-                   </div>
-                 </div>
-                 
-                 <div className="space-y-5 sm:space-y-6 md: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-600 dark:text-stone-400 mb-1">Email</span>
-                       <span className="text-lg sm:text-xl md: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-600 dark:text-stone-400 mb-1">Code</span>
-                       <span className="text-lg sm:text-xl md: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-600 dark:text-stone-400 mb-1">Professional</span>
-                       <span className="text-lg sm:text-xl md: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-6 sm:mt-8 md:mt-12 pt-4 sm:pt-6 md: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-600 dark: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
-            transition={{ delay: 0.2 }}
-            className="md:col-span-12 lg:col-span-8 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-12 border border-stone-200/60 dark:border-stone-800/60 shadow-sm"
-          >
-            <h3 className="text-xl sm:text-2xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter mb-6 sm:mb-8 md:mb-10">
-              {tForm("title")}
-            </h3>
-
-            <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6 md:space-y-8">
-              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 md:gap-8">
-                <div className="space-y-2">
-                  <label htmlFor="name" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 pl-4">
-                    {tForm("labels.name")}
-                  </label>
-                  <input
-                    type="text"
-                    id="name"
-                    name="name"
-                    value={formData.name}
-                    onChange={handleChange}
-                    onBlur={handleBlur}
-                    required
-                    className="w-full px-4 sm:px-6 py-3 sm:py-4 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-xl sm:rounded-2xl text-sm sm:text-base 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")}
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <label htmlFor="email" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 pl-4">
-                    {tForm("labels.email")}
-                  </label>
-                  <input
-                    type="email"
-                    id="email"
-                    name="email"
-                    value={formData.email}
-                    onChange={handleChange}
-                    onBlur={handleBlur}
-                    required
-                    className="w-full px-4 sm:px-6 py-3 sm:py-4 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-xl sm:rounded-2xl text-sm sm:text-base 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")}
-                  />
-                </div>
-              </div>
-
-              <div className="space-y-2">
-                <label htmlFor="subject" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 pl-4">
-                  {tForm("labels.subject")}
-                </label>
-                <input
-                  type="text"
-                  id="subject"
-                  name="subject"
-                  value={formData.subject}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  required
-                  className="w-full px-4 sm:px-6 py-3 sm:py-4 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-xl sm:rounded-2xl text-sm sm:text-base 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")}
-                />
-              </div>
-
-              <div className="space-y-2">
-                <label htmlFor="message" className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400 pl-4">
-                  {tForm("labels.message")}
-                </label>
-                <textarea
-                  id="message"
-                  name="message"
-                  value={formData.message}
-                  onChange={handleChange}
-                  onBlur={handleBlur}
-                  required
-                  rows={5}
-                  className="w-full px-4 sm:px-6 py-3 sm:py-4 bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700 rounded-xl sm:rounded-2xl text-sm sm:text-base 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")}
-                />
-              </div>
-
-              <motion.button
-                type="submit"
-                disabled={isSubmitting}
-                whileHover={{ scale: 1.01 }}
-                whileTap={{ scale: 0.99 }}
-                className="w-full py-4 sm:py-5 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-xl sm:rounded-2xl font-black text-xs uppercase tracking-[0.2em] sm: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" />
-                ) : (
-                  <>
-                    <Send size={16} />
-                    {tForm("send")}
-                  </>
-                )}
-              </motion.button>
-            </form>
-          </motion.div>
+            contact<span className="text-paper">@</span>dk0.dev
+          </a>
+          <div className="mt-6 flex flex-wrap gap-2">
+            <a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className={pill}>
+              <Github size={16} aria-hidden="true" /> GitHub
+            </a>
+            <a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className={pill}>
+              <Linkedin size={16} aria-hidden="true" /> LinkedIn
+            </a>
+          </div>
         </div>
+
+        <form
+          onSubmit={handleSubmit}
+          noValidate
+          className="grid gap-4 rounded-[18px] border-2 border-ink bg-paper p-5 shadow-[8px_8px_0_rgb(var(--plakat-ink))] md:p-7"
+        >
+          <h3 className="font-display text-2xl font-extrabold tracking-[-0.03em]">{tForm("title")}</h3>
+          {fields.map((f) => {
+            const showError = touched[f.name] && errors[f.name];
+            const common = {
+              id: f.name,
+              name: f.name,
+              value: formData[f.name],
+              onChange: handleChange,
+              onBlur: handleBlur,
+              required: true,
+              placeholder: tForm(`placeholders.${f.name}`),
+              "aria-invalid": showError ? true : undefined,
+              "aria-describedby": showError ? `${f.name}-error` : undefined,
+              className: `w-full rounded-xl border-2 bg-paper px-4 py-3 text-base text-ink placeholder:text-ink/40 transition-[border-color,box-shadow] duration-150 ease-out focus:outline-none focus-visible:ring-2 focus-visible:ring-signal ${
+                showError ? "border-signal" : "border-ink"
+              }`,
+            };
+            return (
+              <div key={f.name} className="grid gap-1.5">
+                <label htmlFor={f.name} className="font-mono text-[13px]">
+                  {tForm(`labels.${f.name}`)}
+                </label>
+                {f.multiline ? (
+                  <textarea {...common} rows={5} className={`${common.className} resize-none`} />
+                ) : (
+                  <input {...common} type={f.type} autoComplete={f.autoComplete} />
+                )}
+                {showError && (
+                  <p id={`${f.name}-error`} className="text-sm font-medium text-signal" role="alert">
+                    {errors[f.name]}
+                  </p>
+                )}
+              </div>
+            );
+          })}
+          <button
+            type="submit"
+            disabled={isSubmitting}
+            className="mt-1 inline-flex items-center justify-center gap-2.5 rounded-full bg-ink px-5 py-3.5 text-[15px] font-semibold text-paper transition-[opacity,transform] duration-150 ease-out active:scale-[0.97] disabled:opacity-50"
+          >
+            {isSubmitting ? (
+              <>
+                <span className="h-4 w-4 animate-spin rounded-full border-2 border-paper/30 border-t-paper" aria-hidden="true" />
+                {tForm("sending")}
+              </>
+            ) : (
+              <>
+                <Send size={16} aria-hidden="true" />
+                {tForm("send")}
+              </>
+            )}
+          </button>
+        </form>
       </div>
     </section>
   );

app/components/CurrentlyReading.tsx

@@ -1,178 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { BookOpen } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useTranslations } from "next-intl";
-import Image from "next/image";
-import { Skeleton } from "./ui/Skeleton";
-
-interface CurrentlyReading {
-  title: string;
-  authors: string[];
-  image: string | null;
-  progress: number;
-  startedAt: string | null;
-}
-
-const CurrentlyReading = () => {
-  const t = useTranslations("home.about.currentlyReading");
-  const [books, setBooks] = useState<CurrentlyReading[]>([]);
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    // Nur einmal beim Laden der Seite
-    const fetchCurrentlyReading = async () => {
-      try {
-        const res = await fetch("/api/n8n/hardcover/currently-reading", {
-          cache: "default",
-        });
-
-        if (!res.ok) {
-          throw new Error("Failed to fetch");
-        }
-
-        const data = await res.json();
-        // Handle both single book and array of books
-        if (data.currentlyReading) {
-          const booksArray = Array.isArray(data.currentlyReading) 
-            ? data.currentlyReading 
-            : [data.currentlyReading];
-          setBooks(booksArray);
-        } else {
-          setBooks([]);
-        }
-      } catch (error) {
-        if (process.env.NODE_ENV === "development") {
-          console.error("Error fetching currently reading:", error);
-        }
-        setBooks([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchCurrentlyReading();
-  }, []); // Leeres Array = nur einmal beim Mount
-
-  if (loading) {
-    return (
-      <div className="space-y-4">
-        <div className="flex flex-col sm:flex-row gap-4 items-start">
-          <Skeleton className="w-24 h-36 sm:w-28 sm:h-40 rounded-lg shrink-0" />
-          <div className="flex-1 space-y-3 w-full">
-            <Skeleton className="h-6 w-3/4" />
-            <Skeleton className="h-4 w-1/2" />
-            <div className="space-y-2 pt-4">
-              <Skeleton className="h-2 w-full" />
-              <Skeleton className="h-2 w-full" />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  // Zeige nichts wenn kein Buch gelesen wird oder noch geladen wird
-  if (books.length === 0) {
-    return null;
-  }
-
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center gap-2 mb-4">
-        <BookOpen size={18} className="text-stone-600 dark:text-stone-300 flex-shrink-0" />
-        <h3 className="text-lg font-bold text-stone-900 dark:text-stone-100">
-          {t("title")} {books.length > 1 && `(${books.length})`}
-        </h3>
-      </div>
-
-      {/* Books List */}
-      {books.map((book, index) => (
-        <motion.div
-          key={`${book.title}-${index}`}
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-50px" }}
-          transition={{ duration: 0.6, delay: index * 0.1, ease: [0.25, 0.1, 0.25, 1] }}
-          whileHover={{
-            scale: 1.02,
-            transition: { duration: 0.4, ease: "easeOut" },
-          }}
-          className="relative overflow-hidden bg-gradient-to-br from-liquid-lavender/15 via-liquid-pink/10 to-liquid-rose/15 dark:from-stone-800 dark:via-stone-800 dark:to-stone-700 border-2 border-liquid-lavender/30 dark:border-stone-700 rounded-xl p-6 backdrop-blur-sm hover:border-liquid-lavender/50 dark:hover:border-stone-600 hover:from-liquid-lavender/20 hover:via-liquid-pink/15 hover:to-liquid-rose/20 transition-all duration-500 ease-out"
-        >
-          {/* Background Blob Animation */}
-          <motion.div
-            className="absolute -top-10 -right-10 w-32 h-32 bg-gradient-to-br from-liquid-lavender/20 to-liquid-pink/20 dark:from-stone-700 dark:to-stone-600 rounded-full blur-2xl"
-            animate={{
-              scale: [1, 1.2, 1],
-              opacity: [0.3, 0.5, 0.3],
-            }}
-            transition={{
-              duration: 8,
-              repeat: Infinity,
-              ease: "easeInOut",
-              delay: index * 0.5,
-            }}
-          />
-
-          <div className="relative z-10 flex flex-col sm:flex-row gap-4 items-start">
-            {/* Book Cover */}
-            {book.image && (
-              <motion.div
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
-                className="flex-shrink-0"
-              >
-                <div className="relative w-24 h-36 sm:w-28 sm:h-40 rounded-lg overflow-hidden shadow-lg border-2 border-white/50 dark:border-stone-600">
-                  <Image
-                    src={book.image}
-                    alt={book.title}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 640px) 96px, 112px"
-                  />
-                  {/* Glossy Overlay */}
-                  <div className="absolute inset-0 bg-gradient-to-tr from-white/20 via-transparent to-white/10 pointer-events-none" />
-                </div>
-              </motion.div>
-            )}
-
-            {/* Book Info */}
-            <div className="flex-1 min-w-0">
-              {/* Title */}
-              <h4 className="text-lg font-bold text-stone-900 dark:text-stone-100 mb-1 line-clamp-2">
-                {book.title}
-              </h4>
-
-              {/* Authors */}
-              <p className="text-sm text-stone-600 dark:text-stone-400 mb-4 line-clamp-1">
-                {book.authors.join(", ")}
-              </p>
-
-              {/* Progress Bar */}
-              <div className="space-y-2">
-                <div className="flex items-center justify-between text-xs text-stone-600 dark:text-stone-400">
-                  <span>{t("progress")}</span>
-                  <span className="font-semibold">{isNaN(book.progress) ? 0 : book.progress}%</span>
-                </div>
-                <div className="relative h-2 bg-white/50 dark:bg-stone-700 rounded-full overflow-hidden border border-white/70 dark:border-stone-600">
-                  <motion.div
-                    initial={{ width: 0 }}
-                    animate={{ width: `${isNaN(book.progress) ? 0 : book.progress}%` }}
-                    transition={{ duration: 1, delay: 0.3 + index * 0.1, ease: "easeOut" }}
-                    className="absolute left-0 top-0 h-full bg-gradient-to-r from-liquid-lavender via-liquid-pink to-liquid-rose rounded-full shadow-sm"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-        </motion.div>
-      ))}
-    </div>
-  );
-};
-
-export default CurrentlyReading;

app/components/Footer.tsx

@@ -3,75 +3,56 @@
 import React from "react";
 import Link from "next/link";
 import { useLocale, useTranslations } from "next-intl";
-import { ArrowUp } from "lucide-react";
+import { useConsent } from "./ConsentProvider";
+
+const pill =
+  "inline-flex items-center rounded-full px-4 py-2 text-sm font-medium shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-paper)/0.5)] transition-[background-color,color,transform] duration-150 ease-out hover:bg-paper hover:text-ink active:scale-[0.97]";
 
 const Footer = () => {
   const locale = useLocale();
   const t = useTranslations("footer");
+  const { resetConsent } = useConsent();
   const year = new Date().getFullYear();
 
-  const scrollToTop = () => {
-    window.scrollTo({ top: 0, behavior: "smooth" });
-  };
-
   return (
-    <footer className="bg-[#fdfcf8] dark:bg-stone-950 pt-16 sm:pt-24 md:pt-32 pb-8 sm:pb-12 px-4 sm:px-6 overflow-hidden transition-colors duration-500">
-      <div className="max-w-7xl mx-auto">
+    <footer className="bg-ink px-4 pb-10 pt-12 text-paper sm:px-6 lg:px-10">
+      <div className="flex flex-wrap items-end justify-between gap-6">
+        <Link
+          href={`/${locale}`}
+          className="font-display text-[clamp(4rem,14vw,9rem)] font-extrabold leading-[0.8] tracking-[-0.05em]"
+          aria-label="dk0"
+        >
+          dk<span className="text-signal">0</span>
+        </Link>
+        <a href="#top" className={pill}>
+          {t("backToTop")} <span aria-hidden="true" className="ml-1.5">↑</span>
+        </a>
+      </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-12 gap-8 sm:gap-10 md:gap-12 items-end">
-          {/* Copyright & Info */}
-          <div className="md:col-span-4 space-y-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 font-black text-xs">
-              dk
-            </div>
-            <div className="space-y-2">
-              <p className="text-xl font-black text-stone-900 dark:text-stone-50 uppercase tracking-tighter">Software Engineer</p>
-              <p className="text-stone-500 text-sm font-medium">© {year} All rights reserved.</p>
-            </div>
-          </div>
+      <nav className="mt-8 flex flex-wrap gap-2 border-t-2 border-paper/20 pt-6" aria-label={t("legalNotice")}>
+        <Link href={`/${locale}/legal-notice`} className={pill}>
+          {t("legalNotice")}
+        </Link>
+        <Link href={`/${locale}/privacy-policy`} className={pill}>
+          {t("privacyPolicy")}
+        </Link>
+        <button type="button" onClick={resetConsent} className={pill} title={t("privacySettingsTitle")}>
+          {t("privacySettings")}
+        </button>
+        <a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className={pill}>
+          GitHub
+        </a>
+        <a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className={pill}>
+          LinkedIn
+        </a>
+      </nav>
 
-          {/* Navigation Links */}
-          <div className="md:col-span-4 grid grid-cols-2 gap-8">
-            <div className="space-y-4">
-              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">Legal</p>
-              <div className="flex flex-col gap-2">
-                <Link href={`/${locale}/legal-notice`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("legalNotice")}</Link>
-                <Link href={`/${locale}/privacy-policy`} className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">{t("privacyPolicy")}</Link>
-              </div>
-            </div>
-            <div className="space-y-4">
-              <p className="text-[10px] font-black uppercase tracking-[0.2em] text-stone-600 dark:text-stone-400">Social</p>
-              <div className="flex flex-col gap-2">
-                <a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">GitHub</a>
-                <a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className="text-sm font-bold text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors">LinkedIn</a>
-              </div>
-            </div>
-          </div>
-
-          {/* Back to Top */}
-          <div className="md:col-span-4 flex justify-start md:justify-end">
-            <button 
-              onClick={scrollToTop}
-              className="group flex flex-col items-center gap-4 text-stone-600 dark:text-stone-400 hover:text-stone-900 dark:hover:text-white transition-colors"
-            >
-              <span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-600 dark:text-stone-400 vertical-text transform rotate-180" style={{ writingMode: 'vertical-rl' }}>Back to top</span>
-              <div className="w-12 h-12 rounded-full border border-stone-200 dark:border-stone-800 flex items-center justify-center group-hover:bg-stone-900 dark:group-hover:bg-stone-50 group-hover:text-white dark:group-hover:text-stone-900 transition-all shadow-sm">
-                <ArrowUp size={20} />
-              </div>
-            </button>
-          </div>
-        </div>
-
-        {/* Bottom Bar */}
-        <div className="mt-10 sm:mt-16 md:mt-20 pt-6 sm:pt-8 border-t border-stone-100 dark:border-stone-900 flex flex-col md:flex-row justify-between items-center gap-4">
-          <p className="text-[10px] font-bold text-stone-600 dark:text-stone-400 uppercase tracking-widest">
-            Built with Next.js, Directus & Passion.
-          </p>
-          <div className="flex items-center gap-2">
-            <div className="w-2 h-2 rounded-full bg-green-500 animate-pulse" />
-            <span className="text-[10px] font-bold text-stone-600 dark:text-stone-400 uppercase tracking-widest">Systems Online</span>
-          </div>
-        </div>
+      <div className="mt-8 grid gap-1.5 font-mono text-xs text-paper/70">
+        <p>
+          © {year} Dennis Konkol · {t("role")} · {t("madeIn")}
+        </p>
+        <p>{t("builtWith")}</p>
+        <p>{t("aiDisclaimer")}</p>
       </div>
     </footer>
   );

app/components/Header.tsx

@@ -17,7 +17,7 @@ const Header = () => {
 
   const navItems = [
     { name: t("home"), href: `/${locale}` },
-    { name: t("about"), href: isHome ? "#about" : `/${locale}#about` },
+    { name: t("about"), href: isHome ? "#projects" : `/${locale}#projects` },
     { name: t("projects"), href: isHome ? "#projects" : `/${locale}/projects` },
     { name: t("contact"), href: isHome ? "#contact" : `/${locale}#contact` },
   ];
@@ -29,9 +29,9 @@ const Header = () => {
           {/* Logo Pill */}
           <Link
             href={`/${locale}`}
-            className="w-10 h-10 flex items-center justify-center rounded-full bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 transition-transform hover:scale-105 active:scale-95 shadow-lg"
+            className="w-10 h-10 flex items-center justify-center rounded-full bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 transition-transform duration-150 ease-out active:scale-[0.97] shadow-lg"
           >
-            <span className="font-black text-xs tracking-tighter">dk</span>
+            <span className="font-black text-xs tracking-tighter">dk0</span>
           </Link>
 
           {/* Desktop Menu */}
@@ -40,7 +40,7 @@ const Header = () => {
               <Link
                 key={item.name}
                 href={item.href}
-                className="px-5 py-2 text-[10px] font-black uppercase tracking-[0.2em] text-stone-500 hover:text-stone-900 dark:hover:text-stone-100 rounded-full transition-all"
+                className="px-5 py-2 text-[10px] font-black uppercase tracking-[0.2em] text-stone-500 hover:text-stone-900 dark:hover:text-stone-100 rounded-full transition-colors"
               >
                 {item.name}
               </Link>
@@ -62,7 +62,7 @@ const Header = () => {
             {/* Mobile Menu Toggle */}
             <button
               onClick={() => setIsOpen(!isOpen)}
-              className="w-8 h-8 flex md:hidden items-center justify-center text-stone-600 dark:text-stone-400 hover:bg-white dark:hover:bg-stone-800 rounded-full transition-colors shadow-sm"
+              className="w-8 h-8 flex md:hidden items-center justify-center text-stone-600 dark:text-stone-400 hover:bg-white dark:hover:bg-stone-800 rounded-full transition-[background-color,transform] duration-150 ease-out active:scale-[0.97] shadow-sm"
             >
               {isOpen ? <X size={14} /> : <Menu size={14} />}
             </button>
@@ -72,10 +72,10 @@ const Header = () => {
 
       {/* Mobile Menu Overlay */}
       <div
-        className={`fixed top-24 left-6 right-6 z-40 bg-white/90 dark:bg-stone-900/95 backdrop-blur-3xl border border-white/40 dark:border-white/10 rounded-[2.5rem] shadow-2xl p-6 md:hidden overflow-hidden transition-all duration-200 ${
+        className={`fixed top-24 left-6 right-6 z-40 bg-white/90 dark:bg-stone-900/95 backdrop-blur-3xl border border-white/40 dark:border-white/10 rounded-[2.5rem] shadow-2xl p-6 md:hidden overflow-hidden origin-top transition-[opacity,transform] duration-200 ease-out ${
           isOpen
-            ? "opacity-100 translate-y-0 pointer-events-auto"
-            : "opacity-0 -translate-y-2 pointer-events-none"
+            ? "opacity-100 translate-y-0 scale-100 pointer-events-auto"
+            : "opacity-0 -translate-y-2 scale-[0.97] pointer-events-none"
         }`}
       >
         <div className="flex flex-col gap-3">

app/components/HeaderClient.tsx

@@ -1,10 +1,18 @@
 "use client";
 
-import { useState, useEffect } from "react";
-import { SiGithub, SiLinkedin } from "react-icons/si";
+import { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import type { NavTranslations } from "@/types/translations";
+import { ThemeToggle } from "./ThemeToggle";
+import OpenWindowLink from "./fenster/OpenWindowLink";
+
+const SiGithubIcon = ({ size = 20 }: { size?: number }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+);
+const SiLinkedinIcon = ({ size = 20 }: { size?: number }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
+);
 
 // Inline SVG icons to avoid loading the full lucide-react chunk (~116KB)
 const MenuIcon = ({ size = 24 }: { size?: number }) => (
@@ -27,6 +35,14 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
   const [scrolled, setScrolled] = useState(false);
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const prevLocale = useRef(locale);
+
+  useEffect(() => {
+    if (prevLocale.current !== locale) {
+      window.scrollTo({ top: 0, behavior: "instant" });
+      prevLocale.current = locale;
+    }
+  }, [locale]);
 
   const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
 
@@ -35,21 +51,31 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
       setScrolled(window.scrollY > 50);
     };
 
-    window.addEventListener("scroll", handleScroll);
+    window.addEventListener("scroll", handleScroll, { passive: true });
     return () => window.removeEventListener("scroll", handleScroll);
   }, []);
 
+  useEffect(() => {
+    if (!isOpen) return;
+    const onKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [isOpen]);
+
   const navItems = [
     { name: translations.home, href: `/${locale}` },
-    { name: translations.about, href: isHome ? "#about" : `/${locale}#about` },
+    // „Über mich“ öffnet auf der Startseite das Fenster; ohne JS bzw. auf Unterseiten führt es zum Tisch mit dem Foto
+    { name: translations.about, href: isHome ? "#projects" : `/${locale}#projects`, window: isHome ? ({ kind: "about" } as const) : undefined },
     { name: translations.projects, href: isHome ? "#projects" : `/${locale}/projects` },
     { name: translations.contact, href: isHome ? "#contact" : `/${locale}#contact` },
   ];
 
   const socialLinks = [
-    { icon: SiGithub, href: "https://github.com/Denshooter", label: "GitHub" },
+    { icon: SiGithubIcon, href: "https://github.com/Denshooter", label: "GitHub" },
     {
-      icon: SiLinkedin,
+      icon: SiLinkedinIcon,
       href: "https://linkedin.com/in/dkonkol",
       label: "LinkedIn",
     },
@@ -62,168 +88,140 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
   const enHref = `/en${pathWithoutLocale}${query}`;
   const deHref = `/de${pathWithoutLocale}${query}`;
 
+  const de = locale === "de";
+
+  // Über dem roten Plakat bleibt der Kopf transparent, sonst wird er zum Papierstreifen
+  const solid = scrolled || !isHome;
+  const pill =
+    "rounded-full border-[1.5px] border-ink px-4 py-2 text-sm font-medium transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]";
+  const langPill = (active: boolean) =>
+    `rounded-full px-3 py-2 font-mono text-xs transition-[background-color,color,transform] duration-150 ease-out active:scale-[0.97] ${
+      active ? "bg-ink text-paper" : "hover:bg-ink/10"
+    }`;
+
   return (
     <>
-      <header className="fixed top-6 left-0 right-0 z-50 flex justify-center px-4 pointer-events-none">
-        <div
-          className={`pointer-events-auto transition-all duration-500 ease-out ${
-            scrolled ? "w-full max-w-5xl" : "w-full max-w-7xl"
-          }`}
-        >
-          <div
-            className={`backdrop-blur-xl transition-all duration-500 flex justify-between items-center ${
-              scrolled
-                ? "bg-white/95 border border-stone-200/50 shadow-[0_8px_30px_rgba(0,0,0,0.12)] rounded-full px-6 py-3"
-                : "bg-white/85 border border-stone-200/30 shadow-[0_4px_24px_rgba(0,0,0,0.08)] px-4 py-4 rounded-full"
-            }`}
+      <header
+        className={`fixed inset-x-0 top-0 z-50 border-b-2 transition-[background-color,border-color] duration-200 ease-out ${
+          solid ? "border-ink bg-paper/90 backdrop-blur-md" : "border-transparent bg-transparent"
+        }`}
+      >
+        <div className="flex items-center justify-between gap-4 px-4 py-3 text-ink sm:px-6 lg:px-10">
+          <Link
+            href={`/${locale}`}
+            className="font-display text-2xl font-extrabold tracking-[-0.03em] transition-transform duration-150 ease-out active:scale-[0.97]"
+            aria-label={de ? "dk0, zur Startseite" : "dk0, home"}
           >
-            <div className="flex items-center space-x-2 hover:scale-105 transition-transform">
-              <Link
-                href={`/${locale}`}
-                className="text-2xl font-black font-sans text-stone-900 tracking-tighter liquid-hover flex items-center"
-              >
-                dk<span className="text-red-500">0</span>
+            dk<span className={`transition-colors duration-200 ${solid ? "text-signal" : "text-paper"}`}>0</span>
+          </Link>
+
+          <nav className="hidden items-center gap-2 md:flex" aria-label={de ? "Hauptnavigation" : "Main navigation"}>
+            {navItems.slice(1).map((item) =>
+              item.window ? (
+                <OpenWindowLink key={item.name} href={item.href} request={item.window} className={pill}>
+                  {item.name}
+                </OpenWindowLink>
+              ) : (
+                <Link key={item.name} href={item.href} className={pill}>
+                  {item.name}
+                </Link>
+              ),
+            )}
+            <div className="ml-2 flex items-center gap-1 border-l-2 border-ink/20 pl-3">
+              <Link href={deHref} className={langPill(locale === "de")} aria-current={locale === "de" ? "true" : undefined}>
+                DE
               </Link>
+              <Link href={enHref} className={langPill(locale === "en")} aria-current={locale === "en" ? "true" : undefined}>
+                EN
+              </Link>
+              <ThemeToggle />
             </div>
+          </nav>
 
-            <nav className="hidden md:flex items-center space-x-8">
-              {navItems.map((item) => (
-                <div key={item.name} className="hover:-translate-y-0.5 active:scale-95 transition-all">
-                  <Link
-                    href={item.href}
-                    className="text-stone-700 hover:text-stone-900 font-medium transition-colors relative liquid-hover"
-                  >
-                    {item.name}
-                  </Link>
-                </div>
-              ))}
-
-              {/* Language Switcher */}
-              <div className="flex items-center space-x-2 ml-4 pl-4 border-l border-stone-300">
-                <Link
-                  href={enHref}
-                  className={`px-2 py-1 text-sm font-medium rounded transition-all ${
-                    locale === "en"
-                      ? "bg-stone-900 text-white"
-                      : "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
-                  }`}
-                >
-                  EN
-                </Link>
-                <Link
-                  href={deHref}
-                  className={`px-2 py-1 text-sm font-medium rounded transition-all ${
-                    locale === "de"
-                      ? "bg-stone-900 text-white"
-                      : "text-stone-600 hover:text-stone-900 hover:bg-stone-100"
-                  }`}
-                >
-                  DE
-                </Link>
-              </div>
-            </nav>
-
-            <button
-              onClick={() => setIsOpen(!isOpen)}
-              className="md:hidden p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700 transition-all hover:scale-105 active:scale-95"
-              aria-label="Toggle menu"
-            >
-              {isOpen ? <XIcon size={24} /> : <MenuIcon size={24} />}
-            </button>
-          </div>
+          <button
+            onClick={() => setIsOpen(!isOpen)}
+            className={`${pill} inline-flex items-center gap-2 md:hidden`}
+            aria-label={de ? "Menü öffnen" : "Open menu"}
+            aria-expanded={isOpen}
+          >
+            <MenuIcon size={18} /> {de ? "Menü" : "Menu"}
+          </button>
         </div>
       </header>
 
-      {/* Mobile menu overlay */}
+      {/* Abdunklung hinter dem Menü — bleibt gemountet, damit sie ausblenden kann */}
       <div
-        className={`fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden transition-opacity duration-200 ${
-          isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        aria-hidden="true"
+        className={`fixed inset-0 z-40 bg-ink/40 transition-opacity md:hidden ${
+          isOpen ? "opacity-100 duration-300 ease-out" : "pointer-events-none opacity-0 duration-200 ease-out"
         }`}
         onClick={() => setIsOpen(false)}
       />
 
-      {/* Mobile menu panel */}
+      {/* Menü als Drawer: Drawer-Kurve rein, schneller raus */}
       <div
-        className={`fixed right-0 top-0 h-full w-80 bg-white shadow-2xl z-50 md:hidden overflow-y-auto transition-transform duration-300 ease-out ${
-          isOpen ? "translate-x-0" : "translate-x-full"
+        inert={!isOpen}
+        role="dialog"
+        aria-label={de ? "Menü" : "Menu"}
+        className={`fixed right-0 top-0 z-50 flex h-full w-80 max-w-[85vw] flex-col overflow-y-auto overscroll-contain border-l-2 border-ink bg-paper text-ink transition-[transform,visibility] md:hidden ${
+          isOpen ? "visible translate-x-0 duration-500 ease-drawer" : "invisible translate-x-full duration-200 ease-out"
         }`}
       >
-        <div className="p-6">
-          <div className="flex justify-between items-center mb-8">
-            <Link
-              href={`/${locale}`}
-              className="text-2xl font-black text-stone-900"
-              onClick={() => setIsOpen(false)}
-            >
-              dk<span className="text-red-500">0</span>
-            </Link>
-            <button
-              onClick={() => setIsOpen(false)}
-              className="p-2 rounded-lg bg-stone-100 hover:bg-stone-200 text-stone-700"
-              aria-label="Close menu"
-            >
-              <XIcon size={24} />
-            </button>
-          </div>
+        <div className="flex items-center justify-between px-5 py-3">
+          <Link
+            href={`/${locale}`}
+            className="font-display text-2xl font-extrabold tracking-[-0.03em]"
+            onClick={() => setIsOpen(false)}
+          >
+            dk<span className="text-signal">0</span>
+          </Link>
+          <button onClick={() => setIsOpen(false)} className={`${pill} inline-flex items-center`} aria-label={de ? "Menü schließen" : "Close menu"}>
+            <XIcon size={18} />
+          </button>
+        </div>
 
-          <nav className="space-y-2">
-            {navItems.map((item) => (
-              <Link
-                key={item.name}
-                href={item.href}
-                onClick={() => setIsOpen(false)}
-                className="block px-4 py-3 text-stone-700 hover:bg-stone-50 rounded-lg font-medium transition-colors"
-              >
+        <nav className="flex flex-col border-t-2 border-ink" aria-label={de ? "Hauptnavigation" : "Main navigation"}>
+          {navItems.map((item) => {
+            const cls =
+              "border-b-2 border-ink px-5 py-4 font-display text-3xl font-extrabold tracking-[-0.035em] transition-colors duration-150 active:bg-paper-2";
+            return item.window ? (
+              <OpenWindowLink key={item.name} href={item.href} request={item.window} onClick={() => setIsOpen(false)} className={cls}>
+                {item.name}
+              </OpenWindowLink>
+            ) : (
+              <Link key={item.name} href={item.href} onClick={() => setIsOpen(false)} className={cls}>
                 {item.name}
               </Link>
-            ))}
-          </nav>
+            );
+          })}
+        </nav>
 
-          {/* Language Switcher Mobile */}
-          <div className="flex gap-2 mt-6 pt-6 border-t border-stone-200">
-            <Link
-              href={enHref}
-              onClick={() => setIsOpen(false)}
-              className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-all ${
-                locale === "en"
-                  ? "bg-stone-900 text-white"
-                  : "bg-stone-100 text-stone-600 hover:bg-stone-200"
-              }`}
-            >
-              EN
-            </Link>
-            <Link
-              href={deHref}
-              onClick={() => setIsOpen(false)}
-              className={`flex-1 px-4 py-2 text-center font-medium rounded-lg transition-all ${
-                locale === "de"
-                  ? "bg-stone-900 text-white"
-                  : "bg-stone-100 text-stone-600 hover:bg-stone-200"
-              }`}
-            >
-              DE
-            </Link>
-          </div>
+        <div className="flex items-center gap-1 px-5 py-5">
+          <Link href={deHref} onClick={() => setIsOpen(false)} className={langPill(locale === "de")}>
+            DE
+          </Link>
+          <Link href={enHref} onClick={() => setIsOpen(false)} className={langPill(locale === "en")}>
+            EN
+          </Link>
+          <ThemeToggle />
+        </div>
 
-          <div className="mt-8 pt-6 border-t border-stone-200">
-            <div className="flex justify-center space-x-6">
-              {socialLinks.map((link) => {
-                const Icon = link.icon;
-                return (
-                  <a
-                    key={link.label}
-                    href={link.href}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="p-3 rounded-lg bg-stone-100 hover:bg-stone-900 hover:text-white text-stone-700 transition-all"
-                    aria-label={link.label}
-                  >
-                    <Icon size={20} />
-                  </a>
-                );
-              })}
-            </div>
-          </div>
+        <div className="mt-auto flex gap-2 px-5 pb-8">
+          {socialLinks.map((link) => {
+            const Icon = link.icon;
+            return (
+              <a
+                key={link.label}
+                href={link.href}
+                target="_blank"
+                rel="noopener noreferrer"
+                className={`${pill} inline-flex items-center`}
+                aria-label={link.label}
+              >
+                <Icon size={18} />
+              </a>
+            );
+          })}
         </div>
       </div>
     </>

app/components/Hero.tsx

@@ -1,73 +1,69 @@
 import { getTranslations } from "next-intl/server";
-import Image from "next/image";
+import KineticWordmark from "./KineticWordmark";
+import OpenWindowLink from "./fenster/OpenWindowLink";
 
 interface HeroProps {
   locale: string;
 }
 
-export default async function Hero({ locale: _locale }: HeroProps) {
-  const t = await getTranslations("home.hero");
+// Abgabe der Masterarbeit, Grundlage für den Countdown im Intro
+const THESIS_DEADLINE = new Date("2027-02-15T12:00:00+01:00");
+
+const MARQUEE = ["Self-Hosting", "Next.js", "SwiftUI", "Flutter", "Docker", "Microsoft 365", "Godot", "Home Assistant"];
+
+export default async function Hero({ locale }: HeroProps) {
+  const t = await getTranslations({ locale, namespace: "home.hero" });
+  const daysLeft = Math.max(0, Math.ceil((THESIS_DEADLINE.getTime() - Date.now()) / 86_400_000));
 
   return (
-    <section className="relative min-h-screen flex flex-col items-center justify-center bg-stone-50 dark:bg-stone-950 px-6 transition-colors duration-500">
-      {/* Liquid Ambient Background — overflow-hidden here so the blobs are clipped, not the image/badge */}
-      <div className="absolute inset-0 pointer-events-none overflow-hidden">
-        <div className="absolute top-[5%] left-[5%] w-[60vw] h-[60vw] bg-liquid-mint rounded-full blur-[140px] opacity-20" />
-        <div className="absolute bottom-[5%] right-[5%] w-[50vw] h-[50vw] bg-liquid-purple rounded-full blur-[120px] opacity-15" />
-      </div>
+    <>
+      <section id="top" className="relative overflow-hidden bg-signal px-4 pt-24 text-ink sm:px-6 md:pt-28 lg:px-10">
+        <p className="font-mono text-[13px] leading-snug">{t("kicker")}</p>
 
-      <div className="relative z-10 max-w-7xl mx-auto w-full pt-12 sm:pt-16 md:pt-20 pb-10 sm:pb-16">
-        <div className="flex flex-col xl:flex-row items-center gap-8 sm:gap-10 xl:gap-24">
+        <div className="mt-4 sm:mt-8">
+          <KineticWordmark />
+        </div>
 
-          {/* Left: Text Content */}
-          <div className="flex-1 text-center xl:text-left space-y-6 sm:space-y-8 md:space-y-10">
-            <div className="inline-flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-2 sm:py-2.5 rounded-full bg-white dark:bg-stone-900 border border-stone-200 dark:border-stone-800 shadow-sm animate-[fadeIn_0.5s_ease-out]">
-              <span className="w-2 h-2 sm:w-2.5 sm:h-2.5 bg-emerald-500 rounded-full animate-pulse" />
-              <span className="font-mono text-[10px] sm:text-[11px] font-black uppercase tracking-[0.2em] sm:tracking-[0.3em] text-stone-500">{t("badge")}</span>
-            </div>
-
-            <h1 className="text-[2.75rem] sm:text-6xl md:text-8xl lg:text-[9.5rem] font-black tracking-tighter leading-[0.85] text-stone-900 dark:text-stone-50 uppercase">
-              <span className="block">
-                {t("line1")}
-              </span>
-              <span className="block text-transparent bg-clip-text bg-gradient-to-r from-emerald-400 via-liquid-sky to-liquid-purple pb-2 sm:pb-4">
-                {t("line2")}
-              </span>
-            </h1>
-
-            <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-stone-600 dark:text-stone-400 max-w-xl mx-auto xl:mx-0 font-light leading-relaxed tracking-tight">
-              {t("description")}
+        <div className="mt-3 grid gap-6 border-t-2 border-ink pb-8 pt-6 md:grid-cols-[1.3fr_1fr] md:items-end md:pb-10">
+          <h1 className="text-balance font-display text-[clamp(2rem,4.4vw,4rem)] font-extrabold leading-[0.96] tracking-[-0.035em] [font-variation-settings:'wdth'_85]">
+            <span className="sr-only">Dennis Konkol: </span>
+            {t("claim")}
+          </h1>
+          <div>
+            <p className="max-w-[42ch] text-[17px] leading-relaxed">
+              {t("intro")} {daysLeft > 0 && t("countdown", { days: daysLeft })}
             </p>
-
-            <div className="flex flex-col sm:flex-row items-center gap-4 sm:gap-8 justify-center xl:justify-start pt-2 sm:pt-4 animate-[fadeIn_0.6s_ease-out_0.3s_both]">
-              <a href="#projects" className="group relative px-8 sm:px-12 py-4 sm:py-5 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-2xl sm:rounded-3xl font-black text-xs uppercase tracking-[0.2em] hover:scale-105 active:scale-95 transition-all shadow-2xl">
-                <div className="absolute inset-0 bg-white/10 -translate-x-full group-hover:translate-x-full transition-transform duration-1000" />
-                {t("ctaWork")}
+            <div className="mt-5 flex flex-wrap gap-2.5">
+              <a
+                href="#projects"
+                className="inline-flex items-center gap-2 rounded-full bg-ink px-5 py-3.5 text-[15px] font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
+              >
+                {t("ctaWork")} <span aria-hidden="true">↓</span>
               </a>
-              <a href="#contact" className="font-black text-xs uppercase tracking-[0.2em] text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-white transition-colors">
+              <OpenWindowLink
+                href="#contact"
+                request={{ kind: "contact" }}
+                className="inline-flex items-center rounded-full px-5 py-3.5 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-signal active:scale-[0.97]"
+              >
                 {t("ctaContact")}
-              </a>
-            </div>
-          </div>
-
-          {/* Right: The Photo */}
-          <div className="relative w-52 h-52 sm:w-64 sm:h-64 md:w-80 md:h-80 xl:w-[500px] xl:h-[500px] shrink-0 mt-4 sm:mt-8 xl:mt-0 animate-[fadeIn_1s_ease-out]">
-            <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[3rem] sm:rounded-[4rem] lg:rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
-            <div className="relative w-full h-full rounded-[2.5rem] sm:rounded-[3rem] lg:rounded-[4rem] overflow-hidden border-[12px] sm:border-[16px] lg:border-[24px] border-white dark:border-stone-900 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] sm:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]">
-              <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, (max-width: 1280px) 320px, 500px" />
-            </div>
-
-            <div className="absolute -bottom-4 -left-4 sm:-bottom-6 sm:-left-6 bg-white dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-xl sm:rounded-[2rem] shadow-2xl border border-stone-100 dark:border-stone-700">
-              <span className="font-mono text-xs sm:text-sm font-black tracking-tighter uppercase">dk<span className="text-red-500">0</span>.dev</span>
+              </OpenWindowLink>
             </div>
           </div>
+        </div>
+      </section>
 
+      <div className="overflow-hidden bg-ink text-paper" aria-hidden="true">
+        <div className="flex w-max animate-marquee gap-9 py-[18px] font-display text-[clamp(1.1rem,2.4vw,1.7rem)] font-bold leading-none">
+          {[...MARQUEE, ...MARQUEE].map((item, i) => (
+            <span key={i} className="flex items-center gap-9 whitespace-nowrap">
+              {item}
+              <svg viewBox="0 0 24 24" className="h-[0.7em] w-[0.7em] fill-signal">
+                <path d="M12 1.5l2.6 7.9 7.9 2.6-7.9 2.6-2.6 7.9-2.6-7.9-7.9-2.6 7.9-2.6z" />
+              </svg>
+            </span>
+          ))}
         </div>
       </div>
-
-      <div className="absolute bottom-10 left-1/2 -translate-x-1/2 hidden md:flex flex-col items-center gap-4 animate-bounce">
-        <div className="w-px h-16 bg-gradient-to-b from-stone-300 dark:from-stone-700 to-transparent" />
-      </div>
-    </section>
+    </>
   );
 }

app/components/KineticWordmark.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+
+const LETTERS = ["D", "K", "0"] as const;
+
+// Ruhezustand und Spannweite der variablen Achsen von Bricolage Grotesque
+const REST = { wght: 800, wdth: 100 };
+const NEAR = { wght: 220, wdth: 75 };
+const REACH_PX = 520;
+
+/**
+ * Das große „DK0“ im Plakat. Die Buchstaben werden dünner und schmaler, je näher
+ * der Zeiger kommt, geglättet über eine kritisch gedämpfte Feder.
+ * Ohne Maus oder bei reduzierter Bewegung bleibt es statisch. Das Markup ist
+ * vollständig server-gerendert, JS fügt nur die Reaktion hinzu.
+ */
+export default function KineticWordmark() {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const letterRefs = useRef<(HTMLSpanElement | null)[]>([]);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    const area = root?.closest("section");
+    if (!root || !area) return;
+
+    const fine = window.matchMedia?.("(hover: hover) and (pointer: fine)")?.matches ?? false;
+    const reduce = window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches ?? false;
+    if (!fine || reduce) return;
+
+    const state = LETTERS.map(() => ({ w: REST.wght, d: REST.wdth, vw: 0, vd: 0, tw: REST.wght, td: REST.wdth }));
+    let raf = 0;
+
+    const loop = () => {
+      let moving = false;
+      state.forEach((s, i) => {
+        s.vw = (s.vw + (s.tw - s.w) * 0.08) * 0.78;
+        s.w += s.vw;
+        s.vd = (s.vd + (s.td - s.d) * 0.08) * 0.78;
+        s.d += s.vd;
+        if (Math.abs(s.vw) + Math.abs(s.vd) > 0.05) moving = true;
+        const el = letterRefs.current[i];
+        if (el) el.style.fontVariationSettings = `"wght" ${s.w.toFixed(1)}, "wdth" ${s.d.toFixed(1)}`;
+      });
+      raf = moving ? requestAnimationFrame(loop) : 0;
+    };
+    const kick = () => {
+      if (!raf) raf = requestAnimationFrame(loop);
+    };
+
+    const onMove = (e: PointerEvent) => {
+      letterRefs.current.forEach((el, i) => {
+        if (!el) return;
+        const r = el.getBoundingClientRect();
+        const dist = Math.hypot(e.clientX - (r.left + r.width / 2), e.clientY - (r.top + r.height / 2));
+        const f = Math.min(1, dist / REACH_PX);
+        state[i].tw = NEAR.wght + f * (REST.wght - NEAR.wght);
+        state[i].td = NEAR.wdth + f * (REST.wdth - NEAR.wdth);
+      });
+      kick();
+    };
+    const onLeave = () => {
+      state.forEach((s) => {
+        s.tw = REST.wght;
+        s.td = REST.wdth;
+      });
+      kick();
+    };
+
+    area.addEventListener("pointermove", onMove);
+    area.addEventListener("pointerleave", onLeave);
+    return () => {
+      cancelAnimationFrame(raf);
+      area.removeEventListener("pointermove", onMove);
+      area.removeEventListener("pointerleave", onLeave);
+    };
+  }, []);
+
+  return (
+    <div
+      ref={rootRef}
+      aria-hidden="true"
+      className="flex select-none items-end justify-between font-display text-[clamp(8.5rem,33vw,31rem)] leading-[0.78] tracking-[-0.05em]"
+    >
+      {LETTERS.map((letter, i) => (
+        <span
+          key={letter}
+          ref={(el) => {
+            letterRefs.current[i] = el;
+          }}
+          className={`inline-block animate-wordmark-up ${letter === "0" ? "text-paper" : ""}`}
+          style={{ fontVariationSettings: `"wght" ${REST.wght}, "wdth" ${REST.wdth}`, animationDelay: `${i * 80}ms` }}
+        >
+          {letter}
+        </span>
+      ))}
+    </div>
+  );
+}

app/components/ProjectThumbnail.tsx

@@ -0,0 +1,236 @@
+"use client";
+
+import { useMemo, useId } from "react";
+import {
+  Terminal,
+  Smartphone,
+  Globe,
+  Code,
+  LayoutDashboard,
+  MessageSquare,
+  Cloud,
+  Wrench,
+  Cpu,
+  Shield,
+  Boxes,
+  type LucideIcon,
+} from "lucide-react";
+
+interface ProjectThumbnailProps {
+  title: string;
+  category?: string;
+  tags?: string[];
+  slug?: string;
+  size?: "card" | "hero";
+}
+
+const categoryThemes: Record<
+  string,
+  {
+    icon: LucideIcon;
+    gradient: string;
+    darkGradient: string;
+    iconColor: string;
+    darkIconColor: string;
+    pattern: "dots" | "grid" | "diagonal" | "circuit" | "waves" | "terminal";
+  }
+> = {
+  "Web Development": {
+    icon: Code,
+    gradient: "from-liquid-sky/20 via-liquid-blue/10 to-liquid-lavender/20",
+    darkGradient: "dark:from-liquid-sky/10 dark:via-liquid-blue/5 dark:to-liquid-lavender/10",
+    iconColor: "text-blue-500",
+    darkIconColor: "dark:text-blue-400",
+    pattern: "circuit",
+  },
+  "Mobile Development": {
+    icon: Smartphone,
+    gradient: "from-liquid-mint/20 via-liquid-teal/10 to-liquid-sky/20",
+    darkGradient: "dark:from-liquid-mint/10 dark:via-liquid-teal/5 dark:to-liquid-sky/10",
+    iconColor: "text-emerald-500",
+    darkIconColor: "dark:text-emerald-400",
+    pattern: "waves",
+  },
+  "Web Application": {
+    icon: Globe,
+    gradient: "from-liquid-lavender/20 via-liquid-purple/10 to-liquid-pink/20",
+    darkGradient: "dark:from-liquid-lavender/10 dark:via-liquid-purple/5 dark:to-liquid-pink/10",
+    iconColor: "text-violet-500",
+    darkIconColor: "dark:text-violet-400",
+    pattern: "dots",
+  },
+  "Backend Development": {
+    icon: Cpu,
+    gradient: "from-liquid-amber/20 via-liquid-yellow/10 to-liquid-peach/20",
+    darkGradient: "dark:from-liquid-amber/10 dark:via-liquid-yellow/5 dark:to-liquid-peach/10",
+    iconColor: "text-amber-500",
+    darkIconColor: "dark:text-amber-400",
+    pattern: "grid",
+  },
+  "Full-Stack Development": {
+    icon: Boxes,
+    gradient: "from-liquid-teal/20 via-liquid-mint/10 to-liquid-lavender/20",
+    darkGradient: "dark:from-liquid-teal/10 dark:via-liquid-mint/5 dark:to-liquid-lavender/10",
+    iconColor: "text-teal-500",
+    darkIconColor: "dark:text-teal-400",
+    pattern: "grid",
+  },
+  DevOps: {
+    icon: Shield,
+    gradient: "from-liquid-coral/20 via-liquid-rose/10 to-liquid-peach/20",
+    darkGradient: "dark:from-liquid-coral/10 dark:via-liquid-rose/5 dark:to-liquid-peach/10",
+    iconColor: "text-red-500",
+    darkIconColor: "dark:text-red-400",
+    pattern: "diagonal",
+  },
+  default: {
+    icon: Wrench,
+    gradient: "from-liquid-peach/20 via-liquid-rose/10 to-liquid-lavender/20",
+    darkGradient: "dark:from-liquid-peach/10 dark:via-liquid-rose/5 dark:to-liquid-lavender/10",
+    iconColor: "text-stone-400",
+    darkIconColor: "dark:text-stone-500",
+    pattern: "dots",
+  },
+};
+
+const slugIcons: Record<string, LucideIcon> = {
+  "kernel-panic-404-interactive-terminal": Terminal,
+  "portfolio-website": LayoutDashboard,
+  "real-time-chat-application": MessageSquare,
+  "weather-forecast-app": Cloud,
+  "clarity": Smartphone,
+  "e-commerce-platform-api": Boxes,
+  "task-management-dashboard": LayoutDashboard,
+};
+
+function PatternOverlay({ pattern, id }: { pattern: string; id: string }) {
+  const patterns: Record<string, React.ReactNode> = {
+    dots: (
+      <svg className="absolute inset-0 w-full h-full opacity-[0.07] dark:opacity-[0.05]" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id={`pat-dots-${id}`} x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
+            <circle cx="2" cy="2" r="1.5" fill="currentColor" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#pat-dots-${id})`} />
+      </svg>
+    ),
+    grid: (
+      <svg className="absolute inset-0 w-full h-full opacity-[0.06] dark:opacity-[0.04]" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id={`pat-grid-${id}`} x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse">
+            <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="1" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#pat-grid-${id})`} />
+      </svg>
+    ),
+    diagonal: (
+      <svg className="absolute inset-0 w-full h-full opacity-[0.06] dark:opacity-[0.04]" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id={`pat-diag-${id}`} x="0" y="0" width="24" height="24" patternUnits="userSpaceOnUse">
+            <line x1="0" y1="24" x2="24" y2="0" stroke="currentColor" strokeWidth="1" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#pat-diag-${id})`} />
+      </svg>
+    ),
+    circuit: (
+      <svg className="absolute inset-0 w-full h-full opacity-[0.07] dark:opacity-[0.05]" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id={`pat-circ-${id}`} x="0" y="0" width="60" height="60" patternUnits="userSpaceOnUse">
+            <path d="M0 30h20m20 0h20M30 0v20m0 20v20" stroke="currentColor" strokeWidth="0.8" fill="none" />
+            <circle cx="30" cy="30" r="3" fill="currentColor" />
+            <circle cx="10" cy="30" r="2" fill="currentColor" />
+            <circle cx="50" cy="30" r="2" fill="currentColor" />
+            <circle cx="30" cy="10" r="2" fill="currentColor" />
+            <circle cx="30" cy="50" r="2" fill="currentColor" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#pat-circ-${id})`} />
+      </svg>
+    ),
+    waves: (
+      <svg className="absolute inset-0 w-full h-full opacity-[0.06] dark:opacity-[0.04]" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id={`pat-wave-${id}`} x="0" y="0" width="100" height="20" patternUnits="userSpaceOnUse">
+            <path d="M0 10 Q25 0 50 10 T100 10" fill="none" stroke="currentColor" strokeWidth="1" />
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#pat-wave-${id})`} />
+      </svg>
+    ),
+    terminal: (
+      <svg className="absolute inset-0 w-full h-full opacity-[0.08] dark:opacity-[0.06]" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <pattern id={`pat-term-${id}`} x="0" y="0" width="200" height="30" patternUnits="userSpaceOnUse">
+            <text x="4" y="18" fontFamily="monospace" fontSize="10" fill="currentColor">$_</text>
+            <text x="50" y="18" fontFamily="monospace" fontSize="10" fill="currentColor" opacity="0.4">&#x2502;</text>
+            <text x="70" y="18" fontFamily="monospace" fontSize="10" fill="currentColor" opacity="0.6">404</text>
+            <text x="110" y="18" fontFamily="monospace" fontSize="10" fill="currentColor" opacity="0.4">&#x2502;</text>
+            <text x="130" y="18" fontFamily="monospace" fontSize="10" fill="currentColor" opacity="0.3">ERR</text>
+          </pattern>
+        </defs>
+        <rect width="100%" height="100%" fill={`url(#pat-term-${id})`} />
+      </svg>
+    ),
+  };
+
+  return patterns[pattern] || patterns.dots;
+}
+
+export default function ProjectThumbnail({
+  title,
+  category,
+  tags,
+  slug,
+  size = "card",
+}: ProjectThumbnailProps) {
+  const uniqueId = useId();
+  const theme = useMemo(() => {
+    if (slug && slugIcons[slug]) {
+      const matchedTheme = categoryThemes[category || ""] || categoryThemes.default;
+      return { ...matchedTheme, icon: slugIcons[slug] };
+    }
+    return categoryThemes[category || ""] || categoryThemes.default;
+  }, [category, slug]);
+
+  const Icon = theme.icon;
+  const isHero = size === "hero";
+  const displayTags = tags?.slice(0, 3) ?? [];
+
+  return (
+    <div
+      className={`absolute inset-0 flex items-center justify-center bg-gradient-to-br ${theme.gradient} ${theme.darkGradient}`}
+    >
+      <PatternOverlay pattern={theme.pattern} id={uniqueId} />
+
+      <div className="relative z-10 flex flex-col items-center gap-3 sm:gap-4">
+        <div
+          className={`flex items-center justify-center rounded-2xl bg-white/60 dark:bg-white/10 backdrop-blur-sm border border-white/40 dark:border-white/10 ${theme.iconColor} ${theme.darkIconColor} ${isHero ? "w-20 h-20 sm:w-28 sm:h-28" : "w-14 h-14 sm:w-20 sm:h-20"}`}
+        >
+          <Icon className={isHero ? "w-10 h-10 sm:w-14 sm:h-14" : "w-7 h-7 sm:w-10 sm:h-10"} strokeWidth={1.5} />
+        </div>
+
+        <span
+          className={`font-black tracking-tighter uppercase ${isHero ? "text-2xl sm:text-4xl md:text-5xl" : "text-sm sm:text-lg"} text-stone-400/80 dark:text-stone-500/80`}
+        >
+          {title}
+        </span>
+
+        {displayTags.length > 0 && (
+          <div className={`flex flex-wrap justify-center gap-1.5 sm:gap-2 ${isHero ? "max-w-md" : "max-w-[200px]"}`}>
+            {displayTags.map((tag) => (
+              <span
+                key={tag}
+                className={`px-2 py-0.5 rounded-full bg-white/50 dark:bg-white/5 backdrop-blur-sm border border-white/30 dark:border-white/10 text-stone-500 dark:text-stone-400 font-medium ${isHero ? "text-xs sm:text-sm" : "text-[9px] sm:text-[10px]"}`}
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/components/Projects.tsx

@@ -1,133 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { motion } from "framer-motion";
-import { ArrowUpRight } from "lucide-react";
-import Link from "next/link";
-import Image from "next/image";
-import { useLocale, useTranslations } from "next-intl";
-import { Skeleton } from "./ui/Skeleton";
-
-interface Project {
-  id: number;
-  slug: string;
-  title: string;
-  description: string;
-  content: string;
-  tags: string[];
-  featured: boolean;
-  category: string;
-  date: string;
-  github?: string;
-  live?: string;
-  imageUrl?: string;
-}
-
-const Projects = () => {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [loading, setLoading] = useState(true);
-  const locale = useLocale();
-  useTranslations("home.projects");
-
-  useEffect(() => {
-    const loadProjects = async () => {
-      try {
-        const response = await fetch("/api/projects?featured=true&published=true&limit=6");
-        if (response.ok) {
-          const data = await response.json();
-          setProjects(data.projects || []);
-        }
-      } catch (error) {
-        console.error("Featured projects fetch failed:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadProjects();
-  }, []);
-
-  return (
-    <section id="projects" className="py-16 sm:py-24 md:py-32 px-4 sm:px-6 bg-stone-50 dark:bg-stone-950">
-      <div className="max-w-7xl mx-auto">
-        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 sm:mb-12 md:mb-16 gap-4 sm:gap-6">
-          <div>
-            <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-stone-900 dark:text-stone-50 tracking-tighter mb-2 sm:mb-4 uppercase">
-              Selected Work<span className="text-emerald-600 dark:text-emerald-400">.</span>
-            </h2>
-            <p className="text-base sm:text-lg md:text-xl text-stone-500 max-w-xl font-light">
-              Projects that pushed my boundaries.
-            </p>
-          </div>
-          <Link href={`/${locale}/projects`} 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 text-xs uppercase tracking-widest">
-            View Archive <ArrowUpRight className="group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" size={14} />
-          </Link>
-        </div>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
-          {loading ? (
-            Array.from({ length: 2 }).map((_, i) => (
-              <div key={i} className="space-y-6">
-                <Skeleton className="aspect-[4/3] rounded-[2.5rem]" />
-                <div className="space-y-3">
-                  <Skeleton className="h-8 w-1/2" />
-                  <Skeleton className="h-4 w-3/4" />
-                </div>
-              </div>
-            ))
-          ) : projects.length === 0 ? (
-            <div className="col-span-2 py-12 text-center text-stone-400 dark:text-stone-600 text-sm">
-              No projects yet.
-            </div>
-          ) : (
-            projects.map((project) => (
-            <motion.div
-              key={project.id}
-              className="group relative"
-            >
-              <Link href={`/${locale}/projects/${project.slug}`} className="block">
-                {/* Image Card */}
-                <div className="relative aspect-[16/10] sm:aspect-[4/3] rounded-2xl sm:rounded-3xl overflow-hidden bg-stone-200 dark:bg-stone-900 mb-4 sm:mb-6">
-                  {project.imageUrl ? (
-                    <Image
-                      src={project.imageUrl}
-                      alt={project.title}
-                      fill
-                      className="object-cover transition-transform duration-700 group-hover:scale-105"
-                    />
-                  ) : (
-                    <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900">
-                      <span className="text-4xl font-bold text-stone-300 dark:text-stone-700">{project.title.charAt(0)}</span>
-                    </div>
-                  )}
-                  {/* Overlay on Hover */}
-                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500" />
-                </div>
-
-                {/* Text Content */}
-                <div className="flex justify-between items-start">
-                  <div>
-                    <h3 className="text-lg sm:text-xl md:text-2xl font-bold text-stone-900 dark:text-stone-100 mb-1 sm:mb-2 group-hover:underline decoration-2 underline-offset-4">
-                      {project.title}
-                    </h3>
-                    <p className="text-sm sm:text-base text-stone-500 dark:text-stone-400 line-clamp-2 max-w-md">
-                      {project.description}
-                    </p>
-                  </div>
-                  <div className="hidden sm:flex gap-2">
-                    {project.tags.slice(0, 2).map(tag => (
-                      <span key={tag} className="px-3 py-1 rounded-full border border-stone-200 dark:border-stone-800 text-xs font-medium text-stone-600 dark:text-stone-400">
-                        {tag}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              </Link>
-            </motion.div>
-          )))}
-        </div>
-      </div>
-    </section>
-  );
-};
-
-export default Projects;

app/components/ReadBooks.tsx

@@ -1,246 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { BookCheck, Star, ChevronDown, ChevronUp } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useLocale, useTranslations } from "next-intl";
-import Image from "next/image";
-import { Skeleton } from "./ui/Skeleton";
-
-interface BookReview {
-  id: string;
-  hardcover_id?: string;
-  book_title: string;
-  book_author: string;
-  book_image?: string;
-  rating?: number | null;
-  review?: string | null;
-  finished_at?: string;
-}
-
-const StarRating = ({ rating }: { rating: number }) => {
-  return (
-    <div className="flex gap-0.5">
-      {[1, 2, 3, 4, 5].map((star) => (
-        <Star
-          key={star}
-          size={14}
-          className={
-            star <= rating
-              ? "text-amber-500 fill-amber-500"
-              : "text-stone-300 dark:text-stone-600"
-          }
-        />
-      ))}
-    </div>
-  );
-};
-
-const stripHtml = (html: string) => {
-  if (typeof window === 'undefined') return html; // Fallback for SSR
-  const doc = new DOMParser().parseFromString(html, 'text/html');
-  return doc.body.textContent || "";
-};
-
-const ReadBooks = () => {
-  const locale = useLocale();
-  const t = useTranslations("home.about.readBooks");
-  const [reviews, setReviews] = useState<BookReview[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [expanded, setExpanded] = useState(false);
-
-  const INITIAL_SHOW = 3;
-
-  useEffect(() => {
-    const fetchReviews = async () => {
-      try {
-        const res = await fetch(
-          `/api/book-reviews?locale=${encodeURIComponent(locale)}`,
-          { cache: "default" }
-        );
-
-        if (!res.ok) {
-          throw new Error("Failed to fetch");
-        }
-
-        const data = await res.json();
-        if (data.bookReviews) {
-          setReviews(data.bookReviews);
-        } else {
-          setReviews([]);
-        }
-      } catch (error) {
-        if (process.env.NODE_ENV === "development") {
-          console.error("Error fetching book reviews:", error);
-        }
-        setReviews([]);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchReviews();
-  }, [locale]);
-
-  if (loading) {
-    return (
-      <div className="space-y-6">
-        {[1, 2].map((i) => (
-          <div key={i} className="flex flex-col sm:flex-row gap-4 items-start">
-            <Skeleton className="w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg shrink-0" />
-            <div className="flex-1 space-y-2 w-full">
-              <Skeleton className="h-5 w-1/2" />
-              <Skeleton className="h-4 w-1/3" />
-              <Skeleton className="h-3 w-1/4 pt-2" />
-              <Skeleton className="h-12 w-full pt-2" />
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
-  if (reviews.length === 0) {
-    return (
-      <div className="flex items-center gap-3 py-4 text-sm text-stone-400 dark:text-stone-500">
-        <BookCheck size={16} className="shrink-0" />
-        <span>{t("empty")}</span>
-      </div>
-    );
-  }
-
-  const visibleReviews = expanded ? reviews : reviews.slice(0, INITIAL_SHOW);
-  const hasMore = reviews.length > INITIAL_SHOW;
-
-  return (
-    <div className="space-y-4">
-      {/* Header */}
-      <div className="flex items-center gap-2 mb-4">
-        <BookCheck size={18} className="text-stone-600 dark:text-stone-300 flex-shrink-0" />
-        <h3 className="text-lg font-bold text-stone-900 dark:text-stone-100">
-          {t("title")} ({reviews.length})
-        </h3>
-      </div>
-
-      {/* Book Reviews */}
-      {visibleReviews.map((review, index) => (
-        <motion.div
-          key={review.id}
-          initial={{ opacity: 0, y: 20 }}
-          whileInView={{ opacity: 1, y: 0 }}
-          viewport={{ once: true, margin: "-50px" }}
-          transition={{
-            duration: 0.6,
-            delay: index * 0.1,
-            ease: [0.25, 0.1, 0.25, 1],
-          }}
-          whileHover={{
-            scale: 1.02,
-            transition: { duration: 0.4, ease: "easeOut" },
-          }}
-          className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-teal/15 dark:from-stone-800 dark:via-stone-800 dark:to-stone-700 border-2 border-liquid-mint/30 dark:border-stone-700 rounded-xl p-5 backdrop-blur-sm hover:border-liquid-mint/50 dark:hover:border-stone-600 hover:from-liquid-mint/20 hover:via-liquid-sky/15 hover:to-liquid-teal/20 transition-all duration-500 ease-out"
-        >
-          {/* Background Blob */}
-          <motion.div
-            className="absolute -bottom-8 -left-8 w-28 h-28 bg-gradient-to-br from-liquid-mint/20 to-liquid-sky/20 dark:from-stone-700 dark:to-stone-600 rounded-full blur-2xl"
-            animate={{
-              scale: [1, 1.15, 1],
-              opacity: [0.3, 0.45, 0.3],
-            }}
-            transition={{
-              duration: 8,
-              repeat: Infinity,
-              ease: "easeInOut",
-              delay: index * 0.5,
-            }}
-          />
-
-          <div className="relative z-10 flex flex-col sm:flex-row gap-4 items-start">
-            {/* Book Cover */}
-            {review.book_image && (
-              <motion.div
-                initial={{ opacity: 0, scale: 0.9 }}
-                animate={{ opacity: 1, scale: 1 }}
-                transition={{ duration: 0.5, delay: 0.2 + index * 0.1 }}
-                className="flex-shrink-0"
-              >
-                <div className="relative w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg overflow-hidden shadow-lg border-2 border-white/50 dark:border-stone-600">
-                  <Image
-                    src={review.book_image}
-                    alt={review.book_title}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 640px) 80px, 96px"
-                  />
-                  <div className="absolute inset-0 bg-gradient-to-tr from-white/20 via-transparent to-white/10 pointer-events-none" />
-                </div>
-              </motion.div>
-            )}
-
-            {/* Book Info */}
-            <div className="flex-1 min-w-0">
-              <h4 className="text-base font-bold text-stone-900 dark:text-stone-100 mb-0.5 line-clamp-2">
-                {review.book_title}
-              </h4>
-              <p className="text-sm text-stone-600 dark:text-stone-400 mb-2 line-clamp-1">
-                {review.book_author}
-              </p>
-
-              {/* Rating (Optional) */}
-              {review.rating && review.rating > 0 && (
-                <div className="flex items-center gap-2 mb-2">
-                  <StarRating rating={review.rating} />
-                  <span className="text-xs text-stone-500 dark:text-stone-400 font-medium">
-                    {review.rating}/5
-                  </span>
-                </div>
-              )}
-
-              {/* Review Text (Optional) */}
-              {review.review && (
-                <p className="text-sm text-stone-700 dark:text-stone-300 leading-relaxed line-clamp-3 italic">
-                  &ldquo;{stripHtml(review.review)}&rdquo;
-                </p>
-              )}
-
-              {/* Finished Date */}
-              {review.finished_at && (
-                <p className="text-xs text-stone-400 dark:text-stone-500 mt-2">
-                  {t("finishedAt")}{" "}
-                  {new Date(review.finished_at).toLocaleDateString(
-                    locale === "de" ? "de-DE" : "en-US",
-                    { year: "numeric", month: "short" }
-                  )}
-                </p>
-              )}
-            </div>
-          </div>
-        </motion.div>
-      ))}
-
-      {/* Show More / Show Less */}
-      {hasMore && (
-        <motion.button
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          transition={{ delay: 0.3 }}
-          onClick={() => setExpanded(!expanded)}
-          className="w-full flex items-center justify-center gap-1.5 py-2.5 text-sm font-medium text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 rounded-lg border-2 border-dashed border-stone-200 dark:border-stone-700 hover:border-stone-300 dark:hover:border-stone-600 transition-colors duration-300"
-        >
-          {expanded ? (
-            <>
-              {t("showLess")} <ChevronUp size={16} />
-            </>
-          ) : (
-            <>
-              {t("showMore", { count: reviews.length - INITIAL_SHOW })}{" "}
-              <ChevronDown size={16} />
-            </>
-          )}
-        </motion.button>
-      )}
-    </div>
-  );
-};
-
-export default ReadBooks;

app/components/RootProviders.tsx

@@ -1,41 +0,0 @@
-"use client";
-
-import React, { useEffect, useState } from "react";
-
-const ToastProvider = React.lazy(() =>
-  import("@/components/Toast").then((mod) => ({
-    default: mod.ToastProvider,
-  }))
-);
-
-const BackgroundBlobs = React.lazy(() =>
-  import("@/components/BackgroundBlobs")
-);
-
-const ChatWidget = React.lazy(() => import("./ChatWidget"));
-
-export default function RootProviders({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) {
-    return <div className="relative z-10">{children}</div>;
-  }
-
-  return (
-    <React.Suspense fallback={<div className="relative z-10">{children}</div>}>
-      <ToastProvider>
-        <BackgroundBlobs />
-        <div className="relative z-10">{children}</div>
-        <ChatWidget />
-      </ToastProvider>
-    </React.Suspense>
-  );
-}

app/components/ScrollFadeIn.tsx

@@ -18,9 +18,11 @@ export default function ScrollFadeIn({ children, className = "", delay = 0 }: Sc
   const ref = useRef<HTMLDivElement>(null);
   const [isVisible, setIsVisible] = useState(false);
   const [hasMounted, setHasMounted] = useState(false);
+  const [reduceMotion, setReduceMotion] = useState(false);
 
   useEffect(() => {
     setHasMounted(true);
+    setReduceMotion(window.matchMedia("(prefers-reduced-motion: reduce)").matches);
     const el = ref.current;
     if (!el) return;
 
@@ -37,7 +39,8 @@ export default function ScrollFadeIn({ children, className = "", delay = 0 }: Sc
           observer.unobserve(el);
         }
       },
-      { threshold: 0.1 }
+      // Start a little before the section is fully in view so it never feels late
+      { threshold: 0.1, rootMargin: "0px 0px -60px 0px" }
     );
 
     observer.observe(el);
@@ -50,8 +53,8 @@ export default function ScrollFadeIn({ children, className = "", delay = 0 }: Sc
       className={className}
       style={hasMounted ? {
         opacity: isVisible ? 1 : 0,
-        transform: isVisible ? "translateY(0)" : "translateY(30px)",
-        transition: `opacity 0.6s ease ${delay}s, transform 0.6s ease ${delay}s`,
+        transform: isVisible || reduceMotion ? "translateY(0)" : "translateY(16px)",
+        transition: `opacity 0.6s var(--ease-out) ${delay}s, transform 0.6s var(--ease-out) ${delay}s`,
       } : undefined}
     >
       {children}

app/components/ShaderGradientBackground.tsx

@@ -1,60 +0,0 @@
-// Pure CSS gradient background — replaces the Three.js/WebGL shader gradient.
-// Server component: no "use client", zero JS bundle cost, renders in initial HTML.
-// Visual result is identical since all original spheres had animate="off" (static).
-export default function ShaderGradientBackground() {
-  return (
-    <div
-      aria-hidden="true"
-      style={{
-        position: "fixed",
-        inset: 0,
-        zIndex: -1,
-        overflow: "hidden",
-        pointerEvents: "none",
-      }}
-    >
-      {/* Upper-left: crimson → pink (was Sphere 1: posX=-2.5, posY=1.5) */}
-      <div
-        style={{
-          position: "absolute",
-          top: "-10%",
-          left: "-15%",
-          width: "55%",
-          height: "65%",
-          background:
-            "radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
-          filter: "blur(100px)",
-          opacity: 0.6,
-        }}
-      />
-      {/* Right-center: pink → crimson (was Sphere 2: posX=2.0, posY=-0.5) */}
-      <div
-        style={{
-          position: "absolute",
-          top: "25%",
-          right: "-10%",
-          width: "50%",
-          height: "60%",
-          background:
-            "radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
-          filter: "blur(100px)",
-          opacity: 0.55,
-        }}
-      />
-      {/* Lower-left: orange → pink (was Sphere 3: posX=-0.5, posY=-2.0) */}
-      <div
-        style={{
-          position: "absolute",
-          bottom: "-15%",
-          left: "5%",
-          width: "50%",
-          height: "60%",
-          background:
-            "radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
-          filter: "blur(100px)",
-          opacity: 0.5,
-        }}
-      />
-    </div>
-  );
-}

app/components/ThemeProvider.tsx

@@ -1,36 +1,63 @@
 "use client";
 
-import React, { createContext, useContext, useEffect, useState } from "react";
+import React, { createContext, useCallback, useContext, useEffect, useState } from "react";
 
-type Theme = "light" | "dark";
+type Theme = "system" | "light" | "dark";
 
-const ThemeCtx = createContext<{ theme: Theme; setTheme: (t: Theme) => void }>({
-  theme: "light",
+const ThemeCtx = createContext<{ theme: Theme; resolvedTheme: "light" | "dark"; setTheme: (t: Theme) => void }>({
+  theme: "system",
+  resolvedTheme: "light",
   setTheme: () => {},
 });
 
+function getSystemTheme(): "light" | "dark" {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+
+function applyTheme(theme: Theme) {
+  const resolved = theme === "system" ? getSystemTheme() : theme;
+  document.documentElement.classList.toggle("dark", resolved === "dark");
+  return resolved;
+}
+
 export function ThemeProvider({ children }: { children: React.ReactNode }) {
-  const [theme, setThemeState] = useState<Theme>("light");
+  const [theme, setThemeState] = useState<Theme>("system");
+  const [resolvedTheme, setResolvedTheme] = useState<"light" | "dark">("light");
 
   useEffect(() => {
     try {
       const stored = localStorage.getItem("theme") as Theme | null;
-      if (stored === "dark" || stored === "light") {
+      if (stored === "dark" || stored === "light" || stored === "system") {
         setThemeState(stored);
-        document.documentElement.classList.toggle("dark", stored === "dark");
       }
     } catch {}
   }, []);
 
-  const setTheme = (t: Theme) => {
+  useEffect(() => {
+    const resolved = applyTheme(theme);
+    setResolvedTheme(resolved);
+  }, [theme]);
+
+  useEffect(() => {
+    if (theme !== "system") return;
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      const resolved = applyTheme(theme);
+      setResolvedTheme(resolved);
+    };
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, [theme]);
+
+  const setTheme = useCallback((t: Theme) => {
     setThemeState(t);
     try {
       localStorage.setItem("theme", t);
     } catch {}
-    document.documentElement.classList.toggle("dark", t === "dark");
-  };
+  }, []);
 
-  return <ThemeCtx.Provider value={{ theme, setTheme }}>{children}</ThemeCtx.Provider>;
+  return <ThemeCtx.Provider value={{ theme, resolvedTheme, setTheme }}>{children}</ThemeCtx.Provider>;
 }
 
 export function useTheme() {

app/components/ThemeToggle.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { Moon, Sun } from "lucide-react";
+import { Monitor, Moon, Sun } from "lucide-react";
 import { useTheme } from "./ThemeProvider";
 
 export function ThemeToggle() {
@@ -13,19 +13,27 @@ export function ThemeToggle() {
   }, []);
 
   if (!mounted) {
-    return <div className="w-9 h-9" />;
+    return <div className="ml-1 h-9 w-9" />;
   }
 
+  const cycle = () => {
+    const next = theme === "system" ? "light" : theme === "light" ? "dark" : "system";
+    setTheme(next);
+  };
+
   return (
     <button
-      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
-      className="p-2 rounded-full bg-stone-100 dark:bg-stone-800 text-stone-800 dark:text-stone-100 hover:bg-stone-200 dark:hover:bg-stone-700 transition-colors border border-stone-200 dark:border-stone-700 shadow-sm hover:scale-105 active:scale-95 transition-transform"
-      aria-label="Toggle theme"
+      onClick={cycle}
+      className="ml-1 rounded-full border-[1.5px] border-ink p-2 text-ink transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]"
+      aria-label={`Current theme: ${theme}. Click to switch.`}
+      title={theme === "system" ? "System" : theme === "dark" ? "Dark" : "Light"}
     >
-      {theme === "dark" ? (
-        <Sun size={18} className="text-amber-400" />
+      {theme === "system" ? (
+        <Monitor size={16} />
+      ) : theme === "dark" ? (
+        <Sun size={16} />
       ) : (
-        <Moon size={18} className="text-stone-600" />
+        <Moon size={16} />
       )}
     </button>
   );

app/components/fenster/ChatBody.tsx

@@ -0,0 +1,154 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { useConsent } from "../ConsentProvider";
+import type { WindowLabels } from "./types";
+
+interface Message {
+  id: string;
+  text: string;
+  from: "user" | "bot";
+}
+
+const STORE_ID = "chatSessionId";
+const STORE_MESSAGES = "chatMessages";
+
+/**
+ * KI-Chat im Fenster. Schickt erst etwas an n8n, wenn der Chatbot im
+ * Datenschutz-Banner (oder hier) erlaubt wurde.
+ */
+export default function ChatBody({ labels }: { labels: WindowLabels }) {
+  const { consent, ready, setConsent } = useConsent();
+  const allowed = !!consent?.chat;
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [conversationId, setConversationId] = useState("default");
+  const listRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!allowed) return;
+    try {
+      let id = localStorage.getItem(STORE_ID);
+      if (!id) {
+        id = crypto.randomUUID();
+        localStorage.setItem(STORE_ID, id);
+      }
+      setConversationId(id);
+      const stored = localStorage.getItem(STORE_MESSAGES);
+      const parsed = stored ? (JSON.parse(stored) as { id: string; text: string; sender?: string; from?: string }[]) : [];
+      setMessages(
+        parsed.length
+          ? parsed.map((m) => ({
+              id: m.id,
+              // Begrüßung immer in der aktuellen Sprache, auch wenn noch eine alte gespeichert ist
+              text: m.id === "welcome" ? labels.chat.welcome : m.text,
+              from: (m.from ?? m.sender) === "user" ? "user" : "bot",
+            }))
+          : [{ id: "welcome", text: labels.chat.welcome, from: "bot" }],
+      );
+    } catch {
+      setMessages([{ id: "welcome", text: labels.chat.welcome, from: "bot" }]);
+    }
+    inputRef.current?.focus({ preventScroll: true });
+  }, [allowed, labels.chat.welcome]);
+
+  useEffect(() => {
+    if (!allowed || messages.length === 0) return;
+    try {
+      localStorage.setItem(STORE_MESSAGES, JSON.stringify(messages));
+    } catch {}
+    listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
+  }, [messages, allowed]);
+
+  const send = async () => {
+    const text = input.trim();
+    if (!text || busy) return;
+    const mine: Message = { id: String(Date.now()), text, from: "user" };
+    const history = messages.slice(-5).map((m) => ({ role: m.from === "user" ? "user" : "assistant", content: m.text }));
+    setMessages((prev) => [...prev, mine]);
+    setInput("");
+    setBusy(true);
+    try {
+      const res = await fetch("/api/n8n/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ message: text, conversationId, history }),
+      });
+      const data = await res.json();
+      setMessages((prev) => [...prev, { id: `${Date.now()}-bot`, text: data.reply || labels.chat.error, from: "bot" }]);
+    } catch {
+      setMessages((prev) => [...prev, { id: `${Date.now()}-bot`, text: labels.chat.error, from: "bot" }]);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  if (!ready) return <div className="h-24 animate-pulse rounded-xl bg-paper-2" aria-hidden="true" />;
+
+  if (!allowed) {
+    return (
+      <>
+        <p className="text-[15px] leading-relaxed">{labels.chat.consent}</p>
+        <button
+          type="button"
+          onClick={() => setConsent({ ...(consent ?? { chat: false }), chat: true })}
+          className="w-fit rounded-full bg-ink px-4 py-2.5 text-sm font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
+        >
+          {labels.chat.allow}
+        </button>
+      </>
+    );
+  }
+
+  return (
+    <div className="flex min-h-[320px] flex-col gap-3">
+      <div ref={listRef} className="flex max-h-[46vh] flex-1 flex-col gap-2.5 overflow-y-auto overscroll-contain pr-1" aria-live="polite">
+        {messages.map((m) => (
+          <div
+            key={m.id}
+            className={`max-w-[88%] rounded-2xl border-2 border-ink px-3.5 py-2 text-[14.5px] leading-snug ${
+              m.from === "user" ? "self-end rounded-br-md bg-ink text-paper" : "self-start rounded-bl-md bg-paper"
+            }`}
+          >
+            {m.text}
+          </div>
+        ))}
+        {busy && (
+          <div className="self-start rounded-2xl rounded-bl-md border-2 border-ink px-3.5 py-2 font-mono text-xs" aria-label={labels.chat.thinking}>
+            <span className="inline-block animate-pulse">…</span>
+          </div>
+        )}
+      </div>
+      <form
+        className="flex gap-2"
+        onSubmit={(e) => {
+          e.preventDefault();
+          send();
+        }}
+      >
+        <label htmlFor="chat-input" className="sr-only">
+          {labels.chat.placeholder}
+        </label>
+        <input
+          ref={inputRef}
+          id="chat-input"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder={labels.chat.placeholder}
+          autoComplete="off"
+          className="min-w-0 flex-1 rounded-full border-2 border-ink bg-paper px-4 py-2.5 text-base text-ink placeholder:text-ink/45 focus:outline-none focus-visible:ring-2 focus-visible:ring-signal"
+        />
+        <button
+          type="submit"
+          disabled={!input.trim() || busy}
+          className="rounded-full bg-ink px-4 text-sm font-semibold text-paper transition-[opacity,transform] duration-150 ease-out active:scale-[0.97] disabled:opacity-40"
+        >
+          {labels.chat.send}
+        </button>
+      </form>
+      <p className="font-mono text-[11.5px] leading-snug opacity-70">{labels.chat.note}</p>
+    </div>
+  );
+}

app/components/fenster/OpenWindowLink.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useOpenWindow } from "./WindowProvider";
+import type { WindowRequest } from "./types";
+
+interface OpenWindowLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href: string;
+  request: WindowRequest;
+}
+
+/**
+ * Ein normaler Link (funktioniert ohne JavaScript), der mit JavaScript stattdessen
+ * ein Fenster bzw. Sheet öffnet.
+ */
+export default function OpenWindowLink({ request, onClick, ...props }: OpenWindowLinkProps) {
+  const openWindow = useOpenWindow();
+  return (
+    <a
+      {...props}
+      aria-haspopup={openWindow ? "dialog" : undefined}
+      onClick={(e) => {
+        onClick?.(e);
+        if (!openWindow || e.defaultPrevented || e.metaKey || e.ctrlKey || e.shiftKey) return;
+        e.preventDefault();
+        openWindow(request, e.currentTarget);
+      }}
+    />
+  );
+}

app/components/fenster/WindowContent.tsx

@@ -0,0 +1,253 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { loadCurrentBook, type CurrentBook } from "../tisch/currentBook";
+import ChatBody from "./ChatBody";
+import type { WindowLabels, WindowRequest } from "./types";
+
+const EMAIL = "contact@dk0.dev";
+
+const btn =
+  "inline-flex items-center gap-2 rounded-full bg-ink px-4 py-2.5 text-sm font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]";
+const ghost =
+  "inline-flex items-center gap-2 rounded-full px-4 py-2.5 text-sm font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]";
+
+/** Titelzeile eines Fensters, auch für die Ablage-Leiste. */
+export function windowTitle(req: WindowRequest, labels: WindowLabels): string {
+  switch (req.kind) {
+    case "project":
+      return req.project.year ? `${req.project.title} · ${req.project.year}` : req.project.title;
+    case "now":
+      return labels.now.title;
+    case "server":
+      return labels.server.title;
+    case "read":
+      return labels.read.title;
+    case "about":
+      return labels.about.title;
+    case "contact":
+      return labels.contact.title;
+    case "chat":
+      return labels.chat.title;
+  }
+}
+
+/** Farbe des Punkts in der Ablage-Leiste */
+export function windowAccent(req: WindowRequest): string {
+  if (req.kind === "project") return req.project.color;
+  return { now: "rgb(var(--plakat-red))", server: "rgb(var(--plakat-ok))", read: "#7a5240", about: "#2f5bea", contact: "rgb(var(--plakat-red))", chat: "#1d1b3d" }[req.kind];
+}
+
+interface WindowContentProps {
+  req: WindowRequest;
+  labels: WindowLabels;
+  /** Schließt das Fenster, z. B. wenn ein Link auf der Seite weiterführt */
+  onClose: () => void;
+}
+
+export default function WindowContent({ req, labels, onClose }: WindowContentProps) {
+  switch (req.kind) {
+    case "project": {
+      const p = req.project;
+      return (
+        <>
+          <div
+            className="-mx-5 -mt-5 flex min-h-[150px] flex-col justify-between border-b-2 border-ink p-5"
+            style={{ background: p.color, color: p.textColor }}
+          >
+            <span className="font-mono text-[12.5px]">{p.tags.slice(0, 4).join(" · ")}</span>
+            <span className="font-display text-[clamp(2.4rem,6vw,3.4rem)] font-extrabold leading-[0.86] tracking-[-0.045em] [font-variation-settings:'wdth'_78]">
+              {p.title}
+            </span>
+          </div>
+          <p className="text-[15px] leading-relaxed">{p.description}</p>
+          <dl className="border-t-2 border-ink">
+            {p.year && <Row label={labels.year}>{p.year}</Row>}
+            {p.tags.length > 0 && <Row label={labels.stack}>{p.tags.join(", ")}</Row>}
+          </dl>
+          <div className="flex flex-wrap gap-2">
+            <Link href={p.href} className={btn}>
+              {labels.projectPage} <span aria-hidden="true">→</span>
+            </Link>
+            {p.liveUrl && (
+              <a href={p.liveUrl} target="_blank" rel="noopener noreferrer" className={ghost}>
+                {labels.live} <span aria-hidden="true">↗</span>
+              </a>
+            )}
+            {p.githubUrl && (
+              <a href={p.githubUrl} target="_blank" rel="noopener noreferrer" className={ghost}>
+                {labels.source} <span aria-hidden="true">↗</span>
+              </a>
+            )}
+          </div>
+        </>
+      );
+    }
+
+    case "now":
+      return <NowBody labels={labels} />;
+
+    case "server":
+      return (
+        <>
+          <p className="font-display text-[1.8rem] font-extrabold leading-none tracking-[-0.03em]">{labels.server.headline}</p>
+          <div>
+            {labels.server.rows.map((r) => (
+              <div key={r.name} className="grid grid-cols-[10px_1fr] items-center gap-3 border-b border-ink/20 py-2.5 text-[15px]">
+                <span className="h-2.5 w-2.5 rounded-full bg-ok shadow-[0_0_0_3px_rgb(var(--plakat-ok)/0.2)]" aria-hidden="true" />
+                <span>
+                  {r.name}
+                  <span className="block font-mono text-xs opacity-75">{r.detail}</span>
+                </span>
+              </div>
+            ))}
+          </div>
+          <p className="font-mono text-[12.5px] leading-snug">{labels.server.note}</p>
+        </>
+      );
+
+    case "read":
+      return <ReadBody labels={labels} />;
+
+    case "about":
+      return (
+        <>
+          {labels.about.paragraphs.map((text) => (
+            <p key={text} className="text-[15px] leading-relaxed">
+              {text}
+            </p>
+          ))}
+          <dl className="border-t-2 border-ink">
+            {labels.about.facts.map((f) => (
+              <Row key={f.label} label={f.label}>
+                {f.value}
+              </Row>
+            ))}
+          </dl>
+        </>
+      );
+
+    case "contact":
+      return <ContactBody labels={labels} onClose={onClose} />;
+
+    case "chat":
+      return <ChatBody labels={labels} />;
+  }
+}
+
+function Row({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="grid grid-cols-[110px_minmax(0,1fr)] gap-3 border-b border-ink/20 py-2.5">
+      <dt className="font-mono text-[12.5px] leading-6">{label}</dt>
+      <dd className="m-0 text-[15px]">{children}</dd>
+    </div>
+  );
+}
+
+// Abgabe der Masterarbeit; auf dem Client gerechnet, damit das Fenster nie einen veralteten Stand zeigt
+const THESIS_DEADLINE = new Date("2027-02-15T12:00:00+01:00");
+
+function NowBody({ labels }: { labels: WindowLabels }) {
+  const days = Math.max(0, Math.ceil((THESIS_DEADLINE.getTime() - Date.now()) / 86_400_000));
+  return (
+    <>
+      <div>
+        <div className="font-display text-[5rem] font-extrabold leading-[0.82] tracking-[-0.05em] text-signal [font-variant-numeric:tabular-nums]">
+          {days}
+        </div>
+        <p className="mt-1.5 font-semibold">{labels.now.days}</p>
+      </div>
+      <dl className="border-t-2 border-ink">
+        {labels.now.rows.map((r) => (
+          <Row key={r.label} label={r.label}>
+            {r.text}
+          </Row>
+        ))}
+      </dl>
+    </>
+  );
+}
+
+function ReadBody({ labels }: { labels: WindowLabels }) {
+  const [book, setBook] = useState<CurrentBook | null | undefined>(undefined);
+  useEffect(() => {
+    let alive = true;
+    loadCurrentBook().then((b) => alive && setBook(b));
+    return () => {
+      alive = false;
+    };
+  }, []);
+  const progress = book && Number.isFinite(book.progress) ? Math.max(0, Math.min(100, book.progress)) : 0;
+
+  return (
+    <>
+      {book === undefined ? (
+        <div className="grid grid-cols-[72px_1fr] gap-4" aria-hidden="true">
+          <div className="h-[104px] animate-pulse rounded bg-paper-2" />
+          <div className="space-y-2 pt-1">
+            <div className="h-6 w-4/5 animate-pulse rounded bg-paper-2" />
+            <div className="h-4 w-1/2 animate-pulse rounded bg-paper-2" />
+          </div>
+        </div>
+      ) : book ? (
+        <div className="grid grid-cols-[72px_1fr] items-center gap-4">
+          <div className="relative h-[104px] overflow-hidden rounded-[3px_6px_6px_3px] border-2 border-ink bg-bookcover">
+            {book.image && <Image src={book.image} alt="" fill sizes="72px" className="object-cover" />}
+          </div>
+          <div>
+            <div className="font-display text-xl font-bold leading-tight">{book.title}</div>
+            <div className="font-mono text-xs">{book.authors.join(", ")}</div>
+            <div className="mt-2.5 font-mono text-xs">
+              {progress} % {labels.read.progress}
+            </div>
+            <div className="mt-1.5 h-1 overflow-hidden rounded bg-paper-2">
+              <div className="h-full origin-left bg-ink" style={{ transform: `scaleX(${progress / 100})` }} />
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p>{labels.read.empty}</p>
+      )}
+      <Link href={labels.read.libraryHref} className={`${ghost} w-fit`}>
+        {labels.read.library} <span aria-hidden="true">→</span>
+      </Link>
+    </>
+  );
+}
+
+function ContactBody({ labels, onClose }: { labels: WindowLabels; onClose: () => void }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(EMAIL);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1600);
+    } catch {
+      window.location.href = `mailto:${EMAIL}`;
+    }
+  };
+  return (
+    <>
+      <div className="font-display text-[clamp(1.8rem,5vw,2.4rem)] font-extrabold leading-[0.95] tracking-[-0.04em] [overflow-wrap:anywhere]">
+        contact<span className="text-signal">@</span>dk0.dev
+      </div>
+      <p className="text-[15px] leading-relaxed">{labels.contact.body}</p>
+      <div className="flex flex-wrap gap-2">
+        <button type="button" onClick={copy} className={btn} aria-live="polite">
+          {copied ? labels.contact.copied : labels.contact.copy}
+        </button>
+        <a href="https://github.com/Denshooter" target="_blank" rel="noopener noreferrer" className={ghost}>
+          GitHub
+        </a>
+        <a href="https://linkedin.com/in/dkonkol" target="_blank" rel="noopener noreferrer" className={ghost}>
+          LinkedIn
+        </a>
+        <a href="#contact" className={ghost} onClick={onClose}>
+          {labels.contact.form}
+        </a>
+      </div>
+    </>
+  );
+}

app/components/fenster/WindowProvider.tsx

@@ -0,0 +1,276 @@
+"use client";
+
+import { createContext, useCallback, useContext, useEffect, useId, useRef, useState, type RefObject } from "react";
+import { AnimatePresence, motion, useDragControls } from "framer-motion";
+import { Drawer } from "vaul";
+import WindowContent, { windowAccent, windowTitle } from "./WindowContent";
+import { windowId, type WindowLabels, type WindowRequest } from "./types";
+
+type OpenWindow = (req: WindowRequest, trigger?: HTMLElement | null) => void;
+
+const WindowContext = createContext<OpenWindow | null>(null);
+
+/** Öffnet ein Fenster (Desktop) oder Sheet (Handy). Ohne Provider passiert nichts. */
+export function useOpenWindow(): OpenWindow | null {
+  return useContext(WindowContext);
+}
+
+interface WinState {
+  id: string;
+  req: WindowRequest;
+  x: number;
+  y: number;
+  z: number;
+  minimized: boolean;
+  /** Punkt, von dem aus das Fenster aufgeht (relativ zum Fenster) */
+  origin: { x: number; y: number };
+  trigger: HTMLElement | null;
+}
+
+const WIN_WIDTH = 440;
+
+export default function WindowProvider({ labels, children }: { labels: WindowLabels; children: React.ReactNode }) {
+  const [wins, setWins] = useState<WinState[]>([]);
+  const [sheet, setSheet] = useState<{ req: WindowRequest; trigger: HTMLElement | null } | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const layerRef = useRef<HTMLDivElement>(null);
+  const zTop = useRef(10);
+  const opened = useRef(0);
+
+  const open = useCallback<OpenWindow>((req, trigger = null) => {
+    const desktop = window.matchMedia?.("(min-width: 768px)")?.matches ?? true;
+    if (!desktop) {
+      setSheet({ req, trigger });
+      setSheetOpen(true);
+      return;
+    }
+    const id = windowId(req);
+    setWins((prev) => {
+      const existing = prev.find((w) => w.id === id);
+      if (existing) {
+        return prev.map((w) => (w.id === id ? { ...w, minimized: false, z: ++zTop.current } : w));
+      }
+      const W = window.innerWidth;
+      const H = window.innerHeight;
+      const width = Math.min(WIN_WIDTH, W - 32);
+      const step = opened.current++ % 5;
+      const x = Math.max(16, Math.min(W - width - 16, W / 2 - width / 2 + step * 34 - 60));
+      const y = Math.max(76, Math.min(H - 420, H * 0.16 + step * 30));
+      const r = trigger?.getBoundingClientRect();
+      const origin = r ? { x: r.left + r.width / 2 - x, y: r.top + r.height / 2 - y } : { x: width / 2, y: 0 };
+      return [...prev, { id, req, x, y, z: ++zTop.current, minimized: false, origin, trigger }];
+    });
+  }, []);
+
+  const close = useCallback((id: string) => {
+    setWins((prev) => {
+      const w = prev.find((x) => x.id === id);
+      // Fokus zurück dorthin, wo das Fenster herkam
+      if (w?.trigger?.isConnected) requestAnimationFrame(() => w.trigger?.focus({ preventScroll: true }));
+      return prev.filter((x) => x.id !== id);
+    });
+  }, []);
+
+  const minimize = useCallback((id: string) => {
+    setWins((prev) => prev.map((w) => (w.id === id ? { ...w, minimized: true } : w)));
+  }, []);
+
+  const focusWin = useCallback((id: string) => {
+    setWins((prev) => {
+      const top = prev.reduce((a, b) => (b.z > a.z ? b : a), prev[0]);
+      // Schon vorn und sichtbar: nichts zu tun (ein abgelegtes Fenster muss trotzdem zurück)
+      if (top?.id === id && !top.minimized) return prev;
+      return prev.map((w) => (w.id === id ? { ...w, z: ++zTop.current, minimized: false } : w));
+    });
+  }, []);
+
+  // Escape schließt das oberste offene Fenster
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== "Escape") return;
+      const visible = wins.filter((w) => !w.minimized);
+      if (!visible.length) return;
+      const top = visible.reduce((a, b) => (b.z > a.z ? b : a));
+      close(top.id);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [wins, close]);
+
+  return (
+    <WindowContext.Provider value={open}>
+      {children}
+
+      {/* Desktop: Fenster schweben über der Seite, die Seite bleibt bedienbar */}
+      <div ref={layerRef} className="pointer-events-none fixed inset-0 z-[60]" aria-live="off">
+        <AnimatePresence>
+          {wins
+            .filter((w) => !w.minimized)
+            .map((w) => (
+              <Window
+                key={w.id}
+                win={w}
+                labels={labels}
+                layerRef={layerRef}
+                onClose={() => close(w.id)}
+                onMinimize={() => minimize(w.id)}
+                onFocus={() => focusWin(w.id)}
+              />
+            ))}
+        </AnimatePresence>
+      </div>
+
+      <AnimatePresence>
+        {wins.length > 0 && (
+          <motion.nav
+            aria-label={labels.openWindows}
+            className="fixed bottom-[18px] left-1/2 z-[61] hidden max-w-[calc(100vw-32px)] gap-1.5 overflow-x-auto rounded-full bg-ink p-1.5 md:flex"
+            style={{ x: "-50%" }}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 20 }}
+            transition={{ duration: 0.25, ease: [0.23, 1, 0.32, 1] }}
+          >
+            {wins.map((w) => (
+              <button
+                key={w.id}
+                type="button"
+                onClick={() => focusWin(w.id)}
+                className={`inline-flex items-center gap-2 whitespace-nowrap rounded-full px-3.5 py-2 text-[13px] font-medium transition-[background-color,transform] duration-150 ease-out hover:bg-paper/15 active:scale-[0.97] ${
+                  w.minimized ? "text-paper/60" : "text-paper"
+                }`}
+              >
+                <span className="h-2 w-2 rounded-full border border-paper/40" style={{ background: windowAccent(w.req) }} aria-hidden="true" />
+                {windowTitle(w.req, labels).split(" · ")[0]}
+              </button>
+            ))}
+          </motion.nav>
+        )}
+      </AnimatePresence>
+
+      {/* Handy: ein Sheet von unten, nach unten ziehen schließt */}
+      <Drawer.Root
+        open={sheetOpen}
+        onOpenChange={(o) => {
+          setSheetOpen(o);
+          if (!o && sheet?.trigger?.isConnected) requestAnimationFrame(() => sheet.trigger?.focus({ preventScroll: true }));
+        }}
+      >
+        <Drawer.Portal>
+          <Drawer.Overlay className="fixed inset-0 z-[70] bg-ink/40" />
+          <Drawer.Content
+            className="fixed inset-x-0 bottom-0 z-[71] flex max-h-[88svh] flex-col rounded-t-[22px] border-2 border-b-0 border-ink bg-paper text-ink outline-none"
+            aria-describedby={undefined}
+          >
+            <Drawer.Handle className="!mt-2.5 !h-[5px] !w-11 !bg-ink/30" />
+            {sheet && (
+              <>
+                <div className="flex items-center gap-3 border-b-2 border-ink px-5 pb-3 pt-2">
+                  <Drawer.Title className="flex-1 truncate font-mono text-[13px] font-normal">{windowTitle(sheet.req, labels)}</Drawer.Title>
+                  <Drawer.Close
+                    className="grid h-8 w-8 place-items-center rounded-full border-2 border-ink text-[15px] font-semibold transition-transform duration-150 ease-out active:scale-95"
+                    aria-label={labels.close}
+                  >
+                    ×
+                  </Drawer.Close>
+                </div>
+                <div className="grid gap-4 overflow-y-auto overscroll-contain p-5 pb-[calc(20px+env(safe-area-inset-bottom,0px))]">
+                  <WindowContent req={sheet.req} labels={labels} onClose={() => setSheetOpen(false)} />
+                </div>
+              </>
+            )}
+          </Drawer.Content>
+        </Drawer.Portal>
+      </Drawer.Root>
+    </WindowContext.Provider>
+  );
+}
+
+interface WindowProps {
+  win: WinState;
+  labels: WindowLabels;
+  layerRef: RefObject<HTMLDivElement | null>;
+  onClose: () => void;
+  onMinimize: () => void;
+  onFocus: () => void;
+}
+
+function Window({ win, labels, layerRef, onClose, onMinimize, onFocus }: WindowProps) {
+  const controls = useDragControls();
+  const [lifted, setLifted] = useState(false);
+  const closeRef = useRef<HTMLButtonElement>(null);
+  const titleId = useId();
+
+  useEffect(() => {
+    closeRef.current?.focus({ preventScroll: true });
+  }, []);
+
+  return (
+    <motion.div
+      role="dialog"
+      aria-labelledby={titleId}
+      drag
+      dragListener={false}
+      dragControls={controls}
+      dragConstraints={layerRef}
+      dragElastic={0.15}
+      dragTransition={{ power: 0.3, timeConstant: 300, bounceStiffness: 260, bounceDamping: 24 }}
+      onDragStart={() => setLifted(true)}
+      onDragEnd={() => setLifted(false)}
+      onPointerDown={onFocus}
+      initial={{ opacity: 0, scale: 0.86 }}
+      animate={{ opacity: 1, scale: 1 }}
+      exit={{ opacity: 0, scale: 0.96, transition: { duration: 0.15, ease: [0.23, 1, 0.32, 1] } }}
+      transition={{ duration: 0.28, ease: [0.23, 1, 0.32, 1] }}
+      className={`pointer-events-auto fixed flex max-h-[calc(100vh-120px)] w-[min(440px,calc(100vw-32px))] flex-col rounded-[18px] border-2 border-ink bg-paper text-ink transition-shadow duration-200 ease-out ${
+        lifted ? "shadow-[16px_18px_0_rgb(var(--plakat-ink))]" : "shadow-[8px_8px_0_rgb(var(--plakat-ink))]"
+      }`}
+      style={{ left: win.x, top: win.y, zIndex: win.z, transformOrigin: `${win.origin.x}px ${win.origin.y}px` }}
+    >
+      <div
+        className="flex cursor-grab touch-none select-none items-center gap-2.5 border-b-2 border-ink py-2.5 pl-4 pr-2.5 active:cursor-grabbing"
+        onPointerDown={(e) => {
+          if ((e.target as HTMLElement).closest("button")) return;
+          controls.start(e);
+        }}
+      >
+        <span id={titleId} className="flex-1 truncate font-mono text-[13px]">
+          {windowTitle(win.req, labels)}
+        </span>
+        <HeadButton label={labels.minimize} onClick={onMinimize}>
+          –
+        </HeadButton>
+        <HeadButton label={labels.close} onClick={onClose} buttonRef={closeRef}>
+          ×
+        </HeadButton>
+      </div>
+      <div className="grid gap-4 overflow-y-auto overscroll-contain p-5">
+        <WindowContent req={win.req} labels={labels} onClose={onClose} />
+      </div>
+    </motion.div>
+  );
+}
+
+function HeadButton({
+  label,
+  onClick,
+  buttonRef,
+  children,
+}: {
+  label: string;
+  onClick: () => void;
+  buttonRef?: RefObject<HTMLButtonElement | null>;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      ref={buttonRef}
+      type="button"
+      aria-label={label}
+      onClick={onClick}
+      className="grid h-[30px] w-[30px] place-items-center rounded-full border-2 border-ink bg-paper text-[15px] font-semibold transition-[background-color,transform] duration-150 ease-out hover:bg-signal active:scale-[0.94]"
+    >
+      <span aria-hidden="true">{children}</span>
+    </button>
+  );
+}

app/components/fenster/getWindowLabels.ts

@@ -0,0 +1,66 @@
+import { getTranslations } from "next-intl/server";
+import type { WindowLabels } from "./types";
+
+/** Alle Texte für Fenster und Sheets, serverseitig geladen und als Props weitergereicht. */
+export async function getWindowLabels(locale: string): Promise<WindowLabels> {
+  const t = await getTranslations({ locale, namespace: "home.windows" });
+  const tisch = await getTranslations({ locale, namespace: "home.tisch" });
+
+  return {
+    close: t("close"),
+    minimize: t("minimize"),
+    openWindows: t("openWindows"),
+    projectPage: t("projectPage"),
+    source: t("source"),
+    live: t("live"),
+    stack: t("stack"),
+    year: t("year"),
+    now: {
+      title: t("now.title"),
+      days: t("now.days"),
+      rows: (["study", "work", "side"] as const).map((k) => ({ label: t(`now.${k}.label`), text: t(`now.${k}.text`) })),
+    },
+    server: {
+      title: t("server.title"),
+      headline: t("server.headline"),
+      rows: (["ingress", "mail", "home"] as const).map((k) => ({
+        name: tisch(`servers.${k}.name`),
+        detail: tisch(`servers.${k}.detail`),
+      })),
+      note: tisch("serverNote"),
+    },
+    read: {
+      title: t("read.title"),
+      progress: t("read.progress"),
+      empty: t("read.empty"),
+      library: t("read.library"),
+      libraryHref: `/${locale}/books`,
+    },
+    about: {
+      title: t("about.title"),
+      paragraphs: [t("about.p1"), t("about.p2")],
+      facts: (["laptop", "pc", "study", "languages"] as const).map((k) => ({
+        label: t(`about.facts.${k}.label`),
+        value: t(`about.facts.${k}.value`),
+      })),
+    },
+    chat: {
+      title: t("chat.title"),
+      welcome: t("chat.welcome"),
+      consent: t("chat.consent"),
+      allow: t("chat.allow"),
+      placeholder: t("chat.placeholder"),
+      send: t("chat.send"),
+      error: t("chat.error"),
+      thinking: t("chat.thinking"),
+      note: t("chat.note"),
+    },
+    contact: {
+      title: t("contact.title"),
+      body: t("contact.body"),
+      copy: t("contact.copy"),
+      copied: t("contact.copied"),
+      form: t("contact.form"),
+    },
+  };
+}

app/components/fenster/types.ts

@@ -0,0 +1,67 @@
+import type { TischProject } from "../tisch/types";
+
+// Was ein Fenster (Desktop) bzw. Sheet (Handy) zeigen kann
+export type WindowRequest =
+  | { kind: "project"; project: TischProject }
+  | { kind: "now" }
+  | { kind: "server" }
+  | { kind: "read" }
+  | { kind: "about" }
+  | { kind: "contact" }
+  | { kind: "chat" };
+
+export function windowId(req: WindowRequest): string {
+  return req.kind === "project" ? `project:${req.project.id}` : req.kind;
+}
+
+export interface WindowLabels {
+  close: string;
+  minimize: string;
+  openWindows: string;
+  projectPage: string;
+  source: string;
+  live: string;
+  stack: string;
+  year: string;
+  now: {
+    title: string;
+    days: string;
+    rows: { label: string; text: string }[];
+  };
+  server: {
+    title: string;
+    headline: string;
+    rows: { name: string; detail: string }[];
+    note: string;
+  };
+  read: {
+    title: string;
+    progress: string;
+    empty: string;
+    library: string;
+    libraryHref: string;
+  };
+  about: {
+    title: string;
+    paragraphs: string[];
+    facts: { label: string; value: string }[];
+  };
+  chat: {
+    title: string;
+    welcome: string;
+    consent: string;
+    allow: string;
+    placeholder: string;
+    send: string;
+    error: string;
+    thinking: string;
+    note: string;
+  };
+  contact: {
+    title: string;
+    body: string;
+    copy: string;
+    copied: string;
+    form: string;
+  };
+}

app/components/tisch/Board.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+import { useCallback, useRef, useState, type RefObject } from "react";
+import {
+  animate,
+  motion,
+  useMotionValue,
+  useReducedMotion,
+  useSpring,
+  useTransform,
+  useVelocity,
+  type MotionValue,
+} from "framer-motion";
+import ObjectFace from "./ObjectFace";
+import { useOpenWindow } from "../fenster/WindowProvider";
+import { labelFor, windowFor } from "./windowFor";
+import { BOARD_SIZE, BOARD_SPOTS, type TischLabels, type TischObject } from "./types";
+
+interface Handle {
+  el: HTMLDivElement;
+  x: MotionValue<number>;
+  y: MotionValue<number>;
+  base: MotionValue<number>;
+  spotRotation: number;
+}
+
+interface BoardProps {
+  objects: TischObject[];
+  labels: TischLabels;
+}
+
+const TABLE_HEIGHT = 1080;
+const SETTLE = { type: "spring", bounce: 0, duration: 0.6 } as const;
+
+/** Desktop: freier Tisch. Objekte lassen sich werfen, federn am Rand zurück und lassen sich aufräumen. */
+export default function Board({ objects, labels }: BoardProps) {
+  const tableRef = useRef<HTMLDivElement>(null);
+  const handles = useRef(new Map<string, Handle>());
+  const [order, setOrder] = useState(() => objects.map((o) => o.id));
+
+  const bringToFront = useCallback((id: string) => {
+    setOrder((prev) => (prev[prev.length - 1] === id ? prev : [...prev.filter((x) => x !== id), id]));
+  }, []);
+
+  const tidy = () => {
+    const table = tableRef.current;
+    if (!table) return;
+    const width = table.clientWidth;
+    const gap = 22;
+    let cx = 0;
+    let cy = 28;
+    let rowH = 0;
+    objects.forEach((obj, i) => {
+      const h = handles.current.get(obj.id);
+      if (!h) return;
+      const { w, h: oh } = BOARD_SIZE[obj.kind];
+      if (cx + w > width && cx > 0) {
+        cx = 0;
+        cy += rowH + gap;
+        rowH = 0;
+      }
+      const tx = cx - h.el.offsetLeft;
+      const ty = cy - h.el.offsetTop;
+      cx += w + gap;
+      rowH = Math.max(rowH, oh);
+      const delay = i * 0.03;
+      animate(h.x, tx, { ...SETTLE, delay });
+      animate(h.y, ty, { ...SETTLE, delay });
+      animate(h.base, 0, { ...SETTLE, delay });
+    });
+  };
+
+  const mess = () => {
+    objects.forEach((obj, i) => {
+      const h = handles.current.get(obj.id);
+      if (!h) return;
+      const delay = i * 0.03;
+      animate(h.x, 0, { type: "spring", bounce: 0.2, duration: 0.6, delay });
+      animate(h.y, 0, { type: "spring", bounce: 0.2, duration: 0.6, delay });
+      animate(h.base, h.spotRotation, { type: "spring", bounce: 0.2, duration: 0.6, delay });
+    });
+  };
+
+  return (
+    <div>
+      <div className="mb-4 flex flex-wrap items-center justify-between gap-3 px-4 sm:px-6 lg:px-10">
+        <p className="font-mono text-[13px]">{labels.hintBoard}</p>
+        <div className="flex gap-2">
+          <button
+            type="button"
+            onClick={mess}
+            className="rounded-full px-5 py-3 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]"
+          >
+            {labels.mess}
+          </button>
+          <button
+            type="button"
+            onClick={tidy}
+            className="rounded-full bg-ink px-5 py-3 text-[15px] font-semibold text-paper transition-transform duration-150 ease-out active:scale-[0.97]"
+          >
+            {labels.tidy}
+          </button>
+        </div>
+      </div>
+
+      <div
+        ref={tableRef}
+        className="relative mx-4 border-t-2 border-ink bg-[radial-gradient(circle_at_1px_1px,rgb(var(--plakat-ink)/0.16)_1px,transparent_0)] [background-size:22px_22px] sm:mx-6 lg:mx-10"
+        style={{ height: TABLE_HEIGHT }}
+      >
+        {objects.map((obj, i) => (
+          <BoardItem
+            key={obj.id}
+            obj={obj}
+            labels={labels}
+            spot={BOARD_SPOTS[i % BOARD_SPOTS.length]}
+            z={order.indexOf(obj.id) + 1}
+            tableRef={tableRef}
+            onFront={() => bringToFront(obj.id)}
+            register={(h) => {
+              if (h) handles.current.set(obj.id, h);
+              else handles.current.delete(obj.id);
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+interface BoardItemProps {
+  obj: TischObject;
+  labels: TischLabels;
+  spot: { x: number; y: number; r: number };
+  z: number;
+  tableRef: RefObject<HTMLDivElement | null>;
+  onFront: () => void;
+  register: (h: Handle | null) => void;
+}
+
+function BoardItem({ obj, labels, spot, z, tableRef, onFront, register }: BoardItemProps) {
+  const reduce = useReducedMotion();
+  const [lifted, setLifted] = useState(false);
+  // Framer meldet nach einem Wurf trotzdem einen Tap; der soll die Karte nicht umdrehen
+  const dragged = useRef(false);
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const base = useMotionValue(spot.r);
+  // Neigung folgt der Wurfgeschwindigkeit, geglättet über eine Feder
+  const vx = useVelocity(x);
+  const tilt = useSpring(useTransform(vx, [-1600, 0, 1600], [-10, 0, 10]), { stiffness: 300, damping: 30 });
+  const rotate = useTransform(() => base.get() + (reduce ? 0 : tilt.get()));
+
+  const { w, h } = BOARD_SIZE[obj.kind];
+  const openWindow = useOpenWindow();
+  const elRef = useRef<HTMLDivElement | null>(null);
+  const openIt = () => openWindow?.(windowFor(obj), elRef.current);
+  const radius =
+    { sticker: "rounded-full", photo: "rounded-md", book: "rounded-[6px_14px_14px_6px]", chat: "rounded-[22px_22px_22px_6px]" }[obj.kind as string] ??
+    "rounded-2xl";
+
+  return (
+    <motion.div
+      ref={(el) => {
+        elRef.current = el;
+        register(el ? { el, x, y, base, spotRotation: spot.r } : null);
+      }}
+      drag
+      dragConstraints={tableRef}
+      dragElastic={0.18}
+      dragTransition={{ power: 0.35, timeConstant: 320, bounceStiffness: 260, bounceDamping: 22 }}
+      whileDrag={{ scale: 1.05 }}
+      onPointerDown={() => {
+        dragged.current = false;
+        onFront();
+      }}
+      onDragStart={() => {
+        dragged.current = true;
+        setLifted(true);
+      }}
+      onDragEnd={() => setLifted(false)}
+      onTap={() => !dragged.current && openIt()}
+      onKeyDown={(e) => {
+        if (e.key === " ") {
+          e.preventDefault();
+          openIt();
+        }
+      }}
+      tabIndex={0}
+      role="button"
+      aria-haspopup="dialog"
+      aria-label={labelFor(obj, labels)}
+      className={`absolute cursor-grab touch-none select-none active:cursor-grabbing ${radius} transition-shadow duration-200 ease-out ${
+        lifted ? "shadow-[14px_16px_0_rgb(var(--plakat-ink))]" : "shadow-[6px_6px_0_rgb(var(--plakat-ink))]"
+      }`}
+      style={{
+        x,
+        y,
+        rotate,
+        width: w,
+        height: h,
+        left: `min(${spot.x * 100}%, calc(100% - ${w}px))`,
+        top: spot.y,
+        zIndex: z,
+      }}
+    >
+      <ObjectFace obj={obj} labels={labels} />
+    </motion.div>
+  );
+}

app/components/tisch/Deck.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { AnimatePresence, motion, useMotionValue, useTransform, type PanInfo, type Variants } from "framer-motion";
+import ObjectFace from "./ObjectFace";
+import { useOpenWindow } from "../fenster/WindowProvider";
+import { labelFor, windowFor } from "./windowFor";
+import type { TischLabels, TischObject } from "./types";
+
+interface DeckProps {
+  objects: TischObject[];
+  labels: TischLabels;
+}
+
+const VISIBLE = 4;
+// Ab dieser Strecke oder Geschwindigkeit fliegt die Karte weg (Emil: ein kurzer Wisch reicht)
+const DISTANCE = 110;
+const VELOCITY = 500;
+const EASE_OUT: [number, number, number, number] = [0.23, 1, 0.32, 1];
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+type Exit = { kind: "fly"; dir: 1 | -1 } | { kind: "fade" };
+
+// Bekommt den aktuellen Exit-Modus über `custom` von AnimatePresence
+const exitVariants: Variants = {
+  leave: (e: Exit) =>
+    e.kind === "fly"
+      ? { x: e.dir * 460, rotate: e.dir * 18, opacity: 0, transition: { duration: 0.3, ease: EASE_OUT } }
+      : { scale: 0.85, opacity: 0, transition: { duration: 0.2, ease: EASE_OUT } },
+};
+
+/** Handy: Kartenstapel. Oberste Karte zur Seite wischen, antippen zum Umdrehen. */
+export default function Deck({ objects, labels }: DeckProps) {
+  const [order, setOrder] = useState(() => objects.map((_, i) => i));
+  // Wie die Karte geht, die den sichtbaren Stapel verlässt: oben weggeworfen oder hinten ausgeblendet
+  const [exit, setExit] = useState<Exit>({ kind: "fly", dir: 1 });
+
+  const next = (d: 1 | -1 = 1) => {
+    setExit({ kind: "fly", dir: d });
+    setOrder((o) => [...o.slice(1), o[0]]);
+  };
+  const prev = () => {
+    setExit({ kind: "fade" });
+    setOrder((o) => [o[o.length - 1], ...o.slice(0, -1)]);
+  };
+
+  const visible = order.slice(0, VISIBLE);
+
+  return (
+    <div>
+      <p className="mb-2 px-4 font-mono text-[13px] sm:px-6">{labels.hintDeck}</p>
+      <div className="relative h-[440px] overflow-hidden">
+        <AnimatePresence initial={false} custom={exit}>
+          {visible
+            .map((idx, depth) => (
+              <DeckCard
+                key={objects[idx].id}
+                obj={objects[idx]}
+                labels={labels}
+                depth={depth}
+                enteringFromLeft={depth === 0 && exit.kind === "fade"}
+                onDismiss={next}
+              />
+            ))
+            .reverse()}
+        </AnimatePresence>
+      </div>
+      <div className="flex items-center justify-between px-4 pb-10 pt-1 sm:px-6">
+        <RoundButton label={labels.prev} onClick={prev}>
+          ←
+        </RoundButton>
+        <span className="font-mono text-[13px] [font-variant-numeric:tabular-nums]" aria-live="polite">
+          {pad(order[0] + 1)} / {pad(objects.length)}
+        </span>
+        <RoundButton label={labels.next} onClick={() => next(1)}>
+          →
+        </RoundButton>
+      </div>
+    </div>
+  );
+}
+
+function RoundButton({ label, onClick, children }: { label: string; onClick: () => void; children: React.ReactNode }) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      onClick={onClick}
+      className="grid h-[52px] w-[52px] place-items-center rounded-full border-2 border-ink bg-paper text-xl font-semibold transition-[background-color,transform] duration-150 ease-out active:scale-95 active:bg-paper-2"
+    >
+      <span aria-hidden="true">{children}</span>
+    </button>
+  );
+}
+
+interface DeckCardProps {
+  obj: TischObject;
+  labels: TischLabels;
+  depth: number;
+  enteringFromLeft: boolean;
+  onDismiss: (dir: 1 | -1) => void;
+}
+
+function DeckCard({ obj, labels, depth, enteringFromLeft, onDismiss }: DeckCardProps) {
+  const dragged = useRef(false);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const openWindow = useOpenWindow();
+  const openIt = () => openWindow?.(windowFor(obj), cardRef.current);
+  const x = useMotionValue(0);
+  const dragRotate = useTransform(x, [-220, 0, 220], [-14, 0, 14]);
+  const isTop = depth === 0;
+  const restRotate = depth === 0 ? 0 : depth % 2 ? 3 : -3;
+
+  const handleDragEnd = (_: unknown, info: PanInfo) => {
+    if (Math.abs(info.offset.x) > DISTANCE || Math.abs(info.velocity.x) > VELOCITY) {
+      onDismiss(info.offset.x > 0 ? 1 : -1);
+    }
+  };
+
+  return (
+    <motion.div
+      className="absolute inset-x-0 top-4 mx-auto h-[390px] w-[min(300px,82vw)]"
+      style={{ zIndex: 10 - depth }}
+      initial={enteringFromLeft ? { x: -420, rotate: -14, opacity: 0 } : { scale: 0.85, y: 3 * 14, opacity: 0 }}
+      animate={{ x: 0, scale: 1 - Math.min(depth, 3) * 0.05, y: Math.min(depth, 3) * 14, rotate: restRotate, opacity: 1 }}
+      variants={exitVariants}
+      exit="leave"
+      transition={{ type: "spring", bounce: 0, duration: 0.45 }}
+    >
+      <motion.div
+        ref={cardRef}
+        className={`h-full w-full ${obj.kind === "sticker" ? "rounded-full" : "rounded-2xl"} shadow-[6px_6px_0_rgb(var(--plakat-ink))] ${isTop ? "cursor-grab" : "pointer-events-none"}`}
+        style={{ x, rotate: dragRotate, touchAction: "pan-y" }}
+        drag={isTop ? "x" : false}
+        dragSnapToOrigin
+        dragElastic={0.9}
+        onPointerDown={() => {
+          dragged.current = false;
+        }}
+        onDragStart={() => {
+          dragged.current = true;
+        }}
+        onDragEnd={handleDragEnd}
+        onTap={isTop ? () => !dragged.current && openIt() : undefined}
+        onKeyDown={(e) => {
+          if (isTop && e.key === " ") {
+            e.preventDefault();
+            openIt();
+          }
+        }}
+        tabIndex={isTop ? 0 : -1}
+        role="button"
+        aria-haspopup="dialog"
+        aria-label={labelFor(obj, labels)}
+        aria-hidden={!isTop}
+      >
+        <ObjectFace obj={obj} labels={labels} />
+      </motion.div>
+    </motion.div>
+  );
+}

app/components/tisch/ObjectFace.tsx

@@ -0,0 +1,152 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import type { TischLabels, TischObject } from "./types";
+import { loadCurrentBook, type CurrentBook } from "./currentBook";
+
+interface ObjectFaceProps {
+  obj: TischObject;
+  labels: TischLabels;
+}
+
+const pad = (n: number) => String(n).padStart(2, "0");
+
+// Rand und Rundung, die alle Objekte teilen
+const edge = "h-full w-full overflow-hidden rounded-2xl border-2 border-ink";
+
+/** Zeichnet ein Objekt. Größe und Position bestimmt der Container (Tisch oder Stapel). */
+export default function ObjectFace({ obj, labels }: ObjectFaceProps) {
+  switch (obj.kind) {
+    case "project":
+      return (
+        <div className={`${edge} flex flex-col justify-between p-4`} style={{ background: obj.color, color: obj.textColor }}>
+          <div className="flex justify-between font-mono text-xs">
+            <span>({pad(obj.index + 1)})</span>
+            <span>{obj.year}</span>
+          </div>
+          <h3 className="font-display text-[2.4rem] font-extrabold leading-[0.88] tracking-[-0.045em] [overflow-wrap:anywhere] [font-variation-settings:'wdth'_78] [color:inherit]">
+            {obj.title}
+          </h3>
+          <div className="font-mono text-xs leading-snug">
+            <div>{obj.tags.slice(0, 3).join(" · ")}</div>
+            <div className="mt-2 opacity-70">{labels.flip} ↗</div>
+          </div>
+        </div>
+      );
+
+    case "ticket":
+      return (
+        <div className={`${edge} grid grid-cols-[1fr_76px] bg-ink text-paper`}>
+          <div className="flex flex-col justify-between p-4">
+            <span className="font-mono text-[11.5px] uppercase tracking-wide">{labels.ticketTitle}</span>
+            <div>
+              <div className="font-display text-[4.4rem] font-extrabold leading-[0.8] tracking-[-0.05em] text-signal [font-variant-numeric:tabular-nums]">
+                {obj.daysLeft}
+              </div>
+              <div className="mt-1 text-sm font-semibold">{labels.ticketDays}</div>
+            </div>
+            <span className="font-mono text-[11.5px] leading-snug">{labels.ticketJob}</span>
+          </div>
+          <div className="grid place-items-center border-l-2 border-dashed border-paper/30 font-mono text-[11px] uppercase tracking-[0.12em] text-signal [transform:rotate(180deg)] [writing-mode:vertical-rl]">
+            {labels.ticketStub}
+          </div>
+        </div>
+      );
+
+    case "server":
+      return (
+        <div className={`${edge} flex flex-col gap-3 bg-paper p-4 text-ink`}>
+          <h3 className="font-display text-2xl font-extrabold leading-none tracking-[-0.03em]">{labels.serverTitle}</h3>
+          {labels.servers.map((s) => (
+            <div key={s.name} className="grid grid-cols-[10px_1fr] items-center gap-2.5 text-sm">
+              <span className="h-2.5 w-2.5 rounded-full bg-ok shadow-[0_0_0_3px_rgb(var(--plakat-ok)/0.2)]" aria-hidden="true" />
+              <span>
+                {s.name}
+                <span className="block font-mono text-[11.5px] opacity-75">{s.detail}</span>
+              </span>
+            </div>
+          ))}
+          <p className="mt-auto border-t-2 border-ink/15 pt-2.5 font-mono text-[11.5px] leading-snug">{labels.serverNote}</p>
+        </div>
+      );
+
+    case "book":
+      return <BookFace href={obj.href} labels={labels} />;
+
+    case "photo":
+      return (
+        <div className="flex h-full w-full flex-col rounded-md border-2 border-ink bg-polaroid p-2.5 pb-0 text-polaroid-ink">
+          <div className="relative w-full flex-1 overflow-hidden rounded-sm bg-paper-2">
+            <Image src="/images/me.jpg" alt="Dennis Konkol" fill sizes="220px" className="object-cover" draggable={false} />
+          </div>
+          <div className="py-2.5 text-center font-display text-lg font-bold">{labels.photoCaption}</div>
+        </div>
+      );
+
+    case "chat":
+      return (
+        <div className="flex h-full w-full flex-col justify-between rounded-[22px_22px_22px_6px] border-2 border-ink bg-ink p-4 text-paper">
+          <span className="font-mono text-xs uppercase tracking-wide text-signal">KI · n8n</span>
+          <span className="font-display text-[1.7rem] font-extrabold leading-[0.95] tracking-[-0.03em]">{labels.chatCard}</span>
+          <span className="font-mono text-xs opacity-70">{labels.chatCardHint} ↗</span>
+        </div>
+      );
+
+    case "sticker":
+      return (
+        <div className="grid h-full w-full place-items-center rounded-full border-2 border-ink bg-signal p-6 text-center font-display text-xl font-extrabold leading-[0.98] tracking-[-0.02em] text-ink">
+          {labels.sticker}
+        </div>
+      );
+  }
+}
+
+function BookFace({ href, labels }: { href: string; labels: TischLabels }) {
+  const [book, setBook] = useState<CurrentBook | null | undefined>(undefined);
+
+  useEffect(() => {
+    let alive = true;
+    loadCurrentBook().then((b) => {
+      if (alive) setBook(b);
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  const progress = book && Number.isFinite(book.progress) ? Math.max(0, Math.min(100, book.progress)) : 0;
+
+  return (
+    <div className="relative h-full w-full overflow-hidden rounded-[6px_14px_14px_6px] border-2 border-ink bg-bookcover text-bookcover-text shadow-[inset_6px_0_0_rgba(255,255,255,0.08)]">
+      {book?.image && (
+        <Image src={book.image} alt="" fill sizes="200px" className="object-cover opacity-40" draggable={false} />
+      )}
+      <div className="relative flex h-full flex-col justify-between p-4">
+        <span className="font-mono text-xs uppercase tracking-wide">{labels.bookLabel}</span>
+        {book === undefined ? (
+          <div className="space-y-2" aria-hidden="true">
+            <div className="h-7 w-4/5 animate-pulse rounded bg-white/15" />
+            <div className="h-4 w-1/2 animate-pulse rounded bg-white/10" />
+          </div>
+        ) : book ? (
+          <div>
+            <div className="line-clamp-3 font-display text-[1.9rem] font-extrabold leading-[0.92] tracking-[-0.03em]">{book.title}</div>
+            <div className="mt-1.5 font-mono text-xs">{book.authors.join(", ")}</div>
+          </div>
+        ) : (
+          <Link href={href} className="font-display text-2xl font-extrabold leading-tight underline decoration-2 underline-offset-4">
+            {labels.bookFallback}
+          </Link>
+        )}
+        <div>
+          <div className="font-mono text-xs">{book ? `${progress} %` : " "}</div>
+          <div className="mt-1.5 h-1 overflow-hidden rounded bg-white/20">
+            <div className="h-full origin-left bg-signal" style={{ transform: `scaleX(${progress / 100})` }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/components/tisch/TischSection.tsx

@@ -0,0 +1,109 @@
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { getProjects } from "@/lib/directus";
+import Board from "./Board";
+import Deck from "./Deck";
+import { PROJECT_COLORS, type TischLabels, type TischObject } from "./types";
+
+interface TischSectionProps {
+  locale: string;
+}
+
+// Abgabe der Masterarbeit, Grundlage für das Ticket
+const THESIS_DEADLINE = new Date("2027-02-15T12:00:00+01:00");
+
+/**
+ * Der Tisch: Projekte und ein paar Dinge aus meinem Alltag als Objekte.
+ * Desktop zeigt den freien Tisch, das Handy einen Kartenstapel. Beides wird
+ * serverseitig gerendert und per CSS umgeschaltet, damit nichts springt.
+ */
+export default async function TischSection({ locale }: TischSectionProps) {
+  const t = await getTranslations({ locale, namespace: "home.tisch" });
+  const projects = (await getProjects(locale, { published: true, limit: 6 }).catch(() => null)) ?? [];
+  const daysLeft = Math.max(0, Math.ceil((THESIS_DEADLINE.getTime() - Date.now()) / 86_400_000));
+
+  const labels: TischLabels = {
+    hintBoard: t("hintBoard"),
+    hintDeck: t("hintDeck"),
+    tidy: t("tidy"),
+    mess: t("mess"),
+    flip: t("flip"),
+    details: t("details"),
+    prev: t("prev"),
+    next: t("next"),
+    ticketTitle: t("ticketTitle"),
+    ticketDays: t("ticketDays"),
+    ticketJob: t("ticketJob"),
+    ticketStub: t("ticketStub"),
+    serverTitle: t("serverTitle"),
+    servers: [
+      { name: t("servers.ingress.name"), detail: t("servers.ingress.detail") },
+      { name: t("servers.mail.name"), detail: t("servers.mail.detail") },
+      { name: t("servers.home.name"), detail: t("servers.home.detail") },
+    ],
+    serverNote: t("serverNote"),
+    bookLabel: t("bookLabel"),
+    bookFallback: t("bookFallback"),
+    photoCaption: t("photoCaption"),
+    chatCard: t("chatCard"),
+    chatCardHint: t("chatCardHint"),
+    sticker: t("sticker"),
+  };
+
+  const projectObjects: TischObject[] = projects.map((p, i) => {
+    const color = PROJECT_COLORS[i % PROJECT_COLORS.length];
+    return {
+      kind: "project",
+      id: `project-${p.slug}`,
+      index: i,
+      title: p.title,
+      description: p.description,
+      year: p.created_at ? String(new Date(p.created_at).getFullYear()) : "",
+      tags: p.tags?.length ? p.tags : p.technologies ?? [],
+      href: `/${locale}/projects/${p.slug}`,
+      color: color.bg,
+      textColor: color.text,
+      liveUrl: p.live_url && p.live_url !== "#" ? p.live_url : undefined,
+      githubUrl: p.github_url && p.github_url !== "#" ? p.github_url : undefined,
+    };
+  });
+
+  // Reihenfolge = Startplätze auf dem Tisch; Projekte zuerst, damit sie oben liegen
+  const objects: TischObject[] = [
+    ...projectObjects,
+    { kind: "ticket", id: "ticket", daysLeft },
+    { kind: "server", id: "server" },
+    { kind: "book", id: "book", href: `/${locale}/books` },
+    { kind: "photo", id: "photo" },
+    { kind: "chat", id: "chat" },
+    { kind: "sticker", id: "sticker" },
+  ];
+  // Im Stapel wäre der runde Sticker eine Ellipse und wiederholt nur den Claim
+  const deckObjects = objects.filter((o) => o.kind !== "sticker");
+
+  return (
+    <section id="projects" className="border-b-2 border-ink pb-16 pt-14 md:pt-16" aria-labelledby="tisch-title">
+      <div className="flex flex-wrap items-end justify-between gap-4 px-4 pb-4 sm:px-6 lg:px-10">
+        <h2
+          id="tisch-title"
+          className="font-display text-[clamp(2.4rem,6vw,5rem)] font-extrabold leading-[0.92] tracking-[-0.045em] [font-variation-settings:'wdth'_82]"
+        >
+          {t("title")}
+        </h2>
+        <Link
+          href={`/${locale}/projects`}
+          className="inline-flex items-center gap-2 rounded-full px-5 py-3 text-[15px] font-semibold shadow-[inset_0_0_0_1.5px_rgb(var(--plakat-ink))] transition-[background-color,color,transform] duration-150 ease-out hover:bg-ink hover:text-paper active:scale-[0.97]"
+        >
+          {t("allProjects")} <span aria-hidden="true">↗</span>
+        </Link>
+      </div>
+
+      <div className="hidden md:block">
+        <Board objects={objects} labels={labels} />
+      </div>
+      <div className="md:hidden">
+        <Deck objects={deckObjects} labels={labels} />
+      </div>
+    </section>
+  );
+}

app/components/tisch/currentBook.ts

@@ -0,0 +1,24 @@
+// Aktuelles Buch aus Hardcover (über n8n). Tisch, Stapel und Lese-Fenster teilen sich eine Anfrage.
+
+export interface CurrentBook {
+  title: string;
+  authors: string[];
+  image: string | null;
+  progress: number;
+}
+
+// Tisch und Stapel zeigen das Buch beide; so wird es nur einmal geladen
+let bookRequest: Promise<CurrentBook | null> | null = null;
+export function loadCurrentBook(): Promise<CurrentBook | null> {
+  if (!bookRequest) {
+    bookRequest = fetch("/api/n8n/hardcover/currently-reading")
+      .then((res) => (res.ok ? res.json() : null))
+      .then((data) => {
+        const list = data?.currentlyReading;
+        const first = Array.isArray(list) ? list[0] : list;
+        return first ?? null;
+      })
+      .catch(() => null);
+  }
+  return bookRequest;
+}

app/components/tisch/types.ts

@@ -0,0 +1,111 @@
+// Objekte auf dem Tisch. Der Server baut die Liste, die Client-Komponenten zeichnen sie.
+
+export interface TischProject {
+  kind: "project";
+  id: string;
+  index: number;
+  title: string;
+  description: string;
+  year: string;
+  tags: string[];
+  href: string;
+  color: string;
+  textColor: string;
+  liveUrl?: string;
+  githubUrl?: string;
+}
+
+export interface TischTicket {
+  kind: "ticket";
+  id: "ticket";
+  daysLeft: number;
+}
+
+export interface TischServer {
+  kind: "server";
+  id: "server";
+}
+
+export interface TischBook {
+  kind: "book";
+  id: "book";
+  href: string;
+}
+
+export interface TischPhoto {
+  kind: "photo";
+  id: "photo";
+}
+
+export interface TischChat {
+  kind: "chat";
+  id: "chat";
+}
+
+export interface TischSticker {
+  kind: "sticker";
+  id: "sticker";
+}
+
+export type TischObject = TischProject | TischTicket | TischServer | TischBook | TischPhoto | TischChat | TischSticker;
+
+export interface TischLabels {
+  hintBoard: string;
+  hintDeck: string;
+  tidy: string;
+  mess: string;
+  flip: string;
+  details: string;
+  prev: string;
+  next: string;
+  ticketTitle: string;
+  ticketDays: string;
+  ticketJob: string;
+  ticketStub: string;
+  serverTitle: string;
+  servers: { name: string; detail: string }[];
+  serverNote: string;
+  bookLabel: string;
+  bookFallback: string;
+  photoCaption: string;
+  chatCard: string;
+  chatCardHint: string;
+  sticker: string;
+}
+
+// Breite und Höhe je Objektart auf dem Desktop-Tisch (px)
+export const BOARD_SIZE: Record<TischObject["kind"], { w: number; h: number }> = {
+  project: { w: 236, h: 312 },
+  ticket: { w: 320, h: 180 },
+  server: { w: 270, h: 290 },
+  book: { w: 176, h: 262 },
+  photo: { w: 210, h: 250 },
+  chat: { w: 250, h: 170 },
+  sticker: { w: 180, h: 180 },
+};
+
+// Startpositionen: Anteil der Tischbreite, Abstand von oben in px, Neigung in Grad
+export const BOARD_SPOTS: { x: number; y: number; r: number }[] = [
+  { x: 0.02, y: 60, r: -6 },
+  { x: 0.23, y: 120, r: 4 },
+  { x: 0.45, y: 50, r: -3 },
+  { x: 0.67, y: 110, r: 6 },
+  { x: 0.04, y: 480, r: 5 },
+  { x: 0.28, y: 510, r: -5 },
+  { x: 0.52, y: 440, r: 3 },
+  { x: 0.8, y: 60, r: 8 },
+  { x: 0.76, y: 450, r: -7 },
+  { x: 0.42, y: 800, r: 7 },
+  { x: 0.12, y: 800, r: -4 },
+  { x: 0.66, y: 790, r: 4 },
+];
+
+// Farbfelder für Projektkarten, abwechselnd hell und dunkel
+export const PROJECT_COLORS: { bg: string; text: string }[] = [
+  { bg: "#2f5bea", text: "#f6f3f1" },
+  { bg: "#1d1b3d", text: "#f6f3f1" },
+  { bg: "#0f6e66", text: "#f6f3f1" },
+  { bg: "#f2b531", text: "#140c0b" },
+  { bg: "#140c0b", text: "#e8402f" },
+  { bg: "#3f8a4a", text: "#f6f3f1" },
+];

app/components/tisch/windowFor.ts

@@ -0,0 +1,41 @@
+import type { WindowRequest } from "../fenster/types";
+import type { TischLabels, TischObject } from "./types";
+
+/** Welches Fenster ein Objekt auf dem Tisch öffnet */
+export function windowFor(obj: TischObject): WindowRequest {
+  switch (obj.kind) {
+    case "project":
+      return { kind: "project", project: obj };
+    case "ticket":
+      return { kind: "now" };
+    case "server":
+    case "sticker":
+      return { kind: "server" };
+    case "book":
+      return { kind: "read" };
+    case "photo":
+      return { kind: "about" };
+    case "chat":
+      return { kind: "chat" };
+  }
+}
+
+/** Vorlesetext für das Objekt als Knopf */
+export function labelFor(obj: TischObject, labels: TischLabels): string {
+  switch (obj.kind) {
+    case "project":
+      return obj.title;
+    case "ticket":
+      return labels.ticketTitle;
+    case "server":
+      return labels.serverTitle;
+    case "book":
+      return labels.bookLabel;
+    case "photo":
+      return labels.photoCaption;
+    case "chat":
+      return labels.chatCard;
+    case "sticker":
+      return labels.sticker;
+  }
+}

app/components/ui/BentoGrid.tsx

@@ -1,60 +0,0 @@
-import { cn } from "@/lib/utils";
-import { motion } from "framer-motion";
-
-export const BentoGrid = ({
-  className,
-  children,
-}: {
-  className?: string;
-  children?: React.ReactNode;
-}) => {
-  return (
-    <div
-      className={cn(
-        "grid md:auto-rows-[18rem] grid-cols-1 md:grid-cols-3 gap-4 max-w-7xl mx-auto ",
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-export const BentoGridItem = ({
-  className,
-  title,
-  description,
-  header,
-  icon,
-  onClick,
-}: {
-  className?: string;
-  title?: string | React.ReactNode;
-  description?: string | React.ReactNode;
-  header?: React.ReactNode;
-  icon?: React.ReactNode;
-  onClick?: () => void;
-}) => {
-  return (
-    <motion.div
-      whileHover={{ y: -5 }}
-      transition={{ duration: 0.2 }}
-      className={cn(
-        "row-span-1 rounded-3xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-stone-900 bg-white border border-stone-200 dark:border-stone-800 justify-between flex flex-col space-y-4",
-        className
-      )}
-      onClick={onClick}
-    >
-      {header}
-      <div className="group-hover/bento:translate-x-2 transition duration-200">
-        {icon}
-        <div className="font-sans font-bold text-stone-800 dark:text-stone-100 mb-2 mt-2">
-          {title}
-        </div>
-        <div className="font-sans font-normal text-stone-600 dark:text-stone-400 text-xs">
-          {description}
-        </div>
-      </div>
-    </motion.div>
-  );
-};

app/globals.css

@@ -25,6 +25,18 @@
     --input: #efebe9;
     --ring: #a1887f; /* Warm brown ring */
     --radius: 1rem;
+
+    /* Motion tokens: enter/exit = ease-out, on-screen movement = ease-in-out */
+    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
+    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
+
+    /* Plakat-Design (RGB-Kanäle, damit Tailwind-Deckkraft funktioniert) */
+    --plakat-red: 232 64 47;
+    --plakat-ink: 20 12 11;
+    --plakat-paper: 246 243 241;
+    --plakat-paper-2: 235 230 226;
+    --plakat-ok: 31 157 99;
 }
 
 .dark {
@@ -47,12 +59,18 @@
     --border: #44403c;
     --input: #292524;
     --ring: #d6d3d1;
+
+    /* Tinte und Papier tauschen die Rollen, das Rot bleibt */
+    --plakat-ink: 243 238 233;
+    --plakat-paper: 21 16 15;
+    --plakat-paper-2: 36 30 28;
+    --plakat-ok: 60 199 138;
 }
 
 body {
-    background: var(--background);
-    color: var(--foreground);
-    font-family: "Inter", sans-serif;
+    background: rgb(var(--plakat-paper));
+    color: rgb(var(--plakat-ink));
+    font-family: var(--font-geist), "Helvetica Neue", Arial, sans-serif;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
@@ -65,8 +83,8 @@ body {
 
 /* Custom Selection */
 ::selection {
-    background: var(--primary); /* Rich brown for better contrast */
-    color: var(--primary-foreground); /* Off-white */
+    background: rgb(var(--plakat-ink));
+    color: rgb(var(--plakat-paper));
 }
 
 /* Smooth Scrolling */
@@ -74,6 +92,20 @@ html {
     scroll-behavior: smooth;
 }
 
+/* Reduced motion: drop movement, keep colour/opacity feedback */
+@media (prefers-reduced-motion: reduce) {
+    html {
+        scroll-behavior: auto;
+    }
+    *,
+    *::before,
+    *::after {
+        animation-duration: 0.01ms !important;
+        animation-iteration-count: 1 !important;
+        animation-delay: 0ms !important;
+    }
+}
+
 /* Liquid Glass Effects */
 .glass-panel {
     background: var(--card);
@@ -92,10 +124,13 @@ html {
     box-shadow:
         0 4px 6px -1px rgba(0, 0, 0, 0.06),
         0 2px 4px -1px rgba(0, 0, 0, 0.05);
-    transition: all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
-    will-change: transform, box-shadow;
+    transition:
+        transform 250ms var(--ease-out),
+        box-shadow 250ms var(--ease-out),
+        border-color 200ms ease;
 }
 
+@media (hover: hover) and (pointer: fine) {
 .glass-card:hover {
     background: var(--card);
     box-shadow:
@@ -104,6 +139,7 @@ html {
     transform: translateY(-4px);
     border-color: var(--ring);
 }
+}
 
 /* Typography & Headings */
 h1,
@@ -112,18 +148,11 @@ h3,
 h4,
 h5,
 h6 {
-    font-family: var(--font-playfair), Georgia, serif;
+    font-family: var(--font-bricolage), "Avenir Next", "Segoe UI", sans-serif;
     letter-spacing: -0.02em;
     font-weight: 700;
-    color: var(--foreground);
 }
 
-/* Improve text contrast - using foreground variable for WCAG AA compliance */
-p,
-span,
-div {
-    color: var(--foreground); /* #3e2723 - meets WCAG AA standards */
-}
 
 /* Hide scrollbar but keep functionality */
 ::-webkit-scrollbar {
@@ -229,7 +258,7 @@ div {
     background: #fffcf5;
     border: 1px solid #d7ccc8;
     color: #3e2723;
-    transition: all 0.2s ease;
+    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
     box-shadow: 0 1px 2px rgba(62, 39, 35, 0.05);
 }
 

app/layout.tsx

@@ -1,24 +1,31 @@
 import "./globals.css";
 import { Metadata } from "next";
-import { Inter, Playfair_Display } from "next/font/google";
+import { Bricolage_Grotesque, Geist, Geist_Mono } from "next/font/google";
 import React from "react";
 import ClientProviders from "./components/ClientProviders";
-import ShaderGradientBackground from "./components/ShaderGradientBackground";
 import { cookies } from "next/headers";
 import { getBaseUrl } from "@/lib/seo";
 
-const inter = Inter({
-  variable: "--font-inter",
+// Bricolage behält die Achsen für Breite und optische Größe, damit das Plakat-Wortbild variieren kann
+const bricolage = Bricolage_Grotesque({
+  variable: "--font-bricolage",
+  subsets: ["latin"],
+  axes: ["opsz", "wdth"],
+  display: "swap",
+  adjustFontFallback: true,
+});
+
+const geist = Geist({
+  variable: "--font-geist",
   subsets: ["latin"],
   display: "swap",
   adjustFontFallback: true,
 });
 
-const playfair = Playfair_Display({
-  variable: "--font-playfair",
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
   subsets: ["latin"],
   display: "swap",
-  adjustFontFallback: true,
 });
 
 export default async function RootLayout({
@@ -32,12 +39,12 @@ export default async function RootLayout({
     <html lang={locale} suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
-        {/* Prevent flash of unstyled theme — reads localStorage before React hydrates */}
-        <script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem('theme');if(t==='dark')document.documentElement.classList.add('dark');}catch(e){}` }} />
+        <link rel="preconnect" href="https://assets.hardcover.app" />
+        <link rel="preconnect" href="https://cms.dk0.dev" />
+        {/* Prevent flash of unstyled theme — reads localStorage + system preference before React hydrates */}
+        <script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem('theme');var d=t==='dark'||((!t||t==='system')&&window.matchMedia('(prefers-color-scheme:dark)').matches);if(d)document.documentElement.classList.add('dark');}catch(e){}` }} />
       </head>
-      <body className={`${inter.variable} ${playfair.variable}`} suppressHydrationWarning>
-        <div className="grain-overlay" aria-hidden="true" />
-        <ShaderGradientBackground />
+      <body className={`${bricolage.variable} ${geist.variable} ${geistMono.variable}`} suppressHydrationWarning>
         <ClientProviders>{children}</ClientProviders>
       </body>
     </html>
@@ -47,23 +54,33 @@ export default async function RootLayout({
 export const metadata: Metadata = {
   metadataBase: new URL(getBaseUrl()),
   title: {
-    default: "Dennis Konkol | Portfolio",
-    template: "%s | Dennis Konkol",
+    default: "Dennis Konkol",
+    template: "%s | dk0",
   },
   description:
-    "Portfolio of Dennis Konkol, a student and software engineer based in Osnabrück, Germany. Passionate about technology, coding, and solving real-world problems.",
+    "Dennis Konkol – Software Engineer & Webentwickler in Osnabrück. Webentwicklung, Fullstack-Apps, Docker, Next.js, Flutter. Portfolio mit Projekten und Kontakt.",
   keywords: [
     "Dennis Konkol",
+    "dk0",
+    "denshooter",
+    "Webentwicklung Osnabrück",
+    "Webentwicklung",
+    "Softwareentwicklung Osnabrück",
+    "Website erstellen Osnabrück",
+    "Web Design Osnabrück",
+    "Informatik Osnabrück",
     "Software Engineer",
-    "Portfolio",
-    "Student",
-    "Web Development",
     "Full Stack Developer",
-    "Osnabrück",
-    "Germany",
-    "React",
+    "Frontend Developer Osnabrück",
     "Next.js",
+    "React",
     "TypeScript",
+    "Flutter",
+    "Docker",
+    "Self-Hosting",
+    "DevOps",
+    "Portfolio",
+    "Osnabrück",
   ],
   authors: [{ name: "Dennis Konkol", url: "https://dk0.dev" }],
   creator: "Dennis Konkol",
@@ -80,26 +97,27 @@ export const metadata: Metadata = {
     },
   },
   openGraph: {
-    title: "Dennis Konkol | Portfolio",
+    title: "Dennis Konkol",
     description:
-      "Explore my projects and contact me for collaboration opportunities!",
+      "Software Engineer & Webentwickler in Osnabrück. Next.js, Flutter, Docker, DevOps. Projekte ansehen und Kontakt aufnehmen.",
     url: "https://dk0.dev",
-    siteName: "Dennis Konkol Portfolio",
+    siteName: "Dennis Konkol",
     images: [
       {
         url: "https://dk0.dev/api/og",
         width: 1200,
         height: 630,
-        alt: "Dennis Konkol Portfolio",
+        alt: "Dennis Konkol",
       },
     ],
-    locale: "en_US",
+    locale: "de_DE",
+    alternateLocale: ["en_US"],
     type: "website",
   },
   twitter: {
     card: "summary_large_image",
-    title: "Dennis Konkol | Portfolio",
-    description: "Student & Software Engineer based in Osnabrück, Germany.",
+    title: "Dennis Konkol",
+    description: "Software Engineer & Webentwickler in Osnabrück.",
     images: ["https://dk0.dev/api/og"],
     creator: "@denshooter",
   },
@@ -108,5 +126,9 @@ export const metadata: Metadata = {
   },
   alternates: {
     canonical: "https://dk0.dev",
+    languages: {
+      de: "https://dk0.dev/de",
+      en: "https://dk0.dev/en",
+    },
   },
 };

app/legal-notice/page.tsx

@@ -29,7 +29,8 @@ export default function LegalNotice() {
   }, [locale]);
 
   return (
-    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
+    <>
+    <div className="min-h-screen bg-stone-50 dark:bg-stone-950 transition-colors duration-500">
       <Header />
       <main className="max-w-7xl mx-auto px-6 pt-40 pb-20">
 
@@ -116,7 +117,7 @@ export default function LegalNotice() {
                 <Clock className="text-liquid-purple" size={20} />
                 <div>
                   <p className="text-[10px] font-black uppercase tracking-widest text-stone-400">Last Review</p>
-                  <p className="font-bold text-stone-900 dark:text-stone-100 text-sm">February 15, 2025</p>
+                  <p className="font-bold text-stone-900 dark:text-stone-100 text-sm">May 14, 2025</p>
                 </div>
               </div>
               <p className="text-xs text-stone-500 leading-relaxed">
@@ -127,7 +128,8 @@ export default function LegalNotice() {
           </div>
         </div>
       </main>
+      </div>
       <Footer />
-    </div>
+    </>
   );
 }

app/manage/page.tsx

@@ -49,7 +49,9 @@ const AdminPage = () => {
         return data.csrfToken;
       }
     } catch {
-      console.error('Failed to fetch CSRF token');
+      if (process.env.NODE_ENV === 'development') {
+        console.error('Failed to fetch CSRF token');
+      }
     }
     return '';
   }, []);
@@ -339,7 +341,7 @@ const AdminPage = () => {
                 </p>
               </div>
 
-              <form onSubmit={handleLogin} className="space-y-4">
+              <form onSubmit={handleLogin} className="space-y-4" aria-label="Admin login form">
                 <div>
                   <div className="relative">
                     <input
@@ -355,7 +357,7 @@ const AdminPage = () => {
                       onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
                       className="absolute right-4 top-1/2 -translate-y-1/2 text-stone-400 hover:text-stone-700 dark:hover:text-stone-200 p-1 transition-colors"
                     >
-                      {authState.showPassword ? '👁️' : '👁️‍🗨️'}
+                      {authState.showPassword ? 'Hide' : 'Show'}
                     </button>
                   </div>
                   {authState.error && (

app/not-found.tsx

@@ -1,14 +1,16 @@
 "use client";
 
-import { motion } from "framer-motion";
-import { ArrowLeft, Search, Terminal } from "lucide-react";
+import { ArrowLeft, Search } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
+import { useLocale, useTranslations } from "next-intl";
 
 export default function NotFound() {
   const [mounted, setMounted] = useState(false);
   const router = useRouter();
+  const locale = useLocale();
+  const t = useTranslations("notFound");
 
   useEffect(() => {
     setMounted(true);
@@ -17,89 +19,57 @@ export default function NotFound() {
   if (!mounted) return null;
 
   return (
-    <main className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 py-16 sm:py-20 md:py-24 px-4 sm:px-6 flex items-center justify-center transition-colors duration-500">
+    <main className="min-h-screen bg-stone-50 dark:bg-stone-950 py-16 sm:py-20 md:py-24 px-4 sm: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-4 sm:gap-6 md:gap-8 max-w-5xl mx-auto">
 
-          {/* Main Error Card */}
-          <motion.div
-            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-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between min-h-[300px] sm:min-h-[400px]"
-          >
+          <div className="md:col-span-12 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between min-h-[300px] sm:min-h-[400px]">
             <div>
               <div className="flex items-center gap-3 mb-6 sm:mb-8 md: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>
+                <span className="text-[10px] font-black uppercase tracking-[0.3em] text-stone-400">{t("errorReport")}</span>
               </div>
               <h1 className="text-4xl sm:text-5xl md:text-8xl font-black tracking-tighter uppercase text-stone-900 dark:text-stone-50 leading-[0.85] mb-4 sm:mb-6 md:mb-8">
-                Page not <br/>Found<span className="text-liquid-mint">.</span>
+                {t("title").split(" ").map((word, i) => (
+                  <span key={i}>{i > 0 ? " " : ""}{word}{i === 0 ? "" : ""}{i === t("title").split(" ").length - 1 ? <span className="text-emerald-600 dark:text-emerald-400">.</span> : ""}</span>
+                ))}
               </h1>
-              <p className="text-base sm:text-lg md:text-xl lg: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 className="text-base sm:text-lg md:text-xl lg:text-2xl font-light text-stone-500 dark:text-stone-400 max-w-md leading-relaxed">
+                {t("description")}
               </p>
             </div>
 
             <div className="mt-8 sm:mt-10 md:mt-12 flex flex-wrap gap-3 sm:gap-4">
               <Link
-                href="/"
+                href={`/${locale}`}
                 className="group relative px-6 sm:px-10 py-3 sm:py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-xl sm:rounded-2xl font-black text-xs uppercase tracking-[0.2em] shadow-xl hover:scale-105 transition-all"
               >
-                Return Home
+                {t("returnHome")}
               </Link>
               <button
                 onClick={() => router.back()}
                 className="px-6 sm:px-10 py-3 sm:py-4 bg-white dark:bg-stone-800 text-stone-900 dark:text-stone-100 border border-stone-200 dark:border-stone-700 rounded-xl sm:rounded-2xl font-black text-xs uppercase tracking-[0.2em] hover:bg-stone-50 dark:hover:bg-stone-700 transition-all"
               >
-                Go Back
+                {t("goBack")}
               </button>
             </div>
-          </motion.div>
+          </div>
 
-          {/* Sidebar Cards */}
-          <div className="md:col-span-12 lg:col-span-4 flex flex-col gap-4 sm: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-2xl sm:rounded-[2.5rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex-1 flex flex-col justify-between"
+          <div className="md:col-span-12 bg-stone-900 rounded-2xl sm:rounded-[2.5rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex flex-col justify-between min-h-[200px]">
+            <div className="relative z-10">
+              <Search className="text-liquid-mint mb-4 sm:mb-6" size={28} />
+              <h3 className="text-xl sm:text-2xl font-black uppercase tracking-tighter mb-1 sm:mb-2">{t("exploreWork")}</h3>
+              <p className="text-stone-400 text-sm font-medium">{t("exploreWorkDesc")}</p>
+            </div>
+            <Link
+              href={`/${locale}/projects`}
+              className="mt-5 sm:mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-liquid-mint group-hover:gap-4 transition-all"
             >
-              <div className="relative z-10">
-                <Search className="text-liquid-mint mb-4 sm:mb-6" size={28} />
-                <h3 className="text-xl sm:text-2xl font-black uppercase tracking-tighter mb-1 sm: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-5 sm: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>
-
-            {/* 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-2xl sm:rounded-[2.5rem] p-6 sm:p-8 md:p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex-1 flex flex-col justify-between group"
-            >
-              <div className="relative z-10">
-                <Terminal className="text-liquid-purple mb-4 sm:mb-6" size={28} />
-                <h3 className="text-xl sm:text-2xl font-black uppercase tracking-tighter mb-1 sm: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>
+              {t("viewProjects")} <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" />
           </div>
 
         </div>

app/privacy-policy/page.tsx

@@ -29,7 +29,8 @@ export default function PrivacyPolicy() {
   }, [locale]);
 
   return (
-    <div className="min-h-screen bg-[#fdfcf8] dark:bg-stone-950 transition-colors duration-500">
+    <>
+    <div className="min-h-screen bg-stone-50 dark:bg-stone-950 transition-colors duration-500">
       <Header />
       <main className="max-w-7xl mx-auto px-6 pt-40 pb-20">
 
@@ -61,11 +62,15 @@ export default function PrivacyPolicy() {
               <div className="space-y-16">
                 <section>
                   <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight flex items-center gap-3">
-                    <Shield className="text-liquid-mint" size={28} /> Allgemeiner Überblick
+                    <Shield className="text-liquid-mint" size={28} /> Verantwortlicher
                   </h2>
-                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
-                    Der Schutz Ihrer persönlichen Daten ist mir ein besonderes Anliegen. Ich verarbeite Ihre Daten daher ausschließlich auf Grundlage der gesetzlichen Bestimmungen (DSGVO, TMG).
-                  </p>
+                  <div className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 space-y-2">
+                    <p className="font-bold text-stone-900 dark:text-stone-100">Dennis Konkol</p>
+                    <p>Auf dem Ziegenbrink 2B</p>
+                    <p>49082 Osnabrück, Deutschland</p>
+                    <p>E-Mail: <a href="mailto:contact@dk0.dev" className="text-liquid-mint hover:underline">contact@dk0.dev</a></p>
+                    <p className="text-sm text-stone-500 dark:text-stone-400 mt-4">Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten Verantwortlichen.</p>
+                  </div>
                 </section>
 
                 <section>
@@ -73,8 +78,80 @@ export default function PrivacyPolicy() {
                     <Database className="text-liquid-sky" size={28} /> Datenerfassung
                   </h2>
                   <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
-                    Wenn Sie per Formular auf der Website oder per E-Mail Kontakt mit mir aufnehmen, werden Ihre angegebenen Daten zwecks Bearbeitung der Anfrage bei mir gespeichert.
+                    Beim Zugriff auf diese Website werden automatisch Informationen allgemeiner Natur erfasst. Diese beinhalten unter anderem:
                   </p>
+                  <ul className="mt-4 space-y-2 text-xl font-light text-stone-600 dark:text-stone-400">
+                    <li className="flex items-start gap-3"><span className="text-liquid-sky mt-2">•</span> IP-Adresse (in anonymisierter Form)</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-sky mt-2">•</span> Uhrzeit und Datum des Zugriffs</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-sky mt-2">•</span> Browsertyp und Betriebssystem</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-sky mt-2">•</span> Referrer-URL (die zuvor besuchte Seite)</li>
+                  </ul>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 mt-4">
+                    Diese Informationen werden anonymisiert erfasst und dienen ausschließlich statistischen Auswertungen. Rückschlüsse auf Ihre Person sind nicht möglich.
+                  </p>
+                </section>
+
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Analyse- und Tracking-Tools</h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+                    Zur Analyse der Nutzung dieser Website setze ich <strong className="text-stone-900 dark:text-stone-100">Umami</strong> ein. Umami speichert keine IP-Adressen oder Cookies. Alle erfassten Daten sind anonymisiert. Da ich Umami auf meinem eigenen Server betreibe, erfolgt keine Weitergabe an Dritte. Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. f DSGVO (berechtigtes Interesse an der Analyse und Optimierung der Website).
+                  </p>
+                </section>
+
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Kontaktformular</h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+                    Wenn Sie das Kontaktformular nutzen oder per E-Mail Kontakt aufnehmen, werden Ihre Angaben zur Bearbeitung Ihrer Anfrage gespeichert. Diese Daten werden nicht an Dritte weitergegeben und nach Erfüllung des Zwecks gelöscht. Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung).
+                  </p>
+                </section>
+
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Social Media Links</h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+                    Diese Website enthält Links zu GitHub und LinkedIn. Durch das Anklicken dieser Links gelten die Datenschutzbestimmungen der jeweiligen Anbieter.
+                  </p>
+                </section>
+
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Weitergabe von Daten</h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 mb-4">Eine Weitergabe Ihrer personenbezogenen Daten erfolgt nur, wenn:</p>
+                  <ul className="space-y-2 text-xl font-light text-stone-600 dark:text-stone-400">
+                    <li className="flex items-start gap-3"><span className="text-liquid-mint mt-2">•</span> Sie nach Art. 6 Abs. 1 S. 1 lit. a DSGVO ausdrücklich eingewilligt haben,</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-mint mt-2">•</span> dies zur Vertragserfüllung gemäß Art. 6 Abs. 1 S. 1 lit. b DSGVO erforderlich ist,</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-mint mt-2">•</span> eine gesetzliche Verpflichtung nach Art. 6 Abs. 1 S. 1 lit. c DSGVO besteht, oder</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-mint mt-2">•</span> die Verarbeitung nach Art. 6 Abs. 1 S. 1 lit. f DSGVO zur Wahrung berechtigter Interessen erforderlich ist.</li>
+                  </ul>
+                </section>
+
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Ihre Rechte</h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 mb-4">Sie haben gemäß DSGVO folgende Rechte:</p>
+                  <ul className="space-y-2 text-xl font-light text-stone-600 dark:text-stone-400">
+                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 15 DSGVO: Auskunftsrecht über Ihre gespeicherten Daten</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 16 DSGVO: Recht auf Berichtigung unrichtiger Daten</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 17 DSGVO: Recht auf Löschung (soweit keine Aufbewahrungspflichten entgegenstehen)</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 18 DSGVO: Recht auf Einschränkung der Verarbeitung</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 20 DSGVO: Recht auf Datenübertragbarkeit</li>
+                    <li className="flex items-start gap-3"><span className="text-liquid-purple mt-2">•</span> Art. 21 DSGVO: Widerspruchsrecht gegen die Verarbeitung</li>
+                  </ul>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400 mt-4">
+                    Beschwerden können Sie an die zuständige Datenschutzaufsichtsbehörde richten: <a href="https://www.bfdi.bund.de/" className="text-liquid-mint hover:underline" target="_blank" rel="noopener noreferrer">bfdi.bund.de</a>
+                  </p>
+                </section>
+
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Datensicherheit</h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+                    Ich setze technische und organisatorische Maßnahmen ein, um Ihre Daten zu schützen. Dazu gehören unter anderem die SSL-Verschlüsselung. Diese Verschlüsselung erkennen Sie an dem Schloss-Symbol in der Adresszeile Ihres Browsers und an der URL, die mit &ldquo;https://&rdquo; beginnt.
+                  </p>
+                </section>
+
+                <section>
+                  <h2 className="text-3xl font-black text-stone-900 dark:text-stone-100 mb-8 uppercase tracking-tight">Änderungen</h2>
+                  <p className="text-xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
+                    Diese Datenschutzerklärung wird regelmäßig aktualisiert, um den gesetzlichen Anforderungen zu entsprechen. Die jeweils aktuelle Version finden Sie auf dieser Seite.
+                  </p>
+                  <p className="text-sm text-stone-500 dark:text-stone-400 mt-6">Letzte Aktualisierung: Mai 2025</p>
                 </section>
               </div>
             )}
@@ -120,7 +197,7 @@ export default function PrivacyPolicy() {
               <p className="text-stone-900 dark:text-stone-50 font-bold mb-4">Your connection is private and secure.</p>
               <button
                 onClick={() => {
-                  localStorage.removeItem('cookie-consent');
+                  document.cookie = 'dk0_consent_v1=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT'; localStorage.removeItem('cookie-consent');
                   window.location.reload();
                 }}
                 className="text-[10px] font-black uppercase tracking-widest border-b border-stone-300 dark:border-stone-700 pb-1 hover:text-liquid-mint transition-colors"
@@ -132,7 +209,8 @@ export default function PrivacyPolicy() {
           </div>
         </div>
       </main>
+      </div>
       <Footer />
-    </div>
+    </>
   );
 }

app/projects/[slug]/page.tsx

@@ -1,239 +0,0 @@
-"use client";
-
-import { motion } from 'framer-motion';
-import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from 'lucide-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useParams } from 'next/navigation';
-import { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
-import { useLocale, useTranslations } from "next-intl";
-
-interface Project {
-  id: number;
-  slug: string;
-  title: string;
-  description: string;
-  content: string;
-  tags: string[];
-  featured: boolean;
-  category: string;
-  date: string;
-  github?: string;
-  live?: string;
-  imageUrl?: string;
-}
-
-const ProjectDetail = () => {
-  const params = useParams();
-  const slug = params.slug as string;
-  const locale = useLocale();
-  const t = useTranslations("common");
-  const [project, setProject] = useState<Project | null>(null);
-
-  // Load project from API by slug
-  useEffect(() => {
-    const loadProject = async () => {
-      try {
-        const response = await fetch(`/api/projects/search?slug=${slug}`);
-        if (response.ok) {
-          const data = await response.json();
-          if (data.projects && data.projects.length > 0) {
-            const loadedProject = data.projects[0];
-            setProject(loadedProject);
-            
-          }
-        }
-      } catch (error) {
-        if (process.env.NODE_ENV === 'development') {
-          console.error('Error loading project:', error);
-        }
-      }
-    };
-
-    loadProject();
-  }, [slug]);
-
-  if (!project) {
-    return (
-      <div className="min-h-screen bg-[#fdfcf8] flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-stone-800 mx-auto mb-4"></div>
-          <p className="text-stone-500 font-medium">Loading project...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
-      <div className="max-w-4xl mx-auto px-4">
-        {/* Navigation */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          className="mb-8"
-        >
-          <Link
-            href={`/${locale}/projects`}
-            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
-          >
-            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
-            <span className="font-medium">{t("backToProjects")}</span>
-          </Link>
-        </motion.div>
-
-        {/* Header & Meta */}
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.1 }}
-          className="mb-12"
-        >
-          <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
-            <h1 className="text-4xl md:text-6xl font-black font-sans text-stone-900 tracking-tight leading-tight">
-              {project.title}
-            </h1>
-            <div className="flex gap-2 shrink-0 pt-2">
-                 {project.featured && (
-                    <span className="px-4 py-1.5 bg-stone-900 text-stone-50 text-xs font-bold rounded-full shadow-sm">
-                        Featured
-                    </span>
-                 )}
-                 <span className="px-4 py-1.5 bg-white border border-stone-200 text-stone-600 text-xs font-medium rounded-full shadow-sm">
-                    {project.category}
-                 </span>
-            </div>
-          </div>
-          
-          <p className="text-xl md:text-2xl text-stone-600 font-light leading-relaxed max-w-3xl mb-8">
-            {project.description}
-          </p>
-
-          <div className="flex flex-wrap items-center gap-6 text-stone-500 text-sm border-y border-stone-200 py-6">
-            <div className="flex items-center space-x-2">
-              <Calendar size={18} />
-              <span className="font-mono">{new Date(project.date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</span>
-            </div>
-            <div className="h-4 w-px bg-stone-300 hidden sm:block"></div>
-            <div className="flex flex-wrap gap-2">
-                {project.tags.map(tag => (
-                    <span key={tag} className="text-stone-700 font-medium">#{tag}</span>
-                ))}
-            </div>
-          </div>
-        </motion.div>
-
-        {/* Featured Image / Fallback */}
-        <motion.div
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.8, delay: 0.2 }}
-            className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
-        >
-             {project.imageUrl ? (
-                <Image 
-                    src={project.imageUrl} 
-                    alt={project.title} 
-                    fill
-                    unoptimized
-                    className="w-full h-full object-cover"
-                />
-             ) : (
-                <div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
-                    <span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
-                        {project.title.charAt(0)}
-                    </span>
-                </div>
-             )}
-        </motion.div>
-
-
-        {/* Content & Sidebar Layout */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
-            {/* Main Content */}
-            <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.3 }}
-            className="lg:col-span-2"
-            >
-            <div className="markdown prose prose-stone max-w-none prose-lg prose-headings:font-bold prose-headings:tracking-tight prose-a:text-stone-900 prose-a:decoration-stone-300 hover:prose-a:decoration-stone-900 prose-img:rounded-xl prose-img:shadow-lg">
-                <ReactMarkdown
-                    components={{
-                         // Custom components to ensure styling matches
-                        h1: ({children}) => <h1 className="text-3xl font-bold text-stone-900 mt-8 mb-4">{children}</h1>,
-                        h2: ({children}) => <h2 className="text-2xl font-bold text-stone-900 mt-8 mb-4">{children}</h2>,
-                        p: ({children}) => <p className="text-stone-700 leading-relaxed mb-6">{children}</p>,
-                        li: ({children}) => <li className="text-stone-700">{children}</li>,
-                        code: ({children}) => <code className="bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-sm font-mono font-medium">{children}</code>,
-                        pre: ({children}) => <pre className="bg-stone-900 text-stone-50 p-6 rounded-xl overflow-x-auto my-6 shadow-lg">{children}</pre>,
-                    }}
-                >
-                {project.content}
-                </ReactMarkdown>
-            </div>
-            </motion.div>
-
-            {/* Sidebar / Actions */}
-            <motion.div
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.8, delay: 0.4 }}
-                className="lg:col-span-1 space-y-8"
-            >
-                <div className="bg-white/50 backdrop-blur-xl border border-white/60 p-6 rounded-2xl shadow-sm sticky top-32">
-                    <h3 className="font-bold text-stone-900 mb-4 flex items-center gap-2">
-                        <Share2 size={18} />
-                        Project Links
-                    </h3>
-                    <div className="space-y-3">
-                        {project.live && project.live.trim() && project.live !== "#" ? (
-                            <a
-                            href={project.live}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center justify-between w-full px-4 py-3 bg-stone-900 text-stone-50 rounded-xl font-medium hover:bg-stone-800 hover:scale-[1.02] transition-all shadow-md group"
-                            >
-                                <span>Live Demo</span>
-                                <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
-                            </a>
-                        ) : (
-                             <div className="px-4 py-3 bg-stone-100 text-stone-400 rounded-xl font-medium text-sm text-center border border-stone-200 cursor-not-allowed">
-                                Live demo not available
-                            </div>
-                        )}
-                        
-                        {project.github && project.github.trim() && project.github !== "#" ? (
-                            <a
-                            href={project.github}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center justify-between w-full px-4 py-3 bg-white border border-stone-200 text-stone-700 rounded-xl font-medium hover:bg-stone-50 hover:text-stone-900 hover:border-stone-300 transition-all shadow-sm group"
-                            >
-                                <span>View Source</span>
-                                <GithubIcon size={18} className="group-hover:rotate-12 transition-transform" />
-                            </a>
-                        ) : null}
-                    </div>
-
-                    <div className="mt-8 pt-6 border-t border-stone-100">
-                        <h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">Tech Stack</h4>
-                        <div className="flex flex-wrap gap-2">
-                            {project.tags.map(tag => (
-                                <span key={tag} className="px-2.5 py-1 bg-stone-100 text-stone-600 text-xs font-medium rounded-md border border-stone-200">
-                                    {tag}
-                                </span>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            </motion.div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ProjectDetail;

app/projects/page.tsx

@@ -1,312 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { motion } from 'framer-motion';
-import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useLocale, useTranslations } from "next-intl";
-
-interface Project {
-  id: number;
-  slug: string;
-  title: string;
-  description: string;
-  content: string;
-  tags: string[];
-  featured: boolean;
-  category: string;
-  date: string;
-  github?: string;
-  live?: string;
-  imageUrl?: string;
-}
-
-const ProjectsPage = () => {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [filteredProjects, setFilteredProjects] = useState<Project[]>([]);
-  const [categories, setCategories] = useState<string[]>(["All"]);
-  const [selectedCategory, setSelectedCategory] = useState("All");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [mounted, setMounted] = useState(false);
-  const locale = useLocale();
-  const t = useTranslations("common");
-
-  // Load projects from API
-  useEffect(() => {
-    const loadProjects = async () => {
-      try {
-        const response = await fetch('/api/projects?published=true');
-        if (response.ok) {
-          const data = await response.json();
-          const loadedProjects = data.projects || [];
-          setProjects(loadedProjects);
-          
-          // Extract unique categories
-          const uniqueCategories = ["All", ...Array.from(new Set(loadedProjects.map((p: Project) => p.category))) as string[]];
-          setCategories(uniqueCategories);
-        }
-      } catch (error) {
-        if (process.env.NODE_ENV === 'development') {
-          console.error('Error loading projects:', error);
-        }
-      }
-    };
-
-    loadProjects();
-    setMounted(true);
-  }, []);
-
-  // Filter projects
-  useEffect(() => {
-    let result = projects;
-
-    if (selectedCategory !== "All") {
-      result = result.filter(project => project.category === selectedCategory);
-    }
-
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      result = result.filter(project => 
-        project.title.toLowerCase().includes(query) || 
-        project.description.toLowerCase().includes(query) ||
-        project.tags.some(tag => tag.toLowerCase().includes(query))
-      );
-    }
-
-    setFilteredProjects(result);
-  }, [projects, selectedCategory, searchQuery]);
-
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
-      <div className="max-w-7xl mx-auto px-4">
-        {/* Header */}
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-          className="mb-12"
-        >
-          <Link
-            href={`/${locale}`}
-            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
-          >
-            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
-            <span>{t("backToHome")}</span>
-          </Link>
-          
-          <h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
-            My Projects
-          </h1>
-          <p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">
-            Explore my portfolio of projects, from web applications to mobile apps. 
-            Each project showcases different skills and technologies.
-          </p>
-        </motion.div>
-
-        {/* Filters & Search */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.2 }}
-          className="mb-12 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center"
-        >
-          {/* Categories */}
-          <div className="flex flex-wrap gap-2">
-            {categories.map((category) => (
-              <button
-                key={category}
-                onClick={() => setSelectedCategory(category)}
-                className={`px-5 py-2 rounded-full text-sm font-medium transition-all duration-200 border ${
-                  selectedCategory === category
-                    ? 'bg-stone-800 text-stone-50 border-stone-800 shadow-md'
-                    : 'bg-white text-stone-600 border-stone-200 hover:bg-stone-50 hover:border-stone-300'
-                }`}
-              >
-                {category}
-              </button>
-            ))}
-          </div>
-
-          {/* Search */}
-          <div className="relative w-full md:w-64">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400" size={18} />
-            <input
-              type="text"
-              placeholder="Search projects..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-full text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all"
-            />
-          </div>
-        </motion.div>
-
-        {/* Projects Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {filteredProjects.map((project, index) => (
-            <motion.div
-              key={project.id}
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, delay: index * 0.1 }}
-              whileHover={{ y: -8 }}
-              className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
-            >
-              {/* Image / Fallback / Cover Area */}
-              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
-                {project.imageUrl ? (
-                  <>
-                    <Image 
-                      src={project.imageUrl}
-                      alt={project.title}
-                      fill
-                      unoptimized
-                      className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
-                    />
-                    <div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                  </>
-                ) : (
-                  <div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
-                    <div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
-                    <div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
-                    <div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
-                    
-                    <div className="relative z-10">
-                      <span className="text-7xl font-serif font-black text-stone-800/10 group-hover:text-stone-800/20 transition-all duration-700 select-none tracking-tighter">
-                        {project.title.charAt(0)}
-                      </span>
-                    </div>
-                  </div>
-                )}
-                
-                {/* Texture/Grain Overlay */}
-                <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
-
-                {/* Animated Shine Effect */}
-                <div className="absolute inset-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] pointer-events-none" />
-
-                {project.featured && (
-                  <div className="absolute top-3 left-3 z-20">
-                    <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
-                      Featured
-                    </div>
-                  </div>
-                )}
-
-                {/* Overlay Links */}
-                <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none">
-                  {project.github && (
-                    <a
-                      href={project.github}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
-                      aria-label="GitHub"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Github size={20} />
-                    </a>
-                  )}
-                  {project.live && !project.title.toLowerCase().includes('kernel panic') && (
-                    <a
-                      href={project.live}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
-                      aria-label="Live Demo"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <ExternalLink size={20} />
-                    </a>
-                  )}
-                </div>
-              </div>
-
-              <div className="p-6 flex flex-col flex-1">
-                {/* Stretched Link covering the whole card (including image area) */}
-                <Link
-                  href={`/${locale}/projects/${project.slug}`}
-                  className="absolute inset-0 z-10"
-                  aria-label={`View project ${project.title}`}
-                />
-
-                <div className="flex items-center justify-between mb-3">
-                  <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
-                    {project.title}
-                  </h3>
-                  <div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100">
-                    <Calendar size={12} />
-                    <span>{new Date(project.date).getFullYear()}</span>
-                  </div>
-                </div>
-
-                <p className="text-stone-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">
-                  {project.description}
-                </p>
-
-                <div className="flex flex-wrap gap-2 mb-6">
-                  {project.tags.slice(0, 4).map((tag) => (
-                    <span
-                      key={tag}
-                      className="px-2.5 py-1 bg-white/60 border border-stone-100 text-stone-600 text-xs font-medium rounded-md"
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                  {project.tags.length > 4 && (
-                    <span className="px-2 py-1 text-stone-400 text-xs">+ {project.tags.length - 4}</span>
-                  )}
-                </div>
-
-                <div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between relative z-20">
-                   <div className="flex gap-3">
-                      {project.github && (
-                        <a 
-                          href={project.github} 
-                          target="_blank" 
-                          rel="noopener noreferrer" 
-                          className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110" 
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <Github size={18} />
-                        </a>
-                      )}
-                      {project.live && !project.title.toLowerCase().includes('kernel panic') && (
-                         <a 
-                           href={project.live} 
-                           target="_blank" 
-                           rel="noopener noreferrer" 
-                           className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110" 
-                           onClick={(e) => e.stopPropagation()}
-                         >
-                           <ExternalLink size={18} />
-                         </a>
-                      )}
-                   </div>
-                </div>
-              </div>
-            </motion.div>
-          ))}
-        </div>
-
-        {filteredProjects.length === 0 && (
-            <div className="text-center py-20">
-                <p className="text-stone-500 text-lg">No projects found matching your criteria.</p>
-                <button 
-                    onClick={() => {setSelectedCategory("All"); setSearchQuery("");}}
-                    className="mt-4 text-stone-800 font-medium hover:underline"
-                >
-                    Clear filters
-                </button>
-            </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ProjectsPage;

components/BackgroundBlobs.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { motion } from "framer-motion";
-import { useEffect, useState } from "react";
-
-const BackgroundBlobs = () => {
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  if (!mounted) return null;
-
-  return (
-    <div className="fixed inset-0 overflow-hidden pointer-events-none z-0">
-      {/* Mint blob - top left */}
-      <motion.div
-        className="absolute top-[-10%] left-[-10%] w-[40vw] h-[40vw] bg-liquid-mint/40 rounded-full blur-[60px] opacity-70"
-        animate={{ scale: [1, 1.15, 1] }}
-        transition={{ duration: 40, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
-      />
-
-      {/* Lavender blob - top right */}
-      <motion.div
-        className="absolute top-[10%] right-[-5%] w-[35vw] h-[35vw] bg-liquid-lavender/35 rounded-full blur-[60px] opacity-70"
-        animate={{ scale: [1, 1.1, 1] }}
-        transition={{ duration: 45, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
-      />
-
-      {/* Rose blob - bottom left */}
-      <motion.div
-        className="absolute bottom-[-5%] left-[15%] w-[45vw] h-[45vw] bg-liquid-rose/35 rounded-full blur-[60px] opacity-70"
-        animate={{ scale: [1, 1.2, 1] }}
-        transition={{ duration: 50, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
-      />
-
-      {/* Peach blob - middle right */}
-      <motion.div
-        className="absolute top-[40%] right-[10%] w-[30vw] h-[30vw] bg-orange-200/30 rounded-full blur-[60px] opacity-70"
-        animate={{ scale: [1, 1.25, 1] }}
-        transition={{ duration: 55, repeat: Infinity, ease: "easeInOut", repeatType: "reverse" }}
-      />
-    </div>
-  );
-};
-
-export default BackgroundBlobs;

discord-presence-bot/.gitignore

@@ -0,0 +1 @@
+node_modules/

discord-presence-bot/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:25-alpine
+
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm ci --only=production && npm cache clean --force
+
+COPY index.js .
+
+USER node
+
+EXPOSE 3001
+
+HEALTHCHECK --interval=30s --timeout=3s --start-period=10s --retries=3 \
+  CMD wget -qO- http://localhost:3001/presence || exit 1
+
+CMD ["node", "index.js"]

discord-presence-bot/index.js

@@ -0,0 +1,182 @@
+const { Client, GatewayIntentBits, ActivityType } = require("discord.js");
+const http = require("https");
+
+const TOKEN = process.env.DISCORD_BOT_TOKEN;
+const TARGET_USER_ID = process.env.DISCORD_USER_ID || "172037532370862080";
+const PORT = parseInt(process.env.BOT_PORT || "3001", 10);
+
+if (!TOKEN) {
+  console.error("DISCORD_BOT_TOKEN is required");
+  process.exit(1);
+}
+
+const client = new Client({
+  intents: [
+    GatewayIntentBits.Guilds,
+    GatewayIntentBits.GuildPresences,
+    GatewayIntentBits.GuildMembers,
+  ],
+});
+
+const steamCoverCache = new Map();
+
+function fetchJSON(url) {
+  return new Promise((resolve, reject) => {
+    const req = http.get(url, { timeout: 5000 }, (res) => {
+      if (res.statusCode >= 300 && res.statusCode < 400 && res.headers.location) {
+        return fetchJSON(res.headers.location).then(resolve).catch(reject);
+      }
+      if (res.statusCode !== 200) {
+        res.resume();
+        return reject(new Error(`HTTP ${res.statusCode}`));
+      }
+      let data = "";
+      res.on("data", (chunk) => (data += chunk));
+      res.on("end", () => {
+        try { resolve(JSON.parse(data)); } catch (e) { reject(e); }
+      });
+    });
+    req.on("error", reject);
+    req.on("timeout", () => { req.destroy(); reject(new Error("timeout")); });
+  });
+}
+
+async function resolveGameCover(name) {
+  if (steamCoverCache.has(name)) return steamCoverCache.get(name);
+  try {
+    const search = await fetchJSON(`https://store.steampowered.com/api/storesearch/?term=${encodeURIComponent(name)}&l=english&cc=us`);
+    const items = search?.response?.items;
+    if (!items || items.length === 0) {
+      steamCoverCache.set(name, null);
+      return null;
+    }
+    const match = items.find((i) => i.name.toLowerCase() === name.toLowerCase()) || items[0];
+    const appId = match.id;
+    const details = await fetchJSON(`https://store.steampowered.com/api/appdetails/?appids=${appId}&cc=us`);
+    const appData = details?.[String(appId)]?.data;
+    const coverUrl = appData?.header_image || null;
+    steamCoverCache.set(name, coverUrl);
+    console.log(`Resolved cover for "${name}": ${coverUrl}`);
+    return coverUrl;
+  } catch (e) {
+    console.error(`Steam lookup failed for "${name}":`, e.message);
+    steamCoverCache.set(name, null);
+    return null;
+  }
+}
+
+let cachedData = {
+  discord_status: "offline",
+  listening_to_spotify: false,
+  spotify: null,
+  activities: [],
+};
+
+async function updatePresence(guild) {
+  const member = guild.members.cache.get(TARGET_USER_ID);
+  if (!member || !member.presence) return;
+
+  const presence = member.presence;
+  cachedData.discord_status = presence.status || "offline";
+
+  const activities = presence.activities
+    ? presence.activities.filter((a) => a.type !== ActivityType.Custom)
+    : [];
+
+  const entries = [];
+  for (const a of activities) {
+    const entry = {
+      name: a.name,
+      type: a.type,
+      details: a.details || null,
+      state: a.state || null,
+      image: null,
+      applicationId: a.applicationId || null,
+    };
+
+    if (a.applicationId && a.assets?.largeImage) {
+      const imgKey = a.assets.largeImage;
+      entry.image = imgKey.startsWith("mp:external")
+        ? `https://media.discordapp.net/${imgKey.replace("mp:", "")}`
+        : `https://cdn.discordapp.com/app-assets/${a.applicationId}/${imgKey}.png`;
+    } else if (a.type === ActivityType.Playing && !entry.image) {
+      const steamCover = await resolveGameCover(a.name);
+      if (steamCover) entry.image = steamCover;
+    }
+
+    if (a.assets) {
+      entry.assets = {
+        large_image: a.assets.largeImage || null,
+        large_text: a.assets.largeText || null,
+        small_image: a.assets.smallImage || null,
+        small_text: a.assets.smallText || null,
+      };
+    }
+    if (a.timestamps) {
+      entry.timestamps = {
+        start: a.timestamps.start?.toISOString() || null,
+        end: a.timestamps.end?.toISOString() || null,
+      };
+    }
+    entries.push(entry);
+  }
+
+  cachedData.activities = entries;
+
+  const spotifyActivity = activities.find((a) => a.type === ActivityType.Listening && a.name === "Spotify");
+
+  if (spotifyActivity && spotifyActivity.syncId) {
+    cachedData.listening_to_spotify = true;
+    cachedData.spotify = {
+      song: spotifyActivity.details || "",
+      artist: spotifyActivity.state ? spotifyActivity.state.replace(/; /g, "; ") : "",
+      album: spotifyActivity.assets?.largeText || "",
+      album_art_url: spotifyActivity.assets?.largeImage
+        ? `https://i.scdn.co/image/${spotifyActivity.assets.largeImage.replace("spotify:", "")}`
+        : null,
+      track_id: spotifyActivity.syncId || null,
+    };
+  } else {
+    cachedData.listening_to_spotify = false;
+    cachedData.spotify = null;
+  }
+}
+
+async function updateAll() {
+  for (const guild of client.guilds.cache.values()) {
+    await updatePresence(guild);
+  }
+}
+
+client.on("clientReady", () => {
+  console.log(`Bot online as ${client.user.tag}`);
+  client.user.setActivity("Watching Presence", { type: ActivityType.Watching });
+  for (const guild of client.guilds.cache.values()) {
+    guild.members.fetch(TARGET_USER_ID).then(() => {
+      console.log(`Found user ${TARGET_USER_ID} in guild ${guild.name}`);
+      updateAll();
+    }).catch((err) => {
+      console.error(`Could not fetch user ${TARGET_USER_ID} in guild ${guild.name}:`, err.message);
+    });
+  }
+});
+
+client.on("presenceUpdate", () => {
+  updateAll();
+});
+
+const server = require("http").createServer((req, res) => {
+  if (req.method === "GET" && req.url === "/presence") {
+    res.writeHead(200, { "Content-Type": "application/json" });
+    res.end(JSON.stringify({ data: cachedData }));
+  } else {
+    res.writeHead(404);
+    res.end("Not found");
+  }
+});
+
+server.listen(PORT, () => {
+  console.log(`HTTP endpoint listening on port ${PORT}`);
+});
+
+client.login(TOKEN);

discord-presence-bot/package-lock.json

@@ -0,0 +1,324 @@
+{
+  "name": "discord-presence-bot",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "discord-presence-bot",
+      "version": "1.0.0",
+      "dependencies": {
+        "discord.js": "^14.18.0"
+      }
+    },
+    "node_modules/@discordjs/builders": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@discordjs/builders/-/builders-1.14.1.tgz",
+      "integrity": "sha512-gSKkhXLqs96TCzk66VZuHHl8z2bQMJFGwrXC0f33ngK+FLNau4hU1PYny3DNJfNdSH+gVMzE85/d5FQ2BpcNwQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@discordjs/formatters": "^0.6.2",
+        "@discordjs/util": "^1.2.0",
+        "@sapphire/shapeshift": "^4.0.0",
+        "discord-api-types": "^0.38.40",
+        "fast-deep-equal": "^3.1.3",
+        "ts-mixer": "^6.0.4",
+        "tslib": "^2.6.3"
+      },
+      "engines": {
+        "node": ">=16.11.0"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/@discordjs/collection": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@discordjs/collection/-/collection-1.5.3.tgz",
+      "integrity": "sha512-SVb428OMd3WO1paV3rm6tSjM4wC+Kecaa1EUGX7vc6/fddvw/6lg90z4QtCqm21zvVe92vMMDt9+DkIvjXImQQ==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=16.11.0"
+      }
+    },
+    "node_modules/@discordjs/formatters": {
+      "version": "0.6.2",
+      "resolved": "https://registry.npmjs.org/@discordjs/formatters/-/formatters-0.6.2.tgz",
+      "integrity": "sha512-y4UPwWhH6vChKRkGdMB4odasUbHOUwy7KL+OVwF86PvT6QVOwElx+TiI1/6kcmcEe+g5YRXJFiXSXUdabqZOvQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "discord-api-types": "^0.38.33"
+      },
+      "engines": {
+        "node": ">=16.11.0"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/@discordjs/rest": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@discordjs/rest/-/rest-2.6.1.tgz",
+      "integrity": "sha512-wwQdgjeaoYFiaG+atbqx6aJDpqW7JHAo0HrQkBTbYzM3/PJ3GweQIpgElNcGZ26DCUOXMyawYd0YF7vtr+fZXg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@discordjs/collection": "^2.1.1",
+        "@discordjs/util": "^1.2.0",
+        "@sapphire/async-queue": "^1.5.3",
+        "@sapphire/snowflake": "^3.5.5",
+        "@vladfrangu/async_event_emitter": "^2.4.6",
+        "discord-api-types": "^0.38.40",
+        "magic-bytes.js": "^1.13.0",
+        "tslib": "^2.6.3",
+        "undici": "6.24.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/@discordjs/rest/node_modules/@discordjs/collection": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@discordjs/collection/-/collection-2.1.1.tgz",
+      "integrity": "sha512-LiSusze9Tc7qF03sLCujF5iZp7K+vRNEDBZ86FT9aQAv3vxMLihUvKvpsCWiQ2DJq1tVckopKm1rxomgNUc9hg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/@discordjs/rest/node_modules/@sapphire/snowflake": {
+      "version": "3.5.5",
+      "resolved": "https://registry.npmjs.org/@sapphire/snowflake/-/snowflake-3.5.5.tgz",
+      "integrity": "sha512-xzvBr1Q1c4lCe7i6sRnrofxeO1QTP/LKQ6A6qy0iB4x5yfiSfARMEQEghojzTNALDTcv8En04qYNIco9/K9eZQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=v14.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/@discordjs/util": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@discordjs/util/-/util-1.2.0.tgz",
+      "integrity": "sha512-3LKP7F2+atl9vJFhaBjn4nOaSWahZ/yWjOvA4e5pnXkt2qyXRCHLxoBQy81GFtLGCq7K9lPm9R517M1U+/90Qg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "discord-api-types": "^0.38.33"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/@discordjs/ws": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@discordjs/ws/-/ws-1.2.3.tgz",
+      "integrity": "sha512-wPlQDxEmlDg5IxhJPuxXr3Vy9AjYq5xCvFWGJyD7w7Np8ZGu+Mc+97LCoEc/+AYCo2IDpKioiH0/c/mj5ZR9Uw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@discordjs/collection": "^2.1.0",
+        "@discordjs/rest": "^2.5.1",
+        "@discordjs/util": "^1.1.0",
+        "@sapphire/async-queue": "^1.5.2",
+        "@types/ws": "^8.5.10",
+        "@vladfrangu/async_event_emitter": "^2.2.4",
+        "discord-api-types": "^0.38.1",
+        "tslib": "^2.6.2",
+        "ws": "^8.17.0"
+      },
+      "engines": {
+        "node": ">=16.11.0"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/@discordjs/ws/node_modules/@discordjs/collection": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@discordjs/collection/-/collection-2.1.1.tgz",
+      "integrity": "sha512-LiSusze9Tc7qF03sLCujF5iZp7K+vRNEDBZ86FT9aQAv3vxMLihUvKvpsCWiQ2DJq1tVckopKm1rxomgNUc9hg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/@sapphire/async-queue": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@sapphire/async-queue/-/async-queue-1.5.5.tgz",
+      "integrity": "sha512-cvGzxbba6sav2zZkH8GPf2oGk9yYoD5qrNWdu9fRehifgnFZJMV+nuy2nON2roRO4yQQ+v7MK/Pktl/HgfsUXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=v14.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/@sapphire/shapeshift": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@sapphire/shapeshift/-/shapeshift-4.0.0.tgz",
+      "integrity": "sha512-d9dUmWVA7MMiKobL3VpLF8P2aeanRTu6ypG2OIaEv/ZHH/SUQ2iHOVyi5wAPjQ+HmnMuL0whK9ez8I/raWbtIg==",
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3",
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">=v16"
+      }
+    },
+    "node_modules/@sapphire/snowflake": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@sapphire/snowflake/-/snowflake-3.5.3.tgz",
+      "integrity": "sha512-jjmJywLAFoWeBi1W7994zZyiNWPIiqRRNAmSERxyg93xRGzNYvGjlZ0gR6x0F4gPRi2+0O6S71kOZYyr3cxaIQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=v14.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "25.6.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.6.0.tgz",
+      "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.19.0"
+      }
+    },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@vladfrangu/async_event_emitter": {
+      "version": "2.4.7",
+      "resolved": "https://registry.npmjs.org/@vladfrangu/async_event_emitter/-/async_event_emitter-2.4.7.tgz",
+      "integrity": "sha512-Xfe6rpCTxSxfbswi/W/Pz7zp1WWSNn4A0eW4mLkQUewCrXXtMj31lCg+iQyTkh/CkusZSq9eDflu7tjEDXUY6g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=v14.0.0",
+        "npm": ">=7.0.0"
+      }
+    },
+    "node_modules/discord-api-types": {
+      "version": "0.38.47",
+      "resolved": "https://registry.npmjs.org/discord-api-types/-/discord-api-types-0.38.47.tgz",
+      "integrity": "sha512-XgXQodHQBAE6kfD7kMvVo30863iHX1LHSqNq6MGUTDwIFCCvHva13+rwxyxVXDqudyApMNAd32PGjgVETi5rjA==",
+      "license": "MIT",
+      "workspaces": [
+        "scripts/actions/documentation"
+      ]
+    },
+    "node_modules/discord.js": {
+      "version": "14.26.3",
+      "resolved": "https://registry.npmjs.org/discord.js/-/discord.js-14.26.3.tgz",
+      "integrity": "sha512-XEKtYn28YFsiJ5l4fLRyikdbo6RD5oFyqfVHQlvXz2104JhH/E8slN28dbky05w3DCrJcNVWvhVvcJCTSl/KIg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@discordjs/builders": "^1.14.1",
+        "@discordjs/collection": "1.5.3",
+        "@discordjs/formatters": "^0.6.2",
+        "@discordjs/rest": "^2.6.1",
+        "@discordjs/util": "^1.2.0",
+        "@discordjs/ws": "^1.2.3",
+        "@sapphire/snowflake": "3.5.3",
+        "discord-api-types": "^0.38.40",
+        "fast-deep-equal": "3.1.3",
+        "lodash.snakecase": "4.1.1",
+        "magic-bytes.js": "^1.13.0",
+        "tslib": "^2.6.3",
+        "undici": "6.24.1"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/discordjs/discord.js?sponsor"
+      }
+    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
+      "license": "MIT"
+    },
+    "node_modules/lodash": {
+      "version": "4.18.1",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.18.1.tgz",
+      "integrity": "sha512-dMInicTPVE8d1e5otfwmmjlxkZoUpiVLwyeTdUsi/Caj/gfzzblBcCE5sRHV/AsjuCmxWrte2TNGSYuCeCq+0Q==",
+      "license": "MIT"
+    },
+    "node_modules/lodash.snakecase": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/lodash.snakecase/-/lodash.snakecase-4.1.1.tgz",
+      "integrity": "sha512-QZ1d4xoBHYUeuouhEq3lk3Uq7ldgyFXGBhg04+oRLnIz8o9T65Eh+8YdroUwn846zchkA9yDsDl5CVVaV2nqYw==",
+      "license": "MIT"
+    },
+    "node_modules/magic-bytes.js": {
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/magic-bytes.js/-/magic-bytes.js-1.13.0.tgz",
+      "integrity": "sha512-afO2mnxW7GDTXMm5/AoN1WuOcdoKhtgXjIvHmobqTD1grNplhGdv3PFOyjCVmrnOZBIT/gD/koDKpYG+0mvHcg==",
+      "license": "MIT"
+    },
+    "node_modules/ts-mixer": {
+      "version": "6.0.4",
+      "resolved": "https://registry.npmjs.org/ts-mixer/-/ts-mixer-6.0.4.tgz",
+      "integrity": "sha512-ufKpbmrugz5Aou4wcr5Wc1UUFWOLhq+Fm6qa6P0w0K5Qw2yhaUoiWszhCVuNQyNwrlGiscHOmqYoAox1PtvgjA==",
+      "license": "MIT"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/undici": {
+      "version": "6.24.1",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-6.24.1.tgz",
+      "integrity": "sha512-sC+b0tB1whOCzbtlx20fx3WgCXwkW627p4EA9uM+/tNNPkSS+eSEld6pAs9nDv7WbY1UUljBMYPtu9BCOrCWKA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.19.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.19.2.tgz",
+      "integrity": "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg==",
+      "license": "MIT"
+    },
+    "node_modules/ws": {
+      "version": "8.20.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.20.0.tgz",
+      "integrity": "sha512-sAt8BhgNbzCtgGbt2OxmpuryO63ZoDk/sqaB/znQm94T4fCEsy/yV+7CdC1kJhOU9lboAEU7R3kquuycDoibVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

discord-presence-bot/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "discord-presence-bot",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js"
+  },
+  "dependencies": {
+    "discord.js": "^14.18.0"
+  }
+}

docker-compose.production.yml

@@ -103,6 +103,34 @@ services:
           memory: 128M
           cpus: '0.1'
 
+  discord-bot:
+    build:
+      context: ./discord-presence-bot
+      dockerfile: Dockerfile
+    container_name: portfolio-discord-bot
+    restart: unless-stopped
+    environment:
+      - DISCORD_BOT_TOKEN=${DISCORD_BOT_TOKEN}
+      - DISCORD_USER_ID=${DISCORD_USER_ID:-172037532370862080}
+      - BOT_PORT=3001
+    networks:
+      - portfolio_net
+      - proxy
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:3001/presence"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 15s
+    deploy:
+      resources:
+        limits:
+          memory: 128M
+          cpus: '0.25'
+        reservations:
+          memory: 64M
+          cpus: '0.1'
+
 volumes:
   portfolio_data:
     driver: local

docker-compose.yml

@@ -87,6 +87,34 @@ services:
       retries: 5
       start_period: 30s
 
+  discord-bot:
+    build:
+      context: ./discord-presence-bot
+      dockerfile: Dockerfile
+    container_name: portfolio-discord-bot
+    restart: unless-stopped
+    environment:
+      - DISCORD_BOT_TOKEN=${DISCORD_BOT_TOKEN}
+      - DISCORD_USER_ID=${DISCORD_USER_ID:-172037532370862080}
+      - BOT_PORT=3001
+    networks:
+      - portfolio_net
+      - proxy
+    healthcheck:
+      test: ["CMD", "wget", "-qO-", "http://localhost:3001/presence"]
+      interval: 30s
+      timeout: 5s
+      retries: 3
+      start_period: 15s
+    deploy:
+      resources:
+        limits:
+          memory: 128M
+          cpus: '0.25'
+        reservations:
+          memory: 64M
+          cpus: '0.1'
+
 volumes:
   portfolio_data:
     driver: local

e2e/activity-feed.spec.ts

@@ -1,32 +0,0 @@
-import { test, expect } from "@playwright/test";
-
-test.describe("ActivityFeed reload rendering", () => {
-  test("feed stays visible and dark after reload", async ({ page }) => {
-    await page.goto("/en", { waitUntil: "domcontentloaded" });
-
-    const feed = page.locator('[class*="bg-black/95"]').filter({ hasText: "Live Activity" }).first();
-    await expect(feed).toBeVisible({ timeout: 15000 });
-
-    const initialBox = await feed.boundingBox();
-    expect(initialBox).not.toBeNull();
-    expect(initialBox!.width).toBeGreaterThan(200);
-    expect(initialBox!.height).toBeGreaterThan(30);
-
-    const initialOpacity = await feed.evaluate((el) => getComputedStyle(el).opacity);
-    expect(Number(initialOpacity)).toBeGreaterThan(0.5);
-
-    await page.reload({ waitUntil: "domcontentloaded" });
-
-    const feedAfter = page.locator('[class*="bg-black/95"]').filter({ hasText: "Live Activity" }).first();
-    await expect(feedAfter).toBeVisible({ timeout: 15000 });
-
-    const afterBox = await feedAfter.boundingBox();
-    expect(afterBox).not.toBeNull();
-    expect(afterBox!.width).toBeGreaterThan(200);
-    expect(afterBox!.height).toBeGreaterThan(30);
-
-    const afterOpacity = await feedAfter.evaluate((el) => getComputedStyle(el).opacity);
-    expect(Number(afterOpacity)).toBeGreaterThan(0.5);
-  });
-});
-

env.example

@@ -30,6 +30,10 @@ N8N_WEBHOOK_URL=https://n8n.dk0.dev
 N8N_SECRET_TOKEN=your-n8n-secret-token
 N8N_API_KEY=your-n8n-api-key
 
+# Discord Presence Bot (replaces Lanyard)
+DISCORD_BOT_TOKEN=your-discord-bot-token
+DISCORD_USER_ID=172037532370862080
+
 # Directus CMS (for i18n messages & content pages)
 DIRECTUS_URL=https://cms.dk0.dev
 DIRECTUS_STATIC_TOKEN=your-static-token-here

eslint.config.mjs

@@ -19,6 +19,7 @@ const eslintConfig = [
       "coverage/**",
       "scripts/**",
       "next-env.d.ts",
+      "discord-presence-bot/**",
     ],
   },
   ...compat.extends("next/core-web-vitals", "next/typescript"),

lib/directus.ts

@@ -937,63 +937,6 @@ export async function getProjectBySlug(
   }
 }
 
-// Snippets Types
-export interface Snippet {
-  id: string;
-  title: string;
-  category: string;
-  code: string;
-  description: string;
-  language: string;
-}
-
-/**
- * Get Snippets from Directus
- */
-export async function getSnippets(limit = 10, featured?: boolean): Promise<Snippet[] | null> {
-  const filters = ['status: { _eq: "published" }'];
-  if (featured !== undefined) {
-    filters.push(`featured: { _eq: ${featured} }`);
-  }
-  const filterString = `filter: { _and: [{ ${filters.join(' }, { ')} }] }`;
-
-  const query = `
-    query {
-      snippets(
-        ${filterString}
-        limit: ${limit}
-      ) {
-        id
-        title
-        category
-        code
-        description
-        language
-      }
-    }
-  `;
-
-  try {
-    const result = await directusRequest(
-      '',
-      { body: { query } }
-    );
-
-    interface SnippetsResult {
-      snippets: Snippet[];
-    }
-    const snippets = (result as SnippetsResult | null)?.snippets;
-    if (!snippets || snippets.length === 0) {
-      return null;
-    }
-
-    return snippets;
-  } catch (_error) {
-    console.error('Failed to fetch snippets:', _error);
-    return null;
-  }
-}
-
 // ─── Hardcover → Directus sync helpers ───────────────────────────────────────
 
 export interface BookReviewCreate {

lib/sitemap.ts

@@ -36,15 +36,15 @@ export async function getSitemapEntries(): Promise<SitemapEntry[]> {
   const baseUrl = getBaseUrl();
   const nowIso = new Date().toISOString();
 
-  const staticPaths = ["", "/projects", "/legal-notice", "/privacy-policy"];
+  const staticPaths = ["", "/projects", "/books", "/legal-notice", "/privacy-policy"];
   const staticEntries: SitemapEntry[] = locales.flatMap((locale) =>
     staticPaths.map((p) => {
       const path = p === "" ? `/${locale}` : `/${locale}${p}`;
       return {
         url: `${baseUrl}${path}`,
         lastModified: nowIso,
-        changefreq: p === "" ? "weekly" : p === "/projects" ? "weekly" : "yearly",
-        priority: p === "" ? 1.0 : p === "/projects" ? 0.8 : 0.5,
+changefreq: p === "" ? "weekly" : (p === "/projects" || p === "/books") ? "weekly" : "yearly",
+            priority: p === "" ? 1.0 : (p === "/projects" || p === "/books") ? 0.8 : 0.5,
       };
     }),
   );

lib/translations-loader.ts

@@ -2,9 +2,6 @@ import { getLocalizedMessage } from '@/lib/i18n-loader';
 import type {
   NavTranslations,
   FooterTranslations,
-  HeroTranslations,
-  AboutTranslations,
-  ProjectsTranslations,
   ContactTranslations,
   ConsentTranslations,
 } from '@/types/translations';
@@ -55,92 +52,6 @@ export async function getFooterTranslations(locale: string): Promise<FooterTrans
   };
 }
 
-export async function getHeroTranslations(locale: string): Promise<HeroTranslations> {
-  const keys = [
-    'home.hero.description',
-    'home.hero.ctaWork',
-    'home.hero.ctaContact',
-    'home.hero.features.f1',
-    'home.hero.features.f2',
-    'home.hero.features.f3',
-  ];
-
-  const values = await Promise.all(keys.map(key => getLocalizedMessage(key, locale)));
-
-  return {
-    description: values[0],
-    ctaWork: values[1],
-    ctaContact: values[2],
-    features: {
-      f1: values[3],
-      f2: values[4],
-      f3: values[5],
-    },
-  };
-}
-
-export async function getAboutTranslations(locale: string): Promise<AboutTranslations> {
-  const keys = [
-    'home.about.title',
-    'home.about.p1',
-    'home.about.p2',
-    'home.about.p3',
-    'home.about.funFactTitle',
-    'home.about.funFactBody',
-    'home.about.techStackTitle',
-    'home.about.techStack.categories.frontendMobile',
-    'home.about.techStack.categories.backendDevops',
-    'home.about.techStack.categories.toolsAutomation',
-    'home.about.techStack.categories.securityAdmin',
-    'home.about.techStack.items.selfHostedServices',
-    'home.about.hobbiesTitle',
-    'home.about.hobbies.selfHosting',
-    'home.about.hobbies.gaming',
-    'home.about.hobbies.gameServers',
-    'home.about.hobbies.jogging',
-  ];
-
-  const values = await Promise.all(keys.map(key => getLocalizedMessage(key, locale)));
-
-  return {
-    title: values[0],
-    p1: values[1],
-    p2: values[2],
-    p3: values[3],
-    funFactTitle: values[4],
-    funFactBody: values[5],
-    techStackTitle: values[6],
-    techStack: {
-      categories: {
-        frontendMobile: values[7],
-        backendDevops: values[8],
-        toolsAutomation: values[9],
-        securityAdmin: values[10],
-      },
-      items: {
-        selfHostedServices: values[11],
-      },
-    },
-    hobbiesTitle: values[12],
-    hobbies: {
-      selfHosting: values[13],
-      gaming: values[14],
-      gameServers: values[15],
-      jogging: values[16],
-    },
-  };
-}
-
-export async function getProjectsTranslations(locale: string): Promise<ProjectsTranslations> {
-  const [title, subtitle, viewAll] = await Promise.all([
-    getLocalizedMessage('home.projects.title', locale),
-    getLocalizedMessage('home.projects.subtitle', locale),
-    getLocalizedMessage('home.projects.viewAll', locale),
-  ]);
-
-  return { title, subtitle, viewAll };
-}
-
 export async function getContactTranslations(locale: string): Promise<ContactTranslations> {
   const keys = [
     'home.contact.title',

messages/de.json

@@ -26,72 +26,131 @@
   },
   "home": {
     "hero": {
-      "badge": "Student & Self-Hoster",
-      "line1": "Building",
-      "line2": "Stuff.",
-      "features": {
-        "f1": "Next.js & Flutter",
-        "f2": "Docker Swarm & CI/CD",
-        "f3": "Self-Hosted Infrastruktur"
-      },
-      "description": "Ich bin Dennis – Student aus Osnabrück und leidenschaftlicher Self-Hoster. Ich entwickle Full-Stack Apps und sorge am liebsten selbst dafür, dass sie auf meiner eigenen Infrastruktur perfekt laufen.",
-      "ctaWork": "Meine Projekte",
-      "ctaContact": "Kontakt"
+      "kicker": "Dennis Konkol — Osnabrück",
+      "claim": "Ich hoste mein halbes Leben selbst. Den Rest programmiere ich.",
+      "intro": "IT-Admin in Osnabrück und Masterstudent. Ab Februar 2027 kümmere ich mich hauptberuflich um Microsoft 365, bis dahin um meine Masterarbeit.",
+      "countdown": "{days, plural, one {Noch # Tag.} other {Noch # Tage.}}",
+      "ctaWork": "Projekte ansehen",
+      "ctaContact": "Schreib mir"
     },
-    "about": {
-      "title": "Hinter den Kulissen",
-      "p1": "Schon seit ich meinen ersten eigenen Server aufgesetzt habe, lässt mich das Thema Infrastruktur nicht mehr los. Als Student in Osnabrück verbringe ich meine Zeit am liebsten damit, moderne Web-Apps mit Next.js zu bauen oder mobile Lösungen mit Flutter zu entwickeln.",
-      "p2": "Aber für mich hört es nicht beim Code auf: Ich liebe es, meine eigenen Docker-Cluster zu managen, CI/CD-Pipelines zu optimieren und sicherzustellen, dass alles stabil und sicher läuft. DevOps ist für mich kein Job-Titel, sondern eine Lebenseinstellung.",
-      "p3": "Wenn die Server einmal ohne mich klarkommen, findet man mich beim Laufen durch Osnabrück, beim Gaming oder beim Experimentieren mit neuen Automationen in n8n.",
-      "funFactTitle": "Hardcore analog",
-      "funFactBody": "Trotz Cloud und Automatisierung: Meine wichtigsten Pläne entstehen immer noch mit Füller auf Papier. Das ist mein Anker im digitalen Chaos.",
-      "techStackTitle": "Mein Tech Stack",
-      "hobbiesTitle": "Wenn ich nicht code",
-      "techStack": {
-        "categories": {
-          "frontendMobile": "Frontend & Mobile",
-          "backendDevops": "Backend & DevOps",
-          "toolsAutomation": "Tools & Automation",
-          "securityAdmin": "Security & Admin"
+    "tisch": {
+      "title": "Der Tisch.",
+      "allProjects": "Alle Projekte",
+      "hintBoard": "Alles hier lässt sich anfassen. Werfen, stapeln, antippen für Details.",
+      "hintDeck": "Wisch die Karten zur Seite, tipp für Details.",
+      "tidy": "Aufräumen",
+      "mess": "Durcheinander",
+      "flip": "antippen für Details",
+      "details": "Zum Projekt",
+      "prev": "Vorherige Karte",
+      "next": "Nächste Karte",
+      "ticketTitle": "Masterarbeit · Abgabe 15.02.2027",
+      "ticketDays": "Tage bis zur Abgabe",
+      "ticketJob": "ab 02/2027 fest als M365-Administrator",
+      "ticketStub": "Jetzt",
+      "serverTitle": "Was bei mir läuft",
+      "servers": {
+        "ingress": {
+          "name": "netcup · Eingang",
+          "detail": "Traefik, Dokploy, diese Seite"
         },
-        "items": {
-          "selfHostedServices": "Self-hosted Services"
+        "mail": {
+          "name": "IONOS · Post und Fotos",
+          "detail": "mailcow, Immich"
+        },
+        "home": {
+          "name": "Zuhause · Raspberry Pi",
+          "detail": "Home Assistant, Paperless"
         }
       },
-      "hobbies": {
-        "selfHosting": "Self-Hosting & DevOps",
-        "gaming": "Gaming",
-        "gameServers": "Game-Server einrichten",
-        "jogging": "Joggen um den Kopf freizubekommen und aktiv bleiben"
+      "serverNote": "Gesichert mit CrowdSec, tägliche Backups mit restic.",
+      "bookLabel": "Lese gerade",
+      "bookFallback": "Zur Bibliothek",
+      "photoCaption": "Das bin ich.",
+      "chatCard": "Frag mich etwas.",
+      "chatCardHint": "KI-Chat öffnen",
+      "sticker": "Läuft auf eigenen Servern."
+    },
+    "windows": {
+      "close": "Schließen",
+      "minimize": "Ablegen",
+      "openWindows": "Offene Fenster",
+      "projectPage": "Projektseite",
+      "source": "Quellcode",
+      "live": "Live ansehen",
+      "stack": "Technik",
+      "year": "Jahr",
+      "now": {
+        "title": "jetzt.txt · Stand Oktober 2026",
+        "days": "Tage bis zur Abgabe der Masterarbeit",
+        "study": {
+          "label": "Studium",
+          "text": "Federated Reinforcement Learning für einen Logistik-Hub, Abgabe Mitte Februar 2027"
+        },
+        "work": {
+          "label": "Arbeit",
+          "text": "IT bei einem Unternehmen in Osnabrück, ab Februar 2027 fest als Microsoft-365-Administrator"
+        },
+        "side": {
+          "label": "Nebenher",
+          "text": "nightly, eine App für Gedanken zwischen 2 und 5 Uhr nachts"
+        }
       },
-      "currentlyReading": {
-        "title": "Aktuell am Lesen",
-        "progress": "Fortschritt"
+      "server": {
+        "title": "server · alle grün",
+        "headline": "Drei Rechner, ein VPN."
       },
-      "readBooks": {
-        "title": "Gelesene Bücher",
-        "finishedAt": "Beendet am",
-        "showMore": "{count} weitere anzeigen",
-        "showLess": "Weniger anzeigen",
-        "empty": "In Hardcover fertig gelesene Bücher erscheinen hier automatisch."
+      "read": {
+        "title": "lesen · aus Hardcover",
+        "progress": "gelesen",
+        "empty": "Gerade liegt kein Buch auf dem Nachttisch.",
+        "library": "Zur Bibliothek"
       },
-      "activity": {
-        "idleStatus": "System im Leerlauf / Geist aktiv",
-        "codingNow": "Gerade am Coden",
-        "gaming": "Am Zocken",
-        "listening": "Hört gerade",
-        "inGame": "Im Spiel"
+      "about": {
+        "title": "über mich",
+        "p1": "Aufgewachsen bin ich in Lingen, inzwischen wohne ich in Osnabrück. Angefangen hat alles mit einem Raspberry Pi und der Frage, ob ich meine Fotos nicht selbst speichern kann. Daraus sind drei Server geworden.",
+        "p2": "Wenn ich nicht am Rechner sitze, bin ich dienstags bei Body Attack, im Winter auf der Piste oder mit Freunden bei einem Brettspiel.",
+        "facts": {
+          "laptop": {
+            "label": "Arbeitsrechner",
+            "value": "MacBook Pro M4 Pro"
+          },
+          "pc": {
+            "label": "Zum Spielen",
+            "value": "PC mit RTX 3080"
+          },
+          "study": {
+            "label": "Studium",
+            "value": "Master Informatik"
+          },
+          "languages": {
+            "label": "Sprachen",
+            "value": "Deutsch, Englisch"
+          }
+        }
+      },
+      "chat": {
+        "title": "frag mich · KI",
+        "welcome": "Hi! Frag mich etwas über Dennis, seine Projekte oder sein Setup.",
+        "consent": "Der Chat läuft über einen KI-Dienst in meinem n8n. Deine Nachrichten werden dafür verarbeitet und kurz gespeichert. Erst wenn du zustimmst, wird etwas gesendet.",
+        "allow": "Chat erlauben",
+        "placeholder": "Deine Frage …",
+        "send": "Senden",
+        "error": "Gerade keine Verbindung. Versuch es gleich noch mal.",
+        "thinking": "Antwort wird geschrieben",
+        "note": "Antworten kommen von einer KI und können danebenliegen."
+      },
+      "contact": {
+        "title": "kontakt",
+        "body": "Für Projekte, Fragen zu meinem Setup oder einfach so. Ich antworte normalerweise innerhalb von ein, zwei Tagen.",
+        "copy": "Adresse kopieren",
+        "copied": "Kopiert",
+        "form": "Zum Formular"
       }
     },
-    "projects": {
-      "title": "Ausgewählte Projekte",
-      "subtitle": "Eine Auswahl an Projekten, an denen ich gearbeitet habe – von Web-Apps bis zu Experimenten.",
-      "featured": "Featured",
-      "viewAll": "Alle Projekte ansehen"
-    },
     "contact": {
-      "title": "Kontakt",
-      "subtitle": "Du willst zusammenarbeiten oder hast Fragen zu meinen Projekten? Schreib mir gerne!",
+      "title": "Schreib mir.",
+      "subtitle": "Für Projekte, Fragen zu meinem Setup oder einfach so. Ich antworte normalerweise innerhalb von ein, zwei Tagen.",
       "getInTouch": "Melde dich",
       "getInTouchBody": "Ich bin immer offen für neue Chancen, spannende Projekte oder einfach einen Tech-Talk.",
       "info": {
@@ -151,12 +210,31 @@
     }
   },
   "footer": {
-    "role": "Software Engineer",
-    "madeIn": "Made in Germany",
+    "role": "IT & Self-Hosting",
+    "madeIn": "selbst gehostet in Deutschland",
     "legalNotice": "Impressum",
     "privacyPolicy": "Datenschutz",
     "privacySettings": "Datenschutz-Einstellungen",
     "privacySettingsTitle": "Datenschutz-Banner wieder anzeigen",
-    "builtWith": "Built with"
+    "builtWith": "Gebaut mit Next.js und Directus, läuft auf meinen eigenen Servern.",
+    "aiDisclaimer": "Einige Inhalte dieser Seite können KI-generiert sein.",
+    "backToTop": "Nach oben",
+    "systemsOnline": "Systeme online"
+  },
+  "notFound": {
+    "title": "Seite nicht gefunden",
+    "description": "Der gesuchte Inhalt wurde verschoben, gelöscht oder hat nie existiert.",
+    "returnHome": "Zurück zur Startseite",
+    "goBack": "Zurück",
+    "exploreWork": "Arbeiten entdecken",
+    "exploreWorkDesc": "Vielleicht findest du, was du suchst, in meinem Projektarchiv?",
+    "viewProjects": "Projekte ansehen",
+    "errorReport": "Fehlerbericht"
+  },
+  "books": {
+    "title": "Bibliothek",
+    "subtitle": "Bücher, die meine Denkweise verändert und mein Wissen erweitert haben.",
+    "backHome": "Zurück",
+    "empty": "Noch keine Bücher."
   }
 }

messages/en.json

@@ -23,76 +23,134 @@
     "acceptSelected": "Accept selected",
     "rejectAll": "Reject all",
     "hide": "Hide"
-  }
-  ,
+  },
   "home": {
     "hero": {
-      "badge": "Student & Self-Hoster",
-      "line1": "Building",
-      "line2": "Stuff.",
-      "features": {
-        "f1": "Next.js & Flutter",
-        "f2": "Docker Swarm & CI/CD",
-        "f3": "Self-Hosted Infrastructure"
-      },
-      "description": "I'm Dennis – a student from Germany and a passionate self-hoster. I build full-stack applications and love the challenge of managing the infrastructure they run on.",
-      "ctaWork": "View Projects",
-      "ctaContact": "Get in touch"
+      "kicker": "Dennis Konkol — Osnabrück, Germany",
+      "claim": "I self-host half my life. The rest I code.",
+      "intro": "IT admin in Osnabrück and master's student. From February 2027 I look after Microsoft 365 full-time, until then my master's thesis.",
+      "countdown": "{days, plural, one {# day to go.} other {# days to go.}}",
+      "ctaWork": "See projects",
+      "ctaContact": "Write me"
     },
-    "about": {
-      "title": "Behind the Code",
-      "p1": "Ever since I set up my first home server, I've been hooked on infrastructure. Currently studying in Osnabrück, I split my time between developing modern web apps with Next.js and building mobile experiences with Flutter.",
-      "p2": "For me, it doesn't stop at the code. I genuinely enjoy managing my own Docker clusters, optimizing CI/CD pipelines, and making sure everything is stable and secure. DevOps isn't just a part of my job – it's how I think about building things.",
-      "p3": "When the servers are running smoothly, you'll find me jogging through the city, gaming, or tinkering with new automation workflows in n8n.",
-      "funFactTitle": "Hardcore Analog",
-      "funFactBody": "Despite my love for automation and the cloud, my most important ideas are still born on paper with a fountain pen. It's my way of staying grounded.",
-      "techStackTitle": "My Tech Stack",
-      "hobbiesTitle": "When I'm Not Coding",
-      "techStack": {
-        "categories": {
-          "frontendMobile": "Frontend & Mobile",
-          "backendDevops": "Backend & DevOps",
-          "toolsAutomation": "Tools & Automation",
-          "securityAdmin": "Security & Admin"
+    "tisch": {
+      "title": "The desk.",
+      "allProjects": "All projects",
+      "hintBoard": "Everything here can be touched. Throw it, stack it, tap for details.",
+      "hintDeck": "Swipe the cards aside, tap for details.",
+      "tidy": "Tidy up",
+      "mess": "Mess it up",
+      "flip": "tap for details",
+      "details": "Open project",
+      "prev": "Previous card",
+      "next": "Next card",
+      "ticketTitle": "Master's thesis · due 15 Feb 2027",
+      "ticketDays": "days until submission",
+      "ticketJob": "from 02/2027: M365 administrator",
+      "ticketStub": "Now",
+      "serverTitle": "What I run",
+      "servers": {
+        "ingress": {
+          "name": "netcup · front door",
+          "detail": "Traefik, Dokploy, this site"
         },
-        "items": {
-          "selfHostedServices": "Self-hosted services"
+        "mail": {
+          "name": "IONOS · mail and photos",
+          "detail": "mailcow, Immich"
+        },
+        "home": {
+          "name": "Home · Raspberry Pi",
+          "detail": "Home Assistant, Paperless"
         }
       },
-      "hobbies": {
-        "selfHosting": "Self-Hosting & DevOps",
-        "gaming": "Gaming",
-        "gameServers": "Setting up game servers",
-        "jogging": "Jogging to clear my mind and stay active"
+      "serverNote": "Guarded by CrowdSec, daily backups with restic.",
+      "bookLabel": "Reading now",
+      "bookFallback": "To the library",
+      "photoCaption": "That's me.",
+      "chatCard": "Ask me something.",
+      "chatCardHint": "Open AI chat",
+      "sticker": "Runs on my own servers."
+    },
+    "windows": {
+      "close": "Close",
+      "minimize": "Minimize",
+      "openWindows": "Open windows",
+      "projectPage": "Project page",
+      "source": "Source",
+      "live": "See it live",
+      "stack": "Stack",
+      "year": "Year",
+      "now": {
+        "title": "now.txt · October 2026",
+        "days": "days until my master's thesis is due",
+        "study": {
+          "label": "Study",
+          "text": "Federated reinforcement learning for a logistics hub, due mid-February 2027"
+        },
+        "work": {
+          "label": "Work",
+          "text": "IT at a company in Osnabrück, from February 2027 full-time as Microsoft 365 administrator"
+        },
+        "side": {
+          "label": "On the side",
+          "text": "nightly, an app for thoughts between 2 and 5 a.m."
+        }
       },
-      "currentlyReading": {
-        "title": "Currently Reading",
-        "progress": "Progress"
+      "server": {
+        "title": "servers · all green",
+        "headline": "Three machines, one VPN."
       },
-      "readBooks": {
-        "title": "Read",
-        "finishedAt": "Finished",
-        "showMore": "{count} more",
-        "showLess": "Show less",
-        "empty": "Books finished in Hardcover will appear here automatically."
+      "read": {
+        "title": "reading · from Hardcover",
+        "progress": "read",
+        "empty": "No book on the nightstand right now.",
+        "library": "To the library"
       },
-      "activity": {
-        "idleStatus": "System Idle / Mind Active",
-        "codingNow": "Coding Now",
-        "gaming": "Gaming",
-        "listening": "Listening",
-        "inGame": "In Game"
+      "about": {
+        "title": "about me",
+        "p1": "I grew up in Lingen and now live in Osnabrück. It all started with a Raspberry Pi and the question whether I could store my photos myself. That turned into three servers.",
+        "p2": "When I'm not at the computer, I'm at Body Attack on Tuesdays, on the slopes in winter, or playing board games with friends.",
+        "facts": {
+          "laptop": {
+            "label": "Work machine",
+            "value": "MacBook Pro M4 Pro"
+          },
+          "pc": {
+            "label": "For games",
+            "value": "PC with RTX 3080"
+          },
+          "study": {
+            "label": "Study",
+            "value": "Master's in computer science"
+          },
+          "languages": {
+            "label": "Languages",
+            "value": "German, English"
+          }
+        }
+      },
+      "chat": {
+        "title": "ask me · AI",
+        "welcome": "Hi! Ask me anything about Dennis, his projects or his setup.",
+        "consent": "The chat runs through an AI service in my n8n. Your messages are processed and briefly stored for that. Nothing is sent until you agree.",
+        "allow": "Allow chat",
+        "placeholder": "Your question …",
+        "send": "Send",
+        "error": "No connection right now. Try again in a moment.",
+        "thinking": "Writing a reply",
+        "note": "Answers come from an AI and can be wrong."
+      },
+      "contact": {
+        "title": "contact",
+        "body": "For projects, questions about my setup or just because. I usually reply within a day or two.",
+        "copy": "Copy address",
+        "copied": "Copied",
+        "form": "To the form"
       }
     },
-    "projects": {
-      "title": "Selected Works",
-      "subtitle": "A collection of projects I've worked on, ranging from web applications to experiments.",
-      "featured": "Featured",
-      "viewAll": "View All Projects"
-    },
     "contact": {
-      "title": "Contact Me",
-      "subtitle": "Interested in working together or have questions about my projects? Feel free to reach out!",
+      "title": "Write me.",
+      "subtitle": "For projects, questions about my setup or just because. I usually reply within a day or two.",
       "getInTouch": "Get In Touch",
       "getInTouchBody": "I'm always available to discuss new opportunities, interesting projects, or simply chat about technology and innovation.",
       "info": {
@@ -130,8 +188,7 @@
         "characters": "{count} characters"
       }
     }
-  }
-  ,
+  },
   "projects": {
     "shared": {
       "featured": "Featured"
@@ -151,16 +208,33 @@
       "viewSource": "View Source",
       "techStack": "Tech Stack"
     }
-  }
-  ,
+  },
   "footer": {
-    "role": "Software Engineer",
-    "madeIn": "Made in Germany",
+    "role": "IT & self-hosting",
+    "madeIn": "self-hosted in Germany",
     "legalNotice": "Legal notice",
     "privacyPolicy": "Privacy policy",
     "privacySettings": "Privacy settings",
     "privacySettingsTitle": "Show privacy settings banner again",
-    "builtWith": "Built with"
+    "builtWith": "Built with Next.js and Directus, running on my own servers.",
+    "aiDisclaimer": "Some content on this site may be AI-assisted.",
+    "backToTop": "Back to top",
+    "systemsOnline": "Systems Online"
+  },
+  "notFound": {
+    "title": "Page not Found",
+    "description": "The content you are looking for has been moved, deleted, or never existed.",
+    "returnHome": "Return Home",
+    "goBack": "Go Back",
+    "exploreWork": "Explore Work",
+    "exploreWorkDesc": "Maybe what you need is in my project archive?",
+    "viewProjects": "View Projects",
+    "errorReport": "Error Report"
+  },
+  "books": {
+    "title": "Library",
+    "subtitle": "Books that shaped my mindset and expanded my horizons.",
+    "backHome": "Back Home",
+    "empty": "No books yet."
   }
 }
-

n8n-workflows/book-review.json

@@ -0,0 +1,219 @@
+{
+  "name": "Book Review",
+  "nodes": [
+    {
+      "parameters": {
+        "rule": {
+          "interval": [
+            {
+              "triggerAtHour": 19
+            }
+          ]
+        }
+      },
+      "type": "n8n-nodes-base.scheduleTrigger",
+      "typeVersion": 1.3,
+      "position": [
+        0,
+        -192
+      ],
+      "id": "f0c86dde-aa19-4440-b17c-c572b582da5e",
+      "name": "Schedule Trigger"
+    },
+    {
+      "parameters": {
+        "method": "POST",
+        "url": "https://api.hardcover.app/v1/graphql",
+        "authentication": "predefinedCredentialType",
+        "nodeCredentialType": "httpBearerAuth",
+        "sendHeaders": true,
+        "headerParameters": {
+          "parameters": [
+            {
+              "name": "content-type",
+              "value": "application/json"
+            }
+          ]
+        },
+        "sendBody": true,
+        "bodyParameters": {
+          "parameters": [
+            {
+              "name": "query",
+              "value": "query GetFinishedBooks {   me {     user_books(where: {status_id: {_eq: 3}}, limit: 5) {       book {         id         title         contributions {           author {             name           }         }         images {           url         }       }       last_read_date       updated_at     }   } }"
+            }
+          ]
+        },
+        "options": {}
+      },
+      "type": "n8n-nodes-base.httpRequest",
+      "typeVersion": 4.4,
+      "position": [
+        224,
+        -192
+      ],
+      "id": "e5c28f64-29ed-40ae-804e-896c10f3bc58",
+      "name": "HTTP Request",
+      "credentials": {
+        "httpBearerAuth": {
+          "id": "Kmf2fBCFkuRuWWZa",
+          "name": "Hardcover"
+        }
+      }
+    },
+    {
+      "parameters": {
+        "jsCode": "const responseData = $input.first().json;\nconst meData = responseData?.data?.me;\nconst userBooks =\n  (Array.isArray(meData) && meData[0]?.user_books) || meData?.user_books || [];\n\nconst newBooks = [];\n\nfor (const ub of userBooks) {\n  const check = await this.helpers.httpRequest({\n    method: \"GET\",\n    url:\n      \"https://cms.dk0.dev/items/book_reviews?filter[hardcover_id][_eq]=\" +\n      ub.book.id +\n      \"&fields=id,translations.id&limit=1\",\n    headers: {\n      Authorization: \"Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB\",\n    },\n  });\n\n  const existing = check.data?.[0];\n  const hasReview =\n    existing && existing.translations && existing.translations.length > 0;\n\n  if (!hasReview) {\n    newBooks.push({\n      json: {\n        hardcover_id: String(ub.book.id),\n        directus_id: existing ? existing.id : null,\n        title: ub.book.title,\n        author: ub.book.contributions?.[0]?.author?.name ?? \"Unknown\",\n        image: ub.book.images?.[0]?.url ?? null,\n        finished_at: ub.last_read_date ?? ub.updated_at ?? null,\n        already_in_directus: !!existing,\n      },\n    });\n  }\n}\n\nreturn newBooks.length > 0 ? newBooks[0] : [{ json: { skip: true } }];\n"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        448,
+        -192
+      ],
+      "id": "60380362-e954-40ee-b0d0-7bc1edbaf9d3",
+      "name": "Filter books"
+    },
+    {
+      "parameters": {
+        "conditions": {
+          "options": {
+            "caseSensitive": true,
+            "leftValue": "",
+            "typeValidation": "strict",
+            "version": 3
+          },
+          "conditions": [
+            {
+              "id": "b356ade3-5cf0-40dd-bb47-e977f354e803",
+              "leftValue": "={{ $json.skip }}",
+              "rightValue": "={{ $json.skip }}",
+              "operator": {
+                "type": "boolean",
+                "operation": "true",
+                "singleValue": true
+              }
+            }
+          ],
+          "combinator": "and"
+        },
+        "options": {}
+      },
+      "type": "n8n-nodes-base.if",
+      "typeVersion": 2.3,
+      "position": [
+        672,
+        -192
+      ],
+      "id": "45f65c65-ae6a-46b0-9d96-46f0a32e59db",
+      "name": "If"
+    },
+    {
+      "parameters": {
+        "jsCode": "const book = $input.first().json;\nif (book.skip) return [{ json: { skip: true } }];\n\nconst parts = [];\nparts.push(\"Du hilfst jemandem eine Buchbewertung zu schreiben.\");\nparts.push(\"Das Buch ist \" + book.title + \" von \" + book.author + \".\");\nparts.push(\"Erstelle 4 kurze spezifische Fragen zum Buch.\");\nparts.push(\"Die Fragen sollen helfen eine Review zu schreiben.\");\nparts.push(\"Frage auf Deutsch.\");\nparts.push(\"Antworte NUR als JSON Array mit 4 Strings. Verwende keine Bindestriche, Em-Dashes oder Gedankenstriche (–, —, -).\");\nconst prompt = parts.join(\" \");\n\nconst aiResponse = await this.helpers.httpRequest({\n  method: \"POST\",\n  url: \"https://openrouter.ai/api/v1/chat/completions\",\n  headers: {\n    \"Content-Type\": \"application/json\",\n    Authorization: \"Bearer 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\",\n  },\n  body: {\n    model: \"openrouter/free\",\n    messages: [{ role: \"user\", content: prompt }],\n  },\n});\n\nconst aiText = aiResponse.choices?.[0]?.message?.content ?? \"[]\";\nconst match = aiText.match(/\\[[\\s\\S]*\\]/);\n\nconst f1 = \"Wie hat dir das Buch gefallen?\";\nconst f2 = \"Was war der beste Teil?\";\nconst f3 = \"Was hast du mitgenommen?\";\nconst f4 = \"Wem empfiehlst du es?\";\nconst fallback = [f1, f2, f3, f4];\n\nconst questions = match ? JSON.parse(match[0]) : fallback;\n\nreturn [{ json: { ...book, questions } }];\n"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        896,
+        -192
+      ],
+      "id": "b56ab681-90d8-4376-9408-dc3302ab55bd",
+      "name": "ai"
+    },
+    {
+      "parameters": {
+        "chatId": "145931600",
+        "text": "={{ '📚 ' + $json.title + ' von ' + $json.author + '\\n\\nBeantworte bitte:\\n\\n1. ' + $json.questions[0] + '\\n2. ' + $json.questions[1] + '\\n3. ' + $json.questions[2] + '\\n4. ' + $json.questions[3] + '\\n\\n⭐ Bewertung (1-5)?\\n\\nAntworte so (kopiere und ergänze):\\n\\n/review' + $json.hardcover_id + ' Hier deine Antworten als Text' }}",
+        "additionalFields": {}
+      },
+      "type": "n8n-nodes-base.telegram",
+      "typeVersion": 1.2,
+      "position": [
+        1136,
+        -208
+      ],
+      "id": "13087afe-8a1d-457f-a1f1-e0aa64fc0e26",
+      "name": "Send a text message",
+      "webhookId": "eaa44b55-b3b1-4747-9b6a-dfc920910b4b",
+      "credentials": {
+        "telegramApi": {
+          "id": "ADurvy9EKUDzbDdq",
+          "name": "DK0_Server"
+        }
+      }
+    }
+  ],
+  "pinData": {},
+  "connections": {
+    "Schedule Trigger": {
+      "main": [
+        [
+          {
+            "node": "HTTP Request",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "HTTP Request": {
+      "main": [
+        [
+          {
+            "node": "Filter books",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Filter books": {
+      "main": [
+        [
+          {
+            "node": "If",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "If": {
+      "main": [
+        [],
+        [
+          {
+            "node": "ai",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "ai": {
+      "main": [
+        [
+          {
+            "node": "Send a text message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "active": true,
+  "settings": {
+    "executionOrder": "v1",
+    "binaryMode": "separate",
+    "availableInMCP": false
+  },
+  "versionId": "4c605d70-0428-4611-9ad8-d9452c2660a7",
+  "meta": {
+    "templateCredsSetupCompleted": true,
+    "instanceId": "cb28e4db755465d5826da179e87f69603d81f833414cc52c327be9183a217b8d"
+  },
+  "id": "FDQ5Qmk9POy4Ajdd",
+  "tags": []
+}

n8n-workflows/currently-reading.json

@@ -0,0 +1,141 @@
+{
+  "name": "reading",
+  "nodes": [
+    {
+      "parameters": {
+        "path": "/hardcover/currently-reading",
+        "responseMode": "responseNode",
+        "options": {}
+      },
+      "type": "n8n-nodes-base.webhook",
+      "typeVersion": 2.1,
+      "position": [
+        0,
+        0
+      ],
+      "id": "3e611a99-cbf7-48a6-b75b-f136ac76055f",
+      "name": "Webhook",
+      "webhookId": "02c226fd-2d1a-450c-9941-ff438dc5c987"
+    },
+    {
+      "parameters": {
+        "method": "POST",
+        "url": "https://api.hardcover.app/v1/graphql",
+        "authentication": "genericCredentialType",
+        "genericAuthType": "httpBearerAuth",
+        "sendQuery": true,
+        "queryParameters": {
+          "parameters": [
+            {}
+          ]
+        },
+        "sendHeaders": true,
+        "headerParameters": {
+          "parameters": [
+            {
+              "name": "content-type",
+              "value": "application/json"
+            }
+          ]
+        },
+        "sendBody": true,
+        "bodyParameters": {
+          "parameters": [
+            {
+              "name": "query",
+              "value": "query GetCurrentlyReading { me { user_books(where: {status_id: {_eq: 2}}) { user_book_reads(limit: 1, order_by: {started_at: desc}) { progress } edition { title image { url } book { contributions { author { name } } } } } } }"
+            }
+          ]
+        },
+        "options": {}
+      },
+      "type": "n8n-nodes-base.httpRequest",
+      "typeVersion": 4.3,
+      "position": [
+        288,
+        0
+      ],
+      "id": "b2a74fcb-93a9-4a28-905f-076a51a80a98",
+      "name": "HTTP Request",
+      "credentials": {
+        "httpBearerAuth": {
+          "id": "Kmf2fBCFkuRuWWZa",
+          "name": "Hardcover"
+        }
+      }
+    },
+    {
+      "parameters": {
+        "jsCode": "// Hardcover API Response kommt als GraphQL Response\n// Die Response ist ein Array: [{ data: { me: [{ user_books: [...] }] } }]\nconst graphqlResponse = $input.all()[0].json;\n\n// Extrahiere die Daten - Response-Struktur: [{ data: { me: [{ user_books: [...] }] } }]\nconst responseData = Array.isArray(graphqlResponse) ? graphqlResponse[0] : graphqlResponse;\nconst meData = responseData?.data?.me;\nconst userBooks = (Array.isArray(meData) && meData[0]?.user_books) || meData?.user_books || [];\n\nif (!userBooks || userBooks.length === 0) {\n  return {\n    json: {\n      currentlyReading: null\n    }\n  };\n}\n\n// Sortiere nach Fortschritt, falls mehrere Bücher vorhanden sind\nconst sortedBooks = userBooks.sort((a, b) => {\n  const progressA = a.user_book_reads?.[0]?.progress || 0;\n  const progressB = b.user_book_reads?.[0]?.progress || 0;\n  return progressB - progressA; // Höchster zuerst\n});\n\n// Formatiere alle Bücher\nconst formattedBooks = sortedBooks.map(book => {\n  const edition = book.edition || {};\n  const bookData = edition.book || {};\n  const contributions = bookData.contributions || [];\n  const authors = contributions\n    .filter(c => c.author && c.author.name)\n    .map(c => c.author.name);\n  \n  const readData = book.user_book_reads?.[0] || {};\n  const progress = readData.progress || 0;\n  const image = edition.image?.url || null;\n\n  return {\n    title: edition.title || 'Unknown Title',\n    authors: authors.length > 0 ? authors : ['Unknown Author'],\n    image: image,\n    progress: Math.round(progress) || 0, // Progress ist bereits in Prozent (z.B. 65.75)\n    startedAt: readData.started_at || null,\n  };\n});\n\n// Gib alle Bücher zurück\nreturn {\n  json: {\n    currentlyReading: formattedBooks.length > 0 ? formattedBooks : null\n  }\n};"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        592,
+        0
+      ],
+      "id": "eff96166-8be2-4ece-b338-2b4dec1ee26a",
+      "name": "Code in JavaScript"
+    },
+    {
+      "parameters": {
+        "options": {}
+      },
+      "type": "n8n-nodes-base.respondToWebhook",
+      "typeVersion": 1.5,
+      "position": [
+        944,
+        0
+      ],
+      "id": "80c59480-69db-4ecb-80f4-ddeec2be8376",
+      "name": "Respond to Webhook"
+    }
+  ],
+  "pinData": {},
+  "connections": {
+    "Webhook": {
+      "main": [
+        [
+          {
+            "node": "HTTP Request",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "HTTP Request": {
+      "main": [
+        [
+          {
+            "node": "Code in JavaScript",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Code in JavaScript": {
+      "main": [
+        [
+          {
+            "node": "Respond to Webhook",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "active": true,
+  "settings": {
+    "executionOrder": "v1",
+    "availableInMCP": false
+  },
+  "versionId": "63a2c985-4b40-44ca-a40d-e7048ac5619b",
+  "meta": {
+    "instanceId": "cb28e4db755465d5826da179e87f69603d81f833414cc52c327be9183a217b8d"
+  },
+  "id": "P2itbbCCQVa0C0HTIVGvy",
+  "tags": []
+}

n8n-workflows/finished-books.json

@@ -0,0 +1,219 @@
+{
+  "name": "finishedBooks",
+  "nodes": [
+    {
+      "parameters": {
+        "rule": {
+          "interval": [
+            {
+              "triggerAtHour": 6
+            }
+          ]
+        }
+      },
+      "type": "n8n-nodes-base.scheduleTrigger",
+      "typeVersion": 1.3,
+      "position": [
+        0,
+        -64
+      ],
+      "id": "7170586a-8b80-4614-b186-1b661276fd30",
+      "name": "Schedule Trigger"
+    },
+    {
+      "parameters": {
+        "operation": "getAll",
+        "collection": "book_reviews",
+        "itemFields": [
+          "hardcover_id"
+        ]
+      },
+      "type": "@directus/n8n-nodes-directus.directus",
+      "typeVersion": 1,
+      "position": [
+        224,
+        -64
+      ],
+      "id": "145cc646-45d1-4ce7-9f04-77debe503ec6",
+      "name": "Get_Existing_Books",
+      "credentials": {
+        "directusApi": {
+          "id": "QnVxKFcSXqpaG86u",
+          "name": "Directus"
+        }
+      }
+    },
+    {
+      "parameters": {
+        "method": "POST",
+        "url": "https://api.hardcover.app/v1/graphql",
+        "authentication": "genericCredentialType",
+        "genericAuthType": "httpBearerAuth",
+        "sendQuery": true,
+        "queryParameters": {
+          "parameters": [
+            {}
+          ]
+        },
+        "sendHeaders": true,
+        "headerParameters": {
+          "parameters": [
+            {
+              "name": "content-type",
+              "value": "application/json"
+            }
+          ]
+        },
+        "sendBody": true,
+        "bodyParameters": {
+          "parameters": [
+            {
+              "name": "query",
+              "value": "query GetReadBooks { me { user_books(where: {status_id: {_eq: 3}}, limit: 10,      order_by: {last_read_date: desc}) { last_read_date rating edition { title image { url } book {      id contributions { author { name } } } } } } }"
+            }
+          ]
+        },
+        "options": {}
+      },
+      "type": "n8n-nodes-base.httpRequest",
+      "typeVersion": 4.3,
+      "position": [
+        448,
+        -64
+      ],
+      "id": "c2e0f7e4-a30e-4083-b4a9-a1a7e9f8ba3f",
+      "name": "hardcover",
+      "credentials": {
+        "httpBearerAuth": {
+          "id": "Kmf2fBCFkuRuWWZa",
+          "name": "Hardcover"
+        }
+      }
+    },
+    {
+      "parameters": {
+        "jsCode": "// 1. Alle gelesenen Bücher von Hardcover holen\nconst hcData = $input.all()[0]?.json;\nconst hcBooks = hcData?.data?.me?.[0]?.user_books || [];\n// 2. Alle bereits in Directus existierenden IDs holen\nlet existingIds = [];\ntry{\n  const existingItems = $('Get_Existing_Books').all();\n      existingIds = existingItems.map(item => item.json.hardcover_id?.toString());\n   } catch (e) {\n   // Falls noch gar keine Bücher in Directus sind, ist die Liste einfach leer\n    existingIds = [];\n}\n// 3. Filtern: Nur Bücher behalten, deren ID noch NICHT in Directus ist\nconst newBooks = hcBooks.filter(entry => {\n  const id = entry.edition.book.id.toString();\n  return !existingIds.includes(id);\n});\n// 4. Die neuen Bücher für Directus formatieren\nreturn newBooks.map(entry => {\n  const ed = entry.edition || {};\n  return {\n    json: {\n    book_title: ed.title,\n    book_author: ed.book?.contributions?.[0]?.author?.name || \"Unbekannter Autor\",\n    book_image: ed.image?.url || null,\n    hardcover_id: ed.book?.id?.toString(),\n    finished_at: entry.last_read_date,\n    rating: entry.rating || null,\n    status: \"draft\"\n    }\n  };\n});"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        672,
+        -64
+      ],
+      "id": "a0bc4f01-264f-46c3-a667-359983109a72",
+      "name": "removeDuplicates"
+    },
+    {
+      "parameters": {
+        "collection": "book_reviews",
+        "collectionFields": {
+          "fields": {
+            "field": [
+              {
+                "name": "status",
+                "value": "={{ $json.status }}"
+              },
+              {
+                "name": "book_title",
+                "value": "={{ $json.book_title }}"
+              },
+              {
+                "name": "book_author",
+                "value": "={{ $json.book_author }}"
+              },
+              {
+                "name": "rating",
+                "value": "={{ $json.rating }}"
+              },
+              {
+                "name": "book_image",
+                "value": "={{ $json.book_image }}"
+              },
+              {
+                "name": "hardcover_id",
+                "value": "={{ $json.hardcover_id }}"
+              },
+              {
+                "name": "finished_at",
+                "value": "={{ $json.finished_at }}"
+              }
+            ]
+          }
+        }
+      },
+      "type": "@directus/n8n-nodes-directus.directus",
+      "typeVersion": 1,
+      "position": [
+        896,
+        -64
+      ],
+      "id": "0f3db869-1832-4041-8d1d-2a3d834922f0",
+      "name": "Create an item",
+      "credentials": {
+        "directusApi": {
+          "id": "QnVxKFcSXqpaG86u",
+          "name": "Directus"
+        }
+      }
+    }
+  ],
+  "pinData": {},
+  "connections": {
+    "Schedule Trigger": {
+      "main": [
+        [
+          {
+            "node": "Get_Existing_Books",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Get_Existing_Books": {
+      "main": [
+        [
+          {
+            "node": "hardcover",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "hardcover": {
+      "main": [
+        [
+          {
+            "node": "removeDuplicates",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "removeDuplicates": {
+      "main": [
+        [
+          {
+            "node": "Create an item",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "active": true,
+  "settings": {
+    "executionOrder": "v1",
+    "availableInMCP": false
+  },
+  "versionId": "2fa60722-a717-44da-9047-c867a440609c",
+  "meta": {
+    "templateCredsSetupCompleted": true,
+    "instanceId": "cb28e4db755465d5826da179e87f69603d81f833414cc52c327be9183a217b8d"
+  },
+  "id": "sbpapdCb7OBoRdc_3j0VL",
+  "tags": []
+}

n8n-workflows/telegram-cms.json

@@ -0,0 +1,740 @@
+{
+  "name": "🎯 ULTIMATE Telegram CMS COMPLETE",
+  "nodes": [
+    {
+      "parameters": {
+        "updates": [
+          "message",
+          "callback_query"
+        ],
+        "additionalFields": {}
+      },
+      "type": "n8n-nodes-base.telegramTrigger",
+      "typeVersion": 1.2,
+      "position": [
+        0,
+        240
+      ],
+      "id": "telegram-trigger-001",
+      "name": "Telegram Trigger",
+      "webhookId": "telegram-cms-webhook-001",
+      "credentials": {
+        "telegramApi": {
+          "id": "ADurvy9EKUDzbDdq",
+          "name": "DK0_Server"
+        }
+      }
+    },
+    {
+      "parameters": {
+        "jsCode": "const input = $input.first().json;\nconst token = '8166414331:AAGNQ6fn2juD5esaTRxPjtTdSMkwq_oASIc';\n\nif (input.callback_query) {\n  const cbq = input.callback_query;\n  const chatId = cbq.message.chat.id;\n  const data = cbq.data;\n  const callbackQueryId = cbq.id;\n  \n  if (token) {\n    try {\n      await this.helpers.httpRequest({ \n        method: 'POST', \n        url: 'https://api.telegram.org/bot' + token + '/answerCallbackQuery', \n        headers: { 'Content-Type': 'application/json' }, \n        body: { callback_query_id: callbackQueryId } \n      });\n    } catch(e) {}\n  }\n  \n  const parts = data.split(':');\n  const action = parts[0];\n  \n  if (action === 'start') return [{ json: { action: 'start', chatId } }];\n  if (action === 'stats') return [{ json: { action: 'stats', chatId } }];\n  if (action === 'list') return [{ json: { action: 'list', type: parts[1], page: parseInt(parts[2] || '1'), chatId } }];\n  if (action === 'preview') return [{ json: { action: 'preview', collectionType: parts[1], id: parts[2], chatId } }];\n  if (action === 'publish') return [{ json: { action: 'publish', collectionType: parts[1], id: parts[2], chatId } }];\n  if (action === 'delete') return [{ json: { action: 'delete', collectionType: parts[1], id: parts[2], chatId } }];\n  if (action === 'review_info') return [{ json: { action: 'review_info', id: parts[1], chatId } }];\n  \n  return [{ json: { action: 'unknown', chatId } }];\n}\n\nconst text = input.message?.text ?? '';\nconst chatId = input.message?.chat?.id;\nlet match;\n\nif (text === '/start') return [{ json: { action: 'start', chatId } }];\nif (text === '/stats') return [{ json: { action: 'stats', chatId } }];\n\nmatch = text.match(/^\\/list\\s+(projects|books)(?:\\s+(\\d+))?/);\nif (match) return [{ json: { action: 'list', type: match[1], page: parseInt(match[2] || '1'), chatId } }];\n\nmatch = text.match(/^\\/preview\\s*(project|book)?(\\d+)/);\nif (match) {\n  const typePrefix = match[1] === 'project' ? 'projects' : match[1] === 'book' ? 'book_reviews' : 'projects';\n  return [{ json: { action: 'preview', collectionType: typePrefix, id: match[2], chatId } }];\n}\n\nmatch = text.match(/^\\/search\\s+(.+)/);\nif (match) return [{ json: { action: 'search', query: match[1].trim(), chatId } }];\n\nmatch = text.match(/^\\/publish\\s*(project|book)?(\\d+)/);\nif (match) {\n  const typePrefix = match[1] === 'book' ? 'books' : 'projects';\n  return [{ json: { action: 'publish', collectionType: typePrefix, id: match[2], chatId } }];\n}\n\nmatch = text.match(/^\\/delete\\s*(project|book)?(\\d+)/);\nif (match) {\n  const typePrefix = match[1] === 'book' ? 'books' : 'projects';\n  return [{ json: { action: 'delete', collectionType: typePrefix, id: match[2], chatId } }];\n}\n\n// .review HC_ID [RATING] -> starts review process with AI questions\nmatch = text.match(/^\\.review\\s+(\\d+)(?:\\s+([1-5]))?/);\nif (match) return [{ json: { action: 'review_info', hardcoverId: match[1], rating: match[2] ? parseInt(match[2]) : 0, chatId } }];\n\n// .answer BOOK_ID RATING your answers -> submit review answers\nmatch = text.match(/^\\.answer\\s+(\\d+)\\s+([1-5])\\s+(.+)/);\nif (match) return [{ json: { action: 'answer_review', bookId: match[1], rating: parseInt(match[2]), answers: match[3].trim(), chatId } }];\n\nmatch = text.match(/^\\.refine\\s+(\\d+)\\s+(.+)/);\nif (match) return [{ json: { action: 'refine_review', id: match[1], feedback: match[2].trim(), chatId } }];\n\nreturn [{ json: { action: 'unknown', chatId } }];\n"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        240,
+        240
+      ],
+      "id": "global-parser-001",
+      "name": "Global Parser"
+    },
+    {
+      "parameters": {
+        "rules": {
+          "values": [
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "start",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "start"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "list",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "list"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "search",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "search"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "stats",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "stats"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "preview",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "preview"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "publish",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "publish"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "delete",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "delete"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "delete_review",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "delete_review"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "answer_review",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "answer_review"
+            },
+            {
+              "conditions": {
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                },
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "refine_review",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and"
+              },
+              "renameOutput": true,
+              "outputKey": "refine_review"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "unknown",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "unknown"
+            },
+            {
+              "conditions": {
+                "conditions": [
+                  {
+                    "leftValue": "={{ $json.action }}",
+                    "rightValue": "review_info",
+                    "operator": {
+                      "type": "string",
+                      "operation": "equals"
+                    }
+                  }
+                ],
+                "combinator": "and",
+                "options": {
+                  "caseSensitive": true,
+                  "leftValue": ""
+                }
+              },
+              "renameOutput": true,
+              "outputKey": "review_info"
+            }
+          ]
+        },
+        "options": {}
+      },
+      "type": "n8n-nodes-base.switch",
+      "typeVersion": 3.2,
+      "position": [
+        480,
+        240
+      ],
+      "id": "router-001",
+      "name": "Command Router"
+    },
+    {
+      "parameters": {
+        "jsCode": "\ntry {\n  var chatId = $input.first().json.chatId;\n  var projectsResp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/projects?aggregate[count]=id&filter[status][_eq]=draft', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var draftProjects = (projectsResp && projectsResp.data && projectsResp.data[0] && projectsResp.data[0].count && projectsResp.data[0].count.id) || 0;\n  var booksResp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews?aggregate[count]=id&filter[status][_eq]=draft', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var draftBooks = (booksResp && booksResp.data && booksResp.data[0] && booksResp.data[0].count && booksResp.data[0].count.id) || 0;\n  var message = '\\u{1F3AF} <b>DK0 Portfolio CMS</b>\\n\\n\\u{1F4CA} <b>Status:</b>\\n\\u2022 Draft Projects: ' + draftProjects + '\\n\\u2022 Draft Reviews: ' + draftBooks + '\\n\\nTap a button to navigate.';\n  var keyboard = [\n    [{ text: '\\u{1F4CB} Projects', callback_data: 'list:projects:1' }, { text: '\\u{1F4DA} Books', callback_data: 'list:books:1' }],\n    [{ text: '\\u{1F4CA} Stats', callback_data: 'stats' }]\n  ];\n  return [{ json: { chatId: chatId, message: message, parseMode: 'HTML', keyboard: keyboard } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Error loading dashboard: ' + error.message, parseMode: 'HTML' } }];\n}\n"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        -120
+      ],
+      "id": "dashboard-001",
+      "name": "Dashboard Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "\ntry {\n  var input = $input.first().json;\n  var type = input.type;\n  var page = input.page || 1;\n  var chatId = input.chatId;\n  var limit = 5;\n  var offset = (page - 1) * limit;\n  var collection = type === 'projects' ? 'projects' : 'book_reviews';\n  var fields = type === 'projects' ? 'id,slug,category,status,date_created,translations.*' : 'id,book_title,rating,status,finished_at';\n  var url = 'https://cms.dk0.dev/items/' + collection + '?limit=' + limit + '&offset=' + offset + '&sort=' + (type === 'projects' ? '-date_created' : '-finished_at') + '&fields=' + fields;\n  var response = await this.helpers.httpRequest({ method: 'GET', url: url, headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var items = (response && response.data) || [];\n  if (items.length === 0) {\n    return [{ json: { chatId: chatId, message: 'No ' + type + ' found.', parseMode: 'HTML', keyboard: [[{ text: '\\u{1F3E0} Home', callback_data: 'start' }]] } }];\n  }\n  var message = '<b>' + type.toUpperCase() + ' (Page ' + page + ')</b>\\n\\n';\n  var keyboard = [];\n  items.forEach(function(item, idx) {\n    var num = idx + 1;\n    var displayNum = (offset || 0) + num;\n    if (type === 'projects') {\n      var title = (item.translations && item.translations[0] && item.translations[0].title) || item.slug || 'Untitled';\n      message += displayNum + '. <b>' + title + '</b>\\n   ' + (item.category || 'N/A') + ' | ' + item.status + '\\n\\n';\n    } else {\n      var stars = '';\n      for (var s = 0; s < (item.rating || 0); s++) { stars += '\\u2B50'; }\n      message += displayNum + '. <b>' + (item.book_title || 'Untitled') + '</b>\\n   ' + stars + ' | ' + item.status + '\\n\\n';\n    }\n    var row = [\n      { text: '\\u{1F441} #' + displayNum, callback_data: 'preview:' + type + ':' + item.id },\n      { text: '\\u2705 Pub #' + displayNum, callback_data: 'publish:' + type + ':' + item.id }\n    ];\n    if (type === 'books' && item.status === 'draft') {\n      row.push({ text: '\\u270D\\uFE0F Review #' + displayNum, callback_data: 'review_info:' + item.id });\n    }\n    row.push({ text: '\\u{1F5D1} Del #' + displayNum, callback_data: 'delete:' + type + ':' + item.id });\n    keyboard.push(row);\n  });\n  var navRow = [];\n  if (page > 1) { navRow.push({ text: '\\u2190 Prev', callback_data: 'list:' + type + ':' + (page - 1) }); }\n  if (items.length === limit) { navRow.push({ text: 'Next \\u2192', callback_data: 'list:' + type + ':' + (page + 1) }); }\n  navRow.push({ text: '\\u{1F3E0} Home', callback_data: 'start' });\n  keyboard.push(navRow);\n  return [{ json: { chatId: chatId, message: message, parseMode: 'HTML', keyboard: keyboard } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Error fetching list: ' + error.message, parseMode: 'HTML' } }];\n}\n"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        0
+      ],
+      "id": "list-handler-001",
+      "name": "List Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "try {\n  var input = $input.first().json;\n  var query = input.query;\n  var chatId = input.chatId;\n  var encoded = encodeURIComponent(query);\n  var projectsResp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/projects?filter[translations][title][_contains]=' + encoded + '&limit=5&fields=id,slug,category,translations.*', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var booksResp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews?filter[book_title][_contains]=' + encoded + '&limit=5&fields=id,book_title,book_author,rating', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var projects = (projectsResp && projectsResp.data) || [];\n  var books = (booksResp && booksResp.data) || [];\n  if (projects.length === 0 && books.length === 0) {\n    return [{ json: { chatId: chatId, message: '\\u{1F50D} No results for \"' + query + '\"', parseMode: 'HTML', keyboard: [[{ text: '\\u{1F3E0} Home', callback_data: 'start' }]] } }];\n  }\n  var message = '\\u{1F50D} <b>Search: \"' + query + '\"</b>\\n\\n';\n  var keyboard = [];\n  if (projects.length > 0) {\n    message += '\\u{1F4C1} <b>Projects (' + projects.length + '):</b>\\n';\n    projects.forEach(function(p) {\n      var title = (p.translations && p.translations[0] && p.translations[0].title) || p.slug || 'Untitled';\n      message += '\\u2022 ' + title + '\\n';\n      keyboard.push([{ text: '\\u{1F441} ' + title, callback_data: 'preview:projects:' + p.id }]);\n    });\n    message += '\\n';\n  }\n  if (books.length > 0) {\n    message += '\\u{1F4DA} <b>Books (' + books.length + '):</b>\\n';\n    books.forEach(function(b) {\n      message += '\\u2022 ' + b.book_title + ' by ' + b.book_author + '\\n';\n      keyboard.push([{ text: '\\u{1F441} ' + b.book_title, callback_data: 'preview:books:' + b.id }]);\n    });\n  }\n  keyboard.push([{ text: '\\u{1F3E0} Home', callback_data: 'start' }]);\n  return [{ json: { chatId: chatId, message: message, parseMode: 'HTML', keyboard: keyboard } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Error searching: ' + error.message, parseMode: 'HTML' } }];\n}"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        120
+      ],
+      "id": "search-handler-001",
+      "name": "Search Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "try {\n  var chatId = $input.first().json.chatId;\n  var projectsResp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/projects?fields=id,category,status,date_created', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var booksResp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews?fields=id,rating,status,finished_at', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var projects = (projectsResp && projectsResp.data) || [];\n  var books = (booksResp && booksResp.data) || [];\n  var pPublished = projects.filter(function(p) { return p.status === 'published'; }).length;\n  var pDraft = projects.filter(function(p) { return p.status === 'draft'; }).length;\n  var pArchived = projects.filter(function(p) { return p.status === 'archived'; }).length;\n  var bPublished = books.filter(function(b) { return b.status === 'published'; }).length;\n  var bDraft = books.filter(function(b) { return b.status === 'draft'; }).length;\n  var bAvg = books.length > 0 ? (books.reduce(function(sum, b) { return sum + (b.rating || 0); }, 0) / books.length).toFixed(1) : 0;\n  var categories = {};\n  projects.forEach(function(p) { if (p.category) { categories[p.category] = (categories[p.category] || 0) + 1; } });\n  var message = '\\u{1F4CA} <b>DK0 Portfolio Statistics</b>\\n\\n\\u{1F4C1} <b>Projects:</b>\\n\\u2022 Total: ' + projects.length + '\\n\\u2022 Published: ' + pPublished + '\\n\\u2022 Draft: ' + pDraft + '\\n\\u2022 Archived: ' + pArchived + '\\n\\n\\u{1F4DA} <b>Book Reviews:</b>\\n\\u2022 Total: ' + books.length + '\\n\\u2022 Published: ' + bPublished + '\\n\\u2022 Draft: ' + bDraft + '\\n\\u2022 Avg Rating: ' + bAvg + '/5\\n';\n  var catEntries = Object.entries(categories).sort(function(a, b) { return b[1] - a[1]; });\n  if (catEntries.length > 0) {\n    message += '\\n\\u{1F3F7}\\uFE0F <b>Categories:</b>\\n';\n    catEntries.forEach(function(entry) { message += '\\u2022 ' + entry[0] + ': ' + entry[1] + '\\n'; });\n  }\n  var keyboard = [\n    [{ text: '\\u{1F4CB} Projects', callback_data: 'list:projects:1' }, { text: '\\u{1F4DA} Books', callback_data: 'list:books:1' }],\n    [{ text: '\\u{1F3E0} Home', callback_data: 'start' }]\n  ];\n  return [{ json: { chatId: chatId, message: message, parseMode: 'HTML', keyboard: keyboard } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Error loading stats: ' + error.message, parseMode: 'HTML' } }];\n}"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        240
+      ],
+      "id": "stats-handler-001",
+      "name": "Stats Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "\ntry {\n  var input = $input.first().json;\n  var id = input.id;\n  var chatId = input.chatId;\n  var collectionType = input.collectionType;\n  \n  var response, collection;\n  \n  if (collectionType === 'projects' || collectionType === 'project') {\n    response = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/projects/' + id + '?fields=id,slug,category,status,date_created,translations.*', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, returnFullResponse: true }).catch(function() { return null; });\n    collection = 'projects';\n  } else if (collectionType === 'books' || collectionType === 'book') {\n    response = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews/' + id + '?fields=id,book_title,book_author,rating,status,hardcover_id,translations.*', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, returnFullResponse: true }).catch(function() { return null; });\n    collection = 'book_reviews';\n  } else {\n    response = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/projects/' + id + '?fields=id,slug,category,status,date_created,translations.*', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, returnFullResponse: true }).catch(function() { return null; });\n    collection = 'projects';\n    var itemTry = response && response.body && response.body.data;\n    if (!itemTry) {\n      response = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews/' + id + '?fields=id,book_title,book_author,rating,status,hardcover_id,translations.*', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, returnFullResponse: true }).catch(function() { return null; });\n      collection = 'book_reviews';\n    }\n  }\n\n  var item = response && response.body && response.body.data;\n  if (!item) {\n    return [{ json: { chatId: chatId, message: '\\u274C Item #' + id + ' not found.', parseMode: 'HTML', keyboard: [[{ text: '\\u{1F3E0} Home', callback_data: 'start' }]] } }];\n  }\n  \n  var message = '\\u{1F441}\\uFE0F <b>Preview #' + id + '</b>\\n\\n';\n  if (collection === 'projects') {\n    message += '\\u{1F4C1} <b>Type:</b> Project\\n\\u{1F516} <b>Slug:</b> ' + item.slug + '\\n\\u{1F3F7}\\uFE0F <b>Category:</b> ' + (item.category || 'N/A') + '\\n\\u{1F4CA} <b>Status:</b> ' + item.status + '\\n\\n';\n    var translations = item.translations || [];\n    translations.forEach(function(t) {\n      var lang = t.languages_code === 'en-US' ? '\\u{1F1EC}\\u{1F1E7} EN' : '\\u{1F1E9}\\u{1F1EA} DE';\n      message += lang + ':\\n<b>Title:</b> ' + (t.title || 'N/A') + '\\n<b>Desc:</b> ' + ((t.description || 'N/A')) + '...\\n\\n';\n    });\n  } else {\n    message += '\\u{1F4DA} <b>Type:</b> Book Review\\n\\u{1F4D6} <b>Title:</b> ' + item.book_title + '\\n\\u270D\\uFE0F <b>Author:</b> ' + item.book_author + '\\n\\u2B50 <b>Rating:</b> ' + item.rating + '/5\\n\\u{1F4CA} <b>Status:</b> ' + item.status + '\\n\\u{1F517} <b>HC-ID:</b> ' + item.hardcover_id + '\\n\\n';\n    var translations = item.translations || [];\n    translations.forEach(function(t) {\n      var lang = t.languages_code === 'en-US' ? '\\u{1F1EC}\\u{1F1E7} EN' : '\\u{1F1E9}\\u{1F1EA} DE';\n      message += lang + ':\\n' + ((t.review || 'No review')) + '...\\n\\n';\n    });\n  }\n  var listType = collection === 'projects' ? 'projects' : 'books';\n  var keyboard = [\n    [{ text: '\\u2705 Publish', callback_data: 'publish:' + listType + ':' + id }, { text: '\\u{1F5D1} Delete', callback_data: 'delete:' + listType + ':' + id }],\n    [{ text: '\\u2190 Back', callback_data: 'list:' + listType + ':1' }, { text: '\\u{1F3E0} Home', callback_data: 'start' }]\n  ];\n  return [{ json: { chatId: chatId, message: message, parseMode: 'HTML', keyboard: keyboard } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Error loading preview: ' + error.message, parseMode: 'HTML' } }];\n}\n"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        360
+      ],
+      "id": "preview-handler-001",
+      "name": "Preview Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "try {\n  var input = $input.first().json;\n  var id = input.id;\n  var chatId = input.chatId;\n  var collectionType = input.collectionType;\n  \n  var url, title, listType;\n  \n  if (collectionType === 'projects' || collectionType === 'project') {\n    url = 'https://cms.dk0.dev/items/projects/' + id;\n    title = 'Project';\n    listType = 'projects';\n  } else {\n    url = 'https://cms.dk0.dev/items/book_reviews/' + id;\n    title = 'Book Review';\n    listType = 'books';\n  }\n  \n  var response;\n  try {\n    response = await this.helpers.httpRequest({\n      method: 'PATCH',\n      url: url,\n      headers: {\n        'Content-Type': 'application/json',\n        'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB'\n      },\n      body: { status: 'published' }\n    });\n  } catch(e) {\n    return [{ json: { chatId: chatId, message: '\\u274C <b>Publish fehlgeschlagen</b>\\n\\n' + e.message, parseMode: 'HTML', keyboard: [[{ text: '\\u{1F3E0} Home', callback_data: 'start' }]] } }];\n  }\n  \n  var result = response.data || response;\n  if (!result || !result.id) {\n    return [{ json: { chatId: chatId, message: '\\u274C <b>Publish fehlgeschlagen</b>\\n\\nKeine Bestaetigung von Directus.', parseMode: 'HTML', keyboard: [[{ text: '\\u{1F3E0} Home', callback_data: 'start' }]] } }];\n  }\n  \n  var keyboard = [[{ text: '\\u{1F4CB} ' + (listType === 'projects' ? 'Projects' : 'Books'), callback_data: 'list:' + listType + ':1' }, { text: '\\u{1F3E0} Home', callback_data: 'start' }]];\n  return [{ json: { chatId: chatId, message: '\\u2705 <b>' + title + ' #' + id + ' Published!</b>\\n\\nNow live on dk0.dev.', parseMode: 'HTML', keyboard: keyboard } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Error publishing: ' + error.message, parseMode: 'HTML' } }];\n}"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        480
+      ],
+      "id": "publish-handler-001",
+      "name": "Publish Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "try {\n  var input = $input.first().json;\n  var id = input.id;\n  var chatId = input.chatId;\n  var collectionType = input.collectionType;\n  \n  var response, collection, title;\n  \n  if (collectionType === 'projects' || collectionType === 'project') {\n    response = await this.helpers.httpRequest({ method: 'DELETE', url: 'https://cms.dk0.dev/items/projects/' + id, headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, returnFullResponse: true }).catch(function() { return null; });\n    collection = 'projects';\n    title = 'Project';\n  } else if (collectionType === 'books' || collectionType === 'book') {\n    response = await this.helpers.httpRequest({ method: 'DELETE', url: 'https://cms.dk0.dev/items/book_reviews/' + id, headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, returnFullResponse: true }).catch(function() { return null; });\n    collection = 'book_reviews';\n    title = 'Book Review';\n  } else {\n    // Fallback\n    response = await this.helpers.httpRequest({ method: 'DELETE', url: 'https://cms.dk0.dev/items/projects/' + id, headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, returnFullResponse: true }).catch(function() { return null; });\n    collection = 'projects';\n    title = 'Project';\n    if (!response || response.statusCode >= 400) {\n      response = await this.helpers.httpRequest({ method: 'DELETE', url: 'https://cms.dk0.dev/items/book_reviews/' + id, headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, returnFullResponse: true }).catch(function() { return null; });\n      collection = 'book_reviews';\n      title = 'Book Review';\n    }\n  }\n\n  if (!response || response.statusCode >= 400) {\n    return [{ json: { chatId: chatId, message: '\\u274C Item #' + id + ' could not be deleted.', parseMode: 'HTML', keyboard: [[{ text: '\\u{1F3E0} Home', callback_data: 'start' }]] } }];\n  }\n  var listType = collection === 'projects' ? 'projects' : 'books';\n  var keyboard = [[{ text: (collection === 'projects' ? '\\u{1F4CB} Projects' : '\\u{1F4DA} Books'), callback_data: 'list:' + listType + ':1' }, { text: '\\u{1F3E0} Home', callback_data: 'start' }]];\n  return [{ json: { chatId: chatId, message: '\\u{1F5D1}\\uFE0F *' + title + ' #' + id + ' Deleted*', parseMode: 'HTML', keyboard: keyboard, collection: collection, itemId: id } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Error deleting: ' + error.message, parseMode: 'HTML' } }];\n}"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        600
+      ],
+      "id": "delete-handler-001",
+      "name": "Delete Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "try {\n  var input = $input.first().json;\n  var id = input.id;\n  var chatId = input.chatId;\n  var bookResp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews/' + id + '?fields=id,book_title,translations.id', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var book = bookResp && bookResp.data;\n  if (!book) {\n    return [{ json: { chatId: chatId, message: '\\u274C Book review #' + id + ' not found.', parseMode: 'HTML', keyboard: [[{ text: '\\u{1F3E0} Home', callback_data: 'start' }]] } }];\n  }\n  var translations = book.translations || [];\n  var deletedCount = 0;\n  for (var i = 0; i < translations.length; i++) {\n    await this.helpers.httpRequest({ method: 'DELETE', url: 'https://cms.dk0.dev/items/book_reviews_translations/' + translations[i].id, headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } }).catch(function() {});\n    deletedCount++;\n  }\n  var keyboard = [[{ text: '\\u{1F4DA} Books', callback_data: 'list:books:1' }, { text: '\\u{1F3E0} Home', callback_data: 'start' }]];\n  return [{ json: { chatId: chatId, message: '\\u{1F5D1}\\uFE0F Deleted ' + deletedCount + ' review translations for \"' + book.book_title + '\".\\n\\nBook entry still exists.', parseMode: 'HTML', keyboard: keyboard, itemId: id, deletedCount: deletedCount } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Error deleting review: ' + error.message, parseMode: 'HTML' } }];\n}"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        720
+      ],
+      "id": "delete-review-handler-001",
+      "name": "Delete Review Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "try {\n  var input = $input.first().json;\n  var bookId = input.bookId;\n  var rating = input.rating;\n  var answers = input.answers;\n  var chatId = input.chatId;\n\n  var bookResp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews/' + bookId + '?fields=id,book_title,book_author,rating,translations.id,translations.languages_code,translations.review', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var bookData = bookResp && bookResp.data ? bookResp.data : bookResp;\n  if (!bookData || !bookData.id) {\n    return [{ json: { chatId: chatId, message: '\\u274C Buch #' + bookId + ' nicht gefunden.', parseMode: 'HTML', keyboard: [[{ text: '\\u{1F3E0} Home', callback_data: 'start' }]] } }];\n  }\n\n  var prompt = 'Schreibe eine authentische Buchbewertung. Buch: ' + bookData.book_title + ' von ' + bookData.book_author + '. Rating: ' + rating + '/5. Antworten des Lesers auf Fragen zum Buch: ' + answers + ' Schreibe Ich-Perspektive, 4-6 Saetze pro Sprache. Verwende keine Bindestriche, Em-Dashes oder Gedankenstriche. Antworte NUR als JSON: {\"review_en\": \"English review\", \"review_de\": \"Deutsche Bewertung\"}';\n\n  var aiResp = await this.helpers.httpRequest({ method: 'POST', url: 'https://openrouter.ai/api/v1/chat/completions', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer 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' }, body: { model: 'openrouter/free', messages: [{ role: 'user', content: prompt }] } });\n  var aiText = (aiResp && aiResp.choices && aiResp.choices[0] && aiResp.choices[0].message && aiResp.choices[0].message.content) || '{}';\n  var jsonMatch = aiText.match(/\\{[\\s\\S]*\\}/);\n  var ai = jsonMatch ? JSON.parse(jsonMatch[0]) : { review_en: answers, review_de: answers };\n\n  // Update rating\n  await this.helpers.httpRequest({ method: 'PATCH', url: 'https://cms.dk0.dev/items/book_reviews/' + bookData.id, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, body: { rating: rating } });\n\n  var translations = bookData.translations || [];\n  var enTrans = null, deTrans = null;\n  for (var i = 0; i < translations.length; i++) {\n    if (translations[i].languages_code === 'en-US') enTrans = translations[i];\n    if (translations[i].languages_code === 'de-DE') deTrans = translations[i];\n  }\n\n  var reviewEn = ai.review_en || answers;\n  var reviewDe = ai.review_de || answers;\n\n  // Update existing translations (PATCH) or create new ones (POST)\n  if (enTrans) {\n    await this.helpers.httpRequest({ method: 'PATCH', url: 'https://cms.dk0.dev/items/book_reviews_translations/' + enTrans.id, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, body: { review: reviewEn } });\n  } else {\n    await this.helpers.httpRequest({ method: 'POST', url: 'https://cms.dk0.dev/items/book_reviews_translations', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, body: { book_reviews_id: bookData.id, languages_code: 'en-US', review: reviewEn } });\n  }\n\n  if (deTrans) {\n    await this.helpers.httpRequest({ method: 'PATCH', url: 'https://cms.dk0.dev/items/book_reviews_translations/' + deTrans.id, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, body: { review: reviewDe } });\n  } else {\n    await this.helpers.httpRequest({ method: 'POST', url: 'https://cms.dk0.dev/items/book_reviews_translations', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, body: { book_reviews_id: bookData.id, languages_code: 'de-DE', review: reviewDe } });\n  }\n\n  var showEn = reviewEn;\n  var showDe = reviewDe;\n  var msg = '\\u2705 <b>Review erstellt!</b>\\n\\n\\u{1F4DA} ' + bookData.book_title + ' (' + rating + '/5)\\n\\n<b>EN:</b> ' + showEn + '\\n\\n<b>DE:</b> ' + showDe;\n  var keyboard = [[{ text: '\\u{1F441} Preview', callback_data: 'preview:books:' + bookData.id }, { text: '\\u2705 Publish', callback_data: 'publish:books:' + bookData.id }], [{ text: '\\u{1F4DA} Books', callback_data: 'list:books:1' }]];\n  return [{ json: { chatId: chatId, message: msg, parseMode: 'HTML', keyboard: keyboard } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Fehler beim Erstellen der Review: ' + error.message, parseMode: 'HTML' } }];\n}"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        840
+      ],
+      "id": "create-review-handler-001",
+      "name": "Create Review Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "var chatId = $input.first().json.chatId;\nvar message = '\\u2753 <b>Unknown Command</b>\\n\\nUse the buttons below or type:\\n<code>.review HC_ID [RATING]</code> - Start review with AI questions\\n<code>.answer BOOK_ID RATING your answers</code> - Submit review answers\\n<code>.refine ID FEEDBACK</code> - Refine existing review';\nvar keyboard = [\n  [{ text: '\\u{1F4CB} Projects', callback_data: 'list:projects:1' }, { text: '\\u{1F4DA} Books', callback_data: 'list:books:1' }],\n  [{ text: '\\u{1F4CA} Stats', callback_data: 'stats' }, { text: '\\u{1F3E0} Dashboard', callback_data: 'start' }]\n];\nreturn [{ json: { chatId: chatId, message: message, parseMode: 'HTML', keyboard: keyboard } }];"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        960
+      ],
+      "id": "unknown-handler-001",
+      "name": "Unknown Command Handler"
+    },
+    {
+      "parameters": {
+        "method": "POST",
+        "url": "={{ 'https://api.telegram.org/bot8166414331:AAGNQ6fn2juD5esaTRxPjtTdSMkwq_oASIc/sendMessage' }}",
+        "authentication": "none",
+        "sendBody": true,
+        "contentType": "json",
+        "specifyBody": "json",
+        "jsonBody": "={{ { chat_id: $json.chatId, text: $json.message, parse_mode: $json.parseMode || 'HTML', reply_markup: ($json.keyboard && $json.keyboard.length > 0) ? { inline_keyboard: $json.keyboard } : undefined } }}"
+      },
+      "type": "n8n-nodes-base.httpRequest",
+      "typeVersion": 4.2,
+      "position": [
+        960,
+        420
+      ],
+      "id": "send-message-001",
+      "name": "Send Message",
+      "options": {}
+    },
+    {
+      "parameters": {
+        "jsCode": "try {\n  var input = $input.first().json;\n  var id = input.id;\n  var feedback = input.feedback;\n  var chatId = input.chatId;\n  var bookResp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews/' + id + '?fields=id,book_title,book_author,rating,translations.id,translations.languages_code,translations.review', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n  var bookData = bookResp && bookResp.data ? bookResp.data : bookResp;\n  if (!bookData || !bookData.id) {\n    return [{ json: { chatId: chatId, message: 'Review #' + id + ' nicht gefunden.', parseMode: 'HTML', keyboard: [[{ text: '\\u{1F3E0} Home', callback_data: 'start' }]] } }];\n  }\n  var translations = bookData.translations || [];\n  var enTrans = null, deTrans = null;\n  for (var i = 0; i < translations.length; i++) {\n    if (translations[i].languages_code === 'en-US') enTrans = translations[i];\n    if (translations[i].languages_code === 'de-DE') deTrans = translations[i];\n  }\n  var currentEn = enTrans ? enTrans.review : '';\n  var currentDe = deTrans ? deTrans.review : '';\n  var prompt = 'Du hast eine Buchbewertung fuer \"' + bookData.book_title + '\" von \"' + bookData.book_author + '\" geschrieben. Rating: ' + bookData.rating + '/5. Aktuelle EN-Bewertung: ' + currentEn + ' Aktuelle DE-Bewertung: ' + currentDe + ' Feedback des Lesers: ' + feedback + ' Wichtig: EN und DE sind immer inhaltlich identisch, nur die Sprache unterscheidet sich. Feedback gilt fuer BEIDE Versionen, auch wenn es nur eine Sprache erwaehnt. Ueberarbeite daher immer beide synchron. Ich-Perspektive, 4-6 Saetze pro Sprache. Verwende keine Bindestriche, Em-Dashes oder Gedankenstriche. Antworte NUR als JSON: {\"review_en\": \"...\", \"review_de\": \"...\"}';\n  var aiResp = await this.helpers.httpRequest({ method: 'POST', url: 'https://openrouter.ai/api/v1/chat/completions', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer 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' }, body: { model: 'openrouter/free', messages: [{ role: 'user', content: prompt }] } });\n  var aiText = (aiResp && aiResp.choices && aiResp.choices[0] && aiResp.choices[0].message && aiResp.choices[0].message.content) || '{}';\n  var jsonMatch = aiText.match(/\\{[\\s\\S]*\\}/);\n  var ai = jsonMatch ? JSON.parse(jsonMatch[0]) : { review_en: feedback, review_de: feedback };\n  var reviewEn = ai.review_en || feedback;\n  var reviewDe = ai.review_de || feedback;\n\n  // Update existing translations (PATCH) or create new ones (POST)\n  if (enTrans) {\n    await this.helpers.httpRequest({ method: 'PATCH', url: 'https://cms.dk0.dev/items/book_reviews_translations/' + enTrans.id, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, body: { review: reviewEn } });\n  } else {\n    await this.helpers.httpRequest({ method: 'POST', url: 'https://cms.dk0.dev/items/book_reviews_translations', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, body: { book_reviews_id: bookData.id, languages_code: 'en-US', review: reviewEn } });\n  }\n  if (deTrans) {\n    await this.helpers.httpRequest({ method: 'PATCH', url: 'https://cms.dk0.dev/items/book_reviews_translations/' + deTrans.id, headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, body: { review: reviewDe } });\n  } else {\n    await this.helpers.httpRequest({ method: 'POST', url: 'https://cms.dk0.dev/items/book_reviews_translations', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' }, body: { book_reviews_id: bookData.id, languages_code: 'de-DE', review: reviewDe } });\n  }\n\n  var showEn = reviewEn;\n  var showDe = reviewDe;\n  var msg = '\\u270F\\uFE0F <b>Review aktualisiert!</b>\\n\\n\\u{1F4DA} ' + bookData.book_title + '\\n\\n<b>EN:</b> ' + showEn + '\\n\\n<b>DE:</b> ' + showDe;\n  var keyboard = [[{ text: '\\u{1F441} Preview', callback_data: 'preview:books:' + id }, { text: '\\u2705 Publish', callback_data: 'publish:books:' + id }], [{ text: '\\u{1F4DA} Books', callback_data: 'list:books:1' }]];\n  return [{ json: { chatId: chatId, message: msg, parseMode: 'HTML', keyboard: keyboard } }];\n} catch (error) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Fehler beim Aktualisieren: ' + error.message, parseMode: 'HTML' } }];\n}"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        1080
+      ],
+      "id": "refine-review-handler-001",
+      "name": "Refine Review Handler"
+    },
+    {
+      "parameters": {
+        "jsCode": "try {\n  var input = $input.first().json;\n  var chatId = input.chatId;\n  var bookId = input.id;\n  var hardcoverId = input.hardcoverId;\n  var rating = input.rating || 0;\n  var book;\n\n  if (bookId) {\n    var resp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews/' + bookId + '?fields=id,book_title,book_author,hardcover_id,rating', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n    book = resp && resp.data;\n  } else if (hardcoverId) {\n    var resp = await this.helpers.httpRequest({ method: 'GET', url: 'https://cms.dk0.dev/items/book_reviews?filter[hardcover_id][_eq]=' + hardcoverId + '&fields=id,book_title,book_author,hardcover_id,rating&limit=1', headers: { 'Authorization': 'Bearer RF2QytqhcLXuVy6FO3PzWlsoR-ysCTwB' } });\n    book = resp && resp.data && resp.data[0];\n  }\n\n  if (!book) {\n    return [{ json: { chatId: chatId, message: '\\u274C Buch nicht gefunden. Pr\\u00fcfe die ID.', parseMode: 'HTML', keyboard: [[{ text: '\\u{1F4DA} Books', callback_data: 'list:books:1' }]] } }];\n  }\n\n  var prompt = 'Du bist ein Leseberater. Generiere genau 4 persoenliche, tiefgruendige Fragen zum Buch \"' + book.book_title + '\" von ' + book.book_author + ', die einem helfen, eine authentische Bewertung zu schreiben. Die Fragen sollen spezifisch zum Buch sein und zum Nachdenken anregen. Antworte NUR als JSON-Array, keine Erklaerung davor: [\"Frage 1\", \"Frage 2\", \"Frage 3\", \"Frage 4\"]';\n\n  var aiResp = await this.helpers.httpRequest({ method: 'POST', url: 'https://openrouter.ai/api/v1/chat/completions', headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer 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' }, body: { model: 'openrouter/free', messages: [{ role: 'user', content: prompt }] } });\n\n  var aiText = (aiResp && aiResp.choices && aiResp.choices[0] && aiResp.choices[0].message && aiResp.choices[0].message.content) || '[]';\n  var questions;\n  try {\n    var jsonMatch = aiText.match(/\\[[\\s\\S]*\\]/);\n    questions = jsonMatch ? JSON.parse(jsonMatch[0]) : ['Was hat dir am besten gefallen?', 'Was hat dich gestoert?', 'Wuerdest du es weiterempfehlen?', 'Welche Szene ist dir im Gedaechtnis geblieben?'];\n  } catch(e) {\n    questions = ['Was hat dir am besten gefallen?', 'Was hat dich gestoert?', 'Wuerdest du es weiterempfehlen?', 'Welche Szene ist dir im Gedaechtnis geblieben?'];\n  }\n\n  var ratingInfo = rating > 0 ? '\\n\\u2B50 Dein Rating: ' + rating + '/5' : '\\n\\u2B50 Gib dein Rating (1-5) an';\n  var msg = '\\u{1F4D6} <b>Review: ' + book.book_title + '</b>\\n' + book.book_author + ratingInfo + '\\n\\n\\u2753 <b>Beantworte diese Fragen:</b>\\n\\n';\n  for (var i = 0; i < questions.length; i++) {\n    msg += (i + 1) + '. ' + questions[i] + '\\n';\n  }\n  msg += '\\n\\u270D\\uFE0F Antworte mit:\\n<code>.answer ' + book.id + ' ' + (rating > 0 ? rating : '5') + ' deine Antworten hier</code>';\n  msg += '\\n\\n<i>Beispiel: .answer ' + book.id + ' 4 Die Charakterentwicklung war super...</i>';\n\n  var keyboard = [[{ text: '\\u{1F4DA} Books', callback_data: 'list:books:1' }, { text: '\\u{1F3E0} Home', callback_data: 'start' }]];\n  return [{ json: { chatId: chatId, message: msg, parseMode: 'HTML', keyboard: keyboard } }];\n} catch(e) {\n  return [{ json: { chatId: $input.first().json.chatId, message: '\\u274C Error: ' + e.message, parseMode: 'HTML' } }];\n}\n"
+      },
+      "type": "n8n-nodes-base.code",
+      "typeVersion": 2,
+      "position": [
+        720,
+        960
+      ],
+      "id": "review-info-handler-001",
+      "name": "Review Info Handler"
+    }
+  ],
+  "connections": {
+    "Telegram Trigger": {
+      "main": [
+        [
+          {
+            "node": "Global Parser",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Global Parser": {
+      "main": [
+        [
+          {
+            "node": "Command Router",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Command Router": {
+      "main": [
+        [
+          {
+            "node": "Dashboard Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "List Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Search Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Stats Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Preview Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Publish Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Delete Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Delete Review Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Create Review Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Refine Review Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Unknown Command Handler",
+            "type": "main",
+            "index": 0
+          }
+        ],
+        [
+          {
+            "node": "Review Info Handler",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Dashboard Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "List Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Search Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Stats Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Preview Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Publish Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Delete Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Delete Review Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Create Review Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Unknown Command Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Refine Review Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    },
+    "Review Info Handler": {
+      "main": [
+        [
+          {
+            "node": "Send Message",
+            "type": "main",
+            "index": 0
+          }
+        ]
+      ]
+    }
+  },
+  "pinData": {},
+  "settings": {
+    "executionOrder": "v1"
+  },
+  "staticData": null,
+  "tags": [],
+  "triggerCount": 1,
+  "updatedAt": "2025-01-21T00:00:00.000Z",
+  "versionId": "1"
+}

next.config.ts

@@ -33,7 +33,7 @@ const nextConfig: NextConfig = {
   // Performance optimizations
   experimental: {
     // Tree-shake barrel-file packages in both dev and production
-    optimizePackageImports: ["lucide-react", "framer-motion", "react-icons", "@tiptap/react"],
+    optimizePackageImports: ["lucide-react", "framer-motion", "@tiptap/react"],
     // Merge all CSS into a single chunk to eliminate the render-blocking CSS chain
     // (84dc7384.css → 3aefc04b.css sequential dependency reported by PageSpeed).
     cssChunking: false,
@@ -47,6 +47,8 @@ const nextConfig: NextConfig = {
   images: {
     formats: ["image/webp", "image/avif"],
     minimumCacheTTL: 2592000,
+    deviceSizes: [640, 768, 1024, 1280, 1536],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256],
     remotePatterns: [
       {
         protocol: "https",
@@ -60,6 +62,14 @@ const nextConfig: NextConfig = {
         protocol: "https",
         hostname: "media.discordapp.net",
       },
+      {
+        protocol: "https",
+        hostname: "store.steampowered.com",
+      },
+      {
+        protocol: "https",
+        hostname: "cdn.akamai.steamstatic.com",
+      },
       {
         protocol: "https",
         hostname: "cms.dk0.dev",
@@ -81,6 +91,11 @@ const nextConfig: NextConfig = {
 
   // Webpack configuration
   webpack: (config, { dev, isServer, webpack }) => {
+    // Skip adding polyfill webpack aliases — Next.js injects polyfills via <script>
+    // tags, not through webpack module resolution, so aliases don't take effect.
+    // The browserslist targets (chrome >= 100, etc.) already prevent unnecessary
+    // transpilation; the 11.7 KiB polyfill chunk is a known Next.js limitation.
+
     // Fix for module resolution issues
     config.resolve.fallback = {
       ...config.resolve.fallback,

nginx.production.conf

@@ -52,17 +52,34 @@ http {
         server portfolio:3000 max_fails=3 fail_timeout=30s;
     }
 
-    # HTTP Server (redirect to HTTPS)
+    # HTTP Server (redirect to HTTPS with www → non-www)
     server {
         listen 80;
-        server_name dk0.dev www.dk0.dev;
-        return 301 https://$host$request_uri;
+        server_name www.dk0.dev;
+        return 301 https://dk0.dev$request_uri;
+    }
+
+    server {
+        listen 80;
+        server_name dk0.dev;
+        return 301 https://dk0.dev$request_uri;
+    }
+
+    # HTTPS - redirect www to non-www
+    server {
+        listen 443 ssl http2;
+        server_name www.dk0.dev;
+
+        ssl_certificate /etc/nginx/ssl/cert.pem;
+        ssl_certificate_key /etc/nginx/ssl/key.pem;
+
+        return 301 https://dk0.dev$request_uri;
     }
 
     # HTTPS Server
     server {
         listen 443 ssl http2;
-        server_name dk0.dev www.dk0.dev;
+        server_name dk0.dev;
 
         # SSL Configuration
         ssl_certificate /etc/nginx/ssl/cert.pem;

package-lock.json

@@ -26,17 +26,16 @@
         "lucide-react": "^0.542.0",
         "next": "^15.5.7",
         "next-intl": "^4.7.0",
-        "next-themes": "^0.4.6",
         "node-cache": "^5.1.2",
         "node-fetch": "^2.7.0",
         "nodemailer": "^7.0.11",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
-        "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
         "redis": "^5.8.2",
         "sanitize-html": "^2.17.0",
-        "tailwind-merge": "^2.6.0"
+        "tailwind-merge": "^2.6.0",
+        "vaul": "1.1.2"
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3",
@@ -2996,6 +2995,323 @@
         "@prisma/debug": "5.22.0"
       }
     },
+    "node_modules/@radix-ui/primitive": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.2.0.tgz",
+      "integrity": "sha512-KABY+VMIRPJL+Vyzv/335FEhXXD/xDv8BMb1kl48/aXJZMH0LtHCTx5ga5RnxaEP3nZHtmTLf1P9vanmFX46bw==",
+      "license": "MIT"
+    },
+    "node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.5.tgz",
+      "integrity": "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.3.0.tgz",
+      "integrity": "sha512-v5AYEocMISkbJ+1fTXzZpiFv7NRr3D2WiYbLIKf+FkmJ8VkP6d503eV2n34MFussHXY1pcoq3yfJiQH77dc4Mg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.3.1.tgz",
+      "integrity": "sha512-+0E4qvVTwjAWra9sEhJ+9BTsvHE00zkUuNw1VGh7S+Gc13dfYk+S1PVQdchWDj+XYHhAai7Z7IpzXVDCGsDplg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.2.0",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-context": "1.3.0",
+        "@radix-ui/react-dismissable-layer": "1.2.1",
+        "@radix-ui/react-focus-guards": "1.2.0",
+        "@radix-ui/react-focus-scope": "1.3.1",
+        "@radix-ui/react-id": "1.1.4",
+        "@radix-ui/react-portal": "1.2.0",
+        "@radix-ui/react-presence": "1.1.11",
+        "@radix-ui/react-primitive": "2.2.0",
+        "@radix-ui/react-slot": "1.5.0",
+        "@radix-ui/react-use-controllable-state": "1.3.0",
+        "@radix-ui/react-use-layout-effect": "1.1.4",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.7.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.2.1.tgz",
+      "integrity": "sha512-KIfDcAsx+oVylFZ4xryVKusJUrLLhTQmfnJW4kwk4Km5myvhHCrj04hnWWUC166+xD4DHdH8tQGylwYX1h6+Pg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.2.0",
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.2.0",
+        "@radix-ui/react-use-callback-ref": "1.1.5",
+        "@radix-ui/react-use-effect-event": "0.0.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.2.0.tgz",
+      "integrity": "sha512-MPm5R0iRGUDrDnPNxmLBkv+X7pN4XKzt+MbWJEuJQsH3NFH4omrbpXpucyYCCKTSt+na/ZxGhEWQrWTZ0285cA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.3.1.tgz",
+      "integrity": "sha512-ugeMhbXt4y5S2T1GnIqbWDKEN962PDwnX1fN0eKOOgf5f63Dh2mn8F1FUySlgW0iF6GiVsRF32DzuDIWTUyQJg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5",
+        "@radix-ui/react-primitive": "2.2.0",
+        "@radix-ui/react-use-callback-ref": "1.1.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.4.tgz",
+      "integrity": "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.2.0.tgz",
+      "integrity": "sha512-StX7xXnaRU41VvFtMm9zlhVGz8XF6GmWWTXftkQaY+tqVkbs/R9UmAp5mLzHHapk5hM9RMZQvO/3usyIP/g42g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.2.0",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.11.tgz",
+      "integrity": "sha512-Z7/atlkab36Z8hm+V8zYc79r0W+tiOB1o0tun1By94JyadkekLQmtEAnBSP9XKXBNQsStoStS4+gX10JpS5akA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-primitive": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.2.0.tgz",
+      "integrity": "sha512-HCTSPMNqv55Qk0IX4geJbpyXazmqulcimwuyjxTkKi29v+QZbG2Zho9BnbBq4YS2PF+KlNb2CXoLz66uUmblkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-slot": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.5.0.tgz",
+      "integrity": "sha512-tyYd9ddPXAysAbdbD9eYxgwpCSv6f3PncqVSNKQFSR5lcJVLz3cb/pANDoYrLiHBpXv7skortyUgGUWsYuPPFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.5.tgz",
+      "integrity": "sha512-Y5GBf4NKeADoXI1geiMlMuMoURT3k9MizzzKhGb/m55H94aGigZ01PIpkvsO6lML13BA6XYAXSJ6gza7vTn5nw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.3.0.tgz",
+      "integrity": "sha512-TAcBI7bw2ljYCbv4+zuTSd6zICu8pRt6SDN2vJ/Z06K2MXh6I9WYFe/A9ovlFDtR5HVHGm5iDxDoABm/++dbKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.2.0",
+        "@radix-ui/react-use-effect-event": "0.0.5",
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.5.tgz",
+      "integrity": "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.4"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.4.tgz",
+      "integrity": "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@redis/bloom": {
       "version": "5.10.0",
       "resolved": "https://registry.npmjs.org/@redis/bloom/-/bloom-5.10.0.tgz",
@@ -5015,6 +5331,18 @@
       "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
       "license": "Python-2.0"
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
@@ -6390,6 +6718,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/detect-node-es": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
+      "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==",
+      "license": "MIT"
+    },
     "node_modules/devlop": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
@@ -7744,6 +8078,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/get-nonce": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz",
+      "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/get-package-type": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/get-package-type/-/get-package-type-0.1.0.tgz",
@@ -11348,16 +11691,6 @@
         }
       }
     },
-    "node_modules/next-themes": {
-      "version": "0.4.6",
-      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.4.6.tgz",
-      "integrity": "sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc",
-        "react-dom": "^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc"
-      }
-    },
     "node_modules/next/node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -12639,15 +12972,6 @@
         "react": "^19.2.4"
       }
     },
-    "node_modules/react-icons": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
-      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -12682,6 +13006,75 @@
         "react": ">=18"
       }
     },
+    "node_modules/react-remove-scroll": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.7.2.tgz",
+      "integrity": "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.3",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "license": "MIT",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "license": "MIT",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -14539,6 +14932,27 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-intl": {
       "version": "4.8.2",
       "resolved": "https://registry.npmjs.org/use-intl/-/use-intl-4.8.2.tgz",
@@ -14560,6 +14974,28 @@
         "react": "^17.0.0 || ^18.0.0 || >=19.0.0-rc <19.0.0 || ^19.0.0"
       }
     },
+    "node_modules/use-sidecar": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz",
+      "integrity": "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-node-es": "^1.1.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/use-sync-external-store": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
@@ -14598,6 +15034,19 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/vaul": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.1.2.tgz",
+      "integrity": "sha512-ZFkClGpWyI2WUQjdLJ/BaGuV6AVQiJ3uELGk3OYtP+B6yCO7Cmn9vPFXVJkRaGkOJu3m8bQMgtyzNHixULceQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/vfile": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",

package.json

@@ -75,11 +75,11 @@
     "nodemailer": "^7.0.11",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
-    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "redis": "^5.8.2",
     "sanitize-html": "^2.17.0",
-    "tailwind-merge": "^2.6.0"
+    "tailwind-merge": "^2.6.0",
+    "vaul": "1.1.2"
   },
   "browserslist": [
     "chrome >= 100",

scripts/check-gitea-runner.sh

@@ -1,136 +0,0 @@
-#!/bin/bash
-
-# Gitea Runner Status Check Script
-# Prüft den Status des Gitea Runners
-
-set -e
-
-# Colors for output
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-BLUE='\033[0;34m'
-CYAN='\033[0;36m'
-NC='\033[0m' # No Color
-
-echo -e "${BLUE}╔════════════════════════════════════════════════════════════╗${NC}"
-echo -e "${BLUE}║  Gitea Runner Status Check                               ║${NC}"
-echo -e "${BLUE}╚════════════════════════════════════════════════════════════╝${NC}"
-echo ""
-
-# Check 1: systemd service
-echo -e "${CYAN}[1/5] Checking systemd service...${NC}"
-if systemctl list-units --type=service --all | grep -q "gitea-runner.service"; then
-    echo -e "${GREEN}✓ systemd service found${NC}"
-    systemctl status gitea-runner --no-pager -l || true
-else
-    echo -e "${YELLOW}⚠ systemd service not found (runner might be running differently)${NC}"
-fi
-echo ""
-
-# Check 2: Running processes
-echo -e "${CYAN}[2/5] Checking for running runner processes...${NC}"
-RUNNER_PROCESSES=$(ps aux | grep -E "(gitea|act_runner|woodpecker)" | grep -v grep || echo "")
-if [ ! -z "$RUNNER_PROCESSES" ]; then
-    echo -e "${GREEN}✓ Found runner processes:${NC}"
-    echo "$RUNNER_PROCESSES" | while read line; do
-        echo "  $line"
-    done
-else
-    echo -e "${RED}✗ No runner processes found${NC}"
-fi
-echo ""
-
-# Check 3: Docker containers (if runner runs in Docker)
-echo -e "${CYAN}[3/5] Checking for runner Docker containers...${NC}"
-RUNNER_CONTAINERS=$(docker ps -a --filter "name=runner" --format "{{.Names}}\t{{.Status}}" 2>/dev/null || echo "")
-if [ ! -z "$RUNNER_CONTAINERS" ]; then
-    echo -e "${GREEN}✓ Found runner containers:${NC}"
-    echo "$RUNNER_CONTAINERS" | while read line; do
-        echo "  $line"
-    done
-else
-    echo -e "${YELLOW}⚠ No runner containers found${NC}"
-fi
-echo ""
-
-# Check 4: Common runner directories
-echo -e "${CYAN}[4/5] Checking common runner directories...${NC}"
-RUNNER_DIRS=(
-    "/tmp/gitea-runner"
-    "/opt/gitea-runner"
-    "/home/*/gitea-runner"
-    "~/.gitea-runner"
-    "/usr/local/gitea-runner"
-)
-
-FOUND_DIRS=0
-for dir in "${RUNNER_DIRS[@]}"; do
-    # Expand ~ and wildcards
-    EXPANDED_DIR=$(eval echo "$dir" 2>/dev/null || echo "")
-    if [ -d "$EXPANDED_DIR" ]; then
-        echo -e "${GREEN}✓ Found runner directory: $EXPANDED_DIR${NC}"
-        FOUND_DIRS=$((FOUND_DIRS + 1))
-        # Check for config files
-        if [ -f "$EXPANDED_DIR/.runner" ] || [ -f "$EXPANDED_DIR/config.yml" ]; then
-            echo "  → Contains configuration files"
-        fi
-    fi
-done
-
-if [ $FOUND_DIRS -eq 0 ]; then
-    echo -e "${YELLOW}⚠ No runner directories found in common locations${NC}"
-fi
-echo ""
-
-# Check 5: Network connections (check if runner is connecting to Gitea)
-echo -e "${CYAN}[5/5] Checking network connections to Gitea...${NC}"
-GITEA_URL="${GITEA_URL:-https://git.dk0.dev}"
-if command -v netstat >/dev/null 2>&1; then
-    CONNECTIONS=$(netstat -tn 2>/dev/null | grep -E "(git.dk0.dev|3000|3001)" || echo "")
-elif command -v ss >/dev/null 2>&1; then
-    CONNECTIONS=$(ss -tn 2>/dev/null | grep -E "(git.dk0.dev|3000|3001)" || echo "")
-fi
-
-if [ ! -z "$CONNECTIONS" ]; then
-    echo -e "${GREEN}✓ Found connections to Gitea:${NC}"
-    echo "$CONNECTIONS" | head -5
-else
-    echo -e "${YELLOW}⚠ No active connections to Gitea found${NC}"
-fi
-echo ""
-
-# Summary
-echo -e "${BLUE}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
-echo -e "${BLUE}Summary:${NC}"
-echo ""
-
-if [ ! -z "$RUNNER_PROCESSES" ] || [ ! -z "$RUNNER_CONTAINERS" ]; then
-    echo -e "${GREEN}✓ Runner appears to be running${NC}"
-    echo ""
-    echo "To check runner status in Gitea:"
-    echo "  1. Go to: https://git.dk0.dev/denshooter/portfolio/settings/actions/runners"
-    echo "  2. Check if runner-01 shows as 'online' or 'idle'"
-    echo ""
-    echo "To view runner logs:"
-    if [ ! -z "$RUNNER_PROCESSES" ]; then
-        echo "  - Check process logs or journalctl"
-    fi
-    if [ ! -z "$RUNNER_CONTAINERS" ]; then
-        echo "  - docker logs <container-name>"
-    fi
-else
-    echo -e "${RED}✗ Runner does not appear to be running${NC}"
-    echo ""
-    echo "To start the runner:"
-    echo "  1. Find where the runner binary is located"
-    echo "  2. Check Gitea for registration token"
-    echo "  3. Run: ./act_runner register --config config.yml"
-    echo "  4. Run: ./act_runner daemon --config config.yml"
-fi
-
-echo ""
-echo -e "${CYAN}For more information, check:${NC}"
-echo "  - Gitea Runner Docs: https://docs.gitea.com/usage/actions/act-runner"
-echo "  - Runner Status: https://git.dk0.dev/denshooter/portfolio/settings/actions/runners"
-echo ""

scripts/directus-cleanup-redesign.mjs

@@ -0,0 +1,112 @@
+#!/usr/bin/env node
+/**
+ * Räumt Directus nach dem Plakat-Redesign auf.
+ *
+ * Erst ausführen, wenn das Redesign auf production (dk0.dev) live ist — die alte
+ * Seite liest diese Einträge noch.
+ *
+ *   node scripts/directus-cleanup-redesign.mjs            # Probelauf, ändert nichts
+ *   node scripts/directus-cleanup-redesign.mjs --apply    # sichert, dann ändern
+ *
+ * Was passiert (mit --apply):
+ *   - hobbies: alle auf status "archived" (die neue Seite zeigt keine Hobby-Karten)
+ *   - tech_stack_categories: alle auf "archived" (Tech-Stack steht jetzt im Laufband)
+ *   - messages: hero.badge, hero.line1, hero.line2, about.quote.idle löschen
+ *     (überschrieben alte Hero-Texte, werden nicht mehr gelesen)
+ *   - content_pages: home-hero und home-about (beide Sprachen) auf "archived"
+ *
+ * Vorher wird alles Betroffene vollständig nach directus-backup-redesign-<zeit>.json gesichert.
+ * Archivieren lässt sich im Directus-Admin jederzeit rückgängig machen.
+ */
+import fs from "node:fs";
+import path from "node:path";
+
+const APPLY = process.argv.includes("--apply");
+
+function loadEnv(file) {
+  if (!fs.existsSync(file)) return {};
+  return Object.fromEntries(
+    fs
+      .readFileSync(file, "utf8")
+      .split("\n")
+      .filter((l) => /^[A-Z_]+=/.test(l))
+      .map((l) => {
+        const i = l.indexOf("=");
+        return [l.slice(0, i), l.slice(i + 1).replace(/^["']|["']$/g, "")];
+      }),
+  );
+}
+
+const env = { ...loadEnv(path.join(process.cwd(), ".env")), ...process.env };
+const BASE = env.DIRECTUS_URL || "https://cms.dk0.dev";
+const TOKEN = env.DIRECTUS_STATIC_TOKEN;
+if (!TOKEN) {
+  console.error("DIRECTUS_STATIC_TOKEN fehlt (.env oder Umgebung).");
+  process.exit(1);
+}
+
+const MESSAGE_KEYS = ["hero.badge", "hero.line1", "hero.line2", "about.quote.idle"];
+const PAGE_SLUGS = ["home-hero", "home-hero-de-de", "home-about", "home-about-de-de"];
+
+async function rest(method, p, body) {
+  const res = await fetch(BASE + p, {
+    method,
+    headers: { Authorization: `Bearer ${TOKEN}`, "Content-Type": "application/json" },
+    body: body ? JSON.stringify(body) : undefined,
+  });
+  if (!res.ok) throw new Error(`${method} ${p}: HTTP ${res.status} ${await res.text()}`);
+  return res.status === 204 ? null : res.json();
+}
+
+async function gql(query) {
+  const res = await fetch(BASE + "/graphql", {
+    method: "POST",
+    headers: { Authorization: `Bearer ${TOKEN}`, "Content-Type": "application/json" },
+    body: JSON.stringify({ query }),
+  });
+  const json = await res.json();
+  if (json.errors) throw new Error(JSON.stringify(json.errors));
+  return json.data;
+}
+
+const hobbies = (await rest("GET", "/items/hobbies?fields=*,translations.*&limit=-1")).data;
+const categories = (await rest("GET", "/items/tech_stack_categories?fields=*,translations.*&limit=-1")).data;
+const messages = (await rest("GET", `/items/messages?fields=*,translations.*&limit=-1`)).data.filter((m) =>
+  MESSAGE_KEYS.includes(m.key),
+);
+const pages = (
+  await gql(`{ content_pages(limit: -1) { slug locale status title content meta_description keywords } }`)
+).content_pages.filter((p) => PAGE_SLUGS.includes(p.slug));
+
+const activeHobbies = hobbies.filter((h) => h.status !== "archived");
+const activeCategories = categories.filter((c) => c.status !== "archived");
+const activePages = pages.filter((p) => p.status !== "archived");
+
+console.log(`${APPLY ? "AUSFÜHREN" : "PROBELAUF"} gegen ${BASE}\n`);
+console.log(`hobbies archivieren:               ${activeHobbies.length} (${activeHobbies.map((h) => h.key).join(", ") || "-"})`);
+console.log(`tech_stack_categories archivieren: ${activeCategories.length} (${activeCategories.map((c) => c.key).join(", ") || "-"})`);
+console.log(`messages löschen:                  ${messages.length} (${messages.map((m) => m.key).join(", ") || "-"})`);
+console.log(`content_pages archivieren:         ${activePages.length} (${activePages.map((p) => p.slug).join(", ") || "-"})`);
+
+if (!APPLY) {
+  console.log("\nNichts geändert. Mit --apply ausführen, wenn das Redesign auf production live ist.");
+  process.exit(0);
+}
+
+const backupFile = path.join(process.cwd(), `directus-backup-redesign-${new Date().toISOString().replace(/[:.]/g, "-")}.json`);
+fs.writeFileSync(backupFile, JSON.stringify({ hobbies, categories, messages, pages }, null, 2));
+console.log(`\nSicherung: ${backupFile}`);
+
+for (const h of activeHobbies) await rest("PATCH", `/items/hobbies/${h.id}`, { status: "archived" });
+for (const c of activeCategories) await rest("PATCH", `/items/tech_stack_categories/${c.id}`, { status: "archived" });
+for (const m of messages) await rest("DELETE", `/items/messages/${m.id}`);
+for (const p of activePages) {
+  try {
+    await rest("PATCH", `/items/content_pages/${encodeURIComponent(p.slug)}`, { status: "archived" });
+  } catch {
+    // REST ist für content_pages teils gesperrt, GraphQL geht
+    await gql(`mutation { update_content_pages_item(id: "${p.slug}", data: { status: "archived" }) { slug } }`);
+  }
+}
+
+console.log("Fertig.");

scripts/empty-module.js

@@ -0,0 +1 @@
+module.exports = {};

scripts/gitea-deploy-simple.sh

@@ -1,225 +0,0 @@
-#!/bin/bash
-
-# Simplified Gitea deployment script for testing
-# This version doesn't require database dependencies
-
-set -e
-
-# Configuration
-PROJECT_NAME="portfolio"
-CONTAINER_NAME="portfolio-app-simple"
-IMAGE_NAME="portfolio-app"
-PORT=3000
-BACKUP_PORT=3001
-LOG_FILE="./logs/gitea-deploy-simple.log"
-
-# Colors for output
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-BLUE='\033[0;34m'
-NC='\033[0m' # No Color
-
-# Logging function
-log() {
-    echo -e "${BLUE}[$(date +'%Y-%m-%d %H:%M:%S')]${NC} $1" | tee -a "$LOG_FILE"
-}
-
-error() {
-    echo -e "${RED}[ERROR]${NC} $1" | tee -a "$LOG_FILE"
-}
-
-success() {
-    echo -e "${GREEN}[SUCCESS]${NC} $1" | tee -a "$LOG_FILE"
-}
-
-warning() {
-    echo -e "${YELLOW}[WARNING]${NC} $1" | tee -a "$LOG_FILE"
-}
-
-# Check if running as root (skip in CI environments)
-if [[ $EUID -eq 0 ]] && [[ -z "$CI" ]]; then
-   error "This script should not be run as root (use CI=true to override)"
-   exit 1
-fi
-
-# Check if Docker is running
-if ! docker info > /dev/null 2>&1; then
-    error "Docker is not running. Please start Docker and try again."
-    exit 1
-fi
-
-# Check if we're in the right directory
-if [ ! -f "package.json" ] || [ ! -f "Dockerfile" ]; then
-    error "Please run this script from the project root directory"
-    exit 1
-fi
-
-log "🚀 Starting simplified Gitea deployment for $PROJECT_NAME"
-
-# Step 1: Build Application
-log "🔨 Step 1: Building application..."
-
-# Build Next.js application
-log "📦 Building Next.js application..."
-npm run build || {
-    error "Build failed"
-    exit 1
-}
-
-success "✅ Application built successfully"
-
-# Step 2: Docker Operations
-log "🐳 Step 2: Docker operations..."
-
-# Build Docker image
-log "🏗️ Building Docker image..."
-docker build -t "$IMAGE_NAME:latest" . || {
-    error "Docker build failed"
-    exit 1
-}
-
-# Tag with timestamp
-TIMESTAMP=$(date +%Y%m%d-%H%M%S)
-docker tag "$IMAGE_NAME:latest" "$IMAGE_NAME:$TIMESTAMP"
-
-success "✅ Docker image built successfully"
-
-# Step 3: Deployment
-log "🚀 Step 3: Deploying application..."
-
-# Export environment variables for docker-compose compatibility
-log "📝 Exporting environment variables..."
-export NODE_ENV=${NODE_ENV:-production}
-export NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL:-https://dk0.dev}
-export MY_EMAIL=${MY_EMAIL:-contact@dk0.dev}
-export MY_INFO_EMAIL=${MY_INFO_EMAIL:-info@dk0.dev}
-export MY_PASSWORD="${MY_PASSWORD}"
-export MY_INFO_PASSWORD="${MY_INFO_PASSWORD}"
-export ADMIN_BASIC_AUTH="${ADMIN_BASIC_AUTH}"
-export LOG_LEVEL=${LOG_LEVEL:-info}
-export PORT=${PORT:-3000}
-
-# Log which variables are set (without revealing secrets)
-log "Environment variables configured:"
-log "  - NODE_ENV: ${NODE_ENV}"
-log "  - NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}"
-log "  - MY_EMAIL: ${MY_EMAIL}"
-log "  - MY_INFO_EMAIL: ${MY_INFO_EMAIL}"
-log "  - MY_PASSWORD: [SET]"
-log "  - MY_INFO_PASSWORD: [SET]"
-log "  - ADMIN_BASIC_AUTH: [SET]"
-log "  - LOG_LEVEL: ${LOG_LEVEL}"
-log "  - PORT: ${PORT}"
-
-# Check if container is running
-if [ "$(docker inspect -f '{{.State.Running}}' "$CONTAINER_NAME" 2>/dev/null)" = "true" ]; then
-    log "📦 Stopping existing container..."
-    docker stop "$CONTAINER_NAME" || true
-    docker rm "$CONTAINER_NAME" || true
-fi
-
-# Check if port is available
-if lsof -Pi :$PORT -sTCP:LISTEN -t >/dev/null ; then
-    warning "Port $PORT is in use. Trying backup port $BACKUP_PORT"
-    DEPLOY_PORT=$BACKUP_PORT
-else
-    DEPLOY_PORT=$PORT
-fi
-
-# Start new container with minimal environment variables
-log "🚀 Starting new container on port $DEPLOY_PORT..."
-docker run -d \
-    --name "$CONTAINER_NAME" \
-    --restart unless-stopped \
-    -p "$DEPLOY_PORT:3000" \
-    -e NODE_ENV=production \
-    -e NEXT_PUBLIC_BASE_URL=https://dk0.dev \
-    -e MY_EMAIL=contact@dk0.dev \
-    -e MY_INFO_EMAIL=info@dk0.dev \
-    -e MY_PASSWORD=test-password \
-    -e MY_INFO_PASSWORD=test-password \
-    -e ADMIN_BASIC_AUTH=admin:test123 \
-    -e LOG_LEVEL=info \
-    "$IMAGE_NAME:latest" || {
-    error "Failed to start container"
-    exit 1
-}
-
-# Wait for container to be ready
-log "⏳ Waiting for container to be ready..."
-sleep 20
-
-# Check if container is actually running
-if [ "$(docker inspect -f '{{.State.Running}}' "$CONTAINER_NAME" 2>/dev/null)" != "true" ]; then
-    error "Container failed to start or crashed"
-    log "Container logs:"
-    docker logs "$CONTAINER_NAME" --tail=50
-    exit 1
-fi
-
-# Health check
-log "🏥 Performing health check..."
-HEALTH_CHECK_TIMEOUT=180
-HEALTH_CHECK_INTERVAL=5
-ELAPSED=0
-
-while [ $ELAPSED -lt $HEALTH_CHECK_TIMEOUT ]; do
-    # Check if container is still running
-    if [ "$(docker inspect -f '{{.State.Running}}' "$CONTAINER_NAME" 2>/dev/null)" != "true" ]; then
-        error "Container stopped during health check"
-        log "Container logs:"
-        docker logs "$CONTAINER_NAME" --tail=50
-        exit 1
-    fi
-    
-    # Try health check endpoint
-    if curl -f "http://localhost:$DEPLOY_PORT/api/health" > /dev/null 2>&1; then
-        success "✅ Application is healthy!"
-        break
-    fi
-    
-    sleep $HEALTH_CHECK_INTERVAL
-    ELAPSED=$((ELAPSED + HEALTH_CHECK_INTERVAL))
-    echo -n "."
-done
-
-if [ $ELAPSED -ge $HEALTH_CHECK_TIMEOUT ]; then
-    error "Health check timeout. Application may not be running properly."
-    log "Container status:"
-    docker inspect "$CONTAINER_NAME" --format='{{.State.Status}} - {{.State.Health.Status}}'
-    log "Container logs:"
-    docker logs "$CONTAINER_NAME" --tail=100
-    exit 1
-fi
-
-# Step 4: Verification
-log "✅ Step 4: Verifying deployment..."
-
-# Test main page
-if curl -f "http://localhost:$DEPLOY_PORT/" > /dev/null 2>&1; then
-    success "✅ Main page is accessible"
-else
-    error "❌ Main page is not accessible"
-    exit 1
-fi
-
-# Show container status
-log "📊 Container status:"
-docker ps --filter "name=$CONTAINER_NAME" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
-
-# Show resource usage
-log "📈 Resource usage:"
-docker stats --no-stream --format "table {{.Container}}\t{{.CPUPerc}}\t{{.MemUsage}}" "$CONTAINER_NAME"
-
-# Final success message
-success "🎉 Simplified Gitea deployment completed successfully!"
-log "🌐 Application is available at: http://localhost:$DEPLOY_PORT"
-log "🏥 Health check endpoint: http://localhost:$DEPLOY_PORT/api/health"
-log "📊 Container name: $CONTAINER_NAME"
-log "📝 Logs: docker logs $CONTAINER_NAME"
-
-# Update deployment log
-echo "$(date): Simplified Gitea deployment successful - Port: $DEPLOY_PORT - Image: $IMAGE_NAME:$TIMESTAMP" >> "$LOG_FILE"
-
-exit 0

scripts/gitea-deploy.sh

@@ -1,257 +0,0 @@
-#!/bin/bash
-
-# Gitea-specific deployment script
-# Optimiert für lokalen Gitea Runner
-
-set -e
-
-# Configuration
-PROJECT_NAME="portfolio"
-CONTAINER_NAME="portfolio-app"
-IMAGE_NAME="portfolio-app"
-PORT=3000
-BACKUP_PORT=3001
-LOG_FILE="./logs/gitea-deploy.log"
-
-# Colors for output
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-BLUE='\033[0;34m'
-NC='\033[0m' # No Color
-
-# Logging function
-log() {
-    echo -e "${BLUE}[$(date +'%Y-%m-%d %H:%M:%S')]${NC} $1" | tee -a "$LOG_FILE"
-}
-
-error() {
-    echo -e "${RED}[ERROR]${NC} $1" | tee -a "$LOG_FILE"
-}
-
-success() {
-    echo -e "${GREEN}[SUCCESS]${NC} $1" | tee -a "$LOG_FILE"
-}
-
-warning() {
-    echo -e "${YELLOW}[WARNING]${NC} $1" | tee -a "$LOG_FILE"
-}
-
-# Check if running as root (skip in CI environments)
-if [[ $EUID -eq 0 ]] && [[ -z "$CI" ]]; then
-   error "This script should not be run as root (use CI=true to override)"
-   exit 1
-fi
-
-# Check if Docker is running
-if ! docker info > /dev/null 2>&1; then
-    error "Docker is not running. Please start Docker and try again."
-    exit 1
-fi
-
-# Check if we're in the right directory
-if [ ! -f "package.json" ] || [ ! -f "Dockerfile" ]; then
-    error "Please run this script from the project root directory"
-    exit 1
-fi
-
-log "🚀 Starting Gitea deployment for $PROJECT_NAME"
-
-# Step 1: Code Quality Checks
-log "📋 Step 1: Running code quality checks..."
-
-# Run linting
-log "🔍 Running ESLint..."
-npm run lint || {
-    error "ESLint failed. Please fix the issues before deploying."
-    exit 1
-}
-
-# Run tests
-log "🧪 Running tests..."
-npm run test:production || {
-    error "Tests failed. Please fix the issues before deploying."
-    exit 1
-}
-
-success "✅ Code quality checks passed"
-
-# Step 2: Build Application
-log "🔨 Step 2: Building application..."
-
-# Build Next.js application
-log "📦 Building Next.js application..."
-npm run build || {
-    error "Build failed"
-    exit 1
-}
-
-success "✅ Application built successfully"
-
-# Step 3: Docker Operations
-log "🐳 Step 3: Docker operations..."
-
-# Build Docker image
-log "🏗️ Building Docker image..."
-docker build -t "$IMAGE_NAME:latest" . || {
-    error "Docker build failed"
-    exit 1
-}
-
-# Tag with timestamp
-TIMESTAMP=$(date +%Y%m%d-%H%M%S)
-docker tag "$IMAGE_NAME:latest" "$IMAGE_NAME:$TIMESTAMP"
-
-success "✅ Docker image built successfully"
-
-# Step 4: Deployment
-log "🚀 Step 4: Deploying application..."
-
-# Export environment variables for docker-compose compatibility
-log "📝 Exporting environment variables..."
-export NODE_ENV=${NODE_ENV:-production}
-export NEXT_PUBLIC_BASE_URL=${NEXT_PUBLIC_BASE_URL:-https://dk0.dev}
-export MY_EMAIL=${MY_EMAIL:-contact@dk0.dev}
-export MY_INFO_EMAIL=${MY_INFO_EMAIL:-info@dk0.dev}
-export MY_PASSWORD="${MY_PASSWORD}"
-export MY_INFO_PASSWORD="${MY_INFO_PASSWORD}"
-export ADMIN_BASIC_AUTH="${ADMIN_BASIC_AUTH}"
-export LOG_LEVEL=${LOG_LEVEL:-info}
-export PORT=${PORT:-3000}
-
-# Log which variables are set (without revealing secrets)
-log "Environment variables configured:"
-log "  - NODE_ENV: ${NODE_ENV}"
-log "  - NEXT_PUBLIC_BASE_URL: ${NEXT_PUBLIC_BASE_URL}"
-log "  - MY_EMAIL: ${MY_EMAIL}"
-log "  - MY_INFO_EMAIL: ${MY_INFO_EMAIL}"
-log "  - MY_PASSWORD: [SET]"
-log "  - MY_INFO_PASSWORD: [SET]"
-log "  - ADMIN_BASIC_AUTH: [SET]"
-log "  - LOG_LEVEL: ${LOG_LEVEL}"
-log "  - PORT: ${PORT}"
-
-# Check if container is running
-if [ "$(docker inspect -f '{{.State.Running}}' "$CONTAINER_NAME" 2>/dev/null)" = "true" ]; then
-    log "📦 Stopping existing container..."
-    docker stop "$CONTAINER_NAME" || true
-    docker rm "$CONTAINER_NAME" || true
-fi
-
-# Check if port is available
-if lsof -Pi :$PORT -sTCP:LISTEN -t >/dev/null ; then
-    warning "Port $PORT is in use. Trying backup port $BACKUP_PORT"
-    DEPLOY_PORT=$BACKUP_PORT
-else
-    DEPLOY_PORT=$PORT
-fi
-
-# Start new container with environment variables
-log "🚀 Starting new container on port $DEPLOY_PORT..."
-docker run -d \
-    --name "$CONTAINER_NAME" \
-    --restart unless-stopped \
-    -p "$DEPLOY_PORT:3000" \
-    -e NODE_ENV=production \
-    -e NEXT_PUBLIC_BASE_URL=https://dk0.dev \
-    -e MY_EMAIL=contact@dk0.dev \
-    -e MY_INFO_EMAIL=info@dk0.dev \
-    -e MY_PASSWORD="${MY_PASSWORD:-your-email-password}" \
-    -e MY_INFO_PASSWORD="${MY_INFO_PASSWORD:-your-info-email-password}" \
-    -e ADMIN_BASIC_AUTH="${ADMIN_BASIC_AUTH:-admin:your_secure_password_here}" \
-    -e LOG_LEVEL=info \
-    "$IMAGE_NAME:latest" || {
-    error "Failed to start container"
-    exit 1
-}
-
-# Wait for container to be ready
-log "⏳ Waiting for container to be ready..."
-sleep 15
-
-# Check if container is actually running
-if [ "$(docker inspect -f '{{.State.Running}}' "$CONTAINER_NAME" 2>/dev/null)" != "true" ]; then
-    error "Container failed to start or crashed"
-    log "Container logs:"
-    docker logs "$CONTAINER_NAME" --tail=50
-    exit 1
-fi
-
-# Health check
-log "🏥 Performing health check..."
-HEALTH_CHECK_TIMEOUT=120
-HEALTH_CHECK_INTERVAL=3
-ELAPSED=0
-
-while [ $ELAPSED -lt $HEALTH_CHECK_TIMEOUT ]; do
-    # Check if container is still running
-    if [ "$(docker inspect -f '{{.State.Running}}' "$CONTAINER_NAME" 2>/dev/null)" != "true" ]; then
-        error "Container stopped during health check"
-        log "Container logs:"
-        docker logs "$CONTAINER_NAME" --tail=50
-        exit 1
-    fi
-    
-    # Try health check endpoint
-    if curl -f "http://localhost:$DEPLOY_PORT/api/health" > /dev/null 2>&1; then
-        success "✅ Application is healthy!"
-        break
-    fi
-    
-    sleep $HEALTH_CHECK_INTERVAL
-    ELAPSED=$((ELAPSED + HEALTH_CHECK_INTERVAL))
-    echo -n "."
-done
-
-if [ $ELAPSED -ge $HEALTH_CHECK_TIMEOUT ]; then
-    error "Health check timeout. Application may not be running properly."
-    log "Container status:"
-    docker inspect "$CONTAINER_NAME" --format='{{.State.Status}} - {{.State.Health.Status}}'
-    log "Container logs:"
-    docker logs "$CONTAINER_NAME" --tail=100
-    exit 1
-fi
-
-# Step 5: Verification
-log "✅ Step 5: Verifying deployment..."
-
-# Test main page
-if curl -f "http://localhost:$DEPLOY_PORT/" > /dev/null 2>&1; then
-    success "✅ Main page is accessible"
-else
-    error "❌ Main page is not accessible"
-    exit 1
-fi
-
-# Show container status
-log "📊 Container status:"
-docker ps --filter "name=$CONTAINER_NAME" --format "table {{.Names}}\t{{.Status}}\t{{.Ports}}"
-
-# Show resource usage
-log "📈 Resource usage:"
-docker stats --no-stream --format "table {{.Container}}\t{{.CPUPerc}}\t{{.MemUsage}}" "$CONTAINER_NAME"
-
-# Step 6: Cleanup
-log "🧹 Step 6: Cleaning up old images..."
-
-# Remove old images (keep last 3 versions)
-docker images "$IMAGE_NAME" --format "table {{.Tag}}\t{{.ID}}" | tail -n +2 | head -n -3 | awk '{print $2}' | xargs -r docker rmi || {
-    warning "No old images to remove"
-}
-
-# Clean up unused Docker resources
-docker system prune -f --volumes || {
-    warning "Failed to clean up Docker resources"
-}
-
-# Final success message
-success "🎉 Gitea deployment completed successfully!"
-log "🌐 Application is available at: http://localhost:$DEPLOY_PORT"
-log "🏥 Health check endpoint: http://localhost:$DEPLOY_PORT/api/health"
-log "📊 Container name: $CONTAINER_NAME"
-log "📝 Logs: docker logs $CONTAINER_NAME"
-
-# Update deployment log
-echo "$(date): Gitea deployment successful - Port: $DEPLOY_PORT - Image: $IMAGE_NAME:$TIMESTAMP" >> "$LOG_FILE"
-
-exit 0

scripts/n8n-workflow-code-updated.js

@@ -1,197 +0,0 @@
-// --------------------------------------------------------
-// DATEN AUS DEN VORHERIGEN NODES HOLEN
-// --------------------------------------------------------
-
-// 1. Spotify Node
-let spotifyData = null;
-try {
-    spotifyData = $('Spotify').first().json;
-} catch (e) {}
-
-// 2. Lanyard Node (Discord)
-let lanyardData = null;
-try {
-    lanyardData = $('Lanyard').first().json.data;
-} catch (e) {}
-
-// 3. Wakapi Summary (Tages-Statistik)
-let wakapiStats = null;
-try {
-    const wRaw = $('Wakapi').first().json;
-    // Manchmal ist es direkt im Root, manchmal unter data
-    wakapiStats = wRaw.grand_total ? wRaw : (wRaw.data ? wRaw.data : null);
-} catch (e) {}
-
-// 4. Wakapi Heartbeats (Live Check)
-let heartbeatsList = [];
-try {
-    const response = $('WakapiLast').last().json;
-    if (response.data && Array.isArray(response.data)) {
-        heartbeatsList = response.data;
-    }
-} catch (e) {}
-
-// 5. Hardcover Reading (Neu!)
-let hardcoverData = null;
-try {
-    // Falls du einen Node "Hardcover" hast
-    hardcoverData = $('Hardcover').first().json;
-} catch (e) {}
-
-
-// --------------------------------------------------------
-// LOGIK & FORMATIERUNG
-// --------------------------------------------------------
-
-// --- A. SPOTIFY / MUSIC ---
-let music = null;
-
-if (spotifyData && spotifyData.item && spotifyData.is_playing) {
-  music = {
-    isPlaying: true,
-    track: spotifyData.item.name,
-    artist: spotifyData.item.artists.map(a => a.name).join(', '),
-    album: spotifyData.item.album.name,
-    albumArt: spotifyData.item.album.images[0]?.url,
-    url: spotifyData.item.external_urls.spotify
-  };
-} else if (lanyardData?.listening_to_spotify && lanyardData.spotify) {
-  music = {
-    isPlaying: true,
-    track: lanyardData.spotify.song,
-    artist: lanyardData.spotify.artist.replace(/;/g, ", "),
-    album: lanyardData.spotify.album,
-    albumArt: lanyardData.spotify.album_art_url,
-    url: `https://open.spotify.com/track/${lanyardData.spotify.track_id}`
-  };
-}
-
-// --- B. GAMING & STATUS ---
-let gaming = null;
-let status = {
-  text: lanyardData?.discord_status || "offline",
-  color: 'gray'
-};
-
-// Farben mapping
-if (status.text === 'online') status.color = 'green';
-if (status.text === 'idle') status.color = 'yellow';
-if (status.text === 'dnd') status.color = 'red';
-
-if (lanyardData?.activities) {
-  lanyardData.activities.forEach(act => {
-    // Type 0 = Game (Spotify ignorieren)
-    if (act.type === 0 && act.name !== "Spotify") {
-      let image = null;
-      if (act.assets?.large_image) {
-        if (act.assets.large_image.startsWith("mp:external")) {
-           image = act.assets.large_image.replace(/mp:external\/([^\/]*)\/(https?)\/(^\/]*)\/(.*)/,"$2://$3/$4");
-        } else {
-           image = `https://cdn.discordapp.com/app-assets/${act.application_id}/${act.assets.large_image}.png`;
-        }
-      }
-      gaming = {
-        isPlaying: true,
-        name: act.name,
-        details: act.details,
-        state: act.state,
-        image: image
-      };
-    }
-  });
-}
-
-
-// --- C. CODING (Wakapi Logic) ---
-let coding = null;
-
-// 1. Basis-Stats von heute (Fallback)
-if (wakapiStats && wakapiStats.grand_total) {
-  coding = {
-    isActive: false, 
-    stats: {
-      time: wakapiStats.grand_total.text,
-      topLang: wakapiStats.languages?.[0]?.name || "Code",
-      topProject: wakapiStats.projects?.[0]?.name || "Project"
-    }
-  };
-}
-
-// 2. Live Check via Heartbeats
-if (heartbeatsList.length > 0) {
-    const latestBeat = heartbeatsList[heartbeatsList.length - 1];
-
-    if (latestBeat && latestBeat.time) {
-        const beatTime = new Date(latestBeat.time * 1000).getTime();
-        const now = new Date().getTime();
-        const diffMinutes = (now - beatTime) / 1000 / 60;
-
-        // Wenn jünger als 15 Minuten -> AKTIV
-        if (diffMinutes < 15) {
-            if (!coding) coding = { stats: { time: "Just started" } };
-
-            coding.isActive = true;
-            coding.project = latestBeat.project || coding.stats?.topProject;
-            
-            if (latestBeat.entity) {
-                const parts = latestBeat.entity.split(/[/\\]/);
-                coding.file = parts[parts.length - 1];
-            }
-            
-            coding.language = latestBeat.language;
-        }
-    }
-}
-
-// --- D. CUSTOM ACTIVITIES (Komplett dynamisch!) ---
-// Hier kannst du beliebige Activities hinzufügen ohne Website Code zu ändern
-let customActivities = {};
-
-// Beispiel: Reading Activity (Hardcover Integration)
-if (hardcoverData && hardcoverData.user_book) {
-  const book = hardcoverData.user_book;
-  customActivities.reading = {
-    enabled: true,
-    title: book.book?.title,
-    author: book.book?.contributions?.[0]?.author?.name,
-    progress: book.progress_pages && book.book?.pages 
-      ? Math.round((book.progress_pages / book.book.pages) * 100) 
-      : undefined,
-    coverUrl: book.book?.image_url
-  };
-}
-
-// Beispiel: Manuell gesetzt via separatem Webhook
-// Du kannst einen Webhook erstellen der customActivities setzt:
-// POST /webhook/set-custom-activity
-// {
-//   "type": "working_out",
-//   "data": {
-//     "enabled": true,
-//     "activity": "Running",
-//     "duration_minutes": 45,
-//     "distance_km": 7.2,
-//     "calories": 350
-//   }
-// }
-// Dann hier einfach: customActivities.working_out = $('SetCustomActivity').first().json.data;
-
-// WICHTIG: Du kannst auch mehrere Activities gleichzeitig haben!
-// customActivities.learning = { enabled: true, course: "Docker", platform: "Udemy", progress: 67 };
-// customActivities.streaming = { enabled: true, platform: "Twitch", viewers: 42 };
-// etc.
-
-
-// --------------------------------------------------------
-// OUTPUT
-// --------------------------------------------------------
-return {
-  json: {
-    status,
-    music,
-    gaming,
-    coding,
-    customActivities, // NEU! Komplett dynamisch
-    timestamp: new Date().toISOString()
-  }
-};

scripts/setup-gitea-runner.sh

@@ -1,192 +0,0 @@
-#!/bin/bash
-
-# Gitea Runner Setup Script
-# Installiert und konfiguriert einen lokalen Gitea Runner
-
-set -e
-
-# Configuration
-GITEA_URL="${GITEA_URL:-http://localhost:3000}"
-RUNNER_NAME="${RUNNER_NAME:-portfolio-runner}"
-RUNNER_LABELS="${RUNNER_LABELS:-ubuntu-latest,self-hosted,portfolio}"
-RUNNER_WORK_DIR="${RUNNER_WORK_DIR:-/tmp/gitea-runner}"
-
-# Colors for output
-RED='\033[0;31m'
-GREEN='\033[0;32m'
-YELLOW='\033[1;33m'
-BLUE='\033[0;34m'
-NC='\033[0m' # No Color
-
-# Logging function
-log() {
-    echo -e "${BLUE}[$(date +'%Y-%m-%d %H:%M:%S')]${NC} $1"
-}
-
-error() {
-    echo -e "${RED}[ERROR]${NC} $1"
-}
-
-success() {
-    echo -e "${GREEN}[SUCCESS]${NC} $1"
-}
-
-warning() {
-    echo -e "${YELLOW}[WARNING]${NC} $1"
-}
-
-# Check if running as root (skip in CI environments)
-if [[ $EUID -eq 0 ]] && [[ -z "$CI" ]]; then
-   error "This script should not be run as root (use CI=true to override)"
-   exit 1
-fi
-
-log "🚀 Setting up Gitea Runner for Portfolio"
-
-# Check if Gitea URL is accessible
-log "🔍 Checking Gitea server accessibility..."
-if ! curl -f "$GITEA_URL" > /dev/null 2>&1; then
-    error "Cannot access Gitea server at $GITEA_URL"
-    error "Please make sure Gitea is running and accessible"
-    exit 1
-fi
-success "✅ Gitea server is accessible"
-
-# Create runner directory
-log "📁 Creating runner directory..."
-mkdir -p "$RUNNER_WORK_DIR"
-cd "$RUNNER_WORK_DIR"
-
-# Download Gitea Runner
-log "📥 Downloading Gitea Runner..."
-RUNNER_VERSION="latest"
-RUNNER_ARCH="linux-amd64"
-
-# Get latest version
-if [ "$RUNNER_VERSION" = "latest" ]; then
-    RUNNER_VERSION=$(curl -s https://api.github.com/repos/woodpecker-ci/woodpecker/releases/latest | grep -o '"tag_name": "[^"]*' | grep -o '[^"]*$')
-fi
-
-RUNNER_URL="https://github.com/woodpecker-ci/woodpecker/releases/download/${RUNNER_VERSION}/woodpecker-agent_${RUNNER_VERSION}_${RUNNER_ARCH}.tar.gz"
-
-log "Downloading from: $RUNNER_URL"
-curl -L -o woodpecker-agent.tar.gz "$RUNNER_URL"
-
-# Extract runner
-log "📦 Extracting Gitea Runner..."
-tar -xzf woodpecker-agent.tar.gz
-chmod +x woodpecker-agent
-
-success "✅ Gitea Runner downloaded and extracted"
-
-# Create systemd service
-log "⚙️ Creating systemd service..."
-sudo tee /etc/systemd/system/gitea-runner.service > /dev/null <<EOF
-[Unit]
-Description=Gitea Runner for Portfolio
-After=network.target
-
-[Service]
-Type=simple
-User=$USER
-WorkingDirectory=$RUNNER_WORK_DIR
-ExecStart=$RUNNER_WORK_DIR/woodpecker-agent
-Restart=always
-RestartSec=5
-Environment=WOODPECKER_SERVER=$GITEA_URL
-Environment=WOODPECKER_AGENT_SECRET=
-Environment=WOODPECKER_LOG_LEVEL=info
-
-[Install]
-WantedBy=multi-user.target
-EOF
-
-# Reload systemd
-sudo systemctl daemon-reload
-
-success "✅ Systemd service created"
-
-# Instructions for manual registration
-log "📋 Manual registration required:"
-echo ""
-echo "1. Go to your Gitea instance: $GITEA_URL"
-echo "2. Navigate to: Settings → Actions → Runners"
-echo "3. Click 'Create new Runner'"
-echo "4. Copy the registration token"
-echo "5. Run the following command:"
-echo ""
-echo "   cd $RUNNER_WORK_DIR"
-echo "   ./woodpecker-agent register --server $GITEA_URL --token YOUR_TOKEN"
-echo ""
-echo "6. After registration, start the service:"
-echo "   sudo systemctl enable gitea-runner"
-echo "   sudo systemctl start gitea-runner"
-echo ""
-echo "7. Check status:"
-echo "   sudo systemctl status gitea-runner"
-echo ""
-
-# Create helper scripts
-log "📝 Creating helper scripts..."
-
-# Start script
-cat > "$RUNNER_WORK_DIR/start-runner.sh" << 'EOF'
-#!/bin/bash
-echo "Starting Gitea Runner..."
-sudo systemctl start gitea-runner
-sudo systemctl status gitea-runner
-EOF
-
-# Stop script
-cat > "$RUNNER_WORK_DIR/stop-runner.sh" << 'EOF'
-#!/bin/bash
-echo "Stopping Gitea Runner..."
-sudo systemctl stop gitea-runner
-EOF
-
-# Status script
-cat > "$RUNNER_WORK_DIR/status-runner.sh" << 'EOF'
-#!/bin/bash
-echo "Gitea Runner Status:"
-sudo systemctl status gitea-runner
-echo ""
-echo "Logs (last 20 lines):"
-sudo journalctl -u gitea-runner -n 20 --no-pager
-EOF
-
-# Logs script
-cat > "$RUNNER_WORK_DIR/logs-runner.sh" << 'EOF'
-#!/bin/bash
-echo "Gitea Runner Logs:"
-sudo journalctl -u gitea-runner -f
-EOF
-
-chmod +x "$RUNNER_WORK_DIR"/*.sh
-
-success "✅ Helper scripts created"
-
-# Create environment file
-cat > "$RUNNER_WORK_DIR/.env" << EOF
-# Gitea Runner Configuration
-GITEA_URL=$GITEA_URL
-RUNNER_NAME=$RUNNER_NAME
-RUNNER_LABELS=$RUNNER_LABELS
-RUNNER_WORK_DIR=$RUNNER_WORK_DIR
-EOF
-
-log "📋 Setup Summary:"
-echo "  • Runner Directory: $RUNNER_WORK_DIR"
-echo "  • Gitea URL: $GITEA_URL"
-echo "  • Runner Name: $RUNNER_NAME"
-echo "  • Labels: $RUNNER_LABELS"
-echo "  • Helper Scripts: $RUNNER_WORK_DIR/*.sh"
-echo ""
-
-log "🎯 Next Steps:"
-echo "1. Register the runner in Gitea web interface"
-echo "2. Enable and start the service"
-echo "3. Test with a workflow run"
-echo ""
-
-success "🎉 Gitea Runner setup completed!"
-log "📁 All files are in: $RUNNER_WORK_DIR"

scripts/setup-snippets.js

@@ -1,79 +0,0 @@
-
-/* eslint-disable @typescript-eslint/no-require-imports */
-const fetch = require('node-fetch');
-require('dotenv').config();
-
-const DIRECTUS_URL = process.env.DIRECTUS_URL || 'https://cms.dk0.dev';
-const DIRECTUS_TOKEN = process.env.DIRECTUS_STATIC_TOKEN;
-
-async function setupSnippets() {
-  console.log('📦 Setting up Snippets collection...');
-
-  // 1. Create Collection
-  try {
-    await fetch(`${DIRECTUS_URL}/collections`, {
-      method: 'POST',
-      headers: { 'Authorization': `Bearer ${DIRECTUS_TOKEN}`, 'Content-Type': 'application/json' },
-      body: JSON.stringify({
-        collection: 'snippets',
-        meta: { icon: 'terminal', display_template: '{{title}}' },
-        schema: { name: 'snippets' }
-      })
-    });
-  } catch (_e) {}
-
-  // 2. Add Fields
-  const fields = [
-    { field: 'status', type: 'string', meta: { interface: 'select-dropdown' }, schema: { default_value: 'published' } },
-    { field: 'title', type: 'string', meta: { interface: 'input' } },
-    { field: 'category', type: 'string', meta: { interface: 'input' } },
-    { field: 'code', type: 'text', meta: { interface: 'input-code' } },
-    { field: 'description', type: 'text', meta: { interface: 'textarea' } },
-    { field: 'language', type: 'string', meta: { interface: 'input' }, schema: { default_value: 'javascript' } },
-    { field: 'featured', type: 'boolean', meta: { interface: 'boolean' }, schema: { default_value: false } }
-  ];
-
-  for (const f of fields) {
-    try {
-      await fetch(`${DIRECTUS_URL}/fields/snippets`, {
-        method: 'POST',
-        headers: { 'Authorization': `Bearer ${DIRECTUS_TOKEN}`, 'Content-Type': 'application/json' },
-        body: JSON.stringify(f)
-      });
-    } catch (_e) {}
-  }
-
-  // 3. Add Example Data
-  const exampleSnippets = [
-    {
-      title: 'Traefik SSL Config',
-      category: 'Docker',
-      language: 'yaml',
-      featured: true,
-      description: "Meine Standard-Konfiguration für automatisches SSL via Let's Encrypt in Docker Swarm.",
-      code: "labels:\n  - \"traefik.enable=true\"\n  - \"traefik.http.routers.myapp.rule=Host(`example.com`)\"\n  - \"traefik.http.routers.myapp.entrypoints=websecure\"\n  - \"traefik.http.routers.myapp.tls.certresolver=myresolver\""
-    },
-    {
-      title: 'Docker Cleanup Alias',
-      category: 'ZSH',
-      language: 'bash',
-      featured: true,
-      description: 'Ein einfacher Alias, um ungenutzte Docker-Container, Images und Volumes schnell zu entfernen.',
-      code: "alias dclean='docker system prune -af --volumes'"
-    }
-  ];
-
-  for (const s of exampleSnippets) {
-    try {
-      await fetch(`${DIRECTUS_URL}/items/snippets`, {
-        method: 'POST',
-        headers: { 'Authorization': `Bearer ${DIRECTUS_TOKEN}`, 'Content-Type': 'application/json' },
-        body: JSON.stringify(s)
-      });
-    } catch (_e) {}
-  }
-
-  console.log('✅ Snippets setup complete!');
-}
-
-setupSnippets();

tailwind.config.ts

@@ -4,6 +4,11 @@ import type { Config } from "tailwindcss";
 // tailwind.config.js
 export default {
   darkMode: "class", // Enables class-based dark mode
+  // Touch devices fire :hover on tap and keep it stuck; only apply hover styles
+  // where a real pointer exists.
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   content: [
     "./app/**/*.{js,ts,jsx,tsx}",
     "./app/components/**/*.{js,ts,jsx,tsx}",
@@ -11,19 +16,43 @@ export default {
   ],
   theme: {
     extend: {
+      // Stronger curves than the CSS defaults. Overriding `out` and `in-out`
+      // upgrades every existing `ease-out` / `ease-in-out` utility at once.
+      transitionTimingFunction: {
+        out: "cubic-bezier(0.23, 1, 0.32, 1)",
+        "in-out": "cubic-bezier(0.77, 0, 0.175, 1)",
+        drawer: "cubic-bezier(0.32, 0.72, 0, 1)",
+      },
       keyframes: {
         fadeIn: {
-          "0%": { opacity: "0", transform: "translateY(10px)" },
+          "0%": { opacity: "0", transform: "translateY(8px)" },
           "100%": { opacity: "1", transform: "translateY(0)" },
         },
         slideDown: {
-          "0%": { opacity: "0", transform: "translateY(-20px)" },
+          "0%": { opacity: "0", transform: "translateY(-12px)" },
           "100%": { opacity: "1", transform: "translateY(0)" },
         },
+        wordmarkUp: {
+          "0%": { opacity: "0", transform: "translateY(40%)" },
+          "100%": { opacity: "1", transform: "translateY(0)" },
+        },
+        marquee: {
+          "0%": { transform: "translateX(0)" },
+          "100%": { transform: "translateX(-50%)" },
+        },
+        scrollHint: {
+          "0%": { opacity: "0", transform: "scaleY(0.4)" },
+          "40%": { opacity: "1", transform: "scaleY(1)" },
+          "100%": { opacity: "0", transform: "scaleY(1)" },
+        },
       },
       animation: {
-        "fade-in": "fadeIn 0.5s ease-out",
-        "slide-down": "slideDown 0.4s ease-out",
+        "fade-in": "fadeIn 600ms cubic-bezier(0.23, 1, 0.32, 1) both",
+        "slide-down": "slideDown 500ms cubic-bezier(0.23, 1, 0.32, 1) both",
+        "scroll-hint": "scrollHint 2.4s cubic-bezier(0.77, 0, 0.175, 1) infinite",
+        "spin-slow": "spin 4s linear infinite",
+        "wordmark-up": "wordmarkUp 900ms cubic-bezier(0.23, 1, 0.32, 1) both",
+        marquee: "marquee 32s linear infinite",
       },
       colors: {
         background: "var(--background)",
@@ -59,6 +88,17 @@ export default {
         border: "var(--border)",
         input: "var(--input)",
         ring: "var(--ring)",
+        // Plakat-Design: Rot, Tinte, Papier. Tinte und Papier tauschen im Dark Mode die Rollen.
+        signal: "rgb(var(--plakat-red) / <alpha-value>)",
+        ink: "rgb(var(--plakat-ink) / <alpha-value>)",
+        paper: {
+          DEFAULT: "rgb(var(--plakat-paper) / <alpha-value>)",
+          2: "rgb(var(--plakat-paper-2) / <alpha-value>)",
+        },
+        ok: "rgb(var(--plakat-ok) / <alpha-value>)",
+        // Feste Objektfarben auf dem Tisch, unabhängig vom Theme
+        polaroid: { DEFAULT: "#fbfaf8", ink: "#140c0b" },
+        bookcover: { DEFAULT: "#2b1a14", text: "#f3e7dc" },
         // Warm brown palette
         cream: "#FAF8F3",
         sand: "#EFEBE9",
@@ -103,9 +143,10 @@ export default {
         },
       },
       fontFamily: {
-        sans: ["var(--font-inter)", "sans-serif"],
-        serif: ["var(--font-playfair)", "Georgia", "serif"],
-        mono: ["var(--font-roboto-mono)", "Monaco", "Courier New", "monospace"],
+        sans: ["var(--font-geist)", "Helvetica Neue", "Arial", "sans-serif"],
+        display: ["var(--font-bricolage)", "Avenir Next", "Segoe UI", "sans-serif"],
+        serif: ["var(--font-bricolage)", "Avenir Next", "Segoe UI", "sans-serif"],
+        mono: ["var(--font-geist-mono)", "SF Mono", "Menlo", "monospace"],
       },
     },
   },

types/translations.ts

@@ -20,51 +20,6 @@ export interface FooterTranslations {
   builtWith: string;
 }
 
-export interface HeroTranslations {
-  description: string;
-  ctaWork: string;
-  ctaContact: string;
-  features: {
-    f1: string;
-    f2: string;
-    f3: string;
-  };
-}
-
-export interface AboutTranslations {
-  title: string;
-  p1: string;
-  p2: string;
-  p3: string;
-  funFactTitle: string;
-  funFactBody: string;
-  techStackTitle: string;
-  techStack: {
-    categories: {
-      frontendMobile: string;
-      backendDevops: string;
-      toolsAutomation: string;
-      securityAdmin: string;
-    };
-    items: {
-      selfHostedServices: string;
-    };
-  };
-  hobbiesTitle: string;
-  hobbies: {
-    selfHosting: string;
-    gaming: string;
-    gameServers: string;
-    jogging: string;
-  };
-}
-
-export interface ProjectsTranslations {
-  title: string;
-  subtitle: string;
-  viewAll: string;
-}
-
 export interface ContactTranslations {
   title: string;
   subtitle: string;