From da3ddbc3039e40b94b265ce74fffc65b996f7019 Mon Sep 17 00:00:00 2001
From: Caio Kinzel Filho <caiokf@gmail.com>
Date: Sun, 14 Dec 2025 19:30:06 +1000
Subject: [PATCH] feat(xp): render experience timeline as a git-style terminal
 log

Replace the old sidebar badges and linear timeline with a rich, git-inspired terminal view to present experiences as commits. This refactor adds a terminal header, commit list navigation, a styled git log window with graph visualization, commit metadata (hashes, author, date), tags as refs, tech badges as diff stats, and interactive behaviors (hover highlighting, smooth scroll to commit, show-more). It also removes the old BadgeGroup import/usages and via-logo helper, consolidates logo handling, updates date/formatting and duration formatting, and introduces many CSS rules to style the new terminal/log UI for multiple responsive breakpoints.
---
 src/pages/ExperiencePage.vue | 1016 ++++++++++++++++++++++++----------
 1 file changed, 736 insertions(+), 280 deletions(-)

diff --git a/src/pages/ExperiencePage.vue b/src/pages/ExperiencePage.vue
index a3982e9..26df9ba 100644
--- a/src/pages/ExperiencePage.vue
+++ b/src/pages/ExperiencePage.vue
@@ -4,92 +4,200 @@
 
     <div class="page-layout">
       <aside class="sidebar">
-        <h3 class="sidebar-title">technologies</h3>
-        <p class="sidebar-subtitle">last {{ RECENT_YEARS }} years</p>
-        <BadgeGroup :items="recentTechnologies" variant="muted" gap="xs" />
+        <div class="terminal-header">
+          <span class="terminal-prompt">$</span>
+          <span class="terminal-command">git log --oneline</span>
+        </div>
+
+        <!-- Quick navigation -->
+        <div class="commit-list">
+          <button
+            v-for="(exp, index) in visibleExperiences"
+            :key="`nav-${exp.slug}-${index}`"
+            class="commit-nav-item"
+            :class="{ active: hoveredIndex === index }"
+            @click="scrollToCommit(index)"
+            @mouseenter="hoveredIndex = index"
+            @mouseleave="hoveredIndex = null"
+          >
+            <span class="nav-hash">{{ getShortHash(exp, index) }}</span>
+            <span class="nav-company">{{ exp.company }}</span>
+          </button>
+        </div>
+
+        <!-- Career stats -->
+        <div class="career-stats">
+          <div class="stat-line">
+            <span class="stat-label">commits:</span>
+            <span class="stat-value">{{ totalCompanies }}</span>
+          </div>
+          <div class="stat-line">
+            <span class="stat-label">years:</span>
+            <span class="stat-value">{{ yearsOfExperience }}</span>
+          </div>
+          <div class="stat-line">
+            <span class="stat-label">branches:</span>
+            <span class="stat-value">{{ uniqueTags.length }}</span>
+          </div>
+        </div>
       </aside>
 
       <div class="content">
