feat: portfolio with subpages, hero homepage, and obfuscated asset URLs

app/[...path]/PhotoGrid.tsx

@@ -0,0 +1,104 @@
+/**
+ * PhotoGrid — client component wrapping the masonry grid and lightbox.
+ * Handles image click → lightbox open, keyboard nav, and EXIF fetching.
+ */
+
+'use client';
+
+import { useState, useCallback, useEffect } from 'react';
+import { Lightbox } from '@/components/Lightbox';
+
+export interface PhotoItem {
+    id: string;
+    thumbUrl: string;
+    previewUrl: string;
+    originalUrl: string;
+    exifUrl: string;
+}
+
+interface PhotoGridProps {
+    assets: PhotoItem[];
+    albumId: string;
+}
+
+export function PhotoGrid({ assets }: PhotoGridProps) {
+    const [lightboxIndex, setLightboxIndex] = useState<number | null>(null);
+
+    const openLightbox = useCallback((index: number) => {
+        setLightboxIndex(index);
+    }, []);
+
+    const closeLightbox = useCallback(() => {
+        setLightboxIndex(null);
+    }, []);
+
+    const goNext = useCallback(() => {
+        setLightboxIndex((prev) =>
+            prev !== null ? (prev + 1) % assets.length : null,
+        );
+    }, [assets.length]);
+
+    const goPrev = useCallback(() => {
+        setLightboxIndex((prev) =>
+            prev !== null ? (prev - 1 + assets.length) % assets.length : null,
+        );
+    }, [assets.length]);
+
+    // Keyboard navigation
+    useEffect(() => {
+        if (lightboxIndex === null) return;
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            switch (e.key) {
+                case 'Escape':
+                    closeLightbox();
+                    break;
+                case 'ArrowRight':
+                    goNext();
+                    break;
+                case 'ArrowLeft':
+                    goPrev();
+                    break;
+            }
+        };
+
+        document.addEventListener('keydown', handleKeyDown);
+        // Prevent body scroll when lightbox is open
+        document.body.style.overflow = 'hidden';
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = '';
+        };
+    }, [lightboxIndex, closeLightbox, goNext, goPrev]);
+
+    return (
+        <>
+            <div className="photo-grid">
+                {assets.map((asset, index) => (
+                    <div
+                        key={asset.id}
+                        className="photo-grid__item"
+                        onClick={() => openLightbox(index)}
+                    >
+                        <img
+                            src={asset.thumbUrl}
+                            alt=""
+                            loading={index < 6 ? 'eager' : 'lazy'}
+                        />
+                    </div>
+                ))}
+            </div>
+
+            {lightboxIndex !== null && (
+                <Lightbox
+                    assets={assets}
+                    currentIndex={lightboxIndex}
+                    onClose={closeLightbox}
+                    onNext={goNext}
+                    onPrev={goPrev}
+                />
+            )}
+        </>
+    );
+}