想给旅行照片找个地方放。现成的相册要么太”工具”，要么主题太花。于是自己写了一个 ——目标是让人点进来就想去旅行。

前台：只是好看还不够

  • 全屏放大的轮播，照片是主角
  • 卡片跟随鼠标做 3D 倾斜，鼠标离开回弹
  • 粒子背景 + 自定义光标
  • 磁性按钮、快捷键操作、旅行统计（城市 / 里程 / 照片数）
  • 复古胶片色调的整体视觉

这些效果全部是原生 JavaScript + CSS 实现的，没有引入任何框架或动画库 —— 页面加载只有一个 html、一个 css、几个 js。

后台：静态站也要能管内容

静态站点最大的问题是”改内容要动代码”。这里的解法是 Supabase：

  • Auth：邮箱注册 / 登录，管理后台有门禁
  • Postgres：旅行记录、目的地、页面配置
  • Storage：照片批量上传，走对象存储而不是塞进仓库

这样一来，网站本身还是纯静态（部署在 Vercel，全球 CDN），但内容可以随时在后台改。

部署

双击 deploy.bat 看教程 → 推到 GitHub → Vercel 导入仓库 → 完成

也支持 GitHub Pages。配置文件分离得很干净：config.js 管站点信息，supabase.js 管客户端，storage.js 管图片，换环境只需要改配置。

一点设计上的取舍

胶片风格的网站很容易做”脏”：颗粒、噪点、暖色调叠多了就糊。最后的做法是 —— 把做旧效果限制在边框和叠层上，照片本身保持干净，让”复古”是一种气质，而不是一层滤镜。

项目地址：sakurajh/travel-journal