Refactor for i18n, CMS integration, and project slugs; enhance admin & analytics

Co-authored-by: dennis <dennis@konkol.net>

app/[locale]/layout.tsx

@@ -0,0 +1,21 @@
+import { NextIntlClientProvider } from "next-intl";
+import { getMessages } from "next-intl/server";
+import React from "react";
+
+export default async function LocaleLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  const messages = await getMessages({ locale });
+
+  return (
+    <NextIntlClientProvider locale={locale} messages={messages}>
+      {children}
+    </NextIntlClientProvider>
+  );
+}
+

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

@@ -0,0 +1,2 @@
+export { default } from "../../legal-notice/page";
+

app/[locale]/page.tsx

@@ -0,0 +1,2 @@
+export { default } from "../_ui/HomePage";
+

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

@@ -0,0 +1,2 @@
+export { default } from "../../privacy-policy/page";
+

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

@@ -0,0 +1,36 @@
+import { prisma } from "@/lib/prisma";
+import ProjectDetailClient from "@/app/_ui/ProjectDetailClient";
+import { notFound } from "next/navigation";
+
+export const revalidate = 300;
+
+export default async function ProjectPage({
+  params,
+}: {
+  params: Promise<{ locale: string; slug: string }>;
+}) {
+  const { locale, slug } = await params;
+
+  const project = await prisma.project.findFirst({
+    where: { slug, published: true },
+    include: {
+      translations: {
+        where: { locale },
+        select: { title: true, description: true },
+      },
+    },
+  });
+
+  if (!project) return notFound();
+
+  const tr = project.translations?.[0];
+  const { translations: _translations, ...rest } = project;
+  const localized = {
+    ...rest,
+    title: tr?.title ?? project.title,
+    description: tr?.description ?? project.description,
+  };
+
+  return <ProjectDetailClient project={localized} locale={locale} />;
+}
+

app/[locale]/projects/page.tsx

@@ -0,0 +1,36 @@
+import { prisma } from "@/lib/prisma";
+import ProjectsPageClient from "@/app/_ui/ProjectsPageClient";
+
+export const revalidate = 300;
+
+export default async function ProjectsPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+
+  const projects = await prisma.project.findMany({
+    where: { published: true },
+    orderBy: { createdAt: "desc" },
+    include: {
+      translations: {
+        where: { locale },
+        select: { title: true, description: true },
+      },
+    },
+  });
+
+  const localized = projects.map((p) => {
+    const tr = p.translations?.[0];
+    const { translations: _translations, ...rest } = p;
+    return {
+      ...rest,
+      title: tr?.title ?? p.title,
+      description: tr?.description ?? p.description,
+    };
+  });
+
+  return <ProjectsPageClient projects={localized} locale={locale} />;
+}
+

app/__tests__/components/Header.test.tsx

@@ -21,7 +21,7 @@ describe('Header', () => {
   it('renders the mobile header', () => {
     render(<Header />);
     // Check for mobile menu button (hamburger icon)
-    const menuButton = screen.getByRole('button');
+    const menuButton = screen.getByLabelText('Open menu');
     expect(menuButton).toBeInTheDocument();
   });
 });

app/_ui/HomePage.tsx

