project system

src/components/ProjectListItem.astro

@@ -0,0 +1,39 @@
+---
+const { title, description, date, image, slug } = Astro.props;
+---
+
+<style>
+    .project-item {
+        border-color: var(--ayu-gutter-dim);
+        transition: all 0.2s;
+    }
+    .project-item:hover {
+        border-color: var(--ayu-gutter);
+    }
+    .project-title {
+        color: var(--ayu-accent);
+        transition: color 0.2s;
+    }
+    .project-item:hover .project-title {
+        color: var(--ayu-red-500);
+    }
+</style>
+
+<a href={`/projects/${slug}`} class="project-item block border p-4 mb-4">
+    <div class="flex gap-4">
+        <div class="w-16 h-16 flex-shrink-0">
+            {image ? (
+                <img src={image} alt={`${title} icon`} class="w-full h-full object-cover rounded" />
+            ) : (
+                <div class="w-full h-full border border-ayu-gutter rounded"></div>
+            )}
+        </div>
+        <div class="flex-1">
+            <h3 class="project-title text-lg mb-2">
+                {title}
+            </h3>
+            <p class="text-sm text-ayu-fg mb-2">{description}</p>
+            <p class="text-xs text-ayu-gutter">{date}</p>
+        </div>
+    </div>
+</a>

src/components/ProjectPage.astro

@@ -0,0 +1,40 @@
+---
+import Layout from "../layouts/Layout.astro";
+
+export interface Props {
+    metadata: {
+        title: string;
+        description: string;
+        date: string;
+        slug: string;
+        image?: string | null;
+        hidden: boolean;
+    };
+}
+
+const { metadata } = Astro.props;
+---
+
+<Layout currentPage="projects">
+    <div class="text-md">
+        <h1 class="text-xl text-ayu-accent mb-2">
+            {metadata.title}
+        </h1>
+
+        {
+            metadata.image ? (
+                <img
+                    src={metadata.image}
+                    alt={`${metadata.title} project icon`}
+                    class="w-32 h-32 mb-4 rounded"
+                />
+            ) : (
+                <div class="w-32 h-32 mb-4 border border-ayu-gutter rounded" />
+            )
+        }
+
+        <slot />
+
+        <p class="text-sm text-ayu-gutter mt-4">{metadata.date}</p>
+    </div>
+</Layout>