Refonte globale du site internet de Maeva Cinquin 🌐
Un projet de refonte globale du site internet, vitrine, de Maeva Cinquin, ma petite sœur ! En effet ce dernier avait été fait de manière statique en HTML5 / CSS3 / Js Vanilla , ce qui ne causait pas trop de problèmes lors des deux premières années de vie du site internet... 🎨
Sauf que je devais mettre les photos à jour en passant par le fait de devoir coder directement l'ajout de ces dernières en statique. Puis le design n'était pas forcément très beau, ni facilement compréhensible... Bref c'était le premier site que j'avais fait au tout début de mes études. 📚
J'ai donc commencé par faire une étude SEO du sujet, préparer tout ce qu'il y avait besoins de faire dans son site internet, Puis j'ai préparé une maquette, pour faire valider cette dernière à Maeva. 📈
Après avoir fait la maquette, je ne savais pas trop par où partir, je savais que je voulais quelque chose qui ressemblait exactement à la maquette, et bon nombre d'effets n'étaient pas faisables avec un simple thème WordPress [ peut être je me trompe ? ]. 🖌️
Quand bien même, je suis parti sur le développement d'une version statique "prototype" en TailwindCSS, j'ai d'ailleurs appris à me faire un environnement de développement avec des rechargements automatiques et un accès distant, afin d'avoir la possibilité de montrer en direct les évolutions à Maeva. 🚀
Après validation de tout cela, et la création de la version statique, j'avais besoin de rendre ça dynamique, je me suis donc penché sur un wordpress, et j'ai regardé quelles étaient les possibilités que j'avais pour faire d'un projet statique, un projet dynamique. 💻
Avec un maximum d'éléments administrable, et l'impossibilité de faire de bêtises dans le site internet. ( ce qui me dérangeait avec un "vrai" thème wordpress [en architécture gutenberg], c'est le poids des thèmes existants, et l'impossibilité de faire ce que l'on veut. et le manque d'optimisation de ces derniers ) → habituellement, on arrive vite à des chargements proches des 5 secondes et des 5MB, pour une landing page classique avec un thème classique pour wordpress... ⏱️
Ici je voulais dépasser les 1MB et la 1.5 seconde, Maeva habite en Haute-Savoie, les connexions sont très lentes, il fallait absolument quelque chose de léger. 💨
Après quelques recherches je me suis donc penché vers "ACF", qui permet de faire ce que je voulais, j'ai donc fait pas mal de recherche et développer ce qui me convenait. 📖
Après un développement relativement classique, il me manquait 2 choses : la page contact, comment faire un formulaire de contact efficace, sécurisé, et insensible aux bots [ et surtout avec le bon design ], l'optimisation de tous les éléments de mes pages, je voulais absolument avoir un 100/100 sur Lighthouse. 🎯
La première, j'ai cherché, mais rien ne me convenais, payant, pas flexible, trop lourd, bref, aucun moyen qui me permettait de faire ce que je voulais. J'ai donc fait quelque chose from scratch, utiliser l'api google pour les mails, et mis pas mal de sécurité, et enfin un Captcha ... 📧
Au final je me retrouve avec une Landing page à 100/100 sur 🎉 lighthouse 🎉, une page pesant à peine 1MB, et un chargement passant en dessous des 0.65s. Un super référencement, et le tout, complètement administrable. 💯
