L'Espadon

Minisite statique Restaurant du Ritz à Paris, l'Espadon intégré pour l'agence Puppets.

Statique dans le sens : sans dev back mais côté front, ma partie, il n'est pas statique du tout ! Je me suis bien régalé avec le plugin ScrollTrigger de Green Sock qui permet de bien contrôler les animations de parallax.

Bornes interactives

Sous la direction artistique de Xavier Courteix, intégration de 8 bornes interactives en 2 langues pour le musée Climatographe de l'observatoire du mont Aigoual.
Toutes les bornes ont été développées en HTML, CSS avec une très forte dose de Javascript vanilla.
Diaporama d'attente qui se déclenche au bout de 5 minutes d'inactivité.
Deux langues (français / anglais).
Petit exécutable qui lance Chrome en full-screen.

Johanna Schipper

Petit site Wordpress de présentation du travail de Johanna Schipper, autrice de bande dessinée, chercheuse et amie !

Développement d'un thème spécifique à partir d'une base blankSlate. Utilisation poussée du plugin ACF Pro et des post_type. Production d'une petite documentation pour prise en main de l'interface d'administration.

Sodexo Hospitality

Pour Puppets Developement, intégration de templates responsives.
Animations et interactivité Javascript Vanilla et CSS3.
A noter, entre autres, la détection javascript lorsqu'un élément sticky atteint sa position "stuck" pour en modifier l'aspect.

La Boîte Immo

Pour l'agence Tuesday, intégration d'une vingtaine de modules responsives sous Drupal avec utilisation de TWIG.
Animations et interactivité Javascript Vanilla et CSS3.
A noter, entre autres, les interactions entre la map Leaflet et la liste des agences HTML.

Site récompensé par les Awwwards

Systonic

L'agence Systonic, Bordeaux, pleinement satisfaite de mon travail léché pour leurs clients au fil des ans, a fait appel à moi pour intégrer les écrans de leur nouveau site.
Intégration "modulaire", animations et transitions en CSS3 et javascript Vanilla.
Le site est très beau, grâce à Patrice Curci le D.A.
Je suis personnellement bien content de ma petite animation en pure CSS sur les halos sous les visuels des entrées des pages "Hébergement". Je le signale car l'effet est très discret mais c'est ce qui à mes yeux le rend notable !

Le Lucernaire

En collaboration avec l'agence Puppets, Paris et leur nouvelle structure Puppets Développement qui s'est chargée du dev back WordPress, intégration des templates responsives.

Animations et transitions en CSS3 et javascript Vanilla.
Intégration "modulaire" pour utilisation des blocs Gutemberg WordPress via le plugin ACF Pro.

La Meringaie

En collaboration avec l'agence Puppets, Paris et OHweb qui s'est chargé du dev back Prestashop, intégration des templates responsives.

Animations et transitions en CSS3 et javascript Vanilla.
Intégration "modulaire" pour permettre au développeur de faire des blocs Elementor.
Intervenir dans ces modules Elementors pour calages m'a permis de bien appréhender la structure et les fondamentaux de Prestashop.

Yachts de Paris & Don‑Juan II

En collaboration avec l'agence Puppets, Paris et Samuel Laulhau qui s'est chargé du dev back Drupal, intégration des templates responsives.

Animations et transitions en CSS3 et javascript Vanilla.
Intégration "modulaire" pour permettre au client de placer chaque module n'importe où dans le site.

GIP Littoral

En collaboration avec l'agence Systonic, intégration des templates responsives statiques dynamisés sous Drupal par Systonic.

Animations et transitions en CSS3 et javascript Vanilla.
Utilisation de la bibliothèque Leaflet pour les cartes géographiques.
Intégration "modulaire" pour permettre à Systonic de placer chaque module n'importe où dans le site.

Afin de faciliter la dynamisation du site, j'ai produit une page de présentation/explication de chaque module.

imop

En collaboration avec Samuel Laulhau qui s'est chargé du dev back Next, intégration des templates responsives.

APAJH33

En collaboration avec l'agence Systonic, intégration des templates responsives statiques dynamisés sous Drupal par Systonic.

Animations et transitions en CSS3 et javascript jQuery.
Parallax perso, utilisation de la bibliothèque Leaflet pour la carte géographique.

Sentelis

En collaboration avec l'agence Atypic, intégration des templates responsives statiques.

Utilisation poussée du plugin fullpage.js avec des chargements AJAX.
Utilisation de mon plugin personnel pour le parallax.
Animations et transitions en CSS3 et javascript vanilla.

Sentelis a été racheté par Accenture qui a remplacé notre beau site par le leur (qui est beaucoup moins bien) alors le lien pointe vers ma version statique.

La Croix

Production de templates responsives HTML5/CSS3/JS pour les résultats des élections européennes 2019.

Autocompletion du menu de recherche : Utilisation de la balise datalist pour les navigateurs modernes qui la comprennent. Pour les autres (Safari en particulier), un petit Javascript récupère les mots contenus dans la balise datalist et simule le même fonctionnement.

Modules de présentation de listes avec navigation horizontale.

Affichage dynamique des résultats en pure CSS.

FIFA

