Animated Vertical Experience Timeline Section

<div class="max-w-6xl lg:px-8 mr-auto ml-auto pr-6 pl-6">
  <div class="mb-16 animate-fade-in-up">
    <h2 class="text-4xl sm:text-5xl font-semibold tracking-tight text-white mb-4">Experience</h2>
    <p class="text-xl text-gray-400">Companies I've worked with and roles I've taken on.</p>
  </div>

  <div class="relative">
    <!-- Static Timeline line -->
    <div class="absolute left-8 top-0 bottom-0 w-px bg-gradient-to-b from-gray-600/30 via-gray-600/20 to-gray-600/10"></div>
    
    <!-- Dynamic Progress line -->
    <div id="timeline-progress" class="absolute left-8 top-0 w-px bg-gradient-to-b from-blue-500 via-purple-500 to-indigo-500 transition-all duration-300 ease-out" style="height: 0%; filter: none;"></div>
    
    <div class="space-y-12" id="experience-container">
      <!-- Meta -->
      <div class="group relative animate-fade-in-up animation-delay-200 pl-20 space-y-16 experience-item">
        <!-- Timeline dot -->
        <div class="absolute left-6 top-8 h-4 w-4 rounded-full bg-blue-500 ring-4 ring-blue-500/20 group-hover:ring-8 transition-all duration-300 z-10" style="transform: scale(1); filter: none;"></div>
        
        <div class="p-8 rounded-3xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 hover:border-white/20 transition-all duration-300">
          <div class="flex flex-between gap-4 mb-6">
            <div class="flex items-center gap-4">
              <div class="h-12 w-12 rounded-xl bg-blue-500 flex items-center justify-center">
                <span class="text-white font-semibold text-lg">M</span>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-white">Senior Product Designer</h3>
                <p class="text-blue-400 font-medium">Meta (Reality Labs)</p>
              </div>
            </div>
            <div class="text-right">
              <span class="text-sm font-medium text-gray-400">2021 - Present</span>
              <p class="text-xs text-gray-500">3 years</p>
            </div>
          </div>
          <p class="text-gray-400 leading-relaxed mb-4">
            Leading design for AR/VR social experiences and productivity tools. Shipped Horizon Workrooms 2.0, co-presence features, and spatial interaction patterns used by millions of Quest users.
          </p>
          <div class="flex flex-wrap gap-2">
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">VR Design</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Spatial UX</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Unity</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Design Systems</span>
          </div>
        </div>
      </div>

      <!-- Instagram -->
      <div class="group relative pl-20 animate-fade-in-up animation-delay-400 experience-item">
        <!-- Timeline dot -->
        <div class="absolute left-6 top-8 h-4 w-4 rounded-full bg-purple-500 ring-4 ring-purple-500/20 group-hover:ring-8 transition-all duration-300 z-10" style="transform: scale(1); filter: none;"></div>
        
        <div class="p-8 rounded-3xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 hover:border-white/20 transition-all duration-300">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
            <div class="flex items-center gap-4">
              <div class="h-12 w-12 rounded-xl bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center">
                <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" class="h-6 w-6 text-white">
                  <rect width="20" height="20" x="2" y="2" rx="5" ry="5" class=""></rect>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" class=""></path>
                  <line x1="17.5" x2="17.51" y1="6.5" y2="6.5" class=""></line>
                </svg>
              </div>
              <div>
                <h3 class="text-xl font-semibold text-white">Product Designer</h3>
                <p class="text-purple-400 font-medium">Instagram</p>
              </div>
            </div>
            <div class="text-right">
              <span class="text-sm font-medium text-gray-400">2019 - 2021</span>
              <p class="text-xs text-gray-500">2 years</p>
            </div>
          </div>
          <p class="text-gray-400 leading-relaxed mb-4">
            Designed and shipped major improvements to Stories creation, Reels discovery, and creator monetization features. Led cross-functional teams and mentored junior designers.
          </p>
          <div class="flex flex-wrap gap-2">
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Mobile Design</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">A/B Testing</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">User Research</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Prototyping</span>
          </div>
        </div>
      </div>

      <!-- Stripe -->
      <div class="group relative animate-fade-in-up animation-delay-600 pl-20 experience-item">
        <!-- Timeline dot -->
        <div class="absolute left-6 top-8 h-4 w-4 rounded-full bg-indigo-500 ring-4 ring-indigo-500/20 group-hover:ring-8 transition-all duration-300 z-10" style="transform: scale(1); filter: none;"></div>
        
        <div class="p-8 rounded-3xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 hover:border-white/20 transition-all duration-300">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
            <div class="flex items-center gap-4">
              <div class="h-12 w-12 rounded-xl bg-indigo-500 flex items-center justify-center">
                <span class="text-white font-semibold text-lg">S</span>
              </div>
              <div class="">
                <h3 class="text-xl font-semibold text-white">Product Designer</h3>
                <p class="text-indigo-400 font-medium">Stripe</p>
              </div>
            </div>
            <div class="text-right">
              <span class="text-sm font-medium text-gray-400">2017 - 2019</span>
              <p class="text-xs text-gray-500">2 years</p>
            </div>
          </div>
          <p class="text-gray-400 leading-relaxed mb-4">
            Designed developer tools and merchant-facing products used by millions of businesses globally. Contributed to Stripe's design system and accessibility standards.
          </p>
          <div class="flex flex-wrap gap-2">
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Web Design</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">API Design</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Developer Tools</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">B2B</span>
          </div>
        </div>
      </div>

      <!-- Adobe -->
      <div class="group relative animate-fade-in-up animation-delay-600 pl-20 experience-item">
        <!-- Timeline dot -->
        <div class="absolute left-6 top-8 h-4 w-4 rounded-full bg-red-500 ring-4 ring-red-500/20 group-hover:ring-8 transition-all duration-300 z-10" style="transform: scale(1); filter: none;"></div>
        
        <div class="p-8 rounded-3xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 hover:border-white/20 transition-all duration-300">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
            <div class="flex items-center gap-4">
              <div class="h-12 w-12 rounded-xl bg-red-500 flex items-center justify-center">
                <span class="text-white font-semibold text-lg">A</span>
              </div>
              <div class="">
                <h3 class="text-xl font-semibold text-white">UX Designer</h3>
                <p class="text-red-400 font-medium">Adobe Creative Suite</p>
              </div>
            </div>
            <div class="text-right">
              <span class="text-sm font-medium text-gray-400">2015 - 2017</span>
              <p class="text-xs text-gray-500">2 years</p>
            </div>
          </div>
          <p class="text-gray-400 leading-relaxed mb-4">
            Created intuitive user experiences for creative software applications. Collaborated with engineering teams to improve workflow efficiency and user satisfaction across desktop applications.
          </p>
          <div class="flex flex-wrap gap-2">
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Creative Software</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">User Testing</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Wireframing</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Desktop UI</span>
          </div>
        </div>
      </div>

      <!-- Figma -->
      <div class="group relative animate-fade-in-up animation-delay-600 pl-20 experience-item">
        <!-- Timeline dot -->
        <div class="absolute left-6 top-8 h-4 w-4 rounded-full bg-emerald-500 ring-4 ring-emerald-500/20 group-hover:ring-8 transition-all duration-300 z-10" style="transform: scale(1); filter: none;"></div>
        
        <div class="p-8 rounded-3xl bg-gradient-to-br from-white/10 to-white/5 border border-white/10 hover:border-white/20 transition-all duration-300">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
            <div class="flex items-center gap-4">
              <div class="h-12 w-12 flex bg-emerald-500 rounded-xl items-center justify-center">
                <span class="text-white font-semibold text-lg">F</span>
              </div>
              <div class="">
                <h3 class="text-xl font-semibold text-white">Senior UI/UX Designer</h3>
                <p class="text-emerald-400 font-medium">Figma Design Studio</p>
              </div>
            </div>
            <div class="text-right">
              <span class="text-sm font-medium text-gray-400">2014 - 2016</span>
              <p class="text-xs text-gray-500">2 years</p>
            </div>
          </div>
          <p class="text-gray-400 leading-relaxed mb-4">
            Specialized in designing collaborative design tools and workflow interfaces. Built innovative features for real-time collaboration and helped establish design patterns that became industry standards.
          </p>
          <div class="flex flex-wrap gap-2">
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Collaboration Tools</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Interface Design</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Real-time Features</span>
            <span class="text-sm text-neutral-50 bg-neutral-50/10 rounded-full pt-1 pr-3 pb-1 pl-3">Design Systems</span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script>
    (function() {
      const timelineProgress = document.getElementById('timeline-progress');
      const experienceContainer = document.getElementById('experience-container');
      const experienceItems = document.querySelectorAll('.experience-item');
      
      if (!timelineProgress || !experienceContainer || experienceItems.length === 0) return;

      function updateTimelineProgress() {
        const containerRect = experienceContainer.getBoundingClientRect();
        const containerTop = containerRect.top + window.scrollY;
        const containerHeight = containerRect.height;
        const viewportHeight = window.innerHeight;
        const scrollTop = window.scrollY;
        
        // Calculate when the experience section starts to be visible
        const sectionStart = containerTop - viewportHeight + 200; // Start a bit before fully visible
        const sectionEnd = containerTop + containerHeight - 200;
        
        // Calculate progress based on scroll position
        let progress = 0;
        
        if (scrollTop >= sectionStart && scrollTop <= sectionEnd) {
          const scrollProgress = (scrollTop - sectionStart) / (sectionEnd - sectionStart);
          progress = Math.min(Math.max(scrollProgress, 0), 1);
        } else if (scrollTop > sectionEnd) {
          progress = 1;
        }
        
        // Update the timeline progress bar height
        const progressHeight = progress * 100;
        timelineProgress.style.height = `${progressHeight}%`;
        
        // Add glow effect when fully visible
        if (progress > 0.1) {
          timelineProgress.style.filter = 'drop-shadow(0 0 6px rgba(59, 130, 246, 0.5))';
        } else {
          timelineProgress.style.filter = 'none';
        }
        
        // Optional: Highlight current experience item
        experienceItems.forEach((item, index) => {
          const itemRect = item.getBoundingClientRect();
          const isInView = itemRect.top < viewportHeight * 0.7 && itemRect.bottom > viewportHeight * 0.3;
          
          const dot = item.querySelector('.absolute.left-6');
          if (dot) {
            if (isInView) {
              dot.style.transform = 'scale(1.2)';
              dot.style.filter = 'drop-shadow(0 0 8px currentColor)';
            } else {
              dot.style.transform = 'scale(1)';
              dot.style.filter = 'none';
            }
          }
        });
      }
      
      // Throttle scroll event for better performance
      let ticking = false;
      function handleScroll() {
        if (!ticking) {
          requestAnimationFrame(() => {
            updateTimelineProgress();
            ticking = false;
          });
          ticking = true;
        }
      }
      
      // Initialize and set up scroll listener
      window.addEventListener('scroll', handleScroll, { passive: true });
      window.addEventListener('resize', updateTimelineProgress, { passive: true });
      
      // Initial call
      updateTimelineProgress();
    })();
  </script>
</div>