Designer Portfolio Bio & Experience Section

<section class="relative z-20 bg-[#6D28D9] text-white w-full border-b border-white/10 pointer-events-auto font-sans"
  style="font-family: 'Inter', sans-serif;">
  <script src="https://unpkg.com/lucide@latest"></script>
  <script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>

  <div class="grid grid-cols-1 lg:grid-cols-4 w-full">
    <!-- Section Header -->
    <div class="col-span-1 lg:col-span-4 p-8 lg:p-12 border-b border-white/10 flex flex-col items-start gap-6">
      <div
        class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 border border-white/10 backdrop-blur-md shadow-sm">
        <iconify-icon icon="solar:star-fall-minimalistic-2-linear" width="16" class="text-white"></iconify-icon>
        <span class="text-xs font-medium tracking-wide text-white/90 uppercase">Expert Designer</span>
      </div>
      <h2 class="text-5xl lg:text-8xl font-medium tracking-tighter text-white leading-[0.9]">
        Johan Beker<span class="text-white/40">.</span>
      </h2>
      <p class="text-white/70 text-xl lg:text-2xl max-w-2xl font-light leading-relaxed">
        Brief initial presentation of myself and my previous experiences in the digital realm.
      </p>
    </div>

    <!-- Sidebar: Profile Card -->
    <div
      class="col-span-1 lg:col-span-1 flex flex-col min-h-[600px] bg-black/5 h-full border-white/10 border-r border-b pt-8 pr-8 pb-8 pl-8 justify-between">
      <div class="flex flex-col gap-8">
        <!-- Avatar -->
        <div
          class="aspect-[4/5] overflow-hidden group bg-black/20 w-full border-white/10 border rounded-sm relative shadow-2xl">
          <img src="https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/a2da6658-f187-40c3-b46c-cd9d3d98faff_800w.webp" alt="Profile" class="group-hover:grayscale-0 transition-all duration-700 w-full h-full object-cover grayscale">
          <div class="bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-80 absolute inset-0"></div>

          <!-- Availability -->
          <div class="absolute bottom-4 left-4 right-4 flex items-center justify-between">
            <div
              class="flex items-center gap-2 bg-white/10 backdrop-blur-md px-3 py-1.5 rounded-full border border-white/10">
              <div class="w-1.5 h-1.5 rounded-full bg-green-400 shadow-[0_0_8px_rgba(74,222,128,0.5)]"></div>
              <span class="text-[10px] font-medium uppercase tracking-wider text-white">Available for work</span>
            </div>
          </div>
        </div>

        <div>
          <h3 class="text-3xl font-medium tracking-tight mb-2">Hello I am Johan</h3>
          <p class="text-base text-white/60 leading-relaxed font-light">
            UI/UX Interaction Designer Based in Berlin.
          </p>
        </div>

        <!-- Social links -->
        <div class="flex items-center gap-3">
          <a href="#"
            class="w-12 h-12 flex items-center justify-center border border-white/10 rounded-full hover:bg-white hover:text-[#6D28D9] transition-all hover:scale-110 group">
            <iconify-icon icon="simple-icons:x" width="20"></iconify-icon>
          </a>
          <a href="#"
            class="w-12 h-12 flex items-center justify-center border border-white/10 rounded-full hover:bg-white hover:text-[#6D28D9] transition-all hover:scale-110 group">
            <iconify-icon icon="simple-icons:instagram" width="20"></iconify-icon>
          </a>
          <a href="#"
            class="w-12 h-12 flex items-center justify-center border border-white/10 rounded-full hover:bg-white hover:text-[#6D28D9] transition-all hover:scale-110 group">
            <iconify-icon icon="simple-icons:dribbble" width="20"></iconify-icon>
          </a>
        </div>
      </div>

      <button class="group mt-12 w-full py-4 px-6 bg-white text-[#6D28D9] font-semibold text-sm tracking-wide rounded-sm flex items-center justify-between hover:bg-white/90 transition-all shadow-xl">
                Connect with me
                <iconify-icon icon="solar:arrow-right-up-linear" width="18" class="group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform"></iconify-icon>
            </button>
    </div>

    <!-- Main Content: Bio & Experience -->
    <div class="col-span-1 lg:col-span-3 flex flex-col h-full">
      <!-- Bio & Tags -->
      <div class="p-8 lg:p-12 border-b border-white/10 bg-white/[0.02]">
        <p class="text-2xl lg:text-3xl font-normal leading-snug text-white/90 max-w-3xl">
          I'm a dedicated Web Designer &amp; Developer based in the vibrant city of Berlin. I specialize in creative
          design with seamless technical execution to craft exceptional digital experiences.
        </p>

        <div class="flex flex-wrap gap-2 mt-12">
          <span class="px-4 py-2 bg-white/5 border border-white/10 rounded-md text-xs font-mono uppercase tracking-wider text-white/80 hover:bg-white/10 transition-colors cursor-default">Product Design</span>
          <span class="px-4 py-2 bg-white/5 border border-white/10 rounded-md text-xs font-mono uppercase tracking-wider text-white/80 hover:bg-white/10 transition-colors cursor-default">UX Design</span>
          <span class="px-4 py-2 bg-white/5 border border-white/10 rounded-md text-xs font-mono uppercase tracking-wider text-white/80 hover:bg-white/10 transition-colors cursor-default">UI Design</span>
          <span class="px-4 py-2 bg-white/5 border border-white/10 rounded-md text-xs font-mono uppercase tracking-wider text-white/80 hover:bg-white/10 transition-colors cursor-default">Framer</span>
          <span class="px-4 py-2 bg-white/5 border border-white/10 rounded-md text-xs font-mono uppercase tracking-wider text-white/80 hover:bg-white/10 transition-colors cursor-default">Branding</span>
          <span class="px-4 py-2 bg-white/5 border border-white/10 rounded-md text-xs font-mono uppercase tracking-wider text-white/80 hover:bg-white/10 transition-colors cursor-default">Webflow</span>
        </div>
      </div>

      <!-- Experience Timeline -->
      <div class="flex-1 bg-black/10 flex flex-col">
        <!-- Timeline Item 1 -->
        <div
          class="group flex-1 flex flex-col lg:flex-row items-start lg:items-center justify-between p-6 lg:px-12 border-b border-white/10 hover:bg-white/5 transition-colors cursor-default gap-4">
          <div class="flex items-center gap-8 w-full lg:w-auto">
            <div class="flex items-center gap-3 w-32">
              <iconify-icon icon="solar:calendar-linear" width="16" class="text-white/40"></iconify-icon>
              <span class="text-sm font-mono text-white/40 group-hover:text-white/60 transition-colors">2021</span>
            </div>
            <h4 class="text-lg font-medium tracking-tight">Freelance Designer</h4>
          </div>
          <div class="flex items-center justify-between w-full lg:w-auto lg:flex-1 lg:justify-end gap-8">
            <iconify-icon icon="simple-icons:spotify" width="96" height="36"
              class="text-white/40 group-hover:text-[#1DB954] transition-colors"></iconify-icon>
            <iconify-icon icon="solar:arrow-right-linear" width="24"
              class="text-white/20 group-hover:text-white group-hover:translate-x-2 transition-transform"></iconify-icon>
          </div>
        </div>

        <!-- Timeline Item 2 -->
        <div
          class="group flex-1 flex flex-col lg:flex-row items-start lg:items-center justify-between p-6 lg:px-12 border-b border-white/10 hover:bg-white/5 transition-colors cursor-default gap-4">
          <div class="flex items-center gap-8 w-full lg:w-auto">
            <div class="flex items-center gap-3 w-32">
              <iconify-icon icon="solar:calendar-linear" width="16" class="text-white/40"></iconify-icon>
              <span class="text-sm font-mono text-white/40 group-hover:text-white/60 transition-colors">2022</span>
            </div>
            <h4 class="text-lg font-medium tracking-tight">UX/UI Specialist</h4>
          </div>
          <div class="flex items-center justify-between w-full lg:w-auto lg:flex-1 lg:justify-end gap-8">
            <iconify-icon icon="simple-icons:airbnb" width="96" height="36"
              class="text-white/40 group-hover:text-[#FF5A5F] transition-colors"></iconify-icon>
            <iconify-icon icon="solar:arrow-right-linear" width="24"
              class="text-white/20 group-hover:text-white group-hover:translate-x-2 transition-transform"></iconify-icon>
          </div>
        </div>

        <!-- Timeline Item 3 -->
        <div
          class="group flex-1 flex flex-col lg:flex-row items-start lg:items-center justify-between p-6 lg:px-12 border-b border-white/10 hover:bg-white/5 transition-colors cursor-default gap-4">
          <div class="flex items-center gap-8 w-full lg:w-auto">
            <div class="flex items-center gap-3 w-32">
              <iconify-icon icon="solar:calendar-linear" width="16" class="text-white/40"></iconify-icon>
              <span class="text-sm font-mono text-white/40 group-hover:text-white/60 transition-colors">2023</span>
            </div>
            <h4 class="text-lg font-medium tracking-tight">Lead Product Designer</h4>
          </div>
          <div class="flex items-center justify-between w-full lg:w-auto lg:flex-1 lg:justify-end gap-8">
            <iconify-icon icon="simple-icons:linear" width="96" height="36"
              class="text-white/40 group-hover:text-[#5E6AD2] transition-colors"></iconify-icon>
            <iconify-icon icon="solar:arrow-right-linear" width="24"
              class="text-white/20 group-hover:text-white group-hover:translate-x-2 transition-transform"></iconify-icon>
          </div>
        </div>

        <!-- Timeline Item 4 -->
        <div
          class="group flex-1 flex flex-col lg:flex-row items-start lg:items-center justify-between p-6 lg:px-12 hover:bg-white/5 transition-colors cursor-default gap-4">
          <div class="flex items-center gap-8 w-full lg:w-auto">
            <div class="flex items-center gap-3 w-32">
              <iconify-icon icon="solar:calendar-linear" width="16" class="text-white/40"></iconify-icon>
              <span class="text-sm font-mono text-white/40 group-hover:text-white/60 transition-colors">2024</span>
            </div>
            <h4 class="text-lg font-medium tracking-tight">Design Architecture</h4>
          </div>
          <div class="flex items-center justify-between w-full lg:w-auto lg:flex-1 lg:justify-end gap-8">
            <iconify-icon icon="simple-icons:vercel" width="96" height="36"
              class="text-white/40 group-hover:text-white transition-colors"></iconify-icon>
            <iconify-icon icon="solar:arrow-right-linear" width="24"
              class="text-white/20 group-hover:text-white group-hover:translate-x-2 transition-transform"></iconify-icon>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    if (typeof lucide !== 'undefined') {
            lucide.createIcons();
        }
  </script>
</section>