feat: render semantic portfolio document

src/components/ProjectCaseStudy.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PublicProject } from '@/content/types';
+
+defineProps<{ project: Readonly<PublicProject> }>();
+</script>
+
+<template>
+  <article>
+    <h3>{{ project.title }}</h3>
+    <p>{{ project.summary }}</p>
+    <dl>
+      <dt>Problem</dt>
+      <dd>{{ project.problem }}</dd>
+      <dt>Contribution</dt>
+      <dd>{{ project.contribution }}</dd>
+      <dt>Technical decisions</dt>
+      <dd>
+        <ul>
+          <li v-for="decision in project.technicalDecisions" :key="decision">{{ decision }}</li>
+        </ul>
+      </dd>
+      <dt>Outcome</dt>
+      <dd>{{ project.outcome }}</dd>
+    </dl>
+    <a v-if="project.visibility === 'public' && project.url" :href="project.url" target="_blank" rel="noopener noreferrer">{{ project.title }}</a>
+  </article>
+</template>