Making
the archive.

The starting point was a fan’s wish to collect JAY B’s music and public moments in one personal space. The site also needed room for jennyj’s own ideas, without making fan concepts look like official releases. That led to two connected strands: an archive of the artist’s work and a small creative portfolio.

jennyj supplies the concept, curatorial choices and creative direction. ChatGPT and Codex assist with design, writing and implementation. The work develops through proposals, browser previews and jennyj’s decisions about what to keep, change or remove.

The first goal is simple: help someone find a record, read its tracklist and reach a listening platform. A second path follows interviews, release announcements and live events back to their sources. Studio and Playroom add a more personal layer, while About explains who is behind the project.

These goals guide the review process on both desktop and mobile. Visual polish is checked alongside legible text, useful link labels and usable controls. A feature is not treated as finished just because a screenshot looks convincing; its interaction and fallback also need attention.

The disc gallery draws on Ravi Klaassens’ A24 study. Its current runtime is adapted from that reference implementation; it has not yet been independently rewritten. An original implementation and permission verification remain follow-up work. Renaming selectors would not change that provenance, so this account distinguishes the visual reference from the work still to be done.

The editorial links take a separate cue from valerian.studio: a visible underline with a restrained hover response. The archive’s compact arrow is an independently drawn SVG. These references inform particular details rather than a claim that every part of the site is original.

Ravi Klaassens’ A24 study ↗valerian.studio ↗

The six main pages give each kind of material a clear home. Records holds releases and listening options. Archive groups public stories with source links. Studio presents fan concepts, and Playroom offers an interactive portrait. Home introduces these paths; About supplies the project context and credits.

Individual record and archive URLs allow a particular release or story to be shared directly. The structure also keeps the artist’s work separate from fan-made concepts. The new case study sits beneath About, where process detail is available without asking every visitor to read it before exploring the music.

Instrument Serif carries the expressive headings; a sans-serif supports navigation and metadata. A warm paper background and dark sections frame the artwork without adding another visual identity over it. The disc shape gives the music pages a recurring motif, while fine rules organize tracklists, dates and source information.

The first design review focused on how this system behaves at smaller widths. Metadata became more readable, the mobile hero was rebalanced and editorial links gained clearer feedback. The body type and wider token system remain part of the next review, rather than a finished design-system claim.

The gallery invites browsing through scrolling, dragging and keyboard controls, with record links available when the 3D experience cannot load. The record index stays horizontally scrollable on mobile, with an edge fade and a Swipe hint. Editorial links retain an underline at rest so that their purpose is visible before interaction.

Reduced-motion preferences disable or simplify supported animations. Playroom deliberately allows the portrait interaction to extend beyond its frame, and the mobile navigation retains its original dropdown after owner review. These are documented design choices. Accessibility is an ongoing verification task, not a blanket claim that every interaction has passed an independent audit.

The application uses Next.js and React, with a static export deployed to Cloudflare Pages. Content lives in structured files and is validated during the build. The current gallery runtime uses Three.js and GSAP dependencies; it is not described here as a library-free implementation. Versioned WOFF2 fonts and compressed image variants reduce the assets sent to the browser.

The agreed workflow uses scoped branches and pull requests. Tests, export checks and a local link audit run in GitHub Actions before a merge is approved. Main then deploys, followed by live verification. Release tags should identify the exact successfully deployed commit.

The first phase is published as v1.1.0: six main pages with record browsing, source-linked stories, fan concepts and a playful interaction. Its release checks included 50 passing tests and 118 internal links and assets checked without failures. Those checks establish a build and navigation baseline; they do not measure audience response or prove universal accessibility.

The next work includes independently rebuilding the disc gallery, resolving outstanding image permission questions and reviewing the wider typography and page structure. This case study records the project as it stands, including its unfinished parts, and will change as that work is reviewed and released.