feat: add projects

src/components/Card.astro

@@ -1,9 +1,13 @@
 ---
-const { title } = Astro.props;
+const { title, features, description } = Astro.props;
 ---
 
-<div class="p-3 border-[1px] border-zinc-500 dark:border-zinc-300">
-  <span class="uppercase font-semibold text-lg">{title}</span>
-  <div class="h-[1px] bg-zinc-200 dark:bg-zinc-800 w-full"></div>
-  <span class="uppercase text-sm">iOS | Rust | Postgres</span>
-</div>
+<a href={`/projects/${title}`}>
+  <div class="p-3 border-[1px] border-zinc-500 dark:border-zinc-300">
+    <span class="uppercase font-semibold text-lg">{title}</span>
+    <div class="h-[1px] bg-zinc-200 dark:bg-zinc-800 w-full"></div>
+    <span class="uppercase text-sm">{features.join(" | ")}</span>
+    <br />
+    <span class="">{description}</span>
+  </div>
+</a>

src/components/Navbar.astro

@@ -10,10 +10,10 @@ import ThemeToggle from "./ThemeToggle";
   </a>
 
   <div>
-    <span>projects</span>
+    <a href="/projects" aria-label="Projects"><span>projects</span></a>
     <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
-
-    <span>about</span>
+    <a href="/about" aria-label="About"><span>about</span></a>
   </div>
+
   <ThemeToggle client:load />
 </nav>

src/pages/index.astro

@@ -4,11 +4,5 @@ import Layout from "../layouts/Layout.astro";
 ---
 
 <Layout title="tedb.dev">
-  <div class="container mx-auto py-5">
-    <h1 class="text-2xl font-semibold uppercase">projects</h1>
-    <div class="grid grid-cols-2 h-full gap-5 py-5">
-      <Card title="Pixee" />
-      <Card title="Kude" />
-    </div>
-  </div>
+  <div class="container mx-auto"></div>
 </Layout>

src/pages/projects/index.astro

@@ -0,0 +1,37 @@
+---
+import Card from "../../components/Card.astro";
+import Layout from "../../layouts/Layout.astro";
+---
+
+<Layout title="projects | tedb.dev">
+  <div class="container mx-auto py-5">
+    <h1 class="text-2xl font-semibold uppercase">projects</h1>
+    <div class="grid grid-cols-2 h-full gap-5 py-5">
+      <Card
+        title="pixee"
+        description="Social app for drawing and sharing pixel art"
+        features={["SwiftUI, Rust, Postgres"]}
+      />
+      <Card
+        title="kude"
+        description="iOS app for creating shared Spotify music queues"
+        features={["SwiftUI, Spotify, Firebase"]}
+      />
+      <Card
+        title="fridgy"
+        description="iOS fridge organisation app"
+        features={["UIKit, Firebase"]}
+      />
+      <Card
+        title="versa"
+        description="iOS app for exporting Spotify and Apple Music playlists"
+        features={["SwiftUI, Spotify, Apple Music"]}
+      />
+      <Card
+        title="kb"
+        description="A command-line kanban board built with Rust and Tui-rs"
+        features={["Rust, TUI"]}
+      />
+    </div>
+  </div>
+</Layout>