Merge pull request 'development' (#47 ) from development into main

Reviewed-on: #47
Merge pull request 'CHORE: Added additional skills and ehanced the way that links are displayed in raw html containers' (#46 ) from feature/recent-experience into development
2025-05-30 20:06:18 +00:00 · 2025-05-30 20:00:27 +00:00 · 2025-05-30 18:26:06 +01:00 · 2025-05-30 15:44:45 +00:00 · 2025-05-30 16:43:00 +01:00 · 2025-05-27 21:24:09 +00:00
59 changed files with 2136 additions and 3298 deletions
--- a/.gitea/workflows/dev.yaml
+++ b/.gitea/workflows/dev.yaml
@ -0,0 +1,30 @@
 name: Build and Push Development Docker Image
 on:
  push:
    branches: [ development ]
 jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4
      - name: Log in to Docker Hub
        uses: docker/login-action@v3
        with:
          registry: ${{ secrets.CONTAINER_REGISTRY }}
          username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
          password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      - name: Build and Tag Docker Image
        run: |
          docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev .
      - name: Push Docker Image
        run: |
          docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev
--- a/.gitea/workflows/docker.yaml
+++ b/.gitea/workflows/docker.yaml
@ -1,10 +1,8 @@
-name: Build and Push Docker Image
+name: Build and Push Latest Docker Image
 on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]
 jobs:
  build-and-push:
--- a/.prettierrc
+++ b/.prettierrc
@ -1,5 +1,6 @@
 {
-	"useTabs": true,
+	"useTabs": false,
 	"tabWidth": 4,
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
--- a/README.md
+++ b/README.md
@ -5,7 +5,7 @@ This site contains information relating to my personal situation, however, you a
 ## Screenshots
 <p align="center">
-  <img src="assets/images/main_page.png" width="40%">
+  <img src="assets/images/main.png" width="40%">
  <img src="assets/images/light_mode.png" width="40%">
 </p>
@ -25,17 +25,20 @@ Get starting but installing all of the dependencies of the project.
 ```bash
 npm install
 ```
 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 ```bash
 npm run dev
 ```
 ```bash
 # or start the server and open the app in a new browser tab
 npm run dev -- --open
 ```
 ## Building
@ -45,6 +48,7 @@ To create a production version of the app:
 ```bash
 npm run build
 ```
 You can preview the production build with `npm run preview`.
--- a/assets/images/contact.png
+++ b/assets/images/contact.png
--- a/assets/images/experience.png
+++ b/assets/images/experience.png
--- a/assets/images/light_mode.png
+++ b/assets/images/light_mode.png
--- a/assets/images/main.png
+++ b/assets/images/main.png
--- a/assets/images/main_page.png
+++ b/assets/images/main_page.png
--- a/assets/images/repos.png
+++ b/assets/images/repos.png
--- a/assets/images/skills.png
+++ b/assets/images/skills.png
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -14,16 +14,22 @@
 	},
 	"devDependencies": {
 		"@rollup/plugin-json": "^6.0.0",
-		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-auto": "6.0.0",
-		"@sveltejs/adapter-node": "^1.3.1",
+		"@sveltejs/adapter-node": "5.2.12",
-		"@sveltejs/kit": "^1.20.4",
+		"@sveltejs/kit": "2.20.8",
-		"prettier": "^2.8.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
-		"prettier-plugin-svelte": "^2.10.1",
+		"prettier": "3.5.3",
-		"svelte": "^4.0.5",
+		"prettier-plugin-svelte": "3.3.3",
-		"svelte-check": "^3.4.3",
+		"svelte": "5.28.2",
-		"tslib": "^2.4.1",
+		"svelte-check": "4.1.7",
-		"typescript": "^5.0.0",
+		"tslib": "2.8.1",
-		"vite": "^4.4.2"
+		"typescript": "5.8.3",
 		"vite": "6.3.5"
 	},
-	"type": "module"
+	"type": "module",
 	"dependencies": {
 		"@tailwindcss/vite": "^4.1.6",
 		"svelte-toasts": "^1.1.2",
 		"tailwindcss": "^4.1.6"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app.css
+++ b/src/app.css
@ -0,0 +1 @@
@import "tailwindcss"
--- a/src/app.html
+++ b/src/app.html
@ -1,142 +1,30 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
    <head>
        <meta charset="utf-8" />
-		<meta name="description" content="Luke Else - Software Developer at Thales UK. I specialise in developing distributed systems in C++ using highly scalable internal frameworks. I also develop backend and system applications in my spare time using both Svelte, Rust and C++. Feel free to check my work out at https://git.luke-else.co.uk." />
+        <meta
            name="description"
            content="Luke Else - Software Developer at Thales UK. I specialise in developing distributed systems in C++ using highly scalable internal frameworks. I also develop backend and system applications in my spare time using both Svelte, Rust and C++. Feel free to check my work out at https://git.luke-else.co.uk."
        />
        <meta name="author" content="Luke Else (mail@luke-else.co.uk)" />
        <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css">
+        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.15.1/devicon.min.css"
        />
        <meta name="viewport" content="width=device-width" />
-		<script async src="https://tracking.luke-else.co.uk/tracker.js" data-ackee-server="https://tracking.luke-else.co.uk" data-ackee-domain-id="6c59ab88-dc6d-4d53-9831-0d6bff919dcd" data-ackee-opts='{ "detailed": true }'></script>
+        <script
            async
            src="https://tracking.luke-else.co.uk/tracker.js"
            data-ackee-server="https://tracking.luke-else.co.uk"
            data-ackee-domain-id="6c59ab88-dc6d-4d53-9831-0d6bff919dcd"
            data-ackee-opts='{ "detailed": true }'
        ></script>
        %sveltekit.head%
-		<style>
+        <style></style>
 			:root {
 				--font: Consolas, 'Cascadia Code', Monaco, 'SF Mono', 'DejaVu Sans Mono', 'Roboto Mono';
 				background: var(--bg);
 				color: var(--fg);
 				font-family: var(--font);
 				font-size: 110%;
 				margin: 2rem;
 				transition: all 0.3s;
 			}
 			h1, h2, h3 {
 				color: var(--header);
 				border: 0;
 			}
 			hr {
 				border: .2em solid var(--bg-grad-3);
  				border-radius: 5em;
 				width: 100%;
 			}
 			*::-webkit-scrollbar,
 			*::-webkit-scrollbar-thumb {
 				width: 26px;
 				border-radius: 13px;
 				background-clip: padding-box;
 				border: 10px solid transparent;
 				color: var(--fg);
 			}
 			*::-webkit-scrollbar-thumb:hover{
 				color: var(--link);
 			}
 			*::-webkit-scrollbar-thumb {        
 			box-shadow: inset 0 0 0 10px;
 			}
 			@media (max-width:600px) {
 				.not-required {
 					display: none;
 				}
 			}
 			a {
 				text-decoration: none;				
 				position: relative;
 				color: var(--link);
 				white-space: nowrap;
 			}
 			a:after {
 				content: '';
 				position: absolute;
 				bottom: 0;
 				left: 0;
 				width: 0%;
 				border-bottom: 2px solid var(--fg);
 				transition: 0.4s;
 			}
 			a:hover:after {
 				width: 100%;
 				color: var(--glow);
 			}
 			a:hover {
 				color: var(--glow);
 			}
 			a:active {
 				color: var(--header);
 			}
 			.button {
 				color: var(--fg);
 				background-color: var(--bg-grad-1);
 				transition: all 0.2s;
 			}
 			.button:hover {
 				box-shadow: .3em .3em .3em var(--header);    
 			}
 			.container {
 				max-width: 90%;
 				margin: auto;
 			}
 			.cards {
 				display: flex;
 				flex-wrap: wrap;
 				flex-direction: row;
 				gap: 3em 3em;
 				padding: 2em 0em 2em 0em;
 				transition: all 0.2s;
 			}
 			@keyframes animationName {
 				0%   { opacity:0; }
 				50%  { opacity:1; }
 				100% { opacity:0; }
 			}
 				@-o-keyframes animationName{
 				0%   { opacity:0; }
 				50%  { opacity:1; }
 				100% { opacity:0; }
 			}
 				@-moz-keyframes animationName{
 				0%   { opacity:0; }
 				50%  { opacity:1; }
 				100% { opacity:0; }
 			}
 				@-webkit-keyframes animationName{
 				0%   { opacity:0; }
 				50%  { opacity:1; }
 				100% { opacity:0; }
 			}   
 			.elementToFadeInAndOut {
 				-webkit-animation: animationName 1.5s infinite;
 				-moz-animation: animationName 1.5s infinite;
 				-o-animation: animationName 1.5s infinite;
 				animation: animationName 1.5s infinite;
 			}
 		</style>
    </head>
    <body data-sveltekit-preload-data="hover">
        <div style="display: contents">%sveltekit.body%</div>
    </body>
--- a/src/lib/api/git.ts
+++ b/src/lib/api/git.ts
@ -1,6 +1,7 @@
 import type { GitRepo } from "../types";
 const API_BASE_URL = "https://git.luke-else.co.uk/api/v1";
 export const IMAGE_URL_SUFFIX = "/raw/branch/main/assets/images/main.png";
 export async function fetchRepos(): Promise<GitRepo[]> {
@ -47,3 +48,20 @@ export function timeSince(inputDate: Date | string): string {
    if (diffInMonths < 12) return `${diffInMonths} month${diffInMonths > 1 ? 's' : ''} ago`;
    return `${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
 }
 export async function checkImage(repo: GitRepo): Promise<boolean> {
    try {
        const URL = repo.html_url + IMAGE_URL_SUFFIX;
        console.log("Checking image:", URL);
        const response = await fetch(URL);
        if (response.ok) {
            console.log("Image found!");
            return true;
        } else {
            console.log("Image not found!");
            return false;
        }
    } catch (error) {
        return false;
    }
 }
--- a/src/lib/components/Cards/Card.svelte
+++ b/src/lib/components/Cards/Card.svelte
@ -1,68 +1,23 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
+    // Allows additional styling to be applied to the Card component's outer wrapping
-
+    export let containerStyle: string = "";
    const dispatch = createEventDispatcher();
    function onClick() {
        dispatch('click');
    }
 </script>
-<style>
+<div class={containerStyle}>
-    .card {
+    <div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
-        display: flex;
+        <div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
-        flex-direction: column;
+            <slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
-        justify-content: space-between;
+            <slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
        flex-wrap: wrap;
        flex: 2 1 15em;
        padding: .5em 2.5em 2em 2.5em;
        background: var(--bg-secondary);
        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);
    }
    .card .card-header :global(div) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0em;
        width: 100%;
    }
    .card .card-content :global(div) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 100%;
    }
    .card .card-footer :global(div){
        margin-bottom: 1em;
        display: flex;
        gap: 1em;
        max-width: 100%;
        justify-content: space-between;
    }
 </style>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="card" on:click={onClick}>
    <div class="card-header">
        <slot name="header"></slot>
        </div>
-    <hr />
+        <hr class="border-1" />
-    <div class="card-content">
+        <div class="flex-1 flex flex-col justify-center mt-4 mb-8">
-        <slot name="content"></slot>
+            <slot name="content"/>
        </div>
        <hr class="border-1" />
        <div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
            <slot name="footerLeft"/>
            <slot name="footerRight"/>
        </div>
    <hr class="not-required"/>
    <div class="card-footer">
        <slot name="footer"></slot>
    </div>
 </div>
--- a/src/lib/components/Cards/SlidingCard.svelte
+++ b/src/lib/components/Cards/SlidingCard.svelte
@ -1,102 +0,0 @@
 <script lang="ts">
    import { createEventDispatcher } from 'svelte';
    const dispatch = createEventDispatcher();
    function onClick() {
        dispatch('click');
    }
 </script>
 <style>
    .sliding-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex-wrap: wrap;
        flex: 2 1 15em;
        padding: 0.5em 2.5em 2em 2.5em;
        background: var(--bg-secondary);
        border-radius: 0.5em;
        scroll-snap-align: start;
        transition: all 0.3s ease-in-out;
        overflow: hidden;
        position: relative;
    }
    .sliding-card:hover {
        box-shadow: .5em .5em .5em var(--hover);
    }
    .sliding-card .sliding-card-header :global(div) {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0em;
    }
    .content-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden; /* Ensure smooth sliding */
    }
    .sliding-card-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        flex-grow: 1;
        z-index: 1; /* Keep it below the sliding content */
    }
    .sliding-content {
        position: absolute; /* Now it sits on top */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Cover entire content */
        background: var(--bg-secondary);
        transform: translateY(100%); /* Start hidden */
        transition: transform 0.3s ease-in-out;
        z-index: 2; /* Now above main content */
    }
    .sliding-card:hover .sliding-content {
        transform: translateY(0);
    }
    .sliding-card .sliding-card-footer :global(div){
        margin-bottom: 1em;
        display: flex;
        gap: 1em;
        max-width: 100%;
        justify-content: space-between;
    }
 </style>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div class="sliding-card" on:click={onClick}>
    <div class="sliding-card-header">
        <slot name="header"></slot>
    </div>
    <hr />
    <!-- Wrapper to stack sliding-card-content and sliding-content -->
    <div class="content-wrapper">
        <div class="sliding-card-content">
            <slot name="content"></slot>
        </div>
        <div class="sliding-content">
            <slot name="sliding-content"></slot>
        </div>
    </div>
    <hr class="not-required"/>
    <div class="sliding-card-footer">
        <slot name="footer"></slot>
    </div>
 </div>
--- a/src/lib/components/Collapsible.svelte
+++ b/src/lib/components/Collapsible.svelte
@ -0,0 +1,33 @@
 <script lang="ts">
    export let open = false;
 </script>
 <div class="w-full">
    <button
        type="button"
        class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
        on:click={() => open = !open}
        aria-expanded={open}
    >
        <span><slot name="label"/></span>
        <svg
            class="w-5 h-5 ml-2 transition-transform duration-200"
            style="transform: rotate({open ? 90 : 0}deg)"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            viewBox="0 0 24 24"
        >
            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
        </svg>
    </button>
    <div
        class="overflow-hidden transition-all duration-300"
        style="max-height: {open ? '1000px' : '0'}"
        aria-hidden={!open}
    >
        <div class="pt-2">
            <slot name="content"/>
        </div>
    </div>
 </div>
--- a/src/lib/components/GridGallery.svelte
+++ b/src/lib/components/GridGallery.svelte
@ -0,0 +1,7 @@
 <script lang="ts">
 </script>
 <!-- GridGallery.svelte -->
 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
    <slot />
 </div>
--- a/src/lib/components/Loading.svelte
+++ b/src/lib/components/Loading.svelte
@ -21,21 +21,21 @@
        left: 0%;
        top: 0%;
        animation: rotate-one 1s linear infinite;
-        border-bottom: 3px solid #efeffa;
+        border-bottom: 3px solid gray;
    }
    .inner.two {
        right: 0%;
        top: 0%;
        animation: rotate-two 1s linear infinite;
-        border-right: 3px solid #efeffa;
+        border-right: 3px solid gray;
    }
    .inner.three {
        right: 0%;
        bottom: 0%;
        animation: rotate-three 1s linear infinite;
-        border-top: 3px solid #efeffa;
+        border-top: 3px solid gray;
    }
    @keyframes rotate-one {
@ -67,7 +67,7 @@
 </style>
 <div class="loader">
-    <div class="inner one" />
+    <div class="inner one"></div>
-    <div class="inner two" />
+    <div class="inner two"></div>
-    <div class="inner three" />
+    <div class="inner three"></div>
 </div>
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@ -1,82 +0,0 @@
 <script lang="ts">
 	export let showModal: boolean;
 	let dialog: HTMLDialogElement;
 	$: if (dialog && showModal) dialog.showModal();
 	import CloseIcon from "./Toasts/CloseIcon.svelte";
 </script>
 <!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
 <dialog
 	bind:this={dialog}
 	on:close={() => (showModal = false)}
 	on:click|self={() => dialog.close()}
 >
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
 		<slot name="header" />
 		<hr />
 		<slot />
 		<hr />
 	</div>
 	<button class="close" on:click={() => dialog.close()}>
 		<CloseIcon width="0.8em" />
 	</button>
 </dialog>
 <style>
 	dialog {
 		max-width: 70%;
 		border-radius: 0.2em;
 		border: none;
 		padding: 0em 2em 2em 2em;
        border-left: 2em;
        border-right: 2em;
        background: var(--bg);
        color: var(--fg);
        box-shadow: .5em .5em .5em var(--header);
 	}
 	dialog::backdrop {
 		background: rgba(0, 0, 0, 0.7);
 	}
 	dialog > div {
 		padding: 1em;
 	}
 	dialog[open] {
 		animation: zoom 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
 	}
 	@keyframes zoom {
 		from {
 			transform: scale(0.95);
 		}
 		to {
 			transform: scale(1);
 		}
 	}
 	dialog[open]::backdrop {
 		animation: fade 0.3s ease-out;
 	}
 	@keyframes fade {
 		from {
 			opacity: 0;
 		}
 		to {
 			opacity: 1;
 		}
 	}
 	.close {
 		position: absolute;
 		top: 1em;
 		right: 1.5em;
 		color: var(--fg);
 		background: transparent;
 		border: 0 none;
 		padding: 0;
 		margin: 0 0 0 auto;
 		line-height: 1;
 		font-size: 1.2em;
 	}
 </style>
--- a/src/lib/components/Section.svelte
+++ b/src/lib/components/Section.svelte
@ -0,0 +1,26 @@
 <script lang="ts">
    export let label: string = "";
 </script>
 <div id={label} class="relative flex flex-row w-full min-h-[300px] mt-5 mb-25">
    <!-- 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>
--- a/src/lib/components/SkillProgress.svelte
+++ b/src/lib/components/SkillProgress.svelte
@ -0,0 +1,17 @@
 <script lang="ts">
    export let value: number = 0; // 0 to 100
    export let skillColour: string = 'bg-orange-400'; // Default color
 </script>
 <div class="w-full mt-3">
    <div class="flex justify-between mb-1">
        <span class="text-sm font-medium">Competency Level</span>
        <span class="text-sm font-medium">{value}%</span>
    </div>
    <div class="w-full bg-gray-800 rounded-full h-5">
        <div
            class="{skillColour} h-5 rounded-full transition-all duration-500"
            style="width: {value}%"
        ></div>
    </div>
 </div>
--- a/src/lib/components/ThemeSwitcher.svelte
+++ b/src/lib/components/ThemeSwitcher.svelte
@ -1,102 +0,0 @@
 <script lang="ts">
    import { browser } from '$app/environment';
    export let darkMode: boolean = true;
    function onThemeSwitch() {
        darkMode = !darkMode;
        localStorage.setItem('theme', darkMode ? 'dark' : 'light');
        darkMode
            ? document.documentElement.classList.add('dark')
            : document.documentElement.classList.remove('dark');
    }
    if (browser) {
        if (
            localStorage.theme === 'dark' ||
            (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
        ) {
            document.documentElement.classList.add('dark');
            darkMode = true;
        } else {
            document.documentElement.classList.remove('dark');
            darkMode = false;
        }
    }
 </script>
 <style>
    input {
        display: none;
    }
    .switch {
        position: absolute;
        top: 0em;
        right: 0em;
        display: inline-block;
        width: 3.75em;
        height: 2.125em;
    }
    .slider {
        position: absolute;
        cursor: pointer;
        background-color: var(--bg-grad-4);
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
    }
    .slider:before {
        position: absolute;
        content: "";
        height: 80%;
        width: 45%;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }
    input:checked + .slider {
        background-color: var(--bg-grad-1);
    }
    input:checked + .slider:before {
        background: var(--bg);
    }
    input:checked + .slider:before {
        -webkit-transform: translateX(1.625em);
        -ms-transform: translateX(1.625em);
        transform: translateX(1.625em);
    }
    .slider.round {
        border-radius: 2.125em;
    }
    .slider.round:before {
        border-radius: 50%;
    }
 </style>
 <svelte:head>
    <link rel="stylesheet" href={`/themes/${darkMode ? 'dark' : 'light'}.css`} />
 </svelte:head>
 <div class="toggle-wrapper not-required">
    <label class="switch">
        <input type="checkbox" checked={darkMode} on:click={onThemeSwitch}>
        <span class="slider round"></span>
    </label>
 </div>
--- a/src/lib/components/Timeline.svelte
+++ b/src/lib/components/Timeline.svelte
@ -0,0 +1,29 @@
 <script lang="ts">
    import Collapsible from "./Collapsible.svelte";
    export let timelineData: Array<{
        title: string;
        description: string;
        duration: string;
    }>;
 </script>
 <div class="flex flex-col items-center justify-center">
  <div class="max-w-4xl w-full">
    {#each timelineData as entry, i}
      <div class="relative border-l border-gray-700 pl-8 pb-12">
        {#if i == 0}
          <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diams;</div>
        {:else}
          <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diam;</div>
        {/if}
        <p class="text-sm opacity-70">{entry.duration}</p>
        <Collapsible open={i==0}>
          <span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
          <span slot="content">{@html entry.description}</span>
        </Collapsible>
      </div>
    {/each}
  </div>
 </div>
--- a/src/lib/components/Toasts/CloseIcon.svelte
+++ b/src/lib/components/Toasts/CloseIcon.svelte
@ -1,18 +0,0 @@
 <script>
 	export let width = "1em"
 </script>
 <svg
  width={width}
 	style="text-align: center; display: inline-block;"
  aria-hidden="true"
  focusable="false"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 352 512"
 >
  <path
    fill="currentColor"
    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
  />
 </svg>
--- a/src/lib/components/Toasts/ErrorIcon.svelte
+++ b/src/lib/components/Toasts/ErrorIcon.svelte
@ -1,19 +0,0 @@
 <script>
 	export let width = "1em"
 </script>
 <svg
  width={width}
 	style="text-align: center; display: inline-block;"
  aria-hidden="true"
  focusable="false"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512"
 >
  <path
    fill="currentColor"
    d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-11.49 120h22.979c6.823 0 12.274 5.682 11.99 12.5l-7 168c-.268 6.428-5.556 11.5-11.99 11.5h-8.979c-6.433 0-11.722-5.073-11.99-11.5l-7-168c-.283-6.818 5.167-12.5 11.99-12.5zM256 340c-15.464 0-28 12.536-28 28s12.536 28 28 28 28-12.536 28-28-12.536-28-28-28z"
    class=""
  ></path>
 </svg>
--- a/src/lib/components/Toasts/InfoIcon.svelte
+++ b/src/lib/components/Toasts/InfoIcon.svelte
@ -1,18 +0,0 @@
 <script>
 	export let width = "1em"
 </script>
 <svg
  width={width}
 	style="text-align: center; display: inline-block;"
  aria-hidden="true"
  focusable="false"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512"
 >
  <path
    fill="currentColor"
    d="M256 40c118.621 0 216 96.075 216 216 0 119.291-96.61 216-216 216-119.244 0-216-96.562-216-216 0-119.203 96.602-216 216-216m0-32C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm-36 344h12V232h-12c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12h48c6.627 0 12 5.373 12 12v140h12c6.627 0 12 5.373 12 12v8c0 6.627-5.373 12-12 12h-72c-6.627 0-12-5.373-12-12v-8c0-6.627 5.373-12 12-12zm36-240c-17.673 0-32 14.327-32 32s14.327 32 32 32 32-14.327 32-32-14.327-32-32-32z"
  />
 </svg>
--- a/src/lib/components/Toasts/SuccessIcon.svelte
+++ b/src/lib/components/Toasts/SuccessIcon.svelte
@ -1,18 +0,0 @@
 <script>
 	export let width = "1em"
 </script>
 <svg
  width={width}
 	style="text-align: center; display: inline-block;"
  aria-hidden="true"
  focusable="false"
  role="img"
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 512 512"
 >
  <path
    fill="currentColor"
    d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z"
  />
 </svg>
--- a/src/lib/components/Toasts/Toast.svelte
+++ b/src/lib/components/Toasts/Toast.svelte
@ -1,67 +0,0 @@
 <script lang="ts">
  import { createEventDispatcher } from "svelte";
  import { fade } from "svelte/transition";
  import { Toast, ToastType } from "$lib/toast";
  import SuccessIcon from "./SuccessIcon.svelte";
  import ErrorIcon from "./ErrorIcon.svelte";
  import InfoIcon from "./InfoIcon.svelte";
  import CloseIcon from "./CloseIcon.svelte";
  const dispatch = createEventDispatcher();
  export let toastData: Toast;
 </script>
 <article class={toastData.type.toString().toLowerCase()} role="alert" transition:fade>
  {#if toastData.type === ToastType.Success}
    <SuccessIcon width="1.1em" />
  {:else if toastData.type === ToastType.Error}
    <ErrorIcon width="1.1em" />
  {:else}
    <InfoIcon width="1.1em" />
  {/if}
  <div class="text">
    {toastData.text}
  </div>
  {#if toastData.dismissable}
    <button class="close" on:click={() => dispatch("dismiss")}>
      <CloseIcon width="0.8em" />
    </button>
  {/if}
 </article>
 <style lang="postcss">
  article {
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.2rem;
    display: flex;
    align-items: center;
    margin: 0 auto 0.5rem auto;
    width: 20rem;
    max-width: 80%;
  }
  .error {
    background: IndianRed;
  }
  .success {
    background: MediumSeaGreen;
  }
  .info {
    background: SkyBlue;
  }
  .text {
    margin-left: 1rem;
  }
  .close {
    color: white;
    background: transparent;
    border: 0 none;
    padding: 0;
    margin: 0 0 0 auto;
    line-height: 1;
    font-size: 1rem;
  }
 </style>
--- a/src/lib/components/Toasts/Toasts.svelte
+++ b/src/lib/components/Toasts/Toasts.svelte
@ -1,28 +0,0 @@
 <script lang="ts">
  import Toast from "./Toast.svelte";
  import { dismissToast, toasts } from "$lib/stores";
 </script>
 {#if $toasts}
  <section>
    {#each $toasts as toast (toast.id)}
      <Toast toastData = {toast} on:dismiss={() => dismissToast(toast.id)} />
    {/each}
  </section>
 {/if}
 <style lang="postcss">
  section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    display: flex;
    margin-top: 1rem;
    justify-content: center;
    flex-direction: column;
    z-index: 10;
  }
 </style>
--- a/src/lib/components/timeline/Timeline.svelte
+++ b/src/lib/components/timeline/Timeline.svelte
@ -1,21 +0,0 @@
 <script lang="ts">
 	import { setContext } from 'svelte';
 	import type { TimelinePosition, TimelineConfig } from '../types';
 	export let position: TimelinePosition = 'right';
 	export let style: string = null;
 	setContext<TimelineConfig>('TimelineConfig', { rootPosition: position });
 </script>
 <ul class="timeline" {style}>
 	<slot />
 </ul>
 <style>
 	.timeline {
 		display: flex;
 		flex-direction: column;
 		padding: 6px 16px;
 		flex-grow: 1;
 	}
 </style>
--- a/src/lib/components/timeline/TimelineConnector.svelte
+++ b/src/lib/components/timeline/TimelineConnector.svelte
@ -1,13 +0,0 @@
 <script lang="ts">
 	export let style: string = null;
 </script>
 <span class="timeline-connector" {style} />
 <style>
 	.timeline-connector {
 		width: 2px;
 		background-color: #bdbdbd;
 		flex-grow: 1;
 	}
 </style>
--- a/src/lib/components/timeline/TimelineContent.svelte
+++ b/src/lib/components/timeline/TimelineContent.svelte
@ -1,30 +0,0 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import type { TimelineConfig, TimelinePosition } from '../types';
 	export let style: string = null;
 	const config = getContext<TimelineConfig>('TimelineConfig');
 	const parentPosition = getContext<TimelinePosition>('ParentPosition');
 	const itemPosition = parentPosition ? parentPosition : config.rootPosition;
 </script>
 <div class={`timeline-content ${itemPosition}`} {style}>
 	<slot />
 </div>
 <style>
 	.timeline-content {
 		margin: 0;
 		flex: 1;
 		margin: 6px 16px;
 	}
 	.left {
 		text-align: right;
 	}
 	.right {
 		text-align: left;
 	}
 </style>
--- a/src/lib/components/timeline/TimelineDot.svelte
+++ b/src/lib/components/timeline/TimelineDot.svelte
@ -1,19 +0,0 @@
 <script lang="ts">
 	export let style: string = null;
 </script>
 <span class="timeline-dot" {style}>
 	<slot />
 </span>
 <style>
 	.timeline-dot {
 		background-color: #121212;
 		border: solid 2px #121212;
 		display: flex;
 		align-self: baseline;
 		padding: 4px;
 		border-radius: 50%;
 		margin: 11.5px 0;
 	}
 </style>
--- a/src/lib/components/timeline/TimelineItem.svelte
+++ b/src/lib/components/timeline/TimelineItem.svelte
@ -1,58 +0,0 @@
 <script lang="ts">
 	import { getContext, setContext } from 'svelte';
 	import type { TimelinePosition, ParentPosition, TimelineConfig } from '../types';
 	export let position: ParentPosition | null = null;
 	export let style: string = null;
 	const config = getContext<TimelineConfig>('TimelineConfig');
 	const itemPosition = position ? position : config.rootPosition;
 	setContext<TimelinePosition>('ParentPosition', itemPosition);
 </script>
 <li class={`timeline-item ${itemPosition}`} {style}>
 	{#if !$$slots['opposite-content']}
 		<div class="opposite-block" />
 	{:else}
 		<slot name="opposite-content" />
 	{/if}
 	<slot />
 </li>
 <style>
 	:global(.alternate:nth-of-type(even) > .timeline-content) {
 		text-align: right;
 	}
 	:global(.alternate:nth-of-type(odd) > .timeline-opposite-content) {
 		text-align: right;
 	}
 	.opposite-block {
 		flex: 1;
 		margin: 6px 16px;
 	}
 	.timeline-item {
 		list-style: none;
 		display: flex;
 		position: relative;
 		min-height: 70px;
 	}
 	.left {
 		flex-direction: row-reverse;
 	}
 	.right {
 		flex-direction: row;
 	}
 	.alternate:nth-of-type(even) {
 		flex-direction: row-reverse;
 	}
 	.alternate:nth-of-type(odd) {
 		flex-direction: row;
 	}
 </style>
--- a/src/lib/components/timeline/TimelineOppositeContent.svelte
+++ b/src/lib/components/timeline/TimelineOppositeContent.svelte
@ -1,31 +0,0 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 	import type { TimelineConfig, TimelinePosition } from '../types';
 	export let style: string = null;
 	const config = getContext<TimelineConfig>('TimelineConfig');
 	const parentPosition = getContext<TimelinePosition>('ParentPosition');
 	const itemPosition = parentPosition ? parentPosition : config.rootPosition;
 </script>
 <div class={`timeline-opposite-content ${itemPosition}`} {style}>
 	<slot />
 </div>
 <style>
 	.timeline-opposite-content {
 		margin: 0;
 		flex: 1;
 		margin-right: auto;
 		margin: 6px 16px;
 	}
 	.left {
 		text-align: left;
 	}
 	.right {
 		text-align: right;
 	}
 </style>
--- a/src/lib/components/timeline/TimelineSeparator.svelte
+++ b/src/lib/components/timeline/TimelineSeparator.svelte
@ -1,16 +0,0 @@
 <script lang="ts">
 	export let style: string = null;
 </script>
 <div class="timeline-separator" {style}>
 	<slot />
 </div>
 <style>
 	.timeline-separator {
 		display: flex;
 		flex-direction: column;
 		flex: 0;
 		align-items: center;
 	}
 </style>
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@ -1,41 +1,9 @@
 // place files you want to import through the `$lib` alias in this folder.
 import Timeline from '$lib/components/timeline/Timeline.svelte';
 import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
 import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
 import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
 import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
 import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
 import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
 import Toasts from '$lib/components/Toasts/Toasts.svelte';
 import Toast from '$lib/components/Toasts/Toast.svelte';
 import CloseIcon from '$lib/components/Toasts/CloseIcon.svelte';
 import InfoIcon from '$lib/components/Toasts/InfoIcon.svelte';
 import SuccessIcon from '$lib/components/Toasts/SuccessIcon.svelte';
 import ErrorIcon from '$lib/components/Toasts/ErrorIcon.svelte';
 import Card from '$lib/components/Cards/Card.svelte';
-import SlidingCard from '$lib/components/Cards/SlidingCard.svelte';
+import GridGallery from './components/GridGallery.svelte';
-import Modal from '$lib/components/Modal.svelte';
+import Loading from './components/Loading.svelte';
 import Section from './components/Section.svelte';
 import SkillProgress from './components/SkillProgress.svelte';
 import Timeline from './components/Timeline.svelte';
-
+export { Card, GridGallery, Loading, Section, SkillProgress, Timeline };
 export {
 	Timeline,
 	TimelineItem,
 	TimelineSeparator,
 	TimelineDot,
 	TimelineConnector,
 	TimelineContent,
 	TimelineOppositeContent,
    Toasts,
    Toast,
    CloseIcon,
    InfoIcon,
    SuccessIcon,
    ErrorIcon,
    Card,
    SlidingCard,
    Modal
 };
--- a/src/lib/stores.ts
+++ b/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
 ////////////////////////////////////////
--- a/src/lib/toast.ts
+++ b/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;
 }
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
@ -1,9 +0,0 @@
 type TimelinePosition = 'right' | 'left' | 'alternate';
 type ParentPosition = 'right' | 'left';
 type TimelineConfig = {
 	rootPosition: TimelinePosition;
 };
 export { TimelinePosition, ParentPosition, TimelineConfig };
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@ -1,3 +1,11 @@
 export type TimelinePosition = 'right' | 'left' | 'alternate';
 export type ParentPosition = 'right' | 'left';
 export type TimelineConfig = {
    rootPosition: TimelinePosition;
 };
 export interface GitRepo {
    name: string;
    description: string;
--- a/src/main.svelte
+++ b/src/main.svelte
@ -1,107 +1,77 @@
 <script lang="ts">
-    import { getJson } from "$lib/data";
+    import { getJson } from '$lib/data';
-	import { Toast, ToastType } from "$lib/toast";
+    import { toasts } from 'svelte-toasts';
    import { addToast } from "$lib/stores";
-    import Skills from './skills.svelte';
+    import Loading from '$lib/components/Loading.svelte';
-
+    import Section from '$lib/components/Section.svelte';
-    import Timeline from "./timeline.svelte";
+    import Card from '$lib/components/Cards/Card.svelte';
-	import Loading from "$lib/components/Loading.svelte";
+    import GridGallery from "$lib/components/GridGallery.svelte";
    import SkillProgress from "$lib/components/SkillProgress.svelte";
    import Timeline from '$lib/components/Timeline.svelte';
    import Collapsible from '$lib/components/Collapsible.svelte';
 </script>
 <style>
    .main-card {
        background-color: var(--bg-secondary);
        border-radius: 1em;
        padding: .2em 2em 2em 2em;
        box-shadow: .5em .5em .5em var(--glow);
        margin-bottom: 4em;
    }
    .flex-container {
        display: flex;
        align-items: center;
    }
    .profile {
        border-radius: 100%;
        height: 8em;
        width: 8em;
        padding: 1em 1em 1em 1em;
        border: .5em solid var(--bg-grad-3);
    }
    .about {
        padding: 0em 5% 0em 5%;
        font-size: 125%;
    }
    @media (max-width: 800px) {
        .flex-container {
            align-items: center;
            flex-direction: column;
            padding: 0px;
        }
        .about {
            font-size: 100%;
        }
    }
    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0em;
    }
    .card-header h1 {
        font-size: 2em;
    }
    .card-header h3 {
        font-size: 1.5em;
    }
 </style>
 {#await getJson('/json/me.json')}
    <Loading />
 {:then info}
-    <div class="main-card">
+    <div style="display: none;">
-        <div class="card-header">
+        {toasts.add({
-            <h1>{info.name}</h1>
+            title: 'Welcome',
-            <h3 class="not-required">{info.job_title}</h3>
+            duration: 5000,
-        </div>
+            type: 'success',
-        <hr />
+            placement: 'bottom-center',
-        <div class="flex-container">
+            showProgress: true
-            <img class="profile not-required" src={info.profile_photo} alt="{info.name}'s Profile Photo">
+        })}
            <p class="about">{@html info.about}</p>
        </div>
    </div>
-    <div class="container">
+    <!-- Main Card -->
-        <h1>Skills</h1>
+    <Section label="[About]">
-        <hr />
+        <Card>
-        <div class="cards">
+            <h2 slot="headerLeft">{info.name}</h2>
-            <Skills skills="{info.skills}"></Skills>
+            <h2 slot="headerRight">{info.job_title}</h2>
-        </div>
+            <div slot="content" class="flex flex-row items-center gap-5">
                <img
                    src={info.profile_photo}
                    alt="Avatar"
                    class="max-md:hidden rounded-full w-32 h-32 md:w-48 md:h-48 mt-2 mb-2 p-2 border-3"
                />
                <p class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600">{@html info.about}</p>
            </div>
            <h3 slot="footerLeft">{@html info.location}</h3>
        </Card>
    </Section>
-    <div class="container">
+    <!-- SKills -->
-        <h1>Experience</h1>
+    <Section label="[Skills]">
-        <hr />
+        <GridGallery>
-        <!-- https://github.com/K-Sato1995/svelte-vertical-timeline -->
+            {#each info.skills as skill}
-        <Timeline timelineData="{info.timeline}"></Timeline>
+                <Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
                    <h2 slot="headerLeft">{skill.name}</h2>
                    <i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
                    <div slot="content">
                        <Collapsible>
                            <span slot="label" class="text-lg">About {skill.name}</span>
                            <span slot="content">{skill.about}</span>
                        </Collapsible>
                        <SkillProgress skillColour={skill.colour} value={skill.competency} />
                    </div>
                    <h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
                </Card>
            {/each}
        </GridGallery>
    </Section>
-    <div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 8_000))}</div>
+    <Section label="[Experience]">
-    <div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 7_000))}</div>
+        <Timeline timelineData={info.timeline} />
    </Section>
 {:catch}
-    <div class="card">
+    <div style="display: none;">
-        <div class="card-header">
+        {toasts.add({
-            <h1>Unable to load portfolio overview data</h1>
+            title: 'Error',
            description: 'There was an error loading static site data',
            duration: 0,
            placement: 'bottom-center',
            showProgress: true
        })}
    </div>
    </div>
    <div style="display: none;">{addToast(new Toast("Unable to load me.json", ToastType.Error, true, 3000))}</div>
 {/await}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,60 +1,23 @@
 <script lang="ts">
-	import Toasts from "$lib/components/Toasts/Toasts.svelte";
+    import { ToastContainer, FlatToast } from 'svelte-toasts';
-    import ThemeSwitcher from "$lib/components/ThemeSwitcher.svelte";
+    import '../app.css';
 </script>
-<style>
+<div
-    .main-container {
+    class="min-h-screen px-8 py-4 bg-white text-slate-600 dark:bg-slate-900/90 dark:text-slate-200/60 md:text-2xl sm:text-md font-mono flex flex-col gap-5 transition duration-1000 ease-in-out"
-        margin-left: 10%;
+>
-        margin-right: 10%;
+    <nav
-        padding-top: 2em;
+        class="w-full px-8 py-4 flex gap-10 text-xl justify-center items-center text-green-600 font-semibold"
-    }
+    >
        <a href="/" class="hover:underline">//Profile</a>
        <a href="/repos" class="hover:underline">//Repos</a>
        <a href="/contact" class="hover:underline">//Contact</a>
    </nav>
-    @media (max-width: 800px) {
+    <div class="container mx-auto justify-center items-center flex flex-col">
        .main-container {
            margin: 0em;
            padding-top: 1em;
        }
    }
    nav {
        position: relative;
        font-weight: bold;
        font-size: 110%;
        overflow: visible;
        display: flex;
        justify-content: center;
        gap: 1.5em;
        padding: 0em 0em 1.5em 0em;
        z-index: 2;
        height: 1.5em;
        border-radius: 4px;
    }
    .fade {
        -webkit-animation: fadeinout 1s linear forwards;
        animation: fadeinout 1s linear forwards;
    }
    @-webkit-keyframes fadeinout {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    @keyframes fadeinout {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
 </style>
 <nav>
    <a href = "/">//Profile</a>
    <a href = "/repos">//Repos</a>
    <a href = "/contact">//Contact</a>
    <ThemeSwitcher />
 </nav>
 <div class="main-container fade">
    <Toasts />
        <slot />
        <ToastContainer let:data>
            <FlatToast {data} />
        </ToastContainer>
    </div>
 </div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -2,4 +2,6 @@
    import Main from '../main.svelte';
 </script>
-<Main></Main>
+<div>
    <Main></Main>
 </div>
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@ -1,79 +1,98 @@
 <script lang="ts">
    import { toasts } from 'svelte-toasts';
    import Card from '$lib/components/Cards/Card.svelte';
    import { Toast, ToastType } from "$lib/toast";
    import { addToast } from "$lib/stores";
-    import { page } from '$app/stores';
+    import { page } from '$app/state';
-    const sent = $page.url.searchParams.get('sent');
+    const sent = page.url.searchParams.get('sent');
-    if (sent == "true") {
+    if (sent == 'true') {
-        addToast(new Toast("Thank you! Your E-Mail has been sent. I will reply as soon as possible!", ToastType.Success, true, 5000));
+        toasts.add({
            title: 'Message sent!',
            description: 'Thank you for contacting me.',
            type: 'success',
            duration: 4000,
            placement: 'bottom-center'
        });
    }
-    // Can't use else otherwise the warning will display on load
+
-    if (sent == "false") {
+    if (sent == 'false') {
-        addToast(new Toast("Sorry, your E-Mail could not be sent... Please try again later!", ToastType.Error, true, 5000));
+        toasts.add({
            title: 'Message not sent!',
            description: 'Please try again later.',
            type: 'error',
            duration: 4000,
            placement: 'bottom-center'
        });
    }
 </script>
 <style>
    form {
        display: flex;
        flex-wrap: wrap;
        flex: 2 1;
        align-items: center;
        margin: 1em;
        gap: 1em 3em;
    }
    input, textarea {
        padding: 1em 0em 1em 1em;
        background-color: var(--input);
        color: var(--fg);
        border: 1px solid var(--fg); 
        outline: 0;
        border-radius: 8px;
        resize: none;
        min-width: 100%;
        transition: all 0.15s;
        font-size: .8em;
    }
    textarea {
        min-height: 12em;
    }
    .container {
        display: flex;
        flex: 2 1 5rem;
        flex-direction: column;
        gap: 1em 1em;
        width: 100%;
    }
 </style>
 <Card>
-    <div slot="header">
+    <div slot="headerLeft">
-        <h2>Contact</h2>
+        Contact Me
    </div>
-    <div slot="content">
+    <!-- Contact Form -->
-        <form action="https://api.staticforms.xyz/submit" method="post">
+     <form slot="content" class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
-            <div class="container">
+        <div class="hidden">
            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
                <input type="text" name="name" placeholder="Name" required>
                <input type="text" name="email" placeholder="Email address" required>
            <input type="hidden" name="replyTo" value="@">
                <input type="text" name="subject" placeholder="Subject" required>
            <input type="text" name="honeypot" style="display: none;">
            </div>
            <div class="container">
                <textarea name="message" id="message" placeholder="Message" required></textarea>
            </div>
            <input class="button" type="submit" value="Send" />
            <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
        </div>
        <div class="flex flex-col md:flex-row gap-3">
            <div class="flex-1">
                <label class="block text-xs font-medium mb-1" for="name">Name</label>
                <input
                    id="name"
                    name="name"
                    type="text"
                    class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
                    required
                    placeholder="Your name"
                />
            </div>
            <div class="flex-1">
                <label class="block text-xs font-medium mb-1" for="email">Email</label>
                <input
                    id="email"
                    name="email"
                    type="email"
                    class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
                    required
                    placeholder="you@email.com"
                />
            </div>
            <div class="flex-1">
                <label class="block text-xs font-medium mb-1" for="subject">Subject</label>
                <input
                    id="subject"
                    name="subject"
                    type="text"
                    class="w-full rounded-lg border border-gray-400 px-3 py-1.5 focus:outline-none focus:ring-2 focus:ring-blue-600 transition placeholder-gray-400"
                    required
                    placeholder="Subject"
                />
            </div>
        </div>
        <div>
            <label class="block text-xs font-medium mb-1" for="message">Message</label>
            <textarea
                id="message"
                name="message"
                class="w-full rounded-lg border border-gray-400 px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-600 transition min-h-[80px] placeholder-gray-400"
                required
                placeholder="Your message"
            ></textarea>
        </div>
        <!-- reCAPTCHA integration -->
        <div class="">
            <div class="g-recaptcha" data-sitekey="6LfjQAwrAAAAAIF57u8Wt4w5L5vBEWi5DfXXBuGy"></div>
            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
        </div>
        <button
            type="submit"
            class="self-end bg-blue-600 hover:bg-blue-700 text-white font-semibold py-1.5 px-8 rounded-lg transition"
        >
            Send Message
        </button>
    </form>
    </div>
    <div slot="footer">
        <a href="/Luke Else - CV.pdf" target="_blank" rel="noopener noreferrer">Curriculum Vitae</a>
        <a href="mailto:contact@luke-else.co.uk">E-Mail</a>
    </div>
 </Card>
--- a/src/routes/repos/+page.svelte
+++ b/src/routes/repos/+page.svelte
@ -1,39 +1,71 @@
 <script lang="ts">
-    import { onMount } from "svelte";
+    import { loadRepos, repos } from '$lib/stores';
-    import { Toast, ToastType } from "$lib/toast";
+    import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
-    import { repos, loadRepos, addToast } from "$lib/stores";
+    import { toasts } from 'svelte-toasts';
    import { timeSince } from "$lib/api/git";
    import Card from "$lib/components/Cards/Card.svelte";
    import Loading from "$lib/components/Loading.svelte";
-    onMount(loadRepos);
+    import GridGallery from '$lib/components/GridGallery.svelte';
    import Card from '$lib/components/Cards/Card.svelte';
    import Loading from '$lib/components/Loading.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;
                }
            }
        })();
    }
 </script>
-<h1>My Projects</h1>
+{#await loadRepos()}
-<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>
+    <Loading />
-
+{:then _}
-<div class="container">
+    {#if $repos.length == 0}
-    {#if $repos.length > 0}
+        {console.log('No Repos')}
-        <div style="display: none;">{addToast(new Toast("See a snapshot of my latest work.", ToastType.Info, true, 8_000))}</div>
+        <div style="display: none;">
-        <div class="cards">
+            {toasts.add({
                title: 'Error',
                description: 'Failed to load repositories',
                duration: 5000,
                type: 'error',
                placement: 'bottom-center',
                showProgress: true
            })}
        </div>
    {/if}
    <!-- Repositories loaded successfully -->
    <GridGallery>
        {#each $repos as repo}
-                <Card>
+            <!-- <Loading /> -->
-                    <div slot="header">
+            <Card
-                        <h2>{repo.name}</h2>
+                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"
            >
                <h2 slot="headerLeft">{repo.name}</h2>
                <h2 slot="headerRight" class="text-sm text-gray-500">
                    {repo.language}
-                    </div>
+                </h2>
                <div slot="content">
-                        <p class="not-required">{@html repo.description}</p>
+                    <div class="relative z-0">
                        {repo.description}
                    </div>
-                    <div slot="footer">
+                    {#if repoImages[repo.name]}
-                        <!-- svelte-ignore a11y-invalid-attribute -->
+                        <!-- svelte-ignore a11y_img_redundant_alt -->
-                        <a href="{repo.html_url}">{repo.name}</a>
+                        <img
-                        {timeSince(repo.updated_at)}
+                            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}
                </div>
                <h3 slot="footerLeft">
                    Last Updated: {timeSince(repo.updated_at)}
                </h3>
            </Card>
        {/each}
-        </div>
+    </GridGallery>
-    {:else}
+{/await}
        <Loading />
    {/if}
 </div>
--- a/src/skills.svelte
+++ b/src/skills.svelte
@ -1,59 +0,0 @@
 <script lang="ts">
    export let skills: any;
    import Card from '$lib/components/Cards/Card.svelte';
    import Modal from '$lib/components/Modal.svelte';
    let showModal: boolean = false;
    let activeModal: any = null;
 </script>
 <style>
    .card-footer {
        margin-bottom: 1em;
        display: flex;
        gap: 1.5em;
        justify-content: space-between;
    }
    .logo {
        color: var(--fg);
        font-size: 3em;
    }
 </style>
 {#each skills as skill}
    <Card on:click={() => {showModal = true; activeModal = skill}}>
        <div slot="header">
            <h2>{skill.skill}</h2>
            <i class="{skill.logo} logo"></i>
        </div>
        <div slot="content">
            <p class="not-required">{@html skill.usage}</p>
        </div>
        <div slot="footer">
            <!-- svelte-ignore a11y-invalid-attribute -->
            <a href="#">View More</a>
            <a href="/repos">Repos</a>
        </div>
    </Card>
 {/each}
 <!--Modal to be displayed on click-->
 {#if activeModal != null}
    <Modal bind:showModal>
        <h2 slot="header" class="card-header">
            {activeModal.skill}
            <i class="{activeModal.logo} logo"></i>
        </h2>
        <p>
            {activeModal.about}
        </p>
        <div class="card-footer">
            <a href="{activeModal.link}" target="_blank" rel="noopener noreferrer">Learn More</a>
            <a href="/repos">Repos</a>
        </div>
    </Modal>
 {/if}
--- a/src/timeline.svelte
+++ b/src/timeline.svelte
@ -1,63 +0,0 @@
 <script lang="ts">
    export let timelineData: any;
 	import Timeline from '$lib/components/timeline/Timeline.svelte';
 	import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
 	import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
 	import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
 	import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
 	import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
 	import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
 </script>
 <Timeline
 	position="alternate"
 	style={`
  border-radius: 3%;
  padding: 1rem;
  `}
 >
 	{#each timelineData as item}
 		<TimelineItem>
 			<TimelineOppositeContent slot="opposite-content">
 				<p class="oposite-content-title">{item.duration}</p>
 			</TimelineOppositeContent>
 			<TimelineSeparator>
 				{#if item.duration.includes('Present') || !item.duration.includes('-')}
 					<div class="elementToFadeInAndOut">
 						<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
 					</div>
 				{:else}
 					<TimelineDot style={`background-color: var(--link); border-color: var(--bg-grad-2);`} />
 				{/if}
 				<TimelineConnector />
 			</TimelineSeparator>
 			<TimelineContent>
 				<h3 class="content-title">{item.title}</h3>
 				<p class="content-description">{@html item.description}</p>
 			</TimelineContent>
 		</TimelineItem>
 	{/each}
 </Timeline>
 <style>
 	.oposite-content-title {
 		margin: 0;
 		padding: 0;
 		color: var(--bg-grad-2);
 	}
 	.content-title {
 		margin: 0;
 		padding: 0;
 	}
 	.content-description {
 		margin: 0;
 		padding: 0;
 		margin-top: 1rem;
 		color: var(--fg);
 		font-weight: lighter;
 		padding: 0.5rem 0;
 	}
 </style>
--- a/static/json/me.json
+++ b/static/json/me.json
@ -1,50 +1,117 @@
 {
  "name": "Luke Else",
  "job_title": "Software Engineer",
  "location": "Crawley, Sussex <br /> UK",
  "profile_photo": "/profile.jpg",
  "about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at <a href='https://www.thalesgroup.com/en'>Thales UK</a> and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>.",
  "skills": [
    {
-      "skill": "Rust",
+      "name": "Rust",
      "logo": "devicon-rust-plain",
      "colour": "bg-orange-400",
      "link": "https://rust-lang.org",
-      "usage": "Rust is a memory-safe language with zero-cost abstractions, making it ideal for embedded systems. I used Rust to build a <a href='https://git.luke-else.co.uk/luke-else/esp32_gps_display'>GPS-based speedometer</a> for my car and a <a href='https://git.luke-else.co.uk/luke-else/subnet_calculator'>Subnet Calculator</a> for university studies.",
+      "about": "Rust combines safety, efficiency, and clean code, making it a powerful choice for reliable software development.",
-      "about": "Rust combines safety, efficiency, and clean code, making it a powerful choice for reliable software development."
+      "competency": 70
    },
    {
-      "skill": "C++",
+      "name": "C++",
      "logo": "devicon-cplusplus-plain",
      "colour": "bg-blue-400",
      "link": "https://cplusplus.com/",
-      "usage": "Since joining Thales in 2022, I’ve worked on a distributed simulation system using C++, primarily with <a href='https://www.qt.io'>Qt</a> and <a href='https://github.com/ocornut/imgui'>ImGui</a> to develop customer-facing applications.",
+      "about": "C++ offers high-level abstractions with low-level control, making it essential for performance-critical applications.",
-      "about": "C++ offers high-level abstractions with low-level control, making it essential for performance-critical applications."
+      "competency": 80
    },
    {
-      "skill": "Git",
+      "name" : "Python",
      "logo": "devicon-python-plain",
      "colour": "bg-yellow-400",
      "link": "https://python.org",
      "about": "Python is a versatile language known for its simplicity and readability, making it ideal for rapid development and data analysis.",
      "competency": 70
    },
    {
      "name": "Git",
      "logo": "devicon-git-plain",
      "colour": "bg-red-400",
      "link": "https://git-scm.com",
-      "usage": "I have extensive experience with Git, including advanced features like <a href='https://www.atlassian.com/git/tutorials/advanced-overview'>branching, merging and hooks</a>. I've also set up self-hosted <a href='https://git.luke-else.co.uk/luke-else/'>Git services</a> with CI/CD automation.",
+      "about": "Git is an essential tool for version control, enabling efficient collaboration and streamlined code management.",
-      "about": "Git is an essential tool for version control, enabling efficient collaboration and streamlined code management."
+      "competency": 80
    },
    {
-      "skill": "Docker",
+      "name": "Docker",
      "logo": "devicon-docker-plain",
      "colour": "bg-blue-500",
      "link": "https://docker.com",
-      "usage": "I use Docker and Docker Compose for containerized deployments, including hosting <a href='https://git.luke-else.co.uk/luke-else/server'>home-lab services</a> such as this <a href='https://git.luke-else.co.uk/luke-else/luke-else.co.uk'>website</a> and remote Git repositories.",
+      "about": "Docker simplifies deployment by packaging applications in lightweight containers, ensuring consistency across environments.",
-      "about": "Docker simplifies deployment by packaging applications in lightweight containers, ensuring consistency across environments."
+      "competency": 100
    },
    {
-      "skill": "Svelte",
+      "name": "Kubernetes",
      "logo": "devicon-kubernetes-plain",
      "colour": "bg-blue-600",
      "link": "https://kubernetes.io",
      "about": "Kubernetes automates the deployment, scaling, and management of containerized applications, enhancing operational efficiency.",
      "competency": 40
    },
    {
      "name": "PostgreSQL",
      "logo": "devicon-postgresql-plain",
      "colour": "bg-blue-700",
      "link": "https://postgresql.org",
      "about": "PostgreSQL is a powerful, open-source relational database known for its robustness and advanced features.",
      "competency": 70
    },
    {
      "name": "MongoDB",
      "logo": "devicon-mongodb-plain",
      "colour": "bg-green-500",
      "link": "https://mongodb.com",
      "about": "MongoDB is a NoSQL database that provides flexibility and scalability for modern applications with unstructured data.",
      "competency": 70
    },
    {
      "name": "Redis",
      "logo": "devicon-redis-plain",
      "colour": "bg-red-600",
      "link": "https://redis.io",
      "about": "Redis is an in-memory data structure store, used as a database, cache, and message broker for high-performance applications.",
      "competency": 30
    },
    {
      "name": "JavaScript",
      "logo": "devicon-javascript-plain",
      "colour": "bg-yellow-500",
      "link": "https://javascript.com",
      "about": "JavaScript is a versatile language that powers dynamic web applications and enhances user interactivity.",
      "competency": 60
    },
    {
      "name": "Tailwind CSS",
      "logo": "devicon-tailwindcss-plain",
      "colour": "bg-blue-800",
      "link": "https://tailwindcss.com/",
      "about": "Tailwind CSS is a utility-first CSS framework that enables rapid UI development with a focus on customization and responsiveness.",
      "competency": 60
    },
    {
      "name": "Svelte",
      "logo": "devicon-svelte-plain",
      "colour": "bg-orange-400",
      "link": "https://svelte.dev",
-      "usage": "I built <a href='https://git.luke-else.co.uk/luke-else/luke-else.co.uk'>this website</a> using Svelte and plan to explore <a href='https://github.com/tauri-apps/tauri'>Tauri</a> for building desktop apps.",
+      "about": "Svelte compiles to optimized JavaScript, offering a fast, efficient, and maintainable front-end development experience.",
-      "about": "Svelte compiles to optimized JavaScript, offering a fast, efficient, and maintainable front-end development experience."
+      "competency": 55
    }
  ],
  "about": "Hello! I'm an enthusiastic, dedicated software engineer passionate about backend development, networking, and embedded systems. I am currently employed at <a href='https://www.thalesgroup.com/en'>Thales UK</a> and thrive on architecting robust backend solutions, optimizing data transmission, and crafting efficient embedded software. I love tackling complex challenges, collaborating with fellow professionals, and staying up-to-date with tech trends such as my current venture in learning <a href='https://rust-lang.org'>Rust-Lang</a>.",
  "timeline" : [
    {
-      "duration" : "September 2022 - Present",
+      "duration" : "April 2025 - Present",
-      "title" : "Thales UK - Software Engineer",
+      "title" : "Thales UK (DDCC) - 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."
+      "description" : "As a 3rd year apprentice at Thales UK’s Digital Data Competency Centre, I have taken on responsibility for developing microservices that encapsulate Machine Learning models provided by R&D teams, helping to advance product readiness. These services are primarily written in Python and deployed to Kubernetes clusters for use across the business. Our team also designs and maintains CI/CD pipelines to automate the deployment of both these services and their supporting infrastructure."
    },
    {
      "duration" : "September 2022 - April 2025",
      "title" : "Thales UK (ISR) - Software Engineer",
      "description" : "As a software engineering apprentice at Thales UK, Intelligence Surveillance and Reconnaissance, I worked within an agile team of six engineers, contributing to the ongoing development of a C++ system for the MOD. My role involved collaborating closely with colleagues, following Scrum methodologies, and leveraging internal frameworks to enhance and maintain the existing platform."
    },
    {
      "duration" : "September 2022 - Present",
--- a/static/themes/dark.css
+++ b/static/themes/dark.css
@ -1,18 +0,0 @@
 :root {
    --bg: #282c34;
    --bg-secondary: #3e434b;
    --bg-grad-1: #484e58;
    --bg-grad-2: #4e5560;
    --bg-grad-3: #59616d;
    --bg-grad-4: #606a7b;
    --bg-grad-5: #606978;
    --input: #2b3136;
    --fg: #9eaac0;
    --header: #E06C75;
    --link: #98C379;
    --hover: #56B6C2;
    --glow: #C678DD;
    --green: #98C379;
    --red: #E06C75;
 }
--- a/static/themes/light.css
+++ b/static/themes/light.css
@ -1,18 +0,0 @@
 :root {
    --bg: #fff;
    --bg-secondary: #ebebeb;
    --bg-grad-1: #c1c1c1;
    --bg-grad-2: #a1a1a1;
    --bg-grad-3: #858585;
    --bg-grad-4: #616161;
    --bg-grad-5: #484848;
    --input: #cbc9c9;
    --fg: #2f2f2f;
    --header: #514a4a;
    --link: #df0000;
    --hover: #4f4b489b;
    --glow: #545454;
    --green: #98C379;
    --red: #E06C75;
 }
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,19 +1,10 @@
 // import adapter from '@sveltejs/adapter-auto';
 import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
 	preprocess: vitePreprocess(),
-
+	kit: { adapter: adapter() }
 	kit: {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter()
 	}
 };
 export default config;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -0,0 +1,19 @@
 module.exports = {
  theme: {
    extend: {
      colors: {
        'one-bg':      '#282c34',
        'one-bg-light': '#3a3f4b',
        'one-fg':      '#abb2bf',
        'one-accent':  '#61afef',
        'one-green':   '#98c379',
        'one-orange':  '#d19a66',
        'one-red':     '#e06c75',
        'one-yellow':  '#e5c07b',
        'one-purple':  '#c678dd',
        'one-cyan':    '#56b6c2',
        'one-comment': '#5c6370',
      }
    }
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -8,7 +8,8 @@
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
-		"strict": true
+		"strict": true,
 		"moduleResolution": "bundler"
 	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,6 +1,10 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [
 		tailwindcss(),
 		sveltekit(),
 	]
 });
Author	SHA1	Message	Date
Luke Else	6721dc5eef	Merge pull request 'development' (#47 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 26s Details Reviewed-on: #47	2025-05-30 20:06:18 +00:00
Luke Else	6c5d16ef7a	Merge pull request 'CHORE: Added additional skills and ehanced the way that links are displayed in raw html containers' (#46 ) from feature/recent-experience into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m19s Details Reviewed-on: #46	2025-05-30 20:00:27 +00:00
Luke Else	03b95a6c8c	CHORE: Added additional skills and ehanced the way that links are displayed in raw html containers	2025-05-30 18:26:06 +01:00
Luke Else	962e3614e3	Merge pull request 'CHORE: Updated latest experience for the site' (#45 ) from feature/recent-experience into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m25s Details Reviewed-on: #45	2025-05-30 15:44:45 +00:00
Luke Else	63c84e1430	CHORE: Updated latest experience for the site	2025-05-30 16:43:00 +01:00
Luke Else	3b2a8a6611	Merge pull request 'development' (#44 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 27s Details Reviewed-on: #44	2025-05-27 21:24:09 +00:00
Luke Else	9028175ae4	FEAT: Added icons back into the skills section All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m19s Details	2025-05-27 22:00:53 +01:00
Luke Else	280c8e15ad	CHORE: corrected indentation All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 38s Details	2025-05-27 00:41:59 +01:00
Luke Else	e081a0cb3e	HOTFIX: Corrected display of timeline description All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 1m24s Details Build and Push Development Docker Image / build-and-push (push) Successful in 26s Details	2025-05-27 00:35:18 +01:00
Luke Else	41c6964679	Merge pull request 'development' (#43 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 25s Details Reviewed-on: #43	2025-05-26 23:05:11 +00:00
Luke Else	f25c6ddd68	Merge pull request 'FEAT: #36 Added in Collapsible.svelte re-usable component.' (#42 ) from feature/collapsible-elements into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m19s Details Reviewed-on: #42	2025-05-26 23:03:13 +00:00
Luke Else	9b49710556	FEAT: #36 Added in Collapsible.svelte re-usable component.	2025-05-27 00:01:54 +01:00
Luke Else	a0c3b27aab	Merge pull request 'HOTFIX: Corrected Contact form card' (#41 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 26s Details Reviewed-on: #41	2025-05-26 20:14:48 +00:00
Luke Else	005dfb6929	HOTFIX: Corrected Contact form card All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m20s Details	2025-05-26 21:12:32 +01:00
Luke Else	b96c6d2caf	Merge pull request 'development' (#40 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 27s Details Reviewed-on: #40	2025-05-24 21:45:00 +00:00
Luke Else	ef37e45281	Merge pull request 'chore/tailwind-conversion' (#38 ) from chore/tailwind-conversion into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m21s Details Reviewed-on: #38	2025-05-24 21:36:15 +00:00
Luke Else	b55538345f	Merge branch 'chore/tailwind-conversion' of ssh://git.luke-else.co.uk:222/luke-else/luke-else.co.uk into chore/tailwind-conversion	2025-05-24 22:34:10 +01:00
Luke Else	b586385d6d	Merge pull request 'CHORE: Fixed loading icon and added it into REPOS page.' (#37 ) from chore/tailwind-conversion into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m24s Details Reviewed-on: #37	2025-05-24 13:07:55 +00:00
Luke Else	2d3046da48	CHORE: Fixed loading icon and added it into REPOS page.	2025-05-24 14:02:52 +01:00
Luke Else	67f9844534	CHORE: Updated Gallery to use grid. Made card component mode modular. Added colour to the skills section of the page.	2025-05-24 11:46:33 +01:00
Luke Else	50b8845e6c	Merge pull request 'development' (#33 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 27s Details Reviewed-on: #33	2025-05-23 21:37:35 +00:00
Luke Else	79f6e8e90b	Merge pull request 'chore/tailwind-conversion' (#32 ) from chore/tailwind-conversion into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m36s Details Reviewed-on: #32	2025-05-23 21:35:36 +00:00
Luke Else	25f3db52ec	CHORE: Cleaning up code before merge	2025-05-23 22:32:58 +01:00
Luke Else	a46ac458dc	FEAT: Added in git repos page	2025-05-23 22:26:42 +01:00
Luke Else	206c5665a2	FEAT: Added contact page	2025-05-23 20:41:32 +01:00
Luke Else	fd3c620cb9	FEAT: Added in timeline element	2025-05-23 20:10:37 +01:00
Luke Else	c52d185f76	FEAT: Started fleshing out content on the webpage	2025-05-23 18:13:58 +01:00
Luke Else	538d9593c2	Made components more re-usable. Added section component	2025-05-23 16:04:35 +01:00
Luke Else	24a7ebf02a	CHORE: Starting to get to work with changing some of the old formatting over to tailwind config	2025-05-21 22:45:18 +01:00
Luke Else	fc642a4ecd	Imported tailwind libraries, started to re-write main page	2025-05-12 00:43:28 +01:00
Luke Else	d9e8b4b56c	Updated packages and fixed warnings pertaining to exported types All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m34s Details	2025-05-11 23:50:26 +01:00
Luke Else	bd689bdb44	Merge pull request 'development' (#27 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 28s Details Reviewed-on: #27	2025-04-27 21:21:09 +00:00
Luke Else	051cd42fdb	CHORE: Cleaning up codebase All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m5s Details Moved component content to be above inline style blocks	2025-04-27 22:02:33 +01:00
Luke Else	da5f47a841	#26 Re-Made contact form. More work required.] All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m24s Details	2025-04-27 19:33:46 +01:00
Luke Else	5fe7b83c47	#26 Updated key to support v2 of captcha All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m2s Details	2025-04-06 23:12:27 +01:00
Luke Else	931e4d2abe	Merge branch 'development' of ssh://git.luke-else.co.uk:222/luke-else/luke-else.co.uk into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m25s Details	2025-04-06 23:00:53 +01:00
Luke Else	33ddd2add0	#26 Added re-captcha to the site	2025-04-06 23:00:42 +01:00
Luke Else	8cd763b9d0	Merge pull request 'development' (#25 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 29s Details Reviewed-on: #25	2025-03-12 15:15:39 +00:00
Luke Else	ce38e88885	#10 Added sliding card element for image stored in /assets/images/main.png All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m4s Details	2025-03-12 15:05:00 +00:00
Luke Else	e1160b3462	#23 Updated the colour of the rotating loading button All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m4s Details	2025-03-07 22:18:07 +00:00
Luke Else	7042b2d500	Merge pull request 'development' (#24 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 27s Details Reviewed-on: #24	2025-03-07 22:10:07 +00:00
Luke Else	5f1a1d4959	#23 Updated the colour of the send button All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m6s Details	2025-03-07 21:58:40 +00:00
Luke Else	da2f2bc380	#4 Added new vscode colour scheme option. All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m3s Details	2025-03-06 16:00:35 +00:00
Luke Else	c3055a6882	Added a series of nicely curated themes All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m4s Details	2025-03-06 15:58:14 +00:00
Luke Else	3557a6a6ad	Added a nice new light pastel blue theme All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m4s Details	2025-03-06 15:41:06 +00:00
Luke Else	f34761d094	Updated pipeline to create a development build All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m8s Details	2025-03-06 14:45:39 +00:00
Luke Else	f7e3acf384	#4 Changed light colour theme in favour of a cold blue theme	2025-03-06 14:24:24 +00:00