should work

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>