文章结构

网站构建日志

初衷

找工作真的找得很烦,写一份简历感觉就已经精疲力竭了。看到不同的岗位需求,就想针对性去写简历。但是迟迟下不去手。想起来曾经让AI帮忙写过个人案例的PPT,最终AI给到了一份HTML代码,我觉得,写一个个人网站,全面展示自己,也许是个不错的主意。

展示自己牛逼的工作经历,展示自己有趣的项目经历,展示自己硬核的技术实力,展示自己朴素的摄影才华,展示自己健康的生活习惯。

后来一想,平常自己的想法那么多,可总想不做。那就加上博客的功能,偶尔写写文字什么的,让自己的脑子保持活跃,也能把自己各种各样的想法记录下来。

而且,这天我让AI给我做了个职业测评,我总想着在自己舒适的领域,拿一份稳定的工资。AI对我的评价挺高,说我有着大厂的工作经历,有着硬核的技术背景,结合自己的公关传播背景,或许该转变一下了。

那就开始干嘛。

嗯,谢谢你的鼓励与陪伴。

🚧待开发: divider

项目启动

2026年5月28日,天气晴

一开始询问朋友,解决方案是使用Wordpress、自有nas等进行部署个人网站。跟Gemini交流之后,选择了astro技术框架+GitHub云托管+vercel云部署+notion+DeepSeek的方案。费用暂时是DeepSeek的API费用。

然后就是对于一个c++挂科几次的纯编程小白来说,接触代码真的是一件相当痛苦的事情。就拿部署开发环境来说,各平台版本之间的版本对齐、接口对齐,都要debug一下午。。。

然后还有许多其他可能是很基础的错误?反正都能一一解决了。

收获初个粗糙的网站骨架之后,在拉通notion和网站之间的信息同步之后,也是收获了很久都已经没有过的成就感和满足感。

项目进度:

在自己的MacBook上部署开发环境
跟AI初步交流想法,对标苹果官网,构建网站的骨架和内容版块。疯狂debug
🚧待开发: divider

初具形态

2026年5月29日,天气晴转暴雨

首次打包上传GitHub,部署vercel,拉通make和DeepSeek自动化流程

首次把项目打包上传托管平台,看似很简单,实则很多坑。

比如说打包代码时,涉及到隐私的.env文件不会被打包,所以部署vercel时,还需要在平台设置信任令牌。

比如说提交代码时,点击commit前,需要在message中填写修改内容。

比如说make中的update by和notion的兼容性问题。。定位这个逼问题真的把我逼疯了,整整一个下午,和Gemini反反复复检查,甚至Gemini都出现幻觉了,最后的最后,可算是定位到这个兼容性的逼问题上。太操蛋了。把我Gemini Pro额度都用光,操。

今日工作的一个小插曲是,构建make自动化流程时,我还和Gemini争论了一番。结果就是我输得一败涂地,然后理直气壮地用Gemini给的二次方案。

事情经过原委是这样的,我跟Gemini提了我的自动化需求,我在notion写文章,然后DeepSeek进行摘要总结,以便呈现在首页标题下,丰富首页信息流里的内容,并且选择了给到的make选项。Gemini根据我的需求,初步提的方案是make获取我notion上面的内容,然后过滤器选择AI Processing部分的内容,接着把获取的内容发送给DeepSeek进行摘要总结,然后返回信息,填入notion,再由网站抓取新内容进行发布。

我接受了这套方案,并且着手执行。过程中出现了bug,就是前文提到的那个update by的兼容性问题。Gemini在解决问题时发现了另一个问题,就是第二个notion节点之后,因为文章分段,会导致好几个文本内容,相当于把文章按照段落拆分成好几个部分给DeepSeek处理了。结果就是DeepSeek收到了好几个请求,然后返回好几个摘要。耗时耗力耗token。

这不是我想要的结果,但是我以为这是前置bug导致的。所以当我解决了前置bug时,我拒绝了Gemini提议的在第二个notion节点和http模块之间添加文本聚合器这一想法。

