feat: compose the portfolio journey layer

src/components/AppShell.vue

@@ -3,6 +3,7 @@ import { computed, onMounted, onUnmounted, shallowRef, watch } from 'vue';
 import ContactDestination from './ContactDestination.vue';
 import DriveControls from './DriveControls.vue';
 import ExperienceTimeline from './ExperienceTimeline.vue';
+import HeroJourney from './HeroJourney.vue';
 import InfrastructureDiagram from './InfrastructureDiagram.vue';
 import JourneyHud from './JourneyHud.vue';
 import PortfolioSection from './PortfolioSection.vue';
@@ -16,7 +17,7 @@ import { useAudioEngine } from '@/composables/useAudioEngine';
 import { useJourneySections } from '@/composables/useJourneySections';
 import { useKeyboardNavigation } from '@/composables/useKeyboardNavigation';
 import { useMotionPreferences } from '@/composables/useMotionPreferences';
-import type { PortfolioContent, SectionId } from '@/content/types';
+import type { PortfolioContent, SectionId, SectionLayout } from '@/content/types';
 import type { SceneHostState } from '@/composables/useSceneController';
 import type { MotionPolicy } from '@/journey/motion-policy';
 
@@ -29,6 +30,17 @@ const canonicalSectionIds = [
   'start', 'profile', 'experience', 'infrastructure', 'selected-builds', 'additional-work', 'toolkit', 'contact',
 ] as const satisfies readonly SectionId[];
 
