作品集：关于我

**提示词：**

使用 React、Tailwind CSS 和 **framer-motion** 创建一个“关于我”section。网站使用 **Google Font "Kanit"**（字重 300-900）和深色背景 `#0C0C0C`。

**Section 布局：**
- 全宽 section，`min-h-screen`，flexbox column，双轴居中
- Padding：`px-5 sm:px-8 md:px-10 py-20`
- 背景：`#0C0C0C`（继承自页面）
- `position: relative`——section 有 4 张装饰性浮动图片，绝对定位在四角

**4 张装饰性角落图片（absolute positioned，z-0）：**

1. **左上角**——月亮 icon
   - URL：`https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/moon_icon.11395d36.png`
   - 位置：`top-[4%] left-[1%] sm:left-[2%] md:left-[4%]`
   - 大小：`w-[120px] sm:w-[160px] md:w-[210px] h-auto`
   - 淡入动画：`delay: 0.1`，从左侧滑入（`x: -80, y: 0`），`duration: 0.9`

2. **左下角**——3D 对象
   - URL：`https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/p59_1.4659672e.png`
   - 位置：`bottom-[8%] left-[3%] sm:left-[6%] md:left-[10%]`
   - 大小：`w-[100px] sm:w-[140px] md:w-[180px] h-auto`
   - 淡入动画：`delay: 0.25`，从左侧滑入（`x: -80, y: 0`），`duration: 0.9`

3. **右上角**——Lego icon
   - URL：`https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/lego_icon-1.703bb594.png`
   - 位置：`top-[4%] right-[1%] sm:right-[2%] md:right-[4%]`
   - 大小：`w-[120px] sm:w-[160px] md:w-[210px] h-auto`
   - 淡入动画：`delay: 0.15`，从右侧滑入（`x: 80, y: 0`），`duration: 0.9`

4. **右下角**——3D 组合
   - URL：`https://shrug-person-78902957.figma.site/_components/v2/ebb2b8f25d8e24d5f0a5ca8af4c950de81aa2fd7/Group_134-1.2e04f3ce.png`
   - 位置：`bottom-[8%] right-[3%] sm:right-[6%] md:right-[10%]`
   - 大小：`w-[130px] sm:w-[170px] md:w-[220px] h-auto`
   - 淡入动画：`delay: 0.3`，从右侧滑入（`x: 80, y: 0`），`duration: 0.9`

**中心内容（relative z-10，max-w-4xl，居中）：**

采用 `gap-16 sm:gap-20 md:gap-24` 的垂直布局，包含两组内容：

**第 1 组——标题 + 动画文本**（gap `10 sm:14 md:16`）：

- **标题“关于我”：**
  - `font-black uppercase leading-none tracking-tight text-center`
  - 字号：`clamp(3rem, 12vw, 160px)`
  - 使用 CSS class `hero-heading` 应用渐变文字填充：
    ```css
    .hero-heading {
      background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    ```
  - 淡入：`delay: 0, y: 40`

- **动画段落**（滚动驱动的逐字符显示）：
  - 文本内容：`“我拥有五年多的设计经验，专注于品牌、网页设计和用户体验。我非常享受与那些致力于脱颖而出并展现最佳形象的企业合作。让我们一起打造令人惊叹的作品！”`
  - 样式：`text-[#D7E2EA] font-medium text-center leading-relaxed max-w-[560px]`
  - 字号：`clamp(1rem, 2vw, 1.35rem)`
  - **动画行为**（使用 framer-motion `useScroll` + `useTransform`）：
    - 每个字符分别渲染为一个 `<span>`，设置 `position: relative; display: inline-block`
    - 一个不可见副本用于占位；可见字符采用绝对定位叠放在其上
    - 滚动跟踪：`useScroll({ target: containerRef, offset: ['start 0.8', 'end 0.2'] })`
    - 每个字符的 opacity：计算 `charProgress = index / totalChars`，然后计算 `start = max(0, charProgress - 0.1)` 和 `end = min(1, charProgress + 0.05)`。将 `scrollYProgress` 从 `[start, end]` 映射到 opacity `[0.2, 1]`
    - 空格渲染为 `\u00A0`（不换行空格）
    - 字符初始较暗（opacity 0.2），随着用户滚动浏览 section，逐渐变为完全不透明（1），形成从左到右的渐进式文字显示效果

**第 2 组——联系按钮：**
- 淡入：`delay: 0.3, y: 20`
- 胶囊形按钮（rounded-full），文字为“联系我”
- 响应式 padding：`px-8 py-3 sm:px-10 sm:py-3.5 md:px-12 md:py-4`
- 文字：`text-white font-medium uppercase tracking-widest`，大小 `text-xs sm:text-sm md:text-base`
- 背景渐变：`linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%)`
- Box shadow：`0px 4px 4px rgba(181, 1, 167, 0.25), 4px 4px 12px #7721B1 inset`
- Outline：`2px solid #E3E3E3`，`outlineOffset: -3px`
- Hover：`opacity: 0.9`，Active：`opacity: 0.75`，transition 200ms
- 链接至 `#contact`

**FadeIn 组件（可复用，framer-motion）：**
- Props：`delay`、`duration`（默认 0.7）、`x`（默认 0）、`y`（默认 30）、`className`、`style`、`as`（HTML element tag，默认 `div`）
- 使用 `motion.create()` 让任意 HTML element 可添加动画
- Variants：`hidden` 状态设置 `opacity: 0` + x/y offsets；`visible` 动画至 `opacity: 1, x: 0, y: 0`
- Easing：cubic bezier `[0.25, 0.1, 0.25, 1]`
- Viewport trigger：`{ once: true, margin: "50px", amount: 0 }`

**字体（在 HTML head 中加载）：**
```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
```

CSS 基础样式：在 html/body 上设置 `font-family: 'Kanit', sans-serif`。

---