should work

src/lib/components/Card.svelte

@@ -1,14 +1,42 @@
 <script lang="ts">
-	export let title: string;
+	export let data: {
+		title: string;
+		description?: string;
+		path: string;
+		date?: string;
+		tags?: string[];
+	};
 </script>
 
-<div class="card">
-	<h1>{title}</h1>
-</div>
+<a href={data.path}>
+	<div class="card">
+		<h2>{data.title}</h2>
+		{#if data.description}
+			<p>{data.description}</p>
+		{/if}
+		{#if data.tags}
+			<div class="tags">
+				{#each data.tags as tag}
+					<span class="tag">{tag}</span>
+				{/each}
+			</div>
+		{/if}
+	</div>
+</a>
 
 <style>
+	a {
+		text-decoration: none;
+		color: inherit;
+		margin: 0;
+		padding: 0;
+	}
+
+	a:hover {
+		color: var(--color-nav);
+	}
+
 	.card {
-		margin: 1rem 0;
 		overflow: hidden;
 		border-radius: 0.25rem;
 		box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
@@ -16,5 +44,22 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
+		padding: 1rem;
+		margin-top: 1rem;
+	}
+
+	.tags {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 0.5rem;
+	}
+
+	.tag {
+		background-color: var(--color-bg-tag);
+		color: var(--color-tag);
+		padding: 0.25rem 0.5rem;
+		border-radius: 0.25rem;
 	}
 </style>

src/lib/projects.ts

@@ -0,0 +1,20 @@
+import type { create_ssr_component } from 'svelte/internal';
+
+export type Mdsvex = {
+	metadata: {
+		title: string;
+		description?: string;
+		date?: string;
+		tags?: string[];
+	};
+	default: ReturnType<typeof create_ssr_component>;
+};
+
+export const projects = new Map(
+	Object.entries(
+		import.meta.glob<Mdsvex>('../routes/projects/*/*{.md,.svelte,index.md.index.svelte}')
+	).map(([path, load]) => [
+		path.replace(/(\.md|\.svelte|\/index\.md|\/index\.svelte)$/, '').replace(/^\.\.\/routes/, ''),
+		load
+	])
+);

src/lib/shs.ts

@@ -0,0 +1,20 @@
+import type { create_ssr_component } from 'svelte/internal';
+
+export type Mdsvex = {
+	metadata: {
+		title: string;
+		description?: string;
+		date?: string;
+		tags?: string[];
+	};
+	default: ReturnType<typeof create_ssr_component>;
+};
+
+export const shs = new Map(
+	Object.entries(
+		import.meta.glob<Mdsvex>('../routes/shs/*/*{.md,.svelte,index.md.index.svelte}')
+	).map(([path, load]) => [
+		path.replace(/(\.md|\.svelte|\/index\.md|\/index\.svelte)$/, '').replace(/^\.\.\/routes/, ''),
+		load
+	])
+);

src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;

src/routes/Header.svelte

@@ -20,9 +20,6 @@
 				<li aria-current={$page.url.pathname === '/about' ? 'page' : undefined}>
 					<a href="/about">About</a>
 				</li>
-				<li aria-current={$page.url.pathname === '/blog' ? 'page' : undefined}>
-					<a href="/blog">Blog</a>
-				</li>
 				<li aria-current={$page.url.pathname.startsWith('/projects') ? 'page' : undefined}>
 					<a href="/projects">Projects</a>
 				</li>

src/routes/contact/+page.svelte

@@ -0,0 +1 @@
+<h1>Work in progress</h1>

src/routes/projects/+page.server.ts

@@ -0,0 +1,12 @@
+import { projects } from '$lib/projects';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => ({
+	data: await Promise.all(
+		[...projects.entries()].map(async ([path, load]) =>
+			load().then(({ metadata }) => ({ path, ...metadata }))
+		)
+	).then((data) =>
+		data.sort(({ date: a }, { date: z }) => new Date(z ?? 0).getTime() - new Date(a ?? 0).getTime())
+	)
+});

src/routes/projects/+page.svelte

@@ -1,6 +1,8 @@
-<script>
+<script lang="ts">
 	import Card from '$lib/components/Card.svelte';
-	import { projects } from './+page';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
 </script>
 
 <svelte:head>
@@ -11,20 +13,24 @@
 <div>
 	<h1>Projects</h1>
 
-	<p>This is the page where all projects will live.</p>
+	<p>This is the page where all projects will live</p>
 
 	<hr />
 
-	<section class="card_list">
-		{#each projects as { title }}
-			<Card {title} />
+	<section class="project_list">
+		{#each data.data as { title, description, path, date, tags }}
+			<Card data={{ title, description, path, date, tags }} />
 		{/each}
 	</section>
 </div>
 
-<style>
-	.card_list {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+<style lang="css">
+	.project_list {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		flex-wrap: wrap;
+		gap: 1rem;
 	}
 </style>

src/routes/projects/+page.ts

@@ -1 +1,5 @@
-export const projects = [{ title: 'Projet 1' }, { title: 'Projet 2' }];
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ data }) => ({
+	...data
+});

src/routes/projects/can7/+page.md

@@ -0,0 +1,9 @@
+---
+title: 🎚️ Can7 dashboard
+date: 2022-09-08
+description: A dashboard for can7
+tags:
+  - web
+  - php
+  - laravel
+---

src/routes/projects/net7/+page.md

@@ -0,0 +1,9 @@
+---
+title: 🖥️ net7 homepage
+date: 2022-09-08
+description: net7
+tags:
+  - web
+  - js
+  - tailwind
+---

src/routes/shs/+page.server.ts

@@ -0,0 +1,12 @@
+import { shs } from '$lib/shs';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async () => ({
+	data: await Promise.all(
+		[...shs.entries()].map(async ([path, load]) =>
+			load().then(({ metadata }) => ({ path, ...metadata }))
+		)
+	).then((data) =>
+		data.sort(({ date: a }, { date: z }) => new Date(z ?? 0).getTime() - new Date(a ?? 0).getTime())
+	)
+});

src/routes/shs/+page.svelte

@@ -1,6 +1,8 @@
-<script>
+<script lang="ts">
 	import Card from '$lib/components/Card.svelte';
-	import { works } from './+page';
+	import type { PageData } from './$types';
+
+	export let data: PageData;
 </script>
 
 <svelte:head>
@@ -16,8 +18,8 @@
 	<hr />
 
 	<section class="card_list">
-		{#each works as title}
-			<Card {title} />
+		{#each data.data as { title, description, path, date, tags }}
+			<Card data={{ title, description, path, date, tags }} />
 		{/each}
 	</section>
 </div>
@@ -25,6 +27,6 @@
 <style>
 	.card_list {
 		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		grid-template-columns: repeat(auto-fit);
 	}
 </style>

src/routes/shs/+page.ts

@@ -1 +1,5 @@
-export const works = ['Home', 'About', 'Contact'];
+import type { PageLoad } from './$types';
+
+export const load: PageLoad = ({ data }) => ({
+	...data
+});

src/routes/shs/internship/+page.md

@@ -1,7 +1,7 @@
 ---
 title: 🎚️ Internship report
-date: 2022-11-13T21:57:10.852Z
-summary:
+date: 2022-11-13
+description: My internship report
 tags:
   - web
   - svelte

src/routes/shs/ppp/+page.md

@@ -0,0 +1,6 @@
+---
+title: 🎚️ Internship report
+date: 2022-11-15
+description:
+tags:
+---

src/routes/styles.css

@@ -4,9 +4,8 @@
 	--font-body: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
 		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 	--font-mono: 'Fira Mono', monospace;
-	--color-bg-0: rgb(202, 216, 228);
-	--color-bg-1: hsl(209, 36%, 86%);
-	--color-bg-2: hsl(224, 44%, 95%);
+	--color-tag: #f7f7f7;
+	--color-bg-tag: #2f5bc2;
 	--color-nav: #2f5bc2;
 	--color-bg-nav: #f7f7f7;
 	--color-text: rgba(0, 0, 0, 0.7);