我啊,有时候还是太自以为是了。

跟Gemini一起干活时,自己的一些工程思维被Gemini夸了,也是收获了一波小确幸那般的迷之满足。人工智能的智商和情商也是可以很在线的嘛。

最后,完整拉通了make自动化流程,并且在初版方案上完善了许多许多,时间到了凌晨1点多。心满意足地躺被窝。大雨过后,原本40°C的广州甚至有了一丝凉意。

项目进度:

代码打包上传云托管平台
拉通vercel,完成首次做出公网链接
网站版面设计优化,包括个人经历板块、项目经理板块、摄影板块和信息流feed
拉通make自动化工作流和DeepSeek AI处理流程
🚧待开发: divider

退一步海阔天空

2026年5月30日,天气晴间多云

感觉到自己已经开始逐渐沉浸到这个项目中了,今早洗漱完准备去吃早餐,看到我妈在家,我问了一句,你今天不用上班吗?我妈说今天周六。

今天就两个比较无奈的事情啦。

一个是代码没有问题,但是开发平台版本没有升级到最新,导致新技术无法使用。然后还有配套软件也需要更新到最新平台,否则还是会出现运行错误。

另一个就是想法受限于技术。本来是希望能够针对移动设备,引入阶段性阅读。因为有一些文章会比较长嘛,然后我想要在移动设备上,把文章分章节,然后分页阅读。

我希望尝试引入进度可见性的阅读机制,去提升阅读兴趣,毕竟现在大家都挺浮躁的,静下心来阅读是一件挺难的事情。

遗憾的是,受限于当前的技术,几个想法要么被自己否定,要么被Gemini否定。只好放弃,等日后技术完善啦。

真是血泪教训,额度触底之后,自动切换到flash lite,继续使用写代码真的一塌糊涂,把我原来写好的代码弄得想死。最后回调到接近2点,还tm搞失眠了。

也学会了举一反三。

我跟Gemini提出一个修改点以及修改思路,大概就是我希望前端能够动态调整内容显示。但是Gemini指出了我思路里的错误,并且给了我建议,告诉我其实在notion端就可以简单实现相关功能。后面有类似设计时,我已经可以直接跟Gemini交流实现方法,并付诸实效。

今天定版信息流页设计。

项目进度:

网站前端文章抓取显示优化,只抓取和显示已发布的文章,草稿和处理中的不发布和显示
调整feed内容显示适配横屏和竖屏
优化网站交互逻辑,当随笔碎片到达浏览器顶部时,随笔碎片停住成为表头,文章列表滑动。想法是给文章列表增加一个区域,区域内滑动是文章列表滑动,区域外滑动是网站页面滑动。
构建文章内容二级页面,也就是点击文章标题可以看到文章了。尝试加入排版自动优化功能。
notion编辑文章时,自动添加创建时间,添加最后修改时间,添加修改记录
feed置顶功能
notion后台文章按照时间排序
网站前端显示文章分类功能
把notion文章列表的常用格式映射到网站前端显示上,Gemini称这是在搭积木。在搭建图片积木时,Gemini反应notion上的图片是一个限时链接。我选择了云端图床的办法来解决这个问题,notion文章更新后,make触发vercel,然后抓取notion文章图片,存储在vercel上,成为永久图片。
文章页针对横屏和竖屏进行排版优化,引入阶段性目标概念,把每一个二级标题下的内容做成卡片,让长文更易于阅读(技术性问题,无法实现)
优化首页进入文章页以及文章页返回首页的动画和逻辑

我们先来质疑你的前提:“把 iPhone 打开 App 的动画添加到网页上”。

作为老兵,我必须指出你的盲点:网页(Web)和原生应用(App)的底层物理引擎是完全不同的。

