// pages-sub.jsx — Blog, Album, Now, Work, Contact, Links const { useState: useS2, useEffect: useE2 } = React; function PageHead({ kicker, title, lead, children }) { return (
{kicker} {title &&

{title}

} {lead &&

{lead}

} {children}
); } /* ---------------- BLOG ---------------- */ function Blog({ go, profile }) { const [filter, setFilter] = useS2("all"); const posts = window.SITE.posts.filter(p => filter === "all" || p.cat === filter); const cats = [["all", "All"], ["color", "Color & Post"], ["flight", "Flight"]]; return (
{cats.map(([id, label]) => ( ))}
{posts.map((p, i) => )}
); } /* ---------------- ALBUM ---------------- */ function Lightbox({ photos, index, setIndex }) { const open = index !== null; const p = open ? photos[index] : null; // Re-render when the photo store hydrates / changes so the picks up // the stored data-URL once it's loaded. const [, force] = useS2(0); useE2(() => { if (!window.imageSlotStore) return; window.imageSlotStore.ensure(); return window.imageSlotStore.subscribe(() => force((n) => n + 1)); }, []); useE2(() => { const onKey = (e) => { if (!open) return; if (e.key === "Escape") setIndex(null); if (e.key === "ArrowRight") setIndex((index + 1) % photos.length); if (e.key === "ArrowLeft") setIndex((index - 1 + photos.length) % photos.length); }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [open, index, photos.length]); const lb = (
setIndex(null)}> {open && ( <>
e.stopPropagation()}> {window.imageSlotStore && window.imageSlotStore.get("album-" + p.id) && {p.title}}
)}
); // Portal to so the lightbox's position:fixed anchors to the viewport, // not the .page element (whose pagein animation leaves an identity transform // that would otherwise become the containing block and drop the photo below // the fold). return ReactDOM.createPortal(lb, document.body); } function Album({ go, profile }) { const [index, setIndex] = useS2(null); const [, force] = useS2(0); const all = window.SITE.photos; useE2(() => { if (!window.imageSlotStore) return; window.imageSlotStore.ensure(); return window.imageSlotStore.subscribe(() => force(n => n + 1)); }, []); const photos = all.filter(p => window.imageSlotStore && window.imageSlotStore.get("album-" + p.id)); return (
{photos.map((p, i) => (
setIndex(i)}>
))}
); } /* ---------------- NOW ---------------- */ function Now({ go, profile }) { return (
{window.SITE.now.map((n, i) => (
{n.label}

{n.body}

))}

Inspired by the /now page movement. This is the truth as of today.

); } /* ---------------- WORK ---------------- */ function Work({ go, profile }) { return (
{window.SITE.work.map((w, i) => (
{w.type} · {w.year}
{w.title}
{w.role}
))}
Reel 2026

Want the full showreel and rate card?

); } /* ---------------- CONTACT ---------------- */ function Contact({ go, profile }) { return (
{profile.email}

Availability

Booking color & finishing from Q3 2026. Aerial camera, seasonal.

Based in

{profile.location} — remote grading worldwide. Will travel for the right exit.

); } /* ---------------- LINKS ---------------- */ function Links({ go, profile }) { return (
{window.SITE.links.map((l) => (
{l.label}
{l.handle}
{l.note}
))}
); } /* ---------------- PROJECTS ---------------- */ function Projects({ go, profile }) { const [, force] = useS2(0); const profileUrl = window.SITE.imdbProfile; useE2(() => { if (!window.imageSlotStore) return; window.imageSlotStore.ensure(); return window.imageSlotStore.subscribe(() => force(n => n + 1)); }, []); return (
Full list of credits {window.SITE.projectGroups.map((group, gi) => { const films = group.films.filter(p => window.imageSlotStore && window.imageSlotStore.get("project-" + p.id)); if (!films.length) return null; return (

{group.role}

{films.map((p) => (
{p.title}
{p.year &&
{p.year}
}
))}
); })}
); } Object.assign(window, { Blog, Album, Now, Work, Contact, Links, Projects, PageHead, Lightbox });