FIG. 02 · Project · 2025 – 26
Zenith
The framework behind this portfolio. I designed Zenith so the build can check how pages fit together and the browser can spend its time rendering the page and handling interaction.
The problem
A site like this needs readable URLs, consistent layouts and interactions that survive navigation. I wanted those pieces to have explicit contracts instead of discovering how they fit together in a browser after shipping.
My role
I authored the language surface and worked across the compiler, router, runtime, CLI and docs. The portfolio is where those parts have to work together: content enters at build time, pages compile, and motion binds to the page that visitors actually see.
The key decision
Compile each route ahead of time and keep interaction in a small runtime. The content export supplies structured copy and media; Zenith owns the page structure. That boundary also made it possible to change CMSs while keeping the portfolio routes and motion.
The result
You can inspect the result directly: this site serves built HTML at its existing URLs. Try the theme switch, then open a case study. The theme persists while navigation reveals the next page.
src/components/ui/ThemeToggle.zen
function handleToggleClick() {
commitTheme(nextThemeValue(currentTheme));
}
zenMount(() => {
applyTheme(resolveInitialTheme());
});Visual evidence
From source to site.
The portfolio is a useful test because it has to work as a site first. Here’s one view of the browser and the built route that serves it.
01 / Demo capture
The portfolio in the browser
The home page is a real consumer of the framework: a route, a theme preference and interaction that binds after the page renders.
View full size Try the homepage
02 / Demo capture
A route you can open
The build produces an HTML document for the case study URL. The title and content are there before the motion code runs.
View full size Explore the framework source