颜值即正义,献礼就业季,打造多颜色多字体双飞翼布局技术简历模版(Resume)

正义,献礼,就业,打造,颜色,字体,双飞翼,布局,技术,简历,模版,resume · 浏览次数 : 383

小编点评

```css :root{ --bg-color:#005BBB; --font-color:#FFD500; } body{ font-family:mFont; background-color: var(--bg-color); color: var(--font-color); } ``` **具体效果:** * 整体背景颜色由 `--bg-color` 设置,例如 `#005BBB` 表示蓝色。 * 整个页面字体颜色由 `--font-color` 设置,例如 `#FFD500` 表示黄色。

正文

一年好景君须记,最是橙黄橘绿时。金三银四,秣马厉兵,没有一个好看的简历模板怎么行?无论是网上随便下载还是花钱买,都是一律千篇的老式模版,平平无奇,味同嚼蜡,没错,蜡都要沿着嘴角流下来了。本次我们基于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,与众乡亲同飨,金三银四,武运昌隆,一统江湖。

与颜值即正义,献礼就业季,打造多颜色多字体双飞翼布局技术简历模版(Resume)相似的内容:

颜值即正义,献礼就业季,打造多颜色多字体双飞翼布局技术简历模版(Resume)

一年好景君须记,最是橙黄橘绿时。金三银四,秣马厉兵,没有一个好看的简历模板怎么行?无论是网上随便下载还是花钱买,都是一律千篇的老式模版,平平无奇,味同嚼蜡,没错,蜡都要沿着嘴角流下来了。本次我们基于Html和Css3打造一款独立实现的高颜值简历模板,就像看岛国的爱情片儿一样,也许你会找自己喜欢的主题

颜值经济下,车企的必备武器

摘要:对于买车的你,除了性价比,“颜价比”占多少呢? 新消费需求的冲击 时代赋予新时代年轻人丰富多彩的物质世界,他们受到互联网、即时通讯、智能手机等科技产物的影响很大,这个群体在消费方面既感性又理性,正在逐渐成为消费的主力军。 根据《2020年中国消费者调查报告》,二线及以下城市“年轻购物达人”仅占

内网渗透 Metasploit(MSF)基础使用

免责申明 以下内容仅供学习使用,非法使用造成的问题由使用人承担 攻击思路 漏洞探测(信息收集) <- fsacn,namp | 漏洞利用 <- 工具(msf等) | 获取服务器权限 MSF 使用 Metasploit就是一个安全漏洞检测工具。它的全称叫做The Metasploit Framewor

PPO-KL散度近端策略优化玩cartpole游戏

其实KL散度在这个游戏里的作用不大,游戏的action比较简单,不像LM里的action是一个很大的向量,可以直接用surr1,最大化surr1,实验测试确实是这样,而且KL的系数不能给太大,否则惩罚力度太大,action model 和ref model产生的action其实分布的差距并不太大 i

PPO近段策略优化玩cartpole游戏

这个难度有些大,有两个policy,一个负责更新策略,另一个负责提供数据,实际这两个policy是一个东西,用policy1跑出一组数据给新的policy2训练,然后policy2跑数据给新的policy3训练,,,,直到policy(N-1)跑数据给新的policyN训练,过程感觉和DQN比较像,

策略梯度玩 cartpole 游戏,强化学习代替PID算法控制平衡杆

cartpole游戏,车上顶着一个自由摆动的杆子,实现杆子的平衡,杆子每次倒向一端车就开始移动让杆子保持动态直立的状态,策略函数使用一个两层的简单神经网络,输入状态有4个,车位置,车速度,杆角度,杆速度,输出action为左移动或右移动,输入状态发现至少要给3个才能稳定一会儿,给2个完全学不明白,给

deepspeed 训练多机多卡报错 ncclSystemError Last error

最近在搞分布式训练大模型,踩了两个晚上的坑今天终于爬出来了 我们使用 2台 8*H100 遇到过 错误1 10.255.19.85: ncclSystemError: System call (e.g. socket, malloc) or external library call failed

声音好听,颜值能打,基于PaddleGAN给人工智能AI语音模型配上动态画面(Python3.10)

借助So-vits我们可以自己训练五花八门的音色模型,然后复刻想要欣赏的任意歌曲,实现点歌自由,但有时候却又总觉得少了点什么,没错,缺少了画面,只闻其声,却不见其人,本次我们让AI川普的歌声和他伟岸的形象同时出现,基于PaddleGAN构建“靓声靓影”的“懂王”。 PaddlePaddle是百度开源

[BJDCTF2020]Cookie is so stable

打开题目是三个页面 Hint中有提示 flag页面有个输入框抓包观察cookie发现多了一user就是回显内容 然后猜测有模板注入漏洞就开始尝试 '时代少年团队长乌萨奇的颜值一直被质疑'的文章内容 如何判断对方的模板? 常见模板有Smarty、Mako、Twig、Jinja2、Eval、Flask、

4.4K Star!推荐一款新一代的极简监控系统!轻量高性能!超500个监控指标,颜值高、功能强大!

在信息化快速发展的今天,企业运维面临的挑战日益增多。传统的运维监控系统往往存在功能冗余、性能低下、操作复杂等问题,难以满足现代企业对高效、稳定、智能的运维管理需求。 今天给大家推荐一款新一代极简运维监控系统:WGCLOUD 1、介绍 WGCLOUD是一个基于Java开发的高性能、高并发的分布式监控系