feat: added project cards and content

src/lib/components/Header.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { AppBar, LightSwitch, drawerStore } from '@skeletonlabs/skeleton';
+	import { AppBar, LightSwitch, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
 	import GitHub from './icons/GitHub.svelte';
 	import Hamburger from './icons/Hamburger.svelte';
 
+	export let progress: number;
+
 	function drawerOpen(): void {
 		drawerStore.open();
 	}
@@ -28,3 +30,5 @@
 		<LightSwitch />
 	</svelte:fragment>
 </AppBar>
+
+<ProgressBar label="Progress Bar" value={progress} max={100} rounded="" />

src/lib/components/ProjectCard.svelte

@@ -0,0 +1,41 @@
+<script>
+	import { Avatar } from '@skeletonlabs/skeleton';
+
+	export let link = '';
+	export let headerImage = '';
+	export let headerSubTitle = '';
+	export let title = '';
+	export let description = '';
+	export let logo = '';
+	/**
+	 * @type {any[]}
+	 */
+	export let contributors = [];
+	export let date = '';
+</script>
+
+<a class="card bg-initial card-hover overflow-hidden" href={link}>
+	<header>
+		<img src={headerImage} class="bg-black/50 w-full aspect-[21/9] object-cover" alt="Post" />
+	</header>
+	<div class="p-4 space-y-4">
+		<h6 class="h6">{headerSubTitle}</h6>
+		<h3 class="h3" data-toc-ignore>{title}</h3>
+		<article>
+			<p>
+				{description}
+			</p>
+		</article>
+	</div>
+	<hr class="opacity-50" />
+	<footer class="p-4 flex justify-start items-center space-x-4">
+		<Avatar src={logo} width="w-8" />
+		<div class="flex-auto flex justify-between items-center">
+			{#each contributors as contributor}
+				<Avatar src={contributor.imageSrc} width="w-8" />
+			{/each}
+
+			<small>{new Date(date).toLocaleDateString()}</small>
+		</div>
+	</footer>
+</a>

src/routes/+layout.svelte

@@ -2,7 +2,7 @@
 	import '../theme.postcss';
 	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	import '../app.postcss';
-	import { AppShell, Drawer, drawerStore } from '@skeletonlabs/skeleton';
+	import { AppShell, Drawer, ProgressBar, drawerStore } from '@skeletonlabs/skeleton';
 	import Footer from '../lib/components/Footer.svelte';
 	import Navigation from '../lib/components/Navigation.svelte';
 	import Header from '$lib/components/Header.svelte';
@@ -13,15 +13,25 @@
 		{ url: '/tools', label: 'Tools' },
 		{ url: '/blog', label: 'Blog' }
 	];
+
+	let progress = 0;
+
+  function handleScroll(event: Event) {
+    const { scrollTop, scrollHeight, clientHeight } = event.currentTarget as HTMLElement;
+    progress = (scrollTop / (scrollHeight - clientHeight)) * 100;
+  }
 </script>
 
-<Drawer width='w-[280px] md:w-[480px]'>
+<Drawer width="w-[280px] md:w-[480px]">
 	<Navigation {routes} />
 </Drawer>
 
-<AppShell slotSidebarLeft="w-0 md:w-52">
+<AppShell
+	slotSidebarLeft="w-0 md:w-52"
+	on:scroll={handleScroll}
+>
 	<svelte:fragment slot="header">
-		<Header />
+		<Header {progress} />
 	</svelte:fragment>
 	<svelte:fragment slot="sidebarLeft">
 		<Navigation {routes} />

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <!-- About.svelte -->
-<script>
+<script lang='ts'>
 	import { calculateAge } from '$lib/calculate-age';
 </script>
 

src/routes/blog/+page.svelte

@@ -1,4 +1,3 @@
-<main class="text-center">
+<main class="container mx-auto px-4 py-8 text-left">
-	<h2 class="h2">Blog Posts</h2>
+	<h2 class="text-3xl font-bold mb-8">Blog posts</h2>
 </main>
-

src/routes/projects/+page.svelte

@@ -1,71 +1,52 @@
-<main class="text-center">
+<script>
-	<h2 class="h2">My Projects</h2>
+	import videowallImage from '$lib/assets/videowall-irl.jpeg';
+	import tripleLogo from '$lib/assets/triple-logo.png';
+	import zaantjeImage from '$lib/assets/zaantje-3d.png';
+	import zaantjeLogo from '$lib/assets/zaantje-logo.png';
+	import ProjectCard from '$lib/components/ProjectCard.svelte';
 
-	<div class="project">
+	let projects = [
-		<h2>Triple Ticket Dashboard</h2>
+		{
-		<p>Dec 2021 - Present</p>
+			id: 1,
-		<p>The Ticket Dashboard consolidates tickets from various sources into a centralized view.</p>
+			link: '#',
-	</div>
+			headerImage: videowallImage,
+			headerSubTitle: 'Internal Project',
+			title: 'Videowall',
+			description: `An internal application to control an impressive 6x5 monitor setup with a user-friendly
+										frontend built on Next.js and a powerful backend developed in Golang.`,
+			logo: tripleLogo,
+			contributors: [],
+			date: '2021'
+		},
+		{
+			id: 2,
+			link: 'https://zaantje.com',
+			headerImage: zaantjeImage,
+			headerSubTitle: 'Personal Project',
+			title: 'Zaantje',
+			description: `A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you 
+										on a virtual tour of Zaandam, showcasing locations of famous music videos.`,
+			logo: zaantjeLogo,
+			contributors: [],
+			date: '2020'
+		}
+	];
+</script>
 
-	<div class="project">
+<main class="container mx-auto px-4 py-8 text-left">
-		<h2>Triple Videowall</h2>
+	<h2 class="text-3xl font-bold mb-8">My Projects</h2>
-		<p>May 2022 - Sep 2022</p>
+	<div class="w-full text-token grid grid-cols-1 md:grid-cols-2 gap-4">
-		<p>
+		{#each projects as project}
-			An internal application to control an impressive 6x5 monitor setup with a user-friendly
+			<ProjectCard
-			frontend built on Next.js and a powerful backend developed in Golang.
+				link={project.link}
-		</p>
+				headerImage={project.headerImage}
-	</div>
+				headerSubTitle={project.headerSubTitle}
-
+				title={project.title}
-	<div class="project">
+				description={project.description}
-		<h2>Zaantje</h2>
+				logo={project.logo}
-		<p>Jan 2020 - Jan 2021</p>
+				contributors={project.contributors}
-		<p>
+				date={project.date}
-			A SPA crafted with Nuxt.js and Vue.js, backed by Sanity CMS, taking you on a virtual tour of
+			/>
-			Zaandam, showcasing locations of famous music videos.
+		{/each}
-		</p>
-	</div>
-
-	<h2>Open Source Contributions</h2>
-
-	<div class="contribution">
-		<h3>microsoft/terraform-provider-azuredevops</h3>
-		<p>Terraform Azure DevOps provider</p>
-	</div>
-
-	<div class="contribution">
-		<h3>iKenndac/Tofu</h3>
-		<p>An easy-to-use two-factor authentication app for iOS</p>
-	</div>
-
-	<div class="contribution">
-		<h3>bartvdbraak/SlayerWeightCalculator</h3>
-		<p>A calculator for RuneScape slayer geeks that need to know percentages. (archived)</p>
 	</div>
 </main>
-
-<style>
-
-	h1 {
-		font-size: 2.5rem;
-		margin-bottom: 1rem;
-	}
-
-	h2 {
-		font-size: 2rem;
-		margin-top: 2rem;
-	}
-
-	.project,
-	.contribution {
-		margin: 1rem auto;
-		padding: 1rem;
-		max-width: 500px;
-		border: 2px solid #007bff;
-		border-radius: 10px;
-	}
-
-	.project p,
-	.contribution p {
-		margin: 0.5rem 0;
-	}
-</style>

src/routes/tools/+page.svelte

@@ -1,4 +1,5 @@
-<main class="text-center">
+<main class="container mx-auto px-4 py-8 text-left">
-  <h2 class="h2">My Tools</h2>
+	<h2 class="text-3xl font-bold mb-8">DevOps</h2>
+	<h2 class="text-3xl font-bold mb-8">MacOS</h2>
+	<h2 class="text-3xl font-bold mb-8">Other</h2>
 </main>
-