/* =================================================== ICONS — small, mono-line, consistent =================================================== */ const Icon = { Search: () => ( ), ArrowRight: () => ( ), ArrowUpRight: () => ( ), Close: () => ( ), Github: () => ( ), Twitter: () => ( ), Linkedin: () => ( ), Instagram: () => ( ), Facebook: () => ( ), Mail: () => ( ), Globe: () => ( ), ExternalLink: () => ( ), }; /* =================================================== NAV — floating glass pill, sticky on scroll =================================================== */ function navigateWithTransition(href) { if (!href || href.startsWith('#')) return false; // External / absolute → real navigation if (/^https?:/.test(href)) { window.location.href = href; return true; } // SPA: tell the router window.dispatchEvent(new CustomEvent('spa:navigate', { detail: { href } })); return true; } function TransitionLink({ href, className, children, ...rest }) { const onClick = (e) => { if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return; if (!href || href.startsWith('#') || /^https?:/.test(href)) return; e.preventDefault(); navigateWithTransition(href); }; return ( {children} ); } function Nav({ active }) { const [condensed, setCondensed] = React.useState(false); const navRef = React.useRef(null); const pillRef = React.useRef(null); const linksRef = React.useRef(null); React.useEffect(() => { const onScroll = () => setCondensed(window.scrollY > 40); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // ---- sliding glass pill behind the links ---- React.useEffect(() => { const linksWrap = linksRef.current, pill = pillRef.current, nav = navRef.current; if (!linksWrap || !pill || !nav) return; const moveTo = (el) => { if (!el) return; const wrapRect = linksWrap.getBoundingClientRect(); const r = el.getBoundingClientRect(); pill.style.width = r.width + 'px'; pill.style.height = r.height + 'px'; pill.style.transform = `translate3d(${r.left - wrapRect.left}px, ${r.top - wrapRect.top}px, 0)`; pill.classList.add('is-visible'); }; const hide = () => pill.classList.remove('is-visible'); const getActive = () => linksWrap.querySelector('.nav__link.is-active'); const settle = () => { const el = getActive(); if (el) moveTo(el); else hide(); }; const t = setTimeout(settle, 0); window.addEventListener('resize', settle); const links = linksWrap.querySelectorAll('.nav__link'); const onEnter = (e) => moveTo(e.currentTarget); const onLeaveWrap = () => settle(); links.forEach(l => l.addEventListener('mouseenter', onEnter)); linksWrap.addEventListener('mouseleave', onLeaveWrap); return () => { clearTimeout(t); window.removeEventListener('resize', settle); links.forEach(l => l.removeEventListener('mouseenter', onEnter)); linksWrap.removeEventListener('mouseleave', onLeaveWrap); }; }, [active]); return ( ); } /* =================================================== FOOTER =================================================== */ function Footer() { return ( ); } /* =================================================== DATA HOOK — fetch JSON helper =================================================== */ function useJson(path) { const [data, setData] = React.useState(null); const [error, setError] = React.useState(null); React.useEffect(() => { let alive = true; fetch(path) .then(r => r.json()) .then(d => { if (alive) setData(d); }) .catch(e => { if (alive) setError(e); }); return () => { alive = false; }; }, [path]); return { data, error }; } /* =================================================== FLASHLIGHT GLOW — soft background illumination =================================================== */ function FlashlightGlow() { const glowRef = React.useRef(null); React.useEffect(() => { const onMove = (e) => { if (glowRef.current) { // We set CSS variables for the mouse position glowRef.current.style.setProperty('--x', e.clientX + 'px'); glowRef.current.style.setProperty('--y', e.clientY + 'px'); } }; window.addEventListener('mousemove', onMove, { passive: true }); return () => { window.removeEventListener('mousemove', onMove); }; }, []); return

; } /* expose to window for cross-script access */ Object.assign(window, { Icon, Nav, Footer, useJson, FlashlightGlow, TransitionLink, navigateWithTransition });