这个《龙珠同人官网》的项目，我不是为了炫技或者接活儿才做的。去年年底我那个负责的大项目崩了，赔了一大笔钱，老板看我不爽，天天找茬。我一怒之下，把辞职信往桌上一摔，走人了。回家之后，我整个人都蔫了，躺了半个月什么都不想干。心情糟透了。
后来我无聊地开着电视，正好在重播《龙珠Z》的魔人布欧篇。童年的热血一下子又被勾起来了。我当时就寻思着，光看不过瘾，不如自己动手搞点东西，把这段时间学到的新玩意儿，用在一个纯粹让自己开心的项目上，找回点乐趣。这一下子，就启动了这个同人官网的实践。
确定核心需求与技术选型
我明确了几个点：它必须是一个快速、轻量，而且看起来要很“赛亚人”风格的网站。之前在公司天天折腾那些老旧的Java框架，这回我果断抛弃了它们。
- 我抓起了Vue3做前端框架，因为够快。
- 样式上，我选了TailwindCSS，不用写太多原生CSS，开发速度能飞起来。
- 数据存储方面，考虑到内容不会天天变动，我决定用本地JSON文件来模拟数据库。
技术栈拍板定案后，我就开始搜集资源了。
内容收集与界面实现
一个好的同人站，内容是王道。我翻遍了几个知名的图库和论坛，下载了几百张高清壁纸、漫画分镜和角色立绘。这些素材我全部分类整理，按照《龙珠》、《Z》、《GT》和《超》的顺序建了四个文件夹。
界面设计环节，我参考了官方设定集和一些游戏UI，主色调必须是橘黄和深蓝，配上金色高光，要有那种集气变身的爆发感。我画了三版草图，最终敲定了卡片瀑布流的布局，这样展示角色信息最直观。
然后就是动手开发了：
我撸起袖子，开始编写核心组件。
角色展示卡片组件：这是最重要的模块。我设计了一个能够快速切换“常态”和“变身”图片的组件，利用Vue的动态绑定实现了鼠标悬停时的状态切换。这个小细节，我调整了七八次，力求手感顺畅。
剧情时间线：我整理了关键剧情节点，使用了Timeline组件进行展示。资料都是我自己逐字录入的，确保了信息的准确性，虽然只是同人，但不能糊弄。
特效处理：为了模拟赛亚人变身时的光芒，我查阅了大量的CSS动画教程，最终用CSS Keyframes写了一个粒子爆发的循环动画，套用在特定的头部导航栏上，一下子就有了那味儿。
部署上线与后期优化
网站基本成型后，最大的问题来了：图片太多，加载速度慢得像在爬。我意识到需要优化。
我立即学习并引入了图片懒加载技术。配置好Intersection Observer后，只有当图片进入用户视野时才加载，速度马上提升了一大截。为了确保手机用户也能顺畅浏览，我针对性地调整了Tailwind的断点配置，保证移动端的适配性。
我购买了一个便宜的虚拟主机，配置好了Nginx反向代理，然后将代码打包并部署了上去。整个项目从无到有，我花了两个多星期，虽然比我之前给公司做的那些几百万的项目简单多了，但这回实践让我重新体会到了编程的乐趣。更重要的是，它治愈了我那段时间的低落情绪。这回实践笔记我记录得非常详尽，对我后续重回职场帮助巨大。