前去面试都拿的纸质简历,去一家公司浪费一份简历,因为你能不保证你只去一次就能面试成功。
今天做了一份html简历,准备挂到网站上,以后面试时直接看网站,一举两得。
先附html截图,后面有源码
下面附源码
<!DOCTYPE html>
<html>
<head>
<title>个人简历</title>
<meta charset=UTF-8 />
<style type=text/css>
*{
margin: 0;
padding: 0;
border: none;
font-size: 12px;
}
#jianil{
width: 797px;
margin: 0 auto;
border: solid 1px #DCDDDF;
}
#jianil .one{
background: url(images/toubu.png);
width: 797px;
height: 90px;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
margin-bottom: 0;
line-height: 90px;
}
#jianil ul{
width: 771px;
margin-left: 13px;
margin-top: 40px;
}
#jianil ul li{
font-size: 20.5px;
background: url(images/tubia.png) no-repeat;
list-style: none;
text-indent:1.8em;
line-height: 30px;
margin-bottom: 20px;
border-bottom: 1px solid #DCDDDF;
}
#jianil ul li.none1{
border-bottom: none;
}
#jianil ul li p{
font-size: 15px;
}
</style>
</head>
<body>
<div id="jianil">
<div class=one>个人简历</div>
<ul>
<li>个人信息
<p>
姓名:XX#12288;
性别:男#12288;
籍贯:XX#12288;
年龄:21#12288;
</p>
<p>
手机:XXXXXXXXXXX#12288;
院校:XXXX学院#12288;
专业:XX#12288;
学历:XX#12288;
</p>
</li>
<li>教育背景
<p>
2014.8-2016.6nbsp;XXXX学院
</p>
<p>
你在学习学了那些东西?
</p>
</li>
<li>最近工作
<p>
2016.6-2016.12nbsp;你最近的工作公司nbsp;工作岗位
</p>
<p>
工作内容
</p>
</li>
<li>专业技能
<p>
你会什么
</p>
</li>
<li>相关证书
<p>证书1</p>
<p>证书2</p>
<p>证书3</p>
<p>证书4</p>
<p>证书5</p>
</li<
<li class=none1>自我评价
<p>
你对于自己是是怎么评价的?
</p>
</li>
</ul>
</div>
</body>
</html>
需要链接的两张背景图
整页源码截图
温馨提示:body里可以添上oncontextmenu=self.event.returnValue=false onselectstart=return false(禁止复制网页,禁止网页右键)
如果你喜欢本文的话,可以关注作者头条号,每天都会有网站开发干货与你分享哦!
者: SnailClimb
Markdown 简历模板样式一览
可以看到我把联系方式放在第一位,因为公司一般会与你联系,所以把联系方式放在第一位也是为了方便联系考虑。
为什么要用 Markdown 写简历?
Markdown 语法简单,易于上手。使用正确的 Markdown 语言写出来的简历不论是在排版还是格式上都比较干净,易于阅读。另外,使用 Markdown 写简历也会给面试官一种你比较专业的感觉。
除了这些,我觉得使用 Markdown 写简历可以很方便将其与PDF、HTML、PNG格式之间转换。后面我会介绍到转换方法,只需要一条命令你就可以实现 Markdown 到 PDF、HTML 与 PNG之间的无缝切换。
下面的一些内容我在之前的一篇文章中已经提到过,这里再说一遍,最后会分享如何实现Markdown 到 PDF、HTML、PNG格式之间转换的方法。
为什么说简历很重要?
写简历的两大法则
目前写简历的方式有两种普遍被认可,一种是 STAR, 一种是 FAB。
STAR法则(Situation Task Action Result):
FAB 法则(Feature Advantage Benefit):
项目经历怎么写?
简历上有一两个项目经历很正常,但是真正能把项目经历很好的展示给面试官的非常少。对于项目经历大家可以考虑从如下几点来写:
专业技能该怎么写?
先问一下你自己会什么,然后看看你意向的公司需要什么。一般HR可能并不太懂技术,所以他在筛选简历的时候可能就盯着你专业技能的关键词来看。对于公司有要求而你不会的技能,你可以花几天时间学习一下,然后在简历上可以写上自己了解这个技能。比如你可以这样写:
简历模板分享
开源程序员简历模板: https://github.com/geekcompany/ResumeSample(包括PHP程序员简历模板、iOS程序员简历模板、Android程序员简历模板、Web前端程序员简历模板、Java程序员简历模板、C/C++程序员简历模板、NodeJS程序员简历模板、架构师简历模板以及通用程序员简历模板)
上述简历模板的改进版本: https://github.com/Snailclimb/Java-Guide/blob/master/面试必备/简历模板.md
其他的一些小tips
我们刚刚讲了很多关于如何写简历的内容并且分享了一份 Markdown 格式的简历文档。下面我们来看看如何实现 Markdown 到 HTML格式、PNG格式之间转换。
Markdown 到 HTML格式、PNG格式之间转换
网上很难找到一个比较方便并且效果好的转换方法,最后我是通过 Visual Studio Code 的 Markdown PDF 插件完美解决了这个问题!
安装 Markdown PDF 插件
① 打开Visual Studio Code ,按快捷键 F1,选择安装扩展选项
② 搜索 “Markdown PDF” 插件并安装 ,然后重启
使用方法
随便打开一份 Markdown 文件 点击F1,然后输入 export 然后选择你想要转换的格式即可!
三银四即将到来,你是否已准备好找工作?机会永远属于有准备的人。专业技能的复习和梳理是少不了的;个人简历当然也是必不可少的,一份精美的简历能让你大大增加面试机会。
你是怎样写简历?还在诟病简历一眼看去没有出彩的地方?你还在使用 Word 写简历吗?这种方式早已 Out了。假如你用的微软 Office 写的简历,人家用的 WPS 打开你的简历,格式肯定会错乱。而且很多Word 版炫酷样式的简历模板都是收费的。懂一点技术的我们应该通过技术手段写一份免费又精美的简历。简历格式最好是 pdf ,不管通过什么工具打开都不会出现格式错乱的问题。
为了让大家不输在面试的起跑线上,为了凸显个人专业技能的特点,为了让面试官眼前一亮。我筛选出最优的三种方式写简历,希望能帮到大家。三种方式如下:
访问 冷熊简历,首页效果如下图:
一方面参考简历模板,这里我推荐一个开源项目 ResumeSample,它包含 Java、C、Php、Android、Web 等简历模板。另一方面添加自己的工作经验,将简历内容丰富起来。
简历内容写完后,点击“PDF”就可以将在线的 Markdown 格式的简历转化为 PDF 格式,我们就可以在各大找工作,App 投放这份简历了。最终导入的简历效果如下图:
注意一下,Markdown 文档如何添加个人图像?有很多方式,这里我直接用的 HTML 代码来实现的。在 Markdown 文件中添加如下代码,就可将图像添加到你指定位置。
<div style="float:right">
<img width="180" src="https://pic1.zhimg.com/v2-e38d6ca59c245f74665a1d2241fc69cc_b.jpg" >
</div>
其实很简单,上面代码用到了两个 HTML 标签:div、img,div 标签添加了内嵌样式,让 div 右对齐,img 设置了 width 属性,指定图片的宽度。
点击“下载”功能,可将我们写好的 Markdown 格式的简历下载到本地。本地安装 Markdown 编辑器 Typora 可以通过此工具的将 Markdown 格式转化为 PDF 格式,以后我们写简历直接在本地修改就可以。Typora 下载地址,在“文件”->“导出”->“PDF”,即可导出文件。
Markdown 添加自定义样式,优化显示效果,打开 Typora 工具,“文件”->“偏好设置…”,如下图:
打开主题,找到 Typora 工具存放主题的位置,将我们自定义的主题文件 xx.css 拷贝到此文件。重启 Typora 工具,就可看到我们自定义的主题。自定义样式写法就是 CSS 样式书写的格式,可以参考一下简历模板样式。
根据自己的需要在标题上可添加相应的小图标做点缀。在网络中找到所需要的小图标保存到本地,然后将小图标添加到对应位置。在阿里巴巴矢量图标库下载你所需要的小图标,格式为 SVG,需要什么图片搜索一下都能找到。添加下面代码到 Markdown 文件即可,代码如下:
<img src="assets/info-circle-solid.svg" width="30px">
简历的最终效果如下图:
Python 下载地址
本机本机操作系统(32 位/64 位)下载对应的版本。这里我下载的版本是 3.7.3。
安装程序下载好,点击 next 就可以安装成功。
使用快捷键 Win +R 打开命令行窗口,输入:python -V,如下图表示 Python 安装成功。
wkhtmltopdf 下载地址
安装完成后把 bin 目录中的可执行 wkhtmltopdf.exe 文件放在模板目录下, 例如:awesome-resume\free。
使用快捷键 Win +R 打开命令行窗口,在命令执行如下命令,安装 PDFKit 插件。
pip install pdfkit #安装 pdfkit 插件
使用下面命令,将项目下载到本地:
cd D:\projects #切换到本地目录
git clone https://github.com/resumejob/awesome-resume/ #下载项目
根据个人的喜好,可以通过文本编辑器 NodePad++ 或者开发工具 VS Code 修改 HTML 页面。这里我用的是 VS Code 打开的。
打开 awesome-resume\free\free_resume.html 文件,这个文件就是我们要写的简历。阅读源码可知,找到下面对应区域就是要修改的内容:
<!-- base-info指基础信息,包括头像,姓名,邮箱,电话,链接等 -->
<!-- 个人简介部分 -->
<!-- 技能列表部分 -->
<!-- 工作经历部分 -->
<!-- 教育经历部分 -->
<!-- 志愿者工作部分 -->
根据自己的需要可以对页面的元素进行增删操作。此项目的说明文档 README.md 也包含很多写简历常用的例句,可以供我们可以借鉴一下!
简历主要是对自己的简单介绍,当别人第一眼看到你的简历,就能通过一些高亮内容所吸引,然后继续阅读你的简历。所以不管你没有经验,又或者经验特别丰富,简历需要高亮你的一些技术专长、工作亮点等。高亮关键内容使用 <b></b> 标签。
这里提供两个网站:
根据自己的需求可自定义页面的图标。打开小图标网站,选择你需要的图标:
复制如下代码添加到你需要的位置:
<i class="fab fa-github"></i>
一般写样式有两种方式:内联样式、外部样式。
内联样式即直接在 HTML 元素上添加样式,例如:
<p style="position: relative;left: 22px;font-size: 15px;">规模:30人 | 时长:7个月</p>
外部样式即创建样式文件,在样式文件中定义样式,然后在需要的 HTML 页面引用样式文件并使用,例如:
my.css 文件内容如下:
.banner-div {
background-image: url("../imgs/banner.png");
background-repeat: no-repeat;
height: 24px;
display: block;
padding-top: 3px;
padding-left: 6px;
margin-bottom: 10px;
}
free.html 文件引入 my.css 文件。
<link rel="stylesheet" href="css/my.css">
页面中使用外部样式如下:
<div class="banner-div">
<span class="banner-span">
<i class="white-icon fas fa-user"></i> 个人简介
</span>
</div>
执行如下命令,即可将 HTML 转化为 PDF 文件。
cd D:\projects\awesome-resume
python3 convert.py #html 格式转为 pdf
最终的效果如下图:
Node.js 下载地址,根据自己的操作系统(32 位 / 64 位),下载对应的 msi 安装文件后,双击打开安装,next 即可安装完成。
使用 WIN + R 快捷键打开快捷输入,输入 CMD 打开命令行窗口,输入 node -v 查看 Node.js 版本。显示如下内容表示 Node.js 安装成功。
使用下面命令,将项目下载到本地:
cd D:\projects #切换到本地目录
git clone https://github.com/Ovilia/cv #下载项目
在 resume/ 目录中撰写你的简历。data.yml 文件写简历需要呈现的内容。id.jpg 替换为你自己的证件。
如果本项目要在 Windows 下运行,需修改 data.yml 文件字符集为 UTF-8,这里我通过 Nodepad++ 修改的。
其他文本编辑器也可以修改文件字符集。
data.yml 的内容如下:
/* #*/ export const PERSON = `
name:
first: 王
middle: 小
last: 二
about: 嗨,我叫王小二。我只是最无聊的人可以想象。我喜欢从后院的树上收集树叶并进行记录。每次我吃不均匀的花生。我不是机器人。请雇用我。
position: Web 前端开发工程师
......
contact:
email: huaairen@sina.com
phone: 13366547894
street: 科技路 99号
city: 陕西西安
website: blog.restlessman.cn
github: github.com/hellowHuaairen
# en, de, fr, pt, ca, cn, it, es, th, pt-br, ru, sv, id, hu, pl, ja, ka, nl, he, zh-tw, lt, ko, el, nb-no
lang: cn #这里表示显示的语言,cn 表示中文显示
`
修改 .eslintrc.json 文件内容,将下面内容中“unix”改为“windows”,因为我本地是 Windows 环境。
"linebreak-style": [
"error",
"unix"
],
在项目根目录,执行下面代码就可以运行项目:
npm install #安装依赖
npm run dev #本地运行
打开浏览器,在浏览器中访问:http://localhost:8080/home。
项目提供了 9 种简历模板,点击哪一种模板会自动生成对应简历。如下图:
在项目根目录,使用 WIN + R 快捷键打开命令行窗口,执行 npm run export 命令,项目会读取 resume 目录下的数据(yml 文件内容和 id.jpg),会在 PDF 目录下生成所有模板的简历。根据自己的需求选择相应的简历。
本文分享了三种方式写个人简历,它们各有特点:
*请认真填写需求信息,我们会在24小时内与您取得联系。