Clay Website

Je voulais créer une pièce de portfolio démontrant mon processus créatif complet, du concept au code. Le thème : vases en céramique de luxe. Le défi était de concevoir une expérience aussi premium et tactile que les objets eux-mêmes — chaque interaction, transition et choix typographique devait évoquer l'artisanat et l'élégance de la céramique haut de gamme.

Conception complète dans Figma d'abord : moodboard, wireframes, composants et prototypes haute fidélité. Puis développement avec React + Vite et Tailwind CSS. L'interface propose des révélations fluides au défilement, un parallaxe au survol sur les cartes produits, et une palette de tons terreux qui laisse respirer la photographie. Chaque section a été travaillée avec une attention obsessionnelle aux espaces blancs et à la hiérarchie typographique.

// Parallax product card with hover depth
function VaseCard({ vase }: { vase: Vase }) {
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start end", "end start"],
  });
  const y = useTransform(scrollYProgress, [0, 1], [60, -60]);

  return (
    <motion.div ref={ref} style={{ y }}
      className="group relative aspect-[3/4]">
      <img src={vase.image} alt={vase.name}
        className="object-cover transition-transform
          duration-700 group-hover:scale-105" />
      <p className="absolute bottom-6 left-6
        text-xs tracking-[0.2em] uppercase
        text-white/40">{vase.name}</p>
    </motion.div>
  );
}