Responsive About Me Portfolio Section

<section class="mt-10 max-w-5xl">
      <div class="flex sm:mb-8 mb-6 items-end justify-between">
        <div class="">
          <p class="text-[11px] sm:text-xs uppercase text-neutral-500 tracking-widest font-geist">(02) About Me</p>
          <h3 class="mt-2 text-2xl sm:text-3xl tracking-tight font-geist font-medium" style="">Creating with purpose and passion.</h3>
        </div>
        <a href="#work" class="hidden sm:inline-flex items-center gap-2 ring-1 ring-neutral-200 hover:shadow text-sm text-neutral-700 font-geist bg-white rounded-full pt-2 pr-4 pb-2 pl-4">
          View Resume
          <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="arrow-up-right" class="lucide lucide-arrow-up-right w-[24px] h-[16px]" style="width: 24px; height: 16px; color: rgb(64, 64, 64);"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
        </a>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Left Column - Images -->
        <div class="flex flex-col gap-4">
          <div class="relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-3xl shadow-sm">
            <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/70f42fcd-9df2-4ed0-aaa4-6582ce1171fa_800w.jpg" alt="Alex at work" class="h-80 w-full object-cover">
          </div>
          
          <div class="grid grid-cols-2 gap-4">
            <div class="relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-2xl shadow-sm">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/c3a00318-96f3-4f44-961e-a22e2a0b2bc6_800w.jpg" alt="Design process" class="h-40 w-full object-cover">
            </div>
            
            <div class="relative overflow-hidden ring-1 ring-neutral-200 bg-white rounded-2xl shadow-sm">
              <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/7de1229a-6a54-423d-a41c-2377d871bf2c_800w.jpg" alt="Creative workspace" class="h-40 w-full object-cover">
            </div>
          </div>
        </div>

        <!-- Right Column - About Me Content -->
        <div class="flex flex-col">
          <div class="space-y-6">
            <div class="">
              <h4 class="text-lg font-medium text-neutral-900 font-geist mb-3">Hello, I'm Alex</h4>
              <p class="text-neutral-600 leading-relaxed font-geist">
                I'm a passionate designer and developer based in New York with over 8 years of experience creating digital experiences that matter. I believe great design is not just about making things look beautiful—it's about solving real problems for real people.
              </p>
            </div>

            <div class="">
              <h5 class="text-base font-medium text-neutral-900 font-geist mb-3">My Approach</h5>
              <p class="text-neutral-600 leading-relaxed font-geist">
                I combine strategic thinking with creative execution to deliver solutions that drive business results. Every project starts with understanding your users, your goals, and the problems we're solving together.
              </p>
            </div>

            <div class="">
              <h5 class="text-base font-medium text-neutral-900 font-geist mb-3">Skills &amp; Expertise</h5>
              <div class="grid grid-cols-2 gap-3">
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 rounded-full bg-indigo-600"></div>
                  <span class="text-sm text-neutral-600 font-geist">UI/UX Design</span>
                </div>
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 rounded-full bg-indigo-600"></div>
                  <span class="text-sm text-neutral-600 font-geist">Frontend Development</span>
                </div>
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 rounded-full bg-indigo-600"></div>
                  <span class="text-sm text-neutral-600 font-geist">Product Strategy</span>
                </div>
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 rounded-full bg-indigo-600"></div>
                  <span class="text-sm text-neutral-600 font-geist">Brand Identity</span>
                </div>
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 rounded-full bg-indigo-600"></div>
                  <span class="text-sm text-neutral-600 font-geist">Design Systems</span>
                </div>
                <div class="flex items-center gap-2">
                  <div class="h-2 w-2 rounded-full bg-indigo-600"></div>
                  <span class="text-sm text-neutral-600 font-geist">User Research</span>
                </div>
              </div>
            </div>

            <div class="">
              <h5 class="text-base font-medium text-neutral-900 font-geist mb-3">When I'm Not Designing</h5>
              <p class="text-neutral-600 leading-relaxed font-geist">
                You'll find me exploring new coffee shops around the city, hiking upstate, or experimenting with new design tools. I'm always curious about emerging technologies and how they can improve the human experience.
              </p>
            </div>

            <div class="pt-4">
              <div class="flex flex-wrap gap-3">
                <span class="inline-flex items-center rounded-full bg-neutral-100 text-neutral-700 text-xs px-3 py-1.5 font-geist">8+ Years Experience</span>
                <span class="inline-flex items-center rounded-full bg-neutral-100 text-neutral-700 text-xs px-3 py-1.5 font-geist">50+ Projects Delivered</span>
                <span class="inline-flex items-center rounded-full bg-neutral-100 text-neutral-700 text-xs px-3 py-1.5 font-geist">Based in NYC</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="mt-8 sm:mt-10 flex justify-center">
        <a href="#contact" class="inline-flex items-center gap-2 rounded-full bg-white ring-1 ring-neutral-200 px-5 py-3 text-sm text-neutral-700 hover:shadow font-geist">
          Let's Work Together
          <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="arrow-up-right" class="lucide lucide-arrow-up-right w-[24px] h-[16px]" style="width: 24px; height: 16px; color: rgb(64, 64, 64);"><path d="M7 7h10v10" class=""></path><path d="M7 17 17 7" class=""></path></svg>
        </a>
      </div>
</section>