heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,333 @@
+<div class="heyiam-portfolio verdant" data-render-version="2" data-template="verdant" data-username="{{ user.username }}">
+
+  <div class="vd-page">
+
+    <main id="main-content">
+
+      {% if hasProfile %}
+      {%- comment -%} Hero / Profile {%- endcomment -%}
+      <section class="vd-section vd-hero" aria-label="Profile">
+        {% if user.photoUrl %}
+        <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="vd-hero__photo" width="120" height="120">
+        {% elsif user.displayName != blank %}
+        <div class="vd-hero__avatar" aria-hidden="true">{{ user.displayName | slice: 0 }}</div>
+        {% endif %}
+        {% if user.displayName != blank %}
+        <h1>{{ user.displayName }}</h1>
+        {% endif %}
+        {% if user.bio != blank %}
+        <p class="vd-hero__bio">{{ user.bio }}</p>
+        {% endif %}
+        {% if user.location != blank %}
+        <p class="vd-hero__location">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"/><circle cx="12" cy="10" r="3"/></svg>
+          {{ user.location }}
+        </p>
+        {% endif %}
+        {% if user.email or user.linkedinUrl or user.githubUrl or user.twitterHandle or user.websiteUrl or user.resumeUrl %}
+        <div class="vd-hero__links">
+          {% if user.email %}
+          <a href="mailto:{{ user.email }}">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m2 4 10 8 10-8"/></svg>
+            {{ user.email }}
+          </a>
+          {% endif %}
+          {% if user.phone %}
+          <a href="tel:{{ user.phone }}">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
+            {{ user.phone }}
+          </a>
+          {% endif %}
+          {% if user.linkedinUrl %}
+          <a href="{{ user.linkedinUrl }}">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M20.5 2h-17A1.5 1.5 0 002 3.5v17A1.5 1.5 0 003.5 22h17a1.5 1.5 0 001.5-1.5v-17A1.5 1.5 0 0020.5 2zM8 19H5v-9h3zM6.5 8.25A1.75 1.75 0 118.3 6.5a1.78 1.78 0 01-1.8 1.75zM19 19h-3v-4.74c0-1.42-.6-1.93-1.38-1.93A1.74 1.74 0 0013 14.19V19h-3v-9h2.9v1.3a3.11 3.11 0 012.7-1.4c1.55 0 3.36.86 3.36 3.66z"/></svg>
+            LinkedIn
+          </a>
+          {% endif %}
+          {% if user.githubUrl %}
+          <a href="{{ user.githubUrl }}">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"/></svg>
+            GitHub
+          </a>
+          {% endif %}
+          {% if user.twitterHandle %}
+          <a href="https://x.com/{{ user.twitterHandle }}">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
+            @{{ user.twitterHandle }}
+          </a>
+          {% endif %}
+          {% if user.websiteUrl %}
+          <a href="{{ user.websiteUrl }}">{{ user.websiteUrl | stripProtocol }}</a>
+          {% endif %}
+          {% if user.resumeUrl %}
+          <a href="{{ user.resumeUrl }}">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="12" y1="18" x2="12" y2="12"/><polyline points="9 15 12 18 15 15"/></svg>
+            Resume (PDF)
+          </a>
+          {% endif %}
+        </div>
+        {% endif %}
+      </section>
+      {% endif %}
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+
+      {%- comment -%} Aggregate Stats {%- endcomment -%}
+      <section class="vd-section" aria-label="Statistics">
+        <div class="vd-stats">
+          <div class="vd-stat-card">
+            <div class="vd-stat-value">{{ projects.size }}</div>
+            <div class="vd-stat-label">Projects</div>
+          </div>
+          <div class="vd-stat-card">
+            <div class="vd-stat-value">{{ totalSessions }}</div>
+            <div class="vd-stat-label">Sessions</div>
+          </div>
+          {% if efficiencyMultiplier %}
+          <div class="vd-stat-card">
+            {% assign totalCombined = totalDurationMinutes | plus: totalAgentDurationMinutes %}
+            {% if totalCombined > 0 %}
+            {% assign humanPct = totalDurationMinutes | times: 100 | divided_by: totalCombined %}
+            {% assign agentPct = 100 | minus: humanPct %}
+            <div style="display: flex; align-items: center; gap: 4px; margin-bottom: 6px;">
+              <div style="flex: {{ humanPct }}; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.12);"></div>
+              <div style="flex: {{ agentPct }}; height: 6px; border-radius: 3px; background: var(--vd-accent);"></div>
+            </div>
+            {% endif %}
+            <div style="display: flex; justify-content: space-between; align-items: baseline;">
+              <div class="vd-stat-value" style="font-size: 1.125rem;">{{ totalDurationMinutes | formatDuration }}</div>
+              <div class="vd-stat-value" style="font-size: 1.125rem; color: var(--vd-accent);">{{ totalAgentDurationMinutes | formatDuration }}</div>
+            </div>
+            <div style="display: flex; justify-content: space-between;">
+              <div class="vd-stat-label">You</div>
+              <div class="vd-stat-label">Agents</div>
+            </div>
+          </div>
+          <div class="vd-stat-card">
+            <div class="vd-stat-value" style="color: var(--vd-accent);">{{ efficiencyMultiplier }}</div>
+            <div class="vd-stat-label">Multiplier</div>
+          </div>
+          {% else %}
+          <div class="vd-stat-card">
+            <div class="vd-stat-value">{{ totalDurationMinutes | formatDuration }}</div>
+            <div class="vd-stat-label">Time</div>
+          </div>
+          {% endif %}
+          <div class="vd-stat-card">
+            <div class="vd-stat-value">{{ totalLoc | formatLoc }}</div>
+            <div class="vd-stat-label">Lines Changed</div>
+          </div>
+        </div>
+      </section>
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M6.5 21.5s2-3 2-6c0-4-3-6-3-6s3 1 6 1 7-2 7-2-1 4-1 7-1.5 6-1.5 6"/>
+          <path d="M8 14s-1.5-2-1.5-4 2-4.5 2-4.5"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+
+      {%- comment -%} Projects {%- endcomment -%}
+      {% if projects.size > 0 %}
+      <section class="vd-section" aria-label="Projects">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>
+          </div>
+          <h2>Projects</h2>
+        </div>
+
+        <div class="vd-projects-grid">
+          {% for p in projects %}
+          <a href="/{{ user.username }}/{{ p.slug }}" class="vd-project-card">
+            <div class="vd-project-card__header">
+              <h3>{{ p.title }}</h3>
+              <span class="vd-project-card__arrow" aria-hidden="true">&rarr;</span>
+            </div>
+            {% if p.narrative != blank %}
+            <p class="vd-project-card__narrative">{{ p.narrative }}</p>
+            {% endif %}
+            <div class="vd-project-card__meta">
+              <span>{{ p.totalSessions }} sessions</span>
+              <span>&middot;</span>
+              <span>{{ p.totalDurationMinutes | formatDuration }}</span>
+              <span>&middot;</span>
+              <span>{{ p.totalLoc | formatLoc }} LOC</span>
+            </div>
+            {% if p.skills.size > 0 %}
+            <div class="vd-skills" aria-label="Skills used">
+              {% for skill in p.skills %}
+              <span class="vd-skill-chip">{{ skill }}</span>
+              {% endfor %}
+            </div>
+            {% endif %}
+            {% if p.sourceCounts.size > 0 %}
+            {% assign pFirstSrc = p.sourceCounts | first %}
+            {% assign pFirstPct = pFirstSrc.count | times: 100.0 | divided_by: p.totalSessions | round %}
+            <div class="vd-source-bar" aria-label="Source mix: {{ pFirstSrc.tool }} {{ pFirstPct }}%">
+              <div class="vd-source-bar-fill" data-width="{{ pFirstPct }}"></div>
+            </div>
+            <div class="vd-source-labels">
+              {% for src in p.sourceCounts %}
+              {% assign sPct = src.count | times: 100.0 | divided_by: p.totalSessions | round %}
+              <span>{{ src.tool }} {{ sPct }}%</span>
+              {% endfor %}
+            </div>
+            {% endif %}
+          </a>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      {% if allSkills.size > 0 %}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M6.5 21.5s2-3 2-6c0-4-3-6-3-6s3 1 6 1 7-2 7-2-1 4-1 7-1.5 6-1.5 6"/>
+          <path d="M8 14s-1.5-2-1.5-4 2-4.5 2-4.5"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+
+      {%- comment -%} Skills Garden {%- endcomment -%}
+      <section class="vd-section" aria-label="Skills overview">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+          </div>
+          <h2>Skills Garden</h2>
+        </div>
+        <div class="vd-skills-garden">
+          {% for skill in allSkills %}
+          <span class="vd-skill-garden-chip{% if skill.projectCount >= 4 %} vd-skill-garden-chip--primary{% elsif skill.projectCount >= 2 %} vd-skill-garden-chip--secondary{% endif %}">{{ skill.name }}</span>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      {% if sourceCounts.size > 0 %}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+
+      {%- comment -%} Source Overview {%- endcomment -%}
+      <section class="vd-section" aria-label="Source breakdown">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></svg>
+          </div>
+          <h2>Source Breakdown</h2>
+        </div>
+        <div class="vd-source-overview">
+          {% for sc in sourceCounts %}
+          {% assign pct = sc.count | times: 100 | divided_by: totalSourceSessions %}
+          <div class="vd-source-card">
+            <div class="vd-source-card__pct">{{ pct }}%</div>
+            <div class="vd-source-card__label">{{ sc.tool }}</div>
+            <div class="vd-source-card__sessions">{{ sc.count }} sessions</div>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M6.5 21.5s2-3 2-6c0-4-3-6-3-6s3 1 6 1 7-2 7-2-1 4-1 7-1.5 6-1.5 6"/>
+          <path d="M8 14s-1.5-2-1.5-4 2-4.5 2-4.5"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+
+      {%- comment -%} Monthly Activity Timeline {%- endcomment -%}
+      {% if activityByMonth.size > 0 %}
+      <section class="vd-section" aria-label="Monthly activity">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          </div>
+          <h2>Monthly Activity</h2>
+        </div>
+        {% assign maxMonthlySessions = 0 %}
+        {% for m in activityByMonth %}
+          {% if m.sessions > maxMonthlySessions %}{% assign maxMonthlySessions = m.sessions %}{% endif %}
+        {% endfor %}
+        <div class="vd-timeline-compact" id="monthly-bars">
+          {% for m in activityByMonth %}
+          <div class="vd-timeline-month">
+            <span class="vd-timeline-month__label">{{ m.month }}</span>
+            <div class="vd-timeline-month__bar">
+              {% if maxMonthlySessions > 0 %}
+              {% assign fillWidth = m.sessions | times: 100 | divided_by: maxMonthlySessions %}
+              {% else %}
+              {% assign fillWidth = 0 %}
+              {% endif %}
+              <div class="vd-timeline-month__fill" data-width="{{ fillWidth }}"></div>
+            </div>
+            <span class="vd-timeline-month__count">{{ m.sessions }} session{% if m.sessions != 1 %}s{% endif %}</span>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Activity Heatmap Grid {%- endcomment -%}
+      {% if activityByDay.size > 0 %}
+      <section class="vd-section" aria-label="Activity heatmap" style="margin-top: 2rem;">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
+          </div>
+          <h2>Activity Heatmap</h2>
+        </div>
+        <div class="vd-activity-grid" aria-label="Weekly activity heatmap, darker means more activity">
+          {% for day in activityByDay %}
+          {% if day.count >= 4 %}{% assign level = 4 %}
+          {% elsif day.count >= 3 %}{% assign level = 3 %}
+          {% elsif day.count >= 2 %}{% assign level = 2 %}
+          {% elsif day.count >= 1 %}{% assign level = 1 %}
+          {% else %}{% assign level = 0 %}{% endif %}
+          <div class="vd-activity-cell{% if level > 0 %} vd-activity-cell--l{{ level }}{% endif %}" title="{{ day.date }}: {{ day.count }} sessions"></div>
+          {% endfor %}
+        </div>
+        <div class="vd-activity-legend">
+          <span>Less</span>
+          <div class="vd-activity-legend__cell" data-level="0"></div>
+          <div class="vd-activity-legend__cell" data-level="1"></div>
+          <div class="vd-activity-legend__cell" data-level="2"></div>
+          <div class="vd-activity-legend__cell" data-level="3"></div>
+          <div class="vd-activity-legend__cell" data-level="4"></div>
+          <span>More</span>
+        </div>
+      </section>
+      {% endif %}
+
+    </main>
+
+    <footer class="vd-footer">
+      <p>Built with <a href="https://heyi.am">heyi.am</a> &mdash; the signal-first portfolio</p>
+    </footer>
+
+  </div>
+
+
+</div>

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

