fix: scrolling gap; add: Pauline, research tab, epfl footer, student google form (#3)

Author: CharlieLeee

app/people/page.tsx

@@ -17,6 +17,7 @@ export default function PeoplePage() {
   const pi = currentMembers.find(p => p.role === "Principal Investigator")
   const phd = currentMembers.filter(p => p.role === "PhD Student")
   const staff = currentMembers.filter(p => p.role === "Research Staff" || p.role === "Software Engineer")
+  const admin = currentMembers.filter(p => p.role === "Lab Administration")
 
   return (
     <div className="flex flex-col">
@@ -230,6 +231,69 @@ export default function PeoplePage() {
         </section>
       )}
 
+      {/* Lab Administration */}
+      {admin.length > 0 && (
+        <section className="bg-muted/30 py-16 lg:py-24">
+          <div className="section-container">
+            <h2 className="mb-8 text-2xl font-bold">Lab Administration</h2>
+            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {admin.map((person) => (
+                <Card key={person.id} className="group transition-all hover:shadow-soft-lg">
+                  <CardHeader>
+                    <div className="mb-3 flex items-start gap-4">
+                      {person.avatar && (
+                        <div className="relative size-28 shrink-0 overflow-hidden rounded-xl ring-2 ring-border">
+                          <img
+                            src={person.avatar}
+                            alt={person.name}
+                            className="size-full object-cover"
+                          />
+                        </div>
+                      )}
+                      <div className="min-w-0 flex-1">
+                        <CardTitle className="text-lg leading-tight">{person.name}</CardTitle>
+                        <p className="mt-1 text-sm text-muted-foreground">{person.role}</p>
+                      </div>
+                    </div>
+                    {person.project && (
+                      <CardDescription className="mt-2">{person.project}</CardDescription>
+                    )}
+                    {person.note && (
+                      <p className="mt-2 text-sm italic text-muted-foreground">{person.note}</p>
+                    )}
+                  </CardHeader>
+                  <CardContent>
+                    {person.links && (
+                      <div className="mb-3 flex flex-wrap gap-3">
+                        {Object.entries(person.links).map(([key, url]) => (
+                          <a
+                            key={key}
+                            href={url as string}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+                          >
+                            <ExternalLink className="size-3" />
+                            {key.charAt(0).toUpperCase() + key.slice(1)}
+                          </a>
+                        ))}
+                      </div>
+                    )}
+                    {person.tags && person.tags.length > 0 && (
+                      <div className="flex flex-wrap gap-2">
+                        {person.tags.map((tag) => (
+                          <Badge key={tag} variant="secondary" className="text-xs">{tag}</Badge>
+                        ))}
+                      </div>
+                    )}
+                  </CardContent>
+                </Card>
+              ))}
+            </div>
+          </div>
+        </section>
+      )}
+
       {/* Alumni */}
       {alumni.length > 0 && (
         <section className="bg-muted/30 py-16 lg:py-24">

app/positions/page.tsx

@@ -61,10 +61,14 @@ export default function PositionsPage() {
                 </div>
                 <div className="mt-6">
                   <Button asChild>
-                    <Link href="/contact">
-                      Get in Touch
-                      <ArrowRight className="ml-2 size-4" />
-                    </Link>
+                    <a
+                      href="https://docs.google.com/forms/d/e/1FAIpQLScyKbu2Hfv24i3RClKZsAEnt8Rzo77RQ27w-VIo4fZEFk8QFg/viewform"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                    >
+                      Express Interest (EPFL Students)
+                      <ExternalLink className="ml-2 size-4" />
+                    </a>
                   </Button>
                 </div>
               </CardContent>

app/publications/page.tsx

@@ -7,19 +7,23 @@ import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import publicationsData from "@/data/publications.json"
+import { useHeaderOffset } from "@/lib/hooks/useHeaderOffset"
 
 export default function PublicationsPage() {
   const [selectedYear, setSelectedYear] = useState<number | null>(null)
   const [selectedType, setSelectedType] = useState<string | null>(null)
   const filterRef = useRef<HTMLElement | null>(null)
   const [yearStickyOffset, setYearStickyOffset] = useState<number | null>(null)
+  const headerOffset = useHeaderOffset()
 
   useEffect(() => {
+    if (headerOffset === null) {
+      return
+    }
+
     const updateOffset = () => {
-      const header = document.querySelector<HTMLElement>("header")
-      const headerHeight = header?.getBoundingClientRect().height ?? 0
       const filterHeight = filterRef.current?.getBoundingClientRect().height ?? 0
-      const combinedHeight = headerHeight + filterHeight
+      const combinedHeight = headerOffset + filterHeight
 
       setYearStickyOffset(prev => {
         if (prev !== null && Math.abs(prev - combinedHeight) < 0.5) {
@@ -35,10 +39,6 @@ export default function PublicationsPage() {
     let resizeObserver: ResizeObserver | null = null
     if (typeof ResizeObserver !== "undefined") {
       resizeObserver = new ResizeObserver(updateOffset)
-      const header = document.querySelector<HTMLElement>("header")
-      if (header) {
-        resizeObserver.observe(header)
-      }
       if (filterRef.current) {
         resizeObserver.observe(filterRef.current)
       }
@@ -48,7 +48,7 @@ export default function PublicationsPage() {
       window.removeEventListener("resize", updateOffset)
       resizeObserver?.disconnect()
     }
-  }, [])
+  }, [headerOffset])
 
   const years = Array.from(new Set(publicationsData.map(p => p.year))).sort((a, b) => b - a)
   const types = Array.from(new Set(publicationsData.map(p => p.type)))
@@ -68,7 +68,7 @@ export default function PublicationsPage() {
   return (
     <div className="flex flex-col">
       {/* Header */}
-      <section className="bg-muted/30 py-24">
+      <section className="bg-muted/30 pb-12 pt-24 lg:pb-16">
         <div className="section-container">
           <div className="mx-auto max-w-2xl text-center">
             <h1 className="text-4xl font-bold tracking-tight sm:text-5xl">
@@ -93,7 +93,8 @@ export default function PublicationsPage() {
       {/* Filters */}
       <section
         ref={filterRef}
-        className="sticky top-16 z-10 border-b bg-background py-8"
+        className="sticky top-16 z-10 border-b bg-background py-6 sm:py-8"
+        style={headerOffset !== null ? { top: headerOffset } : undefined}
       >
         <div className="section-container">
           <div className="flex flex-col gap-4">
@@ -158,7 +159,7 @@ export default function PublicationsPage() {
               <div key={year} className="mb-16">
                 <h2
                   className="sticky top-32 mb-8 bg-background py-4 text-3xl font-bold"
-                  style={yearStickyOffset !== null ? { top: `${yearStickyOffset}px` } : undefined}
+                  style={yearStickyOffset !== null ? { top: yearStickyOffset } : undefined}
                 >
                   {year}
                 </h2>

app/research/CopyLinkButton.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { Link as LinkIcon } from "lucide-react"
+import { useState } from "react"
+
+export function CopyLinkButton({ slug }: { slug: string }) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = () => {
+    const url = `${window.location.origin}/research#${slug}`
+    navigator.clipboard.writeText(url).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), 2000)
+    })
+  }
+
+  return (
+    <button
+      onClick={handleCopy}
+      aria-label="Copy link to this section"
+      title={copied ? "Copied!" : "Copy link"}
+      className="inline-flex size-8 items-center justify-center rounded-lg border bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+    >
+      <LinkIcon className="size-4" />
+    </button>
+  )
+}

app/research/ReadMoreSection.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { ChevronDown } from "lucide-react"
+import { useState } from "react"
+
+export function ReadMoreSection({ text }: { text: string }) {
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <div>
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="group inline-flex items-center gap-2 text-sm font-medium text-primary transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        aria-expanded={isOpen}
+      >
+        Read more
+        <ChevronDown
+          className={`size-4 transition-transform ${isOpen ? "rotate-180" : ""}`}
+          aria-hidden="true"
+        />
+      </button>
+      {isOpen && (
+        <p className="animate-in fade-in slide-in-from-top-2 mt-3 leading-relaxed text-muted-foreground duration-200">
+          {text}
+        </p>
+      )}
+    </div>
+  )
+}

app/research/StickyLocalNav.tsx

@@ -0,0 +1,77 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+import { useHeaderOffset } from "@/lib/hooks/useHeaderOffset"
+
+interface ResearchArea {
+  id: string
+  title: string
+  slug: string
+  description: string
+  extended?: string
+  featured?: boolean
+  tools?: unknown[]
+  image?: string | string[]
+}
+
+export function StickyLocalNav({ areas }: { areas: ResearchArea[] }) {
+  const [activeSlug, setActiveSlug] = useState<string>("")
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(false)
+  const headerOffset = useHeaderOffset()
+
+  useEffect(() => {
+    // Check for reduced motion preference
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)")
+    setPrefersReducedMotion(mediaQuery.matches)
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveSlug(entry.target.id)
+          }
+        })
+      },
+      { rootMargin: "-20% 0px -60% 0px", threshold: 0 }
+    )
+
+    areas.forEach((area) => {
+      const element = document.getElementById(area.slug)
+      if (element) observer.observe(element)
+    })
+
+    return () => observer.disconnect()
+  }, [areas])
+
+  const scrollToSection = (slug: string) => {
+    const element = document.getElementById(slug)
+    if (element) {
+      element.scrollIntoView({ behavior: prefersReducedMotion ? "auto" : "smooth" })
+    }
+  }
+
+  return (
+    <nav
+      className="sticky top-16 z-20 border-b border-border/60 bg-background/95 shadow-sm backdrop-blur supports-[backdrop-filter]:bg-background/80"
+      style={headerOffset !== null ? { top: headerOffset } : undefined}
+      aria-label="Research navigation"
+    >
+      <div className="section-container">
+        <div className="scrollbar-hide flex gap-1.5 overflow-x-auto py-2.5 sm:gap-2 sm:py-3">
+          {areas.map((area, idx) => (
+            <button
+              key={area.slug}
+              onClick={() => scrollToSection(area.slug)}
+              data-active={activeSlug === area.slug}
+              aria-current={activeSlug === area.slug ? "true" : undefined}
+              className="inline-flex shrink-0 items-center gap-2 rounded-full border px-4 py-1.5 text-sm transition-colors hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[active=true]:bg-foreground data-[active=true]:text-background"
+            >
+              {idx + 1}. {area.title}
+            </button>
+          ))}
+        </div>
+      </div>
+    </nav>
+  )
+}