我用一个周末(在上个周末)，写了一个满是彩蛋的个人主页

总觉得个人主页不该只是一个冷冰冰的简历。

它应该是一个能代表我自己的小世界，一个藏着很多小惊喜的秘密基地。于是花了一个周末，用 Next.js 搭了这个主页，把所有我觉得好玩的交互都塞了进去。

为什么要做这样一个主页

网上好看的个人主页模板太多了，但总觉得少了点什么。千篇一律的头像、简介、项目列表，看完就忘。我想要一个能让访客记住的主页，一个能让他们忍不住说”哇，这个好有意思”的主页。

于是我想到了彩蛋。

彩蛋是一种很奇妙的东西。它不是必须的，甚至大部分人都不会发现。但当有人偶然发现一个彩蛋时，那种惊喜感是任何精心设计的页面都无法比拟的。就像在路边捡到了一颗糖，虽然不值钱，但能开心一整天。

我都藏了些什么

我把能想到的有趣交互都加进去了，现在已经有16个彩蛋了，而且还在不断增加中。

• 鼠标移动的时候，会随机飘出彩色的粒子和爱心
• 试试输入经典的 Konami 代码 ↑↑↓↓←→←→BA，会有惊喜
• 点击左上角的 Logo，会弹出一个隐藏的彩蛋弹窗
• 滚动到页面最底部，会有一个小火箭飞上天
• 右上角可以切换黑夜和白天模式，过渡动画超丝滑
• 页面中间的文字会随机切换，都是一些小提示
• 点击页面空白处，会随机飘出各种表情
• 页面中间有一个看不见的区域，鼠标移过去5次，会出现一个秘密按钮
• 打开网站的时候，会有一个开屏加载动画
• 所有卡片悬停的时候都会有弹跳效果
• 在输入框里输入 “secret”，会解锁一个隐藏彩蛋
• 凌晨0点到6点打开网站，顶部会出现”快去睡觉”的提示
• 右键菜单被我改成了自定义的，里面有几个好玩的功能
• 点击 Logo 还会自动播放背景音乐
• 右键菜单里有一个碎屏特效，点一下整个屏幕都会炸开
• 所有的卡片都可以拖拽，想拖到哪里就拖到哪里

其实还有很多想法没来得及实现，比如输入特定的名字会触发专属彩蛋，还有点击特定次数会出现隐藏的小游戏。慢慢来吧，这个主页会一直更新下去的。

技术上的一些小细节

整个项目用的是 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)。如果你有空的话，可以去逛逛，看看能找到多少个彩蛋。

其实做这个主页的过程，比最终的结果更有意思。我在网上找了很多别人的彩蛋实现，也学到了很多新东西。最重要的是，我终于有了一个完全属于自己的小地方，一个可以随心所欲折腾的地方。

以后我还会继续往里面加更多好玩的东西，让这个小世界变得越来越有趣。如果你有什么好的想法，也欢迎告诉我。

毕竟，有趣的灵魂，总会相遇。