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

Reviewed-on: #46

.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,11 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+.vscode

.npmrc

@@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest

.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,20 @@
+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" ]

package.json

@@ -0,0 +1,35 @@
+{
+	"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.0.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",
+		"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": {
+		"@tailwindcss/vite": "^4.1.6",
+		"svelte-toasts": "^1.1.2",
+		"tailwindcss": "^4.1.6"
+	}
+}

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/components/Cards/Card.svelte

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

src/lib/components/Collapsible.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    export let open = false;
+</script>
+
+<div class="w-full">
+    <button
+        type="button"
+        class="flex items-center justify-between w-full px-2 py-2 text-left rounded hover:font-bold transition group"
+        on:click={() => open = !open}
+        aria-expanded={open}
+    >
+        <span><slot name="label"/></span>
+        <svg
+            class="w-5 h-5 ml-2 transition-transform duration-200"
+            style="transform: rotate({open ? 90 : 0}deg)"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            viewBox="0 0 24 24"
+        >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+        </svg>
+    </button>
+    <div
+        class="overflow-hidden transition-all duration-300"
+        style="max-height: {open ? '1000px' : '0'}"
+        aria-hidden={!open}
+    >
+        <div class="pt-2">
+            <slot name="content"/>
+        </div>
+    </div>
+</div>

src/lib/components/GridGallery.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+</script>
+
+<!-- GridGallery.svelte -->
+<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full">
+    <slot />
+</div>

src/lib/components/Loading.svelte

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

src/lib/components/Section.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    export let label: string = "";
+</script>
+
+<div id={label} class="relative flex flex-row w-full min-h-[300px] mt-5 mb-25">
+    <!-- Sticky/Sliding Label -->
+    <div class="hidden md:flex flex-col items-center mr-6">
+        <div class="sticky top-24 left-0 z-10">
+            <span class="text-2xl font-bold text-blue-400 tracking-widest"
+                  style="writing-mode: vertical-rl; text-orientation: mixed;">
+                {label}
+            </span>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <div class="flex-1 flex flex-col">
+        <!-- Label for mobile -->
+        <div class="md:hidden mb-2">
+            <span class="text-2xl font-bold text-blue-400">{label}</span>
+        </div>
+        <hr class="border-blue-400 mb-6" />
+        <div>
+            <slot />
+        </div>
+    </div>
+</div>

src/lib/components/SkillProgress.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    export let value: number = 0; // 0 to 100
+    export let skillColour: string = 'bg-orange-400'; // Default color
+</script>
+
+<div class="w-full mt-3">
+    <div class="flex justify-between mb-1">
+        <span class="text-sm font-medium">Competency Level</span>
+        <span class="text-sm font-medium">{value}%</span>
+    </div>
+    <div class="w-full bg-gray-800 rounded-full h-5">
+        <div
+            class="{skillColour} h-5 rounded-full transition-all duration-500"
+            style="width: {value}%"
+        ></div>
+    </div>
+</div>

src/lib/components/Timeline.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import Collapsible from "./Collapsible.svelte";
+
+    export let timelineData: Array<{
+        title: string;
+        description: string;
+        duration: string;
+    }>;
+</script>
+
+<div class="flex flex-col items-center justify-center">
+  <div class="max-w-4xl w-full">
+    {#each timelineData as entry, i}
+      <div class="relative border-l border-gray-700 pl-8 pb-12">
+        {#if i == 0}
+          <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diams;</div>
+        {:else}
+          <div class="absolute top-0 left-[8px] text-green-400 w-4 h-4">&diam;</div>
+        {/if}
+        <p class="text-sm opacity-70">{entry.duration}</p>
+
+        <Collapsible open={i==0}>
+          <span slot="label" class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition">{entry.title}</span>
+          <span slot="content">{@html entry.description}</span>
+        </Collapsible>
+      </div>
+    {/each}
+  </div>
+</div>

src/lib/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,9 @@
+// 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 };

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,77 @@
+<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 class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600">{@html info.about}</p>
+            </div>
+            <h3 slot="footerLeft">{@html info.location}</h3>
+        </Card>
+    </Section>
+
+    <!-- SKills -->
+    <Section label="[Skills]">
+        <GridGallery>
+            {#each info.skills as skill}
+                <Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
+                    <h2 slot="headerLeft">{skill.name}</h2>
+                    <i slot="headerRight" class="text-slate-300 text-5xl {skill.logo}"></i>
+                    <div slot="content">
+                        <Collapsible>
+                            <span slot="label" class="text-lg">About {skill.name}</span>
+                            <span slot="content">{skill.about}</span>
+                        </Collapsible>
+                        <SkillProgress skillColour={skill.colour} value={skill.competency} />
+                    </div>
+                    <h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
+                </Card>
+            {/each}
+        </GridGallery>
+    </Section>
+
+    <Section label="[Experience]">
+        <Timeline timelineData={info.timeline} />
+    </Section>
+{:catch}
+    <div style="display: none;">
+        {toasts.add({
+            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,23 @@
+<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>

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,98 @@
+<script lang="ts">
+    import { toasts } from 'svelte-toasts';
+    import Card from '$lib/components/Cards/Card.svelte';
+
+    import { page } from '$app/state';
+    const sent = page.url.searchParams.get('sent');
+
+    if (sent == 'true') {
+        toasts.add({
+            title: 'Message sent!',
+            description: 'Thank you for contacting me.',
+            type: 'success',
+            duration: 4000,
+            placement: 'bottom-center'
+        });
+    }
+
+    if (sent == 'false') {
+        toasts.add({
+            title: 'Message not sent!',
+            description: 'Please try again later.',
+            type: 'error',
+            duration: 4000,
+            placement: 'bottom-center'
+        });
+    }
+</script>
+
+<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>

src/routes/repos/+page.svelte

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

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 />"
+    }
+  ]
+}

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;

tailwind.config.js

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

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