Étude de cas · 2026 · Site d'artiste

Un site qui s'efface
devant les œuvres.

Refonte complète du site de Julie Chevassus, peintre et graveuse. Ses peintures classées par année, ses gravures, ses expositions, la presse, un formulaire de contact, et un back-office pour publier seule, sans développeur.

Visiter le site ↗ Voir la galerie
RôleSolo · Design + Dev
PériodeAoût 2026
ClientJulie Chevassus, artiste
Statut● En ligne
juliechevassus.com
Page d'accueil : vue d'exposition, œuvres au mur
Peintures●Gravures●Expositions●Presse●À propos●Contact●Back-office● Peintures●Gravures●Expositions●Presse●À propos●Contact●Back-office●
01 · Le brief

La qualité d'affichage passe avant tout.

Un site d'artiste n'a qu'un travail : montrer les œuvres comme elles sont. Chaque décision de design et de code découle de cette règle.

RÈGLE · 01

Aucune œuvre recadrée

Une grille uniforme coupe les toiles. Chaque œuvre garde sa proportion exacte, du petit format carré au diptyque.

RÈGLE · 02

Rien ne bouge sous le regard

Pas de zoom au survol des vignettes, pas d'animation. La planche entière doit pouvoir se parcourir des yeux sans que les images sautent.

RÈGLE · 03

L'artiste publie seule

Ajouter une toile, corriger un cartel, retirer une pièce vendue : sans ouvrir un éditeur de code, sans appeler personne.

02 · La galerie

Des rangées justifiées, pas une grille.

Chaque rangée remplit la largeur, les œuvres gardent leur proportion, aucune n'est recadrée. Le calcul est celui des planches de photographes, écrit à la main.

juliechevassus.com/peintures
La galerie des peintures, classée par année, en rangées justifiées
Survole pour faire défiler · 2026 → 2022
Algorithme

Une hauteur par rangée

Les œuvres sont posées à la suite à une hauteur cible. Quand la rangée dépasse la largeur, elle est refermée et sa hauteur ajustée pour tomber juste. Un diptyque de 20×40 et un petit carré cohabitent sans être coupés.

3:2
3:4
1:1
7:5
diptyque
4:5
1:1
mobile · 2 max
mobile · 2 max
Mobile

Deux œuvres par rangée, maximum

Au-delà, les vignettes deviennent illisibles sur un téléphone. La règle est dans le calcul, pas dans une feuille de style à part.

Par année

Une page par année, un menu déroulant

De 2022 à 2026, chaque année a son adresse. Les anciennes adresses du site précédent sont redirigées en permanent, rien ne casse dans Google.

03 · La visionneuse

Vue en grand, sur un mur blanc.

Un clic ouvre l'œuvre seule, avec une marge autour et un cartel dessous : titre, année, technique, dimensions. Flèches au clic, glissement au doigt, Échap pour fermer.

juliechevassus.com/peintures · vue en grand
La visionneuse : un diptyque sur fond blanc avec son cartel
DÉTAIL · 01

La loupe suit le curseur

La souris entre sur l'œuvre, la matière grossit sous le pointeur. Elle sort, tout revient. Pas de molette, pas de clic. Le doigt est ignoré, sinon l'œuvre resterait grossie après un glissement.

DÉTAIL · 02

La pleine résolution, seulement si on regarde

Au survol, le navigateur va chercher le fichier en grand pendant qu'il continue d'afficher celui déjà décodé. Rien ne clignote, et la bande passante n'est payée que si quelqu'un regarde vraiment.

DÉTAIL · 03

Les voisines sont connues

La visionneuse est tenue par la liste complète, pas par la vignette : seule la liste sait quelle est l'œuvre suivante. Une vignette ne fait que signaler qu'on l'a cliquée.

Lightbox.tsx · la loupe, sans état React
function onMove(e: PointerEvent) { if (e.pointerType !== 'mouse') return; // le doigt ne grossit pas const r = img.getBoundingClientRect(); const x = ((e.clientX - r.left) / r.width) * 100; const y = ((e.clientY - r.top) / r.height) * 100; img.style.transformOrigin = `${x}% ${y}%`; // posé en direct, pas de re-rendu img.sizes = '240vw'; // la pleine résolution arrive derrière }
04 · Le back-office

Publier une toile un dimanche soir.

Une page d'administration protégée par mot de passe. Les fichiers envoyés partent sur un stockage objet, jamais dans le code du site.

ADMIN

Ajouter, corriger, retirer

Une œuvre, son cartel, son année. Retirer une pièce vendue la cache du site sans la supprimer.

IMAGES

Plusieurs vues par œuvre

Une image principale et des détails légendés. Dans la visionneuse, un détail affiche « Détail · titre, année ».

STOCKAGE

Cloudflare R2

Les fichiers de l'admin vont sur R2. Le dépôt Git ne grossit pas, et le site se redéploie sans toucher aux images.

CONTACT

Formulaire sans serveur

Le formulaire de contact passe par Web3Forms. Aucun back-end à maintenir pour recevoir un message.

/expositions
Page des vues d'exposition
/gravures
Page des gravures
/a-propos
Page à propos
8pages, dont une par année d'œuvres
0œuvre recadrée, sur ordinateur comme sur téléphone
2œuvres par rangée maximum sur mobile
1artiste autonome pour publier
05 · Stack technique

Moderne, et sans framework CSS.

Le CSS est écrit à la main : un site d'artiste n'a pas besoin d'un système de composants, il a besoin de blanc et de précision.

FRONT
Next.js 14 · App Router
React 18, images optimisées, srcset par écran
CSS à la main
Un seul fichier de styles, pas de framework
TypeScript
Le calcul des rangées, la visionneuse, l'admin
DONNÉES
Catalogue JSON
Les œuvres d'origine, versionnées avec le site
Cloudflare R2
Ce que l'artiste ajoute depuis l'admin
Web3Forms
Le formulaire de contact
HÉBERGEMENT
Vercel
Déploiement à chaque commit, variables chiffrées
Redirections permanentes
Les anciennes adresses continuent de mener au bon endroit
GitHub
Le code appartient à l'artiste