Developer/Designer
The Works library is a completely custom, fully client side, zero dependency discovery interface built to make a catalog of over 500 musical compositions instantly navigable. A single accordion list is driven by a custom filtering and sorting engine written in vanilla JavaScript, with no framework and no build step for the interactions themselves, that supports live search, dual sort modes (song title versus poet, each with toggleable ascending and descending direction), chronological ordering by the poet's birth year, and stackable attribute filters for audio, video, and orchestrated versions.
The standout piece is a bespoke vocal range visualizer: it parses raw tessitura and voice part metadata (for example "SATB" or "Soprano, C4 to C6") and renders each composition's range as a proportional chart mapped against a full A0 to C8 piano keyboard, complete with a color graded reference scale for six standard voice types, turning dense musicological data into an at a glance graphic.
Rounding it out are custom built HTML5 audio players with interactive waveform scrubbing, a progressive membership conversion gate that triggers after a set number of score downloads, a terms of service acceptance flow gating protected files, and persistent UI state (open panels, accepted terms) saved to localStorage. Every component is fully responsive and dark mode aware via Tailwind CSS v4, and the entire page is statically pre generated by a scheduled cron build for maximum performance. It is a strong example of delivering rich, domain specific interactivity, spanning music notation, media playback, and gated access, without reaching for heavy libraries.
The Herman, Rebecca, and Gerald Ginsburg Foundation is a private, non-profit foundation dedicated to promoting and disseminating the music of Gerald Ginsburg (1932-2019) for charitable and educational purposes.
Visit
- ExpressionEngine
- Github
- Laravel Herd
- HTML5
- CSS3
- JavaScript
- PHP
- Laravel
- Tailwind