-        <div class="timeline">
-          <article
-            v-for="(experience, index) in visibleExperiences"
-            :key="index"
-            class="experience-card"
-          >
-            <header class="experience-header">
-              <div class="logos-wrapper">
-                <div class="company-logo-wrapper" v-if="getCompanyLogo(experience)">
+        <div class="terminal-window">
+          <div class="terminal-chrome">
+            <div class="window-controls">
+              <span class="control close"></span>
+              <span class="control minimize"></span>
+              <span class="control maximize"></span>
+            </div>
+            <div class="terminal-title">git log --graph --all</div>
+          </div>
+
+          <div class="git-log">
+            <article
+              v-for="(experience, index) in visibleExperiences"
+              :key="`commit-${experience.slug}-${index}`"
+              :ref="(el) => setCommitRef(el, index)"
+              class="commit-entry"
+              :class="{
+                highlighted: hoveredIndex === index,
+                current: !experience.endDate,
+              }"
+              @mouseenter="hoveredIndex = index"
+              @mouseleave="hoveredIndex = null"
+            >
+              <!-- Git graph visualization -->
+              <div class="git-graph">
+                <div class="graph-line top" :class="{ hidden: index === 0 }"></div>
+                <div class="graph-node" :class="getBranchColor(experience)">
+                  <span v-if="!experience.endDate" class="node-current">*</span>
+                  <span v-else class="node-dot"></span>
+                </div>
+                <div
+                  class="graph-line bottom"
+                  :class="{ hidden: index === visibleExperiences.length - 1 && showAll }"
+                ></div>
+              </div>
+
+              <!-- Commit content -->
+              <div class="commit-content">
+                <!-- Commit header -->
+                <div class="commit-header">
+                  <span class="commit-keyword">commit</span>
+                  <span class="commit-hash">{{ getFullHash(experience, index) }}</span>
+                  <span v-if="!experience.endDate" class="head-ref">(HEAD -> main)</span>
+                  <span v-if="experience.via" class="branch-ref"
+                    >({{ getViaName(experience.via) }})</span
+                  >
+                </div>
+
+                <!-- Author line -->
+                <div class="commit-meta">
+                  <span class="meta-label">Author:</span>
+                  <span class="meta-value author-value">
+                    {{ experience.position }}
+                    <a
+                      v-if="experience.website"
+                      :href="experience.website"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="company-link"
+                      >&lt;{{ experience.company }}&gt;</a
+                    >
+                    <span v-else>&lt;{{ experience.company }}&gt;</span>
+                  </span>
+                </div>
+
+                <!-- Date line -->
+                <div class="commit-meta">
+                  <span class="meta-label">Date:</span>
+                  <span class="meta-value date-value">
+                    {{ formatGitDate(experience) }}
+                    <span class="duration-badge">{{ calculateDuration(experience) }}</span>
+                  </span>
+                </div>
+
+                <!-- Tags as refs -->
+                <div class="commit-refs">
+                  <span
+                    v-for="tag in experience.tags"
+                    :key="tag"
+                    class="ref-tag"
+                    :class="getTagColor(tag)"
+                  >
+                    {{ tag }}
+                  </span>
+                </div>
+
+                <!-- Commit message (highlights) -->
+                <div class="commit-message">
+                  <p
+                    v-for="(highlight, hIndex) in experience.highlights"
+                    :key="hIndex"
+                    class="message-line"
+                  >
+                    {{ highlight }}
+                  </p>
+                </div>
+
+                <!-- Diff stat (technologies) -->
+                <div class="commit-diff">
+                  <div class="diff-header">
+                    <span class="diff-files"
+                      >{{ parseTechnologies(experience.technologies).length }} technologies</span
+                    >
+                    <span class="diff-separator">|</span>
+                    <span class="diff-insertions"
+                      >+{{ Math.floor(Math.random() * 50000) + 10000 }}</span
+                    >
+                    <span class="diff-deletions"
+                      >-{{ Math.floor(Math.random() * 20000) + 5000 }}</span
+                    >
+                  </div>
+                  <div class="tech-badges">
+                    <span
+                      v-for="tech in parseTechnologies(experience.technologies)"
+                      :key="tech"
+                      class="tech-badge"
+                    >
+                      {{ tech }}
+                    </span>
+                  </div>
+                </div>
+
+                <!-- Company logo (subtle) -->
+                <div v-if="getCompanyLogo(experience)" class="commit-logo">
                   <img
                     :src="getCompanyLogo(experience)"
                     :alt="experience.company"
-                    class="company-logo"
+                    class="logo-img"
                   />
                 </div>
-                <div class="via-logo-wrapper" v-if="experience.via && getViaLogo(experience.via)">
-                  <img :src="getViaLogo(experience.via)" :alt="experience.via" class="via-logo" />
-                </div>
               </div>
-              <div class="experience-title">
-                <h2 class="company-name">
-                  <a
-                    v-if="experience.website"
-                    :href="experience.website"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    class="company-link"
-                  >
-                    {{ experience.company }}
-                  </a>
-                  <span v-else>{{ experience.company }}</span>
-                </h2>
-                <span class="position">
-                  {{ experience.position }}
-                  <span class="via-text" v-if="experience.via"
-                    >&bull; via {{ getViaName(experience.via) }}</span
-                  >
-                </span>
-              </div>
-              <div class="experience-meta">
-                <div class="date-info">
-                  <span class="date-range">{{ formatDateRange(experience) }}</span>
-                  <span class="duration">{{ calculateDuration(experience) }}</span>
+            </article>
+
+            <!-- Show more -->
+            <div v-if="!showAll" class="show-more-entry">
+              <div class="git-graph">
+                <div class="graph-line top"></div>
+                <div class="graph-node more">
+                  <span class="node-more">...</span>
                 </div>
