作品集

项目状态：

已上线（2026-10-06）：639246942.xyz

开发时间：

2026-10-01 ~ 2026-10-05（5 天，113 个提交）

作品集 — 蛇形走线 × sticky 滚动的个人陈列

蛇形走线 × sticky 滚动的个人陈列——你现在正看的这一页。

---

项目概述

这是我的个人作品集站点：独立仓库、纯前端静态站，把 12 个从 0 到 1 的项目装进一条金色电路里。没有框架、没有 UI 库——Vite + TypeScript + GSAP + Lenis，所有动效手写。

五个板块，一条走线串起来：

• Hero — 五层 Emberveil 场景视差 + 中央星图矩阵（三个视角分别拼出「芯火」「LOGO」「chipspark」，14975 点逐点投影）
• About — 纸面宣言：三行正文以符号密文呈现（XOR + 半字节符号表，解法藏在终端里）
• Works — IDE 控制台：文件树 + 标签页 + 可交互终端（help / ls / open / kitten，还能闲聊）
• Stack — 孟菲斯风格 + 31 词装箱字符墙 + 四分组技术栈
• Elsewhere — 糖果底 + 八张贴纸物理拖拽 + kitten 三联动图 + 四个外链

贯穿全站的设计总纲：

• 40/40/20 跑道：每个板块 250vh sticky 钉住，动效窗口严格按「两个 40 + 一个 20」分段，标题停住粒子渐隐完毕
• 恒黑金铁律：金色蛇形走线、导航、光标全站恒定，板块内部各放各的风格
• 无回弹：所有揭示与位移不用弹簧回弹，只有 Elsewhere 贴纸拖拽松手例外
• 降级齐全：prefers-reduced-motion 直接揭示、触屏不挂光标、构建绿 + 零 pageerror 是每批底线

---

技术栈（与站内作品卡一致）

TypeScript · Vite · GSAP + ScrollTrigger · Lenis · Canvas 2D · SVG

---

值得一提的几件实现

1. 蛇形走线电路 — 45° 折线 + 焊盘过孔，滚动到每个板块时对应支路通电；加载页「走线通电」同语言：六条金线汇心 + 计数 + 通电闪，1.12 秒揭示进站。
2. 星图矩阵 — 一份 14975 点的三视角点云，滚动切换视角时双轴插值旋转，粒子、光标残影与它共享同一份点位。
3. 全站金色粒子叙事 — 飞出与五图层缩小同步、汇聚与标题同起同停、渐隐只发生在最后的 20 段；粒子落点与文字字形逐像素同位（光栅与 CSS 行盒共用基线公式）。
4. 分板块光标 — 五个板块五种造型：箭头 / 钢笔 / I-beam / 等距栈块 / 糖果漩涡，换挡 180ms 无回弹。
5. 中英双语 — 整站文案双语，终端闲聊彩蛋 127 条回复句级字典；密文保持一套（解出来是中文彩蛋）。
6. 细节堆料 — 64 列 22 帧 ASCII 猫、45 风格动图系列、48 风格混沌彩蛋、「别点我」彩蛋按钮、about 落款签名。

---

效果展示

截图随上线补（部署后回填首屏、Works 控制台、Elsewhere 三联与加载页四张）。

---

开发过程

5 天从脚手架到收官，完整记录在开发日志：17 份批次任务单、59 节需求原话存档、四轮粒子返修与五轮光标设计稿的全过程。