Création et intégration de deux e-mails responsives insérés dans la plateforme de gestion d'invitations développée par TeamResa.
Gestion des images de fonds compatible Outlook.
Tests compatibilité mailers sous Litmus.

Kea-Euclyd

Minisite responsive présentant un livre blanc sur la digitalisation des ETI, L'Odyssée du dirigeant.

Graphisme du site en adaptant la créa du Livre Blanc PDF.

Intégration HTML5, CSS3, Javascript vanilla avec une petite touche parallax.

Includes et enregistrement des personnes qui téléchargent le PDF en PHP.

L'Express

Création et production de modules multimédias.

Utilisation de scrollama.js (je savais bien que cette veille servirait un jour !).

Javascript vanilla à haute dose, SCSS, responsive, optimisation medias aux petits oignons... (vidéos et visuels plein-pot)

Liberation.fr

Création et production d'une newsletter "à la main" pour le service abonnements.

Tests effectués avec Litmus et SmartFocus (l'appli utilisée par liberation.fr pour envoyer ses newsletters).

La Croix.fr

Création et production de deux newsletters avec Foundation For Emails.

Tests effectués avec Litmus..

Liberation.fr

Production d'une newsletter "à la main".
Police Libé embarquée.
Même en utilisant simultanément les méthodes fluid-width, fab-four et breakpoints, certaines configs ne respectent pas le passage de deux à une colonne (en particulier gMailApp et outlookApp Android/iOs). Le client a préféré passer finalement sur une seule colonne, j'ai donc adapté la créa initiale.
Tests effectués avec Litmus et SmartFocus (l'appli utilisée par liberation.fr pour envoyer ses newsletters).

La Croix.fr

Page de présentation de la Rédaction du journal La Croix, argumentaire de vente.

Animation d'apparition avec intersection-observer javascript.

Liberation.fr

Campagne epub "abonnement à 6€" :
- Création et production de bannières gif-animé ;
- Création et production de visuels fixes pour carousels Facebook ;
- Création et production d'un bandeau pour la page de présentation de l'offre.

* Désactivez addblock pour voir les gifs animés sous Chrome...

Les Carmes

Production de templates responsive statiques dynamisés par Systonic sous Drupal pour le site de la salle de spectacles Les Carmes à Langon.
Pour faciliter la dynamisation, séparation des sections en modules indépendants (includes PHP et SCSS).
Diaporamas avec slick.js + gestion en css des positions et couleurs des titres des slides, mosaïques en pur css flex.
Responsive, SASS, JS, CSS3...

Unknowns.fr

Intégration de 7 templates statiques composés de 35 modules indépendants (includes PHP, includes SCSS) pour le nouveau joli site 100% responsive des amis Unknowns.
Carousels Flickity, fixed-nav, mosaïques, filtres, ...

Code HTML/CSS/Javascript optimisé aux petits oignons, comme il se doit !

Kéa-Euclyd

Dévelopement et intégration d'un thème Wordpress personnalisé pour Kéa-Euclyd.
Utilisation de Wordpress comme un CMS et non comme un générateur de blog.
Polylang pour le multilangue, Yoast pour le SEO, Advanced Custom Fields PRO pour création des Custom Fields spécifiques.

Bannières AANA

Pour l'agence Inoxia, intégration de 28 bannières de pub HTML5 pour l'AANA.

Animation en javascript vanilla totalement cross-browsers modernes (addEventListener, transitionEvent, animationEvent, classList.add et classList.remove) et CSS3 (transition et @keyframes).
Optimisation des visuels aux petits oignons…

Newsletters La Croix

Intégration de 7 templates statiques de Newsletters responsives livrés à Bayardweb pour dynamisation.

Utilisation du framework Foundation-emails à la demande du client, pour assurer une compatibilité maximale.

Fédération Française des Hopitaux

Pour l'agence Puppets, Paris, intégration des templates statiques livrés au client pour dynamisation.
Responsive, SASS, jQuery, formulaire complexe avec, en particulier, la mise en place d'une zone d'upload de fichiers multiples et la saisie d'un budget mis à jour en temps réel en javascript... Site compatible jusqu'à IE7 !

Timeline animée

Pour l'agence Systonic, Bordeaux, production d'un module timeline animé.

Responsive, SASS, animation Javascript jQuery/CSS3...

Les Girondins de Bordeaux

Pour l'agence Systonic, Bordeaux, production de templates HTML5 statiques que les développeurs Systonic ont dynamisés sous Drupal.
Responsive, SASS, parallax, Flex...

Le Bon Marché

Pour l'agence Puppets, Paris, intégration d'un minisite événementiel Le Bon Marché.
Responsive, parallax, fixed-nav, vidéo HTML5, SASS...

Havas Worldwide Paris

Réalisation de prototypes HTML5/CSS3/JS pour appels d'offres.
Parallax personnel, effets rollovers et click variés, isotope.js et autres animations...

Hôtels Mercure

Intégration HTML5, CSS3 et jQuery
Jeu en 4 étapes.
Responsive design, vidéos youtube en pourcentage, décompte jour, heures, minutes et secondes, carte interactive, affichage complexe de données en provenance de Tweeter, Facebook, Pinterest et instagram récupérées par appel AJAX (jsonp)...