Contexte et Recherche
Ce projet consistait à reprendre et redévelopper le portfolio d’Anaïs Vernageau, initialement conçu sur Framer. Anaïs souhaitait migrer son site vers WordPress, afin de bénéficier d’une meilleure flexibilité, d’une gestion plus simple du contenu et d’un référencement naturel (SEO) optimisé.
Mon rôle a été de reconstruire entièrement le site sous WordPress, tout en améliorant l’accessibilité, la structure des pages et le SEO, ainsi qu’en respectant l’identité visuelle créée par Anaïs.
La recherche a commencé par une analyse complète de la version Framer existante : structure, lisibilité, accessibilité, hiérarchie des informations et optimisation SEO. J’ai identifié les points à améliorer, notamment certains blocs de texte, la taille de la typographie, les contrastes de couleurs et la mise en valeur des projets. Cette étape m’a permis de définir une direction claire pour la refonte WordPress : conserver l’univers graphique d’Anaïs, tout en rendant le site plus performant, plus accessible et mieux référencé.
Difficultés
La principale difficulté a été d’adapter une identité visuelle déjà existante à un environnement WordPress, tout en améliorant l’accessibilité sans dénaturer le design original. Il a également fallu intégrer plusieurs animations et fonctionnalités avancées, tout en garantissant de bonnes performances et un SEO optimisé.
Compétences transversales
Ce projet m’a permis de renforcer ma capacité à collaborer avec une designer graphique, à comprendre ses intentions artistiques et à les traduire techniquement avec WordPress. J’ai également développé des compétences en communication, en gestion de projet et en accompagnement, pour obtenir un site plus professionnel et plus performant.
Développement
Le site a été développé sous WordPress, en s’appuyant sur plusieurs extensions, afin d’améliorer les fonctionnalités, l’interface et le référencement. Kadence Blocks et Spectra ont été utilisées, pour la mise en page et les animations, tandis que WPForms Lite et Advanced Google reCAPTCHA assurent un formulaire de contact fonctionnel et sécurisé. D’autres extensions, comme Complianz, Animate on Scroll, Before After Image Comparison, reSmush.it, WPCode Lite et Yoast SEO, permettent de gérer les cookies, d’ajouter des effets visuels, d’optimiser les images, d’intégrer du codes personnalisés et d’améliorer le référencement naturel. Enfin, des ajustements ont été réalisés sur les textes, les tailles de police, les couleurs et les pages légales, afin d’améliorer l’accessibilité et de faciliter la prise en main du site.
document.addEventListener(« DOMContentLoaded », function() {
// Sélectionne toutes les sections empilées
document.querySelectorAll(‘.stack-section’).forEach((el, index) => {
el.setAttribute(‘data-aos’, ‘fade-up’);
el.setAttribute(‘data-aos-duration’, ‘800’);
el.setAttribute(‘data-aos-offset’, ‘200’);
el.setAttribute(‘data-aos-delay’, index * 100);
});
// Initialise AOS
AOS.init({
once: true,
easing: ‘ease-out’,
});
});
Migration Framer → WordPress
Reprise complète du site existant, amélioration de l’accessibilité et optimisation SEO.
Intégration d’animations avancées
Effets au scroll, comparaisons avant/après, transitions dynamiques, pour valoriser les projets.
Optimisation et sécurité
Gestion des cookies, reCAPTCHA, optimisation des images et amélioration du référencement naturel.
Conclusion et résultat final
Ce projet m’a permis de progresser dans la maîtrise de WordPress, d’intégrer des animations avancées et d’améliorer l’accessibilité d’un site existant. Il a également renforcé ma collaboration avec Anaïs, designer graphique avec qui je travaille régulièrement. Le portfolio final est plus flexible, mieux référencé, plus accessible et plus professionnel, tout en respectant l’identité visuelle originale.
