feat: compose the portfolio journey layer

src/components/PortfolioSection.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
+import type { SectionId, SectionLayout } from '@/content/types';
+
 defineProps<{
-  id: string;
-  index: number;
-  eyebrow: string;
+  id: SectionId;
+  layout: Exclude<SectionLayout, 'hero'>;
+  eyebrow?: string;
   heading: string;
 }>();
 </script>
 
 <template>
-  <section :id="id" class="portfolio-section" :aria-labelledby="`${id}-heading`" :data-section-index="index">
-    <p class="route-label">{{ String(index).padStart(2, '0') }} / {{ eyebrow }}</p>
+  <section :id="id" class="portfolio-section" :aria-labelledby="`${id}-heading`" :data-layout="layout">
+    <p v-if="eyebrow" class="section-eyebrow">{{ eyebrow }}</p>
     <h2 :id="`${id}-heading`" tabindex="-1">{{ heading }}</h2>
     <slot />
   </section>