@@ -0,0 +1,182 @@
+"use client";
+
+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 dynamic from "next/dynamic";
+import ErrorBoundary from "@/components/ErrorBoundary";
+import { motion } from "framer-motion";
+
+// Wrap ActivityFeed in error boundary to prevent crashes
+const ActivityFeed = dynamic(
+  () =>
+    import("../components/ActivityFeed").catch(() => ({ default: () => null })),
+  {
+    ssr: false,
+    loading: () => null,
+  },
+);
+
+export default function HomePage() {
+  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",
+            ],
+          }),
+        }}
+      />
+      <ErrorBoundary>
+        <ActivityFeed />
+      </ErrorBoundary>
+      <Header />
+      {/* Spacer to prevent navbar overlap */}
+      <div className="h-24 md:h-32" aria-hidden="true"></div>
+      <main className="relative">
+        <Hero />
+
+        {/* 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"
+          >
+            <motion.path
+              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
+              fill="url(#gradient1)"
+              initial={{ opacity: 0 }}
+              animate={{
+                opacity: 1,
+                d: [
+                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
+                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
+                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
+                ],
+              }}
+              transition={{
+                opacity: { duration: 0.8, delay: 0.3 },
+                d: {
+                  duration: 12,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                },
+              }}
+            />
+            <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-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <motion.path
+              d="M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z"
+              fill="url(#gradient2)"
+              initial={{ opacity: 0 }}
+              animate={{
+                opacity: 1,
+                d: [
+                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
+                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
+                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
+                ],
+              }}
+              transition={{
+                opacity: { duration: 0.8, delay: 0.3 },
+                d: {
+                  duration: 14,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                },
+              }}
+            />
+            <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-24 overflow-hidden">
+          <svg
+            className="absolute inset-0 w-full h-full"
+            viewBox="0 0 1440 120"
+            preserveAspectRatio="none"
+          >
+            <motion.path
+              d="M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z"
+              fill="url(#gradient3)"
+              initial={{ opacity: 0 }}
+              animate={{
+                opacity: 1,
+                d: [
+                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
+                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
+                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
+                ],
+              }}
+              transition={{
+                opacity: { duration: 0.8, delay: 0.3 },
+                d: {
+                  duration: 16,
+                  repeat: Infinity,
+                  ease: "easeInOut",
+                },
+              }}
+            />
+            <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/ProjectDetailClient.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from "lucide-react";
+import Link from "next/link";
+import { useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+
+export type ProjectDetailData = {
+  id: number;
+  slug: string;
+  title: string;
+  description: string;
+  content: string;
+  tags: string[];
+  featured: boolean;
+  category: string;
+  date: string;
+  github?: string | null;
+  live?: string | null;
+  imageUrl?: string | null;
+};
+
+export default function ProjectDetailClient({
+  project,
+  locale,
+}: {
+  project: ProjectDetailData;
+  locale: string;
+}) {
+  // Track page view (non-blocking)
+  useEffect(() => {
+    try {
+      navigator.sendBeacon?.(
+        "/api/analytics/track",
+        new Blob(
+          [
+            JSON.stringify({
+              type: "pageview",
+              projectId: project.id.toString(),
+              page: `/${locale}/projects/${project.slug}`,
+            }),
+          ],
+          { type: "application/json" },
+        ),
+      );
+    } catch {
+      // ignore
+    }
+  }, [project.id, project.slug, locale]);
+
+  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">Back to Projects</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 ? (
+            // eslint-disable-next-line @next/next/no-img-element
+            <img src={project.imageUrl} alt={project.title} 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={{
+                  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>
+  );
+}
+

app/_ui/ProjectsPageClient.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { motion } from "framer-motion";
+import { ExternalLink, Github, Calendar, ArrowLeft, Search } from "lucide-react";
+import Link from "next/link";
+
+export type ProjectListItem = {
+  id: number;
+  slug: string;
+  title: string;
+  description: string;
+  content: string;
+  tags: string[];
+  featured: boolean;
+  category: string;
+  date: string;
+  github?: string | null;
+  live?: string | null;
+  imageUrl?: string | null;
+};
+
+export default function ProjectsPageClient({
+  projects,
+  locale,
+}: {
+  projects: ProjectListItem[];
+  locale: string;
+}) {
+  const [selectedCategory, setSelectedCategory] = useState("All");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const categories = useMemo(() => {
+    const unique = Array.from(new Set(projects.map((p) => p.category))).filter(Boolean);
+    return ["All", ...unique];
+  }, [projects]);
+
+  const filteredProjects = useMemo(() => {
+    let result = projects;
+
+    if (selectedCategory !== "All") {
+      result = result.filter((project) => project.category === selectedCategory);
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (project) =>
+          project.title.toLowerCase().includes(query) ||
+          project.description.toLowerCase().includes(query) ||
+          project.tags.some((tag) => tag.toLowerCase().includes(query)),
+      );
+    }
+
+    return 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>Back to Home</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 ? (
+                  <>
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={project.imageUrl}
+                      alt={project.title}
+                      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>
+  );
+}
+

app/api/analytics/track/route.ts

@@ -26,7 +26,20 @@ export async function POST(request: NextRequest) {
 
     // Track page view
     if (type === 'pageview' && page) {
-      const projectIdNum = projectId ? parseInt(projectId.toString()) : null;
+      let projectIdNum: number | null = null;
+      if (projectId != null) {
+        const raw = projectId.toString();
+        const parsed = parseInt(raw, 10);
+        if (Number.isFinite(parsed)) {
+          projectIdNum = parsed;
+        } else {
+          const bySlug = await prisma.project.findFirst({
+            where: { slug: raw },
+            select: { id: true },
+          });
+          projectIdNum = bySlug?.id ?? null;
+        }
+      }
       
       // Create page view record
       await prisma.pageView.create({
@@ -83,7 +96,7 @@ export async function POST(request: NextRequest) {
               where: {
                 OR: [
                   { id: parseInt(slug) || 0 },
-                  { title: { contains: slug, mode: 'insensitive' } }
+                  { slug }
                 ]
               }
             });

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

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

app/api/content/page/route.ts

@@ -0,0 +1,18 @@
+import { NextRequest, NextResponse } from "next/server";
+import { getContentByKey } from "@/lib/content";
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const key = searchParams.get("key");
+  const locale = searchParams.get("locale") || "en";
+
+  if (!key) {
+    return NextResponse.json({ error: "key is required" }, { status: 400 });
+  }
+
+  const translation = await getContentByKey({ key, locale });
+  if (!translation) return NextResponse.json({ content: null });
+
+  return NextResponse.json({ content: translation });
+}
+

app/api/content/pages/route.ts

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

app/api/email/route.tsx

@@ -2,10 +2,8 @@ import { type NextRequest, NextResponse } from "next/server";
 import nodemailer from "nodemailer";
 import SMTPTransport from "nodemailer/lib/smtp-transport";
 import Mail from "nodemailer/lib/mailer";
-import { PrismaClient } from '@prisma/client';
 import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
-
-const prisma = new PrismaClient();
+import { prisma } from "@/lib/prisma";
 
 // Sanitize input to prevent XSS
 function sanitizeInput(input: string, maxLength: number = 10000): string {
@@ -123,11 +121,11 @@ export async function POST(request: NextRequest) {
             connectionTimeout: 30000, // 30 seconds
             greetingTimeout: 30000,   // 30 seconds
             socketTimeout: 60000,     // 60 seconds
-            // Additional TLS options for better compatibility
-            tls: {
-                rejectUnauthorized: false, // Allow self-signed certificates
-                ciphers: 'SSLv3'
-            }
+            // TLS: allow opting into self-signed certificates if needed
+            tls:
+              process.env.SMTP_ALLOW_SELF_SIGNED === "true"
+                ? { rejectUnauthorized: false }
+                : undefined,
         };
 
         // Creating transport with configured options

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

@@ -3,6 +3,7 @@ import { prisma } from '@/lib/prisma';
 import { apiCache } from '@/lib/cache';
 import { checkRateLimit, getRateLimitHeaders, requireSessionAuth } from '@/lib/auth';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
+import { generateUniqueSlug } from '@/lib/slug';
 
 export async function GET(
   request: NextRequest,
@@ -88,12 +89,37 @@ export async function PUT(
     const data = await request.json();
     
     // Remove difficulty field if it exists (since we're removing it)
-    const { difficulty, ...projectData } = data;
+    const { difficulty, slug, defaultLocale, ...projectData } = data;
+
+    // Keep slug stable by default; only update if explicitly provided,
+    // or if the project currently has no slug (e.g. after migration).
+    const existing = await prisma.project.findUnique({
+      where: { id },
+      select: { slug: true, title: true },
+    });
+
+    const nextSlug =
+      typeof slug === 'string' && slug.trim()
+        ? slug.trim()
+        : existing?.slug?.trim()
+          ? existing.slug
+          : await generateUniqueSlug({
+              base: String(projectData.title || existing?.title || 'project'),
+              isTaken: async (candidate) => {
+                const found = await prisma.project.findUnique({
+                  where: { slug: candidate },
+                  select: { id: true },
+                });
+                return !!found && found.id !== id;
+              },
+            });
     
     const project = await prisma.project.update({
       where: { id },
       data: { 
         ...projectData, 
+        slug: nextSlug,
+        defaultLocale: typeof defaultLocale === 'string' && defaultLocale ? defaultLocale : undefined,
         updatedAt: new Date(),
         // Keep existing difficulty if not provided
         ...(difficulty ? { difficulty } : {})

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

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

app/api/projects/route.ts

@@ -3,6 +3,7 @@ import { prisma } from '@/lib/prisma';
 import { apiCache } from '@/lib/cache';
 import { requireSessionAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
 import { PrismaClientKnownRequestError } from '@prisma/client/runtime/library';
+import { generateUniqueSlug } from '@/lib/slug';
 
 export async function GET(request: NextRequest) {
   try {
@@ -154,11 +155,27 @@ export async function POST(request: NextRequest) {
     
     // Remove difficulty field if it exists (since we're removing it)
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { difficulty, ...projectData } = data;
+    const { difficulty, slug, defaultLocale, ...projectData } = data;
+
+    const derivedSlug =
+      typeof slug === 'string' && slug.trim()
+        ? slug.trim()
+        : await generateUniqueSlug({
+            base: String(projectData.title || 'project'),
+            isTaken: async (candidate) => {
+              const existing = await prisma.project.findUnique({
+                where: { slug: candidate },
+                select: { id: true },
+              });
+              return !!existing;
+            },
+          });
     
     const project = await prisma.project.create({
       data: {
         ...projectData,
+        slug: derivedSlug,
+        defaultLocale: typeof defaultLocale === 'string' && defaultLocale ? defaultLocale : undefined,
         // Set default difficulty since it's required in schema
         difficulty: 'INTERMEDIATE',
         performance: data.performance || { lighthouse: 0, bundleSize: '0KB', loadTime: '0s' },

app/api/projects/search/route.ts

@@ -9,28 +9,15 @@ export async function GET(request: NextRequest) {
     const category = searchParams.get('category');
 
     if (slug) {
-      // Search by slug (convert title to slug format)
-      const projects = await prisma.project.findMany({
+      const project = await prisma.project.findFirst({
         where: {
-          published: true
+          published: true,
+          slug,
         },
-        orderBy: { createdAt: 'desc' }
+        orderBy: { createdAt: 'desc' },
       });
 
-      // Find exact match by converting titles to slugs
-      const foundProject = projects.find(project => {
-        const projectSlug = project.title.toLowerCase()
-          .replace(/[^a-z0-9]+/g, '-')
-          .replace(/^-+|-+$/g, '');
-        return projectSlug === slug;
-      });
-
-      if (foundProject) {
-        return NextResponse.json({ projects: [foundProject] });
-      }
-
-      // If no exact match, return empty array
-      return NextResponse.json({ projects: [] });
+      return NextResponse.json({ projects: project ? [project] : [] });
     }
 
     if (search) {

app/components/About.tsx

@@ -2,6 +2,10 @@
 
 import { motion, Variants } from "framer-motion";
 import { Globe, Server, Wrench, Shield, Gamepad2, Code, Activity, Lightbulb } from "lucide-react";
+import { useEffect, useState } from "react";
+import { useLocale } from "next-intl";
+import type { JSONContent } from "@tiptap/react";
+import RichTextClient from "./RichTextClient";
 
 const staggerContainer: Variants = {
   hidden: { opacity: 0 },
@@ -27,6 +31,25 @@ const fadeInUp: Variants = {
 };
 
 const About = () => {
+  const locale = useLocale();
+  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(
+          `/api/content/page?key=${encodeURIComponent("home-about")}&locale=${encodeURIComponent(locale)}`,
+        );
+        const data = await res.json();
+        if (data?.content?.content) {
+          setCmsDoc(data.content.content as JSONContent);
+        }
+      } catch {
+        // ignore; fallback to static
+      }
+    })();
+  }, [locale]);
+
   const techStack = [
     {
       category: "Frontend & Mobile",
@@ -82,6 +105,10 @@ const About = () => {
               variants={fadeInUp}
               className="prose prose-stone prose-lg text-stone-700 space-y-4"
             >
+              {cmsDoc ? (
+                <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
+              ) : (
+                <>
                   <p>
                     Hi, I&apos;m Dennis – a student and passionate self-hoster based
                     in Osnabrück, Germany.
@@ -102,6 +129,8 @@ const About = () => {
                     experimenting with new tech like game servers or automation
                     workflows with <strong>n8n</strong>.
                   </p>
+                </>
+              )}
               <motion.div
                 variants={fadeInUp}
                 className="relative overflow-hidden bg-gradient-to-br from-liquid-mint/15 via-liquid-sky/10 to-liquid-lavender/15 border-2 border-liquid-mint/30 rounded-xl p-5 backdrop-blur-sm"

app/components/ClientProviders.tsx

@@ -6,6 +6,8 @@ import dynamic from "next/dynamic";
 import { ToastProvider } from "@/components/Toast";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import { AnalyticsProvider } from "@/components/AnalyticsProvider";
+import { ConsentProvider, useConsent } from "./ConsentProvider";
+import ConsentBanner from "./ConsentBanner";
 
 // Dynamic import with SSR disabled to avoid framer-motion issues
 const BackgroundBlobs = dynamic(() => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })), {
@@ -70,16 +72,44 @@ export default function ClientProviders({
   return (
     <ErrorBoundary>
       <ErrorBoundary>
-        <AnalyticsProvider>
-          <ErrorBoundary>
-            <ToastProvider>
-              {mounted && <BackgroundBlobs />}
-              <div className="relative z-10">{children}</div>
-              {mounted && !is404Page && <ChatWidget />}
-            </ToastProvider>
-          </ErrorBoundary>
-        </AnalyticsProvider>
+        <ConsentProvider>
+          <GatedProviders mounted={mounted} is404Page={is404Page}>
+            {children}
+          </GatedProviders>
+        </ConsentProvider>
       </ErrorBoundary>
     </ErrorBoundary>
   );
 }
+
+function GatedProviders({
+  children,
+  mounted,
+  is404Page,
+}: {
+  children: React.ReactNode;
+  mounted: boolean;
+  is404Page: boolean;
+}) {
+  const { consent } = useConsent();
+  const pathname = usePathname();
+
+  const isAdminRoute = pathname.startsWith("/manage") || pathname.startsWith("/editor");
+
+  // If consent is not decided yet, treat optional features as off
+  const analyticsEnabled = !!consent?.analytics;
+  const chatEnabled = !!consent?.chat;
+
+  const content = (
+    <ErrorBoundary>
+      <ToastProvider>
+        {mounted && <BackgroundBlobs />}
+        <div className="relative z-10">{children}</div>
+        {mounted && !isAdminRoute && <ConsentBanner />}
+        {mounted && !is404Page && !isAdminRoute && chatEnabled && <ChatWidget />}
+      </ToastProvider>
+    </ErrorBoundary>
+  );
+
+  return analyticsEnabled ? <AnalyticsProvider>{content}</AnalyticsProvider> : content;
+}

app/components/ConsentBanner.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { useConsent, type ConsentState } from "./ConsentProvider";
+
+export default function ConsentBanner() {
+  const { consent, setConsent } = useConsent();
+  const [draft, setDraft] = useState<ConsentState>({ analytics: false, chat: false });
+
+  const shouldShow = useMemo(() => consent === null, [consent]);
+  if (!shouldShow) return null;
+
+  const locale = useMemo(() => {
+    if (typeof document === "undefined") return "en";
+    const match = document.cookie
+      .split(";")
+      .map((c) => c.trim())
+      .find((c) => c.startsWith("NEXT_LOCALE="));
+    if (!match) return "en";
+    return decodeURIComponent(match.split("=").slice(1).join("=")) || "en";
+  }, []);
+
+  const s = locale === "de"
+    ? {
+        title: "Datenschutz-Einstellungen",
+        description:
+          "Wir nutzen optionale Dienste (Analytics und Chat), um die Seite zu verbessern. Du kannst deine Auswahl jederzeit ändern.",
+        essential: "Essentiell",
+        analytics: "Analytics",
+        chat: "Chatbot",
+        acceptAll: "Alles akzeptieren",
+        acceptSelected: "Auswahl akzeptieren",
+        rejectAll: "Alles ablehnen",
+      }
+    : {
+        title: "Privacy settings",
+        description:
+          "We use optional services (analytics and chat) to improve the site. You can change your choice anytime.",
+        essential: "Essential",
+        analytics: "Analytics",
+        chat: "Chatbot",
+        acceptAll: "Accept all",
+        acceptSelected: "Accept selected",
+        rejectAll: "Reject all",
+      };
+
+  return (
+    <div className="fixed bottom-4 left-4 right-4 z-[60]">
+      <div className="max-w-3xl mx-auto bg-white/95 backdrop-blur-xl border border-stone-200 rounded-2xl shadow-[0_12px_40px_rgba(41,37,36,0.18)] p-5">
+        <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4">
+          <div className="min-w-0">
+            <div className="text-lg font-bold text-stone-900">{s.title}</div>
+            <p className="text-sm text-stone-600 mt-1">{s.description}</p>
+
+            <div className="mt-4 space-y-2">
+              <div className="flex items-center justify-between gap-3">
+                <div className="text-sm font-medium text-stone-800">{s.essential}</div>
+                <div className="text-xs text-stone-500">Always on</div>
+              </div>
+
+              <label className="flex items-center justify-between gap-3 py-1">
+                <span className="text-sm font-medium text-stone-800">{s.analytics}</span>
+                <input
+                  type="checkbox"
+                  checked={draft.analytics}
+                  onChange={(e) => setDraft((p) => ({ ...p, analytics: e.target.checked }))}
+                  className="w-4 h-4 accent-stone-900"
+                />
+              </label>
+
+              <label className="flex items-center justify-between gap-3 py-1">
+                <span className="text-sm font-medium text-stone-800">{s.chat}</span>
+                <input
+                  type="checkbox"
+                  checked={draft.chat}
+                  onChange={(e) => setDraft((p) => ({ ...p, chat: e.target.checked }))}
+                  className="w-4 h-4 accent-stone-900"
+                />
+              </label>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2 shrink-0">
+            <button
+              onClick={() => setConsent({ analytics: true, chat: true })}
+              className="px-4 py-2 rounded-xl bg-stone-900 text-stone-50 font-semibold hover:bg-stone-800 transition-colors"
+            >
+              {s.acceptAll}
+            </button>
+            <button
+              onClick={() => setConsent(draft)}
+              className="px-4 py-2 rounded-xl bg-white border border-stone-200 text-stone-800 font-semibold hover:bg-stone-50 transition-colors"
+            >
+              {s.acceptSelected}
+            </button>
+            <button
+              onClick={() => setConsent({ analytics: false, chat: false })}
+              className="px-4 py-2 rounded-xl bg-transparent text-stone-600 font-semibold hover:text-stone-900 transition-colors"
+            >
+              {s.rejectAll}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

app/components/ConsentProvider.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+
+export type ConsentState = {
+  analytics: boolean;
+  chat: boolean;
+};
+
+const COOKIE_NAME = "dk0_consent_v1";
+
+function readConsentFromCookie(): ConsentState | null {
+  if (typeof document === "undefined") return null;
+  const match = document.cookie
+    .split(";")
+    .map((c) => c.trim())
+    .find((c) => c.startsWith(`${COOKIE_NAME}=`));
+  if (!match) return null;
+  const value = decodeURIComponent(match.split("=").slice(1).join("="));
+  try {
+    const parsed = JSON.parse(value) as Partial<ConsentState>;
+    return {
+      analytics: !!parsed.analytics,
+      chat: !!parsed.chat,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function writeConsentCookie(value: ConsentState) {
+  const encoded = encodeURIComponent(JSON.stringify(value));
+  // 180 days
+  const maxAge = 60 * 60 * 24 * 180;
+  document.cookie = `${COOKIE_NAME}=${encoded}; path=/; max-age=${maxAge}; samesite=lax`;
+}
+
+const ConsentContext = createContext<{
+  consent: ConsentState | null;
+  setConsent: (next: ConsentState) => void;
+}>({
+  consent: null,
+  setConsent: () => {},
+});
+
+export function ConsentProvider({ children }: { children: React.ReactNode }) {
+  const [consent, setConsentState] = useState<ConsentState | null>(null);
+
+  useEffect(() => {
+    setConsentState(readConsentFromCookie());
+  }, []);
+
+  const setConsent = useCallback((next: ConsentState) => {
+    setConsentState(next);
+    writeConsentCookie(next);
+  }, []);
+
+  const value = useMemo(() => ({ consent, setConsent }), [consent, setConsent]);
+
+  return <ConsentContext.Provider value={value}>{children}</ConsentContext.Provider>;
+}
+
+export function useConsent() {
+  return useContext(ConsentContext);
+}
+
+export const consentCookieName = COOKIE_NAME;
+

app/components/Contact.tsx

@@ -4,15 +4,36 @@ import { useState, useEffect } from "react";
 import { motion } from "framer-motion";
 import { Mail, MapPin, Send } from "lucide-react";
 import { useToast } from "@/components/Toast";
+import { useLocale } from "next-intl";
+import type { JSONContent } from "@tiptap/react";
+import RichTextClient from "./RichTextClient";
 
 const Contact = () => {
   const [mounted, setMounted] = useState(false);
   const { showEmailSent, showEmailError } = useToast();
+  const locale = useLocale();
+  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
 
   useEffect(() => {
     setMounted(true);
   }, []);
 
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(
+          `/api/content/page?key=${encodeURIComponent("home-contact")}&locale=${encodeURIComponent(locale)}`,
+        );
+        const data = await res.json();
+        if (data?.content?.content) {
+          setCmsDoc(data.content.content as JSONContent);
+        }
+      } catch {
+        // ignore; fallback to static
+      }
+    })();
+  }, [locale]);
+
   const [formData, setFormData] = useState({
     name: "",
     email: "",
@@ -164,10 +185,14 @@ const Contact = () => {
           <h2 className="text-4xl md:text-5xl font-bold mb-6 text-stone-900">
             Contact Me
           </h2>
+          {cmsDoc ? (
+            <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-2xl mx-auto mt-4 text-stone-700" />
+          ) : (
             <p className="text-xl text-stone-700 max-w-2xl mx-auto mt-4">
               Interested in working together or have questions about my projects?
               Feel free to reach out!
             </p>
+          )}
         </motion.div>
 
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">

app/components/Footer.tsx

@@ -5,10 +5,12 @@ import { motion } from 'framer-motion';
 import { Heart, Code } from 'lucide-react';
 import { SiGithub, SiLinkedin } from 'react-icons/si';
 import Link from 'next/link';
+import { useLocale } from "next-intl";
 
 const Footer = () => {
   const [currentYear, setCurrentYear] = useState(2024);
   const [mounted, setMounted] = useState(false);
+  const locale = useLocale();
 
   useEffect(() => {
     setCurrentYear(new Date().getFullYear());
@@ -44,7 +46,7 @@ const Footer = () => {
               <Code className="w-6 h-6 text-stone-800" />
             </motion.div>
             <div>
-              <Link href="/" className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
+              <Link href={`/${locale}`} className="text-xl font-bold font-mono text-stone-800 hover:text-liquid-blue transition-colors">
                 dk<span className="text-liquid-rose">0</span>
               </Link>
               <p className="text-xs text-stone-500">Software Engineer</p>
@@ -104,13 +106,13 @@ const Footer = () => {
         >
           <div className="flex space-x-6 text-sm">
             <Link
-              href="/legal-notice"
+              href={`/${locale}/legal-notice`}
               className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
             >
               Impressum
             </Link>
             <Link
-              href="/privacy-policy"
+              href={`/${locale}/privacy-policy`}
               className="text-stone-500 hover:text-stone-800 transition-colors duration-200"
             >
               Privacy Policy

app/components/Header.tsx

@@ -5,11 +5,19 @@ import { motion, AnimatePresence } from "framer-motion";
 import { Menu, X, Mail } from "lucide-react";
 import { SiGithub, SiLinkedin } from "react-icons/si";
 import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { usePathname, useRouter } from "next/navigation";
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
   const [mounted, setMounted] = useState(false);
+  const locale = useLocale();
+  const pathname = usePathname();
+  const router = useRouter();
+  const t = useTranslations("nav");
+
+  const isHome = pathname === `/${locale}` || pathname === `/${locale}/`;
 
   useEffect(() => {
     // Use requestAnimationFrame to ensure smooth transition
@@ -28,10 +36,10 @@ const Header = () => {
   }, []);
 
   const navItems = [
-    { name: "Home", href: "/" },
-    { name: "About", href: "#about" },
-    { name: "Projects", href: "#projects" },
-    { name: "Contact", href: "#contact" },
+    { name: t("home"), href: `/${locale}` },
+    { name: t("about"), href: isHome ? "#about" : `/${locale}#about` },
+    { name: t("projects"), href: isHome ? "#projects" : `/${locale}/projects` },
+    { name: t("contact"), href: isHome ? "#contact" : `/${locale}#contact` },
   ];
 
   const socialLinks = [
@@ -44,6 +52,17 @@ const Header = () => {
     { icon: Mail, href: "mailto:contact@dk0.dev", label: "Email" },
   ];
 
+  const switchLocale = (nextLocale: string) => {
+    try {
+      const pathWithoutLocale = pathname.replace(new RegExp(`^/${locale}`), "") || "";
+      const hash = typeof window !== "undefined" ? window.location.hash : "";
+      router.push(`/${nextLocale}${pathWithoutLocale}${hash}`);
+      document.cookie = `NEXT_LOCALE=${nextLocale}; path=/`;
+    } catch {
+      // ignore
+    }
+  };
+
   // Always render to prevent flash, but use opacity transition
 
   return (
@@ -79,7 +98,7 @@ const Header = () => {
               className="flex items-center space-x-2"
             >
               <Link
-                href="/"
+                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>
@@ -126,6 +145,32 @@ const Header = () => {
             </nav>
 
             <div className="hidden md:flex items-center space-x-3">
+              <div className="flex items-center bg-white/40 border border-white/50 rounded-full overflow-hidden shadow-sm">
+                <button
+                  type="button"
+                  onClick={() => switchLocale("en")}
+                  className={`px-3 py-1.5 text-xs font-semibold transition-colors ${
+                    locale === "en"
+                      ? "bg-stone-900 text-stone-50"
+                      : "text-stone-700 hover:bg-white/60"
+                  }`}
+                  aria-label="Switch language to English"
+                >
+                  EN
+                </button>
+                <button
+                  type="button"
+                  onClick={() => switchLocale("de")}
+                  className={`px-3 py-1.5 text-xs font-semibold transition-colors ${
+                    locale === "de"
+                      ? "bg-stone-900 text-stone-50"
+                      : "text-stone-700 hover:bg-white/60"
+                  }`}
+                  aria-label="Sprache auf Deutsch umstellen"
+                >
+                  DE
+                </button>
+              </div>
               {socialLinks.map((social) => (
                 <motion.a
                   key={social.label}
@@ -145,6 +190,7 @@ const Header = () => {
               whileTap={{ scale: 0.95 }}
               onClick={() => setIsOpen(!isOpen)}
               className="md:hidden p-2 rounded-full bg-white/40 hover:bg-white/60 text-stone-800 transition-colors liquid-hover"
+              aria-label={isOpen ? "Close menu" : "Open menu"}
             >
               {isOpen ? <X size={24} /> : <Menu size={24} />}
             </motion.button>

app/components/Hero.tsx

@@ -3,8 +3,31 @@
 import { motion } from "framer-motion";
 import { ArrowDown, Code, Zap, Rocket } from "lucide-react";
 import Image from "next/image";
+import { useEffect, useState } from "react";
+import { useLocale } from "next-intl";
+import type { JSONContent } from "@tiptap/react";
+import RichTextClient from "./RichTextClient";
 
 const Hero = () => {
+  const locale = useLocale();
+  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(
+          `/api/content/page?key=${encodeURIComponent("home-hero")}&locale=${encodeURIComponent(locale)}`,
+        );
+        const data = await res.json();
+        if (data?.content?.content) {
+          setCmsDoc(data.content.content as JSONContent);
+        }
+      } catch {
+        // ignore; fallback to static
+      }
+    })();
+  }, [locale]);
+
   const features = [
     { icon: Code, text: "Next.js & Flutter" },
     { icon: Zap, text: "Docker Swarm & CI/CD" },
@@ -146,12 +169,16 @@ const Hero = () => {
         </motion.div>
 
         {/* Description */}
