Responsive About/Profile Card with Image & Stats

<div class="rounded-2xl ring-1 ring-white/10 overflow-hidden bg-white/5">
  <div class="flex items-end justify-between p-6 border-b border-white/10">
    <h2 class="text-2xl sm:text-3xl tracking-tight font-semibold text-white">About</h2>
    <p class="hidden sm:block text-xs text-neutral-400">Story, experience, recognitions</p>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-12">
    <!-- Name -->
    <div class="p-6 md:col-span-3 border-b md:border-b-0 md:border-r border-white/10">
      <p class="text-sm text-neutral-400">Creative Technologist</p>
      <p class="mt-1 text-lg font-medium tracking-tight text-white">Kyro Studio</p>
      <div class="mt-4 flex items-center gap-2 text-xs text-neutral-400">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="map-pin"
          class="lucide lucide-map-pin w-4 h-4"></svg>
        <span>Seattle, Washington • Remote‑friendly</span>
      </div>
    </div>

    <!-- Portrait (row-span-2) -->
    <div class="relative md:col-span-6 md:row-span-2 border-b md:border-b-0 md:border-r border-white/10">
      <div class="relative aspect-[16/10] md:aspect-[9/10] lg:aspect-[16/10]">
        <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/102e9e77-7a32-4330-92f4-d2149285c86b_1600w.jpg" alt="Portrait side profile with dramatic lighting" class="absolute inset-0 w-full h-full object-cover">
        <div
          class="absolute inset-0 bg-gradient-to-tr from-black/40 via-transparent to-transparent pointer-events-none">
        </div>

        <!-- Overlay stats (desktop) -->
        <div class="hidden md:block absolute inset-0 pointer-events-none">
          <div class="absolute top-5 right-5 rounded-xl bg-black/45 ring-1 ring-white/10 backdrop-blur-sm p-4">
            <div class="text-2xl lg:text-3xl font-semibold tracking-tight text-white">100+</div>
            <p class="text-[11px] text-neutral-300 mt-0.5">Completed Projects</p>
          </div>
          <div class="absolute bottom-5 left-5 rounded-xl bg-black/45 ring-1 ring-white/10 backdrop-blur-sm p-4">
            <div class="text-2xl lg:text-3xl font-semibold tracking-tight text-white">10+</div>
            <p class="text-[11px] text-neutral-300 mt-0.5">Years of Experience</p>
          </div>
          <div
            class="absolute bottom-5 left-1/2 -translate-x-1/2 rounded-xl bg-black/45 ring-1 ring-white/10 backdrop-blur-sm p-4">
            <div class="text-2xl lg:text-3xl font-semibold tracking-tight text-white">3</div>
            <p class="text-[11px] text-neutral-300 mt-0.5">Languages Spoken</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Right stat (top) -->
    <div class="p-6 md:col-span-3 border-b md:border-b-0">
      <div class="text-3xl font-semibold tracking-tight text-white">5</div>
      <p class="text-xs text-neutral-400 mt-1">Industry Awards</p>
    </div>

    <!-- Bio (bottom-left) -->
    <div class="p-6 md:col-span-3 border-t md:border-t border-white/10 md:border-r">
      <p class="text-sm text-neutral-300 leading-relaxed">
        I design and build considered interfaces and rapid prototypes that bridge engineering and visual craft. From
        early concepts to production, I help teams move faster with clarity and intention.
      </p>
      <div
        class="mt-4 inline-flex items-center gap-2 text-sm font-medium tracking-tight text-white bg-white/10 hover:bg-white/20 rounded-full px-3 py-1.5 ring-1 ring-white/10">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="file-text"
          class="lucide lucide-file-text w-4 h-4"></svg>
        <span>Request CV</span>
      </div>
    </div>

    <!-- Right stat (bottom) -->
    <div class="p-6 md:col-span-3 border-t border-white/10">
      <div class="text-3xl font-semibold tracking-tight text-white">30+</div>
      <p class="text-xs text-neutral-400 mt-1">Clients Served</p>
    </div>
  </div>

  <!-- Mobile stats (stacked) -->
  <div class="md:hidden border-t border-white/10 grid grid-cols-3">
    <div class="p-4 text-center border-r border-white/10">
      <div class="text-xl font-semibold tracking-tight text-white">100+</div>
      <p class="text-[11px] text-neutral-400 mt-0.5">Projects</p>
    </div>
    <div class="p-4 text-center border-r border-white/10">
      <div class="text-xl font-semibold tracking-tight text-white">10+</div>
      <p class="text-[11px] text-neutral-400 mt-0.5">Years</p>
    </div>
    <div class="p-4 text-center">
      <div class="text-xl font-semibold tracking-tight text-white">3</div>
      <p class="text-[11px] text-neutral-400 mt-0.5">Languages</p>
    </div>
  </div>
</div>