周聿铭个人简历 HTML 单页源码（深绿双栏）

本源码是一款专业的个人简历 / CV 单页模板，采用经典的左右双栏布局：左侧为个人信息区（头像、联系方式、技能条、语言），右侧为详细内容区（简介、工作经历时间线、项目作品、教育背景）。配色选用沉稳的深青绿色系，传递专业与可信赖感。

设计亮点包括：技能进度条用纯 CSS 实现，可自由调整百分比宽度；工作经历采用垂直时间线样式，每段经历用圆点标记并配以日期胶囊标签；项目作品以卡片网格展示，悬停时有上浮动效。整页支持打印优化（@media print），可直接 Ctrl+P 输出为 PDF 简历。

适合求职中的前端工程师、设计师、产品经理等需要在线展示个人履历的人群；也适合学生制作求职简历或作品集封面。修改 HTML 中的文字、技能百分比与经历条目即可生成自己的专属简历页。

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>周聿铭 · 个人简历</title>
<style>
:root{
  --ink:#1f2430; --sub:#6b7488; --line:#e6e9f0; --bg:#eef1f6; --card:#fff;
  --accent:#0f6f6c; --accent2:#14a19c; --chip:#eef7f6;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.75;padding:34px 16px}
.sheet{max-width:1000px;margin:0 auto;background:var(--card);border-radius:18px;overflow:hidden;
  box-shadow:0 18px 60px rgba(31,36,48,.12);display:grid;grid-template-columns:320px 1fr}

/* LEFT */
aside{background:linear-gradient(170deg,#123c3b,#0f6f6c 60%,#14a19c);color:#eaf6f5;padding:38px 28px}
.avatar{width:112px;height:112px;border-radius:50%;margin:0 auto 18px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:2px solid rgba(255,255,255,.4);font-size:40px;font-weight:800;letter-spacing:1px}
aside h1{text-align:center;font-size:25px;font-weight:800;letter-spacing:3px}
aside .role{text-align:center;font-size:13.5px;letter-spacing:2px;opacity:.85;margin-top:6px}
.abox{margin-top:30px}
.abox h3{font-size:13px;letter-spacing:3px;opacity:.75;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.25);margin-bottom:14px}
.info{font-size:14px;display:flex;gap:10px;padding:5px 0;word-break:break-all}
.info i{font-style:normal;opacity:.8;width:18px;flex:none}
.skill{margin-bottom:14px}
.skill .t{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:6px}
.bar{height:6px;border-radius:99px;background:rgba(255,255,255,.22);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.6)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tags span{font-size:12.5px;padding:4px 11px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.25)}

/* RIGHT */
main{padding:40px 40px 46px}
.sec{margin-bottom:34px}
.sec:last-child{margin-bottom:0}
.sh{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.sh b{font-size:19px;letter-spacing:2px}
.sh .dot{width:10px;height:10px;border-radius:50%;background:var(--accent2);flex:none}
.sh .ln{flex:1;height:1px;background:var(--line)}
.summary{color:#48506a;font-size:15px}

/* timeline */
.tl{position:relative;padding-left:26px}
.tl::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.item{position:relative;padding-bottom:24px}
.item:last-child{padding-bottom:0}
.item::before{content:"";position:absolute;left:-25px;top:8px;width:12px;height:12px;border-radius:50%;
  background:#fff;border:3px solid var(--accent2)}
.item .hd{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.item .pos{font-size:16.5px;font-weight:700}
.item .co{color:var(--accent);font-size:14px;font-weight:600}
.item .date{font-size:13px;color:var(--sub);white-space:nowrap;background:var(--chip);padding:2px 10px;border-radius:99px}
.item ul{margin-top:8px;padding-left:18px;color:#4d5570;font-size:14.3px}
.item li{padding:2px 0}

/* projects */
.projs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.proj{border:1px solid var(--line);border-radius:13px;padding:16px 18px;transition:.25s}
.proj:hover{border-color:var(--accent2);box-shadow:0 10px 26px rgba(15,111,108,.12);transform:translateY(-4px)}
.proj b{font-size:15.5px;display:block;margin-bottom:5px}
.proj p{font-size:13.5px;color:var(--sub)}
.proj .st{margin-top:9px;font-size:12.5px;color:var(--accent);font-weight:600}

/* edu */
.edu{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-left:3px solid var(--accent2);padding-left:14px}
.edu b{font-size:15.5px}
.edu span{color:var(--sub);font-size:13.5px}

@media print{body{background:#fff;padding:0}.sheet{box-shadow:none;border-radius:0}}
@media(max-width:820px){.sheet{grid-template-columns:1fr}main{padding:30px 24px 36px}}
</style>
</head>
<body>

<div class="sheet">

  <aside>
    <div class="avatar">周</div>
    <h1>周聿铭</h1>
    <div class="role">高级前端工程师 / 5 年经验</div>

    <div class="abox">
      <h3>联系方式</h3>
      <div class="info"><i>✉</i>zhouyuming.dev@example.com</div>
      <div class="info"><i>☎</i>138-0000-1234</div>
      <div class="info"><i>⌂</i>浙江 · 杭州（可远程）</div>
      <div class="info"><i>⚑</i>github.com/zhouyuming</div>
      <div class="info"><i>◉</i>zhouyuming.dev</div>
    </div>

    <div class="abox">
      <h3>核心技能</h3>
      <div class="skill"><div class="t"><span>TypeScript / JavaScript</span><span>95%</span></div><div class="bar"><i style="width:95%"></i></div></div>
      <div class="skill"><div class="t"><span>React / Next.js</span><span>92%</span></div><div class="bar"><i style="width:92%"></i></div></div>
      <div class="skill"><div class="t"><span>Vue 3 / Nuxt</span><span>85%</span></div><div class="bar"><i style="width:85%"></i></div></div>
      <div class="skill"><div class="t"><span>Node.js / 工程化</span><span>80%</span></div><div class="bar"><i style="width:80%"></i></div></div>
      <div class="skill"><div class="t"><span>UI 设计 / Figma</span><span>72%</span></div><div class="bar"><i style="width:72%"></i></div></div>
    </div>

    <div class="abox">
      <h3>技术标签</h3>
      <div class="tags"><span>Vite</span><span>Webpack</span><span>Tailwind</span><span>GraphQL</span><span>WebGL</span><span>Docker</span><span>CI/CD</span><span>性能优化</span></div>
    </div>

    <div class="abox">
      <h3>语言</h3>
      <div class="info"><i>中</i>普通话（母语）</div>
      <div class="info"><i>EN</i>英语 CET-6 · 可读写技术文档</div>
    </div>
  </aside>

  <main>

    <div class="sec">
      <div class="sh"><span class="dot"></span><b>个人简介</b><span class="ln"></span></div>
      <p class="summary">五年 Web 前端开发经验，长期负责中大型 B 端与 C 端产品的架构与落地。擅长组件体系设计、首屏性能优化与前端工程化改造，主导过三次从 0 到 1 的产品搭建，最快一次 6 周完成上线。习惯用数据说话，也乐于把踩过的坑写成文档留给团队。</p>
    </div>

    <div class="sec">
      <div class="sh"><span class="dot"></span><b>工作经历</b><span class="ln"></span></div>
      <div class="tl">
        <div class="item">
          <div class="hd"><div><span class="pos">高级前端工程师</span> · <span class="co">星澜科技</span></div><span class="date">2023.04 – 至今</span></div>
          <ul>
            <li>主导企业协作平台前端重构，模块化拆分后首屏加载从 4.2s 降至 1.3s。</li>
            <li>设计并开源内部组件库（68 个组件），被 5 条业务线复用，需求交付周期缩短 35%。</li>
            <li>搭建前端监控与灰度发布链路，线上白屏类事故同比下降 82%。</li>
          </ul>
        </div>
        <div class="item">
          <div class="hd"><div><span class="pos">前端工程师</span> · <span class="co">拓维网络</span></div><span class="date">2021.06 – 2023.03</span></div>
          <ul>
            <li>负责电商小程序与 H5 商城开发，大促期间稳定支撑单日 120 万 PV。</li>
            <li>推动 TypeScript 全量迁移，类型相关线上缺陷减少约 60%。</li>
            <li>与设计团队共建设计规范 Token 体系，还原度评审通过率提升至 98%。</li>
          </ul>
        </div>
        <div class="item">
          <div class="hd"><div><span class="pos">前端开发（实习 → 正式）</span> · <span class="co">云简信息</span></div><span class="date">2020.07 – 2021.05</span></div>
          <ul>
            <li>参与后台管理系统开发，独立完成权限、审批与报表三大模块。</li>
            <li>编写自动化表单生成器，同类页面开发耗时由 2 天压缩到 2 小时。</li>
          </ul>
        </div>
      </div>
    </div>

    <div class="sec">
      <div class="sh"><span class="dot"></span><b>项目作品</b><span class="ln"></span></div>
      <div class="projs">
        <div class="proj"><b>Atlas 组件库</b><p>基于 React + TS 的企业级组件库，含文档站与视觉回归测试。</p><div class="st">GitHub 1.4k Star</div></div>
        <div class="proj"><b>数据看板 Insight</b><p>可拖拽自定义看板，支持 20+ 图表类型与实时数据流。</p><div class="st">服务 300+ 内部用户</div></div>
        <div class="proj"><b>轻博客 Inkdrop</b><p>Next.js + MDX 静态博客主题，Lighthouse 满分。</p><div class="st">开源 · MIT</div></div>
      </div>
    </div>

    <div class="sec">
      <div class="sh"><span class="dot"></span><b>教育背景</b><span class="ln"></span></div>
      <div class="edu">
        <div><b>浙江理工大学 · 计算机科学与技术（本科）</b><br><span>主修课程：数据结构、计算机网络、人机交互、软件工程 · GPA 3.7/4.0</span></div>
        <span class="date" style="font-size:13px;color:var(--sub)">2016.09 – 2020.06</span>
      </div>
    </div>

  </main>
</div>

</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/1745.html