feat: Updated devcontainer

Merge pull request 'feature/devcontainer' (#55 ) from feature/devcontainer into main
Reviewed-on: #55
2025-10-21 22:44:32 +01:00 · 2025-09-26 09:18:23 +00:00 · 2025-09-25 23:34:11 +01:00 · 2025-09-25 23:29:30 +01:00 · 2025-09-25 23:13:39 +01:00 · 2025-09-25 22:03:37 +01:00
45 changed files with 1699 additions and 1433 deletions
--- a/.devcontainer/devcontainer.json
+++ b/.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"
+}
--- a/.dockerignore
+++ b/.dockerignore
@@ -1,19 +1,19 @@
-# .dockerignore
-
-.vscode
-
-node_modules
-
-.git
-.gitattributes
-.gitea
-
-.eslintignore
-.eslintrc.cjs
-
-.prettierrc
-.pretieriignore
-
-README.md
-
+# .dockerignore
+
+.vscode
+
+node_modules
+
+.git
+.gitattributes
+.gitea
+
+.eslintignore
+.eslintrc.cjs
+
+.prettierrc
+.pretieriignore
+
+README.md
+
 Dockerfile
--- a/.gitea/workflows/dev.yaml
+++ b/.gitea/workflows/dev.yaml
@@ -1,30 +1,30 @@
-name: Build and Push Development Docker Image
-
-on:
-  push:
-    branches: [ development ]
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-      
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ secrets.CONTAINER_REGISTRY }}
-          username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
-          password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
-      
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      
-      - name: Build and Tag Docker Image
-        run: |
-          docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev .
-      
-      - name: Push Docker Image
-        run: |
-          docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev
+name: Build and Push Development Docker Image
+
+on:
+  push:
+    branches: [ development ]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.CONTAINER_REGISTRY }}
+          username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
+          password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
+      
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      
+      - name: Build and Tag Docker Image
+        run: |
+          docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev .
+      
+      - name: Push Docker Image
+        run: |
+          docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev
--- a/.gitea/workflows/main.yaml
+++ b/.gitea/workflows/main.yaml
@@ -1,30 +1,30 @@
-name: Build and Push Latest Docker Image
-
-on:
-  push:
-    branches: [ main ]
-
-jobs:
-  build-and-push:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout Repository
-        uses: actions/checkout@v4
-      
-      - name: Log in to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ secrets.CONTAINER_REGISTRY }}
-          username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
-          password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
-      
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-      
-      - name: Build and Tag Docker Image
-        run: |
-          docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:latest .
-      
-      - name: Push Docker Image
-        run: |
-          docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:latest
+name: Build and Push Latest Docker Image
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.CONTAINER_REGISTRY }}
+          username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
+          password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
+      
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      
+      - name: Build and Tag Docker Image
+        run: |
+          docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:latest .
+      
+      - name: Push Docker Image
+        run: |
+          docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:latest
--- a/.gitignore
+++ b/.gitignore
@@ -1,11 +1,12 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
-.vscode
+.DS_Store
+node_modules
+.pnpm-store
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vscode
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,4 @@
-engine-strict=true
-resolution-mode=highest
+engine-strict=true
+resolution-mode=highest
+
+@luke-else:registry=https://git.luke-else.co.uk/api/packages/luke-else/npm/
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,13 +1,13 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-
-# Ignore files for PNPM, NPM and YARN
-pnpm-lock.yaml
-package-lock.json
-yarn.lock
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,10 +1,10 @@
-{
-	"useTabs": false,
-	"tabWidth": 4,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
-}
+{
+	"useTabs": false,
+	"tabWidth": 4,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}
--- a/README.md
+++ b/README.md
@@ -1,52 +1,56 @@
-## Welcome
-
-This site contains information relating to my personal situation, however, you are able to clone this project and change the `me.json` file to update this as required.
-
-## Screenshots
-
-<p align="center">
-  <img src="assets/images/main_page.png" width="40%">
-  <img src="assets/images/light_mode.png" width="40%">
-</p>
-
-<p align="center">
-  <img src="assets/images/skills.png" width="30%">
-  <img src="assets/images/repos.png" width="30%">
-  <img src="assets/images/contact.png" width="30%">
-</p>
-
-<p align="center">
-  <img src="assets/images/experience.png" width="30%">
-</p>
-
-## Getting Started
-
-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
-
-To create a production version of the app:
-
-```bash
-npm run build
-
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. In this case, vite is used.
+## Welcome
+
+This site contains information relating to my personal situation, however, you are able to clone this project and change the `me.json` file to update this as required.
+
+## Screenshots
+
+<p align="center">
+  <img src="assets/images/main.png" width="40%">
+  <img src="assets/images/light_mode.png" width="40%">
+</p>
+
+<p align="center">
+  <img src="assets/images/skills.png" width="30%">
+  <img src="assets/images/repos.png" width="30%">
+  <img src="assets/images/contact.png" width="30%">
+</p>
+
+<p align="center">
+  <img src="assets/images/experience.png" width="30%">
+</p>
+
+## Getting Started
+
+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
+
+To create a production version of the app:
+
+```bash
+npm run build
+
+
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. In this case, vite is used.
--- 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/41
+++ b/41
@@ -1,20 +1,21 @@
-FROM node:lts-slim as build
-
-WORKDIR /app
-
-COPY package*.json ./
-RUN rm -rf node_modules
-RUN rm -rf build
-COPY . .
-RUN npm install
-RUN npm run build
-
-FROM node:lts-slim as run
-
-WORKDIR /app
-COPY --from=build /app/package.json ./package.json
-COPY --from=build /app/build ./build
-RUN npm install --omit=dev
-
-EXPOSE 3000
-ENTRYPOINT [ "npm", "run", "start" ]
+FROM git.luke-else.co.uk/luke-else/nodejs:latest AS build
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN rm -rf node_modules
+RUN rm -rf build
+COPY . .
+RUN pnpm install
+RUN pnpm run build
+
+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 pnpm install --prod
+
+EXPOSE 3000
+ENTRYPOINT [ "pnpm", "run", "start" ]
--- a/package.json
+++ b/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"
 	}
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app.css
+++ b/src/app.css
@@ -1 +1 @@
-@import "tailwindcss"
+@import "tailwindcss";
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,12 +1,12 @@
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface Platform {}
-	}
-}
-
-export {};
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};
--- a/src/app.html
+++ b/src/app.html
@@ -1,31 +1,31 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="utf-8" />
-        <meta
-            name="description"
-            content="Luke Else - Software Developer at Thales UK. I specialise in developing distributed systems in C++ using highly scalable internal frameworks. I also develop backend and system applications in my spare time using both Svelte, Rust and C++. Feel free to check my work out at https://git.luke-else.co.uk."
-        />
-        <meta name="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%
-
-        <style></style>
-    </head>
-
-    <body data-sveltekit-preload-data="hover">
-        <div style="display: contents">%sveltekit.body%</div>
-    </body>
-</html>
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta
+            name="description"
+            content="Luke Else - Software Developer at Thales UK. I specialise in developing distributed systems in C++ using highly scalable internal frameworks. I also develop backend and system applications in my spare time using both Svelte, Rust and C++. Feel free to check my work out at https://git.luke-else.co.uk."
+        />
+        <meta name="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%
+
+        <style></style>
+    </head>
+
+    <body data-sveltekit-preload-data="hover">
+        <div style="display: contents">%sveltekit.body%</div>
+    </body>
+</html>
--- a/src/lib/api/git.ts
+++ b/src/lib/api/git.ts
@@ -1,67 +1,67 @@
-import type { GitRepo } from "../types";
-
-const API_BASE_URL = "https://git.luke-else.co.uk/api/v1";
-export const IMAGE_URL_SUFFIX = "/raw/branch/main/assets/images/main.png";
-
-
-export async function fetchRepos(): Promise<GitRepo[]> {
-    try {
-        console.log("Fetching repos...");
-        const response = await fetch(`${API_BASE_URL}/repos/search?sort=updated&order=desc&limit=12`, {
-            headers: {
-                // "Authorization": `token ${ACCESS_TOKEN}`,
-                "Content-Type": "application/json"
-            }
-        });
-
-        if (!response.ok) {
-            throw new Error(`Error: ${response.statusText}`);
-        }
-
-        const data: { data: GitRepo[] } = await response.json();
-        return data.data; // Extract the list of repositories
-    } catch (error) {
-        console.error("Failed to fetch repos:", error);
-        return [];
-    }
-}
-
-export function timeSince(inputDate: Date | string): string {
-    const date = new Date(inputDate); // Ensure it's a Date object
-    if (isNaN(date.getTime())) {
-        throw new Error("Invalid date provided");
-    }
-
-    const now: Date = new Date();
-    const diffInMs: number = now.getTime() - date.getTime();
-    const diffInSeconds: number = Math.floor(diffInMs / 1000);
-    const diffInMinutes: number = Math.floor(diffInSeconds / 60);
-    const diffInHours: number = Math.floor(diffInMinutes / 60);
-    const diffInDays: number = Math.floor(diffInHours / 24);
-    const diffInMonths: number = Math.floor(diffInDays / 30); // Approximate
-    const diffInYears: number = Math.floor(diffInDays / 365); // Approximate
-
-    if (diffInDays === 0) return "Today";
-    if (diffInDays === 1) return "Yesterday";
-    if (diffInDays < 7) return `${diffInDays} days ago`;
-    if (diffInDays < 30) return `${Math.floor(diffInDays / 7)} week${diffInDays >= 14 ? 's' : ''} ago`;
-    if (diffInMonths < 12) return `${diffInMonths} month${diffInMonths > 1 ? 's' : ''} ago`;
-    return `${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
-}
-
-export async function checkImage(repo: GitRepo): Promise<boolean> {
-    try {
-        const URL = repo.html_url + IMAGE_URL_SUFFIX;
-        console.log("Checking image:", URL);
-        const response = await fetch(URL);
-        if (response.ok) {
-            console.log("Image found!");
-            return true;
-        } else {
-            console.log("Image not found!");
-            return false;
-        }
-    } catch (error) {
-        return false;
-    }
+import type { GitRepo } from "../types";
+
+const API_BASE_URL = "https://git.luke-else.co.uk/api/v1";
+export const IMAGE_URL_SUFFIX = "/raw/branch/main/assets/images/main.png";
+
+
+export async function fetchRepos(): Promise<GitRepo[]> {
+    try {
+        console.log("Fetching repos...");
+        const response = await fetch(`${API_BASE_URL}/repos/search?sort=updated&order=desc&limit=12`, {
+            headers: {
+                // "Authorization": `token ${ACCESS_TOKEN}`,
+                "Content-Type": "application/json"
+            }
+        });
+
+        if (!response.ok) {
+            throw new Error(`Error: ${response.statusText}`);
+        }
+
+        const data: { data: GitRepo[] } = await response.json();
+        return data.data; // Extract the list of repositories
+    } catch (error) {
+        console.error("Failed to fetch repos:", error);
+        return [];
+    }
+}
+
+export function timeSince(inputDate: Date | string): string {
+    const date = new Date(inputDate); // Ensure it's a Date object
+    if (isNaN(date.getTime())) {
+        throw new Error("Invalid date provided");
+    }
+
+    const now: Date = new Date();
+    const diffInMs: number = now.getTime() - date.getTime();
+    const diffInSeconds: number = Math.floor(diffInMs / 1000);
+    const diffInMinutes: number = Math.floor(diffInSeconds / 60);
+    const diffInHours: number = Math.floor(diffInMinutes / 60);
+    const diffInDays: number = Math.floor(diffInHours / 24);
+    const diffInMonths: number = Math.floor(diffInDays / 30); // Approximate
+    const diffInYears: number = Math.floor(diffInDays / 365); // Approximate
+
+    if (diffInDays === 0) return "Today";
+    if (diffInDays === 1) return "Yesterday";
+    if (diffInDays < 7) return `${diffInDays} days ago`;
+    if (diffInDays < 30) return `${Math.floor(diffInDays / 7)} week${diffInDays >= 14 ? 's' : ''} ago`;
+    if (diffInMonths < 12) return `${diffInMonths} month${diffInMonths > 1 ? 's' : ''} ago`;
+    return `${diffInYears} year${diffInYears > 1 ? 's' : ''} ago`;
+}
+
+export async function checkImage(repo: GitRepo): Promise<boolean> {
+    try {
+        const URL = repo.html_url + IMAGE_URL_SUFFIX;
+        console.log("Checking image:", URL);
+        const response = await fetch(URL);
+        if (response.ok) {
+            console.log("Image found!");
+            return true;
+        } else {
+            console.log("Image not found!");
+            return false;
+        }
+    } catch (error) {
+        return false;
+    }
 }
--- a/src/lib/components/Cards/Card.svelte
+++ b/src/lib/components/Cards/Card.svelte
@@ -1,23 +0,0 @@
-<script lang="ts">
-    // 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="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>
-</div>
--- a/src/lib/components/Collapsible.svelte
+++ b/src/lib/components/Collapsible.svelte
@@ -1,33 +0,0 @@
-<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
@@ -1,7 +0,0 @@
-<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
@@ -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 gray;
-    }
-
-    .inner.two {
-        right: 0%;
-        top: 0%;
-        animation: rotate-two 1s linear infinite;
-        border-right: 3px solid gray;
-    }
-
-    .inner.three {
-        right: 0%;
-        bottom: 0%;
-        animation: rotate-three 1s linear infinite;
-        border-top: 3px solid gray;
-    }
-
-    @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>
--- a/src/lib/components/Section.svelte
+++ b/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>
--- a/src/lib/components/SkillProgress.svelte
+++ b/src/lib/components/SkillProgress.svelte
@@ -1,17 +0,0 @@
-<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
@@ -1,29 +0,0 @@
-<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">{entry.description}</span>
-        </Collapsible>
-      </div>
-    {/each}
-  </div>
-</div>
--- a/src/lib/data.ts
+++ b/src/lib/data.ts
@@ -1,5 +1,5 @@
-export async function getJson(path: string) {
-    let response = await fetch(path);
-    let users = await response.json();
-    return users;
+export async function getJson(path: string) {
+    let response = await fetch(path);
+    let users = await response.json();
+    return users;
 }
--- a/src/lib/index.ts
+++ b/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 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 { Card, GridGallery, Loading, Section, SkillProgress, Timeline };
+// place files you want to import through the `$lib` alias in this folder.
--- a/src/lib/stores.ts
+++ b/src/lib/stores.ts
@@ -1,12 +1,12 @@
-import { writable } from "svelte/store";
-import type { GitRepo } from "./types";
-import { fetchRepos } from "./api/git";
-
-////////////////////////////////////////
-// Git Repo Stores
-////////////////////////////////////////
-export const repos = writable<GitRepo[]>([]);
-
-export async function loadRepos() {
-    repos.set(await fetchRepos());
+import { writable } from "svelte/store";
+import type { GitRepo } from "./types";
+import { fetchRepos } from "./api/git";
+
+////////////////////////////////////////
+// Git Repo Stores
+////////////////////////////////////////
+export const repos = writable<GitRepo[]>([]);
+
+export async function loadRepos() {
+    repos.set(await fetchRepos());
 }
--- a/src/lib/types.d.ts
+++ b/src/lib/types.d.ts
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -1,22 +1,22 @@
-export type TimelinePosition = 'right' | 'left' | 'alternate';
-
-export type ParentPosition = 'right' | 'left';
-
-export type TimelineConfig = {
-    rootPosition: TimelinePosition;
-};
-
-export interface GitRepo {
-    name: string;
-    description: string;
-    language: string;
-    size: number;
-    updated_at: Date;
-    html_url: string;
-    private: boolean;
-    fork: boolean;
-    owner: {
-        login: string;
-        avatar_url: string;
-    };
-}
+export type TimelinePosition = 'right' | 'left' | 'alternate';
+
+export type ParentPosition = 'right' | 'left';
+
+export type TimelineConfig = {
+    rootPosition: TimelinePosition;
+};
+
+export interface GitRepo {
+    name: string;
+    description: string;
+    language: string;
+    size: number;
+    updated_at: Date;
+    html_url: string;
+    private: boolean;
+    fork: boolean;
+    owner: {
+        login: string;
+        avatar_url: string;
+    };
+}
--- a/src/main.svelte
+++ b/src/main.svelte
@@ -1,76 +1,86 @@
-<script lang="ts">
-    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 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')}
-    <Loading />
-{:then info}
-    <div style="display: none;">
-        {toasts.add({
-            title: 'Welcome',
-            duration: 5000,
-            type: 'success',
-            placement: 'bottom-center',
-            showProgress: true
-        })}
-    </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>{@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>
-                    <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({
-            title: 'Error',
-            description: 'There was an error loading static site data',
-            duration: 0,
-            placement: 'bottom-center',
-            showProgress: true
-        })}
-    </div>
-{/await}
+<script lang="ts">
+    import { getJson } from '$lib/data';
+    import { toasts } from 'svelte-toasts';
+
+    import {
+        Loading,
+        Section,
+        Card,
+        GridGallery,
+        SkillProgress,
+        Timeline,
+        Collapsible
+    } from '@luke-else/component-lib';
+</script>
+
+{#await getJson('/json/me.json')}
+    <Loading />
+{:then info}
+    <div style="display: none;">
+        {toasts.add({
+            title: 'Welcome',
+            duration: 5000,
+            type: 'success',
+            placement: 'bottom-center',
+            showProgress: true
+        })}
+    </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>
+
+    <!-- Experience -->
+    <Section label="[Experience]">
+        <Timeline timelineData={info.timeline} />
+    </Section>
+{:catch}
+    <div style="display: none;">
+        {toasts.add({
+            title: 'Error',
+            description: 'There was an error loading static site data',
+            duration: 0,
+            placement: 'bottom-center',
+            showProgress: true
+        })}
+    </div>
+{/await}
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,23 +1,28 @@
-<script lang="ts">
-    import { ToastContainer, FlatToast } from 'svelte-toasts';
-    import '../app.css';
-</script>
-
-<div
-    class="min-h-screen px-8 py-4 bg-white text-slate-600 dark:bg-slate-900/90 dark:text-slate-200/60 md:text-2xl sm:text-md font-mono flex flex-col gap-5 transition duration-1000 ease-in-out"
->
-    <nav
-        class="w-full px-8 py-4 flex gap-10 text-xl justify-center items-center text-green-600 font-semibold"
-    >
-        <a href="/" class="hover:underline">//Profile</a>
-        <a href="/repos" class="hover:underline">//Repos</a>
-        <a href="/contact" class="hover:underline">//Contact</a>
-    </nav>
-
-    <div class="container mx-auto justify-center items-center flex flex-col">
-        <slot />
-        <ToastContainer let:data>
-            <FlatToast {data} />
-        </ToastContainer>
-    </div>
-</div>
+<script lang="ts">
+    import '../app.css';
+    import { ToastContainer, FlatToast } from 'svelte-toasts';
+    import { PageIcon } from '@luke-else/component-lib';
+</script>
+
+<div
+    class="min-h-screen px-8 py-4 bg-white text-slate-600 dark:bg-slate-900/90 dark:text-slate-200/60 md:text-2xl sm:text-md font-mono flex flex-col gap-5 transition duration-1000 ease-in-out"
+>
+    <nav
+        class="w-full px-8 py-4 flex gap-10 text-xl justify-center items-center text-green-600 font-semibold"
+    >
+        <a href="/" class="hover:underline">//Profile</a>
+        <a href="/repos" class="hover:underline">//Repos</a>
+        <a href="/contact" class="hover:underline">//Contact</a>
+    </nav>
+
+    <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>
+            <FlatToast {data} />
+        </ToastContainer>
+    </div>
+</div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
-<script>
-    import Main from '../main.svelte';
-</script>
-
-<div>
-    <Main></Main>
+<script>
+    import Main from '../main.svelte';
+</script>
+
+<div>
+    <Main></Main>
 </div>
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,98 +1,103 @@
-<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>
-
-<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>
+<script lang="ts">
+    import { toasts } from 'svelte-toasts';
+    import { Card, Section } from '@luke-else/component-lib';
+
+    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>
+
+<Section label="[Contact]">
+    <div>
+        
+    </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-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>
+                <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>
+</Section>
--- a/src/routes/repos/+page.svelte
+++ b/src/routes/repos/+page.svelte
@@ -1,71 +1,73 @@
-<script lang="ts">
-    import { loadRepos, repos } from '$lib/stores';
-    import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
-    import { toasts } from 'svelte-toasts';
-
-    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>
-
-{#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}
+<script lang="ts">
+    import { loadRepos, repos } from '$lib/stores';
+    import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
+    import { toasts } from 'svelte-toasts';
+
+    import { GridGallery, Card, Loading, Section, Collapsible } from '@luke-else/component-lib';
+
+    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>
+<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>
+            <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>
--- a/static/json/me.json
+++ b/static/json/me.json
@@ -1,79 +1,132 @@
-{
-  "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": [
-    {
-      "name": "Rust",
-      "logo": "devicon-rust-plain",
-      "colour": "bg-orange-400",
-      "link": "https://rust-lang.org",
-      "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/",
-      "about": "C++ offers high-level abstractions with low-level control, making it essential for performance-critical applications.",
-      "competency": 80
-    },
-    {
-      "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": "Git",
-      "logo": "devicon-git-plain",
-      "colour": "bg-red-400",
-      "link": "https://git-scm.com",
-      "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",
-      "about": "Docker simplifies deployment by packaging applications in lightweight containers, ensuring consistency across environments.",
-      "competency": 100
-    },
-    {
-      "name": "Svelte",
-      "logo": "devicon-svelte-plain",
-      "colour": "bg-orange-400",
-      "link": "https://svelte.dev",
-      "about": "Svelte compiles to optimized JavaScript, offering a fast, efficient, and maintainable front-end development experience.",
-      "competency": 55
-    }
-  ],
-  "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" : "September 2022 - Present",
-      "title" : "University of Warwick - Digital and Technology Solutions",
-      "description" : "The apprenticeship includes allocated time for studying a Digital and Thechnology Solutions degree with the University of Warwick, including modules relevant to business management, devlopment processes and data integrity etc..."
-    },
-    {
-      "duration" : "September 2020 - July 2022",
-      "title" : "The Norton Knatchbull School (A-Levels)",
-      "description" : "Computer Science (<b>A*</b>) <br /> Mathematics (<b>A</b>) <br /> Physics (<b>A</b>)"
-    },
-    {
-      "duration" : "September 2015 - July 2020",
-      "title" : "The Norton Knatchbull School (GCSEs)",
-      "description" : "Computer Science (<b>9</b>) <br /> Physics (<b>9</b>) <br /> Chemistry (<b>9</b>) <br /> Biology (<b>9</b>) <br /> Geography (<b>9</b>) <br /> FSMQ (C) <br /> Maths (8) <br /> Spanish (7) <br /> English (Literature & Language) (7, 7) <br />"
-    }
-  ]
+{
+  "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": [
+    {
+      "name": "Rust",
+      "logo": "devicon-rust-plain",
+      "colour": "bg-orange-400",
+      "link": "https://rust-lang.org",
+      "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/",
+      "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",
+      "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",
+      "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",
+      "about": "Svelte compiles to optimized JavaScript, offering a fast, efficient, and maintainable front-end development experience.",
+      "competency": 55
+    }
+  ],
+  "timeline" : [
+    {
+      "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",
+      "title" : "University of Warwick - Digital and Technology Solutions",
+      "description" : "The apprenticeship includes allocated time for studying a Digital and Thechnology Solutions degree with the University of Warwick, including modules relevant to business management, devlopment processes and data integrity etc..."
+    },
+    {
+      "duration" : "September 2020 - July 2022",
+      "title" : "The Norton Knatchbull School (A-Levels)",
+      "description" : "Computer Science (<b>A*</b>) <br /> Mathematics (<b>A</b>) <br /> Physics (<b>A</b>)"
+    },
+    {
+      "duration" : "September 2015 - July 2020",
+      "title" : "The Norton Knatchbull School (GCSEs)",
+      "description" : "Computer Science (<b>9</b>) <br /> Physics (<b>9</b>) <br /> Chemistry (<b>9</b>) <br /> Biology (<b>9</b>) <br /> Geography (<b>9</b>) <br /> FSMQ (C) <br /> Maths (8) <br /> Spanish (7) <br /> English (Literature & Language) (7, 7) <br />"
+    }
+  ]
 }
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -1,10 +1,10 @@
-// import adapter from '@sveltejs/adapter-auto';
-import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
-const config = {
-	preprocess: vitePreprocess(),
-	kit: { adapter: adapter() }
-};
-
-export default config;
+// import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+const config = {
+	preprocess: vitePreprocess(),
+	kit: { adapter: adapter() }
+};
+
+export default config;
--- a/tailwind.config.js
+++ b/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',
-      }
-    }
-  }
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,18 +1,18 @@
-{
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler"
-	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
-}
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,10 +1,10 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-import tailwindcss from '@tailwindcss/vite';
-
-export default defineConfig({
-	plugins: [
-		tailwindcss(),
-		sveltekit(),
-	]
-});
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+	plugins: [
+		tailwindcss(),
+		sveltekit(),
+	]
+});
Author	SHA1	Message	Date
Luke Else	38edb64728	feat: Updated devcontainer All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m4s Details	2025-10-21 22:44:32 +01:00
Luke Else	1070662164	Merge pull request 'feature/devcontainer' (#55 ) from feature/devcontainer into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 1m4s Details Build and Push Development Docker Image / build-and-push (push) Successful in 17s Details Reviewed-on: #55	2025-09-26 09:18:23 +00:00
Luke Else	9a36a46ad1	chore: Removed run command from devcontainer	2025-09-25 23:34:11 +01:00
Luke Else	558bca7f56	fix: Linting	2025-09-25 23:29:30 +01:00
Luke Else	bc7099d627	chore: Updated comments	2025-09-25 23:13:39 +01:00
Luke Else	f71b054ae5	feat: Added dev-container	2025-09-25 22:03:37 +01:00
Luke Else	0e09633e83	Merge pull request 'development' (#54 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 17s Details Reviewed-on: #54	2025-09-18 20:04:15 +00:00
Luke Else	a83022c46e	fix: Updated to use latest version of component lib and fixed overflow issue on repos page All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 58s Details	2025-09-18 20:58:59 +01:00
Luke Else	b1944e64d9	fix: Cleaned up pages All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m6s Details	2025-09-18 19:40:58 +01:00
Luke Else	188f4616ea	fix: Add required .npmrc into dockerfile All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m1s Details	2025-09-16 11:44:35 +01:00
Luke Else	de33ca3814	Merge pull request 'feat: Implemented use of new component lib' (#52 ) from feat/component-lib into development Some checks failed Build and Push Development Docker Image / build-and-push (push) Failing after 44s Details Reviewed-on: #52	2025-09-16 10:41:07 +00:00
Luke Else	e9143bfdf4	feat: Implemented use of new component lib	2025-09-16 11:40:16 +01:00
Luke Else	87ff7e5dbd	feat: Added floating git icon to page All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m1s Details	2025-09-11 00:58:52 +01:00
Luke Else	8aea5bc94f	Merge pull request 'development' (#51 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 1m1s Details Reviewed-on: #51	2025-09-10 23:12:02 +00:00
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	6721dc5eef	Merge pull request 'development' (#47 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 26s Details Reviewed-on: #47	2025-05-30 20:06:18 +00:00
Luke Else	6c5d16ef7a	Merge pull request 'CHORE: Added additional skills and ehanced the way that links are displayed in raw html containers' (#46 ) from feature/recent-experience into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m19s Details Reviewed-on: #46	2025-05-30 20:00:27 +00:00
Luke Else	03b95a6c8c	CHORE: Added additional skills and ehanced the way that links are displayed in raw html containers	2025-05-30 18:26:06 +01:00
Luke Else	962e3614e3	Merge pull request 'CHORE: Updated latest experience for the site' (#45 ) from feature/recent-experience into development All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m25s Details Reviewed-on: #45	2025-05-30 15:44:45 +00:00
Luke Else	63c84e1430	CHORE: Updated latest experience for the site	2025-05-30 16:43:00 +01:00
Luke Else	3b2a8a6611	Merge pull request 'development' (#44 ) from development into main All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 27s Details Reviewed-on: #44	2025-05-27 21:24:09 +00:00
Luke Else	9028175ae4	FEAT: Added icons back into the skills section All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 1m19s Details	2025-05-27 22:00:53 +01:00
Luke Else	280c8e15ad	CHORE: corrected indentation All checks were successful Build and Push Development Docker Image / build-and-push (push) Successful in 38s Details	2025-05-27 00:41:59 +01:00
Luke Else	e081a0cb3e	HOTFIX: Corrected display of timeline description All checks were successful Build and Push Latest Docker Image / build-and-push (push) Successful in 1m24s Details Build and Push Development Docker Image / build-and-push (push) Successful in 26s Details	2025-05-27 00:35:18 +01:00