个人作品展示

**像素级忠实地**复刻此页面。单个占满整个视口的首屏。React + Tailwind CSS。不要卡片，不要紫色，不要 Inter/Roboto。采用黑色/奶油色的编辑设计风格作品集外观。

---

## 技术栈与页面框架

- Vite + React + TypeScript + Tailwind CSS
- 文档标题：`Marcus — Bennet`（长破折号）
- Body 字体栈：`'Helvetica Neue ME', Helvetica, Arial, sans-serif`
- 加载此确切 webfont（print→all 模式）：

```
https://db.onlinewebfonts.com/c/95cecf452d3208890088a5b4c19c7ecf?family=Helvetica+Neue+ME
```

- Tailwind 主题扩展：
  - 颜色 `cream`：`#efeee9`
  - 字体族 `hn`（以及 `sans`/`serif`）：`"Helvetica Neue ME", Helvetica, Arial, sans-serif`
- Lucide React 仅用于移动端关闭图标（`X`、size `26`、strokeWidth `1.5`）
- 根 section：`relative h-[100dvh] w-full overflow-hidden`——单一构图，首屏不可滚动

---

## 确切素材 URL（不要替换）

**背景图片（全出血，位于所有内容之后）：**
```
https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260729_022513_486985a2-ac8c-4278-91a8-071dcd9fcaff.png&w=1280&q=85
```

**前景人像（抠图叠层，位于跑马灯之上，pointer-events none）：**
```
https://stone-expand-60400629.figma.site/_assets/v11/8da570354e86aa0d44ac3e4aa335a72c8e750d68.png
```

两张图片均使用：`absolute inset-0 h-full w-full object-cover`。

---

## 图层顺序（z-index）

| 图层 | z | 内容 |
|--------|---|---------|
| 背景图片 | default | 全出血背景 |
| 跑马灯姓名 | `z-10` | 滚动的“Marcus — Bennet” |
| 水平奶油色分隔线 | `z-10` | 位于页脚上方 |
| 桌面端页脚 | `sm:z-10` | 底部文案 |
| 前景人像 | `z-20` | 覆盖跑马灯的抠图 |
| 页眉 + 移动端页脚 | `z-30` | 页面框架 |
| 移动端抽屉 | `z-40` | 遮罩层 + 面板 |
| Hamburger / 关闭按钮 | `z-50` | 始终位于最上层 |

---

## 文案与链接（字符串必须完全一致）

- 品牌 / logo 链接（左上角）：`Marcus`
- 年份（仅桌面端）：`2025`
- 导航栏（桌面端 + 移动端“Site Index”）：`Story`、`Jobs`、`Message`
- 社交栏（桌面端 + 移动端“Find Me”）：`Instagram`、`TikTok`、`YouTube`
- 跑马灯（复制两次以实现无缝循环）：`Marcus — Bennet` + 不换行空格，每个 span 使用 `pr-[6vw]`。姓名之间使用 HTML entity `—`。
- 页脚左侧（三行）：
  - `Visuals Composer`
  - `Digital Crafter`
  - `Obsessed by The Office`
- 页脚右侧（右对齐）：
  - `A homage to`
  - `Marcus Holloway`
- 移动端抽屉标签：`Site Index`、`Find Me`（大写，`tracking-[0.2em]`、`text-cream/50`）
- 所有链接：暂时使用 `href="#"`
- 前景图片 `alt`：`Portrait`；背景图片 `alt`：空

所有 UI 文本颜色：`text-cream`（`#efeee9`）。

---

## 布局——桌面端（`sm:` 及以上）

**页眉**（`absolute inset-x-0 top-0 z-30 flex items-start justify-between px-6 pt-6 sm:px-10 sm:pt-8`）：
- 左侧：品牌 `Marcus`——`font-hn text-lg tracking-wide`
- 右侧组合（`hidden sm:flex items-start gap-16 lg:gap-24`）：
  - 年份 `text-sm`
  - 导航：垂直堆叠 `flex-col gap-0.5 text-sm`，hover 时在 `300ms` 内变为 `opacity-60`
  - 社交：相同的堆叠方式/hover 效果

**跑马灯**（`absolute inset-x-0 top-[16vh] sm:top-[14vh] z-10 overflow-hidden`）：
- 内部轨道：`marquee flex w-max whitespace-nowrap font-hn text-[16vh] sm:text-[26vh] leading-none text-cream`
- 连续水平滚动：`translateX(0)` → `translateX(-50%)`，**30s linear infinite**（轨道由两个相同的半段组成）

**奶油色分隔线**（`absolute inset-x-6 sm:inset-x-10 bottom-[5.5rem] sm:bottom-28 z-10 h-0.5 bg-cream`）：
- 从左侧开始，通过 `scaleX(0)` → `scaleX(1)` 生长，`transform-origin: left`

