Clay Website

设计师 & 前端开发人员—2025

客户

个人项目

角色

设计师 & 前端开发人员

技术栈

Figma, React, Vite, Tailwind CSS, Framer Motion

日期

2025

01

挑战

我想创作一个作品集项目，展示我从概念到代码的完整创作过程。主题：豪华陶瓷花瓶。挑战在于设计一种体验，让人感觉到像物体本身一样高级和触感丰富——每一次交互、每一次过渡、每一个排版选择都必须唤起高端陶瓷的工艺和优雅。

02

解决方案

首先在 Figma 中设计整个项目：情绪板、线框图、组件库和带有微交互规范的高保真原型。然后使用 React + Vite 进行快速开发，并使用 Tailwind CSS 构建实用优先的设计系统。用户界面具有流畅的滚动显示、产品卡片上的悬停视差以及柔和的大地色调，让花瓶摄影作品得以展现。每个部分都对留白、排版层次和过渡时间进行了精心打磨。

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

↳ 用于产品展示的滚动驱动视差卡片

下一个项目

足球数据分析

数据分析 / 体育科学