Merge pull request 'fix: Corrected duplicated build stage in dockerfile' (#50 ) from chore/base-image into development

Reviewed-on: #50
fix: Corrected duplicated build stage in dockerfile
2025-08-01 19:32:46 +00:00 · 2025-08-01 20:32:01 +01:00 · 2025-08-01 19:28:57 +00:00 · 2025-08-01 20:27:11 +01:00 · 2025-05-30 20:00:27 +00:00 · 2025-05-30 18:26:06 +01:00
38 changed files with 473 additions and 570 deletions
--- 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/12
+++ b/12
@@ -1,4 +1,4 @@
-FROM node:lts-slim as build
+FROM git.luke-else.co.uk/luke-else/nodejs:latest AS build

 WORKDIR /app

@@ -6,15 +6,15 @@ COPY package*.json ./
 RUN rm -rf node_modules
 RUN rm -rf build
 COPY . .
-RUN npm install
-RUN npm run build
+RUN pnpm install
+RUN pnpm run build

-FROM node:lts-slim as run
+FROM git.luke-else.co.uk/luke-else/nodejs:latest AS run

 WORKDIR /app
 COPY --from=build /app/package.json ./package.json
 COPY --from=build /app/build ./build
-RUN npm install --omit=dev
+RUN pnpm install --prod

 EXPOSE 3000
-ENTRYPOINT [ "npm", "run", "start" ]
+ENTRYPOINT [ "pnpm", "run", "start" ]
--- a/src/app.html
+++ b/src/app.html
@@ -1,19 +1,31 @@
-<!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." />
+    <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="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">
-		<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>
-		%sveltekit.head%
+        <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"
+        />
+        <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>
+        %sveltekit.head%

-		<style>
-		</style>
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
+        <style></style>
+    </head>
+
+    <body data-sveltekit-preload-data="hover">
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
 </html>
--- a/src/lib/components/Cards/Card.svelte
+++ b/src/lib/components/Cards/Card.svelte
@@ -1,28 +1,23 @@
 <script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-
-    const dispatch = createEventDispatcher();
-
-    function onClick() {
-        dispatch('click');
-    }
+    // Allows additional styling to be applied to the Card component's outer wrapping
+    export let containerStyle: string = "";
 </script>

-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-    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}
->
-    <div class="card-header flex items-center justify-between w-full mb-0">
-        <slot name="header"></slot>
+<div class={containerStyle}>
+    <div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
+        <div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
+            <slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
+            <slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
+        </div>
+        <hr class="border-1" />
+        <div class="flex-1 flex flex-col justify-center mt-4 mb-8">
+            <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>
    </div>
