个人作品集 — 可探索的项目地图
项目概述
我把作品集彻底重做了一遍。旧站是一个暗色新粗野主义页面，靠 CDN 引入的 Tailwind 脚本渲染 JSON 网格；新站是 Astro 5 静态构建，只在交互确实需要的地方挂载 React 岛屿。核心是作品页——一块地图式画板，36 个项目分布在五个territory中，每个学科一个。滚轮以光标为中心缩放，拖拽带惯性平移，双指可以捏合，筛选标签会把视野飞向某个类别并让其余变暗。放大后，图钉会展开成卡片。每个节点都是真实链接，因此每个项目同时构建为独立的静态页面，打开时对话框已经在屏幕上。首页是一串由滚动驱动的区块：固定的 hero 配六屏轮播；关于区块的段落逐字填充，同时图片堆叠累积；鱼眼式速览条；技能手风琴；以及一条随向下滚动而横向擦动的项目轨道——手机与桌面端皆然。全部内容存放在一个 JSON 文件里。没有 CMS，没有数据库，也没有服务端运行时。
挑战
可探索的地图很容易让人迷失方向，也很容易失去可访问性。同时它必须保持纯静态构建——没有服务器——却要为 36 个项目提供真实且可分享的 URL，动效还得在手机上撑得住。
解决方案
地图上的每个节点都是指向构建期生成页面的锚点，因此即便关闭 JavaScript，画板依然可导航、可分享、可被抓取。细节层级会随缩放把图钉换成卡片，筛选标签让视野飞过去而不是重新加载。区块用 GSAP ScrollTrigger 固定，由滚动位置而非计时器驱动，这让它们在触屏设备上表现如实。整站由 Astro 输出为静态 HTML，React 只挂载在唯一真正需要它的组件上。
图片集
首屏 — 一个名字、一句承诺，六门手艺轮番登场
关于 — 逐字填充的滚动叙事
速览 — 一次一条，经过时放大
技能 — 展开一项，悬停另一项即见其工具
精选项目 — 一条随滚动横移的轨道
联系 — 收尾的名录
项目地图 — 放大后，图钉变成卡片
项目对话框 — 就地打开，拥有自己的 URL
首屏 — 同样的开场，为平板重新堆叠
关于 — 在平板上，故事一气呵成，再以引言收尾
精选项目 — 横向轨道在平板上照样滚动
筛选视图 — 一个标签把画板飞向单一类别
项目对话框 — 不离开地图即可读完整个案例
菜单 — 全屏面板，简历始终触手可及
速览 — 一笔刷开，照片现身
精选项目 — 手机上同样随滚动推进
项目地图 — 双指放大，每个图钉都化作卡片
项目对话框 — 完整案例，装进手机
联系 — 每个渠道，一触即达