-        <motion.p
+        <motion.div
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.1, 0.25, 1] }}
           className="text-lg md:text-xl text-stone-700 mb-12 max-w-2xl mx-auto leading-relaxed"
         >
+          {cmsDoc ? (
+            <RichTextClient doc={cmsDoc} className="prose prose-stone max-w-none" />
+          ) : (
+            <p>
               Student and passionate{" "}
               <span className="text-stone-900 font-semibold decoration-liquid-mint decoration-2 underline underline-offset-4">
                 self-hoster
@@ -165,7 +192,9 @@ const Hero = () => {
                 DevOps
               </span>
               .
-        </motion.p>
+            </p>
+          )}
+        </motion.div>
 
         {/* Features */}
         <motion.div

app/components/Projects.tsx

@@ -5,6 +5,7 @@ import { motion, Variants } from "framer-motion";
 import { ExternalLink, Github, ArrowRight, Calendar } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
+import { useLocale } from "next-intl";
 
 const fadeInUp: Variants = {
   hidden: { opacity: 0, y: 20 },
@@ -31,6 +32,7 @@ const staggerContainer: Variants = {
 
 interface Project {
   id: number;
+  slug: string;
   title: string;
   description: string;
   content: string;
@@ -45,6 +47,7 @@ interface Project {
 
 const Projects = () => {
   const [projects, setProjects] = useState<Project[]>([]);
+  const locale = useLocale();
 
   useEffect(() => {
     const loadProjects = async () => {
@@ -175,7 +178,7 @@ const Projects = () => {
               <div className="p-6 flex flex-col flex-1">
                 {/* Stretched Link covering the whole card (including image area) */}
                 <Link
-                  href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
+                  href={`/${locale}/projects/${project.slug}`}
                   className="absolute inset-0 z-10"
                   aria-label={`View project ${project.title}`}
                 />
@@ -247,7 +250,7 @@ const Projects = () => {
           className="mt-16 text-center"
         >
           <Link
-            href="/projects"
+            href={`/${locale}/projects`}
             className="inline-flex items-center gap-2 px-8 py-4 bg-white border border-stone-200 rounded-full text-stone-700 font-medium hover:bg-stone-50 hover:border-stone-300 hover:gap-3 transition-all duration-500 ease-out shadow-sm hover:shadow-md"
           >
             View All Projects <ArrowRight size={16} />

app/components/RichText.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { JSONContent } from "@tiptap/react";
+import { richTextToSafeHtml } from "@/lib/richtext";
+
+export default function RichText({
+  doc,
+  className,
+}: {
+  doc: JSONContent;
+  className?: string;
+}) {
+  const html = richTextToSafeHtml(doc);
+  return (
+    <div
+      className={className}
+      // HTML is sanitized in `richTextToSafeHtml`
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+

app/components/RichTextClient.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import React, { useMemo } from "react";
+import type { JSONContent } from "@tiptap/react";
+import { richTextToSafeHtml } from "@/lib/richtext";
+
+export default function RichTextClient({
+  doc,
+  className,
+}: {
+  doc: JSONContent;
+  className?: string;
+}) {
+  const html = useMemo(() => richTextToSafeHtml(doc), [doc]);
+
+  return (
+    <div
+      className={className}
+      // HTML is sanitized in `richTextToSafeHtml`
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}
+

app/editor/page.tsx

@@ -50,6 +50,7 @@ interface Project {
 function EditorPageContent() {
   const searchParams = useSearchParams();
   const projectId = searchParams.get("id");
+  const initialLocale = searchParams.get("locale") || "en";
   const contentRef = useRef<HTMLDivElement>(null);
   const { showSuccess, showError } = useToast();
 
@@ -58,6 +59,8 @@ function EditorPageContent() {
   const [isLoading, setIsLoading] = useState(true);
   const [isSaving, setIsSaving] = useState(false);
   const [isCreating, setIsCreating] = useState(!projectId);
+  const [editLocale, setEditLocale] = useState(initialLocale);
+  const [baseTexts, setBaseTexts] = useState<{ title: string; description: string } | null>(null);
   const [showPreview, setShowPreview] = useState(false);
   const [_isTyping, setIsTyping] = useState(false);
   const [history, setHistory] = useState<typeof formData[]>([]);
@@ -90,6 +93,10 @@ function EditorPageContent() {
         );
 
         if (foundProject) {
+          setBaseTexts({
+            title: foundProject.title || "",
+            description: foundProject.description || "",
+          });
           const initialData = {
             title: foundProject.title || "",
             description: foundProject.description || "",
@@ -127,6 +134,30 @@ function EditorPageContent() {
     }
   }, []);
 
+  const loadTranslation = useCallback(async (id: string, locale: string) => {
+    if (!id || !locale || locale === "en") return;
+    try {
+      const response = await fetch(`/api/projects/${id}/translation?locale=${encodeURIComponent(locale)}`, {
+        headers: {
+          "x-admin-request": "true",
+          "x-session-token": sessionStorage.getItem("admin_session_token") || "",
+        },
+      });
+      if (!response.ok) return;
+      const data = await response.json();
+      const tr = data.translation as { title?: string; description?: string } | null;
+      if (tr?.title && tr?.description) {
+        setFormData((prev) => ({
+          ...prev,
+          title: tr.title || prev.title,
+          description: tr.description || prev.description,
+        }));
+      }
+    } catch {
+      // ignore translation load failures
+    }
+  }, []);
+
   // Check authentication and load project
   useEffect(() => {
     const init = async () => {
@@ -141,6 +172,7 @@ function EditorPageContent() {
           // Load project if editing
           if (projectId) {
             await loadProject(projectId);
+            await loadTranslation(projectId, editLocale);
           } else {
             setIsCreating(true);
             // Initialize history for new project
@@ -182,7 +214,7 @@ function EditorPageContent() {
     };
 
     init();
-  }, [projectId, loadProject]);
+  }, [projectId, loadProject, loadTranslation, editLocale]);
 
   const handleSave = useCallback(async () => {
     try {
@@ -205,9 +237,13 @@ function EditorPageContent() {
       const method = projectId ? "PUT" : "POST";
 
       // Prepare data for saving - only include fields that exist in the database schema
+      const saveTitle = editLocale === "en" ? formData.title.trim() : (baseTexts?.title || formData.title.trim());
+      const saveDescription =
+        editLocale === "en" ? formData.description.trim() : (baseTexts?.description || formData.description.trim());
+
       const saveData = {
-        title: formData.title.trim(),
-        description: formData.description.trim(),
+        title: saveTitle,
+        description: saveDescription,
         content: formData.content.trim(),
         category: formData.category,
         tags: formData.tags,
@@ -252,6 +288,27 @@ function EditorPageContent() {
         // Show success toast (smaller, smoother)
         showSuccess("Saved", `"${savedProject.title}" saved`);
 
+        // Save translation if editing a non-default locale
+        if (projectId && editLocale !== "en") {
+          try {
+            await fetch(`/api/projects/${projectId}/translation`, {
+              method: "PUT",
+              headers: {
+                "Content-Type": "application/json",
+                "x-admin-request": "true",
+                "x-session-token": sessionStorage.getItem("admin_session_token") || "",
+              },
+              body: JSON.stringify({
+                locale: editLocale,
+                title: formData.title.trim(),
+                description: formData.description.trim(),
+              }),
+            });
+          } catch {
+            // ignore translation save failures
+          }
+        }
+        
         // Update project ID if it was a new project
         if (!projectId && savedProject.id) {
           const newUrl = `/editor?id=${savedProject.id}`;
@@ -275,7 +332,7 @@ function EditorPageContent() {
     } finally {
       setIsSaving(false);
     }
-  }, [projectId, formData, showSuccess, showError]);
+  }, [projectId, formData, showSuccess, showError, editLocale, baseTexts]);
 
   const handleInputChange = (
     field: string,
@@ -645,6 +702,34 @@ function EditorPageContent() {
               </h3>
 
               <div className="space-y-4">
+                <div>
+                  <label className="block text-sm font-medium text-stone-300 mb-2">
+                    Language
+                  </label>
+                  <div className="custom-select">
+                    <select
+                      value={editLocale}
+                      onChange={(e) => {
+                        const next = e.target.value;
+                        setEditLocale(next);
+                        if (projectId) {
+                          // Update URL for deep-linking and reload translation
+                          const newUrl = `/editor?id=${projectId}&locale=${encodeURIComponent(next)}`;
+                          window.history.replaceState({}, "", newUrl);
+                          loadTranslation(projectId, next);
+                        }
+                      }}
+                    >
+                      <option value="en">English (default)</option>
+                      <option value="de">Deutsch</option>
+                    </select>
+                  </div>
+                  {editLocale !== "en" && (
+                    <p className="text-xs text-stone-400 mt-2">
+                      Title/description are saved as a translation. Other fields are global.
+                    </p>
+                  )}
+                </div>
                 <div>
                   <label className="block text-sm font-medium text-stone-300 mb-2">
                     Category

app/layout.tsx

@@ -3,27 +3,24 @@ import { Metadata } from "next";
 import { Inter } from "next/font/google";
 import React from "react";
 import ClientProviders from "./components/ClientProviders";
+import { cookies } from "next/headers";
 
 const inter = Inter({
   variable: "--font-inter",
   subsets: ["latin"],
 });
 
-export default function RootLayout({
+export default async function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
+  const cookieStore = await cookies();
+  const locale = cookieStore.get("NEXT_LOCALE")?.value || "en";
   return (
-    <html lang="en">
+    <html lang={locale}>
       <head>
-        <script
-          defer
-          src="https://analytics.dk0.dev/script.js"
-          data-website-id="b3665829-927a-4ada-b9bb-fcf24171061e"
-        ></script>
         <meta charSet="utf-8" />
-        <title>Dennis Konkol&#39;s Portfolio</title>
       </head>
       <body className={inter.variable} suppressHydrationWarning>
         <ClientProviders>{children}</ClientProviders>

app/legal-notice/page.tsx

@@ -6,8 +6,34 @@ import { ArrowLeft } from 'lucide-react';
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import type { JSONContent } from "@tiptap/react";
+import RichTextClient from "../components/RichTextClient";
 
 export default function LegalNotice() {
+  const locale = useLocale();
+  const t = useTranslations("common");
+  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
+  const [cmsTitle, setCmsTitle] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(
+          `/api/content/page?key=${encodeURIComponent("legal-notice")}&locale=${encodeURIComponent(locale)}`,
+        );
+        const data = await res.json();
+        if (data?.content?.content) {
+          setCmsDoc(data.content.content as JSONContent);
+          setCmsTitle((data.content.title as string | null) ?? null);
+        }
+      } catch {
+        // ignore; fallback to static content
+      }
+    })();
+  }, [locale]);
+
   return (
     <div className="min-h-screen animated-bg">
       <Header />
@@ -19,15 +45,15 @@ export default function LegalNotice() {
           className="mb-8"
         >
           <Link
-            href="/"
+            href={`/${locale}`}
             className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
           >
             <ArrowLeft size={20} />
-            <span>Back to Home</span>
+            <span>{t("backToHome")}</span>
           </Link>
           
           <h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
-            Impressum
+            {cmsTitle || "Impressum"}
           </h1>
         </motion.div>
 
@@ -37,33 +63,51 @@ export default function LegalNotice() {
           transition={{ duration: 0.8, delay: 0.2 }}
           className="glass-card p-8 rounded-2xl space-y-6"
         >
+          {cmsDoc ? (
+            <RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
+          ) : (
+            <>
               <div className="text-gray-300 leading-relaxed">
-            <h2 className="text-2xl font-semibold mb-4">
-              Verantwortlicher für die Inhalte dieser Website
-            </h2>
+                <h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Inhalte dieser Website</h2>
                 <div className="space-y-2 text-gray-300">
-              <p><strong>Name:</strong> Dennis Konkol</p>
-              <p><strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
-              <p><strong>E-Mail:</strong> <Link href="mailto:info@dki.one" className="text-blue-400 hover:text-blue-300 transition-colors">info@dk0.dev</Link></p>
-              <p><strong>Website:</strong> <Link href="https://www.dk0.dev" className="text-blue-400 hover:text-blue-300 transition-colors">dk0.dev</Link></p>
+                  <p>
+                    <strong>Name:</strong> Dennis Konkol
+                  </p>
+                  <p>
+                    <strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland
+                  </p>
+                  <p>
+                    <strong>E-Mail:</strong>{" "}
+                    <Link href="mailto:info@dki.one" className="text-blue-400 hover:text-blue-300 transition-colors">
+                      info@dk0.dev
+                    </Link>
+                  </p>
+                  <p>
+                    <strong>Website:</strong>{" "}
+                    <Link href="https://www.dk0.dev" className="text-blue-400 hover:text-blue-300 transition-colors">
+                      dk0.dev
+                    </Link>
+                  </p>
                 </div>
               </div>
 
               <div className="text-gray-300">
-            <h2 className="text-2xl font-semiboldmb-4">Haftung für Links</h2>
+                <h2 className="text-2xl font-semibold mb-4">Haftung für Links</h2>
                 <p className="leading-relaxed">
-              Meine Website enthält Links auf externe Websites. Ich habe keinen Einfluss auf die Inhalte dieser Websites 
-              und kann daher keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der Betreiber oder 
-              Anbieter der Seiten verantwortlich. Jedoch überprüfe ich die verlinkten Seiten zum Zeitpunkt der Verlinkung 
-              auf mögliche Rechtsverstöße. Bei Bekanntwerden von Rechtsverletzungen werde ich derartige Links umgehend entfernen.
+                  Meine Website enthält Links auf externe Websites. Ich habe keinen Einfluss auf die Inhalte dieser
+                  Websites und kann daher keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der
+                  Betreiber oder Anbieter der Seiten verantwortlich. Jedoch überprüfe ich die verlinkten Seiten zum
+                  Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße. Bei Bekanntwerden von Rechtsverletzungen werde
+                  ich derartige Links umgehend entfernen.
                 </p>
               </div>
 
               <div className="text-gray-300">
                 <h2 className="text-2xl font-semibold mb-4">Urheberrecht</h2>
                 <p className="leading-relaxed">
-              Alle Inhalte dieser Website, einschließlich Texte, Fotos und Designs, stehen unter Urheberrechtsschutz. 
-              Jegliche Nutzung ohne vorherige schriftliche Zustimmung des Urhebers ist verboten.
+                  Alle Inhalte dieser Website, einschließlich Texte, Fotos und Designs, stehen unter
+                  Urheberrechtsschutz. Jegliche Nutzung ohne vorherige schriftliche Zustimmung des Urhebers ist
+                  verboten.
                 </p>
               </div>
 
@@ -71,13 +115,16 @@ export default function LegalNotice() {
                 <h2 className="text-2xl font-semibold mb-4">Gewährleistung</h2>
                 <p className="leading-relaxed">
                   Die Nutzung der Inhalte dieser Website erfolgt auf eigene Gefahr. Als Diensteanbieter kann ich keine
-              Gewähr übernehmen für Schäden, die entstehen können, durch den Zugriff oder die Nutzung dieser Website.
+                  Gewähr übernehmen für Schäden, die entstehen können, durch den Zugriff oder die Nutzung dieser
+                  Website.
                 </p>
               </div>
 
               <div className="pt-4 border-t border-gray-700">
                 <p className="text-gray-400 text-sm">Letzte Aktualisierung: 12.02.2025</p>
               </div>
+            </>
+          )}
         </motion.div>
       </main>
       <Footer />

app/page.tsx

@@ -1,177 +1,8 @@
-"use client";
+import { redirect } from "next/navigation";
+import { cookies } from "next/headers";
 
-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 dynamic from "next/dynamic";
-import ErrorBoundary from "@/components/ErrorBoundary";
-import { motion } from "framer-motion";
-
-// Wrap ActivityFeed in error boundary to prevent crashes
-const ActivityFeed = dynamic(() => import("./components/ActivityFeed").catch(() => ({ default: () => null })), {
-  ssr: false,
-  loading: () => null,
-});
-
-export default function Home() {
-  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",
-            ],
-          }),
-        }}
-      />
-      <ErrorBoundary>
-        <ActivityFeed />
-      </ErrorBoundary>
-      <Header />
-      {/* Spacer to prevent navbar overlap */}
-      <div className="h-24 md:h-32" aria-hidden="true"></div>
-      <main className="relative">
-        <Hero />
-
-        {/* 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"
-          >
-            <motion.path
-              d="M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z"
-              fill="url(#gradient1)"
-              initial={{ opacity: 0 }}
-              animate={{
-                opacity: 1,
-                d: [
-                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
-                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
-                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
-                ],
-              }}
-              transition={{
-                opacity: { duration: 0.8, delay: 0.3 },
-                d: {
-                  duration: 12,
-                  repeat: Infinity,
-                  ease: "easeInOut",
-                },
-              }}
-            />
-            <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-24 overflow-hidden">
-          <svg
-            className="absolute inset-0 w-full h-full"
-            viewBox="0 0 1440 120"
-            preserveAspectRatio="none"
-          >
-            <motion.path
-              d="M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z"
-              fill="url(#gradient2)"
-              initial={{ opacity: 0 }}
-              animate={{
-                opacity: 1,
-                d: [
-                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
-                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
-                  "M0,32 C240,64 480,96 720,32 C960,64 1200,96 1440,32 L1440,120 L0,120 Z",
-                ],
-              }}
-              transition={{
-                opacity: { duration: 0.8, delay: 0.3 },
-                d: {
-                  duration: 14,
-                  repeat: Infinity,
-                  ease: "easeInOut",
-                },
-              }}
-            />
-            <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-24 overflow-hidden">
-          <svg
-            className="absolute inset-0 w-full h-full"
-            viewBox="0 0 1440 120"
-            preserveAspectRatio="none"
-          >
-            <motion.path
-              d="M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z"
-              fill="url(#gradient3)"
-              initial={{ opacity: 0 }}
-              animate={{
-                opacity: 1,
-                d: [
-                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
-                  "M0,64 C240,96 480,32 720,64 C960,96 1200,32 1440,64 L1440,120 L0,120 Z",
-                  "M0,96 C240,32 480,64 720,96 C960,32 1200,64 1440,96 L1440,120 L0,120 Z",
-                ],
-              }}
-              transition={{
-                opacity: { duration: 0.8, delay: 0.3 },
-                d: {
-                  duration: 16,
-                  repeat: Infinity,
-                  ease: "easeInOut",
-                },
-              }}
-            />
-            <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>
-  );
+export default async function RootRedirectPage() {
+  const cookieStore = await cookies();
+  const locale = cookieStore.get("NEXT_LOCALE")?.value || "en";
+  redirect(`/${locale}`);
 }

app/privacy-policy/page.tsx

@@ -6,8 +6,34 @@ import { ArrowLeft } from 'lucide-react';
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Link from "next/link";
+import { useLocale, useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import type { JSONContent } from "@tiptap/react";
+import RichTextClient from "../components/RichTextClient";
 
 export default function PrivacyPolicy() {
+  const locale = useLocale();
+  const t = useTranslations("common");
+  const [cmsDoc, setCmsDoc] = useState<JSONContent | null>(null);
+  const [cmsTitle, setCmsTitle] = useState<string | null>(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await fetch(
+          `/api/content/page?key=${encodeURIComponent("privacy-policy")}&locale=${encodeURIComponent(locale)}`,
+        );
+        const data = await res.json();
+        if (data?.content?.content) {
+          setCmsDoc(data.content.content as JSONContent);
+          setCmsTitle((data.content.title as string | null) ?? null);
+        }
+      } catch {
+        // ignore; fallback to static content
+      }
+    })();
+  }, [locale]);
+
   return (
     <div className="min-h-screen animated-bg">
       <Header />
@@ -19,15 +45,15 @@ export default function PrivacyPolicy() {
           className="mb-8"
         >
           <motion.a
-            href="/"
+            href={`/${locale}`}
             className="inline-flex items-center space-x-2 text-blue-400 hover:text-blue-300 transition-colors mb-6"
           >
             <ArrowLeft size={20} />
-            <span>Back to Home</span>
+            <span>{t("backToHome")}</span>
           </motion.a>
           
           <h1 className="text-4xl md:text-5xl font-bold mb-6 gradient-text">
-            Datenschutzerklärung
+            {cmsTitle || "Datenschutzerklärung"}
           </h1>
         </motion.div>
 
@@ -37,6 +63,10 @@ export default function PrivacyPolicy() {
           transition={{ duration: 0.8, delay: 0.2 }}
           className="glass-card p-8 rounded-2xl space-y-6 text-white"
         >
+          {cmsDoc ? (
+            <RichTextClient doc={cmsDoc} className="prose prose-invert max-w-none text-gray-300" />
+          ) : (
+            <>
               <div className="text-gray-300 leading-relaxed">
                 <p>
                   Der Schutz Ihrer persönlichen Daten ist mir wichtig. In dieser Datenschutzerklärung informiere ich Sie
@@ -45,25 +75,39 @@ export default function PrivacyPolicy() {
               </div>
 
               <div className="text-gray-300 leading-relaxed">
-            <h2 className="text-2xl font-semibold mb-4">
-              Verantwortlicher für die Datenverarbeitung
-            </h2>
+                <h2 className="text-2xl font-semibold mb-4">Verantwortlicher für die Datenverarbeitung</h2>
                 <div className="space-y-2 text-gray-300">
-              <p><strong>Name:</strong> Dennis Konkol</p>
-              <p><strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland</p>
-              <p><strong>E-Mail:</strong> <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="mailto:info@dk0.dev">info@dk0.dev</Link></p>
-              <p><strong>Website:</strong> <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="https://www.dk0.dev">dk0.dev</Link></p>
-            </div>
-            <p className="mt-4">
-              Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten Verantwortlichen.
+                  <p>
+                    <strong>Name:</strong> Dennis Konkol
+                  </p>
+                  <p>
+                    <strong>Adresse:</strong> Auf dem Ziegenbrink 2B, 49082 Osnabrück, Deutschland
+                  </p>
+                  <p>
+                    <strong>E-Mail:</strong>{" "}
+                    <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="mailto:info@dk0.dev">
+                      info@dk0.dev
+                    </Link>
+                  </p>
+                  <p>
+                    <strong>Website:</strong>{" "}
+                    <Link className="text-blue-400 hover:text-blue-300 transition-colors" href="https://www.dk0.dev">
+                      dk0.dev
+                    </Link>
                   </p>
                 </div>
+                <p className="mt-4">
+                  Diese Datenschutzerklärung gilt für die Verarbeitung personenbezogener Daten durch den oben genannten
+                  Verantwortlichen.
+                </p>
+              </div>
+
               <h2 className="text-2xl font-semibold mt-6">
                 Erfassung allgemeiner Informationen beim Besuch meiner Website
               </h2>
               <div className="mt-2">
-          Beim Zugriff auf meiner Website werden automatisch Informationen
-          allgemeiner Natur erfasst. Diese beinhalten unter anderem:
+                Beim Zugriff auf meiner Website werden automatisch Informationen allgemeiner Natur erfasst. Diese
+                beinhalten unter anderem:
                 <ul className="list-disc list-inside mt-2">
                   <li>IP-Adresse (in anonymisierter Form)</li>
                   <li>Uhrzeit</li>
@@ -72,23 +116,23 @@ export default function PrivacyPolicy() {
                   <li>Referrer-URL (die zuvor besuchte Seite)</li>
                 </ul>
                 <br />
-          Diese Informationen werden anonymisiert erfasst und dienen
-          ausschließlich statistischen Auswertungen. Rückschlüsse auf Ihre
-          Person sind nicht möglich. Diese Daten werden verarbeitet, um:
+                Diese Informationen werden anonymisiert erfasst und dienen ausschließlich statistischen Auswertungen.
+                Rückschlüsse auf Ihre Person sind nicht möglich. Diese Daten werden verarbeitet, um:
                 <ul className="list-disc list-inside mt-2">
                   <li>die Inhalte meiner Website korrekt auszuliefern,</li>
                   <li>die Inhalte meiner Website zu optimieren,</li>
                   <li>die Systemsicherheit und -stabilität zu analysiern.</li>
                 </ul>
               </div>
+
               <h2 className="text-2xl font-semibold mt-6">Cookies</h2>
               <p className="mt-2">
-          Meine Website verwendet keine Cookies. Daher ist kein
-          Cookie-Consent-Banner erforderlich.
+                Diese Website verwendet ein technisch notwendiges Cookie, um deine Datenschutz-Einstellungen (z.B.
+                Analytics/Chatbot) zu speichern. Ohne dieses Cookie wäre ein Consent-Banner bei jedem Besuch erneut
+                nötig.
               </p>
-        <h2 className="text-2xl font-semibold mt-6">
-          Analyse- und Tracking-Tools
-        </h2>
+
+              <h2 className="text-2xl font-semibold mt-6">Analyse- und Tracking-Tools</h2>
               <p className="mt-2">
           Die nachfolgend beschriebene Analyse- und Tracking-Methode (im
           Folgenden „Maßnahme“ genannt) basiert auf Art. 6 Abs. 1 S. 1 lit. f
@@ -118,6 +162,11 @@ export default function PrivacyPolicy() {
           </Link>
           .
         </p>
+        <p className="mt-4">
+          Zusätzlich kann diese Website optionale, selbst gehostete
+          Nutzungsstatistiken erfassen (z.B. Seitenaufrufe, Performance-Metriken),
+          die erst nach deiner Einwilligung im Consent-Banner aktiviert werden.
+        </p>
         <h2 className="text-2xl font-semibold mt-6">Kontaktformular</h2>
         <p className="mt-2">
           Wenn Sie das Kontaktformular nutzen, werden Ihre Angaben zur
@@ -126,6 +175,17 @@ export default function PrivacyPolicy() {
           <br />
           Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung).
         </p>
+        <h2 className="text-2xl font-semibold mt-6">Chatbot</h2>
+        <p className="mt-2">
+          Wenn du den optionalen Chatbot nutzt, werden die von dir eingegebenen
+          Nachrichten verarbeitet, um eine Antwort zu generieren. Die Verarbeitung
+          kann dabei über eine selbst gehostete Automations-/Chat-Infrastruktur
+          (z.B. n8n) erfolgen. Bitte gib im Chat keine sensiblen Daten ein.
+          <br />
+          <br />
+          Rechtsgrundlage: Art. 6 Abs. 1 S. 1 lit. a DSGVO (Einwilligung) – der
+          Chatbot wird erst nach Aktivierung im Consent-Banner geladen.
+        </p>
         <h2 className="text-2xl font-semibold mt-6">Social Media Links</h2>
         <p className="mt-2">
           Unsere Website enthält Links zu GitHub und LinkedIn. Durch das
@@ -233,6 +293,8 @@ export default function PrivacyPolicy() {
           <div className="pt-4 border-t border-gray-700">
             <p className="text-gray-400 text-sm">Letzte Aktualisierung: 12.02.2025</p>
           </div>
+            </>
+          )}
         </motion.div>
       </main>
       <Footer />

app/projects/[slug]/page.tsx

@@ -6,9 +6,11 @@ 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;
@@ -24,6 +26,8 @@ interface Project {
 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
@@ -90,11 +94,11 @@ const ProjectDetail = () => {
           className="mb-8"
         >
           <Link
-            href="/projects"
+            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">Back to Projects</span>
+            <span className="font-medium">{t("backToProjects")}</span>
           </Link>
         </motion.div>
 

app/projects/page.tsx

@@ -4,9 +4,11 @@ import { useState, useEffect } from "react";
 import { motion } from 'framer-motion';
 import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
 import Link from 'next/link';
+import { useLocale, useTranslations } from "next-intl";
 
 interface Project {
   id: number;
+  slug: string;
   title: string;
   description: string;
   content: string;
@@ -26,6 +28,8 @@ const ProjectsPage = () => {
   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(() => {
@@ -87,11 +91,11 @@ const ProjectsPage = () => {
           className="mb-12"
         >
           <Link
-            href="/"
+            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>Back to Home</span>
+            <span>{t("backToHome")}</span>
           </Link>
           
           <h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
@@ -222,7 +226,7 @@ const ProjectsPage = () => {
               <div className="p-6 flex flex-col flex-1">
                 {/* Stretched Link covering the whole card (including image area) */}
                 <Link
-                  href={`/projects/${project.title.toLowerCase().replace(/[^a-z0-9]+/g, '-')}`}
+                  href={`/${locale}/projects/${project.slug}`}
                   className="absolute inset-0 z-10"
                   aria-label={`View project ${project.title}`}
                 />

components/ContentManager.tsx

@@ -0,0 +1,414 @@
+'use client';
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { EditorContent, useEditor, type JSONContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import Link from '@tiptap/extension-link';
+import { TextStyle } from '@tiptap/extension-text-style';
+import Color from '@tiptap/extension-color';
+import Highlight from '@tiptap/extension-highlight';
+import { Bold, Italic, Underline as UnderlineIcon, List, ListOrdered, Link as LinkIcon, Highlighter, Type, Save, RefreshCw } from 'lucide-react';
+import { FontFamily, type AllowedFontFamily } from '@/lib/tiptap/fontFamily';
+
+const EMPTY_DOC: JSONContent = {
+  type: 'doc',
+  content: [{ type: 'paragraph', content: [{ type: 'text', text: '' }] }],
+};
+
+type PageListItem = {
+  id: number;
+  key: string;
+  translations: Array<{ locale: string; updatedAt: string; title: string | null; slug: string | null }>;
+};
+
+export default function ContentManager() {
+  const [pages, setPages] = useState<PageListItem[]>([]);
+  const [selectedKey, setSelectedKey] = useState<string>('privacy-policy');
+  const [selectedLocale, setSelectedLocale] = useState<string>('de');
+  const [title, setTitle] = useState<string>('');
+  const [slug, setSlug] = useState<string>('');
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [isSaving, setIsSaving] = useState<boolean>(false);
+  const [error, setError] = useState<string>('');
+  const [fontFamily, setFontFamily] = useState<AllowedFontFamily | ''>('');
+  const [color, setColor] = useState<string>('#111827');
+
+  const extensions = useMemo(
+    () => [
+      StarterKit,
+      Underline,
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' },
+      }),
+      TextStyle,
+      FontFamily,
+      Color,
+      Highlight,
+    ],
+    [],
+  );
+
+  const editor = useEditor({
+    extensions,
+    content: EMPTY_DOC,
+    editorProps: {
+      attributes: {
+        class:
+          'prose prose-stone max-w-none focus:outline-none min-h-[320px] p-4 bg-white rounded-xl border border-stone-200',
+      },
+    },
+  });
+
+  const sessionHeaders = () => {
+    const sessionToken = sessionStorage.getItem('admin_session_token') || '';
+    return {
+      'x-admin-request': 'true',
+      'x-session-token': sessionToken,
+      'Content-Type': 'application/json',
+    };
+  };
+
+  const loadPages = useCallback(async () => {
+    setError('');
+    try {
+      setIsLoading(true);
+      const res = await fetch('/api/content/pages', { headers: sessionHeaders() });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data?.error || 'Failed to load content pages');
+      setPages(data.pages || []);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load content pages');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  const loadSelected = useCallback(async () => {
+    if (!editor) return;
+    setError('');
+    try {
+      setIsLoading(true);
+      const res = await fetch(`/api/content/page?key=${encodeURIComponent(selectedKey)}&locale=${encodeURIComponent(selectedLocale)}`);
+      const data = await res.json();
+      const translation = data?.content;
+
+      const nextTitle = (translation?.title as string | undefined) || '';
+      const nextSlug = (translation?.slug as string | undefined) || '';
+      const nextDoc = (translation?.content as JSONContent | undefined) || EMPTY_DOC;
+
+      setTitle(nextTitle);
+      setSlug(nextSlug);
+      editor.commands.setContent(nextDoc);
+      setFontFamily('');
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to load content');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [editor, selectedKey, selectedLocale]);
+
+  useEffect(() => {
+    loadPages();
+  }, [loadPages]);
+
+  useEffect(() => {
+    loadSelected();
+  }, [loadSelected]);
+
+  const handleSave = async () => {
+    if (!editor) return;
+    setError('');
+    try {
+      setIsSaving(true);
+      const content = editor.getJSON();
+      const res = await fetch('/api/content/pages', {
+        method: 'POST',
+        headers: sessionHeaders(),
+        body: JSON.stringify({
+          key: selectedKey,
+          locale: selectedLocale,
+          title: title || null,
+          slug: slug || null,
+          content,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data?.error || 'Failed to save content');
+      await loadPages();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to save content');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const localeOptions = ['en', 'de'];
+  const fontOptions: Array<{ label: string; value: AllowedFontFamily | '' }> = [
+    { label: 'Default', value: '' },
+    { label: 'Inter', value: 'Inter' },
+    { label: 'Sans', value: 'ui-sans-serif' },
+    { label: 'Serif', value: 'ui-serif' },
+    { label: 'Mono', value: 'ui-monospace' },
+  ];
+
+  const selectedInfo = useMemo(() => {
+    const page = pages.find((p) => p.key === selectedKey);
+    const tr = page?.translations?.find((t) => t.locale === selectedLocale);
+    return tr;
+  }, [pages, selectedKey, selectedLocale]);
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-start justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-bold text-stone-900">Content Manager</h2>
+          <p className="text-stone-500 mt-1">
+            Edit texts/pages with rich formatting (bold, underline, links, highlights).
+          </p>
+        </div>
+        <button
+          onClick={loadPages}
+          className="flex items-center gap-2 px-4 py-2 bg-stone-100 text-stone-700 rounded-lg hover:bg-stone-200 transition-colors"
+        >
+          <RefreshCw className="w-4 h-4" />
+          <span>Refresh</span>
+        </button>
+      </div>
+
+      {error && (
+        <div className="p-4 bg-red-50 border border-red-100 rounded-xl text-red-700 text-sm">
+          {error}
+        </div>
+      )}
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        <div className="lg:col-span-1 space-y-4">
+          <div className="bg-white border border-stone-200 rounded-xl p-4 space-y-3">
+            <div>
+              <label className="block text-sm font-medium text-stone-700 mb-1">Page key</label>
+              <select
+                value={selectedKey}
+                onChange={(e) => setSelectedKey(e.target.value)}
+                className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
+              >
+                {pages.map((p) => (
+                  <option key={p.key} value={p.key}>
+                    {p.key}
+                  </option>
+                ))}
+                {pages.length === 0 && (
+                  <>
+                    <option value="privacy-policy">privacy-policy</option>
+                    <option value="legal-notice">legal-notice</option>
+                    <option value="home-hero">home-hero</option>
+                  </>
+                )}
+              </select>
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-stone-700 mb-1">Locale</label>
+              <select
+                value={selectedLocale}
+                onChange={(e) => setSelectedLocale(e.target.value)}
+                className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
+              >
+                {localeOptions.map((l) => (
+                  <option key={l} value={l}>
+                    {l}
+                  </option>
+                ))}
+              </select>
+            </div>
+
+            <div className="text-xs text-stone-500">
+              Last updated:{' '}
+              <span className="font-medium text-stone-700">
+                {selectedInfo?.updatedAt ? new Date(selectedInfo.updatedAt).toLocaleString() : '—'}
+              </span>
+            </div>
+          </div>
+
+          <div className="bg-white border border-stone-200 rounded-xl p-4 space-y-3">
+            <div>
+              <label className="block text-sm font-medium text-stone-700 mb-1">Title (optional)</label>
+              <input
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
+                placeholder="Page title"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-stone-700 mb-1">Slug (optional)</label>
+              <input
+                value={slug}
+                onChange={(e) => setSlug(e.target.value)}
+                className="w-full px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300"
+                placeholder="privacy-policy"
+              />
+            </div>
+
+            <button
+              onClick={handleSave}
+              disabled={isSaving || isLoading || !editor}
+              className="w-full flex items-center justify-center gap-2 px-4 py-2 bg-stone-900 text-stone-50 rounded-lg hover:bg-stone-800 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              <Save className="w-4 h-4" />
+              <span>{isSaving ? 'Saving…' : 'Save'}</span>
+            </button>
+          </div>
+        </div>
+
+        <div className="lg:col-span-2">
+          <div className="bg-white border border-stone-200 rounded-xl p-4">
+            <div className="text-sm font-semibold text-stone-900 mb-3">Content</div>
+            {isLoading ? (
+              <div className="text-stone-500 text-sm">Loading…</div>
+            ) : (
+              <>
+                {editor && (
+                  <div className="flex flex-wrap items-center gap-2 mb-3">
+                    <button
+                      type="button"
+                      onClick={() => editor.chain().focus().toggleBold().run()}
+                      className={`p-2 rounded-lg border transition-colors ${
+                        editor.isActive('bold')
+                          ? 'bg-stone-900 text-stone-50 border-stone-900'
+                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
+                      }`}
+                      title="Bold"
+                    >
+                      <Bold className="w-4 h-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => editor.chain().focus().toggleItalic().run()}
+                      className={`p-2 rounded-lg border transition-colors ${
+                        editor.isActive('italic')
+                          ? 'bg-stone-900 text-stone-50 border-stone-900'
+                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
+                      }`}
+                      title="Italic"
+                    >
+                      <Italic className="w-4 h-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => editor.chain().focus().toggleUnderline().run()}
+                      className={`p-2 rounded-lg border transition-colors ${
+                        editor.isActive('underline')
+                          ? 'bg-stone-900 text-stone-50 border-stone-900'
+                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
+                      }`}
+                      title="Underline"
+                    >
+                      <UnderlineIcon className="w-4 h-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => editor.chain().focus().toggleHighlight().run()}
+                      className={`p-2 rounded-lg border transition-colors ${
+                        editor.isActive('highlight')
+                          ? 'bg-stone-900 text-stone-50 border-stone-900'
+                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
+                      }`}
+                      title="Highlight"
+                    >
+                      <Highlighter className="w-4 h-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => editor.chain().focus().toggleBulletList().run()}
+                      className={`p-2 rounded-lg border transition-colors ${
+                        editor.isActive('bulletList')
+                          ? 'bg-stone-900 text-stone-50 border-stone-900'
+                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
+                      }`}
+                      title="Bullet list"
+                    >
+                      <List className="w-4 h-4" />
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => editor.chain().focus().toggleOrderedList().run()}
+                      className={`p-2 rounded-lg border transition-colors ${
+                        editor.isActive('orderedList')
+                          ? 'bg-stone-900 text-stone-50 border-stone-900'
+                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
+                      }`}
+                      title="Ordered list"
+                    >
+                      <ListOrdered className="w-4 h-4" />
+                    </button>
+
+                    <button
+                      type="button"
+                      onClick={() => {
+                        const prev = editor.getAttributes('link')?.href as string | undefined;
+                        const href = prompt('Enter URL', prev || 'https://');
+                        if (!href) return;
+                        editor.chain().focus().extendMarkRange('link').setLink({ href }).run();
+                      }}
+                      className={`p-2 rounded-lg border transition-colors ${
+                        editor.isActive('link')
+                          ? 'bg-stone-900 text-stone-50 border-stone-900'
+                          : 'bg-white text-stone-700 border-stone-200 hover:bg-stone-50'
+                      }`}
+                      title="Link"
+                    >
+                      <LinkIcon className="w-4 h-4" />
+                    </button>
+
+                    <div className="flex items-center gap-2 ml-auto">
+                      <Type className="w-4 h-4 text-stone-500" />
+                      <select
+                        value={fontFamily}
+                        onChange={(e) => {
+                          const next = e.target.value as AllowedFontFamily | '';
+                          setFontFamily(next);
+                          if (!next) {
+                            editor.chain().focus().unsetFontFamily().run();
+                          } else {
+                            editor.chain().focus().setFontFamily(next).run();
+                          }
+                        }}
+                        className="px-3 py-2 bg-white border border-stone-200 rounded-lg text-stone-900 focus:outline-none focus:ring-2 focus:ring-stone-300 text-sm"
+                        title="Font family"
+                      >
+                        {fontOptions.map((f) => (
+                          <option key={f.label} value={f.value}>
+                            {f.label}
+                          </option>
+                        ))}
+                      </select>
+
+                      <input
+                        type="color"
+                        value={color}
+                        onChange={(e) => {
+                          const next = e.target.value;
+                          setColor(next);
+                          editor.chain().focus().setColor(next).run();
+                        }}
+                        className="w-10 h-10 p-1 bg-white border border-stone-200 rounded-lg"
+                        title="Text color"
+                      />
+                    </div>
+                  </div>
+                )}
+                <EditorContent editor={editor} />
+              </>
+            )}
+            <p className="text-xs text-stone-500 mt-3">
+              Tip: Use bold/underline, links, lists, headings. (Email-safe rendering is handled separately.)
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

components/EmailManager.tsx

@@ -120,6 +120,24 @@ export const EmailManager: React.FC = () => {
       });
       
       if (response.ok) {
+        // Persist responded status in DB
+        try {
+          await fetch(`/api/contacts/${selectedMessage.id}`, {
+            method: 'PUT',
+            headers: {
+              'Content-Type': 'application/json',
+              'x-admin-request': 'true',
+              'x-session-token': sessionToken,
+            },
+            body: JSON.stringify({
+              responded: true,
+              responseTemplate: 'reply',
+            }),
+          });
+        } catch {
+          // ignore persistence failures
+        }
+
         setMessages(prev => prev.map(msg => 
           msg.id === selectedMessage.id ? { ...msg, responded: true } : msg
         ));

components/ModernAdminDashboard.tsx

@@ -35,6 +35,10 @@ const ProjectManager = dynamic(
   () => import('./ProjectManager').then((m) => m.ProjectManager),
   { ssr: false, loading: () => <div className="p-6 text-stone-500">Loading projects…</div> }
 );
+const ContentManager = dynamic(
+  () => import('./ContentManager').then((m) => m.default),
+  { ssr: false, loading: () => <div className="p-6 text-stone-500">Loading content…</div> }
+);
 
 interface Project {
   id: string;
@@ -66,7 +70,7 @@ interface ModernAdminDashboardProps {
 }
 
 const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthenticated = true }) => {
-  const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'settings'>('overview');
+  const [activeTab, setActiveTab] = useState<'overview' | 'projects' | 'emails' | 'analytics' | 'content' | 'settings'>('overview');
   const [projects, setProjects] = useState<Project[]>([]);
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [isLoading, setIsLoading] = useState(false);
@@ -216,6 +220,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
     { id: 'projects', label: 'Projects', icon: Database, color: 'green', description: 'Manage Projects' },
     { id: 'emails', label: 'Emails', icon: Mail, color: 'purple', description: 'Email Management' },
     { id: 'analytics', label: 'Analytics', icon: Activity, color: 'orange', description: 'Site Analytics' },
+    { id: 'content', label: 'Content', icon: Shield, color: 'teal', description: 'Texts, pages & localization' },
     { id: 'settings', label: 'Settings', icon: Settings, color: 'gray', description: 'System Settings' }
   ];
 
@@ -250,7 +255,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                 {navigation.map((item) => (
                   <button
                     key={item.id}
-                    onClick={() => setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings')}
+                    onClick={() => setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'content' | 'settings')}
                     className={`flex items-center space-x-2 px-4 py-2 rounded-lg transition-all duration-200 ${
                       activeTab === item.id
                         ? 'bg-stone-100 text-stone-900 font-medium shadow-sm border border-stone-200'
@@ -314,7 +319,7 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                     <button
                       key={item.id}
                       onClick={() => {
-                        setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'settings');
+                        setActiveTab(item.id as 'overview' | 'projects' | 'emails' | 'analytics' | 'content' | 'settings');
                         setMobileMenuOpen(false);
                       }}
                       className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-all duration-200 ${
@@ -619,6 +624,10 @@ const ModernAdminDashboard: React.FC<ModernAdminDashboardProps> = ({ isAuthentic
                 <AnalyticsDashboard isAuthenticated={isAuthenticated} />
               )}
 
+              {activeTab === 'content' && (
+                <ContentManager />
+              )}
+
               {activeTab === 'settings' && (
                 <div className="space-y-8">
                   <div>

i18n/request.ts

@@ -0,0 +1,16 @@
+import { getRequestConfig } from 'next-intl/server';
+
+export const locales = ['en', 'de'] as const;
+export type AppLocale = (typeof locales)[number];
+
+export default getRequestConfig(async ({ locale }) => {
+  // next-intl can call us with unknown/undefined locales; fall back safely
+  const requested = typeof locale === "string" ? locale : "en";
+  const safeLocale = (locales as readonly string[]).includes(requested) ? requested : "en";
+
+  return {
+    locale: safeLocale,
+    messages: (await import(`../messages/${safeLocale}.json`)).default,
+  };
+});
+

jest.setup.ts

@@ -26,6 +26,34 @@ jest.mock("next/navigation", () => ({
   notFound: jest.fn(),
 }));
 
+// Mock next-intl (ESM) for Jest
+jest.mock("next-intl", () => ({
+  useLocale: () => "en",
+  useTranslations:
+    (namespace?: string) =>
+    (key: string) => {
+      if (namespace === "nav") {
+        const map: Record<string, string> = {
+          home: "Home",
+          about: "About",
+          projects: "Projects",
+          contact: "Contact",
+        };
+        return map[key] || key;
+      }
+      if (namespace === "common") {
+        const map: Record<string, string> = {
+          backToHome: "Back to Home",
+          backToProjects: "Back to Projects",
+        };
+        return map[key] || key;
+      }
+      return key;
+    },
+  NextIntlClientProvider: ({ children }: { children: React.ReactNode }) =>
+    React.createElement(React.Fragment, null, children),
+}));
+
 // Mock next/link
 jest.mock("next/link", () => {
   return function Link({

lib/content.ts

@@ -0,0 +1,71 @@
+import { prisma } from "@/lib/prisma";
+
+export async function getSiteSettings() {
+  return prisma.siteSettings.findUnique({ where: { id: 1 } });
+}
+
+export async function getContentByKey(opts: { key: string; locale: string }) {
+  const { key, locale } = opts;
+  const page = await prisma.contentPage.findUnique({
+    where: { key },
+    include: {
+      translations: {
+        where: { locale },
+        take: 1,
+      },
+    },
+  });
+
+  if (page?.translations?.[0]) return page.translations[0];
+
+  const settings = await getSiteSettings();
+  const fallbackLocale = settings?.defaultLocale || "en";
+
+  const fallback = await prisma.contentPageTranslation.findFirst({
+    where: {
+      page: { key },
+      locale: fallbackLocale,
+    },
+  });
+
+  return fallback;
+}
+
+export async function upsertContentByKey(opts: {
+  key: string;
+  locale: string;
+  title?: string | null;
+  slug?: string | null;
+  content: unknown;
+  metaDescription?: string | null;
+  keywords?: string | null;
+}) {
+  const { key, locale, title, slug, content, metaDescription, keywords } = opts;
+
+  const page = await prisma.contentPage.upsert({
+    where: { key },
+    create: { key, status: "PUBLISHED" },
+    update: {},
+  });
+
+  return prisma.contentPageTranslation.upsert({
+    where: { pageId_locale: { pageId: page.id, locale } },
+    create: {
+      pageId: page.id,
+      locale,
+      title: title ?? undefined,
+      slug: slug ?? undefined,
+      content: content as any, // JSON
+      metaDescription: metaDescription ?? undefined,
+      keywords: keywords ?? undefined,
+    },
+    update: {
+      title: title ?? undefined,
+      slug: slug ?? undefined,
+      content: content as any, // JSON
+      metaDescription: metaDescription ?? undefined,
+      keywords: keywords ?? undefined,
+    },
+  });
+}
+

lib/prisma.ts

@@ -1,4 +1,5 @@
 import { PrismaClient } from '@prisma/client';
+import { generateUniqueSlug } from './slug';
 
 const globalForPrisma = globalThis as unknown as {
   prisma: PrismaClient | undefined;
@@ -68,9 +69,26 @@ export const projectService = {
 
   // Create new project
   async createProject(data: Record<string, unknown>) {
+    const providedSlug = typeof data.slug === 'string' ? data.slug : undefined;
+    const providedTitle = typeof data.title === 'string' ? data.title : undefined;
+
+    const slug =
+      providedSlug?.trim() ||
+      (await generateUniqueSlug({
+        base: providedTitle || 'project',
+        isTaken: async (candidate) => {
+          const existing = await prisma.project.findUnique({
+            where: { slug: candidate },
+            select: { id: true },
+          });
+          return !!existing;
+        },
+      }));
+
     return prisma.project.create({
       data: {
         ...data,
+        slug,
         performance: data.performance || { lighthouse: 0, bundleSize: '0KB', loadTime: '0s' },
         analytics: data.analytics || { views: 0, likes: 0, shares: 0 }
       } as any // eslint-disable-line @typescript-eslint/no-explicit-any

lib/richtext.ts

@@ -0,0 +1,71 @@
+import sanitizeHtml from "sanitize-html";
+import type { JSONContent } from "@tiptap/react";
+import { generateHTML } from "@tiptap/html";
+import StarterKit from "@tiptap/starter-kit";
+import Underline from "@tiptap/extension-underline";
+import Link from "@tiptap/extension-link";
+import { TextStyle } from "@tiptap/extension-text-style";
+import Color from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import { FontFamily } from "@/lib/tiptap/fontFamily";
+
+export function richTextToSafeHtml(doc: JSONContent): string {
+  const raw = generateHTML(doc, [
+    StarterKit,
+    Underline,
+    Link.configure({
+      openOnClick: false,
+      autolink: false,
+      HTMLAttributes: { rel: "noopener noreferrer", target: "_blank" },
+    }),
+    TextStyle,
+    FontFamily,
+    Color,
+    Highlight,
+  ]);
+
+  return sanitizeHtml(raw, {
+    allowedTags: [
+      "p",
+      "br",
+      "h1",
+      "h2",
+      "h3",
+      "blockquote",
+      "strong",
+      "em",
+      "u",
+      "a",
+      "ul",
+      "ol",
+      "li",
+      "code",
+      "pre",
+      "span"
+    ],
+    allowedAttributes: {
+      a: ["href", "rel", "target"],
+      span: ["style"],
+      code: ["class"],
+      pre: ["class"],
+      p: ["class"],
+      h1: ["class"],
+      h2: ["class"],
+      h3: ["class"],
+      blockquote: ["class"],
+      ul: ["class"],
+      ol: ["class"],
+      li: ["class"]
+    },
+    allowedSchemes: ["http", "https", "mailto"],
+    allowProtocolRelative: false,
+    allowedStyles: {
+      span: {
+        color: [/^#[0-9a-fA-F]{3,8}$/],
+        "background-color": [/^#[0-9a-fA-F]{3,8}$/],
+        "font-family": [/^(Inter|ui-sans-serif|ui-serif|ui-monospace)$/],
+      },
+    },
+  });
+}
+

lib/slug.ts

@@ -0,0 +1,30 @@
+export function slugify(input: string): string {
+  return input
+    .trim()
+    .toLowerCase()
+    .replace(/['"]/g, "")
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+export async function generateUniqueSlug(opts: {
+  base: string;
+  isTaken: (slug: string) => Promise<boolean>;
+  maxAttempts?: number;
+}): Promise<string> {
+  const maxAttempts = opts.maxAttempts ?? 50;
+  const normalizedBase = slugify(opts.base) || "item";
+
+  let candidate = normalizedBase;
+  for (let i = 0; i < maxAttempts; i++) {
+    // First try the base, then base-2, base-3, ...
+    candidate = i === 0 ? normalizedBase : `${normalizedBase}-${i + 1}`;
+    // eslint-disable-next-line no-await-in-loop
+    const taken = await opts.isTaken(candidate);
+    if (!taken) return candidate;
+  }
+
+  // Last resort: append timestamp to avoid collisions
+  return `${normalizedBase}-${Date.now()}`;
+}
+

lib/tiptap/fontFamily.ts

@@ -0,0 +1,67 @@
+import { Extension } from "@tiptap/core";
+
+const allowedFonts = [
+  "Inter",
+  "ui-sans-serif",
+  "ui-serif",
+  "ui-monospace",
+] as const;
+
+export type AllowedFontFamily = (typeof allowedFonts)[number];
+
+declare module "@tiptap/core" {
+  interface Commands<ReturnType> {
+    fontFamily: {
+      setFontFamily: (fontFamily: string) => ReturnType;
+      unsetFontFamily: () => ReturnType;
+    };
+  }
+}
+
+export const FontFamily = Extension.create({
+  name: "fontFamily",
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: ["textStyle"],
+        attributes: {
+          fontFamily: {
+            default: null,
+            parseHTML: (element) => {
+              const raw = (element as HTMLElement).style.fontFamily;
+              if (!raw) return null;
+              // Normalize: remove quotes and take first family only
+              const first = raw.split(",")[0]?.trim().replace(/^["']|["']$/g, "");
+              if (!first) return null;
+              return first;
+            },
+            renderHTML: (attributes) => {
+              const fontFamily = attributes.fontFamily as string | null;
+              if (!fontFamily) return {};
+              if (!allowedFonts.includes(fontFamily as AllowedFontFamily)) return {};
+              return { style: `font-family: ${fontFamily}` };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setFontFamily:
+        (fontFamily: string) =>
+        ({ chain }) => {
+          if (!allowedFonts.includes(fontFamily as AllowedFontFamily)) return false;
+          return chain().setMark("textStyle", { fontFamily }).run();
+        },
+      unsetFontFamily:
+        () =>
+        ({ chain }) => {
+          return chain().setMark("textStyle", { fontFamily: null }).removeEmptyTextStyle().run();
+        },
+    };
+  },
+});
+

messages/de.json

@@ -0,0 +1,25 @@
+{
+  "nav": {
+    "home": "Start",
+    "about": "Über mich",
+    "projects": "Projekte",
+    "contact": "Kontakt"
+  },
+  "common": {
+    "backToHome": "Zurück zur Startseite",
+    "backToProjects": "Zurück zu den Projekten",
+    "viewAllProjects": "Alle Projekte ansehen",
+    "loading": "Lädt..."
+  },
+  "consent": {
+    "title": "Datenschutz-Einstellungen",
+    "description": "Wir nutzen optionale Dienste (Analytics und Chat), um die Seite zu verbessern. Du kannst deine Auswahl jederzeit ändern.",
+    "essential": "Essentiell",
+    "analytics": "Analytics",
+    "chat": "Chatbot",
+    "acceptAll": "Alles akzeptieren",
+    "acceptSelected": "Auswahl akzeptieren",
+    "rejectAll": "Alles ablehnen"
+  }
+}
+

messages/en.json

@@ -0,0 +1,25 @@
+{
+  "nav": {
+    "home": "Home",
+    "about": "About",
+    "projects": "Projects",
+    "contact": "Contact"
+  },
+  "common": {
+    "backToHome": "Back to Home",
+    "backToProjects": "Back to Projects",
+    "viewAllProjects": "View All Projects",
+    "loading": "Loading..."
+  },
+  "consent": {
+    "title": "Privacy settings",
+    "description": "We use optional services (analytics and chat) to improve the site. You can change your choice anytime.",
+    "essential": "Essential",
+    "analytics": "Analytics",
+    "chat": "Chatbot",
+    "acceptAll": "Accept all",
+    "acceptSelected": "Accept selected",
+    "rejectAll": "Reject all"
+  }
+}
+

middleware.ts

@@ -1,21 +1,82 @@
 import { NextResponse } from "next/server";
 import type { NextRequest } from "next/server";
 
+const SUPPORTED_LOCALES = ["en", "de"] as const;
+type SupportedLocale = (typeof SUPPORTED_LOCALES)[number];
+
+function pickLocaleFromHeader(acceptLanguage: string | null): SupportedLocale {
+  if (!acceptLanguage) return "en";
+  const lower = acceptLanguage.toLowerCase();
+  // Very small parser: prefer de, then en
+  if (lower.includes("de")) return "de";
+  if (lower.includes("en")) return "en";
+  return "en";
+}
+
+function hasLocalePrefix(pathname: string): boolean {
+  return SUPPORTED_LOCALES.some((l) => pathname === `/${l}` || pathname.startsWith(`/${l}/`));
+}
+
 export function middleware(request: NextRequest) {
-  // For /manage and /editor routes, the pages handle their own authentication
-  // No middleware redirect needed - let the pages show login forms
+  const { pathname, search } = request.nextUrl;
+
+  // Keep admin + APIs unlocalized for simplicity
+  const isAdminOrApi =
+    pathname.startsWith("/api/") ||
+    pathname === "/api" ||
+    pathname.startsWith("/manage") ||
+    pathname.startsWith("/editor");
+
+  // Locale routing for public site pages
+  const responseUrl = request.nextUrl.clone();
+
+  if (!isAdminOrApi) {
+    if (hasLocalePrefix(pathname)) {
+      // Persist locale preference
+      const locale = pathname.split("/")[1] as SupportedLocale;
+      const res = NextResponse.next();
+      res.cookies.set("NEXT_LOCALE", locale, { path: "/" });
+
+      // Continue below to add security headers
+      // eslint-disable-next-line no-use-before-define
+      return addHeaders(request, res);
+    }
+
+    // Redirect bare routes to locale-prefixed ones
+    const preferred = pickLocaleFromHeader(request.headers.get("accept-language"));
+    const redirectTarget =
+      pathname === "/" ? `/${preferred}` : `/${preferred}${pathname}${search || ""}`;
+    responseUrl.pathname = redirectTarget;
+    const res = NextResponse.redirect(responseUrl);
+    res.cookies.set("NEXT_LOCALE", preferred, { path: "/" });
+    // eslint-disable-next-line no-use-before-define
+    return addHeaders(request, res);
+  }
 
   // Fix for 421 Misdirected Request with Nginx Proxy Manager
   // Ensure proper host header handling for reverse proxy
-  const hostname = request.headers.get('host') || request.headers.get('x-forwarded-host') || '';
+  const hostname = request.headers.get("host") || request.headers.get("x-forwarded-host") || "";
   
   // Add security headers to all responses
   const response = NextResponse.next();
   
+  return addHeaders(request, response, hostname);
+}
+
+function addHeaders(request: NextRequest, response: NextResponse, hostnameOverride?: string) {
+  const hostname =
+    hostnameOverride ??
+    request.headers.get("host") ??
+    request.headers.get("x-forwarded-host") ??
+    "";
+
   // Set proper headers for Nginx Proxy Manager
   if (hostname) {
-    response.headers.set('X-Forwarded-Host', hostname);
-    response.headers.set('X-Real-IP', request.headers.get('x-real-ip') || request.headers.get('x-forwarded-for') || '');
+    response.headers.set("X-Forwarded-Host", hostname);
+    response.headers.set(
+      "X-Real-IP",
+      request.headers.get("x-real-ip") || request.headers.get("x-forwarded-for") || "",
+    );
   }
 
   // Security headers (complementing next.config.ts headers)
@@ -42,13 +103,11 @@ export const config = {
   matcher: [
     /*
      * Match all request paths except for the ones starting with:
-     * - api/email (email API routes)
-     * - api/health (health check)
+     * - api (all API routes)
      * - _next/static (static files)
      * - _next/image (image optimization files)
      * - favicon.ico (favicon file)
-     * - api/auth (auth API routes - need to be processed)
      */
-    "/((?!api/email|api/health|_next/static|_next/image|favicon.ico|api/auth).*)",
+    "/((?!api|_next/static|_next/image|favicon.ico).*)",
   ],
 };

next.config.ts

@@ -2,6 +2,7 @@ import type { NextConfig } from "next";
 import dotenv from "dotenv";
 import path from "path";
 import bundleAnalyzer from "@next/bundle-analyzer";
+import createNextIntlPlugin from "next-intl/plugin";
 
 // Load the .env file from the working directory
 dotenv.config({ path: path.resolve(process.cwd(), ".env") });
@@ -76,9 +77,9 @@ const nextConfig: NextConfig = {
     const csp =
       process.env.NODE_ENV === "production"
         ? // Avoid `unsafe-eval` in production (reduces XSS impact and enables stronger CSP)
-          "default-src 'self'; script-src 'self' 'unsafe-inline' https://analytics.dk0.dev; script-src-elem 'self' 'unsafe-inline' https://analytics.dk0.dev; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: https:; connect-src 'self' https://analytics.dk0.dev https://api.quotable.io; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
+          "default-src 'self'; script-src 'self' 'unsafe-inline'; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';"
         : // Dev CSP: allow eval for tooling compatibility
-          "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://analytics.dk0.dev; script-src-elem 'self' 'unsafe-inline' https://analytics.dk0.dev; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:; img-src 'self' data: https:; connect-src 'self' https://analytics.dk0.dev https://api.quotable.io; frame-ancestors 'none'; base-uri 'self'; form-action 'self';";
+          "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'; script-src-elem 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; font-src 'self' data:; img-src 'self' data: https:; connect-src 'self'; frame-ancestors 'none'; base-uri 'self'; form-action 'self';";
 
     return [
       {
@@ -144,4 +145,6 @@ const withBundleAnalyzer = bundleAnalyzer({
   enabled: process.env.ANALYZE === "true",
 });
 
-export default withBundleAnalyzer(nextConfig);
+const withNextIntl = createNextIntlPlugin("./i18n/request.ts");
+
+export default withBundleAnalyzer(withNextIntl(nextConfig));

package.json

@@ -54,6 +54,14 @@
   "dependencies": {
     "@next/bundle-analyzer": "^15.1.7",
     "@prisma/client": "^5.22.0",
+    "@tiptap/extension-color": "^3.15.3",
+    "@tiptap/extension-highlight": "^3.15.3",
+    "@tiptap/extension-link": "^3.15.3",
+    "@tiptap/extension-text-style": "^3.15.3",
+    "@tiptap/extension-underline": "^3.15.3",
+    "@tiptap/html": "^3.15.3",
+    "@tiptap/react": "^3.15.3",
+    "@tiptap/starter-kit": "^3.15.3",
     "@vercel/og": "^0.6.5",
     "clsx": "^2.1.1",
     "dotenv": "^16.6.1",
@@ -61,6 +69,7 @@
     "gray-matter": "^4.0.3",
     "lucide-react": "^0.542.0",
     "next": "^15.5.7",
+    "next-intl": "^4.7.0",
     "node-cache": "^5.1.2",
     "node-fetch": "^2.7.0",
     "nodemailer": "^7.0.11",
@@ -70,7 +79,9 @@
     "react-markdown": "^10.1.0",
     "react-responsive-masonry": "^2.7.1",
     "redis": "^5.8.2",
-    "tailwind-merge": "^2.6.0"
+    "sanitize-html": "^2.17.0",
+    "tailwind-merge": "^2.6.0",
+    "zod": "^4.3.5"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
@@ -86,6 +97,8 @@
     "@types/react-dom": "^19",
     "@types/react-responsive-masonry": "^2.6.0",
     "@types/react-syntax-highlighter": "^15.5.11",
+    "@types/sanitize-html": "^2.16.0",
+    "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
     "eslint": "^9",
     "eslint-config-next": "^15.5.7",
@@ -93,7 +106,7 @@
     "jest-environment-jsdom": "^29.7.0",
     "nodemailer-mock": "^2.0.9",
     "playwright": "^1.57.0",
-    "postcss": "^8",
+    "postcss": "^8.4.49",
     "prisma": "^5.22.0",
     "tailwindcss": "^3.4.17",
     "ts-jest": "^29.2.5",

prisma/schema.prisma

@@ -9,6 +9,8 @@ datasource db {
 
 model Project {
   id                 Int        @id @default(autoincrement())
+  slug               String     @unique @db.VarChar(255)
+  defaultLocale      String     @default("en") @db.VarChar(10)
   title              String     @db.VarChar(255)
   description        String
   content            String
@@ -39,6 +41,8 @@ model Project {
   createdAt          DateTime   @default(now()) @map("created_at")
   updatedAt          DateTime   @updatedAt @map("updated_at")
 
+  translations       ProjectTranslation[]
+
   @@index([category])
   @@index([featured])
   @@index([published])
@@ -47,6 +51,75 @@ model Project {
   @@index([tags])
 }
 
+model ProjectTranslation {
+  id              Int      @id @default(autoincrement())
+  projectId        Int      @map("project_id")
+  locale          String   @db.VarChar(10)
+  title           String   @db.VarChar(255)
+  description     String
+  content         Json?
+  metaDescription String?
+  keywords        String?
+  ogImage         String?  @db.VarChar(500)
+  schema          Json?
+  createdAt       DateTime @default(now()) @map("created_at")
+  updatedAt       DateTime @updatedAt @map("updated_at")
+
+  project         Project  @relation(fields: [projectId], references: [id], onDelete: Cascade)
+
+  @@unique([projectId, locale])
+  @@index([locale])
+  @@index([projectId])
+  @@map("project_translations")
+}
+
+model ContentPage {
+  id         Int      @id @default(autoincrement())
+  key        String   @unique @db.VarChar(100)
+  status     ContentStatus @default(PUBLISHED)
+  createdAt  DateTime @default(now()) @map("created_at")
+  updatedAt  DateTime @updatedAt @map("updated_at")
+
+  translations ContentPageTranslation[]
+
+  @@map("content_pages")
+}
+
+model ContentPageTranslation {
+  id              Int      @id @default(autoincrement())
+  pageId          Int      @map("page_id")
+  locale          String   @db.VarChar(10)
+  title           String?
+  slug            String?  @db.VarChar(255)
+  content         Json
+  metaDescription String?
+  keywords        String?
+  updatedAt       DateTime @updatedAt @map("updated_at")
+  createdAt       DateTime @default(now()) @map("created_at")
+
+  page            ContentPage @relation(fields: [pageId], references: [id], onDelete: Cascade)
+
+  @@unique([pageId, locale])
+  @@index([locale])
+  @@index([slug])
+  @@map("content_page_translations")
+}
+
+model SiteSettings {
+  id            Int      @id @default(1)
+  defaultLocale String   @default("en") @db.VarChar(10)
+  locales       String[] @default(["en","de"])
+  theme         Json?
+  updatedAt     DateTime @updatedAt @map("updated_at")
+
+  @@map("site_settings")
+}
+
+enum ContentStatus {
+  DRAFT
+  PUBLISHED
+}
+
 model PageView {
   id        Int      @id @default(autoincrement())
   projectId Int?     @map("project_id")

prisma/seed.ts

@@ -1,4 +1,5 @@
 import { PrismaClient } from "@prisma/client";
+import { slugify } from "../lib/slug";
 
 const prisma = new PrismaClient();
 
@@ -947,10 +948,21 @@ Visit any non-existent page on the site to see the terminal in action. Or click
     },
   ];
 
+  const usedSlugs = new Set<string>();
   for (const project of projects) {
+    const baseSlug = slugify(project.title);
+    let slug = baseSlug;
+    let counter = 2;
+    while (usedSlugs.has(slug) || !slug) {
+      slug = `${baseSlug || "project"}-${counter++}`;
+    }
+    usedSlugs.add(slug);
+
     await prisma.project.create({
       data: {
         ...project,
+        slug,
+        defaultLocale: "en",
         difficulty: project.difficulty as
           | "BEGINNER"
           | "INTERMEDIATE"