DistantShadow.de - A band website

Some Context

Before we go into the technology used to develop the website for Distant Shadow, let me give you some context on how this came into being…

So, Phil - the guitarist - is the son of a long term friend of mine. We actually went to school together. When we talked, he briefly mentioned that that Phil is in this Metal Band. When they shared their first recording on Spotify, I was blown away. This was old-schol Thresh Metal, the kind of music I listened to as a teenager.

What was most astonishing was the production quality and their songwriting. Having written songs myself, having recorded myself and knowing what we sounded like at that age, this is truely remarkable.

I reached out to the band, asking if they would need a website for a decent web representation.

Information and structure

From years ago I recall an interview Tegan and Sara gave. They mentioned that Neil Young (who seemed to be a mentor of their’s at the time) mentioned that they should collect all bits, pieces, media, and capture every information. In this media age this is more important than ever.

That is why my concept involved not just news, gigs, member biographies, but also past shows, pictures from gigs, media kit and a review page, so the band has a place to collect this data publically and have a public repository of their work and their success.

Colorwise, I choose a dark almost monochrome black and white theme on the site. For a metal band, this is probably what fits best. Better play it safe for the color of the website.

The band also asked to have the page bilingular in English and German.

The Stack

I love astro as a static site generator. There is so much you can accomplish with static sites nowadays, it is amazing. Furthermore, static sites are blazingly fast. The lack of any additional backend also helps mitigating any kind of security risk.

Also, the integration of markdown files help updating the site more easily. Astros content system is genius.

Component	Technology/version	Role in the project
Static-site framework	Astro	Builds the pages and produces static HTML during compile time
Language	TypeScript	Provides type safety for components, navigation, and localization helpers
Component format	Astro components	Implements layouts, reusable UI, and shared page templates
Content format	Markdown	Stores news, upcoming shows, past shows, and press reviews
Translation system	JSON and custom TypeScript helpers	Supplies German and English copy with English fallback behavior
Routing	Astro file-based routing and i18n	Creates /de/ and /en/ routes; / redirects to German
Styling	Custom global CSS	Provides the responsive dark theme, design tokens, layout, and navigation
Image pipeline	astro:assets	Optimizes imported images and generates WebP gallery output
Gallery	Photoswipe	Adds an interactive lightbox to the otherwise static gallery
Sitemap	@astrojs/sitemap	Generates sitemap entries for both supported locales
Validation	@astrojs/check	Checks Astro and TypeScript code before production builds
SEO metadata	Astro shared layout	Generates canonical URLs, hreflang, Open Graph, and Twitter Card metadata
Accessibility	Semantic HTML, ARIA, keyboard controls	Supports keyboard navigation, screen readers, and skip navigation
Client-side JavaScript	Native browser JavaScript	Powers only necessary interactions such as navigation and the gallery
Automation	GitHub Actions	Installs dependencies, validates the project, builds it, and deploys it
Runtime tooling	Node.js and npm	Provides the local-development and CI build environment
Architecture	Static frontend only	Requires no CMS, database, server API, React, Vue, or other runtime framework

The bottom line

I was a pleasure to work with the band on the website, the astro stack is great to work with and the music is great. What more can you ask for.

Listen to Distant Shadow’s latest music. The guys deserve to be listened to.