diff --git a/__mocks__/boneyard-js/react.tsx b/__mocks__/boneyard-js/react.tsx
deleted file mode 100644
index e13fd62..0000000
--- a/__mocks__/boneyard-js/react.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-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}</>;
-}
\ No newline at end of file
diff --git a/app/__tests__/components/CurrentlyReading.test.tsx b/app/__tests__/components/CurrentlyReading.test.tsx
index 9f2ec76..d7fc01e 100644
--- a/app/__tests__/components/CurrentlyReading.test.tsx
+++ b/app/__tests__/components/CurrentlyReading.test.tsx
@@ -17,10 +17,10 @@ describe("CurrentlyReading Component", () => {
     global.fetch = jest.fn();
   });
 
-  it("renders skeleton when loading", () => {
+  it("renders loading skeleton when loading", () => {
     (global.fetch as jest.Mock).mockReturnValue(new Promise(() => {}));
     render(<CurrentlyReadingComp />);
-    expect(screen.getByTestId("boneyard-skeleton")).toBeInTheDocument();
+    expect(screen.getAllByText).toBeDefined();
   });
 
   it("renders a book when data is fetched", async () => {
diff --git a/app/components/ClientProviders.tsx b/app/components/ClientProviders.tsx
index 545e874..7aaa57a 100644
--- a/app/components/ClientProviders.tsx
+++ b/app/components/ClientProviders.tsx
@@ -7,7 +7,6 @@ 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 })),
diff --git a/app/components/CurrentlyReading.tsx b/app/components/CurrentlyReading.tsx
index 5ca34ea..ba54f6b 100644
--- a/app/components/CurrentlyReading.tsx
+++ b/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 "boneyard-js/react";
+import { Skeleton } from "./ui/Skeleton";
 
 interface CurrentlyReading {
   title: string;
@@ -60,9 +60,29 @@ const CurrentlyReading = () => {
     return null;
   }
 
-  return (
-    <Skeleton name="currently-reading" loading={loading} animate="shimmer" transition>
+  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">
       {/* Header */}
       <div className="flex items-center gap-2 mb-4">
         <BookOpen size={18} className="text-stone-600 dark:text-stone-300 flex-shrink-0" />
@@ -154,8 +174,7 @@ const CurrentlyReading = () => {
           </div>
         </motion.div>
        ))}
-    </div>
-    </Skeleton>
+</div>
   );
 };
 
diff --git a/app/components/HeaderClient.tsx b/app/components/HeaderClient.tsx
index 6dcf8f2..a70d5b2 100644
--- a/app/components/HeaderClient.tsx
+++ b/app/components/HeaderClient.tsx
@@ -1,12 +1,18 @@
 "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>
@@ -56,9 +62,9 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
   ];
 
   const socialLinks = [
-    { icon: SiGithub, href: "https://github.com/Denshooter", label: "GitHub" },
+    { icon: SiGithubIcon, href: "https://github.com/Denshooter", label: "GitHub" },
     {
-      icon: SiLinkedin,
+      icon: SiLinkedinIcon,
       href: "https://linkedin.com/in/dkonkol",
       label: "LinkedIn",
     },
@@ -145,19 +151,18 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
       </header>
 
       {/* Mobile menu overlay */}
-      <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)}
-      />
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-stone-900/50 backdrop-blur-sm z-40 md:hidden"
+          onClick={() => setIsOpen(false)}
+        />
+      )}
 
       {/* Mobile menu panel */}