+const sectionLayouts = {
+  start: 'hero',
+  profile: 'right-rail',
+  experience: 'left-timeline',
+  infrastructure: 'full-diagram',
+  'selected-builds': 'project-stage',
+  'additional-work': 'compact-rail',
+  toolkit: 'toolkit-field',
+  contact: 'destination',
+} as const satisfies Readonly<Record<SectionId, SectionLayout>>;
+
 const navigationById = computed(() => new Map(props.content.navigation.map((item) => [item.id, item])));
 
 const sectionLabel = (id: SectionId): string => {
@@ -174,9 +186,6 @@ onUnmounted(() => removePageListeners());
     :section-label="activeSectionLabel"
   />
   <header class="site-header">
-    <h1>{{ content.identity.name }}</h1>
-    <p>{{ content.identity.role }}</p>
-    <p class="print-portfolio-label" aria-hidden="true">Portfolio</p>
     <SiteNavigation
       :items="canonicalNavigation"
       :journey="journey"
@@ -185,13 +194,11 @@ onUnmounted(() => removePageListeners());
   </header>
 
   <main id="portfolio-content" class="portfolio-main" tabindex="-1">
-    <PortfolioSection id="start" :index="1" :eyebrow="sectionLabel('start').toUpperCase()" :heading="sectionLabel('start').toUpperCase()">
-      <p>{{ content.identity.valueProposition }}</p>
-    </PortfolioSection>
+    <HeroJourney :identity="content.identity" @explore="navigation.onSectionLinkClick" />
 
-    <PortfolioSection id="profile" :index="2" :eyebrow="sectionLabel('profile').toUpperCase()" :heading="sectionLabel('profile').toUpperCase()">
+    <PortfolioSection id="profile" :layout="sectionLayouts.profile" :heading="sectionLabel('profile')">
       <p>{{ content.profile.introduction }}</p>
-      <dl>
+      <dl class="profile-facts">
         <template v-for="fact in content.profile.screeningFacts" :key="fact.label">
           <dt>{{ fact.label }}</dt>
           <dd>{{ fact.value }}</dd>
@@ -199,39 +206,44 @@ onUnmounted(() => removePageListeners());
       </dl>
     </PortfolioSection>
 
-    <PortfolioSection id="experience" :index="3" :eyebrow="sectionLabel('experience').toUpperCase()" :heading="sectionLabel('experience').toUpperCase()">
+    <PortfolioSection id="experience" :layout="sectionLayouts.experience" :heading="sectionLabel('experience')">
       <ExperienceTimeline :experience="content.experience" :systems-operations="content.systemsOperations" />
     </PortfolioSection>
 
-    <PortfolioSection id="infrastructure" :index="4" :eyebrow="sectionLabel('infrastructure').toUpperCase()" :heading="sectionLabel('infrastructure').toUpperCase()">
+    <PortfolioSection id="infrastructure" :layout="sectionLayouts.infrastructure" :heading="sectionLabel('infrastructure')">
       <InfrastructureDiagram :infrastructure="content.infrastructure" />
     </PortfolioSection>
 
-    <PortfolioSection id="selected-builds" :index="5" :eyebrow="sectionLabel('selected-builds').toUpperCase()" :heading="sectionLabel('selected-builds').toUpperCase()">
-      <ProjectCaseStudy
-        v-for="project in content.projects.selected"
-        :key="project.id"
-        :project="project"
-        :allow-automatic-video="motion.policy.value.allowAutomaticVideo"
-      />
+    <PortfolioSection id="selected-builds" :layout="sectionLayouts['selected-builds']" eyebrow="Selected work" :heading="sectionLabel('selected-builds')">
+      <div class="project-stage__projects">
+        <ProjectCaseStudy
+          v-for="(project, index) in content.projects.selected"
+          :key="project.id"
+          :project="project"
+          :priority="index < 2 ? 'primary' : 'supporting'"
+          :allow-automatic-video="motion.policy.value.allowAutomaticVideo"
+        />
+      </div>
     </PortfolioSection>
 
-    <PortfolioSection id="additional-work" :index="6" :eyebrow="sectionLabel('additional-work').toUpperCase()" :heading="sectionLabel('additional-work').toUpperCase()">
-      <ProjectCard
-        v-for="project in content.projects.additional"
-        :key="project.id"
-        :project="project"
-        :allow-automatic-video="motion.policy.value.allowAutomaticVideo"
-      />
+    <PortfolioSection id="additional-work" :layout="sectionLayouts['additional-work']" :heading="sectionLabel('additional-work')">
+      <div class="compact-projects">
+        <ProjectCard
+          v-for="project in content.projects.additional"
+          :key="project.id"
+          :project="project"
+          :allow-automatic-video="motion.policy.value.allowAutomaticVideo"
+        />
+      </div>
     </PortfolioSection>
 
-    <PortfolioSection id="toolkit" :index="7" :eyebrow="sectionLabel('toolkit').toUpperCase()" :heading="sectionLabel('toolkit').toUpperCase()">
+    <PortfolioSection id="toolkit" :layout="sectionLayouts.toolkit" :heading="sectionLabel('toolkit')">
       <ToolkitGrid :groups="content.toolkit" />
     </PortfolioSection>
 
-    <PortfolioSection id="contact" :index="8" :eyebrow="sectionLabel('contact').toUpperCase()" :heading="sectionLabel('contact').toUpperCase()">
+    <PortfolioSection id="contact" :layout="sectionLayouts.contact" eyebrow="Destination" :heading="sectionLabel('contact')">
       <footer>
-        <ContactDestination :contact="content.contact" :identity="content.identity" />
+        <ContactDestination :contact="content.contact" />
       </footer>
     </PortfolioSection>
   </main>

src/components/ContactDestination.vue

@@ -1,18 +1,19 @@
 <script setup lang="ts">
-import type { ContactContent, PortfolioContent } from '@/content/types';
+import type { ContactContent } from '@/content/types';
 
 defineProps<{
   contact: Readonly<ContactContent>;
-  identity: Readonly<Pick<PortfolioContent['identity'], 'name' | 'role'>>;
 }>();
 </script>
 
 <template>
-  <p>{{ identity.name }}</p>
-  <p>{{ identity.role }}</p>
-  <a class="contact-link" :href="`mailto:${contact.email}`">{{ contact.email }}</a>
-  <p>{{ contact.cvMessage }}</p>
-  <ul>
+  <div class="contact-destination">
+    <p class="contact-destination__copy">Thanks for making the trip. The road's open if you'd like to build something together.</p>
+    <a class="contact-link" :href="`mailto:${contact.email}`">Start a conversation</a>
+    <p class="contact-destination__email">{{ contact.email }}</p>
+    <p class="contact-destination__cv">{{ contact.cvMessage }}</p>
+  </div>
+  <ul class="contact-social">
     <li v-for="link in contact.social" :key="link.service">
       <a class="contact-social-link" :href="link.url" target="_blank" rel="noopener noreferrer">{{ link.service }}</a>
     </li>

src/components/ExperienceTimeline.vue

@@ -8,11 +8,11 @@ defineProps<{
 </script>
 
 <template>
-  <ol>
+  <ol class="experience-timeline">
     <li v-for="record in experience" :key="record.id">
-      <article>
+      <article class="experience-record">
         <h3>{{ record.role }}</h3>
-        <p>{{ record.organization }} · {{ record.dates }}<template v-if="record.location"> · {{ record.location }}</template></p>
+        <p class="experience-record__meta">{{ record.organization }} · {{ record.dates }}<template v-if="record.location"> · {{ record.location }}</template></p>
         <ul>
           <li v-for="highlight in record.highlights" :key="highlight">{{ highlight }}</li>
         </ul>
@@ -20,7 +20,7 @@ defineProps<{
     </li>
   </ol>
 
-  <article>
+  <article class="systems-operations">
     <h3>{{ systemsOperations.title }}</h3>
     <p>{{ systemsOperations.summary }}</p>
     <ul>

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>

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>

src/components/ProjectCard.vue

@@ -8,7 +8,7 @@ withDefaults(defineProps<{ project: Readonly<PublicProject>; allowAutomaticVideo
 </script>
 
 <template>
-  <article>
+  <article class="project-card" :data-project-id="project.id" :data-maturity="project.maturity">
     <h3>{{ project.title }}</h3>
     <p>{{ project.summary }}</p>
     <ProjectMedia

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>

src/components/SiteNavigation.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import type { SectionId } from "@/content/types";
+import { onMounted, ref } from 'vue';
+import type { SectionId } from '@/content/types';
 import type { JourneySnapshot } from '@/journey/types';
 
 const props = defineProps<{
@@ -18,21 +19,35 @@ const navigationLabels: Readonly<Record<SectionId, string>> = {
   toolkit: 'Toolkit',
   contact: 'Contact',
 };
+
+const disclosure = ref<HTMLDetailsElement | null>(null);
+
+onMounted(() => {
+  if (window.matchMedia('(max-width: 767px)').matches) disclosure.value?.removeAttribute('open');
+});
+
+const navigate = (event: MouseEvent): void => {
+  props.onSectionLinkClick(event);
+  if (window.matchMedia('(max-width: 767px)').matches) disclosure.value?.removeAttribute('open');
+};
 </script>
 
 <template>
   <nav class="site-navigation" aria-label="Portfolio sections">
-    <ul>
-      <li v-for="item in items" :key="item.id">
-        <a
-          :href="`#${item.id}`"
-          :aria-current="
-            props.journey.activeSectionId === item.id ? 'page' : undefined
-          "
-          @click="props.onSectionLinkClick"
-          >{{ navigationLabels[item.id] }}</a
-        >
-      </li>
-    </ul>
+    <details ref="disclosure" class="site-navigation__disclosure" open>
+      <summary>Navigate</summary>
+      <ul>
+        <li v-for="item in items" :key="item.id">
+          <a
+            :href="`#${item.id}`"
+            :aria-current="
+              props.journey.activeSectionId === item.id ? 'page' : undefined
+            "
+            @click="navigate"
+            >{{ navigationLabels[item.id] }}</a
+          >
+        </li>
+      </ul>
+    </details>
   </nav>
 </template>