feat: add photo carousel to team page

Replace static photo grid with auto-advancing carousel. Shows 2 photos
at a time on desktop, 1 on mobile. Auto-advances every 5 seconds with
prev/next controls. Photos loaded from src/data/photos.yaml for easy
maintenance.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: clegoues

src/data/photos.yaml

@@ -0,0 +1,13 @@
+# Lab group photos. Add new photos to public/img/ and add an entry here.
+- src: /img/GroupBowlingPhoto.JPG
+  alt: squaresLab after a friendly but competitive bowling excursion
+- src: /img/GroupEscapeRoomPhoto.jpg
+  alt: "squaresLab after successfully solving Carnegie'$ Million$ at Escape Room Pittsburgh"
+- src: /img/GroupAxePhoto.jpg
+  alt: squaresLab in our squaresLab t-shirts after an axe throwing social event
+- src: /img/GroupApples.jpg
+  alt: squaresLab goes apple picking
+- src: /img/GroupTopgolfPhoto.jpg
+  alt: squaresLab goes to Topgolf
+- src: /img/GroupBowling2.jpg
+  alt: squaresLab the next generation goes bowling, too

src/pages/team.astro

@@ -2,6 +2,9 @@
 import BaseLayout from '../layouts/BaseLayout.astro';
 import TeamMember from '../components/TeamMember.astro';
 import { getCollection } from 'astro:content';
+import { promises as fs } from 'node:fs';
+import * as path from 'node:path';
+import yaml from 'js-yaml';
 
 const allMembers = await getCollection('team');
 
@@ -33,15 +36,9 @@ const sortedAlumni = alumni.sort((a, b) => {
   return a.data.name.localeCompare(b.data.name);
 });
 
-
-const photos = [
-  { src: '/img/GroupBowlingPhoto.JPG', alt: 'squaresLab after a friendly but competitive bowling excursion' },
-  { src: '/img/GroupEscapeRoomPhoto.jpg', alt: "squaresLab after successfully solving Carnegie'$ Million$ at Escape Room Pittsburgh" },
-  { src: '/img/GroupAxePhoto.jpg', alt: 'squaresLab in our squaresLab t-shirts after an axe throwing social event' },
-  { src: '/img/GroupApples.jpg', alt: 'squaresLab goes apple picking' },
-  { src: '/img/GroupTopgolfPhoto.jpg', alt: 'squaresLab goes to Topgolf' },
-  { src: '/img/GroupBowling2.jpg', alt: 'squaresLab the next generation goes bowling, too' },
-];
+// Load photos from data file
+const photosRaw = await fs.readFile(path.resolve('src/data/photos.yaml'), 'utf-8');
+const photos = (yaml.load(photosRaw) as { src: string; alt: string }[]) || [];
 ---
 
 <BaseLayout title="Team">
@@ -52,15 +49,36 @@ const photos = [
     </div>
   </section>
 
-  {/* Photo Gallery */}
+  {/* Photo Carousel */}
   <section class="max-w-content mx-auto px-8 py-8">
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-      {photos.map((photo) => (
-        <figure class="m-0">
-          <img src={photo.src} alt={photo.alt} class="w-full rounded-lg" loading="lazy" />
-          <figcaption class="text-xs text-gray-secondary mt-1 italic">{photo.alt}</figcaption>
-        </figure>
-      ))}
+    <div id="photo-carousel" class="relative">
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4" id="carousel-grid">
+        {photos.map((photo, i) => (
+          <figure
+            class="m-0 carousel-slide"
+            data-index={i}
+            style={i >= 2 ? 'display:none' : ''}
+          >
+            <img src={photo.src} alt={photo.alt} class="w-full rounded-lg" loading="lazy" />
+            <figcaption class="text-xs text-gray-secondary mt-1 italic">{photo.alt}</figcaption>
+          </figure>
+        ))}
+      </div>
+      {photos.length > 2 && (
+        <div class="flex items-center justify-center gap-4 mt-4">
+          <button id="carousel-prev" class="text-gray-secondary hover:text-red-cmu transition-colors p-1" aria-label="Previous photos">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+            </svg>
+          </button>
+          <span id="carousel-indicator" class="text-xs text-gray-secondary"></span>
+          <button id="carousel-next" class="text-gray-secondary hover:text-red-cmu transition-colors p-1" aria-label="Next photos">
+            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+            </svg>
+          </button>
+        </div>
+      )}
     </div>
   </section>
 
@@ -179,4 +197,45 @@ const photos = [
   details[open] .details-arrow {
     transform: rotate(90deg);
   }
+  .carousel-slide {
+    transition: opacity 0.4s ease;
+  }
 </style>
+
+<script>
+  const slides = document.querySelectorAll<HTMLElement>('.carousel-slide');
+  const total = slides.length;
+  if (total > 2) {
+    const perPage = window.matchMedia('(min-width: 768px)').matches ? 2 : 1;
+    let offset = 0;
+    const indicator = document.getElementById('carousel-indicator');
+
+    function show() {
+      slides.forEach((s, i) => {
+        s.style.display = (i >= offset && i < offset + perPage) ? '' : 'none';
+      });
+      if (indicator) {
+        const page = Math.floor(offset / perPage) + 1;
+        const pages = Math.ceil(total / perPage);
+        indicator.textContent = `${page} / ${pages}`;
+      }
+    }
+
+    function advance(dir: number) {
+      const perPage = window.matchMedia('(min-width: 768px)').matches ? 2 : 1;
+      offset += dir * perPage;
+      if (offset >= total) offset = 0;
+      if (offset < 0) offset = Math.max(0, total - perPage);
+      show();
+    }
+
+    document.getElementById('carousel-prev')?.addEventListener('click', () => {
+      advance(-1);
+    });
+    document.getElementById('carousel-next')?.addEventListener('click', () => {
+      advance(1);
+    });
+
+    show();
+  }
+</script>