feat: route-map navigation, persisted progress with a resume point, Alt+arrow exit keys and a trip log

src/components/HeroJourney.vue

@@ -5,11 +5,14 @@ import NameParticles from './NameParticles.vue';
 withDefaults(defineProps<{
   identity: Readonly<PortfolioContent['identity']>;
   allowMotion?: boolean;
-}>(), { allowMotion: false });
+  /** Where a returning visitor left the road (client-only, after mount). */
+  resume?: { id: string; exit: string; label: string } | null;
+}>(), { allowMotion: false, resume: null });
 
 const emit = defineEmits<{
   explore: [event: MouseEvent];
   contact: [event: MouseEvent];
+  resume: [event: MouseEvent];
 }>();
 </script>
 
@@ -24,6 +27,17 @@ const emit = defineEmits<{
         <a class="hero-journey__action hero-journey__action--primary" href="#contact" @click="emit('contact', $event)">Contact Me</a>
         <a class="hero-journey__action" href="#selected-builds" @click="emit('explore', $event)">Explore work</a>
       </div>
+      <!-- The visible label is CSS generated content, so the hydrated text stays
+           identical to the server document; the accessible name is the aria-label. -->
+      <a
+        v-if="resume"
+        class="hero-journey__resume"
+        :href="`#${resume.id}`"
+        :data-exit="resume.exit"
+        :data-label="resume.label"
+        :aria-label="`Resume the drive at ${resume.label}, exit ${resume.exit}`"
+        @click="emit('resume', $event)"
+      ></a>
     </div>
     <p class="print-portfolio-label" aria-hidden="true">Portfolio</p>
   </section>