Architecture · chantiers · Pages réalisations
Atlas Arch
Chantiers avant / après
Scroll pour découvrir ↓
01 · Architecture · chantiers
Avant / après, sous le doigt
Chantiers avant / après. Direction fictive — même niveau de craft que les missions clients sous NDA.
- 01
Slider
Glisse pour révéler le chantier terminé.
- 02
Preuve
Le client voit la transformation, pas un discours.
- 03
Agence
Idéal pour les pages réalisations denses.
01b · Technique
Fiche technique
Stack, mise en ligne et mon rôle sur ce build — pour recruteurs et tech leads.
- Technologies
- Next.js
- TypeScript
- React
- Tailwind CSS
- Librairies & outils
- Framer Motion
- next/image
- Déploiement
Démo portfolio — rendu front, assets optimisés
- Rôle
Direction artistique · intégration · motion
- Conditions
Pièce studio — direction visuelle & craft UI
02 · Dans le produit
Un scroll, un écran
Chaque section se cale à l’écran — continue après le dernier pour revenir au récit.
Avant / après, sous le doigt
Architecture · chantiers
Slider
Glisse pour révéler le chantier terminé.
Glisse le chantier
Révélateur démo · images fictives.
“Le slider remplace six photos mal cadrées.”
Retour au récit
Tu as quitté les écrans démo — ensuite : tester, puis les notes de craft.
03 · Agences & maîtres d’ouvrage
Le chantier se raconte sans PowerPoint
“Le slider remplace six photos mal cadrées.”
“En réunion, tout le monde comprend l’avant/après.”
04 · Comparer
Glisse le chantier
Révélateur démo · images fictives.
- →Hero + sections sous la fold (pas juste une accroche)
- →Hiérarchie visuelle et CTA principal
- →Densité d’info vs lisibilité
Démo locale — aucune donnée n’est envoyée.
05 · Même famille
D’autres directions du même type — pour comparer densités et ambiances.
06 · Ce qu’on regarde
- 01Hero + sections sous la fold (pas juste une accroche)
- 02Hiérarchie visuelle et CTA principal
- 03Densité d’info vs lisibilité
- 04États interactifs (hover, sélection, feedback)