-                <BadgeGroup :items="experience.tags" align="end" gap="xs" />
+                <div class="graph-line bottom faded"></div>
               </div>
-            </header>
-
-            <ul class="highlights">
-              <li
-                v-for="(highlight, hIndex) in experience.highlights"
-                :key="hIndex"
-                class="highlight-item"
-              >
-                {{ highlight }}
-              </li>
-            </ul>
-
-            <footer class="experience-footer">
-              <BadgeGroup
-                :items="parseTechnologies(experience.technologies)"
-                variant="muted"
-                size="md"
-              />
-            </footer>
-          </article>
-
-          <div v-if="!showAll" class="show-more-container">
-            <button @click="showAll = true" class="show-more-button">
-              <span class="show-more-line"
-                ><span class="comment-prefix"></span>turns out {{ yearsOfExperience }} years is a
-                lot</span
-              >
-              <span class="show-more-line"
-                ><span class="comment-prefix"></span>there's more where that came from</span
-              >
-              <span class="show-more-line"
-                ><span class="comment-prefix"></span>archaeologists, click here</span
-              >
-            </button>
+              <button @click="showAll = true" class="show-more-button">
+                <span class="more-text"
+                  >-- {{ experiencesConfig.length - INITIAL_VISIBLE_COUNT }} more commits
+                  ({{ yearsOfExperience - 6 }}+ years of history) --</span
+                >
+                <span class="more-hint">press enter or click to expand</span>
+              </button>
+            </div>
+
+            <!-- End marker -->
+            <div v-if="showAll" class="log-end">
+              <span class="end-marker">(END)</span>
+            </div>
           </div>
         </div>
       </div>
@@ -100,7 +208,6 @@
 <script setup lang="ts">
   import { computed, ref } from "vue";
   import { experiencesConfig, type Experience } from "../domain/experience/data";
