src/lib/components/Cards/SlidingCard.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+
+    const dispatch = createEventDispatcher();
+
+    function onClick() {
+        dispatch('click');
+    }
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+    class="sliding-card flex flex-col justify-between flex-wrap flex-[2_1_15em] p-2 bg-secondary rounded-lg snap-start transition-all duration-300 overflow-hidden relative hover:shadow-lg"
+    on:click={onClick}
+>
+    <div class="sliding-card-header w-full flex items-center justify-between mb-0">
+        <slot name="header"></slot>
+    </div>
+    <hr />
+
+    <!-- Wrapper to stack sliding-card-content and sliding-content -->
+    <div class="content-wrapper relative w-full overflow-hidden">
+        <div class="sliding-card-content flex flex-col items-center justify-center max-w-full flex-grow z-[1]">
+            <slot name="content"></slot>
+        </div>
+        <div
+            class="sliding-content absolute top-0 left-0 w-full h-full bg-secondary translate-y-full transition-transform duration-300 z-[2] pointer-events-none group-hover:translate-y-0 sliding-card:hover:translate-y-0"
+        >
+            <slot name="sliding-content"></slot>
+        </div>
+    </div>
+
+    <hr class="not-required" />
+    <div class="sliding-card-footer flex gap-4 max-w-full justify-between mb-4">
+        <slot name="footer"></slot>
+    </div>
+</div>

src/lib/components/SkillProgress.svelte

@@ -4,8 +4,7 @@
 
 <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 text-gray-400">{value}%</span>
-        <span class="text-sm font-medium">{value}%</span>
     </div>
     <div class="w-full bg-gray-800 rounded-full h-5">
         <div

