使用 React、GSAP 与 Tailwind v4 构建高级 Bento 风格作品集

Source: Dev.to

创建我的作品集是一种成年礼，但我想要的东西更像是操作系统仪表盘，而不是静态简历。 在探索了现代设计趋势后，我决定构建一个 Bento‑style 网格，让它看起来充满活力、响应式且数据驱动。

🎨 设计理念： “Bento” 哲学

Bento 网格（灵感来源于 Apple 的宣传材料）能够在不显得杂乱的情况下容纳高密度信息。 每张卡片都有其独特用途：

• 个人资料卡 – 快速的 “Hello”。
• 动态统计 – 实时观看人数和 GitHub 指标。
• 经历与教育 – 结构化时间轴。
• 项目 – 时尚的轮播展示作品。

🛠️ 技术栈

• 前端：React 19 + TypeScript（提供类型安全）。
• 样式：Tailwind CSS（利用新 v4 特性实现简洁的变量处理）。
• 动画：GSAP（GreenSock）实现顺滑的进入过渡。
• 图标：Lucide‑React（一致且轻量）。
• 数据获取：SWR 用于高效从自定义 API 拉取数据。

🚀 关键技术特性

1. 进入动画 (GSAP)

卡片使用 GSAP 的 ScrollTrigger 以缩放效果错位出现，赋予 UI 在用户滚动时的“重量感”。

gsap.fromTo(
  ".bento-card",
  { opacity: 0, y: 50, scale: 0.9 },
  {
    opacity: 1,
    y: 0,
    scale: 1,
    stagger: 0.1,
    duration: 0.8,
    ease: "power3.out",
  }
);

2. 优化图标可见性

暗模式会导致黑色图标（如 GitHub、Express）消失。一个实用工具会自动检测这些图标并应用 dark:invert 滤镜，确保它们在任何主题下都能突出显示。

3. “全栈”技能卡

技能不再是简单列表，而是按类别（前端、后端、工具）组织，并采用分层 UI：

• 粗体类别标题配水平分隔线。
• 细微的大号背景水印文字增加层次感。
• 每种技术都有高质量的 SVG 图标。

4. 交互式社交中心

社交链接以交互式卡片形式呈现，支持：

• Instagram / YouTube / X 集成。
• 使用 PDF 链接的 download 属性直接下载简历。
• 悬停状态下轻微旋转和缩放，为网格增添互动性。

📈 实时数据集成

作品集连接到自定义 API 服务器，实现：

• 拉取实时 GitHub 统计（星标、仓库、贡献）和项目仓库。
• 使用存储在本地存储中的访客 ID 系统跟踪 唯一访客 和 点赞。

🔗 链接

在线演示：

Bento 作品集刚刚上线 👀。