HTML+CSS+JS简历项目

通过网盘分享的文件个人主页 在线简历.zip链接: https://pan.baidu.com/s/1Dv4IA-iRpFGl36gR3O2LOg?pwd2n3u 提取码: 2n3u--来自百度网盘超级会员v7的分享先放结论如果你只想知道这套东西值不值得自己写值得但前提是你别把它当成练手项目。个人主页是少数几个能完全由你决定技术选型的项目。没有祖传代码没有历史包袱没有这个需求下周上线。你可以为了一个展开动画的顺滑度折腾半小时也可以因为max-height猜不准而把整个方案推翻重做。这种自由在业务项目里几乎没有。这篇文章记录我做完这套东西之后觉得真正值得讲的几个决策和坑。不是如何用 Flex 居中一个 div那种。一、成品长什么样一个单页七个区块区块内容头部头像、姓名、一句话介绍、4 个社交链接关于我个人简介 5 条技能进度条 12 个技术标签项目经历3 张卡片hover 上浮 主色横线展开点击展开技术细节教育背景与获奖时间轴学历节点用主色、获奖节点用点缀色区分联系方式邮箱 / 电话 / 微信每项带一键复制交互三套配色切换、深色模式、顶部阅读进度条、滚动入场输出Ctrl P直接导出一份排版干净的 PDF 简历技术约束是硬性的纯 HTML CSS 原生 JavaScript无框架、无构建工具无第三方 UI 库、无图标库图标全部内联 SVG 手写双击index.html就能打开最后一条约束比它看上去的要重要得多。后面会讲为什么。二、配色先定规则再挑颜色配色方案我改了三次才定下来。最后用的是靛蓝主色 琥珀点缀 冷调中性灰三个判断依据主体必须冷色。个人主页的第一读者是面试官和 HR蓝色系传达可信、稳定是这个场景里最不容易出错的。暖色主色容易显得轻浮。点缀必须暖色。全冷色会显得木讷、像企业内网。琥珀色只出现在三个地方标题下方的短线、时间轴的获奖节点、技能进度条的渐变末端。面积加起来不到 2%但整页就活了。中性灰要带蓝调。#5A6270比纯灰#666更干净和主色是同一个色温家族。纯灰放在蓝旁边会显脏。然后是让这套东西能复用的关键变量分三层。组件代码里不出现任何品牌色变量只写color: var(--text-2)、background: var(--bg-card)。结果就是 3 套配色 × 2 种明暗 6 种主题组件代码一行都不用改。加第四套配色只需要复制一段 6 个值的变量块。有一个坑必须提深色模式下品牌色要单独提亮否则#2C5FE8放在#14161C上根本看不清。而且因为两个属性选择器优先级相同必须用双属性选择器把优先级抬上去三、折叠展开别再猜max-height了这是我觉得整份代码里最值得抄走的一个技巧。点击卡片展开详情这个需求大部分人的第一反应是两个问题猜大了动画会有明显延迟感前 300px 是空白在滚猜小了内容被切掉。而且内容一旦改动就要重新猜。正确做法是用grid-template-rows从0fr过渡到1fr三个细节min-height: 0必须加。grid 子项的默认min-height是auto会被内容撑开导致0fr根本收不回去。visibility的延迟是故意的。收起时要等高度动画跑完.42s再隐藏展开时要立刻可见delay: 0s。这样既不影响动画又能让隐藏内容不被 Tab 聚焦、不被读屏软件念出来。不要用hidden属性。它会把元素设成display: none过渡直接失效。还有一个容易被忽略的布局细节grid 默认align-items: stretch只要有一张卡片展开同一行的其他两张会被一起撑高底部留下大片空白。改成start每张卡片只占自己的高度。四、file://下的两条硬约束双击就能打开这一条约束直接砍掉了两个常用工具。第一不能用 ES Module。浏览器对file://的模块加载执行严格同源策略import会被直接拦下来。所以全部代码用普通脚本 IIFE 写好处是每个模块互不依赖删掉任意一块都不会影响其余比一堆import更好维护。第二不能用fetch()读本地文件。想把项目数据放data.json里优雅管理在file://下不行。所以数据全部内联在 HTML 里——对个人主页这种量级的内容来说这反而更好改。连带影响剪贴板 API 可能被拒。navigator.clipboard.writeText()需要安全上下文file://在部分浏览器下会被拒绝。所以一键复制必须留降级路径这段兜底代码看起来像上个时代的产物但它确实救过场。五、让 JS 挂掉时页面依然可用滚动入场动画的常规写法是问题很严重如果 JS 加载失败或被用户禁用整页内容会永久不可见。一个白屏的个人主页。改成让 JS 主动认领隐藏状态.js类在一个head的同步脚本里加上这个脚本必须放在link relstylesheet之前同步执行否则防闪屏没意义——CSS 已经用默认主题渲染过一帧了。另外两个无障碍细节这里没有直接写animation: none而是把时长压到0.001ms。这是更稳妥的写法直接移除动画会让依赖animationend事件、或依赖animation-fill-mode拿到终态的元素停在起始帧。这个项目里唯一的动画是正在看机会那个呼吸小绿点两种写法其实都行但按惯例用了前者。滚动监听的按钮全部用requestAnimationFrame节流滚到底时进度条要补一个边界判断否则会停在 99.84%六、打印样式一份内容两种输出个人主页有个隐藏用法面试时对方常要一份 PDF。既然 CSS 已经写好了不如让它自己变成简历。注意这里有个跨媒体状态迁移的坑屏幕上的折叠状态、动画状态都是 JS 控制的打印时必须用!important强行盖掉否则导出的 PDF 就是一堆内容藏在折叠区里。还有几个反直觉的地方打印时深色模式必须被覆盖。用户如果正在用深色模式导出 PDF拿到的是黑底白字打印出来一片糊。page-break-inside: avoid加在卡片和时间轴条目上避免一条经历被撕成两页。打印版不需要社交图标——点不了而且邮箱在联系方式里已经有了。在浏览器里Ctrl P→ 目标选另存为 PDF就是一份排版干净的简历。七、响应式移动优先两个断点只有两个断点因为再多就是为了写而写档位布局 768px全部单列头部改纵向居中导航折成第二行可横向滚动复制按钮只留图标768 – 1023px项目两列关于我从左右分栏改成上下堆叠≥ 1024px容器 1080px项目三列关于我左右分栏两个值得说的处理。吸顶导航在手机上折成两行。姓名和主题切换留在第一行导航锚点换到第二行并允许横向滚动加scrollbar-width: none藏掉滚动条技能进度条在窄屏换行。桌面是「名称 | 进度条 | 百分比」三列手机上进度条要独占一行否则条子会被压成一条线还有一条容易忘的吸顶导航变高之后锚点跳转会被挡住。用scroll-padding-top解决比给每个标题加margin-top干净八、我在真实浏览器里验证了什么这部分是整篇文章里我最想分享的因为方法比结论更值钱。我看不到截图模型不支持读图所以改用Chrome 无头模式 CDP 协议直接向浏览器查询计算样式和 DOM 状态。拿到的是一堆可以断言的数字比人眼看截图更靠谱——人眼看不出一张卡片宽度是 322.656px 还是 323px也看不出 1008px 视口下有没有横向溢出。验证结果驱动脚本的核心就是这几步Node 22 自带全局WebSocket和fetch不需要装任何依赖