Responsive About Section with Image & Timeline

<section class="sm:px-6 md:px-10 max-w-7xl mr-auto ml-auto pt-16 pr-4 pb-16 pl-4">
  <div class="relative overflow-hidden rounded-3xl bg-neutral-950 ring-1 ring-neutral-800 p-6 sm:p-8">
    <div class="absolute inset-0 pointer-events-none">
      <div class="absolute -left-24 top-1/3 w-[520px] h-[520px] rounded-full bg-gradient-to-br from-neutral-800 to-neutral-900 blur-3xl opacity-40"></div>
      <div class="absolute right-0 top-0 bottom-0 w-px bg-gradient-to-b from-transparent via-neutral-800 to-transparent"></div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
      <div class="lg:col-span-2">
        <div class="inline-flex items-center gap-2 text-[11px] uppercase tracking-[0.2em] text-neutral-400">
          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" style="stroke-width:1.5" class="text-indigo-500"><path d="M11 19L2 5h18L11 19z" class=""></path></svg>
          About
        </div>
        <h2 class="mt-3 text-3xl sm:text-4xl md:text-5xl lg:text-6xl text-white font-medium leading-[1.05] tracking-tight" style="font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;">
          My journey in creating memorable brand experiences.
        </h2>

        <div class="mt-10 relative">
          <img src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/83ca20c0-64e5-412d-9c79-224a4ae90b74_1600w.jpg" alt="Design workspace" class="ring-1 ring-neutral-800 w-full object-cover rounded-3xl">
          <div class="absolute inset-x-0 bottom-0 h-24 bg-gradient-to-t from-neutral-950 to-transparent"></div>
        </div>
      </div>

      <div class="lg:col-span-1">
        <div class="relative pl-8">
          <div class="absolute left-0 top-0 bottom-0 w-px bg-neutral-800"></div>
          <div class="absolute left-0 top-6 h-24 w-px bg-gradient-to-b from-indigo-500 to-violet-500 rounded-full"></div>

          <div class="relative mb-10">
            <span class="absolute -left-3 top-3 h-px w-3 bg-neutral-700"></span>
            <p class="text-[11px] uppercase tracking-[0.2em] text-neutral-400">2015–2018</p>
            <p class="mt-1 text-white text-base sm:text-lg font-medium tracking-tight">Started as a graphic designer at boutique agencies</p>
          </div>

          <div class="relative mb-10">
            <span class="absolute -left-3 top-3 h-px w-3 bg-neutral-700"></span>
            <p class="text-[11px] uppercase tracking-[0.2em] text-neutral-400">2019–2021</p>
            <p class="mt-1 text-white text-base sm:text-lg font-medium tracking-tight">Art direction for music and lifestyle brands</p>
          </div>

          <div class="relative mb-10">
            <span class="absolute -left-3 top-3 h-px w-3 bg-neutral-700"></span>
            <p class="text-[11px] uppercase tracking-[0.2em] text-neutral-400">2022–2023</p>
            <p class="mt-1 text-white text-base sm:text-lg font-medium tracking-tight">Founded Vibe Studio, developed methodology</p>
          </div>

          <div class="relative mb-10">
            <span class="absolute -left-3 top-3 h-px w-3 bg-neutral-700"></span>
            <p class="text-[11px] uppercase tracking-[0.2em] text-neutral-400">2024</p>
            <p class="mt-1 text-white text-base sm:text-lg font-medium tracking-tight">Expanded into motion and interactive experiences</p>
          </div>

          <div class="relative">
            <span class="absolute -left-3 top-3 h-px w-3 bg-neutral-700"></span>
            <p class="text-[11px] uppercase tracking-[0.2em] text-neutral-400">2025</p>
            <p class="mt-1 text-white text-base sm:text-lg font-medium tracking-tight">Building the future of mood-driven design systems</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>