454 行
21 KiB
HTML
454 行
21 KiB
HTML
<!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">技能 & 工具
|
|
</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> |