heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,192 @@
+<div class="strata-portfolio" data-render-version="2" data-template="strata" data-username="{{ user.username }}">
+
+  {% if hasProfile %}
+  {%- comment -%} Hero: Overlapping Card Portrait {%- endcomment -%}
+  <header class="strata-hero">
+    {% if user.photoUrl %}
+    <div class="strata-hero__photo-card">
+      <img src="{{ user.photoUrl }}" alt="{{ user.displayName }}" class="strata-hero__photo">
+    </div>
+    {% endif %}
+    <div class="strata-hero__bio-card">
+      {% if user.displayName != blank %}
+      <h1 class="strata-hero__name">{{ user.displayName }}</h1>
+      {% endif %}
+      {% if user.location %}
+      <div class="strata-hero__location">
+        <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><path d="M8 14s-5-4.5-5-8a5 5 0 1 1 10 0c0 3.5-5 8-5 8z"/><circle cx="8" cy="6" r="1.5"/></svg>
+        {{ user.location }}
+      </div>
+      {% endif %}
+      {% if user.bio %}
+      <p class="strata-hero__bio">{{ user.bio }}</p>
+      {% endif %}
+      <div class="strata-contact-row">
+        {% 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 %}
+        <span><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 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg> {{ user.phone }}</span>
+        {% endif %}
+        {% if user.linkedinUrl %}
+        <a href="{{ user.linkedinUrl }}" target="_blank" rel="noopener"><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 }}" target="_blank" rel="noopener"><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://twitter.com/{{ user.twitterHandle }}" target="_blank" rel="noopener"><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 }}" target="_blank" rel="noopener"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg> {{ user.websiteUrl | stripProtocol }}</a>
+        {% endif %}
+        {% if user.resumeUrl %}
+        <a href="{{ user.resumeUrl }}" class="strata-resume-btn"><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>
+    </div>
+  </header>
+  {% endif %}
+
+  {%- comment -%} Aggregate Stats (overlapping stat cards) {%- endcomment -%}
+  <div class="strata-agg-stats" aria-label="Portfolio statistics" id="agg-stats">
+    <div class="strata-agg-stat">
+      <span class="strata-agg-stat__value">{{ projects.size }}</span>
+      <span class="strata-agg-stat__label">Projects</span>
+    </div>
+    <div class="strata-agg-stat">
+      <span class="strata-agg-stat__value">{{ totalSessions }}</span>
+      <span class="strata-agg-stat__label">Sessions</span>
+    </div>
+    <div class="strata-agg-stat">
+      <span class="strata-agg-stat__value">{{ totalDurationMinutes | formatDuration }}</span>
+      <span class="strata-agg-stat__label">{{ durationLabel }}</span>
+    </div>
+    {% if efficiencyMultiplier %}
+    <div class="strata-agg-stat">
+      <span class="strata-agg-stat__value" style="color: var(--strata-accent);">{{ totalAgentDurationMinutes | formatDuration }}</span>
+      <span class="strata-agg-stat__label">Agents</span>
+    </div>
+    <div class="strata-agg-stat">
+      <span class="strata-agg-stat__value" style="color: var(--strata-accent);">{{ efficiencyMultiplier }}</span>
+      <span class="strata-agg-stat__label">Multiplier</span>
+    </div>
+    {% endif %}
+    <div class="strata-agg-stat">
+      <span class="strata-agg-stat__value">{{ totalLoc | formatLoc }}</span>
+      <span class="strata-agg-stat__label">Lines</span>
+    </div>
+  </div>
+
+  {%- comment -%} Project Cards {%- endcomment -%}
+  {% if projects.size > 0 %}
+  <section aria-label="Projects">
+    <div class="strata-layer" style="z-index: 1;">
+      <div class="strata-section-header">
+        <h2 class="strata-section-header__title">Projects</h2>
+        <span class="strata-section-header__meta">{{ projects.size }} total</span>
+      </div>
+      <div class="strata-project-cards">
+        {% for p in projects %}
+        <a class="strata-project-card" href="/{{ user.username }}/{{ p.slug }}" aria-label="{{ p.title }} project">
+          <div class="strata-project-card__accent" style="background: var(--strata-accent);"></div>
+          <div class="strata-project-card__title">{{ p.title }}</div>
+          {% if p.narrative %}
+          <div class="strata-project-card__desc">{{ p.narrative }}</div>
+          {% endif %}
+          <div class="strata-project-card__meta">{{ p.totalSessions }} sessions &middot; {{ p.totalDurationMinutes | formatDuration }} &middot; {{ p.totalLoc | formatLoc }} LOC</div>
+          {% if p.sourceCounts.size > 0 %}
+          <div class="strata-source-mix" aria-label="Source mix: {% for sc in p.sourceCounts %}{{ sc.tool }} {% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}{{ pct }}%{% unless forloop.last %}, {% endunless %}{% endfor %}">
+            {% for sc in p.sourceCounts %}
+            {% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}
+            <div class="strata-source-mix__segment" style="width: {{ pct }}%; background: var({% if forloop.first %}--strata-accent{% else %}--strata-text-tertiary{% endif %});" aria-hidden="true"></div>
+            {% endfor %}
+          </div>
+          <div class="strata-project-card__source">{% for sc in p.sourceCounts %}{% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}{{ sc.tool }} {{ pct }}%{% unless forloop.last %} &middot; {% endunless %}{% endfor %}</div>
+          {% endif %}
+          {% if p.skills.size > 0 %}
+          <div class="strata-project-card__chips">
+            {% for skill in p.skills %}
+            <span class="strata-project-card__chip">{{ skill }}</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </a>
+        {% endfor %}
+      </div>
+    </div>
+
+    {%- comment -%} Technologies {%- endcomment -%}
+    {% assign allSkills = "" %}
+    {% for p in projects %}
+      {% for skill in p.skills %}
+        {% unless allSkills contains skill %}
+          {% if allSkills != "" %}{% assign allSkills = allSkills | append: "|||" %}{% endif %}
+          {% assign allSkills = allSkills | append: skill %}
+        {% endunless %}
+      {% endfor %}
+    {% endfor %}
+    {% assign skillList = allSkills | split: "|||" %}
+    {% if skillList.size > 0 %}
+    <div class="strata-layer" style="z-index: 2;">
+      <div class="strata-section-header">
+        <h2 class="strata-section-header__title">Technologies</h2>
+      </div>
+      <div class="strata-chips">
+        {% for skill in skillList %}
+        <span class="strata-chip">{{ skill }}</span>
+        {% endfor %}
+      </div>
+    </div>
+    {% endif %}
+  </section>
+  {% endif %}
+
+  {%- comment -%} Activity Chart {%- endcomment -%}
+  {% if activityByMonth.size > 0 %}
+  <div class="strata-layer" style="z-index: 2;" id="activity-section">
+    <div class="strata-section-header">
+      <h2 class="strata-section-header__title">Activity Overview</h2>
+      <span class="strata-section-header__meta">{{ totalSessions }} sessions across {{ projects.size }} projects</span>
+    </div>
+    <div class="strata-chart">
+      {% assign maxSessions = 0 %}
+      {% for m in activityByMonth %}
+        {% if m.sessions > maxSessions %}{% assign maxSessions = m.sessions %}{% endif %}
+      {% endfor %}
+      <svg viewBox="0 0 800 200" preserveAspectRatio="xMidYMid meet" aria-label="Monthly activity overview showing session count">
+        <line x1="60" y1="30" x2="760" y2="30" stroke="#f5f5f4" stroke-width="1" stroke-dasharray="4,4"/>
+        <line x1="60" y1="70" x2="760" y2="70" stroke="#f5f5f4" stroke-width="1" stroke-dasharray="4,4"/>
+        <line x1="60" y1="110" x2="760" y2="110" stroke="#f5f5f4" stroke-width="1" stroke-dasharray="4,4"/>
+        <line x1="60" y1="150" x2="760" y2="150" stroke="#f5f5f4" stroke-width="1" stroke-dasharray="4,4"/>
+        <line x1="60" y1="180" x2="760" y2="180" stroke="#e7e5e4" stroke-width="1"/>
+        {% assign barAreaWidth = 700 | divided_by: activityByMonth.size %}
+        {% for m in activityByMonth %}
+          {% if maxSessions > 0 %}
+            {% assign barHeight = m.sessions | times: 140 | divided_by: maxSessions %}
+          {% else %}
+            {% assign barHeight = 0 %}
+          {% endif %}
+          {% assign barY = 180 | minus: barHeight %}
+          {% assign barX = forloop.index0 | times: barAreaWidth | plus: 80 %}
+          {% assign delay = forloop.index0 | times: 80 %}
+          <rect class="strata-chart-bar" x="{{ barX }}" y="{{ barY }}" width="30" height="{{ barHeight }}" rx="4" ry="4" fill="#d97706" opacity="0.85" style="transition-delay: {{ delay }}ms"/>
+          {% assign labelX = barX | plus: 15 %}
+          <text x="{{ labelX }}" y="196" text-anchor="middle" fill="#a8a29e" font-family="IBM Plex Mono, monospace" font-size="9">{{ m.month }}</text>
+          {% assign valueY = barY | minus: 6 %}
+          <text x="{{ labelX }}" y="{{ valueY }}" text-anchor="middle" fill="#78716c" font-family="IBM Plex Mono, monospace" font-size="8">{{ m.sessions }}</text>
+        {% endfor %}
+      </svg>
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <footer class="strata-footer">
+    <div class="strata-footer__text">
+      Built with <a href="https://heyi.am">heyi.am</a>
+    </div>
+  </footer>
+
+
+</div>

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

