feat: compose the portfolio journey layer

src/components/HeroJourney.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PortfolioContent } from '@/content/types';
+
+defineProps<{
+  identity: Readonly<PortfolioContent['identity']>;
+}>();
+
+const emit = defineEmits<{
+  explore: [event: MouseEvent];
+}>();
+</script>
+
+<template>
+  <section id="start" class="hero-journey" data-layout="hero" aria-labelledby="start-heading">
+    <div class="hero-journey__content">
+      <h1 id="start-heading" tabindex="-1">{{ identity.name }}</h1>
+      <p class="hero-journey__role">{{ identity.role }}</p>
+      <p class="hero-journey__value">{{ identity.valueProposition }}</p>
+      <a class="hero-journey__action" href="#selected-builds" @click="emit('explore', $event)">Explore work</a>
+    </div>
+    <p class="print-portfolio-label" aria-hidden="true">Portfolio</p>
+  </section>
+</template>