feat: render semantic portfolio document

src/components/InfrastructureDiagram.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { InfrastructureCaseStudy } from '@/content/types';
+
+defineProps<{ infrastructure: Readonly<InfrastructureCaseStudy> }>();
+</script>
+
+<template>
+  <article>
+    <h3>{{ infrastructure.title }}</h3>
+    <p>{{ infrastructure.summary }}</p>
+    <figure>
+      <svg
+        viewBox="0 0 800 240"
+        role="img"
+        :aria-labelledby="`${infrastructure.id}-diagram-title`"
+        :aria-describedby="`${infrastructure.id}-diagram-description`"
+      >
+        <title :id="`${infrastructure.id}-diagram-title`">{{ infrastructure.title }}</title>
+        <desc :id="`${infrastructure.id}-diagram-description`">{{ infrastructure.summary }}</desc>
+        <g v-for="(band, index) in infrastructure.bands" :key="band.id" :transform="`translate(${40 + index * 190} 70)`">
+          <rect width="150" height="100" rx="8" />
+          <text x="75" y="50" text-anchor="middle">{{ band.title }}</text>
+        </g>
+      </svg>
+      <figcaption>{{ infrastructure.title }}</figcaption>
+    </figure>
+    <ul data-testid="infrastructure-text-equivalent">
+      <li v-for="band in infrastructure.bands" :key="band.id">
+        <strong>{{ band.title }}</strong>: {{ band.summary }}
+      </li>
+    </ul>
+  </article>
+</template>