heyiam 0.2.29 → 0.3.0

package/dist/render/templates/parallax/portfolio.liquid

@@ -0,0 +1,305 @@
+<div class="heyiam-portfolio parallax" data-render-version="2" data-template="parallax" data-username="{{ user.username }}">
+
+  <a href="#main-content" class="skip-link">Skip to content</a>
+
+  <!-- Background Shapes -->
+  <div class="bg-shapes" aria-hidden="true">
+    <div class="bg-shape bg-shape--1" data-bg-drift="0.15"></div>
+    <div class="bg-shape bg-shape--2" data-bg-drift="0.25"></div>
+    <div class="bg-shape bg-shape--3" data-bg-drift="0.1"></div>
+    <div class="bg-shape bg-shape--4" data-bg-drift="0.2"></div>
+    <div class="bg-shape bg-shape--5" data-bg-drift="0.35"></div>
+    <div class="bg-shape bg-shape--6" data-bg-drift="0.12"></div>
+    <div class="bg-shape bg-shape--7" data-bg-drift="0.3"></div>
+    <div class="bg-shape bg-shape--8" data-bg-drift="0.18"></div>
+  </div>
+
+  {% if hasProfile %}
+  {% if user.photoUrl %}
+  <!-- Fixed Photo Layer -->
+  <div class="photo-layer" aria-hidden="true">
+    <img
+      class="photo-fixed"
+      src="{{ user.photoUrl }}"
+      alt=""
+      width="420"
+      height="420"
+    >
+  </div>
+  {% endif %}
+  {% endif %}
+
+  <!-- Scrollable Content Layer -->
+  <div class="content-layer">
+    <main id="main-content">
+
+      {% if hasProfile %}
+      <!-- Hero -->
+      <section class="hero" aria-label="Introduction">
+        {% if user.photoUrl %}
+        <span class="sr-only">{{ user.displayName }}, profile photo</span>
+        {% endif %}
+
+        {% if user.displayName != blank %}
+        <h1 class="hero__name">{{ user.displayName }}</h1>
+        {% endif %}
+
+        {% if user.location != blank %}
+        <p class="hero__location">{{ user.location }}</p>
+        {% endif %}
+
+        {% if user.bio != blank %}
+        <p class="hero__bio">{{ user.bio }}</p>
+        {% endif %}
+
+        {% if user.email != blank or user.linkedinUrl != blank or user.githubUrl != blank or user.websiteUrl != blank or user.twitterHandle != blank %}
+        <div class="hero__contact">
+          {% if user.email != blank %}
+          <a href="mailto:{{ user.email }}" class="hero__contact-link">{{ user.email }}</a>
+          {% endif %}
+          {% if user.linkedinUrl != blank %}
+          {% if user.email != blank %}<span class="hero__contact-sep" aria-hidden="true">&middot;</span>{% endif %}
+          <a href="{{ user.linkedinUrl }}" class="hero__contact-link" rel="noopener noreferrer" target="_blank">LinkedIn</a>
+          {% endif %}
+          {% if user.githubUrl != blank %}
+          <span class="hero__contact-sep" aria-hidden="true">&middot;</span>
+          <a href="{{ user.githubUrl }}" class="hero__contact-link" rel="noopener noreferrer" target="_blank">GitHub</a>
+          {% endif %}
+          {% if user.websiteUrl != blank %}
+          <span class="hero__contact-sep" aria-hidden="true">&middot;</span>
+          <a href="{{ user.websiteUrl }}" class="hero__contact-link" rel="noopener noreferrer" target="_blank">{{ user.websiteUrl | stripProtocol }}</a>
+          {% endif %}
+          {% if user.twitterHandle != blank %}
+          <span class="hero__contact-sep" aria-hidden="true">&middot;</span>
+          <a href="https://x.com/{{ user.twitterHandle }}" class="hero__contact-link" rel="noopener noreferrer" target="_blank">@{{ user.twitterHandle }}</a>
+          {% endif %}
+        </div>
+        {% endif %}
+
+        <div class="stats-row" aria-label="Aggregate statistics">
+          <div class="stat-card">
+            <div class="stat-card__value">{{ projects.size }}</div>
+            <div class="stat-card__label">Projects</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-card__value">{{ totalSessions | localeNumber }}</div>
+            <div class="stat-card__label">Sessions</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-card__value">{{ totalLoc | formatLoc }}</div>
+            <div class="stat-card__label">Lines Changed</div>
+          </div>
+        </div>
+
+        {% if efficiencyMultiplier %}
+        <div class="px-leverage" role="figure" aria-label="{{ totalDurationMinutes | formatDuration }} you, {{ totalAgentDurationMinutes | formatDuration }} agents, {{ efficiencyMultiplier }} leverage">
+          <span class="px-leverage__multi">{{ efficiencyMultiplier }}&times;</span>
+          <div class="px-leverage__line" aria-hidden="true"></div>
+          <div class="px-leverage__values">
+            <span>{{ totalDurationMinutes | formatDuration }} <small>you</small></span>
+            <span style="color:var(--px-accent-blue)">{{ totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+          </div>
+        </div>
+        {% endif %}
+      </section>
+
+      {% if user.photoUrl %}
+      <!-- Transition spacer — photo shows through this gap -->
+      <div class="transition-spacer" aria-hidden="true"></div>
+      {% endif %}
+      {% endif %}
+
+      <!-- Skills Overview -->
+      {% assign all_skills = "" %}
+      {% for p in projects %}
+        {% for s in p.skills %}
+          {% unless all_skills contains s %}
+            {% if all_skills != "" %}{% assign all_skills = all_skills | append: "|||" %}{% endif %}
+            {% assign all_skills = all_skills | append: s %}
+          {% endunless %}
+        {% endfor %}
+      {% endfor %}
+      {% assign skills_arr = all_skills | split: "|||" %}
+      {% if skills_arr.size > 0 %}
+      <div class="skills-overview section--opaque">
+        <h2 class="skills-overview__title reveal">Technology Expertise</h2>
+        <div class="skills-cloud reveal-stagger">
+          {% for skill in skills_arr %}
+          <span class="skills-cloud__chip reveal">{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+
+      <!-- Projects -->
+      {% if projects.size > 0 %}
+      <section class="section section--opaque" aria-label="Projects">
+        <h2 class="section__title reveal">Projects</h2>
+        <div class="project-grid reveal-stagger">
+          {% for p in projects %}
+          <a href="/{{ user.username }}/{{ p.slug }}" class="project-card reveal" data-float="0.08">
+            <h3 class="project-card__name">{{ p.title }}</h3>
+            {% if p.narrative != blank %}
+            <p class="project-card__narrative">{{ p.narrative }}</p>
+            {% endif %}
+            {% if p.skills.size > 0 %}
+            <div class="project-card__skills">
+              {% for skill in p.skills %}
+              <span class="skill-chip">{{ skill }}</span>
+              {% endfor %}
+            </div>
+            {% endif %}
+            <div class="project-card__stats">
+              <span>{{ p.totalSessions }} sessions</span>
+              <span>{{ p.totalDurationMinutes | formatDuration }}</span>
+              <span>{{ p.totalLoc | formatLoc }} LOC</span>
+            </div>
+            {% if p.sourceCounts.size > 0 %}
+            {% assign firstSrc = p.sourceCounts | first %}
+            {% assign firstPct = firstSrc.count | times: 100 | divided_by: p.totalSessions %}
+            <div class="source-bar" aria-label="Source mix: {{ firstSrc.tool }} {{ firstPct }}%">
+              <div class="source-bar__fill" style="width: {{ firstPct }}%"></div>
+            </div>
+            <div class="project-card__source">
+              {% for sc in p.sourceCounts %}
+              {% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}
+              <span>{{ sc.tool }} {{ pct }}%</span>
+              {% endfor %}
+            </div>
+            {% endif %}
+          </a>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      <!-- Approach Section -->
+      <section class="section section--opaque" aria-label="Development approach">
+        <h2 class="section__title reveal">How I Work</h2>
+
+        <div class="approach-grid reveal-stagger">
+          <div class="approach-card reveal" data-float="0.06">
+            <div class="approach-card__icon" aria-hidden="true">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M12 2L2 7l10 5 10-5-10-5z"/>
+                <path d="M2 17l10 5 10-5"/>
+                <path d="M2 12l10 5 10-5"/>
+              </svg>
+            </div>
+            <h3 class="approach-card__title">Schema First</h3>
+            <p class="approach-card__desc">
+              Data models before UI. If the schema is right, the rest follows.
+              Discriminated unions over nullable columns.
+            </p>
+          </div>
+
+          <div class="approach-card reveal" data-float="0.09">
+            <div class="approach-card__icon" aria-hidden="true">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+              </svg>
+            </div>
+            <h3 class="approach-card__title">Performance Budget</h3>
+            <p class="approach-card__desc">
+              Every query has a target. Partial indexes, connection pooling,
+              and profiling before shipping.
+            </p>
+          </div>
+
+          <div class="approach-card reveal" data-float="0.07">
+            <div class="approach-card__icon" aria-hidden="true">
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+                <circle cx="12" cy="12" r="10"/>
+                <path d="M12 6v6l4 2"/>
+              </svg>
+            </div>
+            <h3 class="approach-card__title">AI as Multiplier</h3>
+            <p class="approach-card__desc">
+              AI handles boilerplate so I can focus on architecture decisions.
+              Every session is recorded to show the real process.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <!-- Recent Activity Timeline -->
+      {% assign allSessionEntries = "" %}
+      {% for p in projects %}
+        {% for s in p.sessions %}
+          {% if allSessionEntries != "" %}{% assign allSessionEntries = allSessionEntries | append: "|||" %}{% endif %}
+          {% assign entry = s.date | append: ":::" | append: p.title | append: ":::" | append: s.durationMinutes | append: ":::" | append: s.loc %}
+          {% assign allSessionEntries = allSessionEntries | append: entry %}
+        {% endfor %}
+      {% endfor %}
+      {% assign sessionList = allSessionEntries | split: "|||" | sort | reverse %}
+      {% if sessionList.size > 0 %}
+      <section class="section section--opaque" aria-label="Recent activity">
+        <h2 class="section__title reveal">Recent Activity</h2>
+        <div class="timeline reveal">
+          {% for entry in sessionList limit: 8 %}
+          {% assign parts = entry | split: ":::" %}
+          {% assign entryDate = parts[0] %}
+          {% assign entryProject = parts[1] %}
+          {% assign entryDuration = parts[2] %}
+          {% assign entryLoc = parts[3] %}
+          <div class="timeline__item" data-float="0.0{{ forloop.index | modulo: 4 | plus: 5 }}">
+            <div class="timeline__dot"></div>
+            <div class="timeline__date">{{ entryDate | formatDate }}</div>
+            <div class="timeline__meta">{{ entryProject }} &middot; {{ entryDuration | times: 1 | formatDuration }} &middot; {{ entryLoc }} LOC</div>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      <!-- About / Connect -->
+      {% if user.email != blank or user.linkedinUrl != blank or user.githubUrl != blank or user.websiteUrl != blank or user.twitterHandle != blank or user.resumeUrl != blank %}
+      <section class="about-section about-section--opaque" aria-label="About and links">
+        <div class="about-grid">
+          <div class="about-card reveal" data-float="0.06">
+            <h2 class="about-card__title">Connect</h2>
+            {% if user.email != blank %}
+            <a href="mailto:{{ user.email }}" class="about-card__link">{{ user.email }}</a>
+            {% endif %}
+            {% if user.linkedinUrl != blank %}
+            <a href="{{ user.linkedinUrl }}" class="about-card__link" rel="noopener noreferrer" target="_blank">{{ user.linkedinUrl | stripProtocol }}</a>
+            {% endif %}
+            {% if user.githubUrl != blank %}
+            <a href="{{ user.githubUrl }}" class="about-card__link" rel="noopener noreferrer" target="_blank">{{ user.githubUrl | stripProtocol }}</a>
+            {% endif %}
+            {% if user.websiteUrl != blank %}
+            <a href="{{ user.websiteUrl }}" class="about-card__link" rel="noopener noreferrer" target="_blank">{{ user.websiteUrl | stripProtocol }}</a>
+            {% endif %}
+            {% if user.twitterHandle != blank %}
+            <a href="https://x.com/{{ user.twitterHandle }}" class="about-card__link" rel="noopener noreferrer" target="_blank">@{{ user.twitterHandle }}</a>
+            {% endif %}
+          </div>
+          {% if user.resumeUrl != blank %}
+          <div class="about-card reveal" data-float="0.09">
+            <h2 class="about-card__title">Resume</h2>
+            <p style="font-size: 0.875rem; color: var(--px-text-secondary); margin-block-end: 1rem;">
+              Download my full resume for a deeper look at experience and education.
+            </p>
+            <a href="{{ user.resumeUrl }}" class="resume-btn" download>
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                <path d="M8 1v10m0 0L4.5 7.5M8 11l3.5-3.5M2 14h12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              </svg>
+              Download Resume
+            </a>
+          </div>
+          {% endif %}
+        </div>
+      </section>
+      {% endif %}
+
+    </main>
+
+    <!-- Footer -->
+    <footer class="site-footer footer--opaque">
+      <p>Built with <a href="https://heyi.am">heyi.am</a> &mdash; signal over noise.</p>
+    </footer>
+  </div>
+
+  <!-- JavaScript: Parallax, Reveals, Counters -->
+
+</div>

package/dist/render/templates/parallax/project.liquid

@@ -0,0 +1,275 @@
+<div class="heyiam-project parallax" data-render-version="2" data-template="parallax"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  <a href="#main-content" class="skip-link">Skip to content</a>
+
+  <!-- Background Shapes -->
+  <div class="bg-shapes" aria-hidden="true">
+    <div class="bg-shape bg-shape--1"></div>
+    <div class="bg-shape bg-shape--2"></div>
+    <div class="bg-shape bg-shape--3"></div>
+    <div class="bg-shape bg-shape--4"></div>
+    <div class="bg-shape bg-shape--5"></div>
+    <div class="bg-shape bg-shape--6"></div>
+  </div>
+
+  <!-- Main Content -->
+  <main id="main-content">
+
+    <!-- Project Hero -->
+    <section class="project-hero" aria-label="Project overview">
+      {% if project.screenshotUrl != blank %}
+      <div class="project-hero__screenshot" data-parallax="0.06" role="img" aria-label="{{ project.title }} screenshot">
+        <div class="browser-frame" data-editable="screenshot">
+          <div class="browser-frame__bar">
+            <div class="browser-frame__dot"></div>
+            <div class="browser-frame__dot"></div>
+            <div class="browser-frame__dot"></div>
+            <div class="browser-frame__url">Preview</div>
+          </div>
+          <div class="browser-frame__viewport">
+            <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot">
+          </div>
+        </div>
+      </div>
+      {% else %}
+      <div class="project-hero__screenshot" data-parallax="0.06" role="img" aria-label="{{ project.title }} placeholder"></div>
+      {% endif %}
+
+      <h1 class="project-hero__title">{{ project.title }}</h1>
+
+      {% if project.repoUrl != blank or project.projectUrl != blank %}
+      <div class="project-hero__links">
+        {% if project.repoUrl != blank %}
+        <a href="{{ project.repoUrl }}" class="project-hero__link" rel="noopener noreferrer" target="_blank">{{ project.repoUrl | stripProtocol }}</a>
+        {% endif %}
+        {% if project.repoUrl != blank and project.projectUrl != blank %}
+        <span style="color: var(--px-text-tertiary);" aria-hidden="true">&middot;</span>
+        {% endif %}
+        {% if project.projectUrl != blank %}
+        <a href="{{ project.projectUrl }}" class="project-hero__link" rel="noopener noreferrer" target="_blank">{{ project.projectUrl | stripProtocol }}</a>
+        {% endif %}
+      </div>
+      {% endif %}
+    </section>
+
+    <!-- Narrative -->
+    {% if project.narrative != blank %}
+    <section class="section" aria-label="Project narrative">
+      <h2 class="section__label reveal">Narrative</h2>
+      <div class="narrative reveal">
+        <p>{{ project.narrative }}</p>
+      </div>
+    </section>
+    {% endif %}
+
+    <!-- Stats -->
+    <section class="section" aria-label="Project statistics">
+      <div class="stats-bar" data-stats-fly>
+        <div class="stats-bar__item fly-left">
+          <div class="stats-bar__value">{{ project.totalSessions }}</div>
+          <div class="stats-bar__label">Sessions</div>
+        </div>
+        <div class="stats-bar__item fly-right">
+          <div class="stats-bar__value">{{ project.totalLoc | formatLoc }}</div>
+          <div class="stats-bar__label">LOC</div>
+        </div>
+        <div class="stats-bar__item fly-right">
+          <div class="stats-bar__value">{{ project.totalFilesChanged | localeNumber }}</div>
+          <div class="stats-bar__label">Files</div>
+        </div>
+        {% if project.totalTokens %}
+        <div class="stats-bar__item fly-left">
+          <div class="stats-bar__value">{{ project.totalTokens | formatTokens }}</div>
+          <div class="stats-bar__label">Tokens</div>
+        </div>
+        {% endif %}
+      </div>
+
+      {% if efficiencyMultiplier %}
+      <div class="px-leverage" role="figure" aria-label="{{ project.totalDurationMinutes | formatDuration }} you, {{ project.totalAgentDurationMinutes | formatDuration }} agents, {{ efficiencyMultiplier }} leverage">
+        <span class="px-leverage__multi">{{ efficiencyMultiplier }}&times;</span>
+        <div class="px-leverage__line" aria-hidden="true"></div>
+        <div class="px-leverage__values">
+          <span>{{ project.totalDurationMinutes | formatDuration }} <small>you</small></span>
+          <span style="color:var(--px-accent-blue)">{{ project.totalAgentDurationMinutes | formatDuration }} <small>agents</small></span>
+        </div>
+      </div>
+      {% endif %}
+    </section>
+
+    <!-- Work Timeline -->
+    {% if featuredSessions.size > 0 %}
+    {% assign maxLoc = 1 %}
+    {% for s in featuredSessions %}
+      {% if s.locChanged > maxLoc %}{% assign maxLoc = s.locChanged %}{% endif %}
+    {% endfor %}
+    <section class="section" aria-label="Work timeline">
+      <h2 class="section__label reveal">Work Timeline</h2>
+      <div class="timeline-chart reveal" role="table" aria-label="Session work timeline">
+        {% for s in featuredSessions %}
+        <div class="timeline-chart__row" role="row">
+          <span class="timeline-chart__num" role="cell">{{ forloop.index }}</span>
+          <div class="timeline-chart__bar-wrap" role="cell">
+            {% assign barPct = s.locChanged | times: 100 | divided_by: maxLoc | round %}
+            <div class="timeline-chart__bar bar--claude" data-bar-width="{{ barPct }}" style="width: 0%;">
+              <span class="timeline-chart__bar-label">{{ s.title }}</span>
+            </div>
+          </div>
+          <span class="timeline-chart__loc" role="cell">{{ s.locChanged | formatLoc }} LOC</span>
+        </div>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    <!-- Growth Chart -->
+    {% if featuredSessions.size > 1 %}
+    {% assign cumulativeLoc = 0 %}
+    {% assign maxCumLoc = 0 %}
+    {% for s in featuredSessions %}
+      {% assign cumulativeLoc = cumulativeLoc | plus: s.locChanged %}
+      {% if cumulativeLoc > maxCumLoc %}{% assign maxCumLoc = cumulativeLoc %}{% endif %}
+    {% endfor %}
+    <section class="section" aria-label="Cumulative LOC growth">
+      <h2 class="section__label reveal">Growth</h2>
+      <div class="growth-chart reveal" aria-label="Line chart showing cumulative lines of code over {{ featuredSessions.size }} sessions">
+        <svg viewBox="0 0 600 200" preserveAspectRatio="xMidYMid meet" role="img" aria-hidden="true">
+          <defs>
+            <linearGradient id="blueGradient" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="0%" stop-color="rgba(96, 165, 250, 0.2)" />
+              <stop offset="100%" stop-color="rgba(96, 165, 250, 0)" />
+            </linearGradient>
+          </defs>
+          <!-- Grid lines -->
+          <line x1="60" y1="170" x2="570" y2="170" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
+          <line x1="60" y1="127" x2="570" y2="127" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
+          <line x1="60" y1="85" x2="570" y2="85" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
+          <line x1="60" y1="42" x2="570" y2="42" stroke="rgba(255,255,255,0.05)" stroke-width="1" />
+          <!-- Area + Line rendered by script from data points -->
+          <polygon class="growth-area" points="" />
+          <polyline class="growth-line" points="" />
+          {% assign runningLoc = 0 %}
+          {% assign stepX = 510 | divided_by: featuredSessions.size %}
+          {% for s in featuredSessions %}
+            {% assign runningLoc = runningLoc | plus: s.locChanged %}
+            {% assign cx = forloop.index0 | times: stepX | plus: 60 %}
+            {% assign yRatio = runningLoc | times: 128 | divided_by: maxCumLoc %}
+            {% assign cy = 170 | minus: yRatio %}
+            <circle class="growth-dot" cx="{{ cx }}" cy="{{ cy }}" data-loc="{{ runningLoc }}" />
+          {% endfor %}
+        </svg>
+        <div class="growth-chart__labels">
+          {% for s in featuredSessions %}
+          <span>S{{ forloop.index }}</span>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+    {% endif %}
+
+    <!-- Phases -->
+    {% if arc.size > 0 %}
+    <section class="section" aria-label="Project phases">
+      <h2 class="section__label reveal">Phases</h2>
+      <div class="phase-timeline">
+        {% for phase in arc %}
+        <article class="phase-item" data-phase-index="{{ forloop.index0 }}">
+          <div class="phase-item__dot" aria-hidden="true"></div>
+          <div class="phase-item__num">Phase {{ phase.phase }}</div>
+          <h3 class="phase-item__title">{{ phase.title }}</h3>
+          {% if phase.dates != blank %}
+          <div class="phase-item__dates">{{ phase.dates }}</div>
+          {% endif %}
+          {% if phase.description != blank %}
+          <p class="phase-item__desc">{{ phase.description }}</p>
+          {% endif %}
+        </article>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    <!-- Skills -->
+    {% if project.skills.size > 0 %}
+    <section class="section" aria-label="Skills used">
+      <h2 class="section__label reveal">Skills</h2>
+      <div class="skills-wrap reveal">
+        {% for skill in project.skills %}
+        <span class="skill-tag">{{ skill }}</span>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+    <!-- Key Decisions -->
+    {% if arc.size > 0 %}
+    <section class="section" aria-label="Key decisions">
+      <h2 class="section__label reveal">Key Decisions</h2>
+      <ol class="decisions-list reveal">
+        {% for item in arc %}
+        <li>{{ item.description }}</li>
+        {% endfor %}
+      </ol>
+    </section>
+    {% endif %}
+
+    <!-- Source Breakdown -->
+    {% if sourceCounts.size > 0 %}
+    <section class="section" aria-label="Source breakdown">
+      <h2 class="section__label reveal">Source Breakdown</h2>
+      <div class="source-breakdown reveal">
+        <svg class="source-ring" viewBox="0 0 80 80" aria-hidden="true">
+          <circle class="source-ring__bg" cx="40" cy="40" r="31.4" />
+          {% for src in sourceCounts %}
+          <circle class="source-ring__segment" cx="40" cy="40" r="31.4"
+            style="stroke: var(--px-accent-blue); stroke-dasharray: 197; stroke-dashoffset: {{ 197 | times: src.count | divided_by: project.totalSessions | times: -1 | plus: 197 }}; transform: rotate(-90deg); transform-origin: center;" />
+          {% endfor %}
+        </svg>
+        <div class="source-legend">
+          {% for src in sourceCounts %}
+          <div class="source-legend__item">
+            <div class="source-legend__dot" style="background: var(--px-accent-blue);"></div>
+            <span>{{ src.tool }} &mdash; {{ src.count | times: 100.0 | divided_by: project.totalSessions | round }}% ({{ src.count }} sessions)</span>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+    </section>
+    {% endif %}
+
+    <!-- Featured Sessions -->
+    {% if featuredSessions.size > 0 %}
+    <section class="section" aria-label="Featured sessions">
+      <h2 class="section__label reveal">Sessions</h2>
+      <div class="session-grid" data-session-grid>
+        {% for s in featuredSessions %}
+        <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="session-card">
+          <div class="session-card__num">Session {{ forloop.index }}</div>
+          <h3 class="session-card__title">{{ s.title }}</h3>
+          {% if s.devTake != blank %}
+          <p class="session-card__take">{{ s.devTake }}</p>
+          {% endif %}
+          <div class="session-card__meta">
+            <span>{{ s.durationMinutes | formatDuration }}</span>
+            <span>{{ s.locChanged | formatLoc }} LOC</span>
+            <span>{{ s.filesChanged }} files</span>
+          </div>
+          {% if s.skills.size > 0 %}
+          <span class="session-card__tag">{{ s.skills | first }}</span>
+          {% endif %}
+        </a>
+        {% endfor %}
+      </div>
+    </section>
+    {% endif %}
+
+  </main>
+
+  <!-- Footer -->
+  <footer class="site-footer">
+    <p>Built with <a href="https://heyi.am">heyi.am</a> &mdash; signal over noise.</p>
+  </footer>
+
+  <!-- JavaScript: Parallax, Entrance Animations -->
+
+</div>