Responsive About/Profile Card with Skills & Achievements

<div class="lg:col-span-7 xl:col-span-8 ring-1 ring-white/10 bg-white/5 rounded-3xl pt-6 pr-6 pb-6 pl-6 max-w-3xl">
  <h2 class="text-2xl tracking-tight text-white font-geist font-light">About</h2>
  <p class="mt-3 text-slate-300/90 text-sm font-geist">
    I'm a systems-minded designer with 8+ years crafting products for fast-moving teams.
    I thrive at the intersection of customer empathy and measurable outcomes—translating insight into
    elegant, scalable interfaces. Previously at regional startups and global SaaS.
  </p>

  <!-- Experience Details -->
  <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="rounded-2xl bg-black/20 p-4 ring-1 ring-white/10">
      <div class="flex items-center gap-2 mb-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-building-2 h-4 w-4 text-emerald-300">
          <path d="M6 22V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v18Z"></path>
          <path d="M6 12H4a2 2 0 0 0-2 2v8h20v-8a2 2 0 0 0-2-2h-2"></path>
          <path d="M18 9h2a2 2 0 0 1 2 2v1"></path>
          <path d="M13.5 3.5c-.76 0-1.5.3-2 .8s-1.24.8-2 .8-1.5-.3-2-.8-.76-.8-2-.8"></path>
        </svg>
        <span class="text-xs text-slate-300 font-medium font-geist">Recent Experience</span>
      </div>
      <p class="text-sm text-white font-medium font-geist">Senior Product Designer</p>
      <p class="text-xs text-slate-400 font-geist">Fintech startup • 2022-2024</p>
      <p class="text-xs text-slate-300/80 font-geist mt-1">Led design system overhaul, increasing dev velocity by 40%
      </p>
    </div>

    <div class="rounded-2xl bg-black/20 p-4 ring-1 ring-white/10">
      <div class="flex items-center gap-2 mb-2">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
          class="lucide lucide-graduation-cap h-4 w-4 text-emerald-300">
          <path
            d="M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z">
          </path>
          <path d="M22 10v6"></path>
          <path d="M6 12.5V16a6 3 0 0 0 12 0v-3.5"></path>
        </svg>
        <span class="text-xs text-slate-300 font-medium font-geist">Education</span>
      </div>
      <p class="text-sm text-white font-medium font-geist">Bachelor of Design</p>
      <p class="text-xs text-slate-400 font-geist">National University of Singapore</p>
      <p class="text-xs text-slate-300/80 font-geist mt-1">Specialized in interaction design &amp; human factors</p>
    </div>
  </div>

  <!-- Achievements -->
  <div class="mt-6 rounded-2xl bg-black/20 p-4 ring-1 ring-white/10">
    <div class="flex items-center gap-2 mb-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-trophy h-4 w-4 text-emerald-300">
        <path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"></path>
        <path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"></path>
        <path d="M4 22h16"></path>
        <path d="M10 14.66V17c0 .55.47.98.97 1.21C12.04 18.75 13 20.24 13 22"></path>
        <path d="M14 14.66V17c0 .55-.47.98-.97 1.21C11.96 18.75 11 20.24 11 22"></path>
        <path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"></path>
      </svg>
      <span class="text-xs text-slate-300 font-medium font-geist">Key Achievements</span>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
      <div class="text-center">
        <div class="text-lg font-semibold text-emerald-300 font-geist">+23%</div>
        <div class="text-xs text-slate-300/80 font-geist">Avg. conversion lift</div>
      </div>
      <div class="text-center">
        <div class="text-lg font-semibold text-emerald-300 font-geist">15+</div>
        <div class="text-xs text-slate-300/80 font-geist">Products shipped</div>
      </div>
      <div class="text-center">
        <div class="text-lg font-semibold text-emerald-300 font-geist">3</div>
        <div class="text-xs text-slate-300/80 font-geist">Design awards</div>
      </div>
    </div>
  </div>

  <!-- Skills and Tools -->
  <div class="mt-6">
    <div class="flex items-center gap-2 mb-3">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"
        class="lucide lucide-wrench h-4 w-4 text-slate-300">
        <path
          d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z">
        </path>
      </svg>
      <span class="text-xs text-slate-300 font-medium font-geist">Tools &amp; Technologies</span>
    </div>
    <div class="flex flex-wrap items-center gap-2">
      <span class="inline-flex items-center gap-1.5 rounded-full bg-black/30 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-white/15 font-geist">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="pencil" class="lucide lucide-pencil h-3.5 w-3.5 text-white/90"><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"></path><path d="m15 5 4 4"></path></svg>
        Figma, Figjam
      </span>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-black/30 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-white/15 font-geist">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="code-2" class="lucide lucide-code-2 h-3.5 w-3.5 text-white/90"><path d="m18 16 4-4-4-4"></path><path d="m6 8-4 4 4 4"></path><path d="m14.5 4-5 16"></path></svg>
        React, Framer
      </span>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-black/30 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-white/15 font-geist">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="beaker" class="lucide lucide-beaker h-3.5 w-3.5 text-white/90"><path d="M4.5 3h15"></path><path d="M6 3v16a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V3"></path><path d="M6 14h12"></path></svg>
        Research, Testing
      </span>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-black/30 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-white/15 font-geist">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette h-3.5 w-3.5 text-white/90"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg>
        Adobe Creative Suite
      </span>
      <span class="inline-flex items-center gap-1.5 rounded-full bg-black/30 px-2.5 py-1 text-xs text-slate-200 ring-1 ring-white/15 font-geist">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity h-3.5 w-3.5 text-white/90"><path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path></svg>
        Mixpanel, Hotjar
      </span>
    </div>
  </div>
</div>