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>