Create projects route and add list each project in a card (#41)

* add global variables and fonts to tailwind + work in projects route

* format

* Add ts

* Properly use props

* Refactor

* finish project card according to figma

* format and lint

* Add TODOs

* Remove classes

* Handle comments

---------

Co-authored-by: Adrian Delgado <[email protected]>

src/app.postcss

@@ -1,3 +1,10 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+	@font-face {
+		font-family: "Fira Code";
+		src: local("fira-code"), url("/fonts/fira-code/FiraCode-VariableFont_wght.ttf");
+	}
+}

src/lib/components/CommonCard.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Tag from "$lib/components/Tag.svelte";
+
+	type Props = {
+		term: string;
+		name: string;
+		category: string;
+		description: string;
+		// authors: string[];
+	};
+
+	let { term, name, category, description /* , authors */ }: Props = $props();
+</script>
+
+<!-- TODO: Use semantic CSS https://www.magentaa11y.com/checklist-web/link/#complex-examples -->
+<div class="m-4 max-w-72 rounded-2xl bg-neutral-800 px-6 py-4">
+	<div class="mb-4">
+		<span class="font-fira font-medium text-lime-500">{term}</span>
+		<h2 class="font-fira text-xl font-medium text-white">{name}</h2>
+	</div>
+	<Tag {category} />
+	<p class="my-4">{description}</p>
+	<div class="flex w-full flex-row justify-between">
+		<div class="flex flex-row items-center justify-center">
+			<!-- TODO: Implement author's avatars -->
+			<!-- {#each authors as author}
+				<img src="https://via.placeholder.com/150" alt={author} class="h-4 w-4 rounded-full" />
+			{/each} -->
+		</div>
+		<button class="rounded-full bg-lime-500 px-2 font-fira text-sm font-bold text-black">
+			Ver más
+		</button>
+	</div>
+</div>

src/lib/components/Tag.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	type Props = {
+		category: string;
+	};
+
+	let { category }: Props = $props();
+</script>
+
+<span
+	class="rounded-full border border-lime-500 bg-neutral-800 px-6 font-fira font-bold text-white"
+>
+	{category}
+</span>

src/lib/data/projects.json

@@ -0,0 +1,25 @@
+{
+	"projects": [
+		{
+			"term": "2024-1s",
+			"name": "Polipromedios",
+			"category": "web",
+			"description": "Descripción de un proyecto super genial, muy, muy, muy pero muy genial.",
+			"authors": ["Person 1", "Person 2"]
+		},
+		{
+			"term": "2024-1s",
+			"name": "Polipromedios",
+			"category": "web",
+			"description": "Descripción de un proyecto super genial, muy, muy, muy pero muy genial.",
+			"authors": ["Person 1", "Person 2"]
+		},
+		{
+			"term": "2024-1s",
+			"name": "Polipromedios",
+			"category": "web",
+			"description": "Descripción de un proyecto super genial, muy, muy, muy pero muy genial.",
+			"authors": ["Person 1", "Person 2"]
+		}
+	]
+}

src/routes/projects/+page.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import CommonCard from "$lib/components/CommonCard.svelte";
+
+	let { data } = $props();
+</script>
+
+<p class="font-medium">{data.description}</p>
+<div class="mt-8 flex flex-col items-center sm:flex sm:flex-row sm:flex-wrap">
+	{#each data.projects as project}
+		<CommonCard
+			term={project.term}
+			name={project.name}
+			category={project.category}
+			description={project.description}
+		/>
+	{/each}
+</div>

src/routes/projects/+page.ts

@@ -0,0 +1,12 @@
+import type { PageLoad } from "./$types";
+import { projects } from "$lib/data/projects.json";
+
+export const load = (async () => {
+	return {
+		title: "Proyectos",
+		// TODO: change this to a real description
+		description: "Aquí ponemos los proyectos que nos enorgullecen... y lo que hay ¯\\_(ツ)_/¯",
+		// TODO: fetch from API
+		projects,
+	};
+}) satisfies PageLoad;

tailwind.config.ts

@@ -6,7 +6,11 @@ export default {
 	darkMode: ["class"],
 	content: ["./src/**/*.{html,js,svelte,ts}"],
 	theme: {
-		extend: {},
+		extend: {
+			fontFamily: {
+				fira: ["Fira Code", "mono-space"],
+			},
+		},
 	},
 	plugins: [forms({ strategy: "class" }), typography],
 } satisfies Config;