在传统的网页架构(MPA,多页应用)中,你从“首页”点击进入“文章页”,浏览器的底层动作是:把首页这栋房子彻底拆掉,然后重新建一栋叫文章页的房子。既然房子都被拆了,你怎么可能在两栋房子之间做平滑的过渡动画?所以传统网页的跳转,永远伴随着白屏闪烁。

但你今天运气很好,你选用的框架是 Astro。

Astro 底层集成了一个堪称现代前端黑魔法的 API:View Transitions(视图过渡)。

它的逻辑是:不再拆房子。当你点击链接时,它在后台悄悄把新页面的数据拉过来,然后像“虫洞”一样,把首页的元素 直接形变(Morph) 成文章页的元素。

为了实现 iPhone 级别的原生感,我们将采用 Shared Element Transition(共享元素过渡)。

具体策略:我们将首页卡片上的“文章标题”,与详情页的“大标题”进行物理绑定。当你点击时,其他背景会柔和淡出,而这个标题会直接从卡片里飞出来,平滑放大到详情页的顶部。这就是典型的 iOS App Store 或相册的打开交互。

要打通这个虫洞,你需要改造三个文件。

🚧待开发: divider

破局

2026年5月31日,天气多云

今天可以说是相当高兴了,因为我想到了文章内容页在移动设备上分页阅读新方案,并且成功在前端实现,效果杠杠的。

今天定版文章阅读页,着手打造个人信息页。

项目进度:

优化文章页代码
  1. 优化长文逻辑,防止超长文章被静默截断,导致文章页内容不能完全显示全文。
  2. 采用异步并发方案,优化文章页多表格、多图片加载方案,从原先的顺序加载换到同时加载,跑满网络请求和磁盘I/O。
优化视觉效果和横屏显示方案(手机横屏和电脑横屏)
  1. 整体页面的留白比例或者中英文字体排印的对齐问题
  2. 弹出菜单选项显示优化
  3. 引用文本视觉优化
文章内容页定版。
着手个人页面构建
  1. 首页版图设计
  2. 个人简历页设计
  3. 生活记录页设计
  4. 打造两条Siri捷径,用途是自动上传运动数据、地理位置数据,用来填充日常生活
🚧待开发: divider

首页设计定版

2026年6月1日,早上下了会雨,多云,但是太阳很晒

“摄影集”版块:3D 视差与空间重构
  1. 交互:实现了高级的 3D 物理遮挡效果。文字被包裹在底层原图(hero-bg.jpg)与顶层透明前景(hero-mountain-front.png)之间,配合悬停放大产生错位视差。
  2. 响应式:解决了竖屏“画幅陷阱”。使用 min-h-[350px] object-cover 锁定移动端物理高度,并分离了多端 Y 轴坐标(手机端文案上移至负空间 top-[8%],PC 端保留物理遮挡 top-[16%])。
全局按钮:DOM 解耦与 Gooey 流体动效
  1. 架构:彻底解决了 CSS 悬浮动画与 JS Magnetic(磁性吸附)的控制权冲突。实施了**“三层 DOM 解耦”**(外层负责 Y 轴抬升、中层负责磁性吸附、内层负责视觉阴影),消除了底部的“幽灵阴影”色块残留。
  2. 动效:在 Hero 与 Projects 版块引入了 SVG 驱动的 Gooey(水滴拉丝融合)滤镜。
  3. 视觉克制:为了配合 Gooey 滤镜的光学计算边缘,全站按钮舍弃了 Liquid Glass(毛玻璃),统一降维到极其干净的纯色实心深色(bg-zinc-800)。
Hero 版块:核心 CTA(转化点)提权
  1. 视觉工程:打破了按钮组的视觉平均主义。将“工作履历”按钮设定为 Primary CTA,通过高反差极昼配色(bg-white text-zinc-950)、常驻白光阴影及字重加粗,强行锁定用户视觉焦点。
  2. 防御性设计:手机端(flex-col)增加了 gap-6 的垂直防粘连间距,防止 Gooey 滤镜在竖屏下意外触发融合。