Nicolas Marand

Collaboration en sous-traitance avec l'agence Otelico depuis 2016 : intégration et animation de plus de 120 sites hôteliers sur leur plateforme propriétaire. Dix ans de travail en conditions réelles d'agence, avec les contraintes de délais, de volumétrie et de rigueur technique que cela implique.

Missions sur chaque projet : webdesign (conception de la maquette page d'accueil sur Illustrator), intégration HTML/SCSS sur la plateforme propriétaire, puis animation GSAP complète, du scroll-triggered simple aux séquences chorégraphiées multi-éléments.

Exemple représentatif sur hotel-aloe.com : blocs image arrivant successivement avec ease bounce, fade-in de textes en séquence, section "Quick access" avec scale-down et apparition d'un cadre superposé, grande section pinned scroll-triggered avec changement de fond synchronisé à l'entrée des titres dans le viewport, parallaxe différentiel image/texte, transitions vers fond sombre synchronisées avec les changements de section. Système d'animation cohérent appliqué à l'ensemble des titres, sous-titres et liens de chaque page.

Compétences mobilisées : intégration front-end, GSAP ScrollTrigger, responsive design, optimisation performance, sous-traitance agence sur la durée.

Workflow { SCSS/BEM ; RiotJS ; Gulp ; PHP }

Dix ans de collaboration régulière avec la même agence : preuve concrète de fiabilité, de capacité à s'intégrer dans un workflow existant et à livrer des projets front-end animés dans les délais, en volume.

Exemples :

hotel-aloe.com (Hôtel Les Herbiers, Vendée)

aucomtedornon.com (Hôtel Gradignan, Bordeaux)

Conception et développement d'une offre commerciale complète pour animer des sites WordPress existants sans refonte : le plugin "Réveille ton site", développé sur mesure avec WordPress et ACF (Advanced Custom Fields).

Le plugin permet d'ajouter des animations web professionnelles GSAP sur n'importe quel site WordPress existant, sans modifier le thème en place. Fonctionnalités intégrées : page de chargement animée avec logo, animations d'entrée au scroll sur les textes, images et boutons, micro-interactions au survol, optimisation mobile systématique sur tous les éléments animés.

L'offre est structurée en 3 formules tarifaires graduées, du réveil en douceur (3 animations sur la page d'accueil) à la transformation complète multi-pages (9 animations). Chaque formule est documentée et livrée clé en main, avec recette et ajustements inclus.

La landing page reveilletonsite.re, construite sur Astro v5, sert simultanément de démonstration technique et de vitrine commerciale. Elle intègre une animation storytelling sur le hero (lever de soleil, nuages animés, séquence d'entrée chorégraphiée), un scroll horizontal et une bibliothèque de démos GSAP publique classée par catégorie { animations de texte ; boutons ; micro-interactions ; effets scroll }. Zéro framework CSS, intégration 100% custom.

Ce projet couvre l'ensemble de la chaîne : conception de l'offre, développement du plugin WordPress, webdesign et intégration de la landing page, rédaction commerciale. Un terrain d'expérimentation GSAP qui alimente directement les projets client.

Stack { GSAP ScrollTrigger ; WordPress ; ACF ; Astro v5 ; HTML/CSS vanilla ; JavaScript }

reveilletonsite.re

Conception et développement complet de freelances.re, annuaire des freelances réunionnais, en bénévole pour le collectif Bann Coworkers dont je suis membre fondateur. Projet full-stack de bout en bout : maquette Figma, développement front-end Astro, animations GSAP, architecture back-office et automatisations.

Parti pris technique : zéro base de données traditionnelle. Notion utilisé comme back-office : les freelances s'inscrivent via un formulaire Fillout, les données alimentent automatiquement la base Notion, et un script de rebuild Astro se déclenche automatiquement à chaque modification — le site est toujours à jour sans intervention manuelle. Optimisation des images à la volée : redimensionnement automatique, conversion WebP, mise en cache.

Ce projet démontre une capacité à concevoir et implémenter des workflows automatisés complets, sans infrastructure serveur complexe : une approche JAMstack légère, performante et maintenable. Utile pour des agences qui cherchent à proposer à leurs clients des solutions économiques à maintenir.

Côté front-end : intégration Astro v5 (SSG), animations GSAP sur les éléments de l'annuaire, design responsive, performances optimisées (site statique).

Stack { Astro v5 ; GSAP ; Figma ; Notion API ; Fillout ; JavaScript ; HTML/CSS vanilla }

Compétences mobilisées : développement front-end, intégration web, animation JavaScript GSAP, automatisation no-code et code, architecture JAMstack, optimisation performance web.

freelances.re