本文最后更新于50 天前，其中的信息可能已经过时，如有错误请发送邮件到[email protected]
我用一个周末(在上个周末)，写了一个满是彩蛋的个人主页
总觉得个人主页不该只是一个冷冰冰的简历。
它应该是一个能代表我自己的小世界，一个藏着很多小惊喜的秘密基地。于是花了一个周末，用 Next.js 搭了这个主页，把所有我觉得好玩的交互都塞了进去。
网上好看的个人主页模板太多了，但总觉得少了点什么。千篇一律的头像、简介、项目列表，看完就忘。我想要一个能让访客记住的主页，一个能让他们忍不住说”哇，这个好有意思”的主页。
彩蛋是一种很奇妙的东西。它不是必须的，甚至大部分人都不会发现。但当有人偶然发现一个彩蛋时，那种惊喜感是任何精心设计的页面都无法比拟的。就像在路边捡到了一颗糖，虽然不值钱，但能开心一整天。
我把能想到的有趣交互都加进去了，现在已经有16个彩蛋了，而且还在不断增加中。
其实还有很多想法没来得及实现，比如输入特定的名字会触发专属彩蛋，还有点击特定次数会出现隐藏的小游戏。慢慢来吧，这个主页会一直更新下去的。
整个项目用的是 Next.js 16 App Router + Tailwind CSS + Framer Motion。
Next.js 真的太香了，零配置，开箱即用，部署也超级方便。Tailwind CSS 写样式的速度简直飞起，再也不用为了起类名而头疼。Framer Motion 则让动画变得异常简单，几行代码就能实现非常丝滑的过渡效果。
最麻烦的其实是彩蛋的实现。很多彩蛋都需要操作 DOM，在 React 里处理这些事情需要特别小心，很容易出现内存泄漏。还有就是各种状态的管理，要确保每个彩蛋都能正确触发和关闭。
不过最开心的还是看到自己的想法一个个变成现实。当第一个粒子特效成功跑起来的时候，我对着屏幕傻笑了好久。
部署用的是 Vercel，也就是 Next.js 的官方平台。
真的是一键部署，把代码推到 GitHub，然后在 Vercel 里导入仓库，点一下 Deploy 就完事了。自动 HTTPS，全球 CDN，还能自动部署预览，还免费。
当然，部署的过程也不是一帆风顺的。遇到了好几个坑，比如 Next.js 16 强制要求根布局，还有各种语法错误导致的构建失败。不过好在最后都解决了，现在只要把代码推到 GitHub，Vercel 就会自动更新。
这个主页现在已经上线了，
地址是 www.liseezn.top (或www.wewe.men/www.6tot.com)。如果你有空的话，可以去逛逛，看看能找到多少个彩蛋。
其实做这个主页的过程，比最终的结果更有意思。我在网上找了很多别人的彩蛋实现，也学到了很多新东西。最重要的是，我终于有了一个完全属于自己的小地方，一个可以随心所欲折腾的地方。
以后我还会继续往里面加更多好玩的东西，让这个小世界变得越来越有趣。如果你有什么好的想法，也欢迎告诉我。
毕竟，有趣的灵魂，总会相遇。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。