-    <hr />
-    <div class="card-content flex items-center justify-center w-full max-w-full">
-        <slot name="content"></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>
-</div>
+</div>
--- a/src/lib/components/Cards/SlidingCard.svelte
+++ b/src/lib/components/Cards/SlidingCard.svelte
@@ -1,38 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-
-    const dispatch = createEventDispatcher();
-
-    function onClick() {
-        dispatch('click');
-    }
-</script>
-
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-    class="sliding-card flex flex-col justify-between flex-wrap flex-[2_1_15em] p-2 bg-secondary rounded-lg snap-start transition-all duration-300 overflow-hidden relative hover:shadow-lg"
-    on:click={onClick}
->
-    <div class="sliding-card-header w-full flex items-center justify-between mb-0">
-        <slot name="header"></slot>
-    </div>
-    <hr />
-
-    <!-- Wrapper to stack sliding-card-content and sliding-content -->
-    <div class="content-wrapper relative w-full overflow-hidden">
-        <div class="sliding-card-content flex flex-col items-center justify-center max-w-full flex-grow z-[1]">
-            <slot name="content"></slot>
-        </div>
-        <div
-            class="sliding-content absolute top-0 left-0 w-full h-full bg-secondary translate-y-full transition-transform duration-300 z-[2] pointer-events-none group-hover:translate-y-0 sliding-card:hover:translate-y-0"
-        >
-            <slot name="sliding-content"></slot>
-        </div>
-    </div>
-
-    <hr class="not-required" />
-    <div class="sliding-card-footer flex gap-4 max-w-full justify-between mb-4">
-        <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 var(--fg);
+        border-bottom: 3px solid gray;
    }

    .inner.two {
        right: 0%;
        top: 0%;
        animation: rotate-two 1s linear infinite;
-        border-right: 3px solid var(--fg);
+        border-right: 3px solid gray;
    }

    .inner.three {
        right: 0%;
        bottom: 0%;
        animation: rotate-three 1s linear infinite;
-        border-top: 3px solid var(--fg);
+        border-top: 3px solid gray;
    }

    @keyframes rotate-one {
--- a/src/lib/components/Modal.svelte
+++ b/src/lib/components/Modal.svelte
@@ -1,39 +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()}
-    class="max-w-[70vw] rounded-md border-0 p-0 shadow-lg bg-bg text-fg relative animate-[zoom_0.5s_cubic-bezier(0.34,1.56,0.64,1)]"
-    style="box-shadow: 0.5em 0.5em 0.5em var(--header);"
->
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
-    <div on:click|stopPropagation class="p-4">
-        <slot name="header" />
-        <hr class="my-2 border-accent" />
-        <slot />
-        <hr class="my-2 border-accent" />
-    </div>
-    <button
-        class="close absolute top-4 right-6 text-fg bg-transparent border-0 p-0 m-0 leading-none text-[1.2em] hover:text-accent"
-        on:click={() => dialog.close()}
-    >
-        <CloseIcon width="0.8em" />
-    </button>
-</dialog>
-
-<style>
-	@keyframes zoom {
-		from { transform: scale(0.95); }
-		to { transform: scale(1); }
-	}
-</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/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/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 '$lib/types';
-	export let position: TimelinePosition = 'right';
-	export let style: string | null = 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 = "";
-</script>
-
-<span class="timeline-connector" {style}></span>
-
-<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 '$lib/types';
-	export let style: string | null = 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 = 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 '$lib/types';
-
-	export let position: ParentPosition | null = null;
-	export let style: string = "";
-
-	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"></div>
-	{: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 '$lib/types';
-	export let style: string | null = 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 = 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 Modal from '$lib/components/Modal.svelte';
+import GridGallery from './components/GridGallery.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 {
-	Timeline,
-	TimelineItem,
-	TimelineSeparator,
-	TimelineDot,
-	TimelineConnector,
-	TimelineContent,
-	TimelineOppositeContent,
-
-    Toasts,
-    Toast,
-    CloseIcon,
-    InfoIcon,
-    SuccessIcon,
-    ErrorIcon,
-
-    Card,
-    SlidingCard,
-    Modal
-};
+export { Card, GridGallery, Loading, Section, SkillProgress, Timeline };
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -1,38 +1,7 @@
-import { ToastType, type Toast } from "$lib/toast";
-import { writable, type Writable } from "svelte/store";
+import { 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
--- a/src/lib/types.ts
+++ b/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 {
@@ -19,4 +19,4 @@ export interface GitRepo {
        login: string;
        avatar_url: string;
    };
-}
+}
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -3,6 +3,12 @@
    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';
+    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>

 {#await getJson('/json/me.json')}
@@ -18,23 +24,46 @@
        })}
    </div>

