最后更新: 2025-11-27
次查看
字数 2290阅读时长≈ 6 分钟
about-page-creation-100-git-commits-pwa-journey
这篇文章记录了我如何从一个简单的想法，通过100多次Git提交，逐步打造出现在的"关于我"页面。涵盖设计思路里的便当盒布局与玻璃态美学、技术实现中的3D技术球坑点、和API的拉锯战，以及最终因PWA影响核心功能而忍痛放弃的纠结过程。这是一场充满像素级纠结、bug大战与创作快感的真实开发故事。
🌟 一切的开始：那个灵光一闪的夜晚
故事要从一个月黑风高的夜晚说起（好吧，其实就是个普通的工作日晚上）——我对着屏幕刷着GitHub上的个人主页模板，越看越觉得"不对劲"：要么千篇一律像简历模板，要么功能堆砌到加载卡顿。突然脑子叮的一声💡："为什么不做一个既有技术范儿，又能装下我所有奇思妙想的页面？"
作为常年和后端打交道的开发者，我其实藏着颗"前端设计心"。想展示Java、Go这些技术栈，也想放MBTI人格、喜欢的黑胶唱片这些小细节。于是，伴随着键盘敲击声，这个"关于我"页面的第一行HTML（和第一杯咖啡☕）诞生了。
🎨 设计思路：把页面做成"个性便当盒"
我对设计的要求很明确：专业不呆板，有趣不杂乱。毕竟INFJ的细节控属性，不允许页面有"将就"的地方。
🍱 便当盒布局：信息分区的艺术
参考时下流行的Bento Grid布局，我把页面拆成了一个个"便当格子"：
- 左上角「主菜区」：头像+在线状态+社交链接（feat(about): 添加社交平台分享优化和版权年份动态更新），一眼抓住重点
- 右上角「配菜区」：个人简介+座右铭，用渐变色文字增加层次感（feat(css): 优化英文 bio 文本样式及技术标签颜色配置）
- 中间「加餐区」：技术栈3D球、访问统计、MBTI人格卡片，藏着最花心思的交互
- 底部「甜点区」：开源项目列表+博客文章（feat(about): 优化项目展示和评论系统），展示动态内容
这种布局就像装便当，每一格都有自己的味道，拼在一起又和谐统一。为了让移动端也好看，我还做了响应式适配——小屏幕时格子会自动堆叠（feat(about): 优化统计区域响应式布局和样式），不会挤成一团。
🧊 玻璃态美学：让页面"透"起来
为了摆脱传统页面的厚重感，我选择了玻璃态设计。白天模式清透如冰，黑夜模式带点霓虹微光，就像把代码写成了可视化的情绪。
🔧 技术实现：那些"痛并快乐着"的代码时光
开发过程就像闯关，每个功能都是一个小boss——有的轻松拿下，有的卡了我整整两天。
🪐 3D技术球：最炫也最坑的"炫技项"
最让我又爱又恨的就是这个3D技术栈球体。想象中：技术标签在三维空间旋转，鼠标拖动能互动，多酷！现实中：三角函数算到脱发，性能优化改到崩溃。
核心思路是用球面坐标公式计算每个标签的位置，再通过CSS 3D变换实现旋转效果：
坑点来得猝不及防：标签一多就卡顿，手机上直接掉帧。我只能疯狂优化：合并DOM操作（perf(about): 优化页面渲染性能和动画流畅度）、用requestAnimationFrame控制动画帧率（perf(about): 优化页面初始化），甚至给标签加了"距离越远越小"的视觉效果。当终于看到球体流畅旋转时，我差点拍桌子叫好🎉！
📊 数据获取：和API的"拉锯战"
为了让页面"活"起来，我需要拉取GitHub项目、博客文章、访问统计这些动态数据。这过程简直是和API斗智斗勇：
- GitHub API限流：刚开始没加缓存，频繁请求直接被拒。后来用localStorage缓存数据，加了过期时间
- RSS解析乱码：博客RSS地址返回的编码不对，试了3个解析库才搞定
- 加载超时白屏：用户网络差时，API请求卡住导致页面空白。赶紧加了超时控制，超时就显示本地备份数据
现在数据模块既能实时更新，又不怕网络波动，这波"拉锯战"我赢了😎！
🐛 填坑日记：PWA的"甜蜜与心碎"
开发路上最戏剧性的，莫过于和PWA的"爱恨纠葛"。
📱 PWA初体验：甜蜜的开始
想着"让用户把页面装成App"多酷，我兴致勃勃地开始搞PWA：
- 写manifest.json配置图标和启动页（fix(pwa): 修复 manifest 相对路径）
- 编Service Worker处理缓存（ feat(pwa): 实现PWA支持，支持离线访问）
- 优化缓存策略：静态资源永久缓存，API数据临时缓存（feat(pwa): 优化PWA配置和缓存策略）
当手机上弹出"添加到桌面"的提示时，我甚至截图发了朋友圈——感觉自己离"全栈大神"又近了一步😂。
💔 PWA终局：不得不说的"分手"
甜蜜没持续多久，问题就像多米诺骨牌一样倒下：
- 3D技术球动画卡顿到"掉渣"，鼠标拖动时球体像被粘住一样
- 开源项目列表和博客文章永远显示旧数据，清除缓存也没用（Service Worker缓存优先级太高）
- 偶尔页面加载时，玻璃态卡片会先变成"白板"，3秒后才渲染样式
我连续两天泡在Service Worker的调试里：改缓存匹配规则（feat(pwa): 更新PWA图标路径并缓存图片）、延迟SW注册（fix(sw): 延迟注册Service Worker）、甚至尝试"缓存白名单"，但问题始终反复。
某个凌晨，我盯着卡顿的技术球突然想通了：炫酷功能不能牺牲核心体验。咬咬牙，执行了"分手操作"——删除所有PWA相关代码（refactor(pwa): 移除PWA相关配置和Service Worker实现）。
现在网站更新上去了，但全球内容分发缓存还在"捣乱"，预计要等几天才能完全显示正常。这也算给我上了一课：不是所有流行功能都适合自己的项目，学会取舍比盲目堆砌更重要。
🎯 最终效果：我的"数字自画像"
历经100多次提交（光about页面相关的就有70+次），页面终于长成了我想要的样子：
白天模式：清爽通透的玻璃态卡片，技术球色彩鲜明，适合白天浏览
黑夜模式：微光特效拉满，文字和标签带渐变发光，深夜逛也不刺眼
功能上既有"硬核"的技术展示（3D球、GitHub统计），也有"柔软"的个性表达（MBTI、兴趣标签），就像我——一个爱代码也爱生活的开发者✨。
💡 创作感悟：代码里藏着温度
回头看这半个多月，最难忘的不是最终效果，而是那些"折腾"的瞬间：
- 为了1px的边框圆角，反复调整CSS，强迫症得到治愈的爽感
- 解决3D球卡顿后，对着屏幕傻笑5分钟，觉得自己超厉害的成就感
- 删除PWA代码时的纠结，像丢掉一件喜欢但不合身的衣服的遗憾
这些情绪都藏在每一次Git提交里，让冷冰冰的代码有了温度。原来开发不仅是实现功能，更是用技术表达自己的过程。
📝 结语：写给想做个人页面的你
如果你也想打造一个属于自己的"关于我"页面，我的建议是：
1. 从"为什么"开始：想清楚你要展示什么，给谁看——这决定了设计和功能的优先级
2. 小步快跑：先做最小可用版（比如只有头像和简介），再慢慢加功能（参考我先加统计再做3D球的节奏）
3. 和bug做朋友：每个坑都是经验，比如我现在对Service Worker的理解比以前深10倍
4. 享受折腾：毕竟，这是你的"数字名片"，多花点心思值得
最后，欢迎大家来我的"关于我"页面逛逛，要是发现bug或者有优化建议，评论区尽管提——毕竟，代码永远在迭代，就像我们永远在成长～
PS：如果你也和PWA有过"爱恨情仇"，欢迎在评论区分享你的故事，让我知道我不是一个人🤣！