feat: page and components for timeline

src/lib/routes.ts

@@ -6,7 +6,8 @@ export type Route = {
 const routes: Route[] = [
 	{ url: '/', label: 'Home' },
 	{ url: '/projects', label: 'Projects' },
-	{ url: '/toolbox', label: 'Toolbox' }
+	{ url: '/toolbox', label: 'Toolbox' },
+	{ url: '/timeline', label: 'Timeline' }
 	// { url: '/blog', label: 'Blog' }
 ];
 

src/routes/timeline/+page.svelte

@@ -0,0 +1,30 @@
+<script>
+	import TimelineItem from './TimelineItem.svelte';
+	import timelineItems from './timeline-items';
+</script>
+
+<svelte:head>
+	<title>hellob.art &mdash; timeline</title>
+	<meta name="description" content="Timeline showing " />
+</svelte:head>
+
+<div class="py-6 sm:py-8 lg:py-12 md:mt-8 mx-auto max-w-screen-xl px-4 md:px-8">
+	<h2 class="text-3xl font-bold mb-8">Timeline</h2>
+
+	<div class="grid grid-cols-1 gap-4 md:grid-cols-3 pb-2">
+		<div class="md:col-span-2">
+			<p class="text-lg leading-relaxed mb-8">
+				A timeline showing a multitude of endeavors in my career, education as well as personal
+				milestones.
+			</p>
+		</div>
+	</div>
+
+	<div
+		class="space-y-8 relative before:absolute before:inset-0 before:ml-5 before:-translate-x-px md:before:mx-auto md:before:translate-x-0 before:h-full before:w-0.5 before:bg-gradient-to-b before:from-transparent before:via-slate-300 before:to-transparent"
+	>
+		{#each timelineItems as item}
+			<TimelineItem title={item.title} description={item.description} date={item.date} />
+		{/each}
+	</div>
+</div>

src/routes/timeline/TimelineItem.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import type { TimelineItem } from './timeline-items';
+
+	export let title: TimelineItem['title'];
+	export let description: TimelineItem['description'];
+	export let date: TimelineItem['date'];
+</script>
+
+<div
+	class="relative flex items-center justify-between md:justify-normal md:odd:flex-row-reverse group is-active"
+>
+	<!-- Icon -->
+	<div
+		class="flex items-center justify-center w-10 h-10 rounded-full border border-white bg-slate-300 group-[.is-active]:bg-emerald-500 text-slate-500 group-[.is-active]:text-emerald-50 shadow shrink-0 md:order-1 md:group-odd:-translate-x-1/2 md:group-even:translate-x-1/2"
+	>
+		<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="12" height="10">
+			<path
+				fill-rule="nonzero"
+				d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z"
+			/>
+		</svg>
+	</div>
+
+	<div
+		class="w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] border border-white/10 bg-white/5 p-4 shadow-xl duration-200 hover:bg-white/10 hover:shadow-2xl rounded"
+	>
+		<div class="flex items-center justify-between space-x-2 mb-1">
+			<div class="font-bold">{title}</div>
+			<time class="font-caveat font-medium text-">{date}</time>
+		</div>
+		<div class="text-slate-500">
+			{description}
+		</div>
+	</div>
+</div>

src/routes/timeline/timeline-items.ts

@@ -0,0 +1,57 @@
+export interface TimelineItem {
+	title: string;
+	link?: string;
+	image?: string;
+	description: string;
+	date: string;
+}
+
+const timelineItems: TimelineItem[] = [
+	{
+		title: 'The Linux Foundation',
+		description: 'Certified Kubernetes Administrator',
+		date: '2022'
+	},
+	{
+		title: 'Microsoft Certified',
+		description: 'Administrator Associate (AZ-104)',
+		date: '2021'
+	},
+	{
+		title: 'Triple',
+		description: 'DevOps Engineer',
+		date: '2021'
+	},
+	{
+		title: 'Urban Deal',
+		description: 'Full Stack Developer',
+		date: '2019'
+	},
+	{
+		title: 'Diastase Netwerk',
+		description: 'Volunteer Web Administrator',
+		date: '2019'
+	},
+	{
+		title: 'Vrije Universiteit Amsterdam',
+		description: 'Master Information Sciences',
+		date: '2018'
+	},
+	{
+		title: 'Vrije Universiteit Amsterdam',
+		description: 'Bachelor Information Sciences',
+		date: '2014'
+	},
+	{
+		title: 'Kinderboerderij Bijlmerweide',
+		description: 'Volunteer Web Administrator',
+		date: '2016'
+	},
+	{
+		title: 'Zaanlands Lyceum',
+		description: 'Pre-university education (VWO)',
+		date: '2008'
+	}
+];
+
+export default timelineItems;