首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

身无彩蝶双飞翼

传统简历基本上是由上自下的单体布局方案,本次我们采用双飞翼布局,让简历内容双向填充主体容器,如此可以让简历显得更加丰满,打印的时候也更加节约纸:

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

这里first_section代表左翼,second_section代表右翼,接着定义内容容器:

这里section容器代表简历中的一个子内容,可以按需添加。

填充内容后的效果:

定制简历字体方案

系统默认字体有些无趣,和颜值什么的也没有啥关系,可以使用font-face样式来加载外部字体:

这里我们加载北魏楷书字体.ttf的字体,如果需要也可以添加别的字体样式。

随后使用字体变量mFont来设置整体字体即可:

修改字体后的效果:

如果不喜欢繁体,也可以下载简体的ttf文件放在fonts文件夹即可:

简体效果:

简历字体压缩

有得就会有失,想用好看的字体就得承担字体文件过大的代价,以方正北魏楷书简体为例子,该字体在全量字型完整的情况下,大概需要4mb左右的硬盘空间:

显然,这是不可接受的,为了一个字体,每次都要请求4mb的字体包?

事实上,简历并不会用到所有的字体字型,只需要把特定的字型单独拿出来压缩成一个独立的字体包即可,这里使用鼎鼎有名的字蛛:

接着使用命令本地压缩简历页面:

程序返回:

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

定制简历配色方案

现在,稍微有点意思了,下面我们来修改简历配色,这里使用css3的自定义属性,自定义属性的出现,可以让css样式也使用变量,通过配置可以动态的修改变量的值:

在用到颜色的地方使用变量进行赋值:

具体效果:

具体效果:

简历Github动态支持

GitHub可以作为衡量程序员水平的参考之一,GitHub可以追踪程序员的代码贡献,包括提交代码的数量、提交的频率、代码所在的项目、代码审核情况等等。这些指标可以反映程序员在开源社区中的活跃程度和对开源项目的贡献程度。

同时,GitHub上的项目可以展示程序员的项目经验和技术能力。通过查看项目的代码库、文档、问题和讨论,可以了解程序员在项目中的角色、贡献和解决问题的能力。

将Github统计集成到简历中:

如果需要替换成自己的主页,只需要修改username参数即可。

具体效果:

结语

最后,奉上项目地址:github.com/zcxey2911/colorful_resume_template,与众乡亲同飨,金三银四,武运昌隆,一统江湖。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20230414A010SQ00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券