feat: Added svelte devcontainer

Reviewed-on: #57

.dockerignore

@@ -0,0 +1,19 @@
+# .dockerignore
+
+.vscode
+
+node_modules
+
+.git
+.gitattributes
+.gitea
+
+.eslintignore
+.eslintrc.cjs
+
+.prettierrc
+.pretieriignore
+
+README.md
+
+Dockerfile

.gitea/workflows/dev.yaml

@@ -0,0 +1,30 @@
+name: Build and Push Development Docker Image
+
+on:
+  push:
+    branches: [ development ]
+
+jobs:
+  build-and-push:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      
+      - name: Log in to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ secrets.CONTAINER_REGISTRY }}
+          username: ${{ secrets.CONTAINER_REGISTRY_USERNAME }}
+          password: ${{ secrets.CONTAINER_REGISTRY_PASSKEY }}
+      
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+      
+      - name: Build and Tag Docker Image
+        run: |
+          docker build -t ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev .
+      
+      - name: Push Docker Image
+        run: |
+          docker push ${{ secrets.CONTAINER_REGISTRY }}/${{ secrets.CONTAINER_REGISTRY_USERNAME }}/luke-else.co.uk:dev

.gitea/workflows/main.yaml

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

.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+.pnpm-store
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vscode

.gitmodules

@@ -0,0 +1,4 @@
+[submodule ".devcontainer"]
+	path = .devcontainer
+	url = ssh://git@git.luke-else.co.uk:222/luke-else/.devcontainer
+	branch = svelte

.npmrc

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

.prettierignore

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

.prettierrc

@@ -0,0 +1,10 @@
+{
+	"useTabs": false,
+	"tabWidth": 4,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

README.md

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

dockerfile

@@ -0,0 +1,21 @@
+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" ]

index.html

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-      <meta charset="UTF-8">
-      <title>Luke Else</title>
-      <link rel="stylesheet" href="./style.css" />
-  </head>
-
-  <script src="./js/flip.js"></script>
-  <script src="./js/age.js"></script>
-
-  <div class="card" id="card" onclick="flipCard()">
-    <div class="card-back" id="card-back">
-      <div class="line-numbers">
-        <div>1</div>
-        <div>2</div>
-        <div>3</div>
-        <div>4</div>
-        <div>5</div>
-        <div>6</div>
-        <div>7</div>
-        <div>8</div>
-        <div>9</div>
-      </div>
-      <code>
-        <span class="method">Person </span><span class="function">me </span><span class="operator">= </span><span class="variable">new </span><span class="method">Person</span> <br />
-        <span>{</span>
-          <div class="indent"> <span class="property">Name </span><span>= </span><span class="string">"Luke Else"</span><span>,</span></div>
-          <div class="indent"> <span class="property">Age </span><span>= </span><span class="int"><script>document.write(getAge(new Date("2004-01-12")))</script></span><span>,</span></div>
-          <div class="indent"> <span class="property">Title </span><span>= </span><span class="string">"Software Engineer / Student"</span><span>,</span></div>
-          <div class="indent"> <span class="property">EMail </span><span>= </span><a href="mailto:contact@luke-else.co.uk"><span class="string">"contact@luke-else.co.uk"</span></a><span>,</span></div>
-          <div class="indent"> <span class="property">Website </span><span>= </span><a href="https://git.luke-else.co.uk/luke-else"><span class="string">"git.luke-else.co.uk"</span></a></div>
-        <span>}</span
-      </code>
-    </div>
-    <div class="card-front" id="card-front">
-      <div class="line-numbers">
-        <div>1</div>
-        <div>2</div>
-        <div>3</div>
-        <div>4</div>
-        <div>5</div>
-        <div>6</div>
-        <div>7</div>
-        <div>8</div>
-        <div>9</div>
-      </div>
-      <code>
-        <span class="variable">internal class </span><span class="method">Person</span> <br />
-        <span>{ </span><span class="comment">//Hover to flip</span>
-          <div class="indent"><span class="variable">public string</span> <span class="property">Name </span><span>{ </span><span class="boolean">get</span><span>; </span><span class="boolean">init</span><span>;</span><span> }</span></div>
-          <div class="indent"><span class="variable">internal int</span> <span class="property">Age </span><span>{ </span><span class="boolean">get</span><span>; </span><span class="boolean">set</span><span>;</span><span> }</span></div>
-          <div class="indent"><span class="variable">internal string</span> <span class="property">Title </span><span>{ </span><span class="boolean">get</span><span>; </span><span class="boolean">set</span><span>;</span><span> }</span></div>
-          <div class="indent"><span class="variable">public string</span> <span class="property">EMail </span><span>{ </span><span class="boolean">get</span><span>; </span><span class="boolean">set</span><span>;</span><span> }</span></div>
-          <div class="indent"><span class="variable">public string</span> <span class="property">Website </span><span>{ </span><span class="boolean">get</span><span>; </span><span class="boolean">set</span><span>;</span><span> }</span></div>
-        <span>}</span>
-      </code>
-    </div>
-  </div>
-</html>

js/age.js

@@ -1,10 +0,0 @@
-function getAge(dateString) {
-    var today = new Date();
-    var birthDate = dateString;
-    var age = today.getFullYear() - birthDate.getFullYear();
-    var m = today.getMonth() - birthDate.getMonth();
-    if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
-        age--;
-    }
-    return age;
-}

js/flip.js

