feat: photography features & image optimizations

- Hero carousel: gallery.yaml hero accepts single UUID or array, crossfade component
- Full-bleed single albums: subpages with 1 album skip grid, render photos directly
- EXIF on hover: camera/lens/focal length overlay on grid items (toggle via exifOnHover)
- Customizable grid: columns/gap/aspectRatio/layout (masonry|uniform) via gallery.yaml
- Per-subpage grid overrides: each subpage can override global grid config
- True masonry: per-image aspect ratios from EXIF dimensions
- next/image migration: homepage hero, album covers, grid thumbnails, about portrait
- ThumbHash blur placeholders and dominant color backgrounds
- Custom next/image loader via image proxy with width/quality params
- Lightbox fade-in transition with dominant color background
- Password-protected subpages, health check, rate limiting, OG images

components/HeroCarousel.tsx

@@ -0,0 +1,77 @@
+/**
+ * HeroCarousel — crossfade between hero images on a timer.
+ *
+ * If only one image is provided, renders a static image with no timer.
+ * When multiple images are provided, crossfades between them every 6 seconds.
+ */
+
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import Image from 'next/image';
+
+interface HeroImage {
+    src: string;
+    blurDataURL?: string;
+}
+
+interface HeroCarouselProps {
+    images: HeroImage[];
+}
+
+const INTERVAL_MS = 6000;
+
+export function HeroCarousel({ images }: HeroCarouselProps) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    const advance = useCallback(() => {
+        setCurrentIndex((prev) => (prev + 1) % images.length);
+    }, [images.length]);
+
+    useEffect(() => {
+        if (images.length <= 1) return;
+
+        const timer = setInterval(advance, INTERVAL_MS);
+        return () => clearInterval(timer);
+    }, [images.length, advance]);
+
+    if (images.length === 0) {
+        return <div className="hero__image-placeholder" />;
+    }
+
+    if (images.length === 1) {
+        const img = images[0];
+        return (
+            <Image
+                src={img.src}
+                alt=""
+                className="hero__image"
+                fill
+                sizes="50vw"
+                priority
+                {...(img.blurDataURL
+                    ? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
+                    : {})}
+            />
+        );
+    }
+
+    return (
+        <>
+            {images.map((img, i) => (
+                <Image
+                    key={i}
+                    src={img.src}
+                    alt=""
+                    className={`hero__carousel-image${i === currentIndex ? ' hero__carousel-image--active' : ''}`}
+                    fill
+                    sizes="50vw"
+                    priority={i === 0}
+                    {...(img.blurDataURL
+                        ? { placeholder: 'blur' as const, blurDataURL: img.blurDataURL }
+                        : {})}
+                />
+            ))}
+        </>
+    );
+}

components/Lightbox.tsx

@@ -44,6 +44,7 @@ export function Lightbox({
     const [showExif, setShowExif] = useState(false);
     const [exifData, setExifData] = useState<ExifData | null>(null);
     const [exifLoading, setExifLoading] = useState(false);
+    const [imageLoaded, setImageLoaded] = useState(false);
     const overlayRef = useRef<HTMLDivElement>(null);
     const touchStartX = useRef<number>(0);
     const touchStartY = useRef<number>(0);
@@ -64,6 +65,7 @@ export function Lightbox({
     // Reset EXIF data when switching images; refetch if panel is open
     useEffect(() => {
         setExifData(null);
+        setImageLoaded(false);
         if (showExif && current) {
             fetchExif(current.exifUrl);
         }
@@ -149,12 +151,22 @@ export function Lightbox({
             </button>
 
             {/* Image */}
-            <div className="lightbox__image-container">
+            <div
+                className="lightbox__image-container"
+                style={{
+                    backgroundColor: current.dominantColor || '#000',
+                    backgroundImage: current.blurDataURL ? `url(${current.blurDataURL})` : undefined,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                }}
+            >
+                {/* eslint-disable-next-line @next/next/no-img-element */}
                 <img
-                    className="lightbox__image"
+                    className={`lightbox__image${imageLoaded ? ' lightbox__image--loaded' : ''}`}
                     src={current.previewUrl}
                     alt=""
                     draggable={false}
+                    onLoad={() => setImageLoaded(true)}
                 />
             </div>
 

components/PasswordGate.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+/**
+ * Password gate — shown when accessing a protected album/subpage.
+ * Submits to /api/auth and refreshes on success.
+ */
+
+import { useState } from 'react';
+
+interface PasswordGateProps {
+    slug: string;
+    title: string;
+}
+
+export default function PasswordGate({ slug, title }: PasswordGateProps) {
+    const [password, setPassword] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    async function handleSubmit(e: React.FormEvent) {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        try {
+            const res = await fetch('/api/auth', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ slug, password }),
+            });
+
+            if (res.ok) {
+                window.location.reload();
+            } else {
+                setError('Wrong password');
+                setPassword('');
+            }
+        } catch {
+            setError('Something went wrong');
+        } finally {
+            setLoading(false);
+        }
+    }
+
+    return (
+        <div className="password-gate">
+            <div className="password-gate__card">
+                <h2 className="password-gate__title">{title}</h2>
+                <p className="password-gate__subtitle">
+                    This gallery is password-protected.
+                </p>
+
+                <form onSubmit={handleSubmit} className="password-gate__form">
+                    <input
+                        type="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        placeholder="Enter password"
+                        className="password-gate__input"
+                        autoFocus
+                        required
+                    />
+                    <button
+                        type="submit"
+                        className="password-gate__button"
+                        disabled={loading}
+                    >
+                        {loading ? 'Verifying…' : 'Enter'}
+                    </button>
+                </form>
+
+                {error && <p className="password-gate__error">{error}</p>}
+            </div>
+        </div>
+    );
+}