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>

static/themes/dark.css

@@ -1,18 +0,0 @@
-:root {
-    --bg: #282c34;
-    --bg-secondary: #3e434b;
-    --accent: #59616d;
-
-    --header: #E06C75;
-    --fg: #9eaac0;
-    
-    --input: #2b3136;
-    
-    --link: #98C379;
-    --glow: #C678DD;
-    --hover: #56B6C2;
-
-    --green: #98C379;
-    --red: #E06C75;
-    --blue: #79aec3;
-}

static/themes/light.css

@@ -1,18 +0,0 @@
-:root {
-    --bg: #f5f5f5; /* Slightly deeper light grey for subtle contrast */
-    --bg-secondary: #d9dddf; /* More defined soft grey */
-    --accent: #8ea29b; /* Stronger muted sage green */
-
-    --header: #4a5a56; /* Darker desaturated green-grey for better contrast */
-    --fg: #2f3739; /* Richer dark grey for improved readability */
-    
-    --input: #e4e7e8; /* Slightly deeper soft grey input background */
-    
-    --link: #5f8480; /* Darker muted teal for contrast */
-    --glow: #b0bdb9; /* More noticeable but soft glow */
-    --hover: #85a29c; /* Stronger pastel hover effect */
-
-    --green: #6fa984; /* More vibrant pastel green */
-    --red: #e8858f; /* Slightly deeper pastel red for contrast */
-    --blue: #6fa9a4; /* Same as accent */
-}