feat(about): Implement Interactive Photo Collage for WAG Profile

src/app/(public)/about/wag/_components.tsx

@@ -0,0 +1,108 @@
+/**
+ * Photo Collage Component
+ *
+ * Displays a dynamic collage of photos of Prof. Goddard, with overlapping
+ * frames at varying angles. On hover, a photo lifts to the top and straightens
+ * with a smooth animation.
+ */
+
+"use client";
+
+import { useState } from "react";
+import Image from "next/image";
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function PhotoCollage() {
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+
+  const photos = [
+    {
+      src: "/images/wag/red-beret-suit-portrait.jpg",
+      alt: "Prof. Goddard — formal portrait with signature red beret",
+      width: "30%",
+      sizes: "(max-width: 640px) 30vw, 14vw",
+      aspect: "214 / 320",
+      rotate: -5,
+      left: "0%",
+      top: "10%",
+      z: 2,
+    },
+    {
+      src: "/images/wag/blue-beret-coconut-restaurant.jpg",
+      alt: "Prof. Goddard enjoying a coconut at a restaurant",
+      width: "50%",
+      sizes: "(max-width: 640px) 50vw, 23vw",
+      aspect: "4 / 3",
+      rotate: 3,
+      left: "46%",
+      top: "-2%",
+      z: 1,
+      priority: true,
+    },
+    {
+      src: "/images/wag/red-beret-closeup.png",
+      alt: "Prof. Goddard — a warm smile",
+      width: "34%",
+      sizes: "(max-width: 640px) 34vw, 15vw",
+      aspect: "2268 / 3313",
+      rotate: -1.5,
+      left: "22%",
+      top: "18%",
+      z: 3,
+    },
+  ];
+
+  return (
+    <div
+      className="relative mx-auto w-full select-none"
+      style={{ aspectRatio: "16 / 9" }}
+    >
+      {photos.map((photo, i) => {
+        const isHovered = hoveredIndex === i;
+
+        return (
+          <div
+            key={photo.src}
+            className="absolute cursor-pointer"
+            style={{
+              width: photo.width,
+              left: photo.left,
+              top: photo.top,
+              zIndex: isHovered ? 50 : photo.z,
+              transform: `rotate(${
+                isHovered ? 0 : photo.rotate
+              }deg) scale(${isHovered ? 1.06 : 1})`,
+              transition:
+                "transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease",
+            }}
+            onMouseEnter={() => setHoveredIndex(i)}
+            onMouseLeave={() => setHoveredIndex(null)}
+          >
+            <div
+              className={`overflow-hidden rounded-sm bg-card p-1.5 transition-shadow duration-300 ${
+                isHovered ? "shadow-lg" : "shadow-md"
+              }`}
+            >
+              <div
+                className="relative w-full overflow-hidden bg-muted"
+                style={{ aspectRatio: photo.aspect }}
+              >
+                <Image
+                  src={photo.src}
+                  alt={photo.alt}
+                  fill
+                  className="object-cover"
+                  sizes={photo.sizes}
+                  priority={photo.priority}
+                />
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

src/app/(public)/about/wag/page.tsx

@@ -20,6 +20,7 @@ import { Separator } from "@/components/ui/separator";
 import { Badge } from "@/components/ui/badge";
 import { prisma } from "@/lib/db/client";
 import { formatCompactNumber } from "@/lib/format";
+import { PhotoCollage } from "./_components";
 
 // ============================================================================
 // Metadata
@@ -67,22 +68,14 @@ export default async function WagPage() {
   return (
     <div className="mx-auto max-w-4xl px-4 py-8 sm:px-6 sm:py-12">
       {/* Profile Header */}
-      <section className="flex flex-col gap-6 sm:flex-row sm:gap-8">
-        {/* Portrait */}
-        <div className="flex-shrink-0">
-          <div className="relative mx-auto h-48 w-48 overflow-hidden rounded-xl border bg-muted shadow-sm sm:mx-0 sm:h-56 sm:w-56">
-            <Image
-              src="/images/wag/portrait.png"
-              alt="William A. Goddard III"
-              fill
-              className="object-cover"
-              priority
-            />
-          </div>
+      <section className="flex flex-col gap-8 lg:flex-row lg:items-start lg:gap-10">
+        {/* Photo Collage */}
+        <div className="mx-auto w-full max-w-sm lg:mx-0 lg:w-[45%] lg:max-w-none lg:flex-shrink-0">
+          <PhotoCollage />
         </div>
 
         {/* Info */}
-        <div className="flex-1 text-center sm:text-left">
+        <div className="flex-1 text-center lg:text-left">
           <h1 className="text-2xl font-bold sm:text-3xl">
             William A. Goddard III
           </h1>
@@ -104,7 +97,7 @@ export default async function WagPage() {
           </p>
 
           {/* Stats */}
-          <div className="mt-4 flex flex-wrap justify-center gap-4 sm:justify-start">
+          <div className="mt-4 flex flex-wrap justify-center gap-4 lg:justify-start">
             <div className="text-center">
               <p className="text-2xl font-bold tabular-nums">
                 {formatCompactNumber(stats.publications)}
@@ -126,7 +119,7 @@ export default async function WagPage() {
           </div>
 
           {/* Actions */}
-          <div className="mt-6 flex flex-wrap justify-center gap-3 sm:justify-start">
+          <div className="mt-6 flex flex-wrap justify-center gap-3 lg:justify-start">
             <Button asChild>
               <a href="/files/wag/wag-cv.pdf" download>
                 <Download className="mr-2 h-4 w-4" />