/* Main App */ const { useEffect: useEffectM, useState: useStateM, useRef: useRefM } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "revealEnabled": true, "replayReveal": false, "revealThreshold": 0.12, "revealDuration": 500 }/*EDITMODE-END*/; function App() { const tweaks = TWEAK_DEFAULTS; const [bootDone, setBootDone] = useStateM(false); const [activeItem, setActiveItem] = useStateM(null); const [activeSection, setActiveSection] = useStateM("hero"); // push reveal duration into a CSS variable useEffectM(() => { document.documentElement.style.setProperty('--reveal-duration', tweaks.revealDuration + 'ms'); }, [tweaks.revealDuration]); // section observer useEffectM(() => { if (!bootDone) return; const ids = ["hero", "projects", "achievements", "leadership", "career", "skills", "testimonials", "contact"]; const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) setActiveSection(e.target.id); }); }, { rootMargin: "-40% 0px -50% 0px" }); ids.forEach((id) => { const el = document.getElementById(id); if (el) obs.observe(el); }); return () => obs.disconnect(); }, [bootDone]); // reveal-on-scroll for .reveal elements // - one-shot if replayReveal is off (classic behavior) // - replay every time element enters/leaves viewport when replayReveal is on // - if revealEnabled is off, force everything visible useEffectM(() => { if (!bootDone) return; const els = document.querySelectorAll(".reveal"); // disabled → force-show, no observer if (!tweaks.revealEnabled) { els.forEach((el) => el.classList.add("in")); return; } const replay = !!tweaks.replayReveal; const obs = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); if (!replay) obs.unobserve(e.target); } else if (replay) { e.target.classList.remove("in"); } }); }, { threshold: tweaks.revealThreshold, rootMargin: "0px 0px -8% 0px" }); els.forEach((el) => { if (!replay) { // start hidden so it can re-fire only on first entry el.classList.remove("in"); } obs.observe(el); }); return () => obs.disconnect(); }, [bootDone, tweaks.revealEnabled, tweaks.replayReveal, tweaks.revealThreshold]); // close modal on esc useEffectM(() => { function key(e) { if (e.key === "Escape") setActiveItem(null); } window.addEventListener("keydown", key); return () => window.removeEventListener("keydown", key); }, []); const data = window.PORTFOLIO_DATA; return ( {/* fixed bg */}
{!bootDone && setBootDone(true)} />}