Made components more re-usable. Added section component

src/lib/components/Cards/Card.svelte

@@ -1,28 +1,26 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    export let headerLeft: string = "";
-
+    export let headerRight: string = "";
-    const dispatch = createEventDispatcher();
+    export let headerColour: string = "text-red-500";
-
+    export let footer: string = "";
-    function onClick() {
-        dispatch('click');
-    }
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div class="{headerColour} flex flex-row justify-between items-center mb-4">
-<div
+        <p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
-    class="flex flex-col justify-between p-6 bg-secondary rounded-lg shadow-lg transition-all duration-200 hover:shadow-xl hover:scale-[1.02] snap-start"
+        
-    on:click={onClick}
+        {#if headerRight}
->
+            <p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
-    <div class="card-header flex items-center justify-between w-full mb-0">
+        {/if}
-        <slot name="header"></slot>
     </div>
-    <hr />
+    <hr class="mb-4 border-1" />
-    <div class="card-content flex items-center justify-center w-full max-w-full">
+    <div class="flex-1 flex flex-col justify-center p-5">
-        <slot name="content"></slot>
+        <slot />
-    </div>
-    <hr class="not-required" />
-    <div class="card-footer flex gap-4 w-full max-w-full justify-between mb-4">
-        <slot name="footer"></slot>
     </div>
+    {#if footer}
+        <hr class="my-4 border-1" />
+        <div class="mt-2 text-base opacity-90">
+            {@html footer}
+        </div>
+    {/if}
 </div>

src/lib/components/Section.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    export let label: string = "";
+</script>
+
+<div class="relative flex flex-row w-full min-h-[300px] mt-5 mb-5">
+    <!-- Sticky/Sliding Label -->
+    <div class="hidden md:flex flex-col items-center mr-6">
+        <div class="sticky top-24 left-0 z-10">
+            <span class="text-2xl font-bold text-blue-400 tracking-widest"
+                  style="writing-mode: vertical-rl; text-orientation: mixed;">
+                {label}
+            </span>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <div class="flex-1 flex flex-col">
+        <!-- Label for mobile -->
+        <div class="md:hidden mb-2">
+            <span class="text-2xl font-bold text-blue-400">{label}</span>
+        </div>
+        <hr class="border-blue-400 mb-6" />
+        <div>
+            <slot />
+        </div>
+    </div>
+</div>

src/lib/stores.ts

@@ -1,38 +1,7 @@
-import { ToastType, type Toast } from "$lib/toast";
+import { writable } from "svelte/store";
-import { writable, type Writable } from "svelte/store";
 import type { GitRepo } from "./types";
 import { fetchRepos } from "./api/git";
 
-
-////////////////////////////////////////
-// Toast Stores
-////////////////////////////////////////
-export const toasts: Writable<Toast[]> = writable([]);
-
-export const addToast = (toast: Toast) => {
-  // Create a unique ID so we can easily find/remove it
-  // if it is dismissible/has a timeout.
-  toast.id = Math.floor(Math.random() * 10000);
-
-  // Setup some sensible defaults for a toast.
-  const defaults = {
-    id: toast.id,
-    type: ToastType.Info,
-    dismissible: true,
-    timeout: 3000,
-  };
-
-  // Push the toast to the top of the list of toasts
-  toasts.update((all) => [{ ...defaults, ...toast }, ...all]);
-
-  // If toast is dismissible, dismiss it after "timeout" amount of time.
-  if (toast.timeout) setTimeout(() => dismissToast(toast.id), toast.timeout);
-};
-
-export const dismissToast = (id: number) => {
-  toasts.update((all) => all.filter((t) => t.id !== id));
-};
-
 ////////////////////////////////////////
 // Git Repo Stores
 ////////////////////////////////////////

src/lib/toast.ts

@@ -1,26 +0,0 @@
-/**
- * @enum Used to refer to the type of toast being displayed
- */
-export enum ToastType {
-    Info = "info",
-    Success = "success",
-    Error = "error"
-}
-
-/**
- * @class Toast Notification
- */
-export class Toast {
-    constructor(text: String, type: ToastType, dismissable: boolean, timeout: number ) {
-        this.text = text;
-        this.type = type;
-        this.dismissable = dismissable;
-        this.timeout = timeout;
-    }
-
-    id: number = 0;
-    text: String;
-    type: ToastType;
-    dismissable: Boolean;
-    timeout: number;
-}

src/lib/types.ts

@@ -3,7 +3,7 @@ export type TimelinePosition = 'right' | 'left' | 'alternate';
 export type ParentPosition = 'right' | 'left';
 
 export type TimelineConfig = {
-	rootPosition: TimelinePosition;
+    rootPosition: TimelinePosition;
 };
 
 export interface GitRepo {

src/main.svelte

@@ -3,6 +3,8 @@
     import { toasts } from 'svelte-toasts';
 
     import Loading from '$lib/components/Loading.svelte';
+    import Section from '$lib/components/Section.svelte';
+    import Card from '$lib/components/Cards/Card.svelte';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -18,23 +20,19 @@
         })}
     </div>
 
-    <div class="bg-slate-100/10 dark:bg-slate-100/10 p-10 m-5 rounded-2xl shadow-2xl">
+    <!-- Main Card -->
-        <div class="flex flex-row justify-between text-red-500 p-4">
+    <Section label="Experience">
-            <p class="text-3xl md:text-4xl font-bold">
+        <Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
-                {info.name}
+            <div class="flex flex-row items-center gap-5">
-            </p>
+                <img
-            <p class="max-md:hidden text-2xl md:text-3xl">{info.job_title}</p>
+                    src={info.profile_photo}
-        </div>
+                    alt="Avatar"
-        <hr class="max-md:hidden border-3 m-5" />
+                    class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
-        <div class="flex flex-row items-center gap-5 m-2">
+                />
-            <img
+                <p>{@html info.about}</p>
-                src={info.profile_photo}
+            </div>
-                alt="Avatar"
+        </Card>
-                class="max-md:hidden rounded-full w-64 h-64 mt-5 mb-5 p-3 border-5"
+    </Section>
-            />
-            <p>{@html info.about}</p>
-        </div>
-    </div>
 {:catch}
     <div style="display: none;">
         {toasts.add({

static/json/me.json

@@ -1,6 +1,7 @@
 {
   "name": "Luke Else",
   "job_title": "Software Engineer",
+  "location": "Crawley, Sussex <br /> UK",
   "profile_photo": "/profile.jpg",
   "skills": [
     {