#5 Repos are now displayed on the webpage - Additional stlying required.

src/routes/repos/+page.svelte

@@ -1,20 +1,35 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { repos, loadRepos } from "$lib/stores";
+    import Card from "$lib/components/Cards/Card.svelte";
 
     onMount(loadRepos);
 </script>
 
 <h1>My Projects</h1>
 
-{#if $repos.length > 0}
-    <ul>
-        {#each $repos as repo}
-            <li>
-                <a href="{repo.html_url}" target="_blank">{repo.name}</a> - {repo.description}
-            </li>
-        {/each}
-    </ul>
-{:else}
-    <p>Loading repositories...</p>
-{/if}
+<div class="container">
+    {#if $repos.length > 0}
+        <div class="cards">
+            {#each $repos as repo}
+                <Card>
+                    <div slot="header">
+                        <h2>{repo.name}</h2>
+                        {repo.language}
+                    </div>
+                    <div slot="content">
+                        <p class="not-required">{@html repo.description}</p>
+                    </div>
+                    <div slot="footer">
+                        <!-- svelte-ignore a11y-invalid-attribute -->
+                        <a href="{repo.html_url}">{repo.name}</a>
+                        {repo.size}KiB
+                        {repo.updated_at}
+                    </div>
+                </Card>
+            {/each}
+        </div>
+    {:else}
+        <p>Loading repositories...</p>
+    {/if}
+</div>