序章：八十二亿分之一的幸运

2024年底，

在中国，

超过 1,400,000,000 人；

全世界，

超过 8,200,000,000 人。

爱情，爱情，从来不是每个人都能拥有的幸运。

正如歌里唱的，

如果我们从不曾相识，

不存在这首歌曲。

可爱情的奇妙之处就在于：

在八十二亿分之一的概率中，

我，遇见了你。

就像冥冥中注定的重逢，

仿佛我们本就属于彼此，

只是直到此刻，才终于相聚。

1. 我想变得更好

我想变得更好

想和你相守一生。

316个课时的坚持，

5000道题目的淬炼，

340个夜晚的备考，

我们是勤奋的猪猪家，

是在职、零基础、一战一次过、历年最难法考的聪明猪组合。

但也远不止如此…

猪猪家的每一步，

都值得。

2. 屏息心跳的瞬间

人生不止努力和坚持，

也有那些令人屏息的瞬间，

像电影里的定格画面，

仿佛世界暂停

时间凝固

从河口湖畔的篝火

到七里滨的远山

每一个画面

都是我们的诗

本页面中的图片、视频均由 zbb 使用 iPhone 16 Pro Max 拍摄，未经任何调色、美颜或后期处理。
页面中的花火翻页特效，即 2024/11/02 成田建立70周年纪念花火大会的最终章：NARITA的黄金传说，其原始素材来自网络。

🎂 写在后面

这个礼物内容不算多，但 zbb 花了接近一个半月的时间用心准备。❤️

zbb 本来想在考试结束后更新自己的个人网页，可是忽然觉得，既然想做这件事，不如把猪猪家的家庭网页作为目标。经过一番挑选，发现了几个心仪的域名，但 zbb 转念一想，既然是家庭网页，还是应该让 zmm 一起挑选。我们最终意外发现了 zhuzhu.family，这就是这个礼物的开始。

zbb 最终的愿望是做出一个日记平台，我们两人可以把每次旅游的内容更新在上面。一个自己搭建的网页有许多好处：

1. 这是我们独一无二的家： 这个网站不依赖于其他厂商。微信可能会倒闭，朋友圈再也看不到，微博也可能消失。但 zhuzhu.family 一直会在。

2. 更高的自由度： 网页里的特效、动画，都是 zbb 一点点开发出来的，包括：

   • 前后交替、有立体感的图片
   • 点击就能播放的视频
   • 滑动时变换色彩的图片
   • 下雪特效和烟花特效 🌸🎆 从每一处文字的字体、间距到大小，都是 zbb 设计的。

🚧 搭建网页的难处

1. zbb 本质不是前端开发
   一开始 zbb 花了 14 - 21 天摸索前端开发的技能树，做出来的外观很不好看，严重打击了 zbb 的信心。不过 zbb 想，努力后续就能越做越好。当时 zbb 希望这个网页能比自己的个人网页更好看。

2. 动态网页就像雇了一位全职”店员”
   运营一个动态网页的难处，就在于它需要一个“店员”——也就是服务器，全天候在岗。每当有人来到网页，店员就会根据需求去准备信息（提供服务）。但这个店员的工资可不便宜，一个月至少要￥50-100。如果店员很忙（比如访问量大），可能还需要多请几位“助理”，成本一下子就上去了。

3. 静态网页就像一块固定的”公告牌”
   相比之下，静态网页的维护成本很低，甚至是免费的。它就像在小区门口挂了一块公告牌，内容一旦写好了，就可以一直挂在那儿，来的人随时都能看到。不需要雇人值班。但问题是，这块公告牌的内容是固定的。如果后续想换内容，得把牌子拿回去重新制作，这就有点麻烦。

4. zbb的方案是“自动更新的智能公告牌”
   zbb最终选择了一种既省钱又方便的先进方案：搭建一个“智能公告牌”系统。zbb只需要在家里用简单的文字编辑器写下新内容，这套系统会自动把文字转换成一份全新的公告，并“神奇”地把它张贴到小区门口的公告牌上。不需要额外雇人值班，还能随时更新内容。这种方式不仅免去了长期的运营成本，还让zbb有更多精力专注在内容创作上。

🗓️ 开发日记

10月29日
zbb 初步上手了 Hugo 框架的整体技术内容，正式开启了 zzf-hugo 项目，但非常不熟悉，改一个字都寸步难行。

11月1日
终于成功让网页可以自动生成目录页！📁

11月6日
zbb 觉得苹果官网的滚动效果很好看，做出了初版的滑动特效烟花视频，可以让花火随着鼠标滚轮滑动出现。

11月8日
做出了全屏特效视频！🎥

11月12日
挑选了多种字体，最终固定下来。

11月13日
实现了 Parallax Effect，让图片移动与网页滚动异步进行，同时通过计算让图片在滑动中改变灰度。

11月15日
做出了三联画廊效果，并且有动态的圆润信息弹出框。同时写完了生日页面的第一篇内容。

11月16日
zbb写完了生日页面的第二篇内容，因为总共计划写4篇，所以可以说完成了50%。zmm还以为zbb进度喜人，其实对应的特效都还没做完。

11月18日
从零做出了无限连续的彩色泡泡效果。每个泡泡的位置是随机生成的，形状通过 50% 圆角的圆角矩形完成。

11月25日
加入了烟花特效，每一处烟花都是数学的集合。最终挑出了 6 组颜色组合：樱花、海洋微风、日落光线、森林低语、棒棒糖、星空魔法。既然都好看，那就都选上！点击蛋糕可以体验。

🎆 烟花颜色搭配

樱花： #ff0a54, #ff477e, #ff7096, #ff85a1, #fbb1bd, #f9bec7

海洋微风： #0077b6, #00b4d8, #90e0ef, #caf0f8, #ade8f4

日落光线： #ff4500, #ff7f50, #ffae42, #ffd700, #ffe4b5

森林低语： #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51

棒棒糖： #ff00e4, #ff80ed, #ffb3b3, #ffbdbd, #ffe4e1

星空魔法： #3c096c, #9d4edd, #c77dff, #e0aaff, #ffc6ff

11月25日
zmm 试过点击三联画廊里最左边的视频吗？全屏会有下雪特效哦，猜猜看下雪特效是怎么做的？下雪特效 其实就是通过初速度=0的白色、浅灰、浅蓝烟花模拟全屏飘落实现的

雪花： #d9d9d9, #bfbfbf, #a6a6a6, #e0e6ed, #f2f5fa, #cfd8e5, #bcc9d8

11月28日
左下角加入了背景音乐的控制器，旋转的音符从矢量图到动画效果都是 zbb 自己实现的。

12月12日
zmm，生日快乐！
嘻嘻，直到今天zbb还在高强度的做修改，这个礼物之所以花了这么大的精力搭建框架，也是希望未来这个网站可以作为我们独有的几年网站，让zmm也可以参与网页创作。