#5 Styled cards, changed content in me.json

src/routes/repos/+page.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
     import { onMount } from "svelte";
-    import { repos, loadRepos } from "$lib/stores";
+    import { Toast, ToastType } from "$lib/toast";
+    import { repos, loadRepos, addToast } from "$lib/stores";
+    import { timeSince } from "$lib/api/git";
     import Card from "$lib/components/Cards/Card.svelte";
 
     onMount(loadRepos);
 </script>
 
 <h1>My Projects</h1>
+<p>This here is a list of my most recently worked on projects. Note this does not show any private repositories. For more in depth information <a href="https://git.luke-else.co.uk">Click Here</a>.</p>
 
 <div class="container">
     {#if $repos.length > 0}
+        <div style="display: none;">{addToast(new Toast("See a snapshot of my latest work.", ToastType.Info, true, 8_000))}</div>
         <div class="cards">
             {#each $repos as repo}
                 <Card>
@@ -23,8 +27,7 @@
                     <div slot="footer">
                         <!-- svelte-ignore a11y-invalid-attribute -->
                         <a href="{repo.html_url}">{repo.name}</a>
-                        {repo.size}KiB
-                        {repo.updated_at}
+                        {timeSince(repo.updated_at)}
                     </div>
                 </Card>
             {/each}