);
}
// ─── Custom iPad frame ─────────────────────────────────────────
// Realistic iPad Pro bezel: aluminum-feel edge, camera lens with glint,
// power + volume buttons on the top edge, speaker grilles on the short
// edges, multi-layer shadow. Designed for the Spotlight hero.
function IPadFrame({ children, width = 980, height = 720, dark = true, landscape = true }) {
const bezel = 22;
// Subtle gradient on the bezel reads as anodized aluminum
const bgFrame = dark
? 'linear-gradient(160deg, #2a2a2d 0%, #1a1a1c 28%, #161618 55%, #1d1d20 80%, #232326 100%)'
: 'linear-gradient(160deg, #ece8df 0%, #e1ddd2 50%, #e6e2d7 100%)';
const buttonBg = dark ? '#0a0a0a' : '#8a8576';
const buttonHl = dark ? 'rgba(255,255,255,0.06)' : 'rgba(0,0,0,0.08)';
// Top-edge controls (landscape orientation)
const topBtn = (left, w) => (
);
// Speaker grille — vertical slit pattern on short edges
const speakerGrille = (side) => (
);
return (
{/* Volume + Power buttons (top edge, landscape) */}
{topBtn(bezel + 38, 42)}
{topBtn(bezel + 92, 42)}
{topBtn(width - bezel - 96, 58)}
{/* Apple Pencil magnetic strip (top edge) — extremely subtle */}
{/* Camera lens */}
{/* Speaker grilles on left + right edges */}
{speakerGrille('left')}
{speakerGrille('right')}
{/* Screen — deep black with subtle inner vignette */}
{children}
);
}
// ─── Custom iPhone frame ───────────────────────────────────────
// Realistic iPhone 15 Pro bezel: titanium-feel edge, Dynamic Island with
// front camera + sensor, side buttons (action / volume / power), home
// indicator. Same physical-device language as IPadFrame.
function IPhoneFrame({ children, width = 402, height = 874, dark = true }) {
const bezel = 14;
const bgFrame = dark
? 'linear-gradient(160deg, #2a2a2d 0%, #1a1a1c 30%, #161618 58%, #1f1f22 100%)'
: 'linear-gradient(160deg, #ece8df 0%, #e1ddd2 60%, #e6e2d7 100%)';
// Side button — vertical pill protruding from the side
const sideBtn = (side, top, h) => (
);
return (
{/* Left side: action button + volume up + volume down */}
{sideBtn('left', 110, 32)}
{sideBtn('left', 160, 62)}
{sideBtn('left', 234, 62)}
{/* Right side: power button */}
{sideBtn('right', 190, 96)}
{/* Screen */}
{children}
{/* Dynamic Island */}
{/* Camera lens */}
{/* Face ID sensor cluster — small dim spot left of camera */}
{/* Home indicator */}
);
}
// ─── Content components ────────────────────────────────────────
// JTR Command Center — case-film as iPad screen content.
// Autoplay requires muted in modern browsers, so the iframe is mounted on
// load with mute=1 and loops via playlist=VID. Playback speed is bumped to
// 1.3x via the YouTube IFrame API (enablejsapi=1 + setPlaybackRate over
// postMessage) since speed isn't a supported URL param.
function JTRContent() {
const VID = 'uJaOHdDOrKM';
const PLAYBACK_RATE = 1.3;
const iframeRef = React.useRef(null);
React.useEffect(() => {
const iframe = iframeRef.current;
if (!iframe) return;
function sendCommand(func, args) {
iframe.contentWindow?.postMessage(
JSON.stringify({ event: 'command', func, args }),
'*'
);
}
function onMessage(e) {
if (e.source !== iframe.contentWindow) return;
let data;
try { data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data; }
catch { return; }
// 'onReady' fires once after we send the 'listening' handshake;
// 'infoDelivery' fires repeatedly with state updates. Setting the
// rate on either covers cold-start and the loop boundary (YouTube
// resets to 1x when a looped video restarts).
if (data && (data.event === 'onReady' || data.event === 'infoDelivery')) {
sendCommand('setPlaybackRate', [PLAYBACK_RATE]);
}
}
window.addEventListener('message', onMessage);
function onLoad() {
iframe.contentWindow?.postMessage(JSON.stringify({ event: 'listening' }), '*');
}
iframe.addEventListener('load', onLoad);
// If the iframe loaded before this effect ran, kick the handshake now.
if (iframe.contentDocument?.readyState === 'complete') onLoad();
return () => {
window.removeEventListener('message', onMessage);
iframe.removeEventListener('load', onLoad);
};
}, []);
return (
);
}
// Architect Scaler — real App Store screenshot.
function ArchitectScalerContent() {
return (
);
}
// Basilisk — Godot mobile game mockup rendered at full-bleed.
function BasiliskContent() {
return (
);
}
// ─── Layouts ───────────────────────────────────────────────────
// Grid: 3-col grid, devices float on bare surface, info below each.
function GalleryGridLayout({ projects }) {
return (
{projects.map(p => (
))}
);
}
// Showcase: hero project displayed large with info to the side; rest in 2-col.
function GalleryShowcaseLayout({ projects }) {
const [hero, ...rest] = projects;
return (
{rest.map(p => (
))}
);
}
// Bento: varied sizes. Tall phones span two rows; wide devices span two cols.
function GalleryBentoLayout({ projects }) {
const byCode = Object.fromEntries(projects.map(p => [p.code, p]));
return (
{byCode['JTR'] && }
{byCode['ARCHITECT SCALER'] && }
{byCode['HALLWAY'] && }
{byCode['BASILISK'] && }
{byCode['PINEFALL'] && }
{byCode['VESPER'] && }
);
}
// Mobile: horizontal snap-scroll carousel. Each project = one full-width
// slide. Saves enormous vertical space as the project count grows.
// - CSS scroll-snap drives the snap; we just observe scroll position to
// light the active dot indicator and project label.
// - Devices are scaled to fit the viewport width with no horizontal scroll
// inside a single slide.
function GalleryMobileLayout({ projects }) {
const scrollerRef = React.useRef(null);
const [active, setActive] = React.useState(0);
// Available width per slide = viewport − 40px (20px gutter each side).
const [slideW, setSlideW] = React.useState(() => typeof window !== 'undefined' ? Math.min(window.innerWidth - 40, 360) : 320);
React.useEffect(() => {
const on = () => setSlideW(Math.min(window.innerWidth - 40, 360));
window.addEventListener('resize', on);
return () => window.removeEventListener('resize', on);
}, []);
// Track scroll → active slide.
const onScroll = () => {
const el = scrollerRef.current;
if (!el) return;
const idx = Math.round(el.scrollLeft / (slideW + 16));
if (idx !== active) setActive(Math.max(0, Math.min(projects.length - 1, idx)));
};
const goTo = (i) => {
const el = scrollerRef.current;
if (!el) return;
el.scrollTo({ left: i * (slideW + 16), behavior: 'smooth' });
};
return (
{/* Header strip: active project name + counter */}
{/* Snap scroller. Margin-left negative + padding-left positive keeps
the slides flush with the section's content edge while letting the
scroll spill to the screen edge for a native swipe feel. */}
);
}
// Basilisk — Godot mobile game mockup rendered at full-bleed.
function BasiliskContent() {
return (