@@ -1,14 +0,0 @@
-var flipped = false;
-
-function flipCard() {
-
-    if (!flipped) {
-        document.getElementById('card-front').style.transform = 'rotateX(-180deg)';
-        document.getElementById('card-back').style.transform = 'rotateX(0deg)';
-        flipped = true;
-    }else{
-        document.getElementById('card-front').style.transform = 'rotateX(0deg)';
-        document.getElementById('card-back').style.transform = 'rotateX(-180deg)';
-        flipped = false;
-    }
-}

package.json

@@ -0,0 +1,36 @@
+{
+	"name": "luke-else.co.uk",
+	"version": "0.0.1",
+	"private": true,
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"start": "export PORT=3000 && node ./build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@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.1.1",
+		"prettier": "3.5.3",
+		"prettier-plugin-svelte": "3.3.3",
+		"svelte": "5.28.2",
+		"svelte-check": "4.1.7",
+		"tslib": "2.8.1",
+		"typescript": "5.8.3",
+		"vite": "6.3.5"
+	},
+	"type": "module",
+	"dependencies": {
+		"@luke-else/component-lib": "^1.1.5",
+		"@tailwindcss/vite": "^4.1.13",
+		"svelte-toasts": "^1.1.2",
+		"tailwindcss": "^4.1.13"
+	}
+}

src/app.css

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

src/app.d.ts

@@ -0,0 +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 {};

src/app.html

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

src/lib/api/git.ts

@@ -0,0 +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;
+    }
+}

src/lib/data.ts

@@ -0,0 +1,5 @@
+export async function getJson(path: string) {
+    let response = await fetch(path);
+    let users = await response.json();
+    return users;
+}

src/lib/index.ts

@@ -0,0 +1 @@
+// place files you want to import through the `$lib` alias in this folder.

src/lib/stores.ts

@@ -0,0 +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());
+}

src/lib/types.ts

@@ -0,0 +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;
+    };
+}

src/main.svelte

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

src/routes/+layout.svelte

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

src/routes/+page.svelte

@@ -0,0 +1,7 @@
+<script>
+    import Main from '../main.svelte';
+</script>
+
+<div>
+    <Main></Main>
+</div>

src/routes/contact/+page.svelte

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

src/routes/repos/+page.svelte

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

static/json/me.json

@@ -0,0 +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" : "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 />"
+    }
+  ]
+}

style.css

@@ -1,155 +0,0 @@
-*, *:before, *:after {
-    box-sizing: border-box;
-    outline: none;
-  }
-  
-  html {
-    font-family: "Source Sans Pro", sans-serif;
-    font-size: 16px;
-    font-smooth: auto;
-    font-weight: 300;
-    line-height: 1.5;
-    color: #444;
-  }
-  
-  body {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    /* width: 99%; */
-    height: 98vh;
-    background: linear-gradient(45deg, #372c75, #5e5e5e);
-  }
-  
-  code, .card .line-numbers {
-    font-family: "Lucida Console", Monaco, monospace;
-    font-size: 14px;
-  }
-  
-  .card {
-    position: relative;
-    width: 30rem;
-    height: 15rem;
-    perspective: 150rem;
-  }
-  .card-front, .card-back {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin: auto;
-    border-radius: 5px;
-    box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
-    transition: 0.9s cubic-bezier(0.25, 0.8, 0.25, 1);
-    backface-visibility: hidden;
-    overflow: hidden;
-  }
-  .card-front:before, .card-front:after, .card-back:before, .card-back:after {
-    position: absolute;
-  }
-  .card-front:before, .card-back:before {
-    top: -40px;
-    right: -40px;
-    content: "";
-    width: 80px;
-    height: 80px;
-    background-color: rgba(255, 255, 255, 0.08);
-    transform: rotate(45deg);
-    z-index: 1;
-  }
-  .card-front:after, .card-back:after {
-    content: "+";
-    top: 0;
-    right: 10px;
-    font-size: 24px;
-    transform: rotate(45deg);
-    z-index: 2;
-  }
-  .card-front {
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(45deg, #101010, #2c3e50);
-  }
-  .card-front:after {
-    color: #212f3c;
-  }
-  .card-back {
-    background: linear-gradient(-45deg, #101010, #2c3e50);
-    transform: rotateX(180deg);
-  }
-  .card-back:after {
-    color: #11181f;
-  }
-  
-  .card:hover .card-front{
-    transform: rotateX(-180deg);
-  }
-  .card:hover .card-back{
-    transform: rotateX(0deg);
-  }
-
-  .card .line-numbers {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-    margin: 0;
-    padding: 0 10px;
-    background-color: rgba(255, 255, 255, 0.03);
-    font-size: 13px;
-  }
-  .card .line-numbers > div {
-    padding: 2.5px 0;
-    opacity: 0.15;
-  }
-  .card code, .card .line-numbers {
-    color: whitesmoke;
-  }
-  .card .indent {
-    padding-left: 30px;
-  }
-  .card .operator {
-    color: #4dd0e1;
-  }
-  .card .string {
-    color: #9ccc65;
-  }
-  .card .int {
-    color: #d4922f;
-  }
-  .card .variable {
-    color: #BA68C8;
-  }
-  .card .property {
-    color: #ef5350;
-  }
-  .card .method {
-    color: #29b6f6;
-  }
-  .card .function {
-    color: #FDD835;
-  }
-  .card .boolean {
-    color: #4dd0e1;
-  }
-  .card .comment {
-    color: #229977
-  }
-
-a:link { text-decoration: none; }
-
-
-a:visited { text-decoration: none; }
-
-
-a:hover { text-decoration: none; }
-
-
-a:active { text-decoration: none; }

svelte.config.js

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

tsconfig.json

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

vite.config.ts

@@ -0,0 +1,10 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+	plugins: [
+		tailwindcss(),
+		sveltekit(),
+	]
+});