← Back to Portfolio
Web Development
Metal Band Website
Short Fuse — my band
Next.jsReactTailwind CSSStatic ExportVercelAccessibility
Visit Site →
The official site for Short Fuse — my band of 20+ years, where I play electronics and keyboards — rebuilt as a single landing page plus an electronic press kit.
Built with Next.js 15 and React 19, statically exported: no server components with runtime data, no API routes, nothing to keep running. Tailwind 4 configured entirely in CSS through
The design tokens are shared with the merch store, which is a separate codebase on its own subdomain. That is what makes the two sites read as one brand instead of two projects that happen to share a logo.
Every piece of swappable content lives in one file. The section components hold layout and no copy at all, so changing a show, a release, a video or a merch link never means editing JSX. Adding a show is an object and a flyer image — and the flyer strip measures whether its contents overflow their track and renders carousel arrows only if they do, so one flyer and five flyers both look deliberate with nothing to configure.
Show details are repeated as text fields even though they are printed on the poster: a flyer image is invisible to search engines and screen readers, and the alt text is assembled from those fields. Videos are click-to-load, so nothing is requested from YouTube until someone presses play. Reduced motion is honoured globally, and the film grain is an inline SVG rather than a network request.
Beyond the site, I have led album production, video production, and much of the band's album & flyer art over the years — so the design language mirrors the sound rather than being applied to it.
Built with Next.js 15 and React 19, statically exported: no server components with runtime data, no API routes, nothing to keep running. Tailwind 4 configured entirely in CSS through
@theme, with a palette of three colors — ink, bone, blood — because artwork and photography supply everything else.The design tokens are shared with the merch store, which is a separate codebase on its own subdomain. That is what makes the two sites read as one brand instead of two projects that happen to share a logo.
Every piece of swappable content lives in one file. The section components hold layout and no copy at all, so changing a show, a release, a video or a merch link never means editing JSX. Adding a show is an object and a flyer image — and the flyer strip measures whether its contents overflow their track and renders carousel arrows only if they do, so one flyer and five flyers both look deliberate with nothing to configure.
Show details are repeated as text fields even though they are printed on the poster: a flyer image is invisible to search engines and screen readers, and the alt text is assembled from those fields. Videos are click-to-load, so nothing is requested from YouTube until someone presses play. Reduced motion is honoured globally, and the film grain is an inline SVG rather than a network request.
Beyond the site, I have led album production, video production, and much of the band's album & flyer art over the years — so the design language mirrors the sound rather than being applied to it.
Screenshots
