Topos, Randos, Photos
Topos randos photos est un site web static développée sous VueJS et sa surcouche permettant le server-side rendering, Nuxt. Au delà du besoin personnel, ce projet m’a permis de découvrir et de me former au framework Nuxt.
WordPress Headless et Nuxt
Les données proviennent d’un WordPress headless avec son API GraphQL (avec le plugin WPGraphQL).
Le front est construit avec VueJS. Le framework Nuxt et son server engine Nitro génèrent ensuite le site statique. les pages sont ensuite déployées sur Vercel.
Design et performances
J’ai imaginé le site autour de deux concepts : un design sobre mettant en avant mes photographies, et l’optimisation des performances.
Le design sombre avec du grain permet d’ajouter un effet cinéma au site, les photos sont mises en avant grâce au contraste avec le fond. La génération du site en statique ainsi que l’utilisation de Nuxt Image pour adapter la taille des images à la taille de l’écran de l’utilisateur a permis d’obtenir de très bon score Pagespeed (100/100 sur desktop, 95/100 sur mobile) sur les pages d’articles (les plus fournies).