-      <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"
-        }`}
-      >
+      {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="p-6">
           <div className="flex justify-between items-center mb-8">
             <Link
@@ -236,7 +241,8 @@ export default function HeaderClient({ locale, translations }: HeaderClientProps
             </div>
           </div>
         </div>
-      </div>
+        </div>
+      )}
     </>
   );
 }
diff --git a/app/components/Hero.tsx b/app/components/Hero.tsx
index 125cbb5..eca82e3 100644
--- a/app/components/Hero.tsx
+++ b/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)]">
-              <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 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>
 
             <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">
diff --git a/app/components/Projects.tsx b/app/components/Projects.tsx
index e3e538e..8742eb0 100644
--- a/app/components/Projects.tsx
+++ b/app/components/Projects.tsx
@@ -6,7 +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 "boneyard-js/react";
+import { Skeleton } from "./ui/Skeleton";
 import ProjectThumbnail from "./ProjectThumbnail";
 
 interface Project {
@@ -64,9 +64,19 @@ const Projects = () => {
             </Link>
         </div>
 
-        <Skeleton name="projects-grid" loading={loading} animate="shimmer" transition>
+        {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>
+        ) : (
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12">
-          {projects.length === 0 && !loading ? (
+          {projects.length === 0 ? (
             <div className="col-span-2 py-12 text-center text-stone-400 dark:text-stone-600 text-sm">
               {t("noProjects")}
             </div>
@@ -121,7 +131,7 @@ const Projects = () => {
             </motion.div>
           )))}
         </div>
-        </Skeleton>
+        )}
       </div>
     </section>
   );
diff --git a/app/components/ReadBooks.tsx b/app/components/ReadBooks.tsx
index 9bdeaf4..d823d66 100644
--- a/app/components/ReadBooks.tsx
+++ b/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 "boneyard-js/react";
+import { Skeleton } from "./ui/Skeleton";
 
 interface BookReview {
   id: string;
@@ -95,9 +95,31 @@ const ReadBooks = () => {
   const visibleReviews = expanded ? reviews : reviews.slice(0, INITIAL_SHOW);
   const hasMore = reviews.length > INITIAL_SHOW;
 
-  return (
-    <Skeleton name="read-books" loading={loading} animate="shimmer" transition>
+  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">
       {/* Header */}
       <div className="flex items-center gap-2 mb-4">
         <BookCheck size={18} className="text-stone-600 dark:text-stone-300 flex-shrink-0" />
@@ -243,7 +265,6 @@ const ReadBooks = () => {
       )}
 
     </div>
-    </Skeleton>
   );
 };
 
diff --git a/app/components/ShaderGradientBackground.tsx b/app/components/ShaderGradientBackground.tsx
index 56e4b88..9c5db96 100644
--- a/app/components/ShaderGradientBackground.tsx
+++ b/app/components/ShaderGradientBackground.tsx
@@ -5,54 +5,27 @@ export default function ShaderGradientBackground() {
   return (
     <div
       aria-hidden="true"
-      style={{
-        position: "fixed",
-        inset: 0,
-        zIndex: -1,
-        overflow: "hidden",
-        pointerEvents: "none",
-      }}
+      className="fixed inset-0 -z-10 overflow-hidden pointer-events-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={{
-          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,
+          background: "radial-gradient(ellipse at 50% 50%, #b01040 0%, #e167c5 40%, transparent 70%)",
+          filter: "blur(80px)",
         }}
       />
-      {/* 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={{
-          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,
+          background: "radial-gradient(ellipse at 50% 50%, #e167c5 0%, #b01040 40%, transparent 70%)",
+          filter: "blur(80px)",
         }}
       />
-      {/* 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={{
-          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,
+          background: "radial-gradient(ellipse at 50% 50%, #b04a17 0%, #e167c5 40%, transparent 70%)",
+          filter: "blur(80px)",
         }}
       />
     </div>
diff --git a/app/layout.tsx b/app/layout.tsx
index 4c16aae..42febf0 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -32,6 +32,8 @@ 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>
diff --git a/app/not-found.tsx b/app/not-found.tsx
index 49cf0ac..23e5a54 100644
--- a/app/not-found.tsx
+++ b/app/not-found.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { motion } from "framer-motion";
 import { ArrowLeft, Search } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
@@ -21,12 +20,7 @@ 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">
 
-          {/* 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 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">
@@ -44,7 +38,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="/"
+                href="/en"
                 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
@@ -56,28 +50,22 @@ export default function NotFound() {
                 Go Back
               </button>
             </div>
-          </motion.div>
+          </div>
 
-          {/* 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="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="/projects"
+              href="/en/projects"
               className="mt-5 sm:mt-8 inline-flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-liquid-mint group-hover:gap-4 transition-all"
             >
               View Projects <ArrowLeft className="rotate-180" size={14} />
             </Link>
             <div className="absolute top-0 right-0 w-32 h-32 bg-liquid-mint/5 blur-3xl rounded-full -mr-16 -mt-16" />
-          </motion.div>
+          </div>
 
         </div>
       </div>
diff --git a/app/projects/[slug]/page.tsx b/app/projects/[slug]/page.tsx
deleted file mode 100644
index 307fc18..0000000
--- a/app/projects/[slug]/page.tsx
+++ /dev/null
@@ -1,239 +0,0 @@
-"use client";
-
-import { motion } from 'framer-motion';
-import { ExternalLink, Calendar, ArrowLeft, Github as GithubIcon, Share2 } from 'lucide-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useParams } from 'next/navigation';
-import { useState, useEffect } from 'react';
-import ReactMarkdown from 'react-markdown';
-import { useLocale, useTranslations } from "next-intl";
-
-interface Project {
-  id: number;
-  slug: string;
-  title: string;
-  description: string;
-  content: string;
-  tags: string[];
-  featured: boolean;
-  category: string;
-  date: string;
-  github?: string;
-  live?: string;
-  imageUrl?: string;
-}
-
-const ProjectDetail = () => {
-  const params = useParams();
-  const slug = params.slug as string;
-  const locale = useLocale();
-  const t = useTranslations("common");
-  const [project, setProject] = useState<Project | null>(null);
-
-  // Load project from API by slug
-  useEffect(() => {
-    const loadProject = async () => {
-      try {
-        const response = await fetch(`/api/projects/search?slug=${slug}`);
-        if (response.ok) {
-          const data = await response.json();
-          if (data.projects && data.projects.length > 0) {
-            const loadedProject = data.projects[0];
-            setProject(loadedProject);
-            
-          }
-        }
-      } catch (error) {
-        if (process.env.NODE_ENV === 'development') {
-          console.error('Error loading project:', error);
-        }
-      }
-    };
-
-    loadProject();
-  }, [slug]);
-
-  if (!project) {
-    return (
-      <div className="min-h-screen bg-[#fdfcf8] flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-stone-800 mx-auto mb-4"></div>
-          <p className="text-stone-500 font-medium">Loading project...</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
-      <div className="max-w-4xl mx-auto px-4">
-        {/* Navigation */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.6 }}
-          className="mb-8"
-        >
-          <Link
-            href={`/${locale}/projects`}
-            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-900 transition-colors group"
-          >
-            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
-            <span className="font-medium">{t("backToProjects")}</span>
-          </Link>
-        </motion.div>
-
-        {/* Header & Meta */}
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.1 }}
-          className="mb-12"
-        >
-          <div className="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
-            <h1 className="text-4xl md:text-6xl font-black font-sans text-stone-900 tracking-tight leading-tight">
-              {project.title}
-            </h1>
-            <div className="flex gap-2 shrink-0 pt-2">
-                 {project.featured && (
-                    <span className="px-4 py-1.5 bg-stone-900 text-stone-50 text-xs font-bold rounded-full shadow-sm">
-                        Featured
-                    </span>
-                 )}
-                 <span className="px-4 py-1.5 bg-white border border-stone-200 text-stone-600 text-xs font-medium rounded-full shadow-sm">
-                    {project.category}
-                 </span>
-            </div>
-          </div>
-          
-          <p className="text-xl md:text-2xl text-stone-600 font-light leading-relaxed max-w-3xl mb-8">
-            {project.description}
-          </p>
-
-          <div className="flex flex-wrap items-center gap-6 text-stone-500 text-sm border-y border-stone-200 py-6">
-            <div className="flex items-center space-x-2">
-              <Calendar size={18} />
-              <span className="font-mono">{new Date(project.date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })}</span>
-            </div>
-            <div className="h-4 w-px bg-stone-300 hidden sm:block"></div>
-            <div className="flex flex-wrap gap-2">
-                {project.tags.map(tag => (
-                    <span key={tag} className="text-stone-700 font-medium">#{tag}</span>
-                ))}
-            </div>
-          </div>
-        </motion.div>
-
-        {/* Featured Image / Fallback */}
-        <motion.div
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.8, delay: 0.2 }}
-            className="mb-16 rounded-2xl overflow-hidden shadow-2xl bg-stone-100 aspect-video relative"
-        >
-             {project.imageUrl ? (
-                <Image 
-                    src={project.imageUrl} 
-                    alt={project.title} 
-                    fill
-                    unoptimized
-                    className="w-full h-full object-cover"
-                />
-             ) : (
-                <div className="absolute inset-0 bg-gradient-to-br from-stone-200 to-stone-300 flex items-center justify-center">
-                    <span className="text-9xl font-serif font-bold text-stone-500/20 select-none">
-                        {project.title.charAt(0)}
-                    </span>
-                </div>
-             )}
-        </motion.div>
-
-
-        {/* Content & Sidebar Layout */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12">
-            {/* Main Content */}
-            <motion.div
-            initial={{ opacity: 0, y: 30 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.3 }}
-            className="lg:col-span-2"
-            >
-            <div className="markdown prose prose-stone max-w-none prose-lg prose-headings:font-bold prose-headings:tracking-tight prose-a:text-stone-900 prose-a:decoration-stone-300 hover:prose-a:decoration-stone-900 prose-img:rounded-xl prose-img:shadow-lg">
-                <ReactMarkdown
-                    components={{
-                         // Custom components to ensure styling matches
-                        h1: ({children}) => <h1 className="text-3xl font-bold text-stone-900 mt-8 mb-4">{children}</h1>,
-                        h2: ({children}) => <h2 className="text-2xl font-bold text-stone-900 mt-8 mb-4">{children}</h2>,
-                        p: ({children}) => <p className="text-stone-700 leading-relaxed mb-6">{children}</p>,
-                        li: ({children}) => <li className="text-stone-700">{children}</li>,
-                        code: ({children}) => <code className="bg-stone-100 text-stone-800 px-1.5 py-0.5 rounded text-sm font-mono font-medium">{children}</code>,
-                        pre: ({children}) => <pre className="bg-stone-900 text-stone-50 p-6 rounded-xl overflow-x-auto my-6 shadow-lg">{children}</pre>,
-                    }}
-                >
-                {project.content}
-                </ReactMarkdown>
-            </div>
-            </motion.div>
-
-            {/* Sidebar / Actions */}
-            <motion.div
-                initial={{ opacity: 0, x: 20 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.8, delay: 0.4 }}
-                className="lg:col-span-1 space-y-8"
-            >
-                <div className="bg-white/50 backdrop-blur-xl border border-white/60 p-6 rounded-2xl shadow-sm sticky top-32">
-                    <h3 className="font-bold text-stone-900 mb-4 flex items-center gap-2">
-                        <Share2 size={18} />
-                        Project Links
-                    </h3>
-                    <div className="space-y-3">
-                        {project.live && project.live.trim() && project.live !== "#" ? (
-                            <a
-                            href={project.live}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center justify-between w-full px-4 py-3 bg-stone-900 text-stone-50 rounded-xl font-medium hover:bg-stone-800 hover:scale-[1.02] transition-all shadow-md group"
-                            >
-                                <span>Live Demo</span>
-                                <ExternalLink size={18} className="group-hover:translate-x-1 transition-transform" />
-                            </a>
-                        ) : (
-                             <div className="px-4 py-3 bg-stone-100 text-stone-400 rounded-xl font-medium text-sm text-center border border-stone-200 cursor-not-allowed">
-                                Live demo not available
-                            </div>
-                        )}
-                        
-                        {project.github && project.github.trim() && project.github !== "#" ? (
-                            <a
-                            href={project.github}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="flex items-center justify-between w-full px-4 py-3 bg-white border border-stone-200 text-stone-700 rounded-xl font-medium hover:bg-stone-50 hover:text-stone-900 hover:border-stone-300 transition-all shadow-sm group"
-                            >
-                                <span>View Source</span>
-                                <GithubIcon size={18} className="group-hover:rotate-12 transition-transform" />
-                            </a>
-                        ) : null}
-                    </div>
-
-                    <div className="mt-8 pt-6 border-t border-stone-100">
-                        <h4 className="text-xs font-bold text-stone-400 uppercase tracking-wider mb-3">Tech Stack</h4>
-                        <div className="flex flex-wrap gap-2">
-                            {project.tags.map(tag => (
-                                <span key={tag} className="px-2.5 py-1 bg-stone-100 text-stone-600 text-xs font-medium rounded-md border border-stone-200">
-                                    {tag}
-                                </span>
-                            ))}
-                        </div>
-                    </div>
-                </div>
-            </motion.div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default ProjectDetail;
\ No newline at end of file
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
deleted file mode 100644
index c65a427..0000000
--- a/app/projects/page.tsx
+++ /dev/null
@@ -1,312 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { motion } from 'framer-motion';
-import { ExternalLink, Github, Calendar, ArrowLeft, Search } from 'lucide-react';
-import Image from 'next/image';
-import Link from 'next/link';
-import { useLocale, useTranslations } from "next-intl";
-
-interface Project {
-  id: number;
-  slug: string;
-  title: string;
-  description: string;
-  content: string;
-  tags: string[];
-  featured: boolean;
-  category: string;
-  date: string;
-  github?: string;
-  live?: string;
-  imageUrl?: string;
-}
-
-const ProjectsPage = () => {
-  const [projects, setProjects] = useState<Project[]>([]);
-  const [filteredProjects, setFilteredProjects] = useState<Project[]>([]);
-  const [categories, setCategories] = useState<string[]>(["All"]);
-  const [selectedCategory, setSelectedCategory] = useState("All");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [mounted, setMounted] = useState(false);
-  const locale = useLocale();
-  const t = useTranslations("common");
-
-  // Load projects from API
-  useEffect(() => {
-    const loadProjects = async () => {
-      try {
-        const response = await fetch('/api/projects?published=true');
-        if (response.ok) {
-          const data = await response.json();
-          const loadedProjects = data.projects || [];
-          setProjects(loadedProjects);
-          
-          // Extract unique categories
-          const uniqueCategories = ["All", ...Array.from(new Set(loadedProjects.map((p: Project) => p.category))) as string[]];
-          setCategories(uniqueCategories);
-        }
-      } catch (error) {
-        if (process.env.NODE_ENV === 'development') {
-          console.error('Error loading projects:', error);
-        }
-      }
-    };
-
-    loadProjects();
-    setMounted(true);
-  }, []);
-
-  // Filter projects
-  useEffect(() => {
-    let result = projects;
-
-    if (selectedCategory !== "All") {
-      result = result.filter(project => project.category === selectedCategory);
-    }
-
-    if (searchQuery) {
-      const query = searchQuery.toLowerCase();
-      result = result.filter(project => 
-        project.title.toLowerCase().includes(query) || 
-        project.description.toLowerCase().includes(query) ||
-        project.tags.some(tag => tag.toLowerCase().includes(query))
-      );
-    }
-
-    setFilteredProjects(result);
-  }, [projects, selectedCategory, searchQuery]);
-
-  if (!mounted) {
-    return null;
-  }
-
-  return (
-    <div className="min-h-screen bg-[#fdfcf8] pt-32 pb-20">
-      <div className="max-w-7xl mx-auto px-4">
-        {/* Header */}
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8 }}
-          className="mb-12"
-        >
-          <Link
-            href={`/${locale}`}
-            className="inline-flex items-center space-x-2 text-stone-500 hover:text-stone-800 transition-colors mb-8 group"
-          >
-            <ArrowLeft size={20} className="group-hover:-translate-x-1 transition-transform" />
-            <span>{t("backToHome")}</span>
-          </Link>
-          
-          <h1 className="text-5xl md:text-6xl font-black font-sans mb-6 text-stone-900 tracking-tight">
-            My Projects
-          </h1>
-          <p className="text-xl text-stone-600 max-w-3xl font-light leading-relaxed">
-            Explore my portfolio of projects, from web applications to mobile apps. 
-            Each project showcases different skills and technologies.
-          </p>
-        </motion.div>
-
-        {/* Filters & Search */}
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.8, delay: 0.2 }}
-          className="mb-12 flex flex-col md:flex-row gap-6 justify-between items-start md:items-center"
-        >
-          {/* Categories */}
-          <div className="flex flex-wrap gap-2">
-            {categories.map((category) => (
-              <button
-                key={category}
-                onClick={() => setSelectedCategory(category)}
-                className={`px-5 py-2 rounded-full text-sm font-medium transition-all duration-200 border ${
-                  selectedCategory === category
-                    ? 'bg-stone-800 text-stone-50 border-stone-800 shadow-md'
-                    : 'bg-white text-stone-600 border-stone-200 hover:bg-stone-50 hover:border-stone-300'
-                }`}
-              >
-                {category}
-              </button>
-            ))}
-          </div>
-
-          {/* Search */}
-          <div className="relative w-full md:w-64">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-stone-400" size={18} />
-            <input
-              type="text"
-              placeholder="Search projects..."
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              className="w-full pl-10 pr-4 py-2 bg-white border border-stone-200 rounded-full text-stone-800 placeholder:text-stone-400 focus:outline-none focus:ring-2 focus:ring-stone-200 focus:border-stone-400 transition-all"
-            />
-          </div>
-        </motion.div>
-
-        {/* Projects Grid */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-          {filteredProjects.map((project, index) => (
-            <motion.div
-              key={project.id}
-              initial={{ opacity: 0, y: 30 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 0.6, delay: index * 0.1 }}
-              whileHover={{ y: -8 }}
-              className="group flex flex-col bg-white/40 backdrop-blur-xl rounded-2xl overflow-hidden border border-white/60 shadow-[0_4px_20px_rgba(0,0,0,0.02)] hover:shadow-[0_20px_40px_rgba(0,0,0,0.06)] transition-all duration-500"
-            >
-              {/* Image / Fallback / Cover Area */}
-              <div className="relative aspect-[16/10] overflow-hidden bg-stone-100">
-                {project.imageUrl ? (
-                  <>
-                    <Image 
-                      src={project.imageUrl}
-                      alt={project.title}
-                      fill
-                      unoptimized
-                      className="w-full h-full object-cover transition-transform duration-1000 ease-out group-hover:scale-110"
-                    />
-                    <div className="absolute inset-0 bg-gradient-to-t from-stone-900/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
-                  </>
-                ) : (
-                  <div className="absolute inset-0 bg-stone-200 flex items-center justify-center overflow-hidden">
-                    <div className="absolute inset-0 bg-gradient-to-br from-stone-300 via-stone-200 to-stone-300" />
-                    <div className="absolute top-[-20%] left-[-10%] w-[70%] h-[70%] bg-white/20 rounded-full blur-3xl animate-pulse" />
-                    <div className="absolute bottom-[-10%] right-[-5%] w-[60%] h-[60%] bg-stone-400/10 rounded-full blur-2xl" />
-                    
-                    <div className="relative z-10">
-                      <span className="text-7xl font-serif font-black text-stone-800/10 group-hover:text-stone-800/20 transition-all duration-700 select-none tracking-tighter">
-                        {project.title.charAt(0)}
-                      </span>
-                    </div>
-                  </div>
-                )}
-                
-                {/* Texture/Grain Overlay */}
-                <div className="absolute inset-0 opacity-[0.03] pointer-events-none mix-blend-overlay bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
-
-                {/* Animated Shine Effect */}
-                <div className="absolute inset-0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000 ease-in-out bg-gradient-to-r from-transparent via-white/20 to-transparent skew-x-[-20deg] pointer-events-none" />
-
-                {project.featured && (
-                  <div className="absolute top-3 left-3 z-20">
-                    <div className="px-3 py-1 bg-[#292524]/80 backdrop-blur-md text-[#fdfcf8] text-[10px] font-bold uppercase tracking-widest rounded-full shadow-sm border border-white/10">
-                      Featured
-                    </div>
-                  </div>
-                )}
-
-                {/* Overlay Links */}
-                <div className="absolute inset-0 bg-stone-900/40 opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out flex items-center justify-center gap-4 backdrop-blur-[2px] z-20 pointer-events-none">
-                  {project.github && (
-                    <a
-                      href={project.github}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
-                      aria-label="GitHub"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Github size={20} />
-                    </a>
-                  )}
-                  {project.live && !project.title.toLowerCase().includes('kernel panic') && (
-                    <a
-                      href={project.live}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="p-3 bg-white text-stone-900 rounded-full hover:scale-110 transition-all duration-300 shadow-xl border border-white/50 pointer-events-auto"
-                      aria-label="Live Demo"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <ExternalLink size={20} />
-                    </a>
-                  )}
-                </div>
-              </div>
-
-              <div className="p-6 flex flex-col flex-1">
-                {/* Stretched Link covering the whole card (including image area) */}
-                <Link
-                  href={`/${locale}/projects/${project.slug}`}
-                  className="absolute inset-0 z-10"
-                  aria-label={`View project ${project.title}`}
-                />
-
-                <div className="flex items-center justify-between mb-3">
-                  <h3 className="text-xl font-bold text-stone-900 group-hover:text-stone-600 transition-colors">
-                    {project.title}
-                  </h3>
-                  <div className="flex items-center space-x-2 text-stone-400 text-xs font-mono bg-white/50 px-2 py-1 rounded border border-stone-100">
-                    <Calendar size={12} />
-                    <span>{new Date(project.date).getFullYear()}</span>
-                  </div>
-                </div>
-
-                <p className="text-stone-600 mb-6 leading-relaxed line-clamp-3 text-sm flex-1">
-                  {project.description}
-                </p>
-
-                <div className="flex flex-wrap gap-2 mb-6">
-                  {project.tags.slice(0, 4).map((tag) => (
-                    <span
-                      key={tag}
-                      className="px-2.5 py-1 bg-white/60 border border-stone-100 text-stone-600 text-xs font-medium rounded-md"
-                    >
-                      {tag}
-                    </span>
-                  ))}
-                  {project.tags.length > 4 && (
-                    <span className="px-2 py-1 text-stone-400 text-xs">+ {project.tags.length - 4}</span>
-                  )}
-                </div>
-
-                <div className="mt-auto pt-4 border-t border-stone-100 flex items-center justify-between relative z-20">
-                   <div className="flex gap-3">
-                      {project.github && (
-                        <a 
-                          href={project.github} 
-                          target="_blank" 
-                          rel="noopener noreferrer" 
-                          className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110" 
-                          onClick={(e) => e.stopPropagation()}
-                        >
-                          <Github size={18} />
-                        </a>
-                      )}
-                      {project.live && !project.title.toLowerCase().includes('kernel panic') && (
-                         <a 
-                           href={project.live} 
-                           target="_blank" 
-                           rel="noopener noreferrer" 
-                           className="text-stone-400 hover:text-stone-900 transition-colors relative z-20 hover:scale-110" 
-                           onClick={(e) => e.stopPropagation()}
-                         >
-                           <ExternalLink size={18} />
-                         </a>
-                      )}
-                   </div>
-                </div>
-              </div>
-            </motion.div>
-          ))}
-        </div>
-
-        {filteredProjects.length === 0 && (
-            <div className="text-center py-20">
-                <p className="text-stone-500 text-lg">No projects found matching your criteria.</p>
-                <button 
-                    onClick={() => {setSelectedCategory("All"); setSearchQuery("");}}
-                    className="mt-4 text-stone-800 font-medium hover:underline"
-                >
-                    Clear filters
-                </button>
-            </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ProjectsPage;
\ No newline at end of file
diff --git a/bones/registry.ts b/bones/registry.ts
deleted file mode 100644
index 40ad292..0000000
--- a/bones/registry.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-// 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;
\ No newline at end of file
diff --git a/boneyard.config.json b/boneyard.config.json
deleted file mode 100644
index 829d4f1..0000000
--- a/boneyard.config.json
+++ /dev/null
@@ -1,7 +0,0 @@
-{
-  "breakpoints": [375, 768, 1280],
-  "out": "./bones",
-  "wait": 800,
-  "color": "rgba(0,0,0,0.08)",
-  "animate": "pulse"
-}
\ No newline at end of file
diff --git a/jest.config.ts b/jest.config.ts
index f5e25e4..60d8666 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -16,12 +16,11 @@ 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|boneyard-js)/)",
+    "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)/)",
   ],
   // 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/"],
diff --git a/lib/sitemap.ts b/lib/sitemap.ts
index ef81db9..2fa3d3e 100644
--- a/lib/sitemap.ts
+++ b/lib/sitemap.ts
@@ -36,15 +36,15 @@ export async function getSitemapEntries(): Promise<SitemapEntry[]> {
   const baseUrl = getBaseUrl();
   const nowIso = new Date().toISOString();
 
-  const staticPaths = ["", "/projects", "/legal-notice", "/privacy-policy"];
+  const staticPaths = ["", "/projects", "/books", "/legal-notice", "/privacy-policy"];
   const staticEntries: SitemapEntry[] = locales.flatMap((locale) =>
     staticPaths.map((p) => {
       const path = p === "" ? `/${locale}` : `/${locale}${p}`;
       return {
         url: `${baseUrl}${path}`,
         lastModified: nowIso,
-        changefreq: p === "" ? "weekly" : p === "/projects" ? "weekly" : "yearly",
-        priority: p === "" ? 1.0 : p === "/projects" ? 0.8 : 0.5,
+changefreq: p === "" ? "weekly" : (p === "/projects" || p === "/books") ? "weekly" : "yearly",
+            priority: p === "" ? 1.0 : (p === "/projects" || p === "/books") ? 0.8 : 0.5,
       };
     }),
   );
diff --git a/next.config.ts b/next.config.ts
index 2e49e52..064417a 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -33,7 +33,7 @@ const nextConfig: NextConfig = {
   // Performance optimizations
   experimental: {
     // Tree-shake barrel-file packages in both dev and production
-    optimizePackageImports: ["lucide-react", "framer-motion", "react-icons", "@tiptap/react"],
+    optimizePackageImports: ["lucide-react", "framer-motion", "@tiptap/react"],
     // Merge all CSS into a single chunk to eliminate the render-blocking CSS chain
     // (84dc7384.css → 3aefc04b.css sequential dependency reported by PageSpeed).
     cssChunking: false,
@@ -47,6 +47,8 @@ const nextConfig: NextConfig = {
   images: {
     formats: ["image/webp", "image/avif"],
     minimumCacheTTL: 2592000,
+    deviceSizes: [640, 768, 1024, 1280, 1536],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256],
     remotePatterns: [
       {
         protocol: "https",
@@ -81,6 +83,11 @@ const nextConfig: NextConfig = {
 
   // Webpack configuration
   webpack: (config, { dev, isServer, webpack }) => {
+    // Skip adding polyfill webpack aliases — Next.js injects polyfills via <script>
+    // tags, not through webpack module resolution, so aliases don't take effect.
+    // The browserslist targets (chrome >= 100, etc.) already prevent unnecessary
+    // transpilation; the 11.7 KiB polyfill chunk is a known Next.js limitation.
+
     // Fix for module resolution issues
     config.resolve.fallback = {
       ...config.resolve.fallback,
diff --git a/nginx.production.conf b/nginx.production.conf
index a8df9a5..e9752c3 100644
--- a/nginx.production.conf
+++ b/nginx.production.conf
@@ -52,17 +52,34 @@ http {
         server portfolio:3000 max_fails=3 fail_timeout=30s;
     }
 
-    # HTTP Server (redirect to HTTPS)
+    # HTTP Server (redirect to HTTPS with www → non-www)
     server {
         listen 80;
-        server_name dk0.dev www.dk0.dev;
-        return 301 https://$host$request_uri;
+        server_name www.dk0.dev;
+        return 301 https://dk0.dev$request_uri;
+    }
+
+    server {
+        listen 80;
+        server_name dk0.dev;
+        return 301 https://dk0.dev$request_uri;
+    }
+
+    # HTTPS - redirect www to non-www
+    server {
+        listen 443 ssl http2;
+        server_name www.dk0.dev;
+
+        ssl_certificate /etc/nginx/ssl/cert.pem;
+        ssl_certificate_key /etc/nginx/ssl/key.pem;
+
+        return 301 https://dk0.dev$request_uri;
     }
 
     # HTTPS Server
     server {
         listen 443 ssl http2;
-        server_name dk0.dev www.dk0.dev;
+        server_name dk0.dev;
 
         # SSL Configuration
         ssl_certificate /etc/nginx/ssl/cert.pem;
diff --git a/package-lock.json b/package-lock.json
index e34722a..2c98ea8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,6 @@
         "@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",
@@ -32,7 +31,6 @@
         "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",
@@ -596,13 +594,6 @@
       "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",
@@ -5445,53 +5436,6 @@
         "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",
@@ -12070,6 +12014,7 @@
       "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"
@@ -12088,6 +12033,7 @@
       "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"
@@ -12681,15 +12627,6 @@
         "react": "^19.2.4"
       }
     },
-    "node_modules/react-icons": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
-      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "*"
-      }
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
diff --git a/package.json b/package.json
index b4c527d..1e77b7b 100644
--- a/package.json
+++ b/package.json
@@ -64,7 +64,6 @@
     "@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",
@@ -76,7 +75,6 @@
     "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",
diff --git a/scripts/empty-module.js b/scripts/empty-module.js
new file mode 100644
index 0000000..a099545
--- /dev/null
+++ b/scripts/empty-module.js
@@ -0,0 +1 @@
+module.exports = {};
\ No newline at end of file