Trail-themed portfolio: hero hike, home camps, six-step case studies

CLAUDE.md

@@ -183,6 +183,17 @@ categories: [development, design]
 ### Page Motion (opt-in)
 Add `motion: true` to a page's front matter to load `src/js/motion.js`. On `page.njk` and `markdown.njk` layouts this fades in the page header and reveals top-level content sections (card grids stagger card by card) as they scroll into view. Pages on `base.njk` can mark elements directly with `data-reveal`, `data-reveal-group`, or `data-reveal-auto`. All motion is skipped for `prefers-reduced-motion`, and content stays visible without JS. The topographic background (`src/sass/_topo.scss`, `src/js/topo.js`) applies sitewide; regenerate its SVG with `node scripts/generate-topo.js [seed]`.
 
+### Trail Progress (opt-in)
+Pages on `base.njk` add a `camps` list to front matter to show the trail progress system: camp ticks (real anchor links), a pinned rail hiker on wide screens, and a progress track plus tick bar on small screens. Each `id` must match a section on the page, and the first camp is the trailhead.
+
+```yaml
+camps:
+  - { id: top, label: Trailhead }
+  - { id: work, label: Work }
+```
+
+`src/_includes/trail-progress.njk` renders the markup, `src/js/trail.js` moves the hiker and marks the active camp (it keeps running under `prefers-reduced-motion`, stepping between camps), and `src/sass/_trail.scss` holds the styles. The home page also reads `meta.email`; the "Email me" button stays hidden until it is set.
+
 ### Modify Site Navigation
 Edit `eleventyNavigation` in page front matter:
 - `key`: Unique identifier

src/_data/meta.js

@@ -2,6 +2,7 @@ module.exports = {
   env: process.env.ELEVENTY_ENV,
   url: process.env.URL || "http://localhost:8080",
   siteName: "Adam Jolicoeur",
+  email: "", // contact address for the "Email me" button; the button stays hidden until this is set
   siteDescription: "Product designer building AI-native products, from interaction patterns to the systems that govern them.",
   siteURL: "https://www.adamjolicoeur.com",
   authorName: "Adam J. Jolicoeur",

src/_includes/base.njk

@@ -48,7 +48,7 @@
     <script src="https://kit.fontawesome.com/0ea2a7621c.js" crossorigin="anonymous"></script>
   </head>
   <a rel="me" href="https://mastodon.world/@adamjol" aria-hidden="true" class="display-none">Mastodon</a>
-  <body>
+  <body{% if camps %} class="has-trail"{% endif %}>
     <a href="#main-content" class="skip-link">Skip to main content</a>
       <nav role="navigation" aria-label="Main navigation" class="main-nav" style="bottom: 0 !important;">
         <ul>
@@ -74,6 +74,9 @@
           </li>
         </ul>
       </nav>
+    {%- if camps %}
+    {% include 'trail-progress.njk' %}
+    {%- endif %}
     <main id="main-content">
       {{ content | safe }}
     </main>
@@ -116,5 +119,8 @@
     {%- if motion %}
     <script src="{{ '/js/motion.js' | url }}"></script>
     {%- endif %}
+    {%- if camps %}
+    <script src="{{ '/js/trail.js' | url }}"></script>
+    {%- endif %}
   </body>
 </html>

src/_includes/case-study.njk

@@ -0,0 +1,40 @@
+---
+layout: base.njk
+---
+
+{#- Six-step case study. Front matter: eyebrow, headline, deck, heroImage, heroAlt, facts [{label,value}], results [{value,label}], confidential, camps.
+    The body holds the step sections: <section id="context" class="cs-step">. Camps drive the trail progress ticks. -#}
+{%- if heroImage %}
+<section class="cs-hero" aria-label="Project hero">
+  <figure>
+    <img src="{{ heroImage | url }}" alt="{{ heroAlt }}" width="1600" height="1000" fetchpriority="high" />
+  </figure>
+</section>
+{%- endif %}
+
+<section id="top" class="cs-top" aria-labelledby="cs-headline">
+  <p class="cs-eyebrow">{{ eyebrow }}</p>
+  <h1 id="cs-headline" class="cs-headline">{{ headline }}</h1>
+  <p class="cs-deck">{{ deck }}</p>
+  {%- if facts %}
+  <dl class="cs-facts">
+    {%- for fact in facts %}
+    <div><dt>{{ fact.label }}</dt><dd>{{ fact.value }}</dd></div>
+    {%- endfor %}
+  </dl>
+  {%- endif %}
+  {%- if results %}
+  <ul class="cs-results">
+    {%- for r in results %}
+    <li><span class="cs-result-value">{{ r.value }}</span><span>{{ r.label }}</span></li>
+    {%- endfor %}
+  </ul>
+  {%- endif %}
+  {%- if confidential %}<p class="cs-note">Some details are omitted for confidentiality.</p>{%- endif %}
+</section>
+
+<content{% if motion %} data-reveal-auto{% endif %}>
+  {{ content | safe }}
+</content>
+
+{% include "case-study-nav.njk" %}

src/_includes/trail-progress.njk

@@ -0,0 +1,37 @@
+{#- Trail progress: camp ticks (real anchor links), a pinned rail hiker on desktop, and a progress track on phones.
+    Opted into with a `camps` list in front matter: [{ id: 'work', label: 'Work' }, ...]. The first camp is the trailhead.
+    js/trail.js adds the moving parts; without JS the ticks are plain links. -#}
+{%- set lastCamp = camps.length - 1 -%}
+{%- set hikerPath -%}
+<svg class="trail-hiker" viewBox="-9 -23 20 26" width="22" height="28" aria-hidden="true" focusable="false">
+  <g stroke="currentColor" stroke-width="2" stroke-linecap="round">
+    <line x1="0" y1="-8" x2="-2" y2="0" />
+    <line x1="0" y1="-8" x2="2" y2="0" />
+    <line x1="0" y1="-8" x2="0.6" y2="-16" />
+    <line x1="3.5" y1="-12" x2="6" y2="0" />
+    <rect class="trail-hiker-pack" x="-5.5" y="-16" width="4.5" height="7.5" rx="1.5" stroke="none" />
+    <circle cx="1.2" cy="-19" r="2.6" fill="currentColor" stroke="none" />
+  </g>
+</svg>
+{%- endset -%}
+<div class="trail-ticks" role="navigation" aria-label="Trail camps">
+  <ol>
+    {%- for camp in camps %}
+    <li>
+      <a href="#{{ camp.id }}" data-camp="{{ camp.id }}" aria-label="{{ camp.label }}" title="{{ camp.label }}"><span class="trail-tick" aria-hidden="true"></span></a>
+    </li>
+    {%- endfor %}
+  </ol>
+  <span class="trail-count" data-trail-count data-last="{{ lastCamp }}">Camp 0 / {{ lastCamp }}</span>
+</div>
+<div class="trail-rail" data-trail-rail aria-hidden="true">
+  <span class="trail-rail-line"></span>
+  <span class="trail-rail-fill"></span>
+  <span class="trail-rail-hiker">{{ hikerPath | safe }}</span>
+  <span class="trail-rail-flag"></span>
+</div>
+<div class="trail-track" data-trail-track role="progressbar" aria-label="Trail progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
+  <span class="trail-track-line"></span>
+  <span class="trail-track-fill"></span>
+  <span class="trail-track-hiker">{{ hikerPath | safe }}</span>
+</div>