Mission log

Full-Screen Star Map Stabilization

Notes from turning the Spacefolio home page into a full-screen star map without making the canvas required.

2 min readspacefolioaccessibilityperformancethreejs

The latest Spacefolio iteration moves the home page further into the star-map direction: the portfolio opens on a full-screen navigation scene, while the normal routes, project cards, and blog posts remain statically generated pages.

That split is the important part. The scene can feel like a lightweight cockpit, but it is not the only way to use the site.

What changed

The map now treats primary routes as star systems and recent projects or posts as orbiting content planets. The ship can approach destinations, reveal target labels, and open a route from the landing zone. A compact HUD keeps flight controls and quality settings available without covering the map.

There is also a small asteroid layer. It adds motion and a reason to use the fire control, but it stays decorative. Shooting debris should never block reading a case study, opening the blog, or finding contact links.

What stayed static

The App Router pages still read local MDX at build time. Project and blog detail routes are generated with static params, RSS and sitemap files are emitted during the build, and every canvas target has an equivalent link in normal navigation or fallback markup.

Reduced-motion visitors receive static navigation. Browsers without WebGL receive static navigation. No-script visitors receive static navigation. Those paths are not alternate products; they are part of the core site.

Next tuning pass

The next useful polish is measurement: keep checking mobile framing, canvas bundle cost, and the amount of readable home-page content available before the animation loads. The visual goal is still an Asteroids-era vector interface, not a heavy game shell.