---import { groups } from '../data/stack.ts';const icons: Record<string, string> = { systems: 'M4 5h16M4 12h16M4 19h16M7 5v3M17 12v3M10 19v-3', frontend: 'M3 5h18v14H3zM3 9h18M7 7h.01M9 7h.01M11 7h.01', tools: 'M5 7l4 4-4 4M13 17h6', creative: 'M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8z',};---<section id="about" class="about"> <div class="shell"> <header class="section-head" data-reveal> <p class="eyebrow">About</p> <h2>What I work on, and with.</h2> <p> I split my time between the systems desk, where the work is memory, throughput, and not crashing at 2am, and the interface desk, where it's Astro, Svelte, React, and TypeScript. Tauri is where the two meet. When the screen goes dark I open Blender, Photoshop, or Premiere, and lately Gemini is in the loop too. The thread through all of it: build the thing properly, then make it pleasant to use. </p> </header> <div class="grid"> {groups.map((g) => ( <article class="focus card" data-reveal> <div class="focus-head"> <span class="ic" aria-hidden="true"> <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d={icons[g.icon]} /></svg> </span> <h3>{g.title}</h3> </div> <p class="blurb">{g.blurb}</p> <ul class="pills"> {g.items.map((t) => ( <li class="pill"> <img src={`https://cdn.simpleicons.org/${t.slug}/${t.color.replace('#', '')}`} alt="" width="16" height="16" loading="lazy" /> <span>{t.name}</span> </li> ))} </ul> </article> ))} </div> </div></section><style> .grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); align-items: stretch; } @media (max-width: 680px) { .grid { grid-template-columns: 1fr; } } .focus { display: flex; flex-direction: column; gap: 16px; padding: 26px 24px; } .focus-head { display: flex; align-items: center; gap: 12px; } .ic { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--bg-raise-2); border: 1px solid var(--stroke); color: var(--accent); flex: none; } .blurb { font-size: 0.95rem; color: var(--text-3); margin: 0; max-width: none; } .pills { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }</style>