wangchuanli/resume-template
1
0
派生 0
代码 工单 合并请求 工作流 软件包 项目 发布 百科 活动

feat: 添加响应式简历网页模板

浏览代码 
基于 Bootstrap 5 与 Font Awesome 6 的静态简历模板，内置 6 套主题、技能进度条、时间线经历等模块，无需构建工具即可使用。
这个提交包含在：
wangchuanli
2026-08-20 16:26:15 +08:00
当前提交 aff336968c
共修改 146 个文件，包含 110542 行新增和 0 行删除
下载 Patch 文件 下载 Diff 文件 展开所有文件 折叠所有文件
index.html
+454
查看文件
@@ -0,0 +1,454 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Resume Template - 在线简历模板</title>
<!-- Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="基于 Bootstrap 5 的响应式在线简历 / CV 模板">
<meta name="author" content="Resume Template Authors">
<link rel="shortcut icon" href="favicon.ico">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
<!-- FontAwesome JS-->
<script defer src="assets/fontawesome/js/all.min.js"></script>
<!-- Theme CSS: 可切换为 pillar-2.css ~ pillar-6.css 以更换配色 -->
<link id="theme-style" rel="stylesheet" href="assets/css/pillar-1.css">
</head>
<body>
<article class="resume-wrapper text-center position-relative">
<div class="resume-wrapper-inner mx-auto text-start bg-white shadow-lg">
<header class="resume-header pt-4 pt-md-0">
<div class="row">
<div class="col-block col-md-auto resume-picture-holder text-center text-md-start">
<img class="picture" src="assets/images/profile.jpg" alt="你的头像">
</div><!--//col-->
<div class="col">
<div class="row p-4 justify-content-center justify-content-md-between">
<div class="primary-info col-auto">
<h1 class="name mt-0 mb-1 text-white text-uppercase text-uppercase">你的名字</h1>
<div class="title mb-3">职位头衔 / 方向</div>
<ul class="list-unstyled">
<li class="mb-2"><a class="text-link" href="mailto:you@example.com"><i class="far fa-envelope fa-fw me-2"
data-fa-transform="grow-3"></i>you@example.com</a></li>
<li><a class="text-link" href="tel:+8613800000000"><i class="fas fa-mobile-alt fa-fw me-2"
data-fa-transform="grow-6"></i>138 0000 0000</a></li>
</ul>
</div><!--//primary-info-->
<div class="secondary-info col-auto mt-2">
<ul class="resume-social list-unstyled">
<li class="mb-3"><a class="text-link" href="#"><span
class="fa-container text-center me-2"><i
class="fab fa-linkedin-in fa-fw"></i></span>linkedin.com/in/你的账号</a>
</li>
<li class="mb-3"><a class="text-link" href="#"><span
class="fa-container text-center me-2"><i
class="fab fa-github-alt fa-fw"></i></span>github.com/你的账号</a>
</li>
<li class="mb-3"><a class="text-link" href="#"><span
class="fa-container text-center me-2"><i
class="fab fa-codepen fa-fw"></i></span>codepen.io/你的账号/</a>
</li>
<li><a class="text-link" href="#"><span class="fa-container text-center me-2"><i
class="fas fa-globe"></i></span>你的个人网站</a></li>
</ul>
</div><!--//secondary-info-->
</div><!--//row-->
</div><!--//col-->
</div><!--//row-->
</header>
<div class="resume-body p-5">
<section class="resume-section summary-section mb-5">
<h2 class="resume-section-title font-weight-bold pb-3 mb-3">个人简介</h2>
<div class="resume-section-content">
<p class="mb-0">在这里用一两句话概括你的职业亮点与方向。可以用简洁的语言说明你的专长领域、核心成就与职业目标，让招聘方快速了解你的价值。Aenean
commodo ligula eget dolor aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec
pede justo, fringilla vel, aliquet nec, vulputate eget. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</p>
</div>
</section><!--//summary-section-->
<div class="row">
<div class="col-lg-9">
<section class="resume-section experience-section mb-5">
<h2 class="resume-section-title font-weight-bold pb-3 mb-3">工作经历
</h2>
<div class="resume-section-content">
<div class="resume-timeline position-relative">
<article class="resume-timeline-item position-relative pb-5">
<div class="resume-timeline-item-header mb-2">
<div class="d-flex flex-column flex-md-row">
<h3 class="resume-position-title font-weight-bold mb-1">Lead Developer
</h3>
<div class="resume-company-name ms-auto">Startup Hub</div>
</div><!--//row-->
<div class="resume-position-time">2020 - Present</div>
</div><!--//resume-timeline-item-header-->
<div class="resume-timeline-item-desc">
<p>Role description goes here ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Donec
pede justo, fringilla vel.</p>
<h4 class="resume-timeline-item-desc-heading font-weight-bold">Achievements:
</h4>
<p>Praesentium voluptatum deleniti atque corrupti quos dolores et quas
molestias excepturi sint occaecati cupiditate non provident.</p>
<ul>
<li>Lorem ipsum dolor sit amet, 80% consectetuer adipiscing elit.</li>
<li>At vero eos et accusamus et iusto odio dignissimos.</li>
<li>Blanditiis praesentium voluptatum deleniti atque corrupti.</li>
<li>Maecenas tempus tellus eget.</li>
</ul>
<h4 class="resume-timeline-item-desc-heading font-weight-bold">Technologies
used:</h4>
<ul class="list-inline">
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Angular</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Python</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">jQuery</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Webpack</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">HTML/SASS</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">PostgresSQL</span></li>
</ul>
</div><!--//resume-timeline-item-desc-->
</article><!--//resume-timeline-item-->
<article class="resume-timeline-item position-relative pb-5">
<div class="resume-timeline-item-header mb-2">
<div class="d-flex flex-column flex-md-row">
<h3 class="resume-position-title font-weight-bold mb-1">Senior Software
Developer</h3>
<div class="resume-company-name ms-auto">Google</div>
</div><!--//row-->
<div class="resume-position-time">2016 - 2020</div>
</div><!--//resume-timeline-item-header-->
<div class="resume-timeline-item-desc">
<p>Role description goes here ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Donec
pede justo, fringilla vel.</p>
<h4 class="resume-timeline-item-desc-heading font-weight-bold">Achievements
</h4>
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium
quis, sem.</p>
<h4 class="resume-timeline-item-desc-heading font-weight-bold">Technologies
used:</h4>
<ul class="list-inline">
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">React</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Redux</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Django</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Webpack</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">HTML/SASS</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">MySQL</span></li>
</ul>
</div><!--//resume-timeline-item-desc-->
</article><!--//resume-timeline-item-->
<article class="resume-timeline-item position-relative pb-5">
<div class="resume-timeline-item-header mb-2">
<div class="d-flex flex-column flex-md-row">
<h3 class="resume-position-title font-weight-bold mb-1">Co-Founder &
Lead Developer</h3>
<div class="resume-company-name ms-auto">To-do Lists</div>
</div><!--//row-->
<div class="resume-position-time">2012 - 2016</div>
</div><!--//resume-timeline-item-header-->
<div class="resume-timeline-item-desc">
<p>Role description goes here ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes.</p>
<h4 class="resume-timeline-item-desc-heading font-weight-bold">Technologies
used:</h4>
<ul class="list-inline">
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Django</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">JavaScript</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Node.js</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Require.js</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">HTML/SASS</span></li>
</ul>
</div><!--//resume-timeline-item-desc-->
</article><!--//resume-timeline-item-->
<article class="resume-timeline-item position-relative">
<div class="resume-timeline-item-header mb-2">
<div class="d-flex flex-column flex-md-row">
<h3 class="resume-position-title font-weight-bold mb-1">Web Developer
<small class="text-muted">(Intern)</small></h3>
<div class="resume-company-name ms-auto">Amazon</div>
</div><!--//row-->
<div class="resume-position-time">2011 - 2012</div>
</div><!--//resume-timeline-item-header-->
<div class="resume-timeline-item-desc">
<p>Role description goes here ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec
quam felis, ultricies nec. Fusce vulputate eleifend sapien. Vestibulum
purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam
accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla.
Vestibulum.</p>
<h4 class="resume-timeline-item-desc-heading font-weight-bold">Technologies
used:</h4>
<ul class="list-inline">
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">Ruby on Rails</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">jQuery</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">HTML/LESS</span></li>
<li class="list-inline-item"><span
class="badge bg-secondary badge-pill">MongoDB</span></li>
</ul>
</div><!--//resume-timeline-item-desc-->
</article><!--//resume-timeline-item-->
</div><!--//resume-timeline-->
</div>
</section><!--//experience-section-->
</div>
<div class="col-lg-3">
<section class="resume-section skills-section mb-5">
<h2 class="resume-section-title font-weight-bold pb-3 mb-3">技能 &amp; 工具
</h2>
<div class="resume-section-content">
<div class="resume-skill-item">
<h4 class="resume-skills-cat font-weight-bold">前端</h4>
<ul class="list-unstyled mb-4">
<li class="mb-2">
<div class="resume-skill-name">Angular</div>
<div class="progress resume-progress">
<div class="progress-bar theme-progress-bar-dark" role="progressbar"
style="width: 98%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li class="mb-2">
<div class="resume-skill-name">React</div>
<div class="progress resume-progress">
<div class="progress-bar theme-progress-bar-dark" role="progressbar"
style="width: 94%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li class="mb-2">
<div class="resume-skill-name">JavaScript</div>
<div class="progress resume-progress">
<div class="progress-bar theme-progress-bar-dark" role="progressbar"
style="width: 96%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li class="mb-2">
<div class="resume-skill-name">Node.js</div>
<div class="progress resume-progress">
<div class="progress-bar theme-progress-bar-dark" role="progressbar"
style="width: 92%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li class="mb-2">
<div class="resume-skill-name">HTML/CSS/SASS/LESS</div>
<div class="progress resume-progress">
<div class="progress-bar theme-progress-bar-dark" role="progressbar"
style="width: 96%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
</ul>
</div><!--//resume-skill-item-->
<div class="resume-skill-item">
<h4 class="resume-skills-cat font-weight-bold">后端</h4>
<ul class="list-unstyled">
<li class="mb-2">
<div class="resume-skill-name">Python/Django</div>
<div class="progress resume-progress">
<div class="progress-bar theme-progress-bar-dark" role="progressbar"
style="width: 95%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li class="mb-2">
<div class="resume-skill-name">Ruby/Rails</div>
<div class="progress resume-progress">
<div class="progress-bar theme-progress-bar-dark" role="progressbar"
style="width: 92%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li class="mb-2">
<div class="resume-skill-name">PHP</div>
<div class="progress resume-progress">
<div class="progress-bar theme-progress-bar-dark" role="progressbar"
style="width: 86%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
<li class="mb-2">
<div class="resume-skill-name">WordPress/Shopify</div>
<div class="progress resume-progress">
<div class="progress-bar theme-progress-bar-dark" role="progressbar"
style="width: 82%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
</li>
</ul>
</div><!--//resume-skill-item-->
<div class="resume-skill-item">
<h4 class="resume-skills-cat font-weight-bold">其他</h4>
<ul class="list-inline">
<li class="list-inline-item"><span class="badge badge-light">DevOps</span></li>
<li class="list-inline-item"><span class="badge badge-light">Code Review</span>
</li>
<li class="list-inline-item"><span class="badge badge-light">Git</span></li>
<li class="list-inline-item"><span class="badge badge-light">Unit Testing</span>
</li>
<li class="list-inline-item"><span class="badge badge-light">Wireframing</span>
</li>
<li class="list-inline-item"><span class="badge badge-light">Sketch</span></li>
<li class="list-inline-item"><span class="badge badge-light">Balsamiq</span>
</li>
<li class="list-inline-item"><span class="badge badge-light">WordPress</span>
</li>
<li class="list-inline-item"><span class="badge badge-light">Shopify</span></li>
</ul>
</div><!--//resume-skill-item-->
</div><!--resume-section-content-->
</section><!--//skills-section-->
<section class="resume-section education-section mb-5">
<h2 class="resume-section-title font-weight-bold pb-3 mb-3">教育背景</h2>
<div class="resume-section-content">
<ul class="list-unstyled">
<li class="mb-2">
<div class="resume-degree font-weight-bold">MSc in Computer Science</div>
<div class="resume-degree-org">University College London</div>
<div class="resume-degree-time">2010 - 2011</div>
</li>
<li>
<div class="resume-degree font-weight-bold">BSc Maths and Physics</div>
<div class="resume-degree-org">Imperial College London</div>
<div class="resume-degree-time">2007 - 2010</div>
</li>
</ul>
</div>
</section><!--//education-section-->
<section class="resume-section reference-section mb-5">
<h2 class="resume-section-title font-weight-bold pb-3 mb-3">获奖荣誉</h2>
<div class="resume-section-content">
<ul class="list-unstyled resume-awards-list">
<li class="mb-2 ps-4 position-relative">
<i class="resume-award-icon fas fa-trophy position-absolute"
data-fa-transform="shrink-2"></i>
<div class="resume-award-name">Award Name Lorem</div>
<div class="resume-award-desc">Award desc goes here, ultricies nec, pellentesque
eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo.
</div>
</li>
<li class="mb-0 ps-4 position-relative">
<i class="resume-award-icon fas fa-trophy position-absolute"
data-fa-transform="shrink-2"></i>
<div class="resume-award-name">Award Name Ipsum</div>
<div class="resume-award-desc">Award desc goes here, ultricies nec,
pellentesque.</div>
</li>
</ul>
</div>
</section><!--//interests-section-->
<section class="resume-section language-section mb-5">
<h2 class="resume-section-title font-weight-bold pb-3 mb-3">语言能力</h2>
<div class="resume-section-content">
<ul class="list-unstyled resume-lang-list">
<li class="mb-2"><span class="resume-lang-name font-weight-bold">English</span>
<small class="text-muted font-weight-normal">(Native)</small></li>
<li class="mb-2 align-middle"><span
class="resume-lang-name font-weight-bold">French</span> <small
class="text-muted font-weight-normal">(Professional)</small></li>
<li><span class="resume-lang-name font-weight-bold">Spanish</span> <small
class="text-muted font-weight-normal">(Professional)</small></li>
</ul>
</div>
</section><!--//language-section-->
<section class="resume-section interests-section mb-5">
<h2 class="resume-section-title font-weight-bold pb-3 mb-3">兴趣爱好</h2>
<div class="resume-section-content">
<ul class="list-unstyled">
<li class="mb-1">Climbing</li>
<li class="mb-1">Snowboarding</li>
<li class="mb-1">Cooking</li>
</ul>
</div>
</section><!--//interests-section-->
</div>
</div><!--//row-->
</div><!--//resume-body-->
</div>
</article>
<footer class="footer text-center pt-2 pb-5">
<small class="copyright">基于 <a class="text-link" href="https://themes.3rdwavemedia.com/"
target="_blank">Pillar</a> 模板构建 · MIT License</small>
</footer>
</body>
</html>