Altitude.Music — Site Studio & Label

Altitude.Music est un studio d’enregistrement et un label d’artistes émergents basé à Louvain-la-Neuve. Le site sert à la fois de vitrine marketing et de surface de réservation : un visiteur doit pouvoir écouter un morceau en deux clics, comprendre l’offre en dix secondes et confirmer une session sans quitter la page.

Architecture

Site Astro 6 statique (SSG) déployé sur Netlify. La stratégie de rendu sépare volontairement les composants .astro statiques et les îlots React, hydratés uniquement quand c’est nécessaire :

.astro (zéro JS)      →  Nav, Hero, Marquee, Services, À propos, Journal, Footer
.tsx client:visible   →  Portfolio, Vidéos, Témoignages, Réservation, Contact
.tsx client:idle      →  Widget WhatsApp flottant
.tsx client:load      →  Modale service (écoute hashchange dès le premier rendu)

La majorité de la page d’accueil n’envoie aucun JavaScript. Les sections interactives ne se chargent qu’à l’entrée dans le viewport, ce qui garde un Time to Interactive serré sur mobile.

Portfolio & Lecteur Now-Playing

La section portfolio s’alimente d’une collection de contenu — un fichier Markdown par morceau, trié par un champ sortOrder en frontmatter. L’îlot React gère le filtre par genre, la simulation de lecture et une barre sticky qui suit l’utilisateur dans le défilement.

Un script Node (npm run sync:music) récupère les URL de prévisualisation Spotify dans le frontmatter des Markdown, pour que le lecteur diffuse du vrai audio sans appel API au runtime.

Services & Tarification

Les descriptions de services vivent dans src/data/services.ts plutôt que dans les fichiers JSON i18n — il s’agit de prose longue, fortement liée à l’identité de chaque service, ce qui simplifie l’édition par locale sans polluer les chaînes UI. Chaque service ouvre une modale routée par hash d’URL (#service/<key>), donc les liens profonds survivent à un reload.

Agenda de Réservation

Un calendrier hydraté côté React permet de choisir une date, une durée (1h / 2h / 4h / journée) et un créneau horaire. Les réservations se synchronisent avec l’agenda du studio — le visiteur confirme la session en trois clics, sans quitter la page d’accueil.

i18n & SEO

Trois locales (fr, en, nl) avec prefixDefaultLocale: true — chaque page vit sous son préfixe de langue et la racine redirige vers /fr/. Le layout émet l’URL canonique, les alternates hreflang dont x-default, et un bloc JSON-LD MusicRecordingStudio. L’intégration sitemap génère automatiquement un sitemap par locale pour fr-BE, en-BE et nl-BE.

Hébergement

Le site se build en fichiers statiques et part sur Netlify à chaque push sur main. Pas de backend, pas de base de données, pas d’edge functions — le calendrier se branche sur le système de réservation existant du studio et le formulaire de contact passe par un endpoint d’email transactionnel.