Clay Website

I wanted to create a portfolio piece that demonstrated my full creative process, from concept to code. The theme: luxury ceramic vases. The challenge was to design an experience that felt as premium and tactile as the objects themselves — every interaction, every transition, every typographic choice had to evoke the craftsmanship and elegance of high-end ceramics.

Designed the entire project in Figma first: moodboard, wireframes, component library, and high-fidelity prototypes with micro-interaction specs. Then built it with React + Vite for snappy HMR and Tailwind CSS for a utility-first design system. The UI features smooth scroll-driven reveals, hover parallax on product cards, and a muted earth-tone palette that lets the vase photography breathe. Every section was crafted with obsessive attention to whitespace, typography hierarchy, and transition timing.

// 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>
  );
}