@@ -0,0 +1,282 @@
+<div class="strata-project" data-render-version="2" data-template="strata"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  {%- comment -%} Title {%- endcomment -%}
+  <h1 class="strata-title" data-editable="title">{{ project.title }}</h1>
+
+  {%- comment -%} Links {%- endcomment -%}
+  {% if project.repoUrl or project.projectUrl %}
+  <nav class="strata-links" aria-label="Project links">
+    {% if project.repoUrl %}
+    <a class="strata-link" href="{{ project.repoUrl }}" target="_blank" rel="noopener">
+      <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"/></svg>
+      {{ project.repoUrl | stripProtocol }}
+    </a>
+    {% endif %}
+    {% if project.projectUrl %}
+    <a class="strata-link" href="{{ project.projectUrl }}" target="_blank" rel="noopener">
+      <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"><circle cx="8" cy="8" r="6.25"/><path d="M3.5 8h9M8 1.75c-1.5 1.75-2 3.75-2 6.25s.5 4.5 2 6.25M8 1.75c1.5 1.75 2 3.75 2 6.25s-.5 4.5-2 6.25"/></svg>
+      {{ project.projectUrl | stripProtocol }}
+    </a>
+    {% endif %}
+  </nav>
+  {% endif %}
+
+  {%- comment -%} Screenshot {%- endcomment -%}
+  {% if project.screenshotUrl %}
+  <div class="strata-layer strata-layer--screenshot" style="z-index: 1;">
+    <div class="browser-chrome">
+      <div class="browser-chrome__bar">
+        <span class="browser-chrome__dot browser-chrome__dot--red"></span>
+        <span class="browser-chrome__dot browser-chrome__dot--yellow"></span>
+        <span class="browser-chrome__dot browser-chrome__dot--green"></span>
+        {% if project.projectUrl %}
+        <span class="browser-chrome__url">{{ project.projectUrl | stripProtocol }}</span>
+        {% endif %}
+      </div>
+      <div class="browser-chrome__viewport">
+        <img src="{{ project.screenshotUrl }}" alt="{{ project.title }} screenshot" style="width: 100%; display: block;">
+      </div>
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Narrative {%- endcomment -%}
+  {% if project.narrative %}
+  <div class="strata-layer" style="z-index: 2; padding: 2.5rem 3rem;">
+    <div class="strata-narrative">
+      <p>{{ project.narrative }}</p>
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Stats {%- endcomment -%}
+  <div class="strata-layer" style="z-index: 3;" id="stats-section">
+    <div class="strata-stats-grid">
+      <div class="strata-stat">
+        <span class="strata-stat__label">Sessions</span>
+        <span class="strata-stat__value">{{ project.totalSessions }}</span>
+      </div>
+      <div class="strata-stat">
+        <span class="strata-stat__label">{{ durationLabel }}</span>
+        <span class="strata-stat__value">{{ project.totalDurationMinutes | formatDuration }}</span>
+      </div>
+      {% if efficiencyMultiplier %}
+      <div class="strata-stat">
+        <span class="strata-stat__label">Agents</span>
+        <span class="strata-stat__value strata-stat__value--accent">{{ project.totalAgentDurationMinutes | formatDuration }}</span>
+      </div>
+      <div class="strata-stat">
+        <span class="strata-stat__label">Multiplier</span>
+        <span class="strata-stat__value strata-stat__value--accent">{{ efficiencyMultiplier }}</span>
+      </div>
+      {% endif %}
+      <div class="strata-stat">
+        <span class="strata-stat__label">Lines Changed</span>
+        <span class="strata-stat__value">{{ project.totalLoc | localeNumber }}</span>
+      </div>
+      <div class="strata-stat">
+        <span class="strata-stat__label">Files</span>
+        <span class="strata-stat__value">{{ project.totalFilesChanged }}</span>
+      </div>
+      {% if project.totalTokens %}
+      <div class="strata-stat">
+        <span class="strata-stat__label">Tokens</span>
+        <span class="strata-stat__value">{{ project.totalTokens | formatTokens }}</span>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+
+  {%- comment -%} Work Timeline (CSS-only SVG bars) {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <div class="strata-layer" style="z-index: 4;">
+    <div class="strata-section-header">
+      <h2 class="strata-section-header__title">Work Timeline</h2>
+    </div>
+    {% assign maxLoc = 1 %}
+    {% for s in featuredSessions %}
+      {% if s.locChanged > maxLoc %}{% assign maxLoc = s.locChanged %}{% endif %}
+    {% endfor %}
+    {% assign barCount = featuredSessions.size %}
+    {% assign barWidth = 50 %}
+    {% assign barGap = 90 %}
+    {% assign chartLeft = 60 %}
+    {% assign chartHeight = 180 %}
+    {% assign chartBottom = 210 %}
+    {% assign svgWidth = barCount | times: barGap | plus: chartLeft | plus: 40 %}
+    <div class="strata-chart">
+      <svg viewBox="0 0 {{ svgWidth }} 240" role="img" aria-label="Bar chart showing lines of code written per session">
+        <line x1="{{ chartLeft }}" y1="30" x2="{{ svgWidth | minus: 20 }}" y2="30" stroke="var(--strata-border, #e7e5e4)" stroke-width="1" />
+        <line x1="{{ chartLeft }}" y1="75" x2="{{ svgWidth | minus: 20 }}" y2="75" stroke="var(--strata-border, #e7e5e4)" stroke-width="1" />
+        <line x1="{{ chartLeft }}" y1="120" x2="{{ svgWidth | minus: 20 }}" y2="120" stroke="var(--strata-border, #e7e5e4)" stroke-width="1" />
+        <line x1="{{ chartLeft }}" y1="165" x2="{{ svgWidth | minus: 20 }}" y2="165" stroke="var(--strata-border, #e7e5e4)" stroke-width="1" />
+        <line x1="{{ chartLeft }}" y1="210" x2="{{ svgWidth | minus: 20 }}" y2="210" stroke="var(--strata-border, #e7e5e4)" stroke-width="1" />
+        <text x="55" y="34" text-anchor="end" fill="var(--strata-text-tertiary, #a8a29e)" font-family="var(--strata-font-mono)" font-size="10">{{ maxLoc }}</text>
+        <text x="55" y="124" text-anchor="end" fill="var(--strata-text-tertiary, #a8a29e)" font-family="var(--strata-font-mono)" font-size="10">{{ maxLoc | divided_by: 2 }}</text>
+        <text x="55" y="214" text-anchor="end" fill="var(--strata-text-tertiary, #a8a29e)" font-family="var(--strata-font-mono)" font-size="10">0</text>
+        {% for s in featuredSessions %}
+        {% assign barX = forloop.index0 | times: barGap | plus: chartLeft %}
+        {% assign barCenterX = barX | plus: 25 %}
+        {% if maxLoc > 0 %}
+          {% assign barH = s.locChanged | times: chartHeight | divided_by: maxLoc %}
+        {% else %}
+          {% assign barH = 0 %}
+        {% endif %}
+        {% assign barY = chartBottom | minus: barH %}
+        <rect class="strata-chart-bar" x="{{ barX }}" y="{{ barY }}" width="{{ barWidth }}" height="{{ barH }}" rx="4" ry="4" fill="var(--strata-accent, #d97706)" opacity="0.85" style="transition-delay: {{ forloop.index0 | times: 60 }}ms" />
+        <text x="{{ barCenterX }}" y="{{ barY | minus: 6 }}" text-anchor="middle" fill="var(--strata-text-secondary, #78716c)" font-family="var(--strata-font-mono)" font-size="10">{{ s.locChanged | localeNumber }}</text>
+        <text x="{{ barCenterX }}" y="228" text-anchor="middle" fill="var(--strata-text-tertiary, #a8a29e)" font-family="var(--strata-font-mono)" font-size="10">S{{ forloop.index }}</text>
+        {% endfor %}
+      </svg>
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Growth Chart (JS-driven mount) {%- endcomment -%}
+  {% if growthJson != blank %}
+  <div class="strata-layer" style="z-index: 4;">
+    <div class="strata-section-header">
+      <h2 class="strata-section-header__title">Lines Changed</h2>
+    </div>
+    <div class="strata-growth-chart">
+      <div data-growth-chart data-variant="strata" data-project-slug="{{ project.slug }}" data-total-loc="{{ project.totalLoc }}" data-total-files="{{ project.totalFilesChanged }}" data-sessions='{{ growthJson | raw }}'></div>
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Two-Column: Key Decisions + Source Breakdown {%- endcomment -%}
+  {% if arc.size > 0 or sourceCounts.size > 0 %}
+  <div class="strata-layer" style="z-index: 6;">
+    <div class="strata-two-col">
+      {% if arc.size > 0 %}
+      <div>
+        <h2 class="strata-col-heading">Key Decisions</h2>
+        <div class="strata-decisions">
+          {% for item in arc %}
+          <div class="strata-decision">
+            <div class="strata-decision__title">{{ item.title }}</div>
+            <div class="strata-decision__desc">{{ item.description }}</div>
+          </div>
+          {% endfor %}
+        </div>
+      </div>
+      {% endif %}
+      {% if arc.size > 0 and sourceCounts.size > 0 %}
+      <div class="strata-col-divider"></div>
+      {% endif %}
+      {% if sourceCounts.size > 0 %}
+      <div>
+        <h2 class="strata-col-heading">Source Breakdown</h2>
+        {% assign totalSourceSessions = 0 %}
+        {% for src in sourceCounts %}
+          {% assign totalSourceSessions = totalSourceSessions | plus: src.count %}
+        {% endfor %}
+        <table class="strata-source-table">
+          <thead>
+            <tr>
+              <th>Source</th>
+              <th>Sessions</th>
+              <th>%</th>
+            </tr>
+          </thead>
+          <tbody>
+            {% for src in sourceCounts %}
+            <tr>
+              <td>
+                {{ src.tool }}
+                {% if totalSourceSessions > 0 %}
+                {% assign srcPct = src.count | times: 100.0 | divided_by: totalSourceSessions | round: 1 %}
+                <span class="strata-source-bar" style="width: {{ srcPct }}%;"></span>
+                {% endif %}
+              </td>
+              <td>{{ src.count }}</td>
+              {% if totalSourceSessions > 0 %}
+              {% assign srcPctDisplay = src.count | times: 100.0 | divided_by: totalSourceSessions | round %}
+              <td>{{ srcPctDisplay }}%</td>
+              {% else %}
+              <td></td>
+              {% endif %}
+            </tr>
+            {% endfor %}
+          </tbody>
+        </table>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Phase Timeline {%- endcomment -%}
+  {% if arc.size > 0 %}
+  <div class="strata-layer" style="z-index: 7;">
+    <div class="strata-section-header">
+      <h2 class="strata-section-header__title">Project Phases</h2>
+    </div>
+    <div class="strata-phases">
+      <div class="strata-phases__line"></div>
+      {% for item in arc %}
+      <div class="strata-phase">
+        <div class="strata-phase__dot"></div>
+        <div class="strata-phase__title">{{ item.title }}</div>
+        <div class="strata-phase__desc">{{ item.description }}</div>
+      </div>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Skills {%- endcomment -%}
+  {% if project.skills.size > 0 %}
+  <div class="strata-layer" style="z-index: 8;">
+    <div class="strata-section-header">
+      <h2 class="strata-section-header__title">Technologies</h2>
+    </div>
+    <div class="strata-chips">
+      {% for skill in project.skills %}
+      <span class="strata-chip">{{ skill }}</span>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Session Cards {%- endcomment -%}
+  {% if featuredSessions.size > 0 %}
+  <div class="strata-layer" style="z-index: 9;">
+    <div class="strata-section-header">
+      <h2 class="strata-section-header__title">Sessions</h2>
+      <span class="strata-section-header__meta">{{ project.totalSessions }} total</span>
+    </div>
+    <div class="strata-session-grid strata-session-grid--stacked">
+      {% for s in featuredSessions %}
+      <a class="strata-session-card" href="{{ sessionBaseUrl }}/{{ s.slug }}{{ sessionSuffix }}">
+        <div class="strata-session-card__bar" style="background: var(--strata-accent);"></div>
+        <div class="strata-session-card__body">
+          <div class="strata-session-card__title">{{ s.title }}</div>
+          <div class="strata-session-card__meta">{{ s.durationMinutes | formatDuration }} &middot; {{ s.recordedAt | formatDateShort }}</div>
+          <div class="strata-session-card__lines">{{ s.locChanged | localeNumber }} lines</div>
+          {% if s.sourceTool %}
+          <div class="strata-session-card__source">{{ s.sourceTool }}{% if s.agentSummary %} &middot; {{ s.agentSummary.agents.size }} agents{% endif %}</div>
+          {% endif %}
+          {% if s.skills.size > 0 %}
+          <div class="strata-session-card__chips">
+            {% for skill in s.skills limit: 3 %}
+            <span class="strata-session-card__chip">{{ skill }}</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+        </div>
+      </a>
+      {% endfor %}
+    </div>
+  </div>
+  {% endif %}
+
+  {%- comment -%} Footer {%- endcomment -%}
+  <footer class="strata-footer">
+    <div class="strata-footer__text">
+      Built with <a href="https://heyi.am">heyi.am</a>
+    </div>
+  </footer>
+
+
+</div>