src/lib/components/Timeline.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-    export let timelineData: Array<{
-        title: string;
-        description: string;
-        duration: string;
-    }>;
-
-    // Track open/closed state for each entry
-    let openStates = timelineData.map(() => false);
-
-    function toggle(index: number) {
-        openStates[index] = !openStates[index];
-    }
-
-    toggle(0); // Open the first entry by default
-</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 openStates[i]}
-        <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>
-        <button
-          class="text-2lg font-semibold text-red-400 mt-1 focus:outline-none hover:underline transition"
-          on:click={() => toggle(i)}
-          aria-expanded={openStates[i]}
-        >
-        <h3 class="text-2lg font-semibold text-red-400 mt-1">{entry.title}</h3>
-        </button>
-        {#if openStates[i]}
-          <p class="mt-2 whitespace-pre-line transition-all duration-300">{@html entry.description}</p>
-        {/if}
-      </div>
-    {/each}
-  </div>
-</div>

src/lib/components/timeline/Timeline.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { TimelinePosition, TimelineConfig } from '$lib/types';
+	export let position: TimelinePosition = 'right';
+	export let style: string | null = null;
+
+	setContext<TimelineConfig>('TimelineConfig', { rootPosition: position });
+</script>
+
+<ul class="timeline" {style}>
+	<slot />
+</ul>
+
+<style>
+	.timeline {
+		display: flex;
+		flex-direction: column;
+		padding: 6px 16px;
+		flex-grow: 1;
+	}
+</style>

src/lib/components/timeline/TimelineConnector.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	export let style: string = "";
+</script>
+
+<span class="timeline-connector" {style}></span>
+
+<style>
+	.timeline-connector {
+		width: 2px;
+		background-color: #bdbdbd;
+		flex-grow: 1;
+	}
+</style>

src/lib/components/timeline/TimelineContent.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { TimelineConfig, TimelinePosition } from '$lib/types';
+	export let style: string | null = null;
+
+	const config = getContext<TimelineConfig>('TimelineConfig');
+	const parentPosition = getContext<TimelinePosition>('ParentPosition');
+
+	const itemPosition = parentPosition ? parentPosition : config.rootPosition;
+</script>
+
+<div class={`timeline-content ${itemPosition}`} {style}>
+	<slot />
+</div>
+
+<style>
+	.timeline-content {
+		margin: 0;
+		flex: 1;
+		margin: 6px 16px;
+	}
+
+	.left {
+		text-align: right;
+	}
+
+	.right {
+		text-align: left;
+	}
+</style>

src/lib/components/timeline/TimelineDot.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let style: string | null = null;
+</script>
+
+<span class="timeline-dot" {style}>
+	<slot />
+</span>
+
+<style>
+	.timeline-dot {
+		background-color: #121212;
+		border: solid 2px #121212;
+		display: flex;
+		align-self: baseline;
+		padding: 4px;
+		border-radius: 50%;
+		margin: 11.5px 0;
+	}
+</style>

src/lib/components/timeline/TimelineItem.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+	import { getContext, setContext } from 'svelte';
+	import type { TimelinePosition, ParentPosition, TimelineConfig } from '$lib/types';
+
+	export let position: ParentPosition | null = null;
+	export let style: string = "";
+
+	const config = getContext<TimelineConfig>('TimelineConfig');
+	const itemPosition = position ? position : config.rootPosition;
+	setContext<TimelinePosition>('ParentPosition', itemPosition);
+</script>
+
+<li class={`timeline-item ${itemPosition}`} {style}>
+	{#if !$$slots['opposite-content']}
+		<div class="opposite-block"></div>
+	{:else}
+		<slot name="opposite-content" />
+	{/if}
+	<slot />
+</li>
+
+<style>
+	:global(.alternate:nth-of-type(even) > .timeline-content) {
+		text-align: right;
+	}
+
+	:global(.alternate:nth-of-type(odd) > .timeline-opposite-content) {
+		text-align: right;
+	}
+
+	.opposite-block {
+		flex: 1;
+		margin: 6px 16px;
+	}
+
+	.timeline-item {
+		list-style: none;
+		display: flex;
+		position: relative;
+		min-height: 70px;
+	}
+
+	.left {
+		flex-direction: row-reverse;
+	}
+
+	.right {
+		flex-direction: row;
+	}
+
+	.alternate:nth-of-type(even) {
+		flex-direction: row-reverse;
+	}
+
+	.alternate:nth-of-type(odd) {
+		flex-direction: row;
+	}
+</style>

src/lib/components/timeline/TimelineOppositeContent.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { getContext } from 'svelte';
+	import type { TimelineConfig, TimelinePosition } from '$lib/types';
+	export let style: string | null = null;
+
+	const config = getContext<TimelineConfig>('TimelineConfig');
+	const parentPosition = getContext<TimelinePosition>('ParentPosition');
+
+	const itemPosition = parentPosition ? parentPosition : config.rootPosition;
+</script>
+
+<div class={`timeline-opposite-content ${itemPosition}`} {style}>
+	<slot />
+</div>
+
+<style>
+	.timeline-opposite-content {
+		margin: 0;
+		flex: 1;
+		margin-right: auto;
+		margin: 6px 16px;
+	}
+
+	.left {
+		text-align: left;
+	}
+
+	.right {
+		text-align: right;
+	}
+</style>

src/lib/components/timeline/TimelineSeparator.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let style: string | null = null;
+</script>
+
+<div class="timeline-separator" {style}>
+	<slot />
+</div>
+
+<style>
+	.timeline-separator {
+		display: flex;
+		flex-direction: column;
+		flex: 0;
+		align-items: center;
+	}
+</style>

src/lib/index.ts

@@ -1,9 +1,41 @@
 // place files you want to import through the `$lib` alias in this folder.
-import Card from '$lib/components/Cards/Card.svelte';
+import Timeline from '$lib/components/timeline/Timeline.svelte';
-import FlexGallery from './components/FlexGallery.svelte';
+import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
-import Loading from './components/Loading.svelte';
+import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
-import Section from './components/Section.svelte';
+import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
-import SkillProgress from './components/SkillProgress.svelte';
+import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
-import Timeline from './components/Timeline.svelte';
+import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
+import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
 
-export { Card, FlexGallery, Loading, Section, SkillProgress, Timeline };
+import Toasts from '$lib/components/Toasts/Toasts.svelte';
+import Toast from '$lib/components/Toasts/Toast.svelte';
+import CloseIcon from '$lib/components/Toasts/CloseIcon.svelte';
+import InfoIcon from '$lib/components/Toasts/InfoIcon.svelte';
+import SuccessIcon from '$lib/components/Toasts/SuccessIcon.svelte';
+import ErrorIcon from '$lib/components/Toasts/ErrorIcon.svelte';
+
+import Card from '$lib/components/Cards/Card.svelte';
+import SlidingCard from '$lib/components/Cards/SlidingCard.svelte';
+import Modal from '$lib/components/Modal.svelte';
+
+
+export {
+	Timeline,
+	TimelineItem,
+	TimelineSeparator,
+	TimelineDot,
+	TimelineConnector,
+	TimelineContent,
+	TimelineOppositeContent,
+
+    Toasts,
+    Toast,
+    CloseIcon,
+    InfoIcon,
+    SuccessIcon,
+    ErrorIcon,
+
+    Card,
+    SlidingCard,
+    Modal
+};

src/main.svelte

@@ -7,7 +7,7 @@
     import Card from '$lib/components/Cards/Card.svelte';
     import FlexGallery from "$lib/components/FlexGallery.svelte";
     import SkillProgress from "$lib/components/SkillProgress.svelte";
-    import Timeline from '$lib/components/Timeline.svelte';
+    import Timeline from './timeline.svelte';
 </script>
 
 {#await getJson('/json/me.json')}
@@ -24,7 +24,7 @@
     </div>
 
     <!-- Main Card -->
-    <Section label="[Experience]">
+    <Section label="Experience">
         <Card headerLeft={info.name} headerRight={info.job_title} footer={info.location}>
             <div class="flex flex-row items-center gap-5">
                 <img
@@ -38,7 +38,7 @@
     </Section>
 
     <!-- SKills -->
-    <Section label="[Skills]">
+    <Section label="Skills">
         <FlexGallery>
             {#each info.skills as skill}
                 <Card headerLeft={skill.name} footer={skill.link} containerStyle="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">
@@ -50,8 +50,8 @@
         </FlexGallery>
     </Section>
 
-    <Section label="[Experience]">
+    <Section label="Experience">
-        <Timeline timelineData={info.timeline} />
+        <Timeline timelineData={info.experience} />
     </Section>
 {:catch}
     <div style="display: none;">

src/routes/contact/+page.svelte

@@ -1,95 +1,14 @@
 <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 headerLeft="Contact Me">
+<div style="display: none;">
-    <!-- Contact Form -->
+    {toasts.add({
-     <form class="w-full max-w-3xl mx-auto flex flex-col gap-4 text-lg" action="https://api.staticforms.xyz/submit" method="post">
+        title: 'Warning',
-        <div class="hidden">
+        description: 'This page is under construction',
-            <input type="hidden" name="accessKey" value="fbb5ec04-506b-448a-a445-a2e47579a966">
+        duration: 0,
-            <input type="hidden" name="replyTo" value="@">
+        type: 'warning',
-            <input type="text" name="honeypot" style="display: none;">
+        placement: 'center-center',
-            <input type="hidden" name="redirectTo" value="https://luke-else.co.uk/contact?sent=true">
+        showProgress: 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

@@ -1,46 +1,18 @@
 <script lang="ts">
-    import { loadRepos, repos } from '$lib/stores';    import { onMount } from 'svelte';
+    import { loadRepos } from '$lib/stores';
-    import { timeSince, checkImage, IMAGE_URL_SUFFIX } from '$lib/api/git';
+    import { onMount } from 'svelte';
-
+    import { toasts } from 'svelte-toasts';
-    import FlexGallery from '$lib/components/FlexGallery.svelte';
-    import Card from '$lib/components/Cards/Card.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;
-                }
-            }
-        })();
-    }
 
     onMount(loadRepos);
 </script>
 
-<FlexGallery>
+<div style="display: none;">
-    {#each $repos as repo}
+    {toasts.add({
-        <Card
+        title: 'Warning',
-            headerLeft={repo.name}
+        description: 'This page is under construction',
-            headerRight={repo.language}
+        duration: 0,
-            footer={timeSince(repo.updated_at)}
+        type: 'warning',
-            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"
+        placement: 'center-center',
-        >
+        showProgress: true
-            <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}
-        </Card>
-    {/each}
-</FlexGallery>

src/timeline.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    export let timelineData: any;
+
+    import Timeline from '$lib/components/timeline/Timeline.svelte';
+    import TimelineItem from '$lib/components/timeline/TimelineItem.svelte';
+    import TimelineSeparator from '$lib/components/timeline/TimelineSeparator.svelte';
+    import TimelineDot from '$lib/components/timeline/TimelineDot.svelte';
+    import TimelineConnector from '$lib/components/timeline/TimelineConnector.svelte';
+    import TimelineContent from '$lib/components/timeline/TimelineContent.svelte';
+    import TimelineOppositeContent from '$lib/components/timeline/TimelineOppositeContent.svelte';
+</script>
+
+<Timeline
+    position="alternate"
+    style={`
+  border-radius: 3%;
+  padding: 1rem;
+  `}
+>
+    {#each timelineData as item}
+        <TimelineItem>
+            <TimelineOppositeContent slot="opposite-content">
+                <p class="oposite-content-title">{item.duration}</p>
+            </TimelineOppositeContent>
+
+            <TimelineSeparator>
+                {#if item.duration.includes('Present') || !item.duration.includes('-')}
+                    <div class="elementToFadeInAndOut">
+                        <TimelineDot
+                            style={`background-color: var(--link); border-color: var(--accent);`}
+                        />
+                    </div>
+                {:else}
+                    <TimelineDot
+                        style={`background-color: var(--link); border-color: var(--accent);`}
+                    />
+                {/if}
+                <TimelineConnector />
+            </TimelineSeparator>
+            <TimelineContent>
+                <h3 class="content-title">{item.title}</h3>
+                <p class="content-description">{@html item.description}</p>
+            </TimelineContent>
+        </TimelineItem>
+    {/each}
+</Timeline>
+
+<style>
+    .oposite-content-title {
+        margin: 0;
+        padding: 0;
+        color: var(--accent);
+    }
+    .content-title {
+        margin: 0;
+        padding: 0;
+    }
+
+    .content-description {
+        margin: 0;
+        padding: 0;
+        margin-top: 1rem;
+        color: var(--fg);
+        font-weight: lighter;
+        padding: 0.5rem 0;
+    }
+</style>

static/themes/dark.css

@@ -0,0 +1,18 @@
+:root {
+    --bg: #282c34;
+    --bg-secondary: #3e434b;
+    --accent: #59616d;
+
+    --header: #E06C75;
+    --fg: #9eaac0;
+    
+    --input: #2b3136;
+    
+    --link: #98C379;
+    --glow: #C678DD;
+    --hover: #56B6C2;
+
+    --green: #98C379;
+    --red: #E06C75;
+    --blue: #79aec3;
+}

static/themes/light.css

@@ -0,0 +1,18 @@
+:root {
+    --bg: #f5f5f5; /* Slightly deeper light grey for subtle contrast */
+    --bg-secondary: #d9dddf; /* More defined soft grey */
+    --accent: #8ea29b; /* Stronger muted sage green */
+
+    --header: #4a5a56; /* Darker desaturated green-grey for better contrast */
+    --fg: #2f3739; /* Richer dark grey for improved readability */
+    
+    --input: #e4e7e8; /* Slightly deeper soft grey input background */
+    
+    --link: #5f8480; /* Darker muted teal for contrast */
+    --glow: #b0bdb9; /* More noticeable but soft glow */
+    --hover: #85a29c; /* Stronger pastel hover effect */
+
+    --green: #6fa984; /* More vibrant pastel green */
+    --red: #e8858f; /* Slightly deeper pastel red for contrast */
+    --blue: #6fa9a4; /* Same as accent */
+}