feat: compose the portfolio journey layer

src/components/ProjectCaseStudy.vue

@@ -2,34 +2,49 @@
 import type { PublicProject } from '@/content/types';
 import ProjectMedia from './ProjectMedia.vue';
 
-withDefaults(defineProps<{ project: Readonly<PublicProject>; allowAutomaticVideo?: boolean }>(), {
+withDefaults(defineProps<{
+  project: Readonly<PublicProject>;
+  priority?: 'primary' | 'supporting';
+  allowAutomaticVideo?: boolean;
+}>(), {
+  priority: 'supporting',
   allowAutomaticVideo: false,
 });
 </script>
 
 <template>
-  <article>
-    <h3>{{ project.title }}</h3>
-    <p>{{ project.summary }}</p>
+  <article class="project-case-study" :data-project-id="project.id" :data-project-priority="priority">
+    <header class="project-case-study__header">
+      <h3>{{ project.title }}</h3>
+      <p>{{ project.summary }}</p>
+    </header>
     <ProjectMedia
       v-for="media in project.media ?? []"
       :key="`${media.kind}-${media.assetId}`"
       :presentation="media"
       :allow-automatic-video="allowAutomaticVideo"
     />
-    <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 class="project-evidence">
+      <div>
+        <dt>Problem</dt>
+        <dd>{{ project.problem }}</dd>
+      </div>
+      <div>
+        <dt>Contribution</dt>
+        <dd>{{ project.contribution }}</dd>
+      </div>
+      <div>
+        <dt>Technical decisions</dt>
+        <dd>
+          <ul>
+            <li v-for="decision in project.technicalDecisions" :key="decision">{{ decision }}</li>
+          </ul>
+        </dd>
+      </div>
+      <div>
+        <dt>Outcome</dt>
+        <dd>{{ project.outcome }}</dd>
+      </div>
     </dl>
     <a v-if="project.visibility === 'public' && project.url" class="project-link" :href="project.url" target="_blank" rel="noopener noreferrer">{{ project.title }}</a>
   </article>