chore: add images

src/components/Card.astro

@@ -2,12 +2,26 @@
 const { title, features, description } = Astro.props;
 ---
 
-<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>
+<div class="border-[1px] border-zinc-500 dark:border-zinc-300">
+  <a href={`/projects/${title}`}>
+    <div class="p-3">
+      <div class="flex justify-between items-center h-12">
+        <div class="flex flex-row items-center gap-3 h-full">
+          <img src={`${title}.png`} class="rounded aspect-square h-full" />
+          <span class="uppercase font-semibold text-xl">{title}</span>
+        </div>
+        <span
+          class="uppercase text-xs dark:text-zinc-400 text-gray-300 lg:flex hidden"
+          >{features.join(" | ")}</span
+        >
+      </div>
+      <div class="h-[1px] bg-zinc-200 dark:bg-zinc-800 w-full my-3"></div>
+      <div class="flex lg:hidden py-1">
+        <span class="uppercase text-xs dark:text-zinc-400 text-gray-300"
+          >{features.join(" | ")}</span
+        >
+      </div>
+      <span class="">{description}</span>
+    </div>
+  </a>
+</div>

src/components/Navbar.astro

@@ -9,10 +9,16 @@ import ThemeToggle from "./ThemeToggle";
     <span class="text-lg">tedb.dev</span>
   </a>
 
-  <div>
+  <div class="flex flex-row gap-4 items-center">
     <a href="/projects" aria-label="Projects"><span>projects</span></a>
-    <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
-    <a href="/about" aria-label="About"><span>about</span></a>
+    <span>|</span>
+    <a href="https://github.com/tedbennett" aria-label="Github"
+      ><span>github</span></a
+    >
+    <span>|</span>
+    <a href="mailto:ted_bennett@icloud.com" aria-label="Contact"
+      ><span>contact</span></a
+    >
   </div>
 
   <ThemeToggle client:load />

src/pages/projects/index.astro

@@ -6,7 +6,7 @@ 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">
+    <div class="grid grid-cols-2 h-full gap-5 py-5 items-stretch">
       <Card
         title="pixee"
         description="Social app for drawing and sharing pixel art"