feat: implement skeleton loading across all dynamic sections

Added a shimmering Skeleton component. Integrated loading states for Hero, About (Bento Grid), Reading Log, Projects Archive, and Library pages for a premium UX.

app/components/ReadBooks.tsx

@@ -5,6 +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";
 
 interface BookReview {
   id: string;
@@ -82,7 +83,21 @@ const ReadBooks = () => {
   }, [locale]);
 
   if (loading) {
-    return <div className="text-stone-400 text-sm animate-pulse">Lade Buch-Bewertungen...</div>;
+    return (
+      <div className="space-y-6">
+        {[1, 2].map((i) => (
+          <div key={i} className="flex flex-col sm:flex-row gap-4 items-start">
+            <Skeleton className="w-20 h-[7.5rem] sm:w-24 sm:h-32 rounded-lg shrink-0" />
+            <div className="flex-1 space-y-2 w-full">
+              <Skeleton className="h-5 w-1/2" />
+              <Skeleton className="h-4 w-1/3" />
+              <Skeleton className="h-3 w-1/4 pt-2" />
+              <Skeleton className="h-12 w-full pt-2" />
+            </div>
+          </div>
+        ))}
+      </div>
+    );
   }
 
   if (reviews.length === 0) {