UNDER THE SURFACE / THIS SITE
A few implementation decisions from this edition of the portfolio.
Pip’s target position comes from the page’s scroll position. A small animation loop moves the character toward that target and stops when it arrives. Scrolling farther reverses the direction.
Hovering or focusing the character stops the walk. Reduced-motion preferences keep it stationary. Pause, hide, and sunglasses preferences are stored locally when browser storage is available. Pip walks within a dedicated bottom strip, with blue shading to stand out against the page.
The Spotify embed is created after the visitor opens the player. Playback stays under Spotify’s controls. Closing the player removes the embed and stops any audio it was playing.
The photo viewer uses the browser’s native dialog element, with keyboard navigation and touch swipes. Closing it returns focus to the photo that opened it.
The brief builder assembles a planning document from three workflow templates, the selected review mode, and the visitor’s audience, goal, and constraints. The visible preview, clipboard copy, and text download all use the same output. It does not call a model.
Copy and download are both available directly. If the clipboard is blocked, the text download is used instead. The text stays in the current tab and clears on reload. There is no backend and no account to create.
Create a system brief