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

Challenges
- 01.Create an immersive gallery experience with smooth navigation between artworks
- 02.Manage a monorepo architecture (public site + private CMS studio)
- 03.Allow simple management of artworks and exhibitions without technical skills
- 04.Ensure optimal touch navigation on mobile (swipe between artworks)
- 05.Optimize loading of high-resolution images (artworks)
Solutions
- 01.Full-screen modal viewer with keyboard/swipe navigation and preloading
- 02.Organized monorepo: site/ (Nuxt SSR) + studio/ (Sanity CMS)
- 03.Typed Sanity schemas: Paintings, Exhibitions, Profile with multiple images
- 04.Native mobile swipe with gesture detection and smooth animations
- 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 navigation2 const currentIndex = ref(0);3 const paintings = ref<Painting[]>([]);45 function openModal(index: number) {6 currentIndex.value = index;7 document.body.style.overflow = 'hidden';89 // Précharger images adjacentes10 preloadAdjacentImages(index);11 }1213 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 }2122 // Support navigation clavier23 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