LR
← Back to projects
Jules Bulant· 2026julesbulant.fr(new tab)

Artist Portfolio — Nuxt 3 + Sanity CMS.

Modern artist portfolio with an interactive gallery, full-screen modal viewer, mobile touch navigation, and a headless CMS to manage the artworks.

nuxt 3sanity cmstypescriptcssreact 19
Artist Portfolio — Nuxt 3 + Sanity CMS

Challenges

  1. 01.Create an immersive gallery experience with smooth navigation between artworks
  2. 02.Manage a monorepo architecture (public site + private CMS studio)
  3. 03.Allow simple management of artworks and exhibitions without technical skills
  4. 04.Ensure optimal touch navigation on mobile (swipe between artworks)
  5. 05.Optimize loading of high-resolution images (artworks)

Solutions

  1. 01.Full-screen modal viewer with keyboard/swipe navigation and preloading
  2. 02.Organized monorepo: site/ (Nuxt SSR) + studio/ (Sanity CMS)
  3. 03.Typed Sanity schemas: Paintings, Exhibitions, Profile with multiple images
  4. 04.Native mobile swipe with gesture detection and smooth animations
  5. 05.Nuxt SSR + lazy loading + optimized Sanity images (hotspot, crop)
Modal viewer with navigation and mobile swipetypescript
1// Composables/useModal.ts - Gestion du modal avec navigation
2 const currentIndex = ref(0);
3 const paintings = ref<Painting[]>([]);
4
5 function openModal(index: number) {
6 currentIndex.value = index;
7 document.body.style.overflow = 'hidden';
8
9 // Précharger images adjacentes
10 preloadAdjacentImages(index);
11 }
12
13 function navigate(direction: 'prev' | 'next') {
14 if (direction === 'prev' && currentIndex.value > 0) {
15 currentIndex.value--;
16 } else if (direction === 'next' && currentIndex.value < paintings.value.length - 1) {
17 currentIndex.value++;
18 }
19 preloadAdjacentImages(currentIndex.value);
20 }
21
22 // Support navigation clavier
23 onMounted(() => {
24 window.addEventListener('keydown', (e) => {
25 if (e.key === 'ArrowLeft') navigate('prev');
26 if (e.key === 'ArrowRight') navigate('next');
27 if (e.key === 'Escape') closeModal();
28 });
29 });
→ NextOther projects
Artist Portfolio — Nuxt 3 + Sanity CMS | Louis Rotellini