add domain label map

Author: AJaccP

src/lib/domains.ts

@@ -0,0 +1,14 @@
+// Display labels for the project `domains` enum (defined in src/content.config.ts).
+// Shared so the gallery filter (projects.astro) and the detail page ([slug].astro)
+// show the same human-readable labels instead of the raw kebab-case values.
+// Keep these keys in sync with the enum in the schema.
+export const DOMAIN_LABELS = {
+  web: 'Web',
+  mobile: 'Mobile',
+  'ai-ml': 'AI / ML',
+  cybersecurity: 'Cybersecurity',
+  'game-dev': 'Game Dev',
+  hardware: 'Hardware',
+  systems: 'Systems',
+  infrastructure: 'Infrastructure',
+} as const;

src/pages/projects/[slug].astro

@@ -10,6 +10,7 @@
  */
 import { getCollection, render } from 'astro:content';
 import Base from '../../layouts/Base.astro';
+import { DOMAIN_LABELS } from '../../lib/domains';
 
 export async function getStaticPaths() {
   const projects = await getCollection('projects');
@@ -37,7 +38,9 @@ const { Content } = await render(entry);
       <div class="flex flex-wrap items-baseline justify-between gap-2">
         <h1 class="text-3xl font-bold tracking-tight">{data.title}</h1>
         <span class="text-muted text-sm"
-          >{data.domains.join(', ')} · {data.year}</span
+          >{data.domains.map((d) => DOMAIN_LABELS[d]).join(', ')} · {
+            data.year
+          }</span
         >
       </div>
       <p class="text-muted text-lg">{data.description}</p>