fix: SEO canonical URLs, LCP performance, remove unused dependencies

- Remove duplicate app/projects/ route (was causing 5xx and soft 404)
- Fix nginx: redirect www.dk0.dev → dk0.dev (non-www canonical)
- Fix not-found.tsx: locale-prefixed links, remove framer-motion dependency
- Add fetchPriority='high' and will-change to Hero LCP image
- Add preconnect hints for hardcover.app and cms.dk0.dev
- Reduce background blur from 100px to 80px (LCP rendering delay)
- Remove boneyard-js (~20 KiB), replace with custom Skeleton component
- Remove react-icons (~10 KiB), replace with inline SVGs
- Conditionally render mobile menu (saves ~20 DOM nodes)
- Add /books to sitemap
- Optimize image config with explicit deviceSizes/imageSizes

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>
   );
 };