CHORE: Updated Gallery to use grid. Made card component mode modular. Added colour to the skills section of the page.

src/routes/repos/+page.svelte

@@ -2,7 +2,7 @@
     import { loadRepos, repos } from '$lib/stores';    import { onMount } from 'svelte';
     import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
 
-    import FlexGallery from '$lib/components/FlexGallery.svelte';
+    import GridGallery from '$lib/components/GridGallery.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
 
     let repoImages: Record<string, string | null> = {};
@@ -22,25 +22,31 @@
     onMount(loadRepos);
 </script>
 
-<FlexGallery>
+<GridGallery>
     {#each $repos as repo}
         <Card
-            headerLeft={repo.name}
-            headerRight={repo.language}
-            footer={timeSince(repo.updated_at)}
             containerStyle="group relative flex-1 min-w-[250px] max-w-full md:min-w-[33%] opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300 overflow-hidden"
         >
-            <div class="relative z-0">
-                {repo.description}
+            <h2 slot="headerLeft">{repo.name}</h2>
+            <h2 slot="headerRight" class="text-sm text-gray-500">
+                {repo.language}
+            </h2>
+            <div slot="content">
+                <div class="relative z-0">
+                    {repo.description}
+                </div>
+                {#if repoImages[repo.name]}
+                    <!-- svelte-ignore a11y_img_redundant_alt -->
+                    <img
+                        src={repoImages[repo.name]}
+                        alt="repo image"
+                        class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
+                    />
+                {/if}
             </div>
-            {#if repoImages[repo.name]}
-                <!-- svelte-ignore a11y_img_redundant_alt -->
-                <img
-                    src={repoImages[repo.name]}
-                    alt="repo image"
-                    class="absolute left-0 bottom-0 h-full w-full object-cover rounded-2xl transition-transform duration-500 translate-y-full group-hover:translate-y-0 z-10 pointer-events-none"
-                />
-            {/if}
+            <h3 slot="footerLeft">
+                Last Updated: {timeSince(repo.updated_at)}
+            </h3>
         </Card>
     {/each}
-</FlexGallery>
+</GridGallery>