Music Portrait · Creative frontend case study
Turning listening into a living atlas
I designed and built an interactive portrait that treats music as personal geography: artists become planets, favourite songs become moons and meaningful connections become routes through a hand-drawn solar system.
Role
Creative direction and frontend developmentStack
Gatsby · React · Vercel Functions · Spotify Web APIOutcome
A personal, explorable music portraitFraming the work
The challenge
A conventional artist grid could show names and artwork, but not why the music matters to me. My objective was an expressive portfolio piece that carries memories, habits and creative influences while demonstrating thoughtful API and interface work.
That meant keeping editorial judgement separate from Spotify. I choose the artists, prominence, notes and connections; Spotify supplies catalogue names, links and artwork for those exact selections.
Visual language
Creative direction
The visual direction combines an old celestial chart with a warm, colourful solar system. Brass rules, deep ocean blues and map-like labels connect the project with the Bookshelf and Studio areas without making it feel like a generic music dashboard.
Interaction system
Designing the interaction
Prominence becomes scale
Artists use deliberately different sizes, so personal favourites read immediately.
Songs stay attached to meaning
When an artist is selected, songs orbit their artist as moons using album artwork.
One artist, several affinities
An artist has one planet with several region affinities, avoiding misleading duplicates.
Selecting an artist pauses the wider solar system while its songs continue moving. Selecting a song pauses that local moon system as well. Spotify links live in the details panel, leaving the chart focused on exploration.
Technical architecture
How the data moves
The frontend never asks Spotify to decide what belongs in the portrait. A small authored manifest is the source of meaning; catalogue data is optional enrichment. If Spotify is unavailable or the snapshot expires, the personal map remains intact.
The artists, songs, notes, prominence and relationships I choose.
Exact Spotify IDs are enriched through a server-only catalogue request.
A bounded schema is checked before one temporary snapshot is replaced.
The interface combines editorial meaning with current catalogue artwork.
Gatsby and React render the portrait. A protected Vercel Function uses Spotify's Client Credentials flow, validates the response and stores one current snapshot in private Blob storage. Artist and track IDs—not display names—join the two sources.
Boundaries
Privacy and resilience
No Spotify user account is connected, and the application does not read personal listening history. Visitors can explore the portrait without authentication or playback permissions.
A candidate response must pass schema validation before it can replace the current snapshot. Failed refreshes leave the previous data intact, the snapshot expires after seven days and credentials remain server-side.
Quality
Accessibility and verification
Every artist, song, region and relationship is keyboard-operable. Selection pauses the wider solar system, Escape restores focus and reduced-motion preferences make the atlas static. Text explains meaning that colour and movement alone cannot carry.
Node tests and Playwright cover the content model, deterministic geometry, keyboard journeys, mobile layouts and unavailable catalogue states. Manifest validation and a production build complete the local verification gate.
Honest scope
Limitations and next steps
The portrait is intentionally curated rather than inferred from private listening history. It does not calculate rankings, stream audio or require a Spotify login. Its next useful step is periodic catalogue refresh and continued editorial refinement as my listening changes.
Reflection
What I learned
The strongest version emerged when the API became supporting material rather than the concept itself. Separating authored meaning from catalogue enrichment made the interface more personal, the privacy boundary clearer and failure states safer.
Explore the portrait