Added timeline component to website

src/lib/components/timeline/Timeline.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { setContext } from 'svelte';
+	import type { TimelinePosition, TimelineConfig } from '../types';
+	export let position: TimelinePosition = 'right';
+	export let style: string = 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 = null;
+</script>
+
+<span class="timeline-connector" {style} />
+
+<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 '../types';
+	export let style: string = 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;
+</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 '../types';
+
+	export let position: ParentPosition | null = null;
+	export let style: string = null;
+
+	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" />
+	{: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 '../types';
+	export let style: string = 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;
+</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 +1,39 @@
 // place files you want to import through the `$lib` alias in this folder.
+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';
+
+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/Card.svelte';
+import Modal from '$lib/components/Modal.svelte';
+
+
+export {
+	Timeline,
+	TimelineItem,
+	TimelineSeparator,
+	TimelineDot,
+	TimelineConnector,
+	TimelineContent,
+	TimelineOppositeContent,
+
+    Toasts,
+    Toast,
+    CloseIcon,
+    InfoIcon,
+    SuccessIcon,
+    ErrorIcon,
+
+    Card,
+    Modal
+};

src/lib/types.d.ts

@@ -0,0 +1,9 @@
+type TimelinePosition = 'right' | 'left' | 'alternate';
+
+type ParentPosition = 'right' | 'left';
+
+type TimelineConfig = {
+	rootPosition: TimelinePosition;
+};
+
+export { TimelinePosition, ParentPosition, TimelineConfig };

src/main.svelte

@@ -3,8 +3,10 @@
 	import { Toast, ToastType } from "$lib/toast";
     import { addToast } from "$lib/store";
 
-    import Card from './Card.svelte';
-    import Modal from './Modal.svelte';
+    import Card from '$lib/components/Card.svelte';
+    import Modal from '$lib/components/Modal.svelte';
+
+    import Timeline from "./timeline.svelte";
 
 	let showModal: boolean = false;
     let activeModal: any = null;
@@ -76,7 +78,7 @@
     }
 
     /* Skills Cards CSS */
-    .skills-container {
+    .container {
         padding-top: 3em;
         max-width: 90%;
         margin: auto;
@@ -112,7 +114,7 @@
         </div>
     </div>
 
-    <div class="skills-container">
+    <div class="container">
         <h1>Skills</h1>
         <hr />
         <div class="cards">
@@ -135,6 +137,12 @@
         </div>
     </div>
 
+    <div class="container">
+        <h1>Experience</h1>
+        <hr />
+        <Timeline timelineData="{info.timeline}"></Timeline>
+    </div>
+
     <div style="display: none;">{addToast(new Toast("Click on a skill to open a prompt", ToastType.Info, true, 4000))}</div>
     <div style="display: none;">{addToast(new Toast("Welcome!", ToastType.Success, true, 3000))}</div>
 {:catch}

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import Toasts from "../Toasts/Toasts.svelte";
+	import Toasts from "$lib/components/Toasts/Toasts.svelte";
 </script>
 
 <style>

src/routes/contact/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import Card from '../../Card.svelte';
+    import Card from '$lib/components/Card.svelte';
     import { Toast, ToastType } from "$lib/toast";
     import { addToast } from "$lib/store";
 

src/timeline.svelte

@@ -0,0 +1,56 @@
+<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>
+				<TimelineDot style={`background-color: var(--cyan); border-color: var(--bg-grad);`} />
+				<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;
+	}
+	.content-title {
+		margin: 0;
+		padding: 0;
+	}
+
+	.content-description {
+		margin: 0;
+		padding: 0;
+		margin-top: 1rem;
+		color: var(--foreground);
+		font-weight: lighter;
+		padding: 0.5rem 0;
+	}
+</style>

static/json/me.json

@@ -39,5 +39,22 @@
       "about": "Svelte is an impressive web framework that stands out in the world of front-end development. It's known for its unique approach, compiling components to highly optimized vanilla JavaScript, resulting in blazing-fast web applications. Svelte's simplicity and declarative syntax make it easy to learn and use, and it encourages efficient, maintainable code. "
     }
   ],
-  "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>."
+  "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>.",
+  "timeline" : [
+    {
+      "duration" : "September 2015 - July 2020",
+      "title" : "The Norton Knatchbull School (GCSEs)",
+      "description" : "FSMQ (C) <br /> Maths (8) <br /> Geography (<b>9</b>) <br /> Biology (<b>9</b>) <br /> Chemistry (<b>9</b>) <br /> Physics (<b>9</b>) <br /> Spanish (7) <br /> English (Literature & Language) (7, 7) <br /> Computer Science (<b>9</b>)"
+    },
+    {
+      "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 2022 - Present",
+      "title" : "Thales UK - Software Engineer",
+      "description" : "As a software engineering apprentice at Thales UK, I find myself partaking in agile / scrum development methodologies in a strong team of 6 other engineers. The team iterates on a pre-existing system designed for the MOD, written in C++, using internal frameworks to assist. <br /><br /> To extend this, 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..."
+    }
+  ]
 }