FEAT: Added in git repos page

src/routes/repos/+page.svelte

@@ -1,18 +1,50 @@
 <script lang="ts">
-    import { loadRepos } from '$lib/stores';
+    import { loadRepos, repos } from '$lib/stores';
     import { onMount } from 'svelte';
     import { toasts } from 'svelte-toasts';
+    import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
+
+    import FlexGallery from '$lib/components/FlexGallery.svelte';
+    import Card from '$lib/components/Cards/Card.svelte';
+
+    import { onDestroy } from 'svelte';
+
+    let repoImages: Record<string, string | null> = {};
+
+    // When repos load, check for images
+    $: if ($repos.length) {
+        (async () => {
+            for (const repo of $repos) {
+                if (repoImages[repo.name] === undefined) {
+                    const url = repo.html_url + IMAGE_URL_SUFFIX;
+                    repoImages[repo.name] = (await checkImage(repo)) ? url : null;
+                }
+            }
+        })();
+    }
 
     onMount(loadRepos);
 </script>
 
-<div style="display: none;">
-    {toasts.add({
-        title: 'Warning',
-        description: 'This page is under construction',
-        duration: 0,
-        type: 'warning',
-        placement: 'center-center',
-        showProgress: true
-    })}
-</div>
+<FlexGallery>
+    {#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}
+            </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}
+        </Card>
+    {/each}
+</FlexGallery>