-  import BadgeGroup from "../components/molecules/BadgeGroup.vue";
 
   // Dynamically import all logos from assets/logos
   const logoModules = import.meta.glob("../assets/logos/*.jpeg", {
@@ -119,27 +226,32 @@
     return companyLogos[experience.slug];
   }
 
-  // Via company logos and names mapping
-  const viaLogos: Record<string, string> = {
-    toptal: companyLogos["toptal"],
-    tw: companyLogos["thoughtworks"],
-  };
-
   const viaNames: Record<string, string> = {
-    toptal: "Toptal",
-    tw: "ThoughtWorks",
+    toptal: "toptal",
+    tw: "thoughtworks",
   };
 
-  function getViaLogo(via: string): string | undefined {
-    return viaLogos[via];
-  }
-
   function getViaName(via: string): string {
     return viaNames[via] || via;
   }
 
   const INITIAL_VISIBLE_COUNT = 6;
   const showAll = ref(false);
+  const hoveredIndex = ref<number | null>(null);
+  const commitRefs = ref<Map<number, HTMLElement>>(new Map());
+
+  function setCommitRef(el: unknown, index: number) {
+    if (el instanceof HTMLElement) {
+      commitRefs.value.set(index, el);
+    }
+  }
+
+  function scrollToCommit(index: number) {
+    const el = commitRefs.value.get(index);
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  }
 
   const yearsOfExperience = computed(() => {
     const oldestStartDate = experiencesConfig
@@ -150,6 +262,17 @@
     return currentYear - startYear;
   });
 
+  const totalCompanies = computed(() => {
+    const companies = new Set(experiencesConfig.map((exp) => exp.company));
+    return companies.size;
+  });
+
+  const uniqueTags = computed(() => {
+    const tags = new Set<string>();
+    experiencesConfig.forEach((exp) => exp.tags.forEach((tag) => tags.add(tag)));
+    return Array.from(tags);
+  });
+
   const visibleExperiences = computed(() => {
     if (showAll.value) {
       return experiencesConfig;
@@ -157,60 +280,84 @@
     return experiencesConfig.slice(0, INITIAL_VISIBLE_COUNT);
   });
 
-  const RECENT_YEARS = 5;
-
-  const recentTechnologies = computed(() => {
-    const cutoffDate = new Date();
-    cutoffDate.setFullYear(cutoffDate.getFullYear() - RECENT_YEARS);
-
-    const techSet = new Set<string>();
-
-    experiencesConfig.forEach((exp) => {
-      const endDate = exp.endDate ? new Date(exp.endDate) : new Date();
-      if (endDate >= cutoffDate) {
-        parseTechnologies(exp.technologies).forEach((tech) => techSet.add(tech));
-      }
-    });
-
-    return Array.from(techSet).sort((a, b) => a.toLowerCase().localeCompare(b.toLowerCase()));
-  });
-
-  function formatDateRange(experience: Experience): string {
-    const startDate = new Date(experience.startDate);
-    const startStr = formatMonth(startDate);
-
-    if (!experience.endDate) {
-      return `${startStr} - present`;
+  // Generate a fake git hash from the experience data
+  function getFullHash(experience: Experience, index: number): string {
+    const base = experience.slug + experience.startDate + index;
+    let hash = "";
+    for (let i = 0; i < 40; i++) {
+      hash += base.charCodeAt(i % base.length).toString(16).slice(-1);
     }
-
-    const endDate = new Date(experience.endDate);
-    const endStr = formatMonth(endDate);
-    return `${startStr} - ${endStr}`;
-  }
-
-  function formatMonth(date: Date): string {
+    return hash.slice(0, 40);
+  }
+
+  function getShortHash(experience: Experience, index: number): string {
+    return getFullHash(experience, index).slice(0, 7);
+  }
+
+  // Get branch color based on tags
+  function getBranchColor(experience: Experience): string {
+    if (experience.tags.includes("fintech")) return "branch-fintech";
+    if (experience.tags.includes("startup")) return "branch-startup";
+    if (experience.tags.includes("contract")) return "branch-contract";
+    if (experience.tags.includes("enterprise")) return "branch-enterprise";
+    return "branch-default";
+  }
+
+  function getTagColor(tag: string): string {
+    const colors: Record<string, string> = {
+      remote: "tag-remote",
+      "on-site": "tag-onsite",
+      fintech: "tag-fintech",
+      startup: "tag-startup",
+      contract: "tag-contract",
+      enterprise: "tag-enterprise",
+      healthcare: "tag-healthcare",
+      education: "tag-education",
+      "e-commerce": "tag-ecommerce",
+      "hr-tech": "tag-hrtech",
+      ai: "tag-ai",
+      web3: "tag-web3",
+      cloud: "tag-cloud",
+      saas: "tag-saas",
+      erp: "tag-erp",
+      insurance: "tag-insurance",
+      "ed-tech": "tag-edtech",
+      internship: "tag-internship",
+    };
+    return colors[tag] || "tag-default";
+  }
+
+  function formatGitDate(experience: Experience): string {
+    const startDate = new Date(experience.startDate);
+    const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
     const months = [
-      "jan",
-      "feb",
-      "mar",
-      "apr",
-      "may",
-      "jun",
-      "jul",
-      "aug",
-      "sep",
-      "oct",
-      "nov",
-      "dec",
+      "Jan",
+      "Feb",
+      "Mar",
+      "Apr",
+      "May",
+      "Jun",
+      "Jul",
+      "Aug",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dec",
     ];
-    return `${months[date.getMonth()]}/${date.getFullYear()}`;
+
+    const day = days[startDate.getDay()];
+    const month = months[startDate.getMonth()];
+    const date = startDate.getDate();
+    const year = startDate.getFullYear();
+
+    return `${day} ${month} ${date} ${year}`;
   }
 
   function calculateDuration(experience: Experience): string {
     const startDate = new Date(experience.startDate);
     const endDate = experience.endDate ? new Date(experience.endDate) : new Date();
 
-    let months =
+    const months =
       (endDate.getFullYear() - startDate.getFullYear()) * 12 +
       (endDate.getMonth() - startDate.getMonth());
 
@@ -219,18 +366,18 @@
 
     let duration = "";
     if (years > 0) {
-      duration += `${years} ${years === 1 ? "year" : "years"}`;
+      duration += `${years}y`;
     }
     if (remainingMonths > 0) {
-      if (duration) duration += ", ";
-      duration += `${remainingMonths} ${remainingMonths === 1 ? "month" : "months"}`;
+      if (duration) duration += " ";
+      duration += `${remainingMonths}m`;
     }
     if (!duration) {
-      duration = "< 1 month";
+      duration = "<1m";
     }
 
     if (!experience.endDate) {
-      duration += " (and counting)";
+      duration += " ago";
     }
 
     return duration;
@@ -254,6 +401,15 @@
     margin: 0 auto;
   }
 
+  .page-title {
+    margin-bottom: var(--space-8);
+    text-align: center;
+    max-width: 1200px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  /* Sidebar */
   .sidebar {
     position: sticky;
     top: calc(56px + var(--space-8));
@@ -262,238 +418,522 @@
     height: fit-content;
   }
 
-  .sidebar-title {
+  .terminal-header {
     font-family: var(--font-mono);
     font-size: var(--text-sm);
-    font-weight: var(--font-semibold);
-    color: var(--color-text-primary);
-    text-transform: lowercase;
-    margin: 0 0 var(--space-1) 0;
+    margin-bottom: var(--space-4);
+    padding: var(--space-2);
+    background: var(--color-surface);
+    border-radius: var(--radius-sm);
   }
 
-  .sidebar-title::before {
-    content: "// ";
+  .terminal-prompt {
     color: var(--color-primary);
+    margin-right: var(--space-1);
+  }
+
+  .terminal-command {
+    color: var(--color-text-secondary);
+  }
+
+  .commit-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+    margin-bottom: var(--space-6);
+    max-height: 300px;
+    overflow-y: auto;
   }
 
-  .sidebar-subtitle {
+  .commit-nav-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-1) var(--space-2);
     font-family: var(--font-mono);
     font-size: var(--text-xs);
-    color: var(--color-text-muted);
-    margin: 0 0 var(--space-4) 0;
+    text-align: left;
+    border-radius: var(--radius-sm);
+    transition: background-color var(--transition-fast);
+    cursor: pointer;
+    border: none;
+    background: none;
+    width: 100%;
   }
 
-  .content {
-    flex: 1;
-    max-width: var(--content-max-width);
+  .commit-nav-item:hover,
+  .commit-nav-item.active {
+    background: var(--color-surface-hover);
   }
 
-  .page-title {
-    margin-bottom: var(--space-8);
-    text-align: center;
-    max-width: 1200px;
-    margin-left: auto;
-    margin-right: auto;
+  .nav-hash {
+    color: var(--color-orange);
+    flex-shrink: 0;
+  }
+
+  .nav-company {
+    color: var(--color-text-secondary);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .career-stats {
+    padding-top: var(--space-4);
+    border-top: 1px solid var(--color-border);
   }
 
-  .timeline {
+  .stat-line {
     display: flex;
-    flex-direction: column;
-    gap: var(--space-8);
+    justify-content: space-between;
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    padding: var(--space-1) 0;
   }
 
-  .experience-card {
-    background: var(--color-surface);
+  .stat-label {
+    color: var(--color-text-muted);
+  }
+
+  .stat-value {
+    color: var(--color-primary);
+    font-weight: var(--font-semibold);
+  }
+
+  /* Content */
+  .content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .terminal-window {
+    background: var(--color-background-elevated);
+    border: 1px solid var(--color-border);
     border-radius: var(--radius-lg);
-    padding: var(--space-6);
-    box-shadow: var(--shadow-md);
-    transition: background-color var(--transition-theme), box-shadow var(--transition-theme);
+    overflow: hidden;
   }
 
-  .experience-header {
+  .terminal-chrome {
     display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--space-4);
-    margin-bottom: var(--space-4);
-    padding-bottom: var(--space-4);
+    padding: var(--space-3) var(--space-4);
+    background: var(--color-surface);
     border-bottom: 1px solid var(--color-border);
   }
 
-  .logos-wrapper {
+  .window-controls {
     display: flex;
-    align-items: center;
-    gap: var(--space-2);
-    flex-shrink: 0;
+    gap: 8px;
   }
 
-  .company-logo-wrapper {
-    flex-shrink: 0;
+  .control {
+    width: 12px;
+    height: 12px;
+    border-radius: var(--radius-full);
+    background: var(--color-border);
+  }
+
+  .control.close {
+    background: #ff5f57;
+  }
+
+  .control.minimize {
+    background: #febc2e;
+  }
+
+  .control.maximize {
+    background: #28c840;
+  }
+
+  .terminal-title {
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+  }
+
+  .git-log {
+    padding: var(--space-4);
   }
 
-  .company-logo {
-    width: 58px;
-    height: 58px;
+  /* Commit entry */
+  .commit-entry {
+    display: flex;
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
+    transition: background-color var(--transition-fast);
     border-radius: var(--radius-md);
-    object-fit: cover;
+    margin: 0 calc(-1 * var(--space-2));
+    padding-left: var(--space-2);
+    padding-right: var(--space-2);
   }
 
-  .via-logo-wrapper {
-    flex-shrink: 0;
+  .commit-entry.highlighted {
+    background: var(--color-surface-hover);
   }
 
-  .via-logo {
-    width: 32px;
-    height: 32px;
-    border-radius: var(--radius-sm);
-    object-fit: cover;
-    opacity: 0.8;
+  .commit-entry.current {
+    border-left: 3px solid var(--color-primary);
+    margin-left: calc(-1 * var(--space-2) - 3px);
   }
 
-  .experience-title {
+  /* Git graph */
+  .git-graph {
     display: flex;
     flex-direction: column;
-    gap: var(--space-1);
+    align-items: center;
+    width: 24px;
+    flex-shrink: 0;
+  }
+
+  .graph-line {
+    width: 2px;
     flex: 1;
+    background: var(--color-border);
+    min-height: 20px;
+  }
+
+  .graph-line.hidden {
+    visibility: hidden;
+  }
+
+  .graph-line.faded {
+    opacity: 0.3;
   }
 
-  .company-name {
+  .graph-node {
+    width: 16px;
+    height: 16px;
+    border-radius: var(--radius-full);
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-family: var(--font-mono);
-    font-size: var(--text-xl);
-    font-weight: var(--font-semibold);
-    margin: 0;
-    color: var(--color-text-primary);
-    text-transform: lowercase;
+    font-size: 12px;
+    font-weight: var(--font-bold);
+    flex-shrink: 0;
   }
 
-  .company-name::before {
-    content: "// ";
-    color: var(--color-primary);
+  .graph-node.branch-fintech {
+    background: var(--color-teal);
+    color: white;
   }
 
-  .company-link {
-    color: inherit;
-    text-decoration: none;
-    transition: color var(--transition-fast);
+  .graph-node.branch-startup {
+    background: var(--color-orange);
+    color: white;
   }
 
-  .company-link:hover {
-    color: var(--color-primary);
+  .graph-node.branch-contract {
+    background: var(--color-purple);
+    color: white;
+  }
+
+  .graph-node.branch-enterprise {
+    background: var(--color-green);
+    color: white;
+  }
+
+  .graph-node.branch-default {
+    background: var(--color-text-muted);
+    color: white;
+  }
+
+  .graph-node.more {
+    background: var(--color-surface);
+    border: 2px dashed var(--color-border);
+    color: var(--color-text-muted);
+  }
+
+  .node-dot {
+    width: 6px;
+    height: 6px;
+    background: currentColor;
+    border-radius: var(--radius-full);
+  }
+
+  .node-current {
+    font-size: 14px;
+  }
+
+  .node-more {
+    font-size: 10px;
+    line-height: 1;
+  }
+
+  /* Commit content */
+  .commit-content {
+    flex: 1;
+    min-width: 0;
+    position: relative;
   }
 
-  .position {
+  .commit-header {
     font-family: var(--font-mono);
-    font-size: var(--text-base);
-    color: var(--color-primary);
-    text-transform: lowercase;
+    font-size: var(--text-sm);
+    margin-bottom: var(--space-2);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    align-items: center;
+  }
+
+  .commit-keyword {
+    color: var(--color-orange);
+  }
+
+  .commit-hash {
+    color: var(--color-orange);
+    opacity: 0.8;
+  }
+
+  .head-ref {
+    color: var(--color-teal);
     font-weight: var(--font-semibold);
   }
 
-  .via-text {
+  .branch-ref {
+    color: var(--color-green);
+  }
+
+  .commit-meta {
     font-family: var(--font-mono);
     font-size: var(--text-sm);
+    margin-bottom: var(--space-1);
+    display: flex;
+    gap: var(--space-2);
+  }
+
+  .meta-label {
     color: var(--color-text-muted);
-    text-transform: lowercase;
+    min-width: 60px;
+  }
+
+  .meta-value {
+    color: var(--color-text-secondary);
   }
 
-  .experience-meta {
+  .author-value {
+    color: var(--color-text-primary);
+  }
+
+  .company-link {
+    color: var(--color-primary);
+    text-decoration: none;
+  }
+
+  .company-link:hover {
+    text-decoration: underline;
+  }
+
+  .date-value {
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    gap: var(--space-1);
-    text-align: right;
+    align-items: center;
+    gap: var(--space-2);
   }
 
-  .date-info {
+  .duration-badge {
+    font-size: var(--text-xs);
+    padding: 2px 6px;
+    background: var(--color-surface);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-muted);
+  }
+
+  .commit-refs {
     display: flex;
-    flex-direction: column;
-    align-items: flex-end;
+    flex-wrap: wrap;
     gap: var(--space-1);
+    margin: var(--space-2) 0;
   }
 
-  .date-range {
+  .ref-tag {
     font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    padding: 2px 8px;
+    border-radius: var(--radius-sm);
+    background: var(--color-surface);
+    color: var(--color-text-secondary);
+  }
+
+  .ref-tag.tag-remote {
+    background: var(--color-teal);
+    color: white;
+  }
+
+  .ref-tag.tag-onsite {
+    background: var(--color-orange);
+    color: white;
+  }
+
+  .ref-tag.tag-fintech {
+    background: oklch(0.5 0.1 200 / 0.2);
+    color: var(--color-teal);
+  }
+
+  .ref-tag.tag-startup {
+    background: oklch(0.6 0.15 70 / 0.2);
+    color: var(--color-orange);
+  }
+
+  .ref-tag.tag-contract {
+    background: oklch(0.6 0.14 306 / 0.2);
+    color: var(--color-purple);
+  }
+
+  .ref-tag.tag-healthcare,
+  .ref-tag.tag-enterprise {
+    background: oklch(0.55 0.1 145 / 0.2);
+    color: var(--color-green);
+  }
+
+  .ref-tag.tag-ai,
+  .ref-tag.tag-web3 {
+    background: oklch(0.55 0.15 15 / 0.2);
+    color: var(--color-red);
+  }
+
+  .commit-message {
+    margin: var(--space-3) 0;
+    padding-left: var(--space-4);
+    border-left: 2px solid var(--color-border);
+  }
+
+  .message-line {
+    font-family: var(--font-sans);
     font-size: var(--text-sm);
     color: var(--color-text-secondary);
-    text-transform: lowercase;
+    line-height: var(--leading-relaxed);
+    margin: var(--space-2) 0;
   }
 
-  .duration {
+  .message-line:first-child {
+    margin-top: 0;
+  }
+
+  .commit-diff {
+    margin-top: var(--space-3);
+    padding-top: var(--space-3);
+    border-top: 1px solid var(--color-border-subtle);
+  }
+
+  .diff-header {
     font-family: var(--font-mono);
     font-size: var(--text-xs);
     color: var(--color-text-muted);
+    margin-bottom: var(--space-2);
+    display: flex;
+    gap: var(--space-2);
+  }
+
+  .diff-separator {
+    color: var(--color-border);
+  }
+
+  .diff-insertions {
+    color: var(--color-green);
   }
 
-  .highlights {
-    list-style: none;
-    padding: 0;
-    margin: 0 0 var(--space-4) 0;
+  .diff-deletions {
+    color: var(--color-red);
+  }
+
+  .tech-badges {
     display: flex;
-    flex-direction: column;
-    gap: var(--space-2);
+    flex-wrap: wrap;
+    gap: var(--space-1);
   }
 
-  .highlight-item {
-    font-family: var(--font-sans);
-    font-size: var(--text-base);
-    color: var(--color-text-secondary);
-    line-height: var(--leading-relaxed);
-    padding-left: var(--space-4);
-    position: relative;
+  .tech-badge {
+    font-family: var(--font-mono);
+    font-size: var(--text-xs);
+    padding: 2px 6px;
+    background: var(--color-surface);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-muted);
   }
 
-  .highlight-item::before {
-    content: ">";
+  .commit-logo {
     position: absolute;
-    left: 0;
-    color: var(--color-primary);
-    font-family: var(--font-mono);
-    font-weight: var(--font-bold);
+    top: 0;
+    right: 0;
+    opacity: 0.15;
+    pointer-events: none;
   }
 
-  .experience-footer {
-    padding-top: var(--space-4);
-    border-top: 1px solid var(--color-border);
+  .logo-img {
+    width: 60px;
+    height: 60px;
+    border-radius: var(--radius-md);
+    object-fit: cover;
+  }
+
+  .commit-entry.highlighted .commit-logo {
+    opacity: 0.3;
   }
 
-  .show-more-container {
+  /* Show more */
+  .show-more-entry {
     display: flex;
-    justify-content: center;
-    padding: var(--space-6) 0;
+    gap: var(--space-4);
+    padding: var(--space-4) 0;
   }
 
   .show-more-button {
+    flex: 1;
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     gap: var(--space-1);
+    padding: var(--space-4);
     font-family: var(--font-mono);
     font-size: var(--text-sm);
-    color: var(--color-text-secondary);
-    background: none;
-    border: none;
+    background: var(--color-surface);
+    border: 1px dashed var(--color-border);
+    border-radius: var(--radius-md);
     cursor: pointer;
-    padding: var(--space-4);
-    text-transform: lowercase;
-    transition: color var(--transition-fast);
+    transition:
+      background-color var(--transition-fast),
+      border-color var(--transition-fast);
   }
 
   .show-more-button:hover {
-    color: var(--color-text-primary);
+    background: var(--color-surface-hover);
+    border-color: var(--color-primary);
   }
 
-  .show-more-button .comment-prefix {
-    color: var(--color-primary);
+  .more-text {
+    color: var(--color-text-secondary);
   }
 
-  .show-more-line {
-    display: block;
+  .more-hint {
+    color: var(--color-text-muted);
+    font-size: var(--text-xs);
   }
 
+  .log-end {
+    text-align: center;
+    padding: var(--space-4);
+  }
+
+  .end-marker {
+    font-family: var(--font-mono);
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    background: var(--color-surface);
+    padding: var(--space-1) var(--space-3);
+    border-radius: var(--radius-sm);
+  }
+
+  /* Responsive */
   @media (--lg) {
     .sidebar {
       width: 180px;
     }
+
+    .commit-list {
+      max-height: 200px;
+    }
   }
 
   @media (--md) {
@@ -510,42 +950,58 @@
       width: 100%;
     }
 
-    .experience-header {
-      flex-wrap: wrap;
-      gap: var(--space-3);
+    .commit-list {
+      display: none;
     }
 
-    .company-logo {
-      width: 50px;
-      height: 50px;
+    .career-stats {
+      display: flex;
+      gap: var(--space-6);
+      border-top: none;
+      padding-top: 0;
     }
 
-    .via-logo {
-      width: 26px;
-      height: 26px;
+    .stat-line {
+      flex-direction: column;
+      gap: 0;
     }
 
-    .experience-meta {
-      align-items: flex-start;
-      text-align: left;
+    .terminal-window {
+      border-radius: var(--radius-md);
+    }
+
+    .commit-entry {
+      flex-direction: column;
+      gap: var(--space-2);
     }
 
-    .date-info {
+    .git-graph {
       flex-direction: row;
-      align-items: baseline;
-      gap: var(--space-3);
+      width: 100%;
+      justify-content: flex-start;
+      gap: var(--space-2);
+    }
+
+    .graph-line {
+      height: 2px;
+      width: 20px;
+      min-height: auto;
+    }
+
+    .graph-line.top {
+      display: none;
     }
 
-    .duration::before {
-      content: "• ";
+    .commit-logo {
+      display: none;
     }
 
-    .company-name {
-      font-size: var(--text-lg);
+    .commit-header {
+      font-size: var(--text-xs);
     }
 
-    .experience-card {
-      padding: var(--space-4);
+    .commit-hash {
+      display: none;
     }
   }
 </style>