我用 Next.js 16、React 19 和 Tailwind v4 构建了作品集——我学到的经验

Source: Dev.to

动机

在本文中，我将向你展示我如何使用最新的技术栈构建我的新作品集：Next.js 16、React 19 和 Tailwind CSS v4，并使用 GSAP 实现高性能动画。

技术栈

• 框架: Next.js 16（App Router）
• UI 库: React 19
• 样式: Tailwind CSS v4（Alpha/Beta）
• 动画: GSAP（GreenSock）
• 状态管理: React Context API
• 语言: TypeScript

关键特性 & “酷炫之处”

1. 动态配色主题（不仅仅是暗黑模式！）

// contexts/ThemeContext.tsx
export type ColorTheme = 
  'cyan-blue-purple' | 
  'green-emerald-teal' | 
  'pink-rose-purple' | 
  /* ... */;

const themeConfigs = {
  'cyan-blue-purple': {
    primary: 'from-cyan-400 via-blue-500 to-purple-600',
    // ... define complex gradients
  },
  // ... other themes
};

2. 可扩展的项目数据架构

• data/enhancedProjects.ts – 作为唯一可信来源。
• projectMapper.ts – 动态处理图片路径，自动解析 screenshot-*.png 文件。
• ProjectCard.tsx – 一个可复用的组件，能够适配这些数据。

添加新项目只需新增一个 JSON 对象——无需修改 UI 代码。

3. 使用 GSAP 实现丝般顺滑的动画

（实现细节省略）

演示

aarish.dev

欢迎告诉我你的想法！