  <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

    <!-- Language Distribution -->
    <div class="neon-card hover-neon-glow">
      <h3 class="font-bold mb-6 flex items-center gap-2">
        <span class="material-symbols-outlined text-primary">pie_chart</span>
        Language Distribution
      </h3>

      <!-- Language Bar -->
      <div class="lang-bar mb-6">
        ${html`${Object.entries(languages).slice(0, 5).map(([lang, data]) => `
          <div class="lang-segment" style="width: ${data.percentage}%; background-color: ${lang === 'JavaScript' ? '#f1e05a' : lang === 'TypeScript' ? '#3178c6' : lang === 'HTML' ? '#e34c26' : lang === 'Shell' ? '#89e051' : lang === 'CSS' ? '#563d7c' : '#666'}"></div>
        `).join('')}`}
      </div>

      <!-- Language Legend -->
      <div class="space-y-2">
        ${html`${Object.entries(languages).slice(0, 5).map(([lang, data]) => `
        <div class="flex items-center justify-between text-sm">
          <div class="flex items-center gap-2">
            <span class="w-3 h-3 rounded-full" style="background-color: ${lang === 'JavaScript' ? '#f1e05a' : lang === 'TypeScript' ? '#3178c6' : lang === 'HTML' ? '#e34c26' : lang === 'Shell' ? '#89e051' : lang === 'CSS' ? '#563d7c' : '#666'}"></span>
            <span>${lang}</span>
          </div>
          <span class="text-faint">${data.percentage}%</span>
        </div>
        `).join('')}`}
      </div>
    </div>

Latest Activity -->

history Latest Activity

${events.slice(0, 5).map((event, index) => { const desc = getEventDescription(event) const isLast = index === events.slice(0, 5).length - 1 display(html`

}).join('')}

View All Activity