"关于我"页面创作之旅

type

status

date

slug

summary

🌟 一切的开始：那个灵光一闪的夜晚

故事要从一个月黑风高的夜晚说起（好吧，其实就是个普通的工作日晚上）——我对着屏幕刷着GitHub上的个人主页模板，越看越觉得"不对劲"：要么千篇一律像简历模板，要么功能堆砌到加载卡顿。突然脑子叮的一声💡："为什么不做一个既有技术范儿，又能装下我所有奇思妙想的页面？"

作为常年和后端打交道的开发者，我其实藏着颗"前端设计心"。想展示Java、Go这些技术栈，也想放MBTI人格、喜欢的黑胶唱片这些小细节。于是，伴随着键盘敲击声，这个"关于我"页面的第一行HTML（和第一杯咖啡☕）诞生了。

🎨 设计思路：把页面做成"个性便当盒"

我对设计的要求很明确：专业不呆板，有趣不杂乱。毕竟INFJ的细节控属性，不允许页面有"将就"的地方。

🍱 便当盒布局：信息分区的艺术

参考时下流行的Bento Grid布局，我把页面拆成了一个个"便当格子"：

左上角「主菜区」：头像+在线状态+社交链接（feat(about): 添加社交平台分享优化和版权年份动态更新），一眼抓住重点

右上角「配菜区」：个人简介+座右铭，用渐变色文字增加层次感（feat(css): 优化英文 bio 文本样式及技术标签颜色配置）

中间「加餐区」：技术栈3D球、访问统计、MBTI人格卡片，藏着最花心思的交互

底部「甜点区」：开源项目列表+博客文章（feat(about): 优化项目展示和评论系统），展示动态内容

这种布局就像装便当，每一格都有自己的味道，拼在一起又和谐统一。为了让移动端也好看，我还做了响应式适配——小屏幕时格子会自动堆叠（feat(about): 优化统计区域响应式布局和样式），不会挤成一团。

🧊 玻璃态美学：让页面"透"起来

为了摆脱传统页面的厚重感，我选择了玻璃态设计。白天模式清透如冰，黑夜模式带点霓虹微光，就像把代码写成了可视化的情绪。

光调这个模糊度和阴影参数，我就提交了5次代码（feat(css): 添加玻璃态卡片样式、style(css): 调整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有过"爱恨情仇"，欢迎在评论区分享你的故事，让我知道我不是一个人🤣！

破破烂烂的作品：➡️ (关于我-Honesty)