fix: Changed readme to test gpg key

.gitea/workflows/test.yaml

@@ -0,0 +1,25 @@
+name: Run Unit and Integration Tests
+
+on:
+  push:
+    branches:
+      - '**'
+  pull_request:
+    branches:
+      - "main"
+      - "development"
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+      
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+      
+      - name: Install Dependencies
+        run: npm install
+      
+      - name: Run Tests
+        run: npm test

.npmrc

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

README.md

@@ -1,4 +1,4 @@
-## Welcome
+# 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.
 
@@ -26,6 +26,7 @@ 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:
@@ -33,12 +34,14 @@ Once you've created a project and installed dependencies with `npm install` (or
 ```bash
 npm run dev
 
+
 ```
 
 ```bash
 # or start the server and open the app in a new browser tab
 npm run dev -- --open
 
+
 ```
 
 ## Building
@@ -49,6 +52,7 @@ To create a production version of the app:
 npm run build
 
 
+
 ```
 
 You can preview the production build with `npm run preview`.

dockerfile

@@ -1,4 +1,4 @@
-FROM git.luke-else.co.uk/luke-else/nodejs:latest AS build
+FROM node:lts-slim as build
 
 WORKDIR /app
 
@@ -6,16 +6,15 @@ COPY package*.json ./
 RUN rm -rf node_modules
 RUN rm -rf build
 COPY . .
-RUN pnpm install
+RUN npm install
-RUN pnpm run build
+RUN npm run build
 
-FROM git.luke-else.co.uk/luke-else/nodejs:latest AS run
+FROM node:lts-slim 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
+RUN npm install --omit=dev
 
 EXPOSE 3000
-ENTRYPOINT [ "pnpm", "run", "start" ]
+ENTRYPOINT [ "npm", "run", "start" ]

package.json

@@ -5,6 +5,8 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"test": "vitest run",
+		"test:watch": "vitest",
 		"start": "export PORT=3000 && node ./build",
 		"preview": "vite preview",
 		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -13,24 +15,24 @@
 		"format": "prettier --plugin-search-dir . --write ."
 	},
 	"devDependencies": {
-		"@rollup/plugin-json": "^6.1.0",
+		"@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.1.1",
+		"@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"
+		"vite": "6.3.5",
+		"vitest": "^3.1.4"
 	},
 	"type": "module",
 	"dependencies": {
-		"@luke-else/component-lib": "^1.0.8",
+		"@tailwindcss/vite": "^4.1.6",
-		"@tailwindcss/vite": "^4.1.13",
 		"svelte-toasts": "^1.1.2",
-		"tailwindcss": "^4.1.13"
+		"tailwindcss": "^4.1.6"
 	}
 }

src/lib/api/git.ts

@@ -54,13 +54,7 @@ export async function checkImage(repo: GitRepo): Promise<boolean> {
         const URL = repo.html_url + IMAGE_URL_SUFFIX;
         console.log("Checking image:", URL);
         const response = await fetch(URL);
-        if (response.ok) {
+        return 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

@@ -1,4 +1,6 @@
-export async function getJson(path: string) {
+import type {ContentTemplate} from "$lib/types"
+
+export async function getJson(path: string): Promise<ContentTemplate> {
     let response = await fetch(path);
     let users = await response.json();
     return users;

src/lib/types.ts

@@ -1,10 +1,28 @@
-export type TimelinePosition = 'right' | 'left' | 'alternate';
+export interface ContentTemplate {
+    name: string;
+    job_title: string;
+    location: string;
+    profile_photo: string;
+    about: string;
 
-export type ParentPosition = 'right' | 'left';
+    skills: Skill[];
+    timeline: TimelineEvent[];
+}
 
-export type TimelineConfig = {
+export interface Skill {
-    rootPosition: TimelinePosition;
+    name: string;
-};
+    logo: string;
+    colour: string;
+    link: string;
+    about: string;
+    competency: number;
+}
+
+export interface TimelineEvent {
+    duration: string;
+    title: string;
+    description: string;
+}
 
 export interface GitRepo {
     name: string;

src/main.svelte

@@ -2,15 +2,13 @@
     import { getJson } from '$lib/data';
     import { toasts } from 'svelte-toasts';
 
-    import {
+    import Loading from '$lib/components/Loading.svelte';
-        Loading,
+    import Section from '$lib/components/Section.svelte';
-        Section,
+    import Card from '$lib/components/Cards/Card.svelte';
-        Card,
+    import GridGallery from "$lib/components/GridGallery.svelte";
-        GridGallery,
+    import SkillProgress from "$lib/components/SkillProgress.svelte";
-        SkillProgress,
+    import Timeline from '$lib/components/Timeline.svelte';
-        Timeline,
+    import Collapsible from '$lib/components/Collapsible.svelte';
-        Collapsible
-    } from '@luke-else/component-lib';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -37,11 +35,7 @@
                     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
+                <p class="[&>*]:underline [&>*]:decoration-2 [&>*]:decoration-transparent [&>*]:hover:decoration-inherit [&>*]:transition-all [&>*]:duration-300 [&>*]:text-green-600">{@html info.about}</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>
@@ -51,9 +45,7 @@
     <Section label="[Skills]">
         <GridGallery>
             {#each info.skills as skill}
-                <Card
+                <Card containerStyle="opacity-100 hover:opacity-100 hover:scale-[105%] md:opacity-70 transition-all duration-300">
-                    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">
@@ -63,7 +55,7 @@
                         </Collapsible>
                         <SkillProgress skillColour={skill.colour} value={skill.competency} />
                     </div>
-                    <h3 slot="footerLeft"><a href={skill.link} target="_blank">{skill.link}</a></h3>
+                    <h3 slot="footerLeft"><a href="{skill.link}" target="_blank">{skill.link}</a></h3>
                 </Card>
             {/each}
         </GridGallery>

src/routes/+layout.svelte

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

src/routes/contact/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { toasts } from 'svelte-toasts';
-    import { Card, Section } from '@luke-else/component-lib';
+    import Card from '$lib/components/Cards/Card.svelte';
 
     import { page } from '$app/state';
     const sent = page.url.searchParams.get('sent');
@@ -26,10 +26,6 @@
     }
 </script>
 
-<Section label="[Contact]">
-    <div>
-        
-    </div>
 <Card>
     <div slot="headerLeft">
         Contact Me
@@ -42,7 +38,7 @@
             <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 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
@@ -100,4 +96,3 @@
         </button>
     </form>
 </Card>
-</Section>

src/routes/repos/+page.svelte

@@ -3,7 +3,9 @@
     import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
     import { toasts } from 'svelte-toasts';
 
-    import { GridGallery, Card, Loading, Section } from '@luke-else/component-lib';
+    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> = {};
 
@@ -19,7 +21,7 @@
         })();
     }
 </script>
-<Section label="[Repositories]">
+
 {#await loadRepos()}
     <Loading />
 {:then _}
@@ -67,4 +69,3 @@
         {/each}
     </GridGallery>
 {/await}
-</Section>

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',
+      }
+    }
+  }
+}

tests/git.svelte.test.ts

@@ -0,0 +1,28 @@
+import { expect, test } from 'vitest';
+import { fetchRepos, timeSince, checkImage } from '$lib/api/git';
+
+test('Fetch Repos', async () => {
+    let repos = await fetchRepos();
+    expect(repos.length).toEqual(12);
+});
+
+test.each([
+    [new Date((Date.now() - 1000 * 60 * 60 * 24)), 'Yesterday'],
+    [new Date((Date.now() - 1000 * 60 * 60 * 24 * 2)), '2 days ago'],
+    [new Date((Date.now() - 1000 * 60 * 60 * 24 * 7)), '1 week ago'],
+    [new Date((Date.now() - 1000 * 60 * 60 * 24 * 7 * 2)), '2 weeks ago'],
+    [new Date((Date.now() - 1000 * 60 * 60 * 24 * 30)), '1 month ago'],
+    [new Date((Date.now() - 1000 * 60 * 60 * 24 * 365)), '1 year ago'],
+  ])('', (time, expected) => {
+    expect(timeSince(time)).toBe(expected)
+  })
+
+
+test('Check Image', async () => {
+    let repos = await fetchRepos();
+
+    for (let repo of repos) {
+        let image = await checkImage(repo);
+        expect(image).toBeDefined();
+    }
+});

vite.config.ts

@@ -3,8 +3,5 @@ import { defineConfig } from 'vite';
 import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
-	plugins: [
+    plugins: [tailwindcss(), sveltekit()],
-		tailwindcss(),
-		sveltekit(),
-	]
 });