CY陈韵韵PORTFOLIO / 2026 在线体验 ↗
← 返回首页03 · Vibe Coding / Interactive Editorial

Wanderlogue
互动旅行日志

把一次 18 天、9,000 多公里的家庭自驾,从散落照片和碎片记录重新编排成可以探索、切换与分享的旅行杂志。

我的工作整理真实旅行素材与叙事线索;定义旅行记忆编辑器概念;借助 AI 完成信息架构、视觉系统、互动路线与响应式网页实现。
青海湖畔的高原公路与低云
ISSUE 01 · 海拉尔 → 西宁 · 18 DAYS
01

照片很多,记忆却没有结构

一次长途旅行留下 1,551 张照片、18 天零散记录和大量路边疑问。普通相册只能按时间存放,无法同时呈现路线、地貌变化、家庭互动和旅途中逐渐获得的知识。

02

把记忆变成可编辑系统

原始素材
照片、日期、地点、口述
→
叙事结构
章节、路线、地貌与见闻
→
互动成刊
主题、重点与密度可切换

成品包含动态路线、18 天时间轴、五次地貌转场、知识卡片和图片灯箱。用户还可以切换杂志气质、阅读重点和内容密度,让同一段旅程产生不同的阅读版本。

03

一次完整的 Vibe Coding 实践

我没有把 AI 当作单纯的代码补全工具,而是把它放进从材料整理到产品验证的完整流程:先明确“保留本人语气”的内容原则,再拆分数据、组件和交互状态,最后通过浏览器逐屏检查桌面与手机体验。

真实内容建模18 天旅行数据与五章地貌叙事
交互式编排主题、阅读重点与内容密度切换
前端实现HTML、CSS、JavaScript 与响应式设计
04

在线成刊

这是完整可交互页面,不是静态设计图。可以操作编排器、路线日期、见闻标签和照片灯箱。

打开 Wanderlogue →