// brent_the_programmer — app shell. // Owns: routing state, theme application to , tweaks panel. function App() { const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS); const [route, setRoute] = React.useState("home"); // home | gallery | blog | post | about | now | contact const [postId, setPostId] = React.useState(null); // Apply theme & accent to via data-attrs so CSS variables flip. React.useEffect(() => { const el = document.documentElement; el.setAttribute("data-theme", t.theme); el.setAttribute("data-accent", t.accent); el.setAttribute("data-typepair", t.typePair); el.setAttribute("data-density", t.density); el.setAttribute("data-tape", t.showTape ? "on" : "off"); }, [t.theme, t.accent, t.typePair, t.density, t.showTape]); const go = (r) => { setRoute(r); // Scroll to top on navigation but keep current scroll position if same route if (r !== route) window.scrollTo({ top: 0, behavior: "instant" }); }; const openPost = (id) => { setPostId(id); setRoute("post"); window.scrollTo({ top: 0, behavior: "instant" }); }; const toggleTheme = () => setTweak("theme", t.theme === "studio" ? "workshop" : "studio"); const currentPost = postId ? POSTS.find((p) => p.id === postId) : null; return ( <>

{route === "home" && } {route === "gallery" && } {route === "studio" && } {route === "blog" && } {route === "post" && currentPost && } {route === "about" && } {route === "now" && } {route === "awareness" && }

setTweak("theme", v)} /> o.value)} onChange={(v) => setTweak("accent", v)} /> setTweak("typePair", v)} /> setTweak("density", v)} /> setTweak("hero", v)} /> setTweak("showTape", v)} /> ); } /* Subtle fade on route change so navigation doesn't feel like a snap. Using opacity instead of transform on purpose — a `transform` value (even translateY(0)) creates a containing block for `position: fixed` descendants, which traps overlays like the Lightbox inside the route container and breaks full-viewport positioning. */ const __ROUTE_CSS = ` .route-fade { animation: rfade .28s ease-out both; } @keyframes rfade { from { opacity: 0; } to { opacity: 1; } } `; const __routeStyle = document.createElement("style"); __routeStyle.textContent = __ROUTE_CSS; document.head.appendChild(__routeStyle); ReactDOM.createRoot(document.getElementById("root")).render();