feat: Updated devcontainer

Reviewed-on: #55

.devcontainer/devcontainer.json

@@ -0,0 +1,15 @@
+{
+    "name": "luke-else.co.uk",
+    "image": "git.luke-else.co.uk/luke-else/nodejs-dev:latest",
+    "remoteUser": "dev",
+    "customizations": {
+        "vscode": {
+            "extensions": [
+                "ms-azuretools.vscode-docker",
+                "ms-vscode-remote.remote-containers",
+                "svelte.svelte-vscode"
+            ]
+        }
+    },
+    "postCreateCommand": "pnpm install"
+}

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 node_modules
+.pnpm-store
 /build
 /.svelte-kit
 /package

.npmrc

@@ -1,2 +1,4 @@
 engine-strict=true
 resolution-mode=highest
+
+@luke-else:registry=https://git.luke-else.co.uk/api/packages/luke-else/npm/

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

dockerfile

@@ -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,16 @@ 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/.npmrc ./.npmrc
 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" ]

package.json

@@ -13,11 +13,11 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@rollup/plugin-json": "^6.0.0",
+		"@rollup/plugin-json": "^6.1.0",
 		"@sveltejs/adapter-auto": "6.0.0",
 		"@sveltejs/adapter-node": "5.2.12",
 		"@sveltejs/kit": "2.20.8",
-		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.1.1",
 		"prettier": "3.5.3",
 		"prettier-plugin-svelte": "3.3.3",
 		"svelte": "5.28.2",
@@ -28,8 +28,9 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@tailwindcss/vite": "^4.1.6",
+		"@luke-else/component-lib": "^1.1.5",
+		"@tailwindcss/vite": "^4.1.13",
 		"svelte-toasts": "^1.1.2",
-		"tailwindcss": "^4.1.6"
+		"tailwindcss": "^4.1.13"
 	}
 }

src/app.css

@@ -1 +1 @@
-@import "tailwindcss"
+@import "tailwindcss";

src/lib/components/Cards/Card.svelte

@@ -1,31 +0,0 @@
-<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">
-            <p class="text-2xl md:text-3xl font-bold truncate">{headerLeft}</p>
-            
-            {#if headerRight}
-                <p class="max-md:hidden text-xl md:text-2xl truncate">{@html headerRight}</p>
-            {/if}
-        </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/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/Loading.svelte

@@ -1,73 +0,0 @@
-<style>
-    .loader {
-        position: absolute;
-        top: calc(50% - 32px);
-        left: calc(50% - 32px);
-        width: 64px;
-        height: 64px;
-        border-radius: 50%;
-        perspective: 800px;
-    }
-
-    .inner {
-        position: absolute;
-        box-sizing: border-box;
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-    }
-
-    .inner.one {
-        left: 0%;
-        top: 0%;
-        animation: rotate-one 1s linear infinite;
-        border-bottom: 3px solid var(--fg);
-    }
-
-    .inner.two {
-        right: 0%;
-        top: 0%;
-        animation: rotate-two 1s linear infinite;
-        border-right: 3px solid var(--fg);
-    }
-
-    .inner.three {
-        right: 0%;
-        bottom: 0%;
-        animation: rotate-three 1s linear infinite;
-        border-top: 3px solid var(--fg);
-    }
-
-    @keyframes rotate-one {
-        0% {
-            transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
-        }
-        100% {
-            transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
-        }
-    }
-
-    @keyframes rotate-two {
-        0% {
-            transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
-        }
-        100% {
-            transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
-        }
-    }
-
-    @keyframes rotate-three {
-        0% {
-            transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
-        }
-        100% {
-            transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
-        }
-    }
-</style>
-
-<div class="loader">
-    <div class="inner one"></div>
-    <div class="inner two"></div>
-    <div class="inner three"></div>
-</div>

src/lib/components/Section.svelte

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

src/lib/components/SkillProgress.svelte

@@ -1,16 +0,0 @@
-<script lang="ts">
-    export let value: number = 0; // 0 to 100
-</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="bg-orange-400 h-5 rounded-full transition-all duration-500"
-            style="width: {value}%"
-        ></div>
-    </div>
-</div>

src/lib/components/Timeline.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-    export let timelineData: Array<{
-        title: string;
-        description: string;
-        duration: string;
-    }>;
-
-    // Track open/closed state for each entry
-    let openStates = timelineData.map(() => false);
-
-    function toggle(index: number) {
-        openStates[index] = !openStates[index];
-    }
-
-    toggle(0); // Open the first entry by default
-</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 openStates[i]}
-        <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>
-        <button
-          class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition"
-          on:click={() => toggle(i)}
-          aria-expanded={openStates[i]}
-        >
-        <h3 class="text-2lg font-semibold text-red-400 mt-1">{entry.title}</h3>
-        </button>
-        {#if openStates[i]}
-          <p class="mt-2 whitespace-pre-line transition-all duration-300">{@html entry.description}</p>
-        {/if}
-      </div>
-    {/each}
-  </div>
-</div>

src/lib/index.ts

@@ -1,9 +1 @@
 // place files you want to import through the `$lib` alias in this folder.
-import Card from '$lib/components/Cards/Card.svelte';
-import FlexGallery from './components/FlexGallery.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, FlexGallery, Loading, Section, SkillProgress, Timeline };

src/main.svelte

@@ -2,12 +2,15 @@
     import { getJson } from '$lib/data';
     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 FlexGallery from "$lib/components/FlexGallery.svelte";
-    import SkillProgress from "$lib/components/SkillProgress.svelte";
-    import Timeline from '$lib/components/Timeline.svelte';
+    import {
+        Loading,
+        Section,
+        Card,
+        GridGallery,
+        SkillProgress,
+        Timeline,
+        Collapsible
+    } from '@luke-else/component-lib';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -24,32 +27,49 @@
     </div>
 
     <!-- Main Card -->
-    <Section label="[Experience]">
-        <Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
-            <div class="flex flex-row items-center gap-5">
+    <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>{@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 -->
+    <!-- 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">
-                    {skill.about}
-
-                    <SkillProgress value={skill.competency} />
+                <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}
-        </FlexGallery>
+        </GridGallery>
     </Section>
 
+    <!-- Experience -->
     <Section label="[Experience]">
         <Timeline timelineData={info.timeline} />
     </Section>

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-    import { ToastContainer, FlatToast } from 'svelte-toasts';
     import '../app.css';
+    import { ToastContainer, FlatToast } from 'svelte-toasts';
+    import { PageIcon } from '@luke-else/component-lib';
 </script>
 
 <div
@@ -14,6 +15,10 @@
         <a href="/contact" class="hover:underline">//Contact</a>
     </nav>
 
+    <a href="https://git.luke-else.co.uk" target="_blank">
+        <PageIcon iconClass="devicon-git-plain" />
+    </a>
+
     <div class="container mx-auto justify-center items-center flex flex-col">
         <slot />
         <ToastContainer let:data>

src/routes/contact/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { toasts } from 'svelte-toasts';
-    import Card from '$lib/components/Cards/Card.svelte';
+    import { Card, Section } from '@luke-else/component-lib';
 
     import { page } from '$app/state';
     const sent = page.url.searchParams.get('sent');
@@ -26,70 +26,78 @@
     }
 </script>
 
