feat: render semantic portfolio document

src/components/PortfolioSection.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  id: string;
+  index: number;
+  eyebrow: string;
+  heading: string;
+}>();
+</script>
+
+<template>
+  <section :id="id" :aria-labelledby="`${id}-heading`" :data-section-index="index">
+    <p>{{ String(index).padStart(2, '0') }} / {{ eyebrow }}</p>
+    <h2 :id="`${id}-heading`">{{ heading }}</h2>
+    <slot />
+  </section>
+</template>