Codex 实战 · Vibecoding Personal Site

我的海岛日记

从刷到灵感,到搭建页面、调整交互、打磨视觉和文案:把一段海岛生活整理成可以被打开、被浏览、被继续生长的个人网站。

Story

把生活里的海风,整理成一页网页。

这个项目复刻的是视频里的创作方向:一个由 Codex 辅助完成的海岛主题个人站。它不是营销首页,而是一个可浏览的摄影日记,有首屏、有相册、有路线和文字记录。

你好,我在海岛上记录日常。

清晨去码头看渔船靠岸,午后在椰林下修图,傍晚追着海岸线找一块新的日落机位。每次出门都像在写一篇没有标题的日记。

网站用轻量的 HTML、CSS 和 JavaScript 搭建,交互集中在相册筛选、图片灯箱、滚动显隐和导航状态上。单文件即可打开,也方便后续迁移到独立站。

12张精选照片
6篇日记片段
1个 Codex 页面

Journal

路线不是重点,留下来的瞬间才是。

日记部分用卡片保留文字阅读节奏,左侧用海岛地图感图片承载地点记忆,让页面更像个人作品集而不是普通博客列表。

Moments

页面里保留了三个可继续扩展的内容入口。

这些模块可以替换成真实旅行攻略、拍摄参数、路线地图、店铺推荐,或者后续独立站的商品与订阅入口。

机位收藏

适合拍日出的海堤、适合拍蓝调的码头、适合拍星空的山顶平台。

天气笔记

记录潮汐、风向、云层和季节,帮助下一次出门之前判断光线。

创作档案

把从灵感、Prompt、初稿到最终页面的过程沉淀下来,方便复盘。

Contact

岛屿信号有时断断续续,但总能找到我。

如果你也想把一段旅行、一组摄影作品或一个独立站想法做成页面,可以从这个单文件继续改。