// Main app — composes sections, manages tweaks (dark mode, palette, density). const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "dark": false, "palette": "gold", "density": "spacious" }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); // Apply mode to so CSS variables flip useEffect(() => { const root = document.documentElement; root.setAttribute('data-dark', t.dark ? 'true' : 'false'); root.setAttribute('data-palette', t.palette); root.setAttribute('data-density', t.density); }, [t.dark, t.palette, t.density]); // Trigger reveal animations on scroll useReveal(); // Smooth in-page anchor scrolling useEffect(() => { const handler = (e) => { const a = e.target.closest('a'); if (!a) return; const href = a.getAttribute('href'); if (!href || !href.startsWith('#') || href.length < 2) return; const el = document.getElementById(href.slice(1)); if (el) { e.preventDefault(); window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 60, behavior: 'smooth' }); } }; document.addEventListener('click', handler); return () => document.removeEventListener('click', handler); }, []); return ( <>