La vitesse
Atelier Orbe
Cabinet d’architecture et de design d’intérieur haut de gamme. Quinze pages sur mesure livrées en 48 heures, sans template ni constructeur visuel.
Le contexte
Un cabinet d’architecture parisien fictif, dans le cadre d’une épreuve de 48 heures : un site vitrine haut de gamme, une maquette exhaustive desktop et mobile, un document de conception, et un formulaire qui répond vraiment. Aucune bibliothèque de composants, aucun thème acheté — la contrainte de départ était de tout écrire.
Les contraintes
- Écrire la totalité du HTML, du CSS et du JavaScript : aucun constructeur visuel, aucune dépendance.
- Tenir le niveau visuel « luxe » : deux polices, une palette verrouillée, beaucoup d’espaces négatifs.
- Livrer 15 pages, dont 6 fiches projet, en 48 heures, formulaire fonctionnel compris.
Ce que j’ai fait
- Un assembleur maison de 398 lignes qui compose les 15 pages à partir de fragments et intègre la feuille de style et le script dans chaque fichier.
- 3 100 lignes de CSS écrites à la main et 1 172 lignes de JavaScript en vanilla : diaporamas, révélations au défilement, menu mobile, navigation sans rechargement.
- Polices auto-hébergées en WOFF2, images en WebP et AVIF, vidéo d’ouverture de 30 secondes servie en deux versions (13,9 Mo en bureau, 7 Mo en mobile) avec poster pour supprimer le flash noir.
- Formulaire de contact relié à une API d’envoi, avec accusé de réception au visiteur.
- Déploiement sur serveur privé : Caddy, HTTPS, cache différencié entre HTML et médias.
Les résultats
| Lighthouse bureau | 100 / 100 / 100 / 100 |
|---|---|
| Lighthouse mobile | 88 en performance, 100 en accessibilité, bonnes pratiques et SEO |
| LCP bureau / mobile | 0,7 s / 3,8 s |
| Décalage de mise en page (CLS) | 0 |
| Pages publiques | 15, dont 6 fiches projet |
Le 88 en performance mobile est assumé et documenté : il vient du poids de la vidéo en résolution native. Une version compressée donnait 100 mais dégradait visiblement l’image.
À voir
Le site est en ligne : atelier-orbe.alexisld.fr
Huit secondes du film d’ouverture, la terrasse à l’heure bleue. C’est ce plan qui donne le ton du site : la lumière avant l’architecture.
