You're looking at it right now
A day on the web
One continuous sky. Six chapters. A portfolio that finds its own rhythm between first light and nightfall.
- Next.js
- TypeScript
- Canvas
Behind the build
- The problem
- Make a continuously changing sky feel like one place, while keeping the content readable, the page responsive, and motion optional.
- One timeline, shared by the scene
- Cache section positions and update CSS variables from one animation-frame-throttled scroll subscription. Both celestial bodies use the same arc function with different progress ranges.
- Render only what needs to change
- Keep portfolio content on the server. Draw stars on canvas when the view changes, suspend off-screen canvases, and cap pixel density on smaller screens.
- Treat accessibility as part of the design
- Check normal and muted text against the changing palette. Offer three stationary sky states for reduced motion, keyboard-accessible skill points, and a text list alternative.
- The trade-off
- An expressive background makes text contrast harder. Between some palette stops, a calculated reading layer softens the gradient just enough to maintain the target contrast. Legibility takes priority over an untouched sky.
- The outcome
- A statically rendered portfolio with a shared day-to-night scene and a separately controlled handwriting entrance. The sky calculations, motion geometry, and touch-target spacing have automated checks.