-    <div class="bg-slate-100/10 dark:bg-slate-100/10 p-10 m-5 rounded-2xl shadow-2xl">
-        <div class="flex flex-row justify-between text-red-500 p-4">
-            <p class="text-3xl md:text-4xl font-bold">
-                {info.name}
-            </p>
-            <p class="max-md:hidden text-2xl md:text-3xl">{info.job_title}</p>
-        </div>
-        <hr class="max-md:hidden border-3 m-5" />
-        <div class="flex flex-row items-center gap-5 m-2">
-            <img
-                src={info.profile_photo}
-                alt="Avatar"
-                class="max-md:hidden rounded-full w-64 h-64 mt-5 mb-5 p-3 border-5"
-            />
-            <p>{@html info.about}</p>
-        </div>
-    </div>
+    <!-- Main Card -->
+    <Section label="[About]">
+        <Card>
+            <h2 slot="headerLeft">{info.name}</h2>
+            <h2 slot="headerRight">{info.job_title}</h2>
+            <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>
+
+    <!-- SKills -->
+    <Section label="[Skills]">
+        <GridGallery>
+            {#each info.skills as skill}
+                <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>
+
+    <Section label="[Experience]">
+        <Timeline timelineData={info.timeline} />
+    </Section>
 {:catch}
    <div style="display: none;">
        {toasts.add({
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,14 +1,98 @@
 <script lang="ts">
    import { toasts } from 'svelte-toasts';
+    import Card from '$lib/components/Cards/Card.svelte';
+
+    import { page } from '$app/state';
+    const sent = page.url.searchParams.get('sent');
+
+    if (sent == 'true') {
+        toasts.add({
+            title: 'Message sent!',
+            description: 'Thank you for contacting me.',
+            type: 'success',
+            duration: 4000,
+            placement: 'bottom-center'
+        });
+    }
+
+    if (sent == 'false') {
+        toasts.add({
+            title: 'Message not sent!',
+            description: 'Please try again later.',
+            type: 'error',
+            duration: 4000,
+            placement: 'bottom-center'
+        });
+    }
 </script>

-<div style="display: none;">
-    {toasts.add({
-        title: 'Warning',
-        description: 'This page is under construction',
-        duration: 0,
-        type: 'warning',
-        placement: 'center-center',
-        showProgress: true
-    })}
-</div>
+<Card>
+    <div slot="headerLeft">
+        Contact Me
+    </div>
+    <!-- Contact Form -->
+     <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="hidden">
+            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
+            <input type="hidden" name="replyTo" value="@">
+            <input type="text" name="honeypot" style="display: none;">
+            <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>
+</Card>
--- a/src/routes/repos/+page.svelte
+++ b/src/routes/repos/+page.svelte
@@ -1,18 +1,71 @@
 <script lang="ts">
-    import { loadRepos } from '$lib/stores';
-    import { onMount } from 'svelte';
+    import { loadRepos, repos } from '$lib/stores';
+    import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
    import { toasts } from 'svelte-toasts';

-    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>

-<div style="display: none;">
-    {toasts.add({
-        title: 'Warning',
-        description: 'This page is under construction',
-        duration: 0,
-        type: 'warning',
-        placement: 'center-center',
-        showProgress: true
-    })}
-</div>
+{#await loadRepos()}
+    <Loading />
+{:then _}
+    {#if $repos.length == 0}
+        {console.log('No Repos')}
+        <div style="display: none;">
+            {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}
+            <!-- <Loading /> -->
+            <Card
+                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}
+                </h2>
+                <div slot="content">
+                    <div class="relative z-0">
+                        {repo.description}
+                    </div>
+                    {#if repoImages[repo.name]}
+                        <!-- svelte-ignore a11y_img_redundant_alt -->
+                        <img
+                            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}
+    </GridGallery>
+{/await}
--- 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(--accent);`} />
-					</div>
-				{:else}
-					<TimelineDot style={`background-color: var(--link); border-color: var(--accent);`} />
-				{/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(--accent);
-	}
-	.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",
-      "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."
+      "duration" : "April 2025 - Present",
+      "title" : "Thales UK (DDCC) - Software Engineer",
+      "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;
-    --accent: #59616d;
-
-    --header: #E06C75;
-    --fg: #9eaac0;
-    
-    --input: #2b3136;
-    
-    --link: #98C379;
-    --glow: #C678DD;
-    --hover: #56B6C2;
-
-    --green: #98C379;
-    --red: #E06C75;
-    --blue: #79aec3;
-}
--- a/static/themes/light.css
+++ b/static/themes/light.css
@@ -1,18 +0,0 @@
-:root {
-    --bg: #f5f5f5; /* Slightly deeper light grey for subtle contrast */
-    --bg-secondary: #d9dddf; /* More defined soft grey */
-    --accent: #8ea29b; /* Stronger muted sage green */
-
-    --header: #4a5a56; /* Darker desaturated green-grey for better contrast */
-    --fg: #2f3739; /* Richer dark grey for improved readability */
-    
-    --input: #e4e7e8; /* Slightly deeper soft grey input background */
-    
-    --link: #5f8480; /* Darker muted teal for contrast */
-    --glow: #b0bdb9; /* More noticeable but soft glow */
-    --hover: #85a29c; /* Stronger pastel hover effect */
-
-    --green: #6fa984; /* More vibrant pastel green */
-    --red: #e8858f; /* Slightly deeper pastel red for contrast */
-    --blue: #6fa9a4; /* Same as accent */
-}
Author	SHA1	Message	Date
Luke Else	dc00eff17c	Merge pull request 'fix: Corrected duplicated build stage in dockerfile' (#50 ) from chore/base-image into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 50s Details Reviewed-on: #50	2025-08-01 19:32:46 +00:00
Luke Else	fe36594189	fix: Corrected duplicated build stage in dockerfile	2025-08-01 20:32:01 +01:00
Luke Else	aa8e55c9a6	Merge pull request 'chore: Updated dockerfile to use new base image for smaller container sizes' (#49 ) from chore/base-image into development Some checks failed Build and Push Development Docker Image / build-and-push (push) Failing after 15s Details Reviewed-on: #49	2025-08-01 19:28:57 +00:00
Luke Else	e2b276dc0e	chore: Updated dockerfile to use new base image for smaller container sizes	2025-08-01 20:27:11 +01: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	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	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	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	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	ccbaa41cab	Merge pull request 'Merge Ackee Tracker Changes' (#22 ) from development into main All checks were successful Build and Push Docker Image / build-and-push (push) Successful in 27s Details Reviewed-on: #22	2025-03-05 21:11:56 +00:00
Luke Else	cb1304aaeb	Merge pull request 'Added Loading Spinner' (#19 ) from development into main All checks were successful Build and Push Docker Image / build-and-push (push) Successful in 27s Details Reviewed-on: #19	2025-02-15 14:48:54 +00:00
Luke Else	b9c4ec540a	Merge pull request 'development' (#18 ) from development into main All checks were successful Build and Push Docker Image / build-and-push (push) Successful in 27s Details Reviewed-on: #18	2025-02-09 20:06:19 +00:00