返回作品集
个人作品集 — 可探索的项目地图

个人作品集 — 可探索的项目地图

我把作品集彻底重做了一遍。旧站是一个暗色新粗野主义页面,靠 CDN 引入的 Tailwind 脚本渲染 JSON 网格;新站是 Astro 5 静态构建,只在交互确实需要的地方挂载 React 岛屿。核心是作品页——一块地图式画板,36 个项目分布在五个territory中,每个学科一个。滚轮以光标为中心缩放,拖拽带惯性平移,双指可以捏合,筛选标签会把视野飞向某个类别并让其余变暗。放大后,图钉会展开成卡片。每个节点都是真实链接,因此每个项目同时构建为独立的静态页面,打开时对话框已经在屏幕上。首页是一串由滚动驱动的区块:固定的 hero 配六屏轮播;关于区块的段落逐字填充,同时图片堆叠累积;鱼眼式速览条;技能手风琴;以及一条随向下滚动而横向擦动的项目轨道——手机与桌面端皆然。全部内容存放在一个 JSON 文件里。没有 CMS,没有数据库,也没有服务端运行时。

技术栈

Astro 5 React 19 TypeScript GSAP Lenis Tailwind CSS View Transitions SEO

挑战

可探索的地图很容易让人迷失方向,也很容易失去可访问性。同时它必须保持纯静态构建——没有服务器——却要为 36 个项目提供真实且可分享的 URL,动效还得在手机上撑得住。

解决方案

地图上的每个节点都是指向构建期生成页面的锚点,因此即便关闭 JavaScript,画板依然可导航、可分享、可被抓取。细节层级会随缩放把图钉换成卡片,筛选标签让视野飞过去而不是重新加载。区块用 GSAP ScrollTrigger 固定,由滚动位置而非计时器驱动,这让它们在触屏设备上表现如实。整站由 Astro 输出为静态 HTML,React 只挂载在唯一真正需要它的组件上。