Add photo carousel to the Home hero

Replace the static Institute of Computing photo with a HomeCarousel
component that slides between photos, with arrows, dots, autoplay
(paused on hover and for reduced motion) and a 3:2 frame so photos
are not cropped. Add the group photo as the first slide.

Also format people.js with Prettier and remove a leftover
"supervising students." fragment from Daniel's description.

Author: miguel-jehle

web/app/globals.css

@@ -462,6 +462,76 @@ footer {
   color: #cedae6;
   margin-top: 5px;
 }
+.campus-carousel {
+  overflow: hidden;
+  border-radius: 3px;
+}
+.campus-hero .intro-campus {
+  align-self: center;
+}
+.campus-hero .intro-campus .campus-carousel {
+  height: auto;
+  aspect-ratio: 3 / 2;
+}
+.campus-hero .intro-campus .campus-carousel img {
+  height: 100%;
+  min-height: 0;
+}
+.campus-track {
+  display: flex;
+  height: 100%;
+  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.campus-track img {
+  flex: 0 0 100%;
+  min-width: 0;
+}
+.campus-prev,
+.campus-next {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  border: 0;
+  border-radius: 50%;
+  background: #ffffffcc;
+  color: #061a2f;
+  cursor: pointer;
+}
+.campus-prev {
+  left: 12px;
+}
+.campus-next {
+  right: 12px;
+}
+.campus-dots {
+  position: absolute;
+  right: 19px;
+  bottom: 19px;
+  display: flex;
+  gap: 6px;
+}
+.campus-dots button {
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: #ffffff80;
+  cursor: pointer;
+}
+.campus-dots button.active {
+  background: #fff;
+}
+@media (prefers-reduced-motion: reduce) {
+  .campus-track {
+    transition: none;
+  }
+}
 @media (max-width: 700px) {
   .intro-campus figure img {
     height: 240px;

web/app/home-carousel.js

@@ -0,0 +1,58 @@
+'use client';
+import { useEffect, useState } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { assetPath } from '../lib/site-path';
+export default function HomeCarousel({ photos }) {
+  const [index, setIndex] = useState(0);
+  const [paused, setPaused] = useState(false);
+  const multiple = photos.length > 1;
+  useEffect(() => {
+    if (!multiple || paused || window.matchMedia('(prefers-reduced-motion: reduce)').matches)
+      return;
+    const timer = setInterval(() => setIndex((i) => (i + 1) % photos.length), 6000);
+    return () => clearInterval(timer);
+  }, [multiple, paused, photos.length]);
+  const go = (step) => setIndex((index + step + photos.length) % photos.length);
+  return (
+    <figure
+      className="campus-carousel"
+      onMouseEnter={() => setPaused(true)}
+      onMouseLeave={() => setPaused(false)}
+    >
+      <div className="campus-track" style={{ transform: `translateX(-${index * 100}%)` }}>
+        {photos.map((photo, i) => (
+          <img
+            key={photo.src}
+            src={assetPath(photo.src)}
+            alt={photo.alt}
+            aria-hidden={i !== index}
+          />
+        ))}
+      </div>
+      <figcaption>
+        <span>Universidade Federal Fluminense</span>
+        <small>Institute of Computing · Niterói, RJ</small>
+      </figcaption>
+      {multiple && (
+        <>
+          <button className="campus-prev" onClick={() => go(-1)} aria-label="Previous photo">
+            <ChevronLeft size={18} />
+          </button>
+          <button className="campus-next" onClick={() => go(1)} aria-label="Next photo">
+            <ChevronRight size={18} />
+          </button>
+          <div className="campus-dots">
+            {photos.map((photo, i) => (
+              <button
+                key={photo.src}
+                className={i === index ? 'active' : ''}
+                onClick={() => setIndex(i)}
+                aria-label={`Photo ${i + 1}`}
+              />
+            ))}
+          </div>
+        </>
+      )}
+    </figure>
+  );
+}

web/app/page.js

@@ -4,6 +4,7 @@ import Projects from './projects';
 import LinkedinPosts from './linkedin-posts';
 import SiteHeader from './site-header';
 import People from './people';
+import HomeCarousel from './home-carousel';
 import { assetPath } from '../lib/site-path';
 import { readPeople } from '../lib/people-store';
 
@@ -47,16 +48,18 @@ export default async function Home() {
             <div className="intro-location">Institute of Computing · Niterói, Rio de Janeiro</div>
           </div>
           <aside className="intro-campus">
-            <figure>
-              <img
-                src={assetPath('/instituto.jpg')}
-                alt="Institute of Computing at Universidade Federal Fluminense"
-              />
-              <figcaption>
-                <span>Universidade Federal Fluminense</span>
-                <small>Institute of Computing · Niterói, RJ</small>
-              </figcaption>
-            </figure>
+            <HomeCarousel
+              photos={[
+                {
+                  src: '/group.jpeg',
+                  alt: 'Illustration of UFFeScience research group members',
+                },
+                {
+                  src: '/instituto.jpg',
+                  alt: 'Institute of Computing at Universidade Federal Fluminense',
+                },
+              ]}
+            />
           </aside>
         </section>
         <section id="novidades" className="news-section">

web/app/people.js

@@ -32,8 +32,8 @@ export default function People({ people }) {
           <span className="kicker">RESEARCH AND SUPERVISION</span>
           <h3>Daniel de Oliveira</h3>
           <p>
-            Associate Professor at Institute of Computing of Universidade Federal Fluminense. Principal Investigator of UFFeScience research group.
-            supervising students.
+            Associate Professor at Institute of Computing of Universidade Federal Fluminense.
+            Principal Investigator of UFFeScience research group.
           </p>
         </div>
       </div>