**页脚**（`absolute inset-x-0 bottom-0 flex items-end justify-between px-6 pb-5 sm:px-10 sm:pb-8 text-xs sm:text-sm leading-relaxed font-hn`）

**仅移动端**（`sm:hidden`）：hamburger（3 条奶油色横条，容器为 `h-10 w-10`，横条区域为 `h-4 w-6`）。桌面端导航/社交栏在移动端隐藏。

---

## 移动端抽屉（`sm:hidden`）

- 背景遮罩：`fixed inset-0 z-40`、`bg-black/40 backdrop-blur-sm`，透明度在 `500ms` 内于 0↔100 之间变化；点击关闭；关闭时使用 `pointer-events-none`
- 面板：从右侧滑入，`w-[80%] max-w-sm`、`bg-[#141414]`、`px-8 py-10`，`translate-x-full` ↔ `translate-x-0`，`600ms`，ease 为 `cubic-bezier(0.76, 0, 0.24, 1)`
- 打开时锁定 `document.body.style.overflow = 'hidden'`
- 关闭按钮：Lucide `X`，absolute `right-6 top-6`；打开时：rotate 0 / opacity 1（延迟 300ms）；关闭时：rotate 90 / opacity 0
- “Site Index”标签：淡入/向上滑入（延迟 250ms）；导航链接为 `text-4xl`，以 `300 + i*80` ms 交错出现，初始为 `translate-y-6 opacity-0`
- “Find Me”标签：延迟 500ms；社交链接为 `text-sm` 并可换行，以 `550 + i*60` ms 交错出现，初始为 `translate-y-4 opacity-0`
- Hamburger 变形为 X：顶部/底部横条旋转 ±45° 至中心（`500ms`，ease 为 `cubic-bezier(0.76, 0, 0.24, 1)`）；中间横条在 `300ms` 内淡出

---

## 入场动画（精确参数）

使用 `animation-fill-mode: both`。遵循 `prefers-reduced-motion: reduce`，将这些动画缩短至约 0.01ms / 0 延迟。

| Class | Keyframes | Duration / easing | 应用于 |
|--------|-----------|-------------------|---------|
| `anim-fade-in` | opacity 0→1 | **1.2s** `ease-out` | 背景图片（无延迟） |
| `anim-rise-in` | opacity 0→1，`translateY(4vh) scale(1.03)` → `0 / scale(1)` | **1.4s** `cubic-bezier(0.22, 1, 0.36, 1)` | 前景人像，**延迟 300ms** |
| `anim-fade-up` | opacity 0→1，`translateY(28px)` → 0 | **0.9s** `cubic-bezier(0.22, 1, 0.36, 1)` | UI 框架（延迟见下文） |
| `anim-line` | `scaleX(0)` → `1`，origin left | **1.1s** `cubic-bezier(0.76, 0, 0.24, 1)` | 奶油色分隔线，**延迟 1200ms** |
| `.marquee` | `translateX(0)` → `-50%` | **30s** `linear` infinite | 姓名轨道 |

**`anim-fade-up` 延迟：**
- 跑马灯 wrapper：`500ms`
- 品牌“Marcus”：`800ms`
- 年份 + hamburger：`900ms`
- 导航链接：`1000 + i*80` ms（Story/Jobs/Message）
- 社交链接：`1150 + i*80` ms
- 页脚左侧：`1400ms`
- 页脚右侧：`1550ms`

---

## 视觉 / 交互规则

- 第一视口 = 单一构图：品牌、跑马灯姓名、一组人像叠层（背景 + 抠图）、无 CTA 的页面框架（导航/社交栏）、页脚简介——不得包含其他内容
- 人像位于巨型滚动姓名**上方**，使字母透过抠图周围显示 / 位于抠图之后
- 在深色/照片背景上使用奶油色 `#efeee9`；不要卡片、不要药丸形元素、不要辉光、不要紫色
- 桌面端导航/社交链接 hover：`opacity-60`、`duration-300`
- 首屏不可滚动（`overflow-hidden` + `100dvh`）

---

## 实现检查清单

1. 从上方 OnlineWebFonts URL 接入 Helvetica Neue ME；映射 Tailwind `font-hn` / `cream`
2. 使用两个图片 URL 构建全视口 section，并设置正确的 z 图层
3. 在 `16vh` / `14vh`（sm）位置创建无限循环的双 span 跑马灯，字号为 `16vh` / `26vh`
4. 桌面端页眉三栏 + 移动端 hamburger → 带交错显现效果的抽屉
5. 奶油色分隔线 + 两个页脚区块，使用确切文案
6. 实现全部四种入场动画 + 跑马灯，并采用列出的延迟和 easing
7. 对 `prefers-reduced-motion` 进行短路处理

严格按照说明复刻——使用相同的 URL、文案、间距、z-order、时间参数和字体。