Global redesign of Maeva Cinquin's website 🌐
A global redesign project for the showcase website of Maeva Cinquin, my little sister! The latter had been statically designed in HTML5 / CSS3 / Js Vanilla , which didn't cause too many problems during the first two years of the website's life... 🎨
Except that I had to update the photos by having to code them directly in static. Then the design wasn't necessarily very beautiful, nor easily understandable... In short it was the first site I'd made at the very beginning of my studies. 📚
So I started by doing an SEO study of the subject, preparing everything that needed to be done in her website, Then I prepared a mock-up, to have this validated by Maeva. 📈
After making the mock-up, I wasn't sure where to start, I knew I wanted something that looked exactly like the mock-up, and many of the effects weren't feasible with a simple WordPress theme [ maybe I'm wrong? ]. 🖌️
Even so, I set out to develop a static "prototype" version in TailwindCSS, and I've learned to create a development environment with automatic reloads and remote access, so that I can show Maeva live updates. 🚀
After validating all this, and creating the static version, I needed to make it dynamic, so I looked at a wordpress, and looked at what possibilities I had to make a static project, a dynamic one. 💻
With a maximum of manageable elements, and the impossibility of messing around with the website. ( what bothered me with a "real" wordpress theme [in architécture gutenberg], was the weight of the existing themes, and the impossibility of doing what you want. and the lack of optimization of the latter ) → usually, we quickly reach loads close to 5 seconds and 5MB, for a classic landing page with a classic theme for wordpress... ⏱️
Here I wanted to exceed 1MB and 1.5 seconds, Maeva lives in Haute-Savoie, connections are very slow, something light was absolutely necessary. 💨
After a bit of research I settled on "ACF", which does what I wanted, so I did a lot of research and developed what suited me. 📖
After a relatively classic development, I was missing 2 things: the contact page, how to make a contact form efficient, secure, and insensitive to bots [ and especially with the right design ], the optimization of all the elements of my pages, I absolutely wanted to have a 100/100 on Lighthouse. 🎯
The first time, I looked around, but nothing suited me: paid, not flexible, too heavy, in short, no way that allowed me to do what I wanted. So I did something from scratch, using the google api for mails, and put a lot of security, and finally a Captcha ... 📧
In the end, I ended up with a landing page at 100/100 on 🎉 lighthouse 🎉, a page weighing barely 1MB, and loading time under 0.65s. Great SEO, and all completely manageable. 💯
