A portfolio homepage usually makes every project compete in one long vertical feed. That is easy to build and tiring to navigate: each product gets a miniature hero, a miniature feature list, and another call to action before the visitor reaches the next one.
Exara’s products also do not belong to one visual template. Mapd is warm and editorial. The automotive engine is a clinical diagnostic surface. Feasible behaves like a verification terminal. Flattening them into matching cards would make the page consistent by removing the useful differences.
So the homepage became a small state machine. The project index is the stable shell; selecting a row opens a full product canvas inside the page.
The URL is part of the interface
An open canvas is not temporary decoration. #product/mapd, #product/diagnostic, and #product/feasible are addressable states. A visitor can copy one of those URLs and arrive at the same product view.
Opening a canvas pushes that state into browser history. Switching products replaces it with another valid product state. Closing returns to the index, and the browser Back button reverses the same sequence instead of unexpectedly leaving the site.
That contract matters more than the animation. Without it, the interface looks like navigation while behaving like a modal.
One keyboard contract
The state machine accepts the same inputs regardless of product identity:
1through4switch product canvases;Esccloses the active canvas;- focus moves into the canvas when it opens;
- focus returns to the row that launched it when it closes.
Those controls are ignored while someone is typing in an input or textarea. A global shortcut that steals a number from a form is not a shortcut; it is a bug with good branding.
Product identity is state, too
Each product changes typography, palette, layout, and motion. The transition does not flash the entire page from one theme to another. A shared shell stays stable while the active canvas layers in its own variables and content.
This is why the products can feel unrelated without the site feeling assembled from unrelated templates. The stable elements—close control, product switcher, focus behavior, progress line, and URL grammar—carry continuity while the product supplies the atmosphere.
Expensive behavior stays behind the state boundary
The index is HTML and CSS. The Mapd pulse begins polling only while its canvas is open. Three.js, GSAP, the GLB loader, and the car model are requested only after the diagnostic canvas becomes active. Closing the canvas stops its animation loop.
The homepage therefore does not pay the full runtime cost of every possible product world on first paint. The URL exposes the state, but entering that state is what earns the heavier code.
Why this is not a single-page application
The rest of exara.ae remains a set of Astro routes. Notes are documents. The customer case room is a document with one interactive artifact. About is an operating manual. They use ordinary links and remain useful without a client-side UI framework.
Only the homepage needs product-state behavior, so only the homepage owns it. The architecture follows the interaction instead of asking the entire site to adopt the most complicated page’s runtime model.
The result is less scrolling, but that was not the real objective. The objective was to let every product become itself while keeping navigation honest.