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/About.tsx

@@ -11,6 +11,7 @@ import { TechStackCategory, Hobby, BookReview } from "@/lib/directus";
 import Link from "next/link";
 import ActivityFeed from "./ActivityFeed";
 import BentoChat from "./BentoChat";
+import { Skeleton } from "./ui/Skeleton";
 
 const iconMap: Record<string, any> = {
   Globe, Server, Code, Wrench, Shield, Activity, Lightbulb, Gamepad2
@@ -24,6 +25,7 @@ const About = () => {
   const [hobbies, setHobbies] = useState<Hobby[]>([]);
   const [reviewsCount, setReviewsCount] = useState(0);
   const [cmsMessages, setCmsMessages] = useState<Record<string, string>>({});
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -50,7 +52,11 @@ const About = () => {
 
         const booksData = await booksRes.json();
         if (booksData?.bookReviews) setReviewsCount(booksData.bookReviews.length);
-      } catch (error) {}
+      } catch (error) {
+        console.error("About data fetch failed:", error);
+      } finally {
+        setIsLoading(false);
+      }
     };
     fetchData();
   }, [locale]);
@@ -73,12 +79,22 @@ const About = () => {
                 {t("title")}<span className="text-liquid-mint">.</span>
               </h2>
               <div className="prose prose-stone dark:prose-invert max-w-none text-xl md:text-2xl font-light leading-relaxed text-stone-600 dark:text-stone-400">
-                {cmsDoc ? <RichTextClient doc={cmsDoc} /> : <p>{t("p1")} {t("p2")}</p>}
+                {isLoading ? (
+                  <div className="space-y-3">
+                    <Skeleton className="h-6 w-full" />
+                    <Skeleton className="h-6 w-[95%]" />
+                    <Skeleton className="h-6 w-[90%]" />
+                  </div>
+                ) : cmsDoc ? (
+                  <RichTextClient doc={cmsDoc} />
+                ) : (
+                  <p>{t("p1")} {t("p2")}</p>
+                )}
               </div>
               <div className="pt-8">
                 <div className="inline-block bg-stone-50 dark:bg-stone-800 px-8 py-4 rounded-3xl border border-stone-100 dark:border-stone-700">
                    <p className="text-[10px] font-black uppercase tracking-[0.2em] text-liquid-mint mb-2">{t("funFactTitle")}</p>
-                   <p className="text-base font-bold opacity-90">{t("funFactBody")}</p>
+                   {isLoading ? <Skeleton className="h-5 w-48" /> : <p className="text-base font-bold opacity-90">{t("funFactBody")}</p>}
                 </div>
               </div>
             </div>
@@ -170,7 +186,11 @@ const About = () => {
                     <Book className="text-liquid-purple" size={20} />
                   </div>
                   <div>
-                    <p className="text-xl font-black text-stone-900 dark:text-stone-100">{reviewsCount}+ Books</p>
+                    {isLoading ? (
+                      <Skeleton className="h-6 w-24 mb-1" />
+                    ) : (
+                      <p className="text-xl font-black text-stone-900 dark:text-stone-100">{reviewsCount}+ Books</p>
+                    )}
                     <p className="text-sm text-stone-500">Read and summarized in my personal collection.</p>
                   </div>
                 </div>
@@ -191,20 +211,32 @@ const About = () => {
               <Gamepad2 className="text-liquid-mint" size={32} /> Beyond Dev
             </h3>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
-              {hobbies.map((hobby) => {
-                const Icon = iconMap[hobby.icon] || Lightbulb;
-                return (
-                  <div key={hobby.id} className="flex items-start gap-4 p-6 bg-stone-50 dark:bg-stone-800/50 rounded-[2rem] border border-stone-100 dark:border-stone-700/50">
-                    <div className="w-10 h-10 rounded-xl bg-white dark:bg-stone-900 flex items-center justify-center shadow-sm shrink-0">
-                      <Icon size={20} className="text-liquid-mint" />
-                    </div>
-                    <div>
-                      <p className="font-bold text-stone-900 dark:text-stone-100 text-base">{hobby.title}</p>
-                      <p className="text-xs text-stone-500 line-clamp-2">Passion & Mindset</p>
+              {isLoading ? (
+                Array.from({ length: 4 }).map((_, i) => (
+                  <div key={i} className="flex items-start gap-4 p-6 bg-stone-50 dark:bg-stone-800/50 rounded-[2rem] border border-stone-100 dark:border-stone-700/50">
+                    <Skeleton className="w-10 h-10 rounded-xl shrink-0" />
+                    <div className="space-y-2 flex-1">
+                      <Skeleton className="h-4 w-24" />
+                      <Skeleton className="h-3 w-32" />
                     </div>
                   </div>
-                )
-              })}
+                ))
+              ) : (
+                hobbies.map((hobby) => {
+                  const Icon = iconMap[hobby.icon] || Lightbulb;
+                  return (
+                    <div key={hobby.id} className="flex items-start gap-4 p-6 bg-stone-50 dark:bg-stone-800/50 rounded-[2rem] border border-stone-100 dark:border-stone-700/50">
+                      <div className="w-10 h-10 rounded-xl bg-white dark:bg-stone-900 flex items-center justify-center shadow-sm shrink-0">
+                        <Icon size={20} className="text-liquid-mint" />
+                      </div>
+                      <div>
+                        <p className="font-bold text-stone-900 dark:text-stone-100 text-base">{hobby.title}</p>
+                        <p className="text-xs text-stone-500 line-clamp-2">Passion & Mindset</p>
+                      </div>
+                    </div>
+                  )
+                })
+              )}
             </div>
           </motion.div>