heyiam 0.2.28 → 0.3.0

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

@@ -0,0 +1,231 @@
+<div class="heyiam-portfolio showcase" data-render-version="2" data-template="showcase" data-username="{{ user.username }}">
+
+  {% if hasProfile %}
+  <!-- Cinematic Hero -->
+  <section class="sc-hero" id="hero-section" aria-label="Portfolio header">
+    {% if user.photoUrl %}
+    <div class="sc-hero__bg" style="background-image: url('{{ user.photoUrl }}');" aria-hidden="true"></div>
+    {% endif %}
+    <div class="sc-hero__overlay" aria-hidden="true"></div>
+
+    <div class="sc-hero__content sc-hero-fade">
+      {% if user.photoUrl %}
+      <img
+        src="{{ user.photoUrl }}"
+        alt="{{ user.displayName }}"
+        class="sc-hero__photo"
+        width="160"
+        height="200"
+      >
+      {% endif %}
+      <div class="sc-hero__info">
+        {% if user.displayName != blank %}
+        <h1 class="sc-hero__name">{{ user.displayName }}</h1>
+        {% endif %}
+        {% if user.location != blank %}
+        <div class="sc-hero__location">{{ user.location }}</div>
+        {% endif %}
+        {% if user.bio != blank %}
+        <p class="sc-hero__bio">{{ user.bio }}</p>
+        {% endif %}
+      </div>
+    </div>
+
+    <!-- Contact links -->
+    <div class="sc-hero__contact sc-hero-fade">
+      {% if user.email != blank %}
+      <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.linkedinUrl != blank %}
+      <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 != blank %}
+      <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 != blank %}
+      <a href="https://x.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 != blank %}
+      <a href="{{ user.websiteUrl }}" target="_blank" rel="noopener">{{ user.websiteUrl | stripProtocol }}</a>
+      {% endif %}
+      {% if user.resumeUrl != blank %}
+      <a href="{{ user.resumeUrl }}" class="sc-hero__resume-btn" download><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>
+
+    <!-- Stats counters -->
+    <div class="sc-hero__stats sc-hero-fade" id="hero-stats">
+      <div class="sc-hero-stat">
+        <div class="sc-hero-stat__value" data-count-to="{{ projects.size }}" data-format="int">0</div>
+        <div class="sc-hero-stat__label">Projects</div>
+      </div>
+      <div class="sc-hero-stat">
+        <div class="sc-hero-stat__value" data-count-to="{{ totalSessions }}" data-format="int">0</div>
+        <div class="sc-hero-stat__label">Sessions</div>
+      </div>
+      <div class="sc-hero-stat">
+        <div class="sc-hero-stat__value" data-count-to="{{ totalLoc }}" data-format="comma">0</div>
+        <div class="sc-hero-stat__label">Lines Changed</div>
+      </div>
+      {% if totalDurationMinutes %}
+      <div class="sc-hero-stat">
+        <div class="sc-hero-stat__value" data-count-to="{{ totalDurationMinutes }}" data-format="duration">0</div>
+        <div class="sc-hero-stat__label">Total Time</div>
+      </div>
+      {% endif %}
+    </div>
+  </section>
+  {% endif %}
+
+  <div class="sc-page">
+    <main id="main-content">
+
+      <!-- Leverage -->
+      {% if efficiencyMultiplier %}
+      <section class="sc-leverage sc-section section-gap" aria-label="AI leverage" role="figure">
+        <div class="sc-leverage__multi">{{ efficiencyMultiplier }}&times;</div>
+        <div class="sc-leverage__context"><span>{{ totalDurationMinutes | formatDuration }} you</span> &middot; <span style="color:var(--accent)">{{ totalAgentDurationMinutes | formatDuration }} agents</span></div>
+        {% assign total_combined = totalDurationMinutes | plus: totalAgentDurationMinutes %}
+        {% if total_combined > 0 %}
+        {% assign human_pct = totalDurationMinutes | times: 100 | divided_by: total_combined %}
+        {% assign agent_pct = 100 | minus: human_pct %}
+        <div class="sc-leverage__bar"><div class="sc-leverage__human" style="width:{{ human_pct }}%"></div><div class="sc-leverage__agent" style="width:{{ agent_pct }}%"></div></div>
+        {% endif %}
+      </section>
+      {% endif %}
+
+      <!-- Project Cards -->
+      {% if projects.size > 0 %}
+      <section class="sc-section section-gap-lg" aria-label="Projects">
+        <div class="sc-section-header">
+          <h2>Projects</h2>
+          <span class="sc-section-label">{{ projects.size }} projects</span>
+        </div>
+
+        {% for p in projects %}
+        <a href="/{{ user.username }}/{{ p.slug }}" class="sc-project-card sc-stagger" style="display: block; margin-bottom: 0.75rem;">
+          <div class="sc-project-card__accent-bar" style="background: var(--accent);"></div>
+          <div class="sc-project-card__title">{{ p.title }}</div>
+          {% if p.narrative != blank %}
+          <p class="sc-project-card__narrative">{{ p.narrative }}</p>
+          {% endif %}
+          <div class="sc-project-card__meta">
+            <span>{{ p.totalSessions }} sessions</span>
+            <span>{{ p.totalDurationMinutes | formatDuration }}</span>
+            <span>{{ p.totalLoc | localeNumber }} LOC</span>
+          </div>
+          {% if p.skills.size > 0 %}
+          <div class="sc-project-card__skills">
+            {% for skill in p.skills limit: 6 %}
+            <span class="sc-skill-chip">{{ skill }}</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+          {% if p.sourceCounts.size > 0 %}
+          <div class="project-card__source">
+            <div class="source-bar-track">
+              {% for sc in p.sourceCounts %}
+              {% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}
+              <div class="source-bar-segment" style="width: {{ pct }}%; background: var({% if forloop.first %}--accent{% else %}--green{% endif %});"></div>
+              {% endfor %}
+            </div>
+            <div class="source-labels">
+              {% for sc in p.sourceCounts %}
+              {% assign pct = sc.count | times: 100 | divided_by: p.totalSessions %}
+              <span>{{ sc.tool }} {{ pct }}%</span>
+              {% endfor %}
+            </div>
+          </div>
+          {% endif %}
+        </a>
+        {% endfor %}
+      </section>
+      {% endif %}
+
+      <!-- Aggregate Skills -->
+      {% assign all_skills = "" %}
+      {% for p in projects %}
+        {% for skill in p.skills %}
+          {% unless all_skills contains skill %}
+            {% if all_skills != "" %}{% assign all_skills = all_skills | append: "|||" %}{% endif %}
+            {% assign all_skills = all_skills | append: skill %}
+          {% endunless %}
+        {% endfor %}
+      {% endfor %}
+      {% assign unique_skills = all_skills | split: "|||" %}
+      {% if unique_skills.size > 0 %}
+      <section class="sc-section section-gap-lg" aria-label="All skills">
+        <div class="sc-section-header">
+          <h2>Skills Across Projects</h2>
+          <span class="sc-section-label">{{ unique_skills.size }} technologies</span>
+        </div>
+        <div class="sc-skills-section-card">
+          <div class="sc-skills-grid">
+            {% for skill in unique_skills %}
+            <span class="sc-skill-chip--lg sc-stagger">{{ skill }}</span>
+            {% endfor %}
+          </div>
+        </div>
+      </section>
+      {% endif %}
+
+      <!-- Source Summary -->
+      {% if sourceCounts.size > 0 %}
+      <section class="sc-section section-gap-lg" aria-label="Source breakdown and activity">
+        <div class="source-summary">
+          <div class="source-summary-card sc-stagger">
+            <h3>Source Breakdown</h3>
+            {% for sc in sourceCounts %}
+            {% assign pct = sc.count | times: 100 | divided_by: totalSourceSessions %}
+            <div class="source-summary-row">
+              <span class="source-summary-row__name">{{ sc.tool }}</span>
+              <div class="source-bar-track--summary">
+                <div class="source-bar-fill--summary" style="width: {{ pct }}%;"></div>
+              </div>
+              <span class="source-summary-row__value">{{ pct }}%</span>
+            </div>
+            {% endfor %}
+            <div style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border);">
+              <div class="source-summary-row">
+                <span class="source-summary-row__name">Total sessions</span>
+                <span class="source-summary-row__value">{{ totalSessions }}</span>
+              </div>
+            </div>
+          </div>
+          {% if activityByDay.size > 0 %}
+          <div class="activity-card sc-stagger">
+            <h3 style="font-family: var(--font-display); font-size: 0.875rem; font-weight: 600; color: var(--text); margin-bottom: 0.75rem;">Activity</h3>
+            <div class="activity-grid" aria-label="Activity heatmap showing session frequency over time">
+              {% 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="activity-cell{% if level > 0 %} activity-cell--{{ level }}{% endif %}" title="{{ day.date }}: {{ day.count }} sessions"></div>
+              {% endfor %}
+            </div>
+            <div class="activity-legend">
+              <span>Less</span>
+              <div class="activity-legend__cell" data-level="0"></div>
+              <div class="activity-legend__cell" data-level="1"></div>
+              <div class="activity-legend__cell" data-level="2"></div>
+              <div class="activity-legend__cell" data-level="3"></div>
+              <div class="activity-legend__cell" data-level="4"></div>
+              <span>More</span>
+            </div>
+          </div>
+          {% endif %}
+        </div>
+      </section>
+      {% endif %}
+
+    </main>
+
+    <footer class="sc-footer">
+      <span>built with <a href="https://heyi.am">heyi.am</a></span>
+    </footer>
+  </div>
+
+
+</div>

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

@@ -0,0 +1,237 @@
+<div class="heyiam-project showcase" data-render-version="2" data-template="showcase"{% if sessionBaseUrl %} data-session-base-url="{{ sessionBaseUrl }}"{% endif %} data-username="{{ user.username }}" data-project-slug="{{ project.slug }}">
+
+  <div class="sc-page">
+    <main id="main-content">
+
+      <!-- Title -->
+      <section class="sc-title-section sc-section section-gap" style="transition-delay: 100ms;" aria-label="Project title">
+        <h1 data-editable="title">{{ project.title }}</h1>
+        {% if project.narrative != blank %}
+        <p class="sc-subtitle">{{ project.narrative | truncate: 80 }}</p>
+        {% endif %}
+      </section>
+
+      <!-- Links -->
+      {% if project.repoUrl != blank or project.projectUrl != blank %}
+      <section class="sc-section section-gap-sm" aria-label="Project links">
+        <div class="sc-links">
+          {% if project.repoUrl != blank %}
+          <a href="{{ project.repoUrl }}" class="sc-stagger" 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 != blank %}
+          <a href="{{ project.projectUrl }}" class="sc-stagger" target="_blank" rel="noopener">
+            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6.5 3.5h-4a1 1 0 00-1 1v9a1 1 0 001 1h9a1 1 0 001-1v-4"/><path d="M9.5 1.5h5v5"/><path d="M14.5 1.5L7 9"/></svg>
+            {{ project.projectUrl | stripProtocol }}
+          </a>
+          {% endif %}
+        </div>
+      </section>
+      {% endif %}
+
+      <!-- Screenshot -->
+      {% if project.screenshotUrl != blank %}
+      <section class="sc-section sc-section--screenshot section-gap-lg" aria-label="Screenshot">
+        <div class="sc-screenshot-frame">
+          <div class="sc-screenshot-chrome" aria-hidden="true">
+            <span class="sc-screenshot-dot"></span>
+            <span class="sc-screenshot-dot"></span>
+            <span class="sc-screenshot-dot"></span>
+            {% if project.projectUrl != blank %}
+            <span class="sc-screenshot-url">{{ project.projectUrl | stripProtocol }}</span>
+            {% endif %}
+          </div>
+          <div class="sc-screenshot-body">
+            <img src="{{ project.screenshotUrl }}" alt="Screenshot of {{ project.title }}" style="width:100%;height:100%;object-fit:cover;">
+          </div>
+        </div>
+      </section>
+      {% endif %}
+
+      <!-- Narrative -->
+      {% if project.narrative != blank %}
+      <section class="sc-section section-gap-lg" aria-label="Project narrative">
+        <div class="sc-narrative">
+          <p>{{ project.narrative }}</p>
+        </div>
+      </section>
+      {% endif %}
+
+      <!-- Stats Grid (animated counters) -->
+      <section class="sc-section section-gap-lg" id="stats-section" aria-label="Project statistics">
+        <div class="sc-stats-grid">
+          <div class="sc-stat-card sc-stagger">
+            <div class="sc-stat-card__label">Sessions</div>
+            <div class="sc-stat-card__value" data-count-to="{{ project.totalSessions }}" data-format="int">0</div>
+          </div>
+          <div class="sc-stat-card sc-stagger">
+            <div class="sc-stat-card__label">Lines Changed</div>
+            <div class="sc-stat-card__value" data-count-to="{{ project.totalLoc }}" data-format="comma">0</div>
+          </div>
+          <div class="sc-stat-card sc-stagger">
+            <div class="sc-stat-card__label">Files Changed</div>
+            <div class="sc-stat-card__value" data-count-to="{{ project.totalFilesChanged }}" data-format="int">0</div>
+          </div>
+          {% if project.totalTokens %}
+          <div class="sc-stat-card sc-stagger">
+            <div class="sc-stat-card__label">Tokens</div>
+            <div class="sc-stat-card__value" data-count-to="{{ project.totalTokens }}" data-format="token">0</div>
+          </div>
+          {% endif %}
+        </div>
+      </section>
+
+      <!-- Work Timeline -->
+      <section class="sc-section section-gap-lg" id="timeline-section" aria-label="Work timeline">
+        <div class="sc-chart-container">
+          <div class="sc-section-header">
+            <h3>Work Timeline</h3>
+            <span class="sc-section-label">sessions over time</span>
+          </div>
+          <div data-work-timeline data-sessions='{{ sessionsJson | raw }}'></div>
+        </div>
+      </section>
+
+      <!-- Leverage -->
+      {% if efficiencyMultiplier %}
+      <section class="sc-leverage sc-section section-gap" aria-label="AI leverage" role="figure">
+        <div class="sc-leverage__multi">{{ efficiencyMultiplier }}&times;</div>
+        <div class="sc-leverage__context"><span>{{ durationLabel }}</span></div>
+        {% if project.totalDurationMinutes > 0 and project.totalAgentDurationMinutes %}
+        {% assign total_combined = project.totalDurationMinutes | plus: project.totalAgentDurationMinutes %}
+        {% assign human_pct = project.totalDurationMinutes | times: 100.0 | divided_by: total_combined | round %}
+        {% assign agent_pct = 100 | minus: human_pct %}
+        <div class="sc-leverage__bar"><div class="sc-leverage__human" style="width:{{ human_pct }}%"></div><div class="sc-leverage__agent" style="width:{{ agent_pct }}%"></div></div>
+        {% endif %}
+      </section>
+      {% endif %}
+
+      <!-- Growth Chart -->
+      <section class="sc-section section-gap-lg" id="growth-section" aria-label="Code growth chart">
+        <div class="sc-chart-container">
+          <div class="sc-section-header">
+            <h3>Code Growth</h3>
+            <span class="sc-section-label">cumulative lines of code</span>
+          </div>
+          <div data-growth-chart data-project-slug="{{ project.slug }}" data-sessions='{{ growthJson | raw }}'></div>
+        </div>
+      </section>
+
+      <!-- Two-Column: Key Decisions + Source Breakdown -->
+      <section class="sc-section section-gap-lg" aria-label="Decisions and source breakdown">
+        <div class="sc-two-col">
+          {% if arc.size > 0 %}
+          <div class="sc-two-col-card sc-stagger">
+            <h4>Key Decisions</h4>
+            {% for item in arc %}
+            <div class="sc-decision-item">
+              <div class="sc-phase-label">{{ item.title }}</div>
+              <p>{{ item.description }}</p>
+            </div>
+            {% endfor %}
+          </div>
+          {% endif %}
+
+          {% if sourceCounts.size > 0 %}
+          <div class="sc-two-col-card sc-stagger">
+            <h4>Source Breakdown</h4>
+            <div style="margin-top: 0.5rem;">
+              {% assign total_sessions = 0 %}
+              {% for sc in sourceCounts %}
+                {% assign total_sessions = total_sessions | plus: sc.count %}
+              {% endfor %}
+              {% for sc in sourceCounts %}
+              {% if total_sessions > 0 %}
+              {% assign pct = sc.count | times: 100.0 | divided_by: total_sessions | round %}
+              {% endif %}
+              <div class="sc-source-row">
+                <span class="sc-source-name">{{ sc.tool }}</span>
+                <div class="sc-source-bar-track">
+                  <div class="sc-source-bar-fill" style="width: {{ pct }}%;"></div>
+                </div>
+                <span class="sc-source-pct">{{ pct }}%</span>
+              </div>
+              {% endfor %}
+            </div>
+          </div>
+          {% endif %}
+        </div>
+      </section>
+
+      <!-- Phase Timeline -->
+      {% if arc.size > 0 %}
+      <section class="sc-section section-gap-lg" aria-label="Project phases">
+        <div class="sc-section-header">
+          <h3>Project Arc</h3>
+          <span class="sc-section-label">{{ arc.size }} phases</span>
+        </div>
+        <div class="sc-phase-timeline">
+          <div class="sc-phase-line" aria-hidden="true"></div>
+          {% for item in arc %}
+          <div class="sc-phase-item">
+            <div class="sc-phase-dot" aria-hidden="true"></div>
+            <div class="sc-phase-number">Phase {{ item.phase }}</div>
+            <div class="sc-phase-title">{{ item.title }}</div>
+            <div class="sc-phase-desc">{{ item.description }}</div>
+          </div>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      <!-- Skills -->
+      {% if project.skills.size > 0 %}
+      <section class="sc-section sc-section--skills section-gap-lg" aria-label="Skills">
+        <div class="sc-section-header">
+          <h3>Skills</h3>
+          <span class="sc-section-label">{{ project.skills.size }} technologies</span>
+        </div>
+        <div class="sc-skills-grid">
+          {% for skill in project.skills %}
+          <span class="sc-skill-chip sc-stagger">{{ skill }}</span>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+      <!-- Featured Sessions -->
+      {% if featuredSessions.size > 0 %}
+      <section class="sc-section sc-section--cards section-gap-lg" aria-label="Featured sessions">
+        <div class="sc-section-header">
+          <h3>Sessions</h3>
+          <span class="sc-section-label">{{ featuredSessions.size }} of {{ project.totalSessions }}</span>
+        </div>
+        <div class="sc-session-grid">
+          {% for s in featuredSessions %}
+          <a href="{{ sessionBaseUrl }}/{{ s.slug | default: s.token }}{{ sessionSuffix }}" class="sc-session-card sc-stagger">
+            <div class="sc-session-card__accent-bar" style="background: var(--accent);"></div>
+            <div class="sc-session-card__title">{{ s.title }}</div>
+            <div class="sc-session-card__meta">
+              <span>{{ s.durationMinutes | formatDuration }}</span>
+              <span>{{ s.locChanged | localeNumber }} LOC</span>
+            </div>
+            <div class="sc-session-card__bottom">
+              {% if s.skills.size > 0 %}
+              <span class="sc-session-card__skill">{{ s.skills[0] }}</span>
+              {% endif %}
+              {% if s.sourceTool != blank %}
+              <span class="sc-session-card__source">{{ s.sourceTool }}</span>
+              {% endif %}
+            </div>
+          </a>
+          {% endfor %}
+        </div>
+      </section>
+      {% endif %}
+
+    </main>
+
+    <footer class="sc-footer">
+      <span>built with <a href="https://heyi.am">heyi.am</a></span>
+    </footer>
+  </div>
+
+
+</div>