-<Card headerLeft="Contact Me">
-    <!-- Contact Form -->
-     <form 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">
+<Section label="[Contact]">
+    <div>
+        
+    </div>
+    <Card>
+        <div slot="headerLeft">
+            Contact Me
         </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"
-                />
+        <!-- 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-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 class="flex flex-row 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 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"
+            <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="Subject"
-                />
+                    placeholder="Your message"
+                ></textarea>
             </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>
+            <!-- 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>
+</Section>

src/routes/repos/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { loadRepos, repos } 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';
 
-    import FlexGallery from '$lib/components/FlexGallery.svelte';
-    import Card from '$lib/components/Cards/Card.svelte';
+    import { GridGallery, Card, Loading, Section, Collapsible } from '@luke-else/component-lib';
 
     let repoImages: Record<string, string | null> = {};
 
@@ -18,29 +18,56 @@
             }
         })();
     }
-
-    onMount(loadRepos);
 </script>
-
-<FlexGallery>
-    {#each $repos as repo}
-        <Card
-            headerLeft={repo.name}
-            headerRight={repo.language}
-            footer={timeSince(repo.updated_at)}
-            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"
-        >
-            <div class="relative z-0">
-                {repo.description}
+<Section label="[Repositories]">
+    {#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 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}
-        </Card>
-    {/each}
-</FlexGallery>
+            <p>Sorry... we can't show you anything here</p>
+        {/if}
+        <!-- Repositories loaded successfully -->
+        <GridGallery>
+            {#each $repos as repo}
+                <!-- <Loading /> -->
+                <Card
+                    containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300"
+                >
+                    <h2 slot="headerLeft">{repo.name}</h2>
+                    <h2 slot="headerRight" class="text-sm text-gray-500">
+                        {repo.language}
+                    </h2>
+                    <div class="flex flex-col gap-5" slot="content">
+                        {repo.description}
+                        {#if repoImages[repo.name]}
+                            <Collapsible>
+                                <span slot="label" class="text-lg">See More</span>
+                                <!-- svelte-ignore a11y_img_redundant_alt -->
+                                <img
+                                    slot="content"
+                                    src={repoImages[repo.name]}
+                                    alt="repo image"
+                                    class=""
+                                />
+                            </Collapsible>
+                        {/if}
+                    </div>
+                    <h3 slot="footerLeft">
+                        Last Updated: {timeSince(repo.updated_at)}
+                    </h3>
+                </Card>
+            {/each}
+        </GridGallery>
+    {/await}
+</Section>

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

tailwind.config.js

@@ -1,19 +0,0 @@
-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',
-      }
-    }
-  }
-}