The Mine is a time-traveling audio project tracing the evolution of global popular music from 1965 to 2019. Through Upwork, I connected with the project's creator, a music historian who needed a website he could manage independently for his podcast. Each episode explores a single year through a curated playlist of 101 songs, album highlights, and deep-dive commentary. I was tasked with building a CMS-based blogging platform in Webflow that would allow the client to publish year-by-year posts with playlist and podcast links, transcript integrations, and interactive song information cards. The client wanted a site that felt unique, something with older internet vibes that was engaging to visit but still functional and professional. I won the contract by sharing a GitHub experiment where I animated pixel-style text with JavaScript, creating a glitchy effect that resonated with the client's vision for adding novelty to the site. You can see a demo version of this site's design here.
The project spanned roughly eight months from June 2025 to February 2026. I worked through seven milestones: wireframing, CMS setup and page prototypes, mobile layout development, content population, desktop stylization, mobile stylization, and finally SEO implementation with documentation and training.
The client handled graphic design separately with another designer, providing me with logos and brand assets to implement. My role focused on building the technical infrastructure and visual presentation while ensuring he could update the site independently after handoff. Early on, I established transparent communication about my learning curve. Since I had recently pivoted to web development, I positioned myself as a problem solver rather than an expert, which the client appreciated. When I hit technical roadblocks, I'd outline what I tried and explain Webflow's limitations rather than overselling capabilities.
The final design balances modern web standards with nostalgic touches. The site background mimics paper texture, album spotlight sections and song cards have cardstock treatments, and grit textures at the bottom of pages reinforce the "mine" theme. Interactions lean into old-school web charm: gallery items and buttons pop and shrink on hover, CMS grid items grow and saturate as they scroll into view then shrink and desaturate as they leave the viewport, and navigation links load with a random color pulled from the brand palette. Just little things that might catch a visitor's eye.
The song cards were the most technically involved component. Each year post features 101 songs with metadata for information about the song and, for some songs, contextual commentary. I needed a system that would let the client paste formatted data from a spreadsheet into Webflow's CMS without manually coding each card. I built an Excel-to-HTML conversion framework where formulas transform spreadsheet rows into ready-to-embed HTML snippets. The client fills in song information, copies the generated HTML, and pastes it into a custom code field in the CMS. On the frontend, custom JavaScript and CSS handle the card behavior: cards with certain data load open by default, all cards expand and collapse on click, and they lift and brighten slightly on hover. This approach separated data from presentation, giving me granular control over how the song cards look, making updates maintainable and keeping the CMS interface manageable.
.jpg){kind=logo}
The navigation bar features an animated logo that pulls from several graphic variants that I created. I initially attempted to animate the logo purely with JavaScript, cycling through character variations to create movement. The letters jittered and caused the nav container to shift dimensions in a distracting way. I pivoted to animating the logo in After Effects and exporting it as a Lottie file, which rendered crisply and maintained consistent dimensions. I also implemented performance optimizations including asset preloading and DNS prefetching to ensure the animation loaded immediately on page load.
Here's a close-up of the logo animation loop seen in the nav bar:
Navigation links on certain pages load with a random color selected from the brand's color palette using JavaScript and CSS custom properties. The hover state matches the randomly assigned color, adding a layer of unpredictability that reinforces the site's playful personality. This required working around Webflow's class system limitations and understanding how getElementsByClassName returns collections rather than single elements.
Throughout development, I used custom CSS and vanilla JavaScript to work around Webflow's native interaction limitations. Toggle interactions for collapsible content, scroll-triggered animations, and dynamic color assignment all required code overrides. I referenced authoritative JavaScript resources including JavaScript: The Definitive Guide, Eloquent JavaScript, and MDN documentation to ensure my implementations followed best practices.
I'm currently in the final handoff phase, transferring the website and backup copies to the client along with comprehensive training materials. I've written documentation covering the site's design structure, CMS organization, the Excel-to-HTML spreadsheet workflow for song cards, SEO and schema markup implementation, and recorded tutorial videos walking through common tasks. The client has been consistently appreciative of my thorough and transparent communication throughout the project, especially since Webflow was new to him. He was satisfied with my straightforward technical explanations, and when implementation challenges arose, he understood after I explained what I'd tried and where the platform's limitations lay.
The client is very happy with the final website and plans to launch in April 2026 after securing editorial illustrators and finalizing his first articles. I'll update this case study with launch details and performance metrics once the site goes live.
For now, you can see a demo version of this site's design here.
