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

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/ProjectCard.svelte

@@ -0,0 +1,16 @@
+<script>
+    import Tag from "./Tag.svelte";
+
+    export const term = '2024-1s';
+    export const name = 'Polipromedios';
+    export const category = 'web';
+    export const description = 'Descripción de un proyecto super genial, muy, muy, muy pero muy genial.';
+    export const authors = ['Person 1', 'Person 2'];
+</script>
+
+<div class="bg-card-color rounded-xl max-w-80 mx-4 p-4">
+    <span class="font-fira text-green font-medium">{term}</span>
+    <h2 class="text-white font-fira text-xl font-medium">{name}</h2>
+    <Tag category={category} />
+    <p class="text-[#dee5f2] font-content">{description}</p>
+</div>

src/lib/components/Tag.svelte

@@ -0,0 +1,7 @@
+<script>
+    export const category = 'web';   
+</script>
+
+<span class="font-fira font-bold px-6 py bg-card-color border-green border rounded-full text-white">
+    {category}
+</span>

src/lib/data/projects.json

@@ -0,0 +1,34 @@
+{
+    "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,18 @@
+<script>
+    import ProjectCard from "$lib/components/ProjectCard.svelte";
+    import { projects } from "$lib/data/projects.json";
+
+</script>
+
+<p class="font-content font-medium text-light-blue">Aquí ponemos los proyectos que nos enorgullecen... y lo que hay ¯\_(ツ)_/¯</p>
+<div class="flex flex-row flex-wrap mt-8">
+    {#each projects as project}
+        <ProjectCard
+            term={project.term}
+            name={project.name}
+            category={project.category}
+            description={project.description}
+            authors={project.authors}
+        />
+    {/each}
+</div>

tailwind.config.ts

@@ -6,7 +6,18 @@ export default {
 	darkMode: ["class"],
 	content: ["./src/**/*.{html,js,svelte,ts}"],
 	theme: {
-		extend: {},
+		extend: {
+			colors: {
+				'light-blue': '#e0ebff',
+				'card-color': '#272626',
+				'green': '#6DD743',
+			},
+			fontFamily: {
+				'content': ["Inter", "sans-serif"],
+				'heading': ["Fira Code", "sans-serif"],
+				'fira': ["Fira Code"],
+			}
+		},
 	},
 	plugins: [forms({ strategy: "class" }), typography],
 } satisfies Config;