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/_ui/ProjectsPageClient.tsx

@@ -6,6 +6,7 @@ import { ArrowUpRight, ArrowLeft, Search } from "lucide-react";
 import Link from "next/link";
 import { useLocale, useTranslations } from "next-intl";
 import Image from "next/image";
+import { Skeleton } from "../components/ui/Skeleton";
 
 export type ProjectListItem = {
   id: number;
@@ -30,6 +31,13 @@ export default function ProjectsPageClient({
 
   const [selectedCategory, setSelectedCategory] = useState("all");
   const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Simulate initial load for smoother entrance or handle actual fetch if needed
+    const timer = setTimeout(() => setLoading(false), 800);
+    return () => clearTimeout(timer);
+  }, []);
 
   const categories = useMemo(() => {
     const unique = Array.from(new Set(projects.map((p) => p.category))).filter(Boolean);
@@ -103,7 +111,18 @@ export default function ProjectsPageClient({
 
         {/* Grid */}
         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
-          {filteredProjects.map((project) => (
+          {loading ? (
+            Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="bg-white dark:bg-stone-900 rounded-[3rem] p-10 border border-stone-200/60 dark:border-stone-800/60 shadow-sm flex flex-col h-full">
+                <Skeleton className="aspect-[16/10] rounded-[2rem] mb-8" />
+                <div className="space-y-3">
+                  <Skeleton className="h-8 w-1/2" />
+                  <Skeleton className="h-4 w-3/4" />
+                </div>
+              </div>
+            ))
+          ) : (
+            filteredProjects.map((project) => (
             <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">