乐趣区

关于前端:颜值即正义献礼就业季打造多颜色多字体双飞翼布局技术简历模版Resume

jiezi

一年好景君须记，最是橙黄橘绿时。金三银四，秣马厉兵，没有一个难看的简历模板怎么行？无论是网上轻易下载还是花钱买，都是一律千篇的老式模版，平平无奇，百读不厌，没错，蜡都要沿着嘴角流下来了。本次咱们基于 Html 和 Css3 打造一款独立实现的高颜值简历模板，就像看岛国的恋情片儿一样，兴许你会找本人喜爱的主题和类型，但最终，还是要看脸。

身无彩蝶双飞翼

传统简历基本上是由上自下的单体布局计划，本次咱们采纳双飞翼布局，让简历内容双向填充主体容器，如此能够让简历显得更加饱满，打印的时候也更加节约纸：

<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:zcxey2911@gmail.com</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>

这里简历模版由三大部分组成，别离是：头部、右翼和左翼。头部占用百分之百的宽度，两翼平行别离占用百分之五十宽度：

.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;  
}

这里 first\_section 代表右翼，second\_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>

这里 section 容器代表简历中的一个子内容，能够按需增加。

填充内容后的成果：

定制简历字体计划

零碎默认字体有些无趣，和颜值什么的也没有啥关系，能够应用 font-face 款式来加载内部字体：

/* 简历字体 */  
@font-face {  
font-family: mFont;  
src: url('./fonts/ 北魏楷书字体.ttf');  
}

这里咱们加载北魏楷书字体.ttf 的字体，如果须要也能够增加别的字体款式。

随后应用字体变量 mFont 来设置整体字体即可：

body{font-family:mFont;}

批改字体后的成果：

如果不喜爱繁体，也能够下载简体的 ttf 文件放在 fonts 文件夹即可：

/* 简历字体 */  
@font-face {  
font-family: mFont;  
src: url('./fonts/ 方正北魏楷书简体.ttf');  
}  
        body{  
            font-family:mFont;  
            background-color: var(--bg-color);  
            color: var(--font-color);  
    }

简体成果：

简历字体压缩

有得就会有失，想用难看的字体就得承当字体文件过大的代价，以方正北魏楷书简体为例子，该字体在全量字型残缺的状况下，大略须要 4mb 左右的硬盘空间：

➜  fonts git:(main) ✗ ls -l   
-rw-r--r--@ 1 liuyue  staff  4312196 10 11  2003 方正北魏楷书简体.ttf

显然，这是不可承受的，为了一个字体，每次都要申请 4mb 的字体包？

事实上，简历并不会用到所有的字体字型，只须要把特定的字型独自拿进去压缩成一个独立的字体包即可，这里应用鼎鼎有名的字蛛：

npm i font-spider-plus -g

接着应用命令本地压缩简历页面：

fsp local resume.html

程序返回：

➜  myresume git:(main) fsp local resume.html  
✔ 优化实现  
  
已提取 297 个 mFont 字体：()+-./0123456789:@ABCDEFGHIJLMOPQRSTUVWXabcdefghijklmnoprstuvwxyz|、。一高低不与业个为乐事于云交亦产京人今从他付代令件价任优作使信元全公关其具内写分刘利制前剪力功务动助化北协历原发台司合吉后味命和品团圈土在块坡培境大好如娱学安宁实审对导小展工己巴师常平序库度建开式录微志念态思急悉悦成我户扩找承技护拍指据捷授掌插握摄操支收效敏教数文方日时有术机材构析架查栈核框模毕测渐源演熟环理生用的目盲相码研示秉科积移程稳端等管系级线练组织经络统维编网考者而育能自至行视解言计训讲设评试询语课豆跨辑迁运近进通部酷里重钱阿限隆随集面项频题验高，生成字体文件：* /Users/liuyue/wodfan/work/myresume/fonts/ 北魏楷书字体.ttf,121K (已优化体积：4089K)

压缩后的字体包只有 121kb，这下妈妈再也不会放心咱们的网站带宽了。

定制简历配色计划

当初，略微有点意思了，上面咱们来批改简历配色，这里应用 css3 的自定义属性，自定义属性的呈现，能够让 css 款式也应用变量，通过配置能够动静的批改变量的值：

/* 简历前景色和背景色 */  
:root{  
  --bg-color:#1C1C1B;

   --font-color:#CE4A7E;

}

在用到色彩的中央应用变量进行赋值：

body{  
            font-family:mFont;  
            background-color: var(--bg-color);  
            color: var(--font-color);  
    }

具体成果：

配色计划也能够参考业余的配色计划网站：2colors.colorion.co

当然，也能够征询 chatgpt: 

/* 简历前景色和背景色 */  
:root{  
   --bg-color:#005BBB;  
   --font-color:#FFD500;  
}

具体成果：

简历 Github 动静反对

GitHub 能够作为掂量程序员程度的参考之一，GitHub 能够追踪程序员的代码奉献，包含提交代码的数量、提交的频率、代码所在的我的项目、代码审核状况等等。这些指标能够反映程序员在开源社区中的沉闷水平和对开源我的项目的奉献水平。

同时，GitHub 上的我的项目能够展现程序员的我的项目教训和技术能力。通过查看我的项目的代码库、文档、问题和探讨，能够理解程序员在我的项目中的角色、奉献和解决问题的能力。

将 Github 统计集成到简历中：

<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>

如果须要替换成本人的主页，只须要批改 username 参数即可。

最终成果：

结语

最初，奉上我的项目地址：github.com/zcxey2911/colorful\_resume\_template，与众乡亲同飨，金三银四，武运昌隆，一统江湖。

退出移动版