残酷效率：我的作品集技术拆解

Source: Dev.to

技术栈

该项目基于现代高性能的 React 栈构建，旨在实现速度与开发者体验的最佳平衡。

• 核心框架： React 18
• 语言： TypeScript（提供类型安全和更好的开发工具）
• 构建工具： Vite（极速的开发服务器启动和优化后的构建）
• 样式： Tailwind CSS v4（使用全新的实验性 v4 或最新的 v3 功能，实现实用优先的样式）
• 图标： Lucide React（干净、一致的 SVG 图标）

设计系统：新粗野主义（Neobrutalism）

视觉风格遵循 新粗野主义 设计趋势，特征包括：

• 高对比度：鲜明的黑色边框（border-2 或 border-4）配合鲜艳的颜色。
• 大胆配色：在 Tailwind 配置中自定义的调色板：
  • neo-blue
  • neo-green
  • neo-yellow
  • neo-pink
  • neo-black（极深的灰/黑）
  • neo-offwhite
• 偏移阴影：硬朗、无模糊的阴影（例如 box-shadow: 4px 4px 0px 0px #000;），营造“贴纸”或“层叠纸张”的效果。
  实现示例：shadow-neo 类会应用上述阴影。

动画与交互

通过混合动画库和 CSS 技巧，使站点充满活力。

Framer Motion

通过 framer-motion 引入，该库负责复杂的进入动画和状态切换。

Hero 区块 – 文本元素和主图使用 motion.div 实现滑入并淡入的效果。

滚动动画 – 元素在滚动时显现，通常由 whileInView 或类似的 Framer Motion 属性触发。

React CountUp 与 Intersection Observer

• 统计区块 使用 react-countup 在进入视口时为数字（如 “30+ 项目已完成”）添加动画。
• react-intersection-observer 检测数字何时进入视图，仅在第一次出现时触发计数动画（triggerOnce: true）。

CSS 动画

通过 Tailwind 配置的标准 CSS 动画，用于持续效果：

• 脉冲 – Hero 区块中的背景斑块使用 animate-pulse 实现柔和的淡入/淡出。
• 弹跳 – 装饰元素（如 “HI!” 徽章）使用 animate-bounce 吸引注意。
• 悬停效果 – 按钮和卡片拥有 transition-all 类，在悬停时轻微弹动或移动，强化触感式 UI 体验。

关键组件

• Hero.tsx – 叠加绝对定位的背景斑块，使用网格布局区分文本与图片，并通过 Framer Motion 实现进入动画。
• Stats.tsx – 将 useInView（来自 Intersection Observer）与 CountUp 结合，实现精致的数字动画。
• ProjectModal.tsx – 使用固定覆盖层和高 z-index，并根据状态进行条件渲染，以展示项目详情。

总结

该作品集将新粗野主义的原始、大胆美学与现代 React 动画的流畅、精致感相结合。最终呈现出一个看似复古却极其快速、响应灵敏的站点。