9poweredbylilia

C’était un projet de portfolio réalisé pour une amie, dont la demande principale était d’avoir un site 100 % personnalisable. Mon rôle a donc été de trouver une solution technique permettant de lui donner un maximum de liberté dans la gestion de son contenu, tout en gardant une expérience fluide et simple d’utilisation.

La première étape du projet a consisté en une recherche approfondie des CMS headless les plus adaptés à son besoin. J’ai comparé plusieurs outils comme Sanity, Directus et Strapi, en évaluant leurs fonctionnalités, leur flexibilité et leur courbe d’apprentissage. Après analyse, nous avons choisi Sanity, car il se distingue par sa simplicité, son interface intuitive et la gestion automatique d’un CDN intégré.

J’ai ensuite développé de nombreux composants personnalisés pour Sanity, afin que mon amie dispose de tous les blocs principaux nécessaires (textes, images, galeries, sections spéciales, etc.). Elle pouvait ainsi assembler librement les éléments et construire son portfolio sur mesure sans avoir besoin de coder.

Le storefront a été développé avec Nuxt.js, tandis que Sanity assurait la partie back-office.

Ce projet m’a permis de travailler pour la première fois avec un CMS headless, d’explorer un nouvel outil, mais aussi de perfectionner mes compétences dans la gestion des relations entre entités distinctes (contenu ↔ affichage), une problématique clé dans ce type d’architecture.

Exemple de composant NuxtSanity

<script lang="ts" setup>
import type { Post } from '~/types/Post'
import { urlFor } from '~/utils'

defineProps<{ post: Post }>()
</script>

<template>
  <NuxtLink class="rounded-xl flex flex-col" :to="`/post/${post.slug.current}`">
    <NuxtImg
      v-if="post.mainImage"
      :src="urlFor(post.mainImage).width(702).height(400).url()"
      width="702"
      height="400"
      alt="Image de la carte"
    />
    <h3 class="text-xl">{{ post.title }}</h3>
  </NuxtLink>
</template>

9poweredbylilia ​

9poweredbylilia