/* Gallery - contact-sheet variant */ const GALLERY_PROJECTS = [ { code: "DL-01", slug: "deer-lady", title: "Deer Lady", type: "Cocktail Lounge", year: "2022", caption: "Project documentation and visual development for Deer Lady.", glyph: "deer-lady-mirrors", previewSrc: "03.jpg", images: [ { src: "01.jpg", caption: null }, { src: "02.jpg", caption: null }, { src: "03.jpg", caption: null }, { src: "04.jpg", caption: null }, { src: "05.jpg", caption: null }, { src: "06.jpg", caption: null }, { src: "07.jpg", caption: null }, { src: "08.jpg", caption: null }, ], }, { code: "DSOL-2", slug: "dead-set-on-living", title: "Dead Set On Living", type: "Restaurant Concept", year: "2025", caption: "Identity and supporting design work for Dead Set On Living.", glyph: "dead-set-canopy", previewSrc: "01.jpg", images: [ { src: "01.jpg", caption: "Bar corner" }, { src: "02.jpg", caption: "Bar" }, { src: "03.jpg", caption: "Hostess view" }, { src: "04.jpg", caption: "Nest view" }, { src: "05.jpg", caption: "Picnic view" }, { src: "06.jpg", caption: "Wine rack" }, ], }, { code: "BDS-03", slug: "bob-does-sports", title: "Bob Does Sports", type: "Headquarter Concept", year: "2026", caption: "Creative and design system work for Bob Does Sports.", glyph: "bob-trajectory", previewSrc: "03.jpg", images: [ { src: "03.jpg", caption: "Sim" }, { src: "04.jpg", caption: "Podcast studio" }, { src: "05.jpg", caption: "Central view" }, { src: "06.jpg", caption: "Sim 2" }, { src: "01.jpg", caption: "Kitchen lounge" }, { src: "02.jpg", caption: "Basketball court" }, ], }, { code: "ARC-04", slug: "viewpoint", title: "Viewpoint", type: "Experiential Concept", year: "2017", caption: "Architectural design work for Viewpoint.", glyph: "viewpoint-horizon", previewSrc: "06.jpg", images: [ { src: "01.jpg", caption: "Heli" }, { src: "02.jpg", caption: "Stairway" }, { src: "03.jpg", caption: "Cave" }, { src: "04.jpg", caption: "Spiral stair entrance" }, { src: "05.jpg", caption: "Spiral staircase" }, { src: "06.jpg", caption: "Chair" }, { src: "07.jpg", caption: "Heli night wide" }, ], }, ]; function GalleryGlyph({ glyph }) { const glyphs = { "deer-lady-mirrors": ( ), "dead-set-canopy": ( ), "bob-trajectory": ( ), "viewpoint-horizon": ( ), }; return glyphs[glyph] || glyphs["deer-lady-mirrors"]; } function GalleryTile({ project, index, onOpen }) { const previewSrc = project.previewSrc || project.images[0].src; const firstPreview = `assets/design/${project.slug}/${previewSrc}`; return (
{project.code} {project.title} {project.type} · {project.year}
); } function LightboxImage({ src, alt, glyphKind }) { const { useEffect, useState } = React; const [errored, setErrored] = useState(false); useEffect(() => { setErrored(false); }, [src]); if (errored) { return (
image unavailable
); } return ( {alt} setErrored(true)} /> ); } function Lightbox({ project, imageIndex, onClose, onSetIndex }) { const { useEffect, useRef, useState } = React; const image = project.images[imageIndex]; const fullSrc = `assets/design/${project.slug}/${image.src}`; const total = project.images.length; const [chromeHidden, setChromeHidden] = useState(false); const touchStart = useRef(null); const nextIndex = (imageIndex + 1) % total; const prevIndex = (imageIndex - 1 + total) % total; const next = () => onSetIndex(nextIndex); const prev = () => onSetIndex(prevIndex); const runNavAction = (action) => (e) => { action(); e.currentTarget.blur(); }; useEffect(() => { const scrollY = window.scrollY; const previousOverflow = document.body.style.overflow; document.body.style.overflow = "hidden"; return () => { document.body.style.overflow = previousOverflow; window.scrollTo(0, scrollY); }; }, []); useEffect(() => { const onKey = (e) => { if (e.key === "Escape") onClose(); if (e.key === "ArrowRight") next(); if (e.key === "ArrowLeft") prev(); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [nextIndex, prevIndex, onClose]); useEffect(() => { const preload = (i) => { const preloadImg = new Image(); preloadImg.src = `assets/design/${project.slug}/${project.images[i].src}`; }; preload(nextIndex); preload(prevIndex); }, [imageIndex, nextIndex, prevIndex, project.images, project.slug]); const onTouchStart = (e) => { const touch = e.touches[0]; touchStart.current = { x: touch.clientX, y: touch.clientY }; }; const onTouchEnd = (e) => { if (!touchStart.current) return; const touch = e.changedTouches[0]; const dx = touch.clientX - touchStart.current.x; const dy = touch.clientY - touchStart.current.y; const enableSwipeNavigation = window.matchMedia("(min-width: 721px)").matches; const tappedImage = e.target.closest(".lightbox-image, .lightbox-image-fallback"); touchStart.current = null; if (enableSwipeNavigation && Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) { if (dx < 0) next(); else prev(); return; } if (dy > 80 && Math.abs(dy) > Math.abs(dx)) { onClose(); return; } if (tappedImage && Math.abs(dx) < 10 && Math.abs(dy) < 10) { setChromeHidden((current) => !current); } }; return (
{project.code} · {project.title.toUpperCase()} · {String(imageIndex + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}
{image.caption &&
{image.caption}
}
{project.images.map((img, i) => ( ))}
{project.images.map((img, i) => (
← → keys · ESC to close
); } function Gallery() { const { useEffect, useRef, useState } = React; const [lightbox, setLightbox] = useState(null); const lightboxOpenedRef = useRef(false); const cycleTimersRef = useRef([]); const findBySlug = (slug) => GALLERY_PROJECTS.findIndex((project) => project.slug === slug); const open = (projectIndex, imageIndex, options = {}) => { setLightbox({ projectIndex, imageIndex }); if (!options.fromHash) { const slug = GALLERY_PROJECTS[projectIndex].slug; history.pushState({ lightbox: true }, "", `#design/${slug}/${imageIndex + 1}`); } }; const setIndex = (imageIndex) => { setLightbox((current) => { if (!current) return current; const slug = GALLERY_PROJECTS[current.projectIndex].slug; history.replaceState({ lightbox: true }, "", `#design/${slug}/${imageIndex + 1}`); return { ...current, imageIndex }; }); }; const close = (options = {}) => { setLightbox(null); if (!options.fromPop) { if (history.state && history.state.lightbox) { history.back(); } else { history.replaceState(null, "", `${window.location.pathname}${window.location.search}`); } } }; useEffect(() => { const match = window.location.hash.match(/^#design\/([a-z0-9-]+)\/(\d+)$/); if (!match) return; const projectIndex = findBySlug(match[1]); if (projectIndex < 0) return; const imageIndex = parseInt(match[2], 10) - 1; const project = GALLERY_PROJECTS[projectIndex]; if (imageIndex < 0 || imageIndex >= project.images.length) return; open(projectIndex, imageIndex, { fromHash: true }); }, []); useEffect(() => { const onPop = () => { const match = window.location.hash.match(/^#design\/([a-z0-9-]+)\/(\d+)$/); if (!match) { setLightbox(null); return; } const projectIndex = findBySlug(match[1]); if (projectIndex < 0) { setLightbox(null); return; } const imageIndex = parseInt(match[2], 10) - 1; const project = GALLERY_PROJECTS[projectIndex]; if (imageIndex < 0 || imageIndex >= project.images.length) { setLightbox(null); return; } setLightbox({ projectIndex, imageIndex }); }; window.addEventListener("popstate", onPop); return () => window.removeEventListener("popstate", onPop); }, []); useEffect(() => { if (!lightbox) return; lightboxOpenedRef.current = true; cycleTimersRef.current.forEach((id) => clearTimeout(id)); cycleTimersRef.current = []; }, [lightbox]); useEffect(() => { const hoverCapable = window.matchMedia("(hover: hover)").matches; const reducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches; if (hoverCapable || reducedMotion) return; const order = ["deer-lady", "viewpoint", "dead-set-on-living", "bob-does-sports"]; const FLIP_MS = 700; const HOLD_MS = 2000; const schedule = (fn, delay) => { const id = setTimeout(() => { cycleTimersRef.current = cycleTimersRef.current.filter((t) => t !== id); if (lightboxOpenedRef.current) return; fn(); }, delay); cycleTimersRef.current.push(id); }; const flippers = () => document.querySelectorAll(".gallery-sheet .gsh-tile-flipper"); const flipOn = (slug) => { flippers().forEach((el) => { if (el.dataset.slug === slug) el.classList.add("is-flipped"); }); }; const flipAllOff = () => { flippers().forEach((el) => el.classList.remove("is-flipped")); }; const startCycle = () => { if (lightboxOpenedRef.current) return; let t = 0; for (let cycle = 0; cycle < 1; cycle++) { order.forEach((slug, i) => { schedule(() => flipOn(slug), t + i * FLIP_MS); }); t += order.length * FLIP_MS + HOLD_MS; schedule(flipAllOff, t); t += FLIP_MS; } }; const target = document.querySelector(".gallery-sheet"); let observer = null; let started = false; const tryStart = () => { if (started) return; started = true; startCycle(); }; if (target && typeof IntersectionObserver !== "undefined") { observer = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) { tryStart(); observer.disconnect(); observer = null; break; } } }, { threshold: 0.2 }); observer.observe(target); } else { tryStart(); } return () => { if (observer) observer.disconnect(); cycleTimersRef.current.forEach((id) => clearTimeout(id)); cycleTimersRef.current = []; }; }, []); return (
PROJECT INDEX / 01 RA — DESIGN WORK 2017-2026 RA-DESIGN 2017-2026 {GALLERY_PROJECTS.length} / {GALLERY_PROJECTS.length}
{GALLERY_PROJECTS.map((project, index) => ( ))}
▸ RA-PORTFOLIO HOSPITALITY / PLAY / EXPERIENTIAL {new Date().getFullYear()}
{lightbox && ( )}
); } window.GalleryGlyph = GalleryGlyph; window.Gallery = Gallery;