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

Reviewed-on: #47

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

src/lib/components/Cards/Card.svelte

@@ -1,31 +1,23 @@
 <script lang="ts">
-    export let headerLeft: string = "";
-    export let headerRight: string = "";
-    export let headerColour: string = "text-red-500";
-    export let footer: string = "";
-
     // Allows additional styling to be applied to the Card component's outer wrapping
     export let containerStyle: string = "";
 </script>
 
 <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="{headerColour} flex flex-row justify-between items-center mb-4">
+        <div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
-            <p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
+            <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>
         
-            {#if headerRight}
+        <hr class="border-1" />
-                <p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
+        <div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
-            {/if}
+            <slot name="footerLeft"/>
+            <slot name="footerRight"/>
         </div>
-        <hr class="mb-4 border-1" />
-        <div class="flex-1 flex flex-col justify-center p-5">
-            <slot />
-        </div>
-        {#if footer}
-            <hr class="my-4 border-1" />
-            <div class="mt-2 text-base opacity-90">
-                {@html footer}
-            </div>
-        {/if}
     </div>
 </div>

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>

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>

src/lib/components/FlexGallery.svelte

@@ -1,7 +0,0 @@
-<script lang="ts">
-</script>
-
-<!-- FlexGallery.svelte -->
-<div class="flex flex-wrap gap-10 w-full">
-    <slot />
-</div>

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>

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 {

src/lib/components/SkillProgress.svelte

@@ -1,14 +1,16 @@
 <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 text-gray-400">{value}%</span>
+        <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="bg-orange-400 h-5 rounded-full transition-all duration-500"
+            class="{skillColour} h-5 rounded-full transition-all duration-500"
             style="width: {value}%"
         ></div>
     </div>

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>

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>

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>

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>

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>

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>

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>

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>

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

src/main.svelte

@@ -5,9 +5,10 @@
     import Loading from '$lib/components/Loading.svelte';
     import Section from '$lib/components/Section.svelte';
     import Card from '$lib/components/Cards/Card.svelte';
-    import FlexGallery from "$lib/components/FlexGallery.svelte";
+    import GridGallery from "$lib/components/GridGallery.svelte";
     import SkillProgress from "$lib/components/SkillProgress.svelte";
-    import Timeline from './timeline.svelte';
+    import Timeline from '$lib/components/Timeline.svelte';
+    import Collapsible from '$lib/components/Collapsible.svelte';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -24,34 +25,44 @@
     </div>
 
     <!-- Main Card -->
-    <Section label="Experience">
+    <Section label="[About]">
-        <Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
+        <Card>
-            <div class="flex flex-row items-center gap-5">
+            <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>{@html info.about}</p>
+                <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">
+    <Section label="[Skills]">
-        <FlexGallery>
+        <GridGallery>
             {#each info.skills as skill}
-                <Card headerLeft={skill.name} footer={skill.link} containerStyle="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">
+                <Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
-                    {skill.about}
+                    <h2 slot="headerLeft">{skill.name}</h2>
-
+                    <i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
-                    <SkillProgress value={skill.competency} />
+                    <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}
-        </FlexGallery>
+        </GridGallery>
     </Section>
 
-    <Section label="Experience">
+    <Section label="[Experience]">
-        <Timeline timelineData={info.experience} />
+        <Timeline timelineData={info.timeline} />
     </Section>
 {:catch}
     <div style="display: none;">

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;">
+<Card>
-    {toasts.add({
+    <div slot="headerLeft">
-        title: 'Warning',
+        Contact Me
-        description: 'This page is under construction',
+    </div>
-        duration: 0,
+    <!-- Contact Form -->
-        type: 'warning',
+     <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">
-        placement: 'center-center',
+        <div class="hidden">
-        showProgress: true
+            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
-    })}
+            <input type="hidden" name="replyTo" value="@">
-</div>
+            <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>

src/routes/repos/+page.svelte

@@ -1,18 +1,71 @@
 <script lang="ts">
-    import { loadRepos } from '$lib/stores';
+    import { loadRepos, repos } from '$lib/stores';
-    import { onMount } from 'svelte';
+    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;">
+{#await loadRepos()}
+    <Loading />
+{:then _}
+    {#if $repos.length == 0}
+        {console.log('No Repos')}
+        <div style="display: none;">
             {toasts.add({
-        title: 'Warning',
+                title: 'Error',
-        description: 'This page is under construction',
+                description: 'Failed to load repositories',
-        duration: 0,
+                duration: 5000,
-        type: 'warning',
+                type: 'error',
-        placement: 'center-center',
+                placement: 'bottom-center',
                 showProgress: true
             })}
-</div>
+        </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}

src/timeline.svelte

@@ -1,67 +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>

static/json/me.json

@@ -3,54 +3,115 @@
   "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": [
     {
       "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.",
       "competency": 70
     },
     {
       "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.",
       "competency": 80
     },
+    {
+      "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.",
       "competency": 80
     },
     {
       "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.",
       "competency": 100
     },
+    {
+      "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.",
-      "competency": 40
+      "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",

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

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 */
-}