/* ============================================================ Portfolio: root: glass nav, theme toggle, section composition ============================================================ */ const RESUME_URL = "assets/Genevieve_Liu_Resume.pdf"; /* Each nav item can carry a peek menu: a few real destinations, so the bar previews the page instead of just scrolling to it. */ const NAV = [ { id: "home", label: "Home" }, { id: "about", label: "About", menu: [ { t: "Senior Product Designer", d: "Dentsu × Subaru of America", to: "about" }, { t: "ZeyaAI", d: "Self-directed AI practice · nomi, Nyla", href: "https://zeyaai.com" }, { t: "Résumé", d: "PDF · one page", href: RESUME_URL, blank: true }, ], }, { id: "work", label: "Work", menu: [ { t: "nomi", d: "Social-self generator · live", case: "nomi" }, { t: "NYLA", d: "AI-native identity system", case: "nyla" }, { t: "MySubaru Redesign", d: "2M+ connected owners", case: "mysubaru-redesign" }, { t: "MySubaru Onboarding", d: "Purchase to activation", case: "mysubaru-onboarding" }, { t: "AI Driving Assistant", d: "Calibrated proactivity", case: "subaru-agentic-ai" }, ], }, { id: "contact", label: "Contact", menu: [ { t: "vi.vignette@gmail.com", d: "Email me", href: "mailto:vi.vignette@gmail.com" }, { t: "LinkedIn", d: "Let's connect", href: "https://www.linkedin.com/in/genevieveliu/", blank: true }, { t: "Résumé", d: "PDF · one page", href: RESUME_URL, blank: true }, ], }, ]; function useTheme() { const [theme, setTheme] = useState(function () { return document.documentElement.getAttribute("data-theme") || "dark"; }); const toggle = useCallback(function () { setTheme(function (t) { const next = t === "dark" ? "light" : "dark"; document.documentElement.setAttribute("data-theme", next); try { localStorage.setItem("gv-theme", next); } catch (e) {} return next; }); }, []); return [theme, toggle]; } /* Scroll to a section, accounting for the fixed nav (no scrollIntoView). */ function scrollToId(id) { const el = document.getElementById(id); if (!el) return; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; const top = el.getBoundingClientRect().top + window.scrollY - (id === "home" ? 0 : 84); window.scrollTo({ top: top, behavior: reduced ? "auto" : "smooth" }); } function useActiveSection() { const [active, setActive] = useState("home"); const lock = useRef(0); useEffect(function () { function onScroll() { if (Date.now() < lock.current) return; // honour a recent click const ids = NAV.map(function (n) { return n.id; }); const mid = window.scrollY + window.innerHeight * 0.4; let current = "home"; let bestTop = -Infinity; ids.forEach(function (id) { const el = document.getElementById(id); if (el && el.offsetTop <= mid && el.offsetTop > bestTop) { bestTop = el.offsetTop; current = id; } }); // near the bottom of a real (laid-out, scrollable) page, force the last section if (window.scrollY > 0 && document.body.scrollHeight > window.innerHeight * 1.5 && window.innerHeight + window.scrollY >= document.body.scrollHeight - 4) { current = ids[ids.length - 1]; } setActive(current); } onScroll(); // re-run after layout settles (fonts, reveal sections, case grid) requestAnimationFrame(onScroll); window.addEventListener("load", onScroll); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return function () { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); window.removeEventListener("load", onScroll); }; }, []); const choose = useCallback(function (id) { setActive(id); lock.current = Date.now() + 900; // ignore scroll-driven updates while the smooth scroll runs scrollToId(id); }, []); return [active, choose]; } /* Hover/focus peek menu under a nav item. */ function NavMenu(props) { const items = props.items; return (
{items.map(function (m, i) { const inner = ( {m.t} {m.d} ); const common = { key: m.t + i, className: "gv-navmenu-item", role: "menuitem", style: { transitionDelay: (i * 26) + "ms" } }; if (m.case) { return ; } return ( {inner} ); })}
); } function NavBar(props) { const { theme, toggle } = props; const [active, choose] = useActiveSection(); const [open, setOpen] = useState(null); const closeT = useRef(0); function hold(id) { clearTimeout(closeT.current); setOpen(id); } function release() { clearTimeout(closeT.current); closeT.current = setTimeout(function () { setOpen(null); }, 160); } function go(id) { return function (e) { e.preventDefault(); setOpen(null); choose(id); }; } return (
{/* wordmark */} Genevieve {/* center nav pill */} {/* right cluster */}
Resume {/* On a phone the nav pill is gone, so the header's one action leads into the work instead of out to a PDF. It lands on the first cover itself, not on the section heading above it. */}
); } function navClick(id) { return function (e) { e.preventDefault(); scrollToId(id); }; } function Portfolio() { const [theme, toggle] = useTheme(); const [activeCase, setActiveCase] = useState(null); const openCase = useCallback(function (id) { window.scrollTo(0, 0); setActiveCase(id); }, []); const navCase = useCallback(function (id) { window.scrollTo(0, 0); setActiveCase(id); }, []); const backHome = useCallback(function () { setActiveCase(null); setTimeout(function () { scrollToId("work"); }, 0); }, []); if (activeCase) { return ( ); } return (
); } window.Portfolio = Portfolio;