#5 Styled cards, changed content in me.json

src/app.html

@@ -96,7 +96,6 @@
 			}
 
 			.container {
-				padding-top: 3em;
 				max-width: 90%;
 				margin: auto;
 			}

src/lib/api/git.ts

@@ -24,3 +24,26 @@ export async function fetchRepos(): Promise<GitRepo[]> {
         return [];
     }
 }
+
+export function timeSince(inputDate: Date | string): string {
+    const date = new Date(inputDate); // Ensure it's a Date object
+    if (isNaN(date.getTime())) {
+        throw new Error("Invalid date provided");
+    }
+
+    const now: Date = new Date();
+    const diffInMs: number = now.getTime() - date.getTime();
+    const diffInSeconds: number = Math.floor(diffInMs / 1000);
+    const diffInMinutes: number = Math.floor(diffInSeconds / 60);
+    const diffInHours: number = Math.floor(diffInMinutes / 60);
+    const diffInDays: number = Math.floor(diffInHours / 24);
+    const diffInMonths: number = Math.floor(diffInDays / 30); // Approximate
+    const diffInYears: number = Math.floor(diffInDays / 365); // Approximate
+
+    if (diffInDays === 0) return "Today";
+    if (diffInDays === 1) return "Yesterday";
+    if (diffInDays < 7) return `${diffInDays} days ago`;
+    if (diffInDays < 30) return `${Math.floor(diffInDays / 7)} week${diffInDays >= 14 ? 's' : ''} ago`;
+    if (diffInMonths < 12) return `${diffInMonths} month${diffInMonths > 1 ? 's' : ''} ago`;
+    return `${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
+}

src/lib/components/Cards/Card.svelte

@@ -20,7 +20,9 @@
         border-radius: .5em;
         scroll-snap-align: start;
 		transition: all 0.2s;
+        box-shadow: .25em .25em .5em var(--hover);
     }
+
     .card:hover {
         box-shadow: .5em .5em .5em var(--hover);
     }

src/main.svelte

@@ -14,6 +14,7 @@
         border-radius: 1em;
         padding: .2em 2em 2em 2em;
         box-shadow: .5em .5em .5em var(--glow);
+        margin-bottom: 4em;
     }
     
     .flex-container {

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
+                        {timeSince(repo.updated_at)}
-                        {repo.updated_at}
                     </div>
                 </Card>
             {/each}

static/json/me.json

@@ -44,7 +44,12 @@
     {
       "duration" : "September 2022 - Present",
       "title" : "Thales UK - Software Engineer",
-      "description" : "As a software engineering apprentice at Thales UK, I find myself partaking in agile / scrum development methodologies in a strong team of 6 other engineers. The team iterates on a pre-existing system designed for the MOD, written in C++, using internal frameworks to assist. <br /><br /> To extend this, the apprenticeship includes allocated time for studying a Digital and Thechnology Solutions degree with the University of Warwick, including modules relevant to business management, devlopment processes and data integrity etc..."
+      "description" : "As a software engineering apprentice at Thales UK, I find myself partaking in agile / scrum development methodologies in a strong team of 6 other engineers. The team iterates on a pre-existing system designed for the MOD, written in C++, using internal frameworks to assist."
+    },
+    {
+      "duration" : "September 2022 - Present",
+      "title" : "University of Warwick - Digital and Technology Solutions",
+      "description" : "The apprenticeship includes allocated time for studying a Digital and Thechnology Solutions degree with the University of Warwick, including modules relevant to business management, devlopment processes and data integrity etc..."
     },
     {
       "duration" : "September 2020 - July 2022",
@@ -54,7 +59,7 @@
     {
       "duration" : "September 2015 - July 2020",
       "title" : "The Norton Knatchbull School (GCSEs)",
-      "description" : "FSMQ (C) <br /> Maths (8) <br /> Geography (<b>9</b>) <br /> Biology (<b>9</b>) <br /> Chemistry (<b>9</b>) <br /> Physics (<b>9</b>) <br /> Spanish (7) <br /> English (Literature & Language) (7, 7) <br /> Computer Science (<b>9</b>)"
+      "description" : "Computer Science (<b>9</b>) <br /> Physics (<b>9</b>) <br /> Chemistry (<b>9</b>) <br /> Biology (<b>9</b>) <br /> Geography (<b>9</b>) <br /> FSMQ (C) <br /> Maths (8) <br /> Spanish (7) <br /> English (Literature & Language) (7, 7) <br />"
     }
   ]
 }