🖋️ Contexte : Noir Ink Tattoo est un site de démonstration réalisé pour le portfolio Krono, initialement conçu pour démarcher un studio de tatouage. Le prospect n'a finalement pas donné suite, mais le projet valait la peine d'être conservé et retravaillé comme vitrine de compétences — désormais visible sur tattoo.kro-no.com.

Pourquoi ce projet sort du lot

Un site pour studio de tatouage doit vendre une ambiance avant de vendre un service : noir profond, typographie forte, aucune fioriture inutile. L'objectif n'était pas de faire "joli" mais de faire ressentir l'exigence artistique d'un studio premium dès les trois premières secondes — avant même que le contenu ne charge.

Le résultat est une SPA React construite autour d'un rituel d'entrée soigné, d'une identité graphique noir / rouge / or assumée, et d'une structure pensée pour convertir un visiteur en rendez-vous.

Le rituel d'entrée : un loader qui pose l'ambiance

Loader animé avec barre de progression
Avant d'accéder au site, le visiteur voit le logo apparaître sur fond noir avec une barre de progression rouge qui se remplit. Ce court instant crée une attente, façon "on entre dans un lieu", plutôt qu'un simple temps de chargement technique.
🎬
Sections révélées au scroll
Chaque section (concept, flash tattoo, galerie, réservation) apparaît avec un effet de révélation basé sur l'Intersection Observer natif du navigateur : pas de librairie d'animation lourde, juste un composant réutilisable qui observe l'entrée en viewport et déclenche une transition fluide.

Les sections clés du site

🎨
Le Concept

Une section éditoriale qui pose le positionnement du studio : créations uniques, sur-mesure, approche artistique plutôt que catalogue. Le texte fait le travail que ferait normalement un book papier.

Flash Tattoo

Une galerie de designs disponibles immédiatement, pensée pour les clients qui veulent un tatouage rapide sans passer par une création 100% personnalisée — un usage très courant chez les tatoueurs.

🖼️
Galerie / Portfolio

La vitrine des réalisations passées, l'argument de vente numéro un d'un tatoueur : ici la qualité des photos et la mise en page comptent plus que le texte.

📅
Réservation

Un appel à l'action clair "Prendre rendez-vous" présent dans la nav, le menu mobile et en fin de page — pour qu'un visiteur convaincu n'ait jamais à chercher comment contacter le studio.

📱
Bandeau réseaux sociaux

Deux blocs QR code stylisés (façon TikTok / Snapchat) redirigent vers les comptes du studio — un réflexe indispensable pour un secteur où la clientèle se construit avant tout sur Instagram et TikTok.

Direction artistique : noir, rouge, or

La charte graphique repose sur trois couleurs seulement : un noir quasi absolu en fond, un rouge sang en accent d'action (boutons, survols), et un or discret réservé aux détails premium (bordures, lueurs). Deux polices structurent la hiérarchie : Playfair Display en serif pour les titres, qui apporte le côté "gravure" propre au tatouage traditionnel, et Oswald en sans-serif condensé pour le reste, plus direct et contemporain.

Un effet de bruit (grain) discret est appliqué sur l'ensemble du site pour casser la platitude du noir uni et donner une texture presque photographique, comme un vieux polaroid de studio.

Stack technique

React + Vite

SPA compilée en assets statiques, chargement quasi instantané une fois le loader passé.

Intersection Observer

Révélations de sections au scroll sans dépendance externe, pour un bundle final léger.

CSS variables

Charte --gold / --red / --black centralisée, facilement adaptable pour un autre studio ou une autre ambiance.

Google Fonts

Playfair Display, Oswald et Caveat (pour la touche manuscrite façon signature de tatoueur).

Ce que ce projet démontre concrètement

Noir Ink Tattoo montre qu'un site vitrine "simple" en apparence peut porter une vraie direction artistique et un vrai travail d'expérience utilisateur :

  • Côté image de marque : une identité visuelle forte et cohérente, du loader jusqu'au footer.
  • Côté conversion : un chemin de réservation toujours visible, pensé pour transformer la visite en rendez-vous.
  • Côté technique : une SPA React légère, sans dépendances superflues, facilement transformable en site sur-mesure pour un vrai studio de tatouage.

Comme pour les autres démos du portfolio, l'ensemble reste 100% adaptable : nom, galerie, couleurs et contenus peuvent être personnalisés pour un studio réel en quelques jours.

🖋️

Vous êtes tatoueur ou vous gérez un studio ?

Ce type de site — galerie, flash, réservation, univers graphique fort — peut être adapté et livré pour votre studio. Discutons-en.

Lancer mon projet Voir la démo live