You must remember that the best time of year is when it is orange, yellow and orange. Three golds and four silvers. How can we do without a good-looking resume template? Whether it is downloaded casually from the Internet or bought with money, it is the same old-fashioned template, which is unremarkable and tastes like chewing wax. This time, we created an independently implemented high-value resume template based on Html and Css3, just like watching a love movie in an island country. Maybe you will find the theme and type you like, but in the end, it still depends on the face.
Butterfly without wings
Traditional resumes are basically a single layout scheme from top to bottom. This time we adopt a double-flying wing layout, allowing the resume content to fill the main container in both directions. This can make the resume appear fuller and save paper when printing:
<div class="resume default" >
<header>
<div class="main_info">
<h1 class="name">刘悦</h1>
<h2 class="intension">乐于助人的敏捷开发者</h2>
</div>
<ul class="other_basic_info">
<li>QQ:164850527</li>
<li>Mail:[email protected]</li>
<li>Github:<a target="_blank" href="https://github.com/zcxey2911">https://github.com/zcxey2911</a></li>
<li>Twitter:<a target="_blank" href="https://twitter.com/v3ucom">https://twitter.com/v3ucom</a></li>
<li>Blog:<a target="_blank" href="https://v3u.cn">v3u.cn</a></li>
</ul>
</header>
<div class="first_section">
<section class="education">
<div class="section_title">
<h1 class="zh_title">教育经历</h1>
<h2 class="en_title">Education</h2>
</div>
<ul class="education-content">
<li v-for="eduitem in resume.education">
<div class="item education-item">
<div class="item_duration">2004-2008</div>
<div class="item_content">
<h1 class="school">
北京交通大学
</h1>
</div>
</div>
</li>
</ul>
</section>
</div>
<div class="second_section">
<section class="experience">
<div class="section_title">
<h1 class="zh_title">工作经历</h1>
</div>
<div class="item experience-item">
<div class="item_duration">2018.10-至今</div>
<div class="item_content">
<h1 class="main-info">
积云教育(北京优思安科技有限公司) |
<span class="annotation">Python讲师</span>
</h1>
<h2 class="description" ></h2>
<ul>
<li>
日常线下/线上授课任务，教材/考试题/编写。
</li>
<li>
授课视频录制/线下培训，作为项目经理指导毕业生找工作。
</li>
</ul>
</div>
</div>
<div class="item experience-item">
<div class="item_duration">2017.08-2018.10</div>
<div class="item_content">
<h1 class="main-info">
钱方好近(北京/吉隆坡)有限公司 |
<span class="annotation">高级Python开发</span>
</h1>
<h2 class="description" ></h2>
<ul>
<li>
跨境支付业务系统构建、维护。
</li>
<li>
后台审核系统日常开发和维护。
</li>
<li>
DevOps运维系统重构与线上迁移。
</li>
</ul>
</div>
</div>
<div class="item experience-item">
<div class="item_duration">2015.08-2017.07</div>
<div class="item_content">
<h1 class="main-info">
阿里巴巴集团(大文娱事业部) |
<span class="annotation">后台研发(P6)</span>
</h1>
<h2 class="description" ></h2>
<ul>
<li>
用户/视频测写平台开发，数据分析。
</li>
<li>
后台审核系统日常开发和维护。
</li>
</ul>
</div>
</div>
<div class="item experience-item">
<div class="item_duration">2008.09-2015.08</div>
<div class="item_content">
<h1 class="main-info">
优酷土豆集团(合一网络技术北京有限公司) |
<span class="annotation">全栈开发</span>
</h1>
<h2 class="description" ></h2>
<ul>
<li>
优酷移动端日志收集和分析、平台数据展示。
</li>
</ul>
</div>
</div>
</section>
</div>
</div>
The resume template here consists of three parts, namely: head, left wing and right wing. The head occupies 100% of the width, and the parallel wings occupy 50% of the width:
.resume {
font-size: 16px;
padding: 0.8em 3em;
overflow: hidden;
}
.default header {
overflow: hidden;
margin-top: 0.3em;
}
.default .first_section {
width: 50%;
float: left;
padding-right: 1.5em;
box-sizing: border-box;
}
default .second_section {
width: 50%;
float: right;
padding-left: 0.8em;
box-sizing: border-box;
}
Here first_section represents the left wing, second_section represents the right wing, and then defines the content container:
<section class="education">
<div class="section_title">
<h1 class="zh_title">教育经历</h1>
<h2 class="en_title">Education</h2>
</div>
<ul class="education-content">
<li v-for="eduitem in resume.education">
<div class="item education-item">
<div class="item_duration">2004-2008</div>
<div class="item_content">
<h1 class="school">
北京交通大学
</h1>
</div>
</div>
</li>
</ul>
</section>
Here the section container represents a sub-content in the resume, which can be added as needed.
The effect after filling the content:
Custom Resume Font Scheme
The default font of the system is a little boring, and it has nothing to do with the value of the face. You can use the font-face style to load external fonts:
/* 简历字体 */
@font-face {
font-family: mFont;
src: url('./fonts/北魏楷书字体.ttf');
}
Here we load the font of Northern Wei Kaishu font.ttf, and other font styles can be added if necessary.
Then use the font variable mFont to set the overall font:
body{
font-family:mFont;
}
The effect after modifying the font:
If you don't like traditional Chinese, you can also download the simplified ttf file and put it in the fonts folder:
/* 简历字体 */
@font-face {
font-family: mFont;
src: url('./fonts/方正北魏楷书简体.ttf');
}
body{
font-family:mFont;
background-color: var(--bg-color);
color: var(--font-color);
}
Simplified effect:
Resume Font Compression
If you gain something, you lose something. If you want to use a good-looking font, you have to bear the price of the font file being too large. Taking Founder Northern Wei Kaishu Simplified as an example, this font requires about 4mb of hard disk space when the fonts are complete:
➜ fonts git:(main) ✗ ls -l
-rw-r--r--@ 1 liuyue staff 4312196 10 11 2003 方正北魏楷书简体.ttf
Obviously, this is not acceptable, to request 4mb of font packages every time for one font?
In fact, resumes don’t use all the fonts. You only need to extract specific fonts and compress them into an independent font package. Here we use the famous word spider:
npm i font-spider-plus -g
Then use the command to compress the resume page locally:
fsp local resume.html
The program returns:
➜ myresume git:(main) fsp local resume.html
✔ 优化完成
已提取 297 个 mFont 字体：
()+-./0123456789:@ABCDEFGHIJLMOPQRSTUVWXabcdefghijklmnoprstuvwxyz|、。一上下不与业个为乐事于云交亦产京人今从他付代令件价任优作使信元全公关其具内写分刘利制前剪力功务动助化北协历原发台司合吉后味命和品团圈土在块坡培境大好如娱学安定实审对导小展工己巴师常平序库度建开式录微志念态思急悉悦成我户扩找承技护拍指据捷授掌插握摄操支收效敏教数文方日时有术机材构析架查栈核框模毕测渐源演熟环理生用的目盲相码研示秉科积移程稳端等管系级线练组织经络统维编网考者而育能自至行视解言计训讲设评试询语课豆跨辑迁运近进通部酷里重钱阿限隆随集面项频题验高，
生成字体文件：
* /Users/liuyue/wodfan/work/myresume/fonts/北魏楷书字体.ttf,121K (已优化体积：4089K)
The compressed font package is only 121kb, so mom won't worry about our website bandwidth anymore.
Custom Resume Color Schemes
Now, it’s a little more interesting. Next, let’s modify the color scheme of the resume. Here we use the custom attributes of css3. The appearance of custom attributes can make the css style also use variables, and the value of the variables can be dynamically modified through configuration:
/* 简历前景色和背景色 */
:root{
--bg-color:#1C1C1B;
--font-color:#CE4A7E;
}
Use variables for assignment where colors are used:
body{
font-family:mFont;
background-color: var(--bg-color);
color: var(--font-color);
}
Specific effect:
The color scheme can also refer to the professional color scheme website: 2colors.colorion.co
Of course, you can also consult chatgpt:
/* 简历前景色和背景色 */
:root{
--bg-color:#005BBB;
--font-color:#FFD500;
}
Specific effect:
Resume Github dynamic support
GitHub can be used as one of the references to measure the level of programmers. GitHub can track programmers' code contributions, including the number of submitted codes, the frequency of submissions, the projects where the codes are located, code review status, and so on. These indicators can reflect the degree of activity of programmers in the open source community and the degree of contribution to open source projects.
At the same time, projects on GitHub can demonstrate the project experience and technical capabilities of programmers. By viewing the project's code base, documentation, issues, and discussions, you can understand the programmer's role, contribution, and problem-solving skills in the project.
Integrate Github stats into your resume:
<div align="center" dir="auto">
<span> </span>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/6ebfb9fddf67327229bcfa40cac923b25cb4b452b9e1d9afbd6ce9165cda5158/68747470733a2f2f6769746875622d726561646d652d73746174732e76657263656c2e6170702f6170693f757365726e616d653d7a6378657932393131">
<img src="https://camo.githubusercontent.com/6ebfb9fddf67327229bcfa40cac923b25cb4b452b9e1d9afbd6ce9165cda5158/68747470733a2f2f6769746875622d726561646d652d73746174732e76657263656c2e6170702f6170693f757365726e616d653d7a6378657932393131" data-canonical-src="https://github-readme-stats.vercel.app/api?username=zcxey2911" style="width: 100%;"></a><span> </span><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/10b035cd56e1f010186c55992461d36eb9ea6ff70623ee26d8bdda6c71e9ba9b/68747470733a2f2f6769746875622d726561646d652d73746174732e76657263656c2e6170702f6170692f746f702d6c616e67732f3f757365726e616d653d7a6378657932393131266c61796f75743d636f6d70616374266c616e67735f636f756e743d3130267468656d653d6d65726b6f"></a>
</div>
If you need to replace it with your own homepage, you only need to modify the username parameter.
final effect:
epilogue
Finally, here is the project address: github.com/zcxey2911/colorful_resume_template, to share with all the folks, three golds and four silvers, prosperous martial arts, and unify the world.