Update speakers page look. (#1159)

Co-authored-by: Ege Akman <[email protected]>
Co-authored-by: Mia Bajić <[email protected]>

Author: 3 people

src/components/sections/speakers.astro

@@ -0,0 +1,219 @@
+---
+import { getCollection } from "astro:content";
+import type { CollectionEntry } from "astro:content";
+import { Image } from "astro:assets";
+
+const allSpeakers = await getCollection("speakers");
+
+const validSpeakers = allSpeakers.filter(speaker =>
+  !!speaker.data?.name && !!speaker.data?.avatar
+);
+
+function getRandomSpeakers(speakers: CollectionEntry<"speakers">[], count: number) {
+  const shuffled = [...speakers].sort(() => 0.5 - Math.random());
+  return shuffled.slice(0, Math.min(count, speakers.length));
+}
+
+const featuredSpeakers = getRandomSpeakers(validSpeakers, 15);
+
+const sectionTitle = "Featured Speakers";
+const sectionSubtitle = "Meet some of our amazing speakers";
+
+---
+
+<section class="py-16 px-4 bg-gray-50">
+  <div class="container mx-auto">
+    <div class="text-center mb-12">
+      <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{sectionTitle}</h2>
+      <p class="text-lg text-gray-600">{sectionSubtitle}</p>
+    </div>
+
+    <div class="speakers-carousel-container relative overflow-hidden">
+      <div class="speakers-track flex transition-transform duration-1000 ease-linear">
+        {[...featuredSpeakers, ...featuredSpeakers].map((speaker, _index) => (
+          <div class="speaker-slide w-full sm:w-1/2 md:w-1/3 lg:w-1/5 flex-shrink-0 px-3">
+            <a href={`/speaker/${speaker.id}`} class="block group">
+              <div class="bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 group-hover:-translate-y-2">
+                <div class="aspect-square overflow-hidden">
+                  <Image
+                    src={speaker.data.avatar}
+                    alt={`${speaker.data.name}'s profile picture`}
+                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    height={250}
+                    width={250}
+                    loading="eager"
+                  />
+                </div>
+                <div class="p-4 text-center h-[88px] flex flex-col justify-center">
+                  <!-- Solution: Use text-ellipsis with 2 lines max and remove whitespace-nowrap -->
+                  <h3 class="font-bold text-lg text-gray-900 group-hover:text-primary transition-colors line-clamp-2">
+                    {speaker.data.name}
+                  </h3>
+                </div>
+              </div>
+            </a>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <div class="text-center mt-10">
+      <a
+        href="/speakers"
+        class="inline-block px-6 py-3 bg-primary hover:bg-primary-dark text-white font-medium rounded-md transition-colors"
+      >
+        See all speakers
+      </a>
+    </div>
+  </div>
+</section>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    const track = document.querySelector('.speakers-track') as HTMLElement;
+    const slides = document.querySelectorAll('.speaker-slide');
+    const totalOriginalSlides = slides.length / 2;
+
+    if (!track || slides.length === 0) return;
+
+    let currentPosition = 0;
+    const scrollSpeed = 4000;
+    let slidingInterval: ReturnType<typeof setInterval> | null = null;
+
+    // Function to determine slides per view based on window width
+    function getSlidesPerView() {
+      const width = window.innerWidth;
+      if (width <= 480) return 1;
+      if (width <= 640) return 2;
+      if (width <= 768) return 3;
+      if (width <= 1024) return 4;
+      return 5;
+    }
+
+    function updateCarouselSettings() {
+      const slidesPerView = getSlidesPerView();
+      const slideWidth = 100 / slidesPerView;
+
+      // Reset position when breakpoint changes
+      currentPosition = 0;
+      track.style.transition = 'none';
+      track.style.transform = `translateX(0)`;
+
+      // Clear and restart animation
+      if (slidingInterval !== null) {
+        clearInterval(slidingInterval);
+      }
+      startAnimation(slideWidth);
+    }
+
+    function startAnimation(slideWidth: number) {
+      // Initial setup
+      moveCarousel();
+      slidingInterval = setInterval(moveCarousel, scrollSpeed);
+
+      function moveCarousel() {
+        currentPosition += slideWidth;
+
+        track.style.transition = 'transform 1000ms linear';
+        track.style.transform = `translateX(-${currentPosition}%)`;
+
+        // Reset when we've scrolled through the original set of slides
+        if (currentPosition >= slideWidth * totalOriginalSlides) {
+          setTimeout(() => {
+            track.style.transition = 'none';
+            currentPosition = 0;
+            track.style.transform = `translateX(0)`;
+
+            setTimeout(() => {
+              track.style.transition = 'transform 1000ms linear';
+            }, 20);
+          }, 1000);
+        }
+      }
+    }
+
+    // Start the carousel
+    updateCarouselSettings();
+
+    // Update on window resize
+    window.addEventListener('resize', () => {
+      updateCarouselSettings();
+    });
+
+    // Pause on hover
+    const carouselContainer = document.querySelector('.speakers-carousel-container');
+    carouselContainer?.addEventListener('mouseenter', () => {
+      if (slidingInterval !== null) {
+        clearInterval(slidingInterval);
+        slidingInterval = null;
+      }
+    });
+
+    carouselContainer?.addEventListener('mouseleave', () => {
+      updateCarouselSettings();
+    });
+
+    // Pause when tab is not visible
+    document.addEventListener('visibilitychange', () => {
+      if (document.hidden) {
+        if (slidingInterval !== null) {
+          clearInterval(slidingInterval);
+          slidingInterval = null;
+        }
+      } else {
+        updateCarouselSettings();
+      }
+    });
+  });
+</script>
+
+<style>
+  .speakers-carousel-container {
+    position: relative;
+    width: 100%;
+  }
+
+  .speakers-track {
+    will-change: transform;
+  }
+
+  /* Line clamping for text overflow */
+  .line-clamp-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .line-clamp-2 {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  /* These styles match the responsive classes used in the HTML */
+  @media (max-width: 1024px) {
+    .speaker-slide {
+      width: 25%;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .speaker-slide {
+      width: 33.333%;
+    }
+  }
+
+  @media (max-width: 640px) {
+    .speaker-slide {
+      width: 50%;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .speaker-slide {
+      width: 100%;
+    }
+  }
+</style>

src/pages/index.astro

@@ -8,6 +8,7 @@ import Updates from "@sections/updates.astro";
 import Prague from "@sections/prague.astro";
 import Sponsors from "@components/sponsors/sponsors.astro";
 import Subscribe from "@sections/subscribe.astro";
+import Speakers from "@sections/speakers.astro";
 
 let deadlines = await getCollection("deadlines");
 deadlines = deadlines
@@ -23,6 +24,7 @@ deadlines = deadlines
   <Hero />
   <Updates />
   <Keynoters />
+  <Speakers />
   <Prague />
   <Sponsors />
   <Subscribe />