Hero snake
Un SVG animé qui transforme la première impression en geste de marque.
/animations/hero-snake.js
-- Privacy-friendly analytics by Plausible -->
Nous contacter
Identité · Direction artistique · Développement
Nous voulions un site qui ne se contente pas de raconter ce que nous faisons. Il devait le démontrer : une direction forte, du code écrit sur mesure et des interactions qui font partie de l’idée.
Le point de départ
Nous ne voulions ni d’un portfolio interchangeable, ni d’un empilement d’effets gratuits. Le site devait avoir une personnalité propre tout en restant clair, rapide à faire évoluer et suffisamment souple pour accueillir des projets très différents.
Le parti pris a donc été simple : ne jamais séparer artificiellement design et développement. Ici, le mouvement, la structure, les transitions et les composants sont dessinés autant par le code que par la maquette.
Identité Fullcode
Climate Crisis donne le ton aux grands messages. 42dot Sans prend le relais pour les contenus et l’interface. La palette crée le contraste entre énergie, chaleur et technicité.
Une typographie pensée pour les contenus, les interfaces et tout ce qui doit rester net quand le reste prend de la place.
Notre terrain de jeu
Déplacez le curseur. Ce n’est pas un choix entre deux métiers : c’est précisément leur rencontre qui construit Fullcode.
50 % créatif · 50 % technique
Le développement fait partie du design
Certaines idées n’existent que parce qu’elles ont été pensées en même temps que leur implémentation. Le serpent du hero, les transitions, le catalogue feuilletable ou les scènes animées ne sont pas des couches ajoutées après coup.
Un SVG animé qui transforme la première impression en geste de marque.
/animations/hero-snake.js
Une séquence narrative qui fait du scroll un élément du récit.
/animations/dive-sequence.js
Navigation clavier, swipe et pages animées dans un composant réutilisable.
/components/catalogue.js
SVG injectés, animations au scroll et comportements isolés par page.
/animations/…
Sous le capot
Les composants globaux, les animations et les points d’entrée de page sont séparés. Chaque projet peut avoir son propre comportement sans transformer le site entier en bloc monolithique.
assets/js/
├── core/
│ └── site-core.js
│
├── components/
│ ├── interface.js
│ ├── catalogue.js
│ └── contact-form.js
│
├── animations/
│ ├── hero-snake.js
│ ├── dive-sequence.js
│ ├── sensipark-scroll-snake.js
│ └── tennis-parallax.js
│
└── pages/
├── contact.js
├── dieco.js
├── padel-barrio.js
└── fullcode.js
Le site comme système
Header, navigation, catalogue, formulaires et comportements communs vivent dans des modules réutilisables.
Chaque page importe uniquement ce dont elle a besoin, ce qui limite les dépendances et garde l’évolution du site maîtrisable.
Les CTA transmettent le contexte jusqu’au formulaire pour éviter de demander à l’utilisateur de recommencer son histoire.
URLs propres, canonical, données structurées, sitemap, contenus hiérarchisés et balisage sémantique font partie du projet.
Navigation clavier, états de focus, textes alternatifs et gestion du mouvement sont intégrés au système plutôt qu’ajoutés à la fin.
La structure sert les idées. Elle n’est jamais une excuse pour faire entrer tous les projets dans le même moule.
Au fond
Ce site est notre propre terrain d’essai : un endroit pour tester une idée, écrire le code qui lui manque et garder suffisamment de structure pour pouvoir recommencer autrement au projet suivant.
Identité, expérience web, interface, outil ou projet hybride : construisons quelque chose qui mérite une réponse sur mesure.
Construire quelque chose de singulier