Merge branch 'dev' into production

- HeaderClient: track locale prop changes with useRef and call
  window.scrollTo on switch to reliably reset scroll position
- messages/en.json + de.json: replace em dash with comma and remove
  hyphens from Self-Hoster/Full-Stack in hero description

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitea/workflows/ci.yml

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

CLAUDE.md

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

__mocks__/boneyard-js/react.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+
+export function Skeleton({ children, loading }: { children: React.ReactNode; loading: boolean; name?: string; animate?: string; transition?: boolean | number }) {
+  if (loading) return <div data-testid="boneyard-skeleton">Loading...</div>;
+  return <>{children}</>;
+}

app/[locale]/page.tsx

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

app/[locale]/projects/page.tsx

@@ -13,12 +13,7 @@ export async function generateMetadata({
 }): Promise<Metadata> {
   const { locale } = await params;
   const languages = getLanguageAlternates({ pathWithoutLocale: "projects" });
-  const isDe = locale === "de";
   return {
-    title: isDe ? "Projekte – Dennis Konkol" : "Projects – Dennis Konkol",
-    description: isDe
-      ? "Webentwicklung, Fullstack-Apps und Mobile-Projekte von Dennis Konkol. Next.js, Flutter, Docker und mehr – Osnabrück."
-      : "Web development, fullstack apps and mobile projects by Dennis Konkol. Next.js, Flutter, Docker and more – Osnabrück.",
     alternates: {
       canonical: toAbsoluteUrl(`/${locale}/projects`),
       languages,

app/__tests__/components/CurrentlyReading.test.tsx

@@ -17,10 +17,10 @@ describe("CurrentlyReading Component", () => {
     global.fetch = jest.fn();
   });
 
-  it("renders loading skeleton when loading", () => {
+  it("renders skeleton when loading", () => {
     (global.fetch as jest.Mock).mockReturnValue(new Promise(() => {}));
     render(<CurrentlyReadingComp />);
-    expect(screen.getAllByText).toBeDefined();
+    expect(screen.getByTestId("boneyard-skeleton")).toBeInTheDocument();
   });
 
   it("renders a book when data is fetched", async () => {

app/_ui/HomePageServer.tsx

@@ -31,41 +31,20 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
   return (
     <div className="min-h-screen">
       <Script
-        id={"structured-data-person"}
+        id={"structured-data"}
         type="application/ld+json"
         dangerouslySetInnerHTML={{
           __html: JSON.stringify({
             "@context": "https://schema.org",
             "@type": "Person",
             name: "Dennis Konkol",
-            alternateName: ["dk0", "denshooter"],
             url: "https://dk0.dev",
             jobTitle: "Software Engineer",
-            description:
-              locale === "de"
-                ? "Software Engineer & Webentwickler in Osnabrück. Webentwicklung, Fullstack-Apps, Docker, Next.js, Flutter."
-                : "Software Engineer & Web Developer in Osnabrück, Germany. Web development, fullstack apps, Docker, Next.js, Flutter.",
             address: {
               "@type": "PostalAddress",
               addressLocality: "Osnabrück",
-              addressRegion: "Niedersachsen",
-              addressCountry: "DE",
+              addressCountry: "Germany",
             },
-            knowsAbout: [
-              "Webentwicklung",
-              "Web Development",
-              "Next.js",
-              "React",
-              "TypeScript",
-              "Flutter",
-              "Docker",
-              "DevOps",
-              "Self-Hosting",
-              "CI/CD",
-              "Fullstack Development",
-              "Softwareentwicklung",
-              "Informatik",
-            ],
             sameAs: [
               "https://github.com/Denshooter",
               "https://linkedin.com/in/dkonkol",
@@ -73,20 +52,6 @@ export default async function HomePageServer({ locale }: HomePageServerProps) {
           }),
         }}
       />
-      <Script
-        id={"structured-data-website"}
-        type="application/ld+json"
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify({
-            "@context": "https://schema.org",
-            "@type": "WebSite",
-            name: "Dennis Konkol",
-            alternateName: "dk0.dev",
-            url: "https://dk0.dev",
-            inLanguage: ["de", "en"],
-          }),
-        }}
-      />
       <Header locale={locale} />
       {/* Spacer to prevent navbar overlap */}
       <div className="h-24 md:h-32" aria-hidden="true"></div>

app/_ui/ProjectDetailClient.tsx

@@ -6,7 +6,6 @@ import ReactMarkdown from "react-markdown";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import ProjectThumbnail from "@/app/components/ProjectThumbnail";
 
 export type ProjectDetailData = {
   id: number;
@@ -91,13 +90,9 @@ export default function ProjectDetailClient({
             {project.imageUrl ? (
               <Image src={project.imageUrl} alt={project.title} fill className="object-cover" priority sizes="100vw" />
             ) : (
-              <ProjectThumbnail
-                title={project.title}
-                category={project.category}
-                tags={project.tags}
-                slug={project.slug}
-                size="hero"
-              />
+              <div className="absolute inset-0 bg-stone-100 dark:bg-stone-800 flex items-center justify-center">
+                <span className="text-[15rem] font-black text-stone-200 dark:text-stone-700">{project.title.charAt(0)}</span>
+              </div>
             )}
           </div>
         </div>

app/_ui/ProjectsPageClient.tsx

@@ -7,7 +7,6 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import { Skeleton } from "../components/ui/Skeleton";
-import ProjectThumbnail from "@/app/components/ProjectThumbnail";
 
 export type ProjectListItem = {
   id: number | string; // Allow both for Directus (string) and Prisma (number) compatibility
@@ -75,7 +74,7 @@ export default function ProjectsPageClient({
           </Link>
           
           <h1 className="text-6xl md:text-[10rem] font-black tracking-tighter text-stone-900 dark:text-stone-50 leading-[0.85] uppercase">
-            {tList("title")}<span className="text-liquid-mint">.</span>
+            Archive<span className="text-liquid-mint">.</span>
           </h1>
           <p className="mt-8 text-xl md:text-3xl font-light text-stone-500 dark:text-stone-400 max-w-2xl leading-snug tracking-tight">
             {tList("intro")}
@@ -128,20 +127,10 @@ export default function ProjectsPageClient({
             <motion.div key={project.id} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }}>
               <Link href={`/${locale}/projects/${project.slug}`} className="group block h-full">
                 <div className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm h-full hover:shadow-xl transition-all flex flex-col">
-                  {project.imageUrl ? (
+                  {project.imageUrl && (
                     <div className="relative aspect-[16/10] rounded-[2rem] overflow-hidden mb-8 border-4 border-stone-50 dark:border-stone-800 shadow-lg">
                       <Image src={project.imageUrl} alt={project.title} fill className="object-cover group-hover:scale-105 transition-transform duration-700" />
                     </div>
-                  ) : (
-                    <div className="relative aspect-[16/10] rounded-[2rem] overflow-hidden mb-8 border-4 border-stone-50 dark:border-stone-800 shadow-lg">
-                      <ProjectThumbnail
-                        title={project.title}
-                        category={project.category}
-                        tags={project.tags}
-                        slug={project.slug}
-                        size="card"
-                      />
-                    </div>
                   )}
                   <div className="flex-1 flex flex-col">
                     <div className="flex justify-between items-start mb-4">

app/components/ActivityFeed.tsx

@@ -214,12 +214,7 @@ export default function ActivityFeed({
               ))}
             </div>
           </div>
-          <a
-            href={data.music.url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="flex gap-4 relative z-10"
-          >
+          <div className="flex gap-4 relative z-10">
             <div className="w-16 h-16 rounded-lg overflow-hidden shrink-0 shadow-md relative group-hover:shadow-xl transition-shadow duration-500">
               <Image
                 src={data.music.albumArt}
@@ -230,10 +225,10 @@ export default function ActivityFeed({
               />
             </div>
             <div className="min-w-0 flex flex-col justify-center">
-              <p className="font-bold text-[#1DB954] dark:text-[#1DB954] text-base truncate leading-tight mb-1 hover:underline">{data.music.track}</p>
+              <p className="font-bold text-[#1DB954] dark:text-[#1DB954] text-base truncate leading-tight mb-1">{data.music.track}</p>
               <p className="text-sm text-stone-600 dark:text-white/60 truncate font-medium">{data.music.artist}</p>
             </div>
-          </a>
+          </div>
           {/* Subtle Spotify branding gradient */}
           <div className="absolute top-0 right-0 w-32 h-32 bg-[#1DB954]/5 blur-[60px] rounded-full -mr-16 -mt-16 pointer-events-none" />
         </motion.div>

app/components/ClientProviders.tsx

@@ -7,6 +7,7 @@ import { ToastProvider } from "@/components/Toast";
 import ErrorBoundary from "@/components/ErrorBoundary";
 import { ConsentProvider } from "./ConsentProvider";
 import { ThemeProvider } from "./ThemeProvider";
+import "../../bones/registry";
 
 const BackgroundBlobs = dynamic(
   () => import("@/components/BackgroundBlobs").catch(() => ({ default: () => null })),

app/components/CurrentlyReading.tsx

@@ -5,7 +5,7 @@ import { BookOpen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
-import { Skeleton } from "./ui/Skeleton";
+import { Skeleton } from "boneyard-js/react";
 
 interface CurrentlyReading {
   title: string;
@@ -60,29 +60,9 @@ const CurrentlyReading = () => {
     return null;
   }
 
-  if (loading) {
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-2 mb-4">
-          <Skeleton className="h-5 w-5 rounded" />
-          <Skeleton className="h-5 w-40" />
-        </div>
-        <div className="rounded-xl border-2 border-stone-200 dark:border-stone-700 p-6 space-y-3">
-          <div className="flex gap-4">
-            <Skeleton className="w-24 h-36 sm:w-28 sm:h-40 rounded-lg" />
-            <div className="flex-1 space-y-2">
-              <Skeleton className="h-4 w-3/4" />
-              <Skeleton className="h-3 w-1/2" />
-              <Skeleton className="h-2 w-full rounded-full" />
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-
   return (
-    <div className="space-y-4">
+    <Skeleton name="currently-reading" loading={loading} animate="shimmer" transition>
+      <div className="space-y-4">
       {/* Header */}
       <div className="flex items-center gap-2 mb-4">
         <BookOpen size={18} className="text-stone-600 dark:text-stone-300 flex-shrink-0" />
@@ -174,7 +154,8 @@ const CurrentlyReading = () => {
           </div>
         </motion.div>
        ))}
-</div>
+    </div>
+    </Skeleton>
   );
 };
 

app/components/HeaderClient.tsx

@@ -1,18 +1,12 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
+import { SiGithub, SiLinkedin } from "react-icons/si";
 import Link from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
 import type { NavTranslations } from "@/types/translations";
 import { ThemeToggle } from "./ThemeToggle";
 
-const SiGithubIcon = ({ size = 20 }: { size?: number }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
-);
-const SiLinkedinIcon = ({ size = 20 }: { size?: number }) => (
-  <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
-);
-
 // Inline SVG icons to avoid loading the full lucide-react chunk (~116KB)
 const MenuIcon = ({ size = 24 }: { size?: number }) => (
   <svg xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="18" y2="18"/></svg>
@@ -62,9 +56,9 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
   ];
 
   const socialLinks = [
-    { icon: SiGithubIcon, href: "https://github.com/Denshooter", label: "GitHub" },
+    { icon: SiGithub, href: "https://github.com/Denshooter", label: "GitHub" },
     {
-      icon: SiLinkedinIcon,
+      icon: SiLinkedin,
       href: "https://linkedin.com/in/dkonkol",
       label: "LinkedIn",
     },
@@ -151,18 +145,19 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
       </header>
 
       {/* Mobile menu overlay */}
-      {isOpen && (
-        <div
-          className="fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden"
-          onClick={() => setIsOpen(false)}
-        />
-      )}
+      <div
+        className={`fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden transition-opacity duration-200 ${
+          isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+        onClick={() => setIsOpen(false)}
+      />
 
       {/* Mobile menu panel */}
-      {isOpen && (
-        <div
-          className="fixed right-0 top-0 h-full w-80 bg-white shadow-2xl z-50 md:hidden overflow-y-auto"
-        >
+      <div
+        className={`fixed right-0 top-0 h-full w-80 bg-white shadow-2xl z-50 md:hidden overflow-y-auto transition-transform duration-300 ease-out ${
+          isOpen ? "translate-x-0" : "translate-x-full"
+        }`}
+      >
         <div className="p-6">
           <div className="flex justify-between items-center mb-8">
             <Link
@@ -241,8 +236,7 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
             </div>
           </div>
         </div>
-        </div>
-      )}
+      </div>
     </>
   );
 }

app/components/Hero.tsx

@@ -51,10 +51,10 @@ export default async function Hero({ locale }: HeroProps) {
           </div>
 
           {/* Right: The Photo */}
-<div className="relative w-52 h-52 sm:w-64 sm:h-64 md:w-80 md:h-80 xl:w-[500px] xl:h-[500px] shrink-0 mt-4 sm:mt-8 xl:mt-0 animate-[fadeIn_1s_ease-out]">
-              <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[3rem] sm:rounded-[4rem] lg:rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
-              <div className="relative w-full h-full rounded-[2.5rem] sm:rounded-[3rem] lg:rounded-[4rem] overflow-hidden border-[12px] sm:border-[16px] lg:border-[24px] border-white dark:border-stone-900 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] sm:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]" style={{ willChange: "transform" }}>
-                <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority fetchPriority="high" sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, (max-width: 1280px) 320px, 500px" />
+          <div className="relative w-52 h-52 sm:w-64 sm:h-64 md:w-80 md:h-80 xl:w-[500px] xl:h-[500px] shrink-0 mt-4 sm:mt-8 xl:mt-0 animate-[fadeIn_1s_ease-out]">
+            <div className="absolute inset-0 bg-gradient-to-tr from-liquid-mint to-liquid-purple rounded-[3rem] sm:rounded-[4rem] lg:rounded-[5rem] rotate-12 scale-90 opacity-20 blur-3xl" />
+            <div className="relative w-full h-full rounded-[2.5rem] sm:rounded-[3rem] lg:rounded-[4rem] overflow-hidden border-[12px] sm:border-[16px] lg:border-[24px] border-white dark:border-stone-900 shadow-[0_30px_60px_-15px_rgba(0,0,0,0.3)] sm:shadow-[0_50px_100px_-20px_rgba(0,0,0,0.4)]">
+              <Image src="/images/me.jpg" alt="Dennis Konkol" fill className="object-cover" priority sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, (max-width: 1280px) 320px, 500px" />
             </div>
 
             <div className="absolute -bottom-4 -left-4 sm:-bottom-6 sm:-left-6 bg-white dark:bg-stone-800 px-5 py-3 sm:px-8 sm:py-4 rounded-xl sm:rounded-[2rem] shadow-2xl border border-stone-100 dark:border-stone-700">

app/components/ProjectThumbnail.tsx

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

app/components/Projects.tsx

@@ -6,8 +6,7 @@ import { ArrowUpRight } from "lucide-react";
 import Link from "next/link";
 import Image from "next/image";
 import { useLocale, useTranslations } from "next-intl";
-import { Skeleton } from "./ui/Skeleton";
-import ProjectThumbnail from "./ProjectThumbnail";
+import { Skeleton } from "boneyard-js/react";
 
 interface Project {
   id: number;
@@ -28,7 +27,7 @@ const Projects = () => {
   const [projects, setProjects] = useState<Project[]>([]);
   const [loading, setLoading] = useState(true);
   const locale = useLocale();
-  const t = useTranslations("home.projects");
+  useTranslations("home.projects");
 
   useEffect(() => {
     const loadProjects = async () => {
@@ -53,32 +52,22 @@ const Projects = () => {
         <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-8 sm:mb-12 md:mb-16 gap-4 sm:gap-6">
           <div>
             <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-black text-stone-900 dark:text-stone-50 tracking-tighter mb-2 sm:mb-4 uppercase">
-              {t("title")}<span className="text-emerald-600 dark:text-emerald-400">.</span>
+              Selected Work<span className="text-emerald-600 dark:text-emerald-400">.</span>
             </h2>
             <p className="text-base sm:text-lg md:text-xl text-stone-500 max-w-xl font-light">
-              {t("subtitle")}
+              Projects that pushed my boundaries.
             </p>
           </div>
-<Link href={`/${locale}/projects`} className="group flex items-center gap-2 text-stone-900 dark:text-stone-100 font-black border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-all text-xs uppercase tracking-widest">
-              {t("viewAll")} <ArrowUpRight className="group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" size={14} />
-            </Link>
+          <Link href={`/${locale}/projects`} className="group flex items-center gap-2 text-stone-900 dark:text-stone-100 font-black border-b-2 border-stone-900 dark:border-stone-100 pb-1 hover:opacity-70 transition-all text-xs uppercase tracking-widest">
+            View Archive <ArrowUpRight className="group-hover:-translate-y-1 group-hover:translate-x-1 transition-transform" size={14} />
+          </Link>
         </div>
 
-        {loading ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
-            {Array.from({ length: 4 }).map((_, i) => (
-              <div key={i} className="space-y-4">
-                <Skeleton className="aspect-[16/10] sm:aspect-[4/3] rounded-2xl sm:rounded-3xl" />
-                <Skeleton className="h-6 w-3/4" />
-                <Skeleton className="h-4 w-1/2" />
-              </div>
-            ))}
-          </div>
-        ) : (
+        <Skeleton name="projects-grid" loading={loading} animate="shimmer" transition>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
-          {projects.length === 0 ? (
+          {projects.length === 0 && !loading ? (
             <div className="col-span-2 py-12 text-center text-stone-400 dark:text-stone-600 text-sm">
-              {t("noProjects")}
+              No projects yet.
             </div>
           ) : (
             projects.map((project) => (
@@ -97,13 +86,9 @@ const Projects = () => {
                       className="object-cover transition-transform duration-700 group-hover:scale-105"
                     />
                   ) : (
-                    <ProjectThumbnail
-                      title={project.title}
-                      category={project.category}
-                      tags={project.tags}
-                      slug={project.slug}
-                      size="card"
-                    />
+                    <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900">
+                      <span className="text-4xl font-bold text-stone-300 dark:text-stone-700">{project.title.charAt(0)}</span>
+                    </div>
                   )}
                   {/* Overlay on Hover */}
                   <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-500" />
@@ -131,7 +116,7 @@ const Projects = () => {
             </motion.div>
           )))}
         </div>
-        )}
+        </Skeleton>
       </div>
     </section>
   );

app/components/ReadBooks.tsx

@@ -5,7 +5,7 @@ import { BookCheck, Star, ChevronDown, ChevronUp } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
-import { Skeleton } from "./ui/Skeleton";
+import { Skeleton } from "boneyard-js/react";
 
 interface BookReview {
   id: string;
@@ -95,31 +95,9 @@ const ReadBooks = () => {
   const visibleReviews = expanded ? reviews : reviews.slice(0, INITIAL_SHOW);
   const hasMore = reviews.length > INITIAL_SHOW;
 
-  if (loading) {
-    return (
-      <div className="space-y-4">
-        <div className="flex items-center gap-2 mb-4">
-          <Skeleton className="h-5 w-5 rounded" />
-          <Skeleton className="h-5 w-40" />
-        </div>
-        {Array.from({ length: 3 }).map((_, i) => (
-          <div key={i} className="rounded-xl border-2 border-stone-200 dark:border-stone-700 p-5 space-y-3">
-            <div className="flex gap-4">
-              <Skeleton className="w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg" />
-              <div className="flex-1 space-y-2">
-                <Skeleton className="h-4 w-3/4" />
-                <Skeleton className="h-3 w-1/2" />
-                <Skeleton className="h-3 w-full" />
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  }
-
   return (
-    <div className="space-y-4">
+    <Skeleton name="read-books" loading={loading} animate="shimmer" transition>
+      <div className="space-y-4">
       {/* Header */}
       <div className="flex items-center gap-2 mb-4">
         <BookCheck size={18} className="text-stone-600 dark:text-stone-300 flex-shrink-0" />
@@ -265,6 +243,7 @@ const ReadBooks = () => {
       )}
 
     </div>
+    </Skeleton>
   );
 };
 

app/components/ShaderGradientBackground.tsx

@@ -5,27 +5,54 @@ export default function ShaderGradientBackground() {
   return (
     <div
       aria-hidden="true"
-      className="fixed inset-0 -z-10 overflow-hidden pointer-events-none"
+      style={{
+        position: "fixed",
+        inset: 0,
+        zIndex: -1,
+        overflow: "hidden",
+        pointerEvents: "none",
+      }}
     >
+      {/* Upper-left: crimson → pink (was Sphere 1: posX=-2.5, posY=1.5) */}
       <div
-        className="absolute -top-[10%] -left-[15%] w-[55%] h-[65%] rounded-full opacity-60"
         style={{
-          background: "radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
-          filter: "blur(80px)",
+          position: "absolute",
+          top: "-10%",
+          left: "-15%",
+          width: "55%",
+          height: "65%",
+          background:
+            "radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
+          filter: "blur(100px)",
+          opacity: 0.6,
         }}
       />
+      {/* Right-center: pink → crimson (was Sphere 2: posX=2.0, posY=-0.5) */}
       <div
-        className="absolute top-[25%] -right-[10%] w-[50%] h-[60%] rounded-full opacity-55"
         style={{
-          background: "radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
-          filter: "blur(80px)",
+          position: "absolute",
+          top: "25%",
+          right: "-10%",
+          width: "50%",
+          height: "60%",
+          background:
+            "radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
+          filter: "blur(100px)",
+          opacity: 0.55,
         }}
       />
+      {/* Lower-left: orange → pink (was Sphere 3: posX=-0.5, posY=-2.0) */}
       <div
-        className="absolute -bottom-[15%] left-[5%] w-[50%] h-[60%] rounded-full opacity-50"
         style={{
-          background: "radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
-          filter: "blur(80px)",
+          position: "absolute",
+          bottom: "-15%",
+          left: "5%",
+          width: "50%",
+          height: "60%",
+          background:
+            "radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
+          filter: "blur(100px)",
+          opacity: 0.5,
         }}
       />
     </div>

app/layout.tsx

@@ -32,8 +32,6 @@ export default async function RootLayout({
     <html lang={locale} suppressHydrationWarning>
       <head>
         <meta charSet="utf-8" />
-        <link rel="preconnect" href="https://assets.hardcover.app" />
-        <link rel="preconnect" href="https://cms.dk0.dev" />
         {/* Prevent flash of unstyled theme — reads localStorage before React hydrates */}
         <script dangerouslySetInnerHTML={{ __html: `try{var t=localStorage.getItem('theme');if(t==='dark')document.documentElement.classList.add('dark');}catch(e){}` }} />
       </head>
@@ -49,33 +47,23 @@ export default async function RootLayout({
 export const metadata: Metadata = {
   metadataBase: new URL(getBaseUrl()),
   title: {
-    default: "Dennis Konkol",
-    template: "%s | dk0",
+    default: "Dennis Konkol | Portfolio",
+    template: "%s | Dennis Konkol",
   },
   description:
-    "Dennis Konkol – Software Engineer & Webentwickler in Osnabrück. Webentwicklung, Fullstack-Apps, Docker, Next.js, Flutter. Portfolio mit Projekten und Kontakt.",
+    "Portfolio of Dennis Konkol, a student and software engineer based in Osnabrück, Germany. Passionate about technology, coding, and solving real-world problems.",
   keywords: [
     "Dennis Konkol",
-    "dk0",
-    "denshooter",
-    "Webentwicklung Osnabrück",
-    "Webentwicklung",
-    "Softwareentwicklung Osnabrück",
-    "Website erstellen Osnabrück",
-    "Web Design Osnabrück",
-    "Informatik Osnabrück",
     "Software Engineer",
-    "Full Stack Developer",
-    "Frontend Developer Osnabrück",
-    "Next.js",
-    "React",
-    "TypeScript",
-    "Flutter",
-    "Docker",
-    "Self-Hosting",
-    "DevOps",
     "Portfolio",
+    "Student",
+    "Web Development",
+    "Full Stack Developer",
     "Osnabrück",
+    "Germany",
+    "React",
+    "Next.js",
+    "TypeScript",
   ],
   authors: [{ name: "Dennis Konkol", url: "https://dk0.dev" }],
   creator: "Dennis Konkol",
@@ -92,27 +80,26 @@ export const metadata: Metadata = {
     },
   },
   openGraph: {
-    title: "Dennis Konkol",
+    title: "Dennis Konkol | Portfolio",
     description:
-      "Software Engineer & Webentwickler in Osnabrück. Next.js, Flutter, Docker, DevOps. Projekte ansehen und Kontakt aufnehmen.",
+      "Explore my projects and contact me for collaboration opportunities!",
     url: "https://dk0.dev",
-    siteName: "Dennis Konkol",
+    siteName: "Dennis Konkol Portfolio",
     images: [
       {
         url: "https://dk0.dev/api/og",
         width: 1200,
         height: 630,
-        alt: "Dennis Konkol",
+        alt: "Dennis Konkol Portfolio",
       },
     ],
-    locale: "de_DE",
-    alternateLocale: ["en_US"],
+    locale: "en_US",
     type: "website",
   },
   twitter: {
     card: "summary_large_image",
-    title: "Dennis Konkol",
-    description: "Software Engineer & Webentwickler in Osnabrück.",
+    title: "Dennis Konkol | Portfolio",
+    description: "Student & Software Engineer based in Osnabrück, Germany.",
     images: ["https://dk0.dev/api/og"],
     creator: "@denshooter",
   },
@@ -121,9 +108,5 @@ export const metadata: Metadata = {
   },
   alternates: {
     canonical: "https://dk0.dev",
-    languages: {
-      de: "https://dk0.dev/de",
-      en: "https://dk0.dev/en",
-    },
   },
 };

app/not-found.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { motion } from "framer-motion";
 import { ArrowLeft, Search } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -20,7 +21,12 @@ export default function NotFound() {
       <div className="max-w-7xl mx-auto w-full">
         <div className="grid grid-cols-1 md:grid-cols-12 gap-4 sm:gap-6 md:gap-8 max-w-5xl mx-auto">
 
-          <div className="md:col-span-12 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between min-h-[300px] sm:min-h-[400px]">
+          {/* Main Error Card */}
+          <motion.div
+            initial={{ opacity: 0, y: 30 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="md:col-span-12 bg-white dark:bg-stone-900 rounded-2xl sm:rounded-[2.5rem] md:rounded-[3rem] p-6 sm:p-8 md:p-16 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col justify-between min-h-[300px] sm:min-h-[400px]"
+          >
             <div>
               <div className="flex items-center gap-3 mb-6 sm:mb-8 md:mb-12">
                 <div className="w-10 h-10 rounded-2xl bg-stone-900 dark:bg-stone-50 flex items-center justify-center text-white dark:text-stone-900 font-black text-xs">
@@ -38,7 +44,7 @@ export default function NotFound() {
 
             <div className="mt-8 sm:mt-10 md:mt-12 flex flex-wrap gap-3 sm:gap-4">
               <Link
-                href="/en"
+                href="/"
                 className="group relative px-6 sm:px-10 py-3 sm:py-4 bg-stone-900 dark:bg-stone-50 text-white dark:text-stone-900 rounded-xl sm:rounded-2xl font-black text-xs uppercase tracking-[0.2em] shadow-xl hover:scale-105 transition-all"
               >
                 Return Home
@@ -50,22 +56,28 @@ export default function NotFound() {
                 Go Back
               </button>
             </div>
-          </div>
+          </motion.div>
 
-          <div className="md:col-span-12 bg-stone-900 rounded-2xl sm:rounded-[2.5rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex flex-col justify-between min-h-[200px]">
+          {/* Explore Work Card */}
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ delay: 0.1 }}
+            className="md:col-span-12 bg-stone-900 rounded-2xl sm:rounded-[2.5rem] p-6 sm:p-8 md:p-10 border border-stone-800 shadow-2xl text-white relative overflow-hidden group flex flex-col justify-between min-h-[200px]"
+          >
             <div className="relative z-10">
               <Search className="text-liquid-mint mb-4 sm:mb-6" size={28} />
               <h3 className="text-xl sm:text-2xl font-black uppercase tracking-tighter mb-1 sm:mb-2">Explore Work</h3>
               <p className="text-stone-400 text-sm font-medium">Maybe what you need is in my project archive?</p>
             </div>
             <Link
-              href="/en/projects"
+              href="/projects"
               className="mt-5 sm:mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-liquid-mint group-hover:gap-4 transition-all"
             >
               View Projects <ArrowLeft className="rotate-180" size={14} />
             </Link>
             <div className="absolute top-0 right-0 w-32 h-32 bg-liquid-mint/5 blur-3xl rounded-full -mr-16 -mt-16" />
-          </div>
+          </motion.div>
 
         </div>
       </div>

app/projects/[slug]/page.tsx

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

app/projects/page.tsx

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

bones/registry.ts

@@ -0,0 +1,6 @@
+// Boneyard skeleton registry - auto-generated by `npx boneyard-js build`
+// This file is imported once at app initialization to register all bone layouts.
+// Run `npx boneyard-js build` to generate bone files from your components.
+const registry: Record<string, unknown> = {};
+
+export default registry;

boneyard.config.json

@@ -0,0 +1,7 @@
+{
+  "breakpoints": [375, 768, 1280],
+  "out": "./bones",
+  "wait": 800,
+  "color": "rgba(0,0,0,0.08)",
+  "animate": "pulse"
+}

discord-presence-bot/.gitignore

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

discord-presence-bot/Dockerfile

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

discord-presence-bot/index.js

@@ -1,110 +0,0 @@
-const { Client, GatewayIntentBits, ActivityType } = require("discord.js");
-const http = require("http");
-
-const TOKEN = process.env.DISCORD_BOT_TOKEN;
-const TARGET_USER_ID = process.env.DISCORD_USER_ID || "172037532370862080";
-const PORT = parseInt(process.env.BOT_PORT || "3001", 10);
-
-if (!TOKEN) {
-  console.error("DISCORD_BOT_TOKEN is required");
-  process.exit(1);
-}
-
-const client = new Client({
-  intents: [
-    GatewayIntentBits.Guilds,
-    GatewayIntentBits.GuildPresences,
-  ],
-});
-
-let cachedData = {
-  discord_status: "offline",
-  listening_to_spotify: false,
-  spotify: null,
-  activities: [],
-};
-
-function updatePresence(guild) {
-  const member = guild.members.cache.get(TARGET_USER_ID);
-  if (!member || !member.presence) return;
-
-  const presence = member.presence;
-  cachedData.discord_status = presence.status || "offline";
-
-  cachedData.activities = presence.activities
-    ? presence.activities
-        .filter((a) => a.type !== ActivityType.Custom)
-        .map((a) => ({
-          name: a.name,
-          type: a.type,
-          details: a.details || null,
-          state: a.state || null,
-          assets: a.assets
-            ? {
-                large_image: a.assets.largeImage || null,
-                large_text: a.assets.largeText || null,
-                small_image: a.assets.smallImage || null,
-                small_text: a.assets.smallText || null,
-              }
-            : null,
-          timestamps: a.timestamps
-            ? {
-                start: a.timestamps.start?.toISOString() || null,
-                end: a.timestamps.end?.toISOString() || null,
-              }
-            : null,
-        }))
-    : [];
-
-  const spotifyActivity = presence.activities
-    ? presence.activities.find((a) => a.type === ActivityType.Listening && a.name === "Spotify")
-    : null;
-
-  if (spotifyActivity && spotifyActivity.syncId) {
-    cachedData.listening_to_spotify = true;
-    cachedData.spotify = {
-      song: spotifyActivity.details || "",
-      artist: spotifyActivity.state ? spotifyActivity.state.replace(/; /g, "; ") : "",
-      album: spotifyActivity.assets?.largeText || "",
-      album_art_url: spotifyActivity.assets?.largeImage
-        ? `https://i.scdn.co/image/${spotifyActivity.assets.largeImage.replace("spotify:", "")}`
-        : null,
-      track_id: spotifyActivity.syncId || null,
-    };
-  } else {
-    cachedData.listening_to_spotify = false;
-    cachedData.spotify = null;
-  }
-}
-
-function updateAll() {
-  for (const guild of client.guilds.cache.values()) {
-    updatePresence(guild);
-  }
-}
-
-client.on("ready", () => {
-  console.log(`Bot online as ${client.user.tag}`);
-  client.user.setActivity("Watching Presence", { type: ActivityType.Watching });
-  updateAll();
-});
-
-client.on("presenceUpdate", () => {
-  updateAll();
-});
-
-const server = http.createServer((req, res) => {
-  if (req.method === "GET" && req.url === "/presence") {
-    res.writeHead(200, { "Content-Type": "application/json" });
-    res.end(JSON.stringify({ data: cachedData }));
-  } else {
-    res.writeHead(404);
-    res.end("Not found");
-  }
-});
-
-server.listen(PORT, () => {
-  console.log(`HTTP endpoint listening on port ${PORT}`);
-});
-
-client.login(TOKEN);

discord-presence-bot/package-lock.json

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

discord-presence-bot/package.json

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

docker-compose.production.yml

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

docker-compose.yml

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

env.example

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

eslint.config.mjs

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

jest.config.ts

@@ -16,11 +16,12 @@ const config: Config = {
   testPathIgnorePatterns: ["/node_modules/", "/__mocks__/", "/.next/", "/e2e/"],
   // Transform react-markdown and other ESM modules
   transformIgnorePatterns: [
-    "node_modules/(?!(react-markdown|remark-.*|rehype-.*|unified|bail|is-plain-obj|trough|vfile|vfile-message|unist-.*|micromark|parse-entities|character-entities|mdast-.*|hast-.*|property-information|space-separated-tokens|comma-separated-tokens|web-namespaces|zwitch|longest-streak|ccount)/)",
+    "node_modules/(?!(react-markdown|remark-.*|rehype-.*|unified|bail|is-plain-obj|trough|vfile|vfile-message|unist-.*|micromark|parse-entities|character-entities|mdast-.*|hast-.*|property-information|space-separated-tokens|comma-separated-tokens|web-namespaces|zwitch|longest-streak|ccount|boneyard-js)/)",
   ],
   // Module name mapping to fix haste collision
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/$1",
+    "^boneyard-js/react$": "<rootDir>/__mocks__/boneyard-js/react.tsx",
   },
   // Exclude problematic directories from haste
   modulePathIgnorePatterns: ["<rootDir>/.next/", "<rootDir>/node_modules/", "<rootDir>/e2e/"],

lib/sitemap.ts

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

messages/de.json

@@ -34,7 +34,7 @@
         "f2": "Docker Swarm & CI/CD",
         "f3": "Self-Hosted Infrastruktur"
       },
-      "description": "Ich bin Dennis Konkol, Informatik-Student und Webentwickler aus Osnabrück. Ich entwickle Fullstack-Apps mit Next.js und Flutter und betreibe meine eigene Infrastruktur mit Docker und CI/CD.",
+      "description": "Ich bin Dennis, Student aus Osnabrück und leidenschaftlicher Selfhoster. Ich entwickle Fullstack Apps und sorge am liebsten selbst dafür, dass sie auf meiner eigenen Infrastruktur perfekt laufen.",
       "ctaWork": "Meine Projekte",
       "ctaContact": "Kontakt"
     },
@@ -86,11 +86,10 @@
       }
     },
     "projects": {
-      "title": "Ausgewählte Arbeiten",
-      "subtitle": "Projekte, die meine Grenzen erweitert haben.",
+      "title": "Ausgewählte Projekte",
+      "subtitle": "Eine Auswahl an Projekten, an denen ich gearbeitet habe – von Web-Apps bis zu Experimenten.",
       "featured": "Featured",
-      "viewAll": "Archiv ansehen",
-      "noProjects": "Noch keine Projekte."
+      "viewAll": "Alle Projekte ansehen"
     },
     "contact": {
       "title": "Kontakt",

messages/en.json

@@ -35,7 +35,7 @@
         "f2": "Docker Swarm & CI/CD",
         "f3": "Self-Hosted Infrastructure"
       },
-      "description": "I'm Dennis Konkol, a computer science student and web developer from Osnabrück, Germany. I build fullstack apps with Next.js and Flutter and love running my own infrastructure with Docker and CI/CD.",
+      "description": "I'm Dennis, a student from Germany and a passionate selfhoster. I build fullstack applications and love the challenge of managing the infrastructure they run on.",
       "ctaWork": "View Projects",
       "ctaContact": "Get in touch"
     },
@@ -87,11 +87,10 @@
       }
     },
     "projects": {
-      "title": "Selected Work",
-      "subtitle": "Projects that pushed my boundaries.",
+      "title": "Selected Works",
+      "subtitle": "A collection of projects I've worked on, ranging from web applications to experiments.",
       "featured": "Featured",
-      "viewAll": "View Archive",
-      "noProjects": "No projects yet."
+      "viewAll": "View All Projects"
     },
     "contact": {
       "title": "Contact Me",

n8n-workflows/portfolio-status.json

@@ -93,7 +93,7 @@
     },
     {
       "parameters": {
-        "url": "http://discord-bot:3001/presence",
+        "url": "https://api.lanyard.rest/v1/users/172037532370862080",
         "options": {}
       },
       "type": "n8n-nodes-base.httpRequest",

next.config.ts

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

nginx.production.conf

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

package-lock.json

@@ -20,6 +20,7 @@
         "@tiptap/react": "^3.15.3",
         "@tiptap/starter-kit": "^3.15.3",
         "@vercel/og": "^0.6.5",
+        "boneyard-js": "^1.7.6",
         "clsx": "^2.1.1",
         "dotenv": "^16.6.1",
         "framer-motion": "^12.24.10",
@@ -31,6 +32,7 @@
         "nodemailer": "^7.0.11",
         "react": "^19.2.3",
         "react-dom": "^19.2.3",
+        "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
         "redis": "^5.8.2",
         "sanitize-html": "^2.17.0",
@@ -594,6 +596,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@chenglou/pretext": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/@chenglou/pretext/-/pretext-0.0.5.tgz",
+      "integrity": "sha512-A8GZN10REdFGsyuiUgLV8jjPDDFMg5GmgxGWV0I3igxBOnzj+jgz2VMmVD7g+SFyoctfeqHFxbNatKSzVRWtRg==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/@cspotcode/source-map-support": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz",
@@ -5436,6 +5445,53 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/boneyard-js": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/boneyard-js/-/boneyard-js-1.7.6.tgz",
+      "integrity": "sha512-9K3+cD684J131itS2iUI1+dsWqE7K3hSZid0nyXeBxtSTWQTFSpnGM7xmup16QwtmeGR70MPvpzluhA2Nl5LuQ==",
+      "license": "MIT",
+      "dependencies": {
+        "playwright": "^1.58.2"
+      },
+      "bin": {
+        "boneyard-js": "bin/cli.js"
+      },
+      "optionalDependencies": {
+        "@chenglou/pretext": "^0.0.5"
+      },
+      "peerDependencies": {
+        "@angular/core": ">=14",
+        "preact": ">=10",
+        "react": ">=18",
+        "react-native": ">=0.71",
+        "svelte": ">=5.29",
+        "vite": ">=5",
+        "vue": ">=3"
+      },
+      "peerDependenciesMeta": {
+        "@angular/core": {
+          "optional": true
+        },
+        "preact": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vite": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -12014,7 +12070,6 @@
       "version": "1.58.2",
       "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.58.2.tgz",
       "integrity": "sha512-vA30H8Nvkq/cPBnNw4Q8TWz1EJyqgpuinBcHET0YVJVFldr8JDNiU9LaWAE1KqSkRYazuaBhTpB5ZzShOezQ6A==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "dependencies": {
         "playwright-core": "1.58.2"
@@ -12033,7 +12088,6 @@
       "version": "1.58.2",
       "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.58.2.tgz",
       "integrity": "sha512-yZkEtftgwS8CsfYo7nm0KE8jsvm6i/PTgVtB8DL726wNf6H2IMsDuxCpJj59KDaxCtSnrWan2AeDqM7JBaultg==",
-      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "playwright-core": "cli.js"
@@ -12627,6 +12681,15 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -64,6 +64,7 @@
     "@tiptap/react": "^3.15.3",
     "@tiptap/starter-kit": "^3.15.3",
     "@vercel/og": "^0.6.5",
+    "boneyard-js": "^1.7.6",
     "clsx": "^2.1.1",
     "dotenv": "^16.6.1",
     "framer-motion": "^12.24.10",
@@ -75,6 +76,7 @@
     "nodemailer": "^7.0.11",
     "react": "^19.2.3",
     "react-dom": "^19.2.3",
+    "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
     "redis": "^5.8.2",
     "sanitize-html": "^2.17.0",

scripts/empty-module.js

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