.npmrc

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

package.json

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

src/lib/components/Cards/Card.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-    // Allows additional styling to be applied to the Card component's outer wrapping
-    export let containerStyle: string = "";
-</script>
-
-<div class={containerStyle}>
-    <div class="bg-slate-100/10 dark:bg-slate-100/10 rounded-2xl shadow-2xl p-6 flex flex-col h-full w-full">
-        <div class="text-red-400 font-bold flex flex-row justify-between items-center mb-4">
-            <slot name="headerLeft" class="text-2xl md:text-3xl truncate"></slot>
-            <slot name="headerRight" class="max-md:hidden text-xl md:text-2xl truncate"></slot>
-        </div>
-        <hr class="border-1" />
-        <div class="flex-1 flex flex-col justify-center mt-4 mb-8">
-            <slot name="content"/>
-        </div>
-        
-        <hr class="border-1" />
-        <div class="flex flex-row justify-between items-center mt-4 text-base opacity-90">
-            <slot name="footerLeft"/>
-            <slot name="footerRight"/>
-        </div>
-    </div>
-</div>

src/lib/components/Collapsible.svelte

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

src/lib/components/GridGallery.svelte

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

src/lib/components/Loading.svelte

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

src/lib/components/PageIcon.svelte

@@ -1,9 +0,0 @@
-<script>
-  export let iconClass = 'devicon-htmx-plain';
-</script>
-
-<span
-  class="fixed lg:top-4 bottom-4 left-4 text-5xl z-[1000] text-grey"
->
-  <i class={iconClass}></i>
-</span>

src/lib/components/Section.svelte

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

src/lib/components/SkillProgress.svelte

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

src/lib/components/Timeline.svelte

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

src/main.svelte

@@ -2,13 +2,15 @@
     import { getJson } from '$lib/data';
     import { toasts } from 'svelte-toasts';
 
-    import Loading from '$lib/components/Loading.svelte';
+    import {
-    import Section from '$lib/components/Section.svelte';
+        Loading,
-    import Card from '$lib/components/Cards/Card.svelte';
+        Section,
-    import GridGallery from "$lib/components/GridGallery.svelte";
+        Card,
-    import SkillProgress from "$lib/components/SkillProgress.svelte";
+        GridGallery,
-    import Timeline from '$lib/components/Timeline.svelte';
+        SkillProgress,
-    import Collapsible from '$lib/components/Collapsible.svelte';
+        Timeline,
+        Collapsible
+    } from '@luke-else/component-lib';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -35,7 +37,11 @@
                     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>
+                <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>
@@ -45,7 +51,9 @@
     <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">
+                <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">
@@ -55,7 +63,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,7 @@
 <script lang="ts">
-    import { ToastContainer, FlatToast } from 'svelte-toasts';
     import '../app.css';
-    import PageIcon from '$lib/components/PageIcon.svelte';
+    import { ToastContainer, FlatToast } from 'svelte-toasts';
+    import { PageIcon } from '@luke-else/component-lib';
 </script>
 
 <div

src/routes/contact/+page.svelte

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

src/routes/repos/+page.svelte

@@ -3,9 +3,7 @@
     import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
     import { toasts } from 'svelte-toasts';
 
-    import GridGallery from '$lib/components/GridGallery.svelte';
+    import { GridGallery, Card, Loading, Section } from '@luke-else/component-lib';
-    import Card from '$lib/components/Cards/Card.svelte';
-    import Loading from '$lib/components/Loading.svelte';
 
     let repoImages: Record<string, string | null> = {};
 
@@ -21,10 +19,10 @@
         })();
     }
 </script>
-
+<Section label="[Repositories]">
-{#await loadRepos()}
+    {#await loadRepos()}
         <Loading />
-{:then _}
+    {:then _}
         {#if $repos.length == 0}
             {console.log('No Repos')}
             <div style="display: none;">
@@ -68,4 +66,5 @@
                 </Card>
             {/each}
         </GridGallery>
-{/await}
+    {/await}
+</Section>

tailwind.config.js

@@ -1,19 +0,0 @@
-module.exports = {
-  theme: {
-    extend: {
-      colors: {
-        'one-bg':      '#282c34',
-        'one-bg-light': '#3a3f4b',
-        'one-fg':      '#abb2bf',
-        'one-accent':  '#61afef',
-        'one-green':   '#98c379',
-        'one-orange':  '#d19a66',
-        'one-red':     '#e06c75',
-        'one-yellow':  '#e5c07b',
-        'one-purple':  '#c678dd',
-        'one-cyan':    '#56b6c2',
-        'one-comment': '#5c6370',
-      }
-    }
-  }
-}