@@ -0,0 +1,309 @@
+<div class="heyiam-project verdant" data-render-version="2" data-template="verdant"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  <div class="vd-page">
+
+    <main id="main-content">
+
+      {%- comment -%} Breadcrumb {%- endcomment -%}
+      <nav class="vd-breadcrumb" aria-label="Breadcrumb">
+        <a href="/{{ user.username }}">{{ user.username }}</a>
+        <span class="vd-breadcrumb__sep" aria-hidden="true">/</span>
+        <span>{{ project.slug }}</span>
+      </nav>
+
+      {%- comment -%} Project Header {%- endcomment -%}
+      <section class="vd-section vd-project-header" aria-label="Project header">
+        <h1>{{ project.title }}</h1>
+        {% if project.repoUrl or project.projectUrl %}
+        <div class="vd-project-links">
+          {% if project.repoUrl %}
+          <a href="{{ project.repoUrl }}" class="vd-project-link" target="_blank" rel="noopener">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
+            {{ project.repoUrl | stripProtocol }}
+          </a>
+          {% endif %}
+          {% if project.projectUrl %}
+          <a href="{{ project.projectUrl }}" class="vd-project-link" target="_blank" rel="noopener">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+            {{ project.projectUrl | stripProtocol }}
+          </a>
+          {% endif %}
+        </div>
+        {% endif %}
+      </section>
+
+      {%- comment -%} Screenshot {%- endcomment -%}
+      {% if project.screenshotUrl %}
+      <section class="vd-section" aria-label="Screenshot">
+        <div class="vd-browser-chrome">
+          <div class="vd-browser-chrome__bar">
+            <span class="vd-browser-chrome__dot vd-browser-chrome__dot--red" aria-hidden="true"></span>
+            <span class="vd-browser-chrome__dot vd-browser-chrome__dot--yellow" aria-hidden="true"></span>
+            <span class="vd-browser-chrome__dot vd-browser-chrome__dot--green" aria-hidden="true"></span>
+            {% if project.projectUrl %}
+            <span class="vd-browser-chrome__url">{{ project.projectUrl | stripProtocol }}</span>
+            {% endif %}
+          </div>
+          <div class="vd-browser-chrome__viewport">
+            <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" style="width: 100%; height: 100%; object-fit: cover;">
+          </div>
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+
+      {%- comment -%} Narrative {%- endcomment -%}
+      {% if project.narrative != blank %}
+      <section class="vd-section" aria-label="Narrative">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 013 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
+          </div>
+          <h2>Narrative</h2>
+        </div>
+        <div class="vd-narrative">
+          {{ project.narrative }}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M6.5 21.5s2-3 2-6c0-4-3-6-3-6s3 1 6 1 7-2 7-2-1 4-1 7-1.5 6-1.5 6"/>
+          <path d="M8 14s-1.5-2-1.5-4 2-4.5 2-4.5"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+
+      {%- comment -%} Stats {%- endcomment -%}
+      <section class="vd-section" aria-label="Project statistics">
+        <div class="vd-stat-grid">
+          <div class="vd-stat-card">
+            <div class="vd-stat-value">{{ project.totalSessions }}</div>
+            <div class="vd-stat-label">Sessions</div>
+          </div>
+          {% if efficiencyMultiplier %}
+          <div class="vd-stat-card">
+            {% assign totalCombined = project.totalDurationMinutes | plus: project.totalAgentDurationMinutes %}
+            {% if totalCombined > 0 %}
+            {% assign humanPct = project.totalDurationMinutes | times: 100 | divided_by: totalCombined %}
+            {% assign agentPct = 100 | minus: humanPct %}
+            <div style="display: flex; align-items: center; gap: 4px; margin-bottom: 6px;">
+              <div style="flex: {{ humanPct }}; height: 6px; border-radius: 3px; background: rgba(0,0,0,0.12);"></div>
+              <div style="flex: {{ agentPct }}; height: 6px; border-radius: 3px; background: var(--vd-accent);"></div>
+            </div>
+            {% endif %}
+            <div style="display: flex; justify-content: space-between; align-items: baseline;">
+              <div class="vd-stat-value" style="font-size: 1.125rem;">{{ project.totalDurationMinutes | formatDuration }}</div>
+              <div class="vd-stat-value" style="font-size: 1.125rem; color: var(--vd-accent);">{{ project.totalAgentDurationMinutes | formatDuration }}</div>
+            </div>
+            <div style="display: flex; justify-content: space-between;">
+              <div class="vd-stat-label">You</div>
+              <div class="vd-stat-label">Agents</div>
+            </div>
+          </div>
+          <div class="vd-stat-card">
+            <div class="vd-stat-value" style="color: var(--vd-accent);">{{ efficiencyMultiplier }}</div>
+            <div class="vd-stat-label">Multiplier</div>
+          </div>
+          {% else %}
+          <div class="vd-stat-card">
+            <div class="vd-stat-value">{{ project.totalDurationMinutes | formatDuration }}</div>
+            <div class="vd-stat-label">Time</div>
+          </div>
+          {% endif %}
+          <div class="vd-stat-card">
+            <div class="vd-stat-value">{{ project.totalLoc | formatLoc }}</div>
+            <div class="vd-stat-label">Lines Changed</div>
+          </div>
+          <div class="vd-stat-card">
+            <div class="vd-stat-value">{{ project.totalFilesChanged }}</div>
+            <div class="vd-stat-label">Files</div>
+          </div>
+          {% if project.totalTokens %}
+          <div class="vd-stat-card">
+            <div class="vd-stat-value">{{ project.totalTokens | formatTokens }}</div>
+            <div class="vd-stat-label">Tokens</div>
+          </div>
+          {% endif %}
+        </div>
+      </section>
+
+      {%- comment -%} Phase Vine Timeline {%- endcomment -%}
+      {% if arc.size > 0 %}
+      <section class="vd-section" aria-label="Project phases">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20V10"/><path d="M18 20V4"/><path d="M6 20v-4"/></svg>
+          </div>
+          <h2>Growth Phases</h2>
+        </div>
+        <div class="vd-vine-timeline" role="list" aria-label="Phase timeline">
+          {% for phase in arc %}
+          <div class="vd-vine-phase" role="listitem">
+            <div class="vd-vine-node" aria-hidden="true"><div class="vd-vine-node__inner"></div></div>
+            <div class="vd-vine-phase__title">{{ phase.title }}</div>
+            {% if phase.dates %}
+            <div class="vd-vine-phase__dates">{{ phase.dates }}</div>
+            {% endif %}
+            <div class="vd-vine-phase__desc">{{ phase.description }}</div>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+      {% endif %}
+
+      {%- comment -%} Work Timeline (CSS-only bars) {%- endcomment -%}
+      {% if featuredSessions.size > 0 %}
+      {% assign maxDur = 1 %}
+      {% for s in featuredSessions %}
+        {% if s.durationMinutes > maxDur %}{% assign maxDur = s.durationMinutes %}{% endif %}
+      {% endfor %}
+      <section class="vd-section" aria-label="Work timeline">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+          </div>
+          <h2>Work Timeline</h2>
+        </div>
+        <div class="vd-work-timeline" aria-label="Session timeline chart">
+          {% for s in featuredSessions %}
+          {% assign barPct = s.durationMinutes | times: 100 | divided_by: maxDur %}
+          <div class="vd-timeline-row">
+            <span class="vd-timeline-row__num">{{ forloop.index }}</span>
+            <div class="vd-timeline-bar">
+              <div class="vd-timeline-bar-fill" data-width="{{ barPct }}" aria-hidden="true"></div>
+              <span class="vd-timeline-bar__label">{{ s.title }}</span>
+            </div>
+            <span class="vd-timeline-row__dur">{{ s.durationMinutes }}m</span>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Skills {%- endcomment -%}
+      {% if project.skills.size > 0 %}
+      <section class="vd-section" aria-label="Skills">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
+          </div>
+          <h2>Skills</h2>
+        </div>
+        <div class="vd-skills">
+          {% for skill in project.skills %}
+          <span class="vd-skill-chip">{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Key Decisions {%- endcomment -%}
+      {% if arc.size > 0 %}
+      <section class="vd-section" aria-label="Key decisions">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
+          </div>
+          <h2>Key Decisions</h2>
+        </div>
+        <div class="vd-decisions">
+          {% for item in arc %}
+          <div class="vd-decision"><strong>{{ forloop.index }}.</strong> {{ item.description }}</div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Source Breakdown {%- endcomment -%}
+      {% if sourceCounts.size > 0 %}
+      <section class="vd-section" aria-label="Source breakdown">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 18l6-6-6-6"/><path d="M8 6l-6 6 6 6"/></svg>
+          </div>
+          <h2>Source Breakdown</h2>
+        </div>
+        <div class="vd-source-breakdown">
+          {% assign firstSource = sourceCounts | first %}
+          {% assign firstPct = firstSource.count | times: 100.0 | divided_by: project.totalSessions | round %}
+          <div class="vd-source-bar-wide" aria-label="{{ firstSource.tool }} {{ firstPct }}%">
+            <div class="vd-source-bar-wide__fill" data-width="{{ firstPct }}"></div>
+          </div>
+          <div class="vd-source-legend">
+            {% for source in sourceCounts %}
+            {% assign srcPct = source.count | times: 100.0 | divided_by: project.totalSessions | round %}
+            <span><span class="vd-source-legend__dot {% if forloop.first %}vd-source-legend__dot--claude{% else %}vd-source-legend__dot--cursor{% endif %}" aria-hidden="true"></span>{{ source.tool }} {{ srcPct }}%</span>
+            {% endfor %}
+          </div>
+        </div>
+      </section>
+      {% endif %}
+
+      {%- comment -%} Leaf Divider {%- endcomment -%}
+      <div class="vd-leaf-divider" role="separator">
+        <div class="vd-leaf-divider__line"></div>
+        <svg class="vd-leaf-divider__icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M6.5 21.5s2-3 2-6c0-4-3-6-3-6s3 1 6 1 7-2 7-2-1 4-1 7-1.5 6-1.5 6"/>
+          <path d="M8 14s-1.5-2-1.5-4 2-4.5 2-4.5"/>
+        </svg>
+        <div class="vd-leaf-divider__line"></div>
+      </div>
+
+      {%- comment -%} Featured Sessions {%- endcomment -%}
+      {% if featuredSessions.size > 0 %}
+      <section class="vd-section" aria-label="Featured sessions">
+        <div class="vd-section-header">
+          <div class="vd-section-header__icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+          </div>
+          <h2>Featured Sessions</h2>
+        </div>
+        <div class="vd-sessions-grid">
+          {% for s in featuredSessions %}
+          <a href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}" class="vd-session-card">
+            {% if s.sourceTool %}
+            <span class="vd-session-card__tag">{{ s.sourceTool }}</span>
+            {% endif %}
+            <h3>{{ s.title }}</h3>
+            <div class="vd-session-card__meta">
+              <span>{{ s.durationMinutes | formatDuration }}</span>
+              <span>{{ s.locChanged | formatLoc }} LOC</span>
+              <span>{{ s.filesChanged }} files</span>
+            </div>
+          </a>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+    </main>
+
+    <footer class="vd-footer">
+      <p>Built with <a href="https://heyi.am">heyi.am</a> &mdash; the signal-first portfolio</p>
+    </footer>
+
+  </div>
+
+
+</div>