<script lang="ts">
	import Card from '$lib/components/Card.svelte';
	import type { PageData } from './$types';

	export let data: PageData;
</script>

<svelte:head>
	<title>Projects</title>
	<meta name="description" content="projects" />
</svelte:head>

<div>
	<h1>Projects</h1>

	<p>This is the page where all projects will live</p>

	<hr />

	<section class="project_list">
		{#each data.data as article}
			<Card { article } />
		{/each}
	</section>
</div>

<style lang="css">
	.project_list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		grid-auto-rows: minmax(300px, 1fr);
		gap: 1rem;
	}
</style>
