feat: add loading skeleton state for projects page (#64)

- Add RepoSkeleton component for loading animations

- Implement UnoCSS animations for smooth loading transitions
- Add proper loading fallback UI with skeleton cards

components/repo/Skeleton.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="border rounded-lg p-4 animate-pulse">
+    <div class="h-6 w-2/3 bg-gray-200 rounded mb-2" />
+    <div class="h-4 w-4/5 bg-gray-200 rounded mb-4" />
+    <div class="flex items-center space-x-4">
+      <div class="h-4 w-16 bg-gray-200 rounded" />
+      <div class="h-4 w-16 bg-gray-200 rounded" />
+    </div>
+  </div>
+</template>

pages/projects.vue

@@ -18,21 +18,31 @@ useHead({
   ],
 })
 
-const { data } = useFetch('/api/repos')
+const { data, pending } = useFetch('/api/repos')
 </script>
 
 <template>
   <div ma max-w-65ch>
     <PageHeader title="Projects" description="List of projects that I am proud of." />
     <div mt-8 space-y-8>
-      <div v-for="(repos, key) in data" :key="key">
-        <h4 mb-2>
-          {{ key }}
-        </h4>
-        <div grid="~ cols-1 md:cols-2 gap-4">
-          <RepoCard v-for="repo in repos" :key="repo.id" :repo="repo" />
+      <template v-if="pending">
+        <div v-for="section in 2" :key="section">
+          <h4 mb-2 class="h-6 w-32 bg-gray-200 rounded animate-pulse" />
+          <div grid="~ cols-1 md:cols-2 gap-4">
+            <RepoSkeleton v-for="n in 4" :key="n" />
+          </div>
         </div>
-      </div>
+      </template>
+      <template v-else>
+        <div v-for="(repos, key) in data" :key="key">
+          <h4 mb-2>
+            {{ key }}
+          </h4>
+          <div grid="~ cols-1 md:cols-2 gap-4">
+            <RepoCard v-for="repo in repos" :key="repo.id" :repo="repo" />
+          </div>
+        </div>
+      </template>
     </div>
   </div>
 </template>