今天突然想折腾下个人主页，顺手把折腾过程记下来。最近总看到别人炫酷的个人网页，寻思着咱也不能太寒酸对？说干就干！

第一步：满世界找参考

先抱着手机刷了俩钟头，专扒拉那些看得顺眼的个人主页。发现牛啤的页面都有共同点：一屏就能抓住眼球。要么是超大字的职业身份怼脸上，要么整段骚话配动态效果。存了十几张截图当素材，越看越手痒。

第二步：抄起纸笔瞎划拉

翻出吃灰的笔记本开始鬼画符。左边画个自拍区，右边堆文字介绍，底下塞作品集——画完怎么看都像居委会宣传栏。气得把纸揉成团扔了，干脆打开电脑直接整活。

• 顶部导航栏：死活只挤进去四个按钮，“关于我”和“作品集”这俩词还老打架
• 大标题区域：试了八种字体用了系统自带黑体，真香！
• 技能图标：本来想摆得整整齐齐，结果活像麻将牌散了一地

第三步：配色差点整瞎眼

最开始用荧光绿配亮粉，刚保存就后悔得想戳屏幕。老老实实扒了配色网站，偷了套灰蓝+米白的组合。把自拍照P成统一色调往页面一怼，嚯！终于像个人样了。

（这里放张配色方案的截图）

第四步：技术翻车现场

本以为两小时搞定，结果卡在响应式布局上。手机上看头像跑到文字头顶上去了，活像带了个大头娃娃头盔。折腾到半夜才搞明白要用Grid布局分区，拿媒体查询给手机屏单独写样式。早知当初直接扒现成模板！

最终成果

熬到凌晨三点总算能看了：头像缩到合适尺寸，技能图标排成甜甜圈，作品集用卡片式叠放。手机划拉起来也不乱套了。虽然比不上大神作品，但好歹是咱亲自折腾出来的！（这里放张成品的手机和电脑对比图）

回头瞅瞅设计稿，发现实践过程中那些花里胡哨的想法全被砍了。简单直给才是王道朋友们！