better cards

src/lib/components/Card.svelte

@@ -5,11 +5,15 @@
 		path: string;
 		date?: string;
 		tags?: string[];
+		image?: string;
 	};
 </script>
 
 <a href={data.path}>
 	<div class="card">
+		{#if data.image}
+			<img src=/img/net7.png class="image" alt={""} />
+		{/if}
 		<h2>{data.title}</h2>
 		{#if data.description}
 			<p>{data.description}</p>
@@ -44,7 +48,6 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		padding: 1rem;
 		margin-top: 1rem;
 	}
 
@@ -54,6 +57,7 @@
 		justify-content: center;
 		align-items: center;
 		gap: 0.5rem;
+		margin-bottom: 1rem;
 	}
 
 	.tag {
@@ -62,4 +66,10 @@
 		padding: 0.25rem 0.5rem;
 		border-radius: 0.25rem;
 	}
+	
+	.image {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
 </style>

src/lib/projects.ts

@@ -6,6 +6,7 @@ export type Mdsvex = {
 		description?: string;
 		date?: string;
 		tags?: string[];
+		image?: string;
 	};
 	default: ReturnType<typeof create_ssr_component>;
 };

src/routes/+page.svelte

@@ -11,7 +11,7 @@
 <section>
 	<Hero />
 	<h1 class="cv">
-		<a href={cv} download="CV_Vallier_Theodor.pdf">Dowload my CV</a>
+		<a href={cv} download="CV_Theodor_Vallier.pdf">Dowload my CV</a>
 	</h1>
 </section>
 

src/routes/projects/+page.svelte

@@ -18,19 +18,16 @@
 	<hr />
 
 	<section class="project_list">
-		{#each data.data as { title, description, path, date, tags }}
+		{#each data.data as { title, description, path, date, tags, image }}
-			<Card data={{ title, description, path, date, tags }} />
+			<Card data={{ title, description, path, date, tags, image }} />
 		{/each}
 	</section>
 </div>
 
 <style lang="css">
 	.project_list {
-		display: flex;
+		display: grid;
-		flex-direction: row;
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-		justify-content: center;
-		align-items: center;
-		flex-wrap: wrap;
 		gap: 1rem;
 	}
 </style>

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

@@ -6,4 +6,5 @@ tags:
   - web
   - php
   - laravel
+image: /img/can7.png
 ---

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

@@ -6,4 +6,5 @@ tags:
   - web
   - js
   - tailwind
+image: /img/net7.png
 ---

src/routes/shs/+page.svelte

@@ -27,6 +27,7 @@
 <style>
 	.card_list {
 		display: grid;
-		grid-template-columns: repeat(auto-fit);
+		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+		gap: 1rem;
 	}
 </style>