Online Demo: http://139.196.87.48:9002/brilliant/
Select a template
First of all a lot of Baidu, Gu dog look, find a favorite template, pay attention to look at the technology template to suit their own appropriate to run simple appropriate environment, the best pure HTML, just a browser can view it.
If you are using a template to bootstrap, vue, angular and other related technologies, you may need to modify the deployment or installation when the relevant technical understanding, here is a personal site template template I found home.
Templates provide: Template House
Template name: bright green web front-end engineer resume template
Download: http://www.cssmoban.com/cssthemes/7585.shtml
The entire site simple and beautiful, fresh color, personalized, technology used is relatively simple, as long as the browser will be able to directly view, it is suitable to build a personal website.
Website contains basic information, work experience, education, experience, professional skills, works display modules, we can add the appropriate according to their own needs, delete, and modify.
basic information
Basic information page.
work experience
Experience page.
professional skill
Professional skills page.
Business Analysis
1. In order to facilitate customized information, we decided to focus on the page display information to extract JSON file, page read JSON file information display.
2. The information is drawn into a JSON file, as we need to customize or modify your resume information when directly modify the corresponding JSON file to take effect.
3. General Apart from Chinese resume, resume and sometimes need to use English, so our goal should be able to support resume in English to switch.
The demand deletions and modifications modules, such as here we delete unnecessary customer evaluation, increase a project's timeline experience the type of module.
Extract information
According to the above link to download the template, using the editor, open the downloaded project.
Project structure is very simple, is an HTML file, a CSS file.
We .json two new documents, collecting relevant information in your resume.
Read the information
Next we read information displayed on a page from a JSON file. Because we do need to change the page displayed in English switch, so we chose Vue for data binding.
另外由于有些浏览器的跨域限制，在读取本地JSON文件时会出现跨域问题，所以这里需要借用客户端跨域技术JSONP来处理。
下载Vue
下载 Vue.min.js ，放置到本地，如下图所示。
引入Vue
打开 index.html，在页面直接引入就直接可以使用了。
当然如果不想下载，你也可以直接使用CDN.
下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
-
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
-
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
加载JSON
首先在JSON文件的外围加上JSONP的回调方法，如中文的加上 zh_cn({json info})。
然在在页面添加一个 zh_cn 同名函数，这样在json载入后，就会调用 zh_cn 这个函数。
zh_cn.json
en_us.json
然后在页面引入两个json文件，注意引用语句必须放置在回调函数之后。因为文件加载成功之后会进行回调，所以回调函数得先存在。
<script src="assets/language/en_us.json"></script> <script src="assets/language/zh_cn.json"></script>
两个回调方法，将中英文简历信息加载并存入 localStorage， 并且在初始化页面和中英文切换时根据需求读取中文或英文简历信息。
<script type="text/javascript">
function en_us(data) {
window.localStorage.setItem("en_us", JSON.stringify(data))
}
function zh_cn(data) {
window.localStorage.setItem("zh_cn", JSON.stringify(data))
var vm = new Vue({
name: 'resume',
el: '#container',
data: {
lang:'zh_cn',
language:null,
basicInfo:null,
experiences:null,
projects:null,
education:null,
skills:null,
portfolio:null,
contact:null
},
methods: {
changeLanguage: function () {
var zh_cn = 'zh_cn'
var en_us = 'en_us'
if(this.lang == zh_cn) {
this.lang = en_us
this.language = "Chinese"
} else {
this.lang = zh_cn
this.language = "英文简历"
}
var data = window.localStorage.getItem(this.lang)
if(data != null) {
data = JSON.parse(data)
this.basicInfo = data.basicInfo
this.experiences = data.experiences
this.projects = data.projects
this.education = data.education
this.skills = data.skills
this.portfolio = data.portfolio
this.contact = data.contact
}
}
},
mounted:function(){
this.changeLanguage()
}
})
}
</script>
就这么简单，完成之后只需要修改JSON信息就可以定制自己的网上简历了。定制完成直接丢到tomcat就可以了，服务器连重启都不用。
测试效果
中文简历
英文简历
专业技能
项目经验
作品展示
源码下载
选择模板
首先多多百度、谷狗一下，寻找到一款心仪的模板，注意关注一下模板使用的技术要适合自己为宜，以运行环境简单为宜，最好是纯HTML，只要一个浏览器就可以查看。
如果是使用到bootstrap、vue、angular等相关技术的模板，就可能需要在修改或安装部署的时候对相关技术有所了解了，下面是我模板之家找到的一款个人网站模板。
模板提供：模板之家
模板名称：亮绿色前端工程师web简历模板
下载地址：http://www.cssmoban.com/cssthemes/7585.shtml
整个网站简洁美观，颜色清新，富有个性化，使用的技术也比较简单，只要用浏览器就能直接查看，很适合用来打造个人网站。
网站包含基础信息、工作经验、教育经历、专业技能、作品展示等模块，我们可以根据自己的需要进行适当添加、删除和修改。
基础信息
基础信息页面。
工作经验
工作经验页面。
专业技能
专业技能页面。
业务分析
1.为了方便定制信息，我们决定把页面展示信息集中抽取到JSON文件，页面读取JSON文件信息进行展示。
2.将信息都抽取到JSON文件，当我们需要定制或修改简历信息的时候直接修改对应的JSON文件即可生效。
3.一般我们除了中文简历，有时也需要用到英文简历，所以我们的目标还要能支持中英文简历可以切换。
4.根据需求增删和修改模块，比如这里我们删除不需要的客户评价，增加一个项目经验的时间线类型模块。
抽取信息
根据上面链接下载模板后，利用编辑器打开下载好的项目。
项目结构非常简单，主要是一个HTML文件，一个CSS文件。
我们新建两个.json文件，分别收集中英文简历的相关信息。
读取信息
接下来我们从JSON文件读取信息显示到页面。因为我们做中英文切换时需要改变页面显示，所以我们选用Vue来进行数据绑定。
另外由于有些浏览器的跨域限制，在读取本地JSON文件时会出现跨域问题，所以这里需要借用客户端跨域技术JSONP来处理。
下载Vue
下载 Vue.min.js ，放置到本地，如下图所示。
引入Vue
打开 index.html，在页面直接引入就直接可以使用了。
当然如果不想下载，你也可以直接使用CDN.
下推荐国外比较稳定的两个 CDN，国内还没发现哪一家比较好，目前还是建议下载到本地。
-
Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
-
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
加载JSON
首先在JSON文件的外围加上JSONP的回调方法，如中文的加上 zh_cn({json info})。
然在在页面添加一个 zh_cn 同名函数，这样在json载入后，就会调用 zh_cn 这个函数。
zh_cn.json
en_us.json
然后在页面引入两个json文件，注意引用语句必须放置在回调函数之后。因为文件加载成功之后会进行回调，所以回调函数得先存在。
<script src="assets/language/en_us.json"></script> <script src="assets/language/zh_cn.json"></script>
两个回调方法，将中英文简历信息加载并存入 localStorage， 并且在初始化页面和中英文切换时根据需求读取中文或英文简历信息。
<script type="text/javascript">
function en_us(data) {
window.localStorage.setItem("en_us", JSON.stringify(data))
}
function zh_cn(data) {
window.localStorage.setItem("zh_cn", JSON.stringify(data))
var vm = new Vue({
name: 'resume',
el: '#container',
data: {
lang:'zh_cn',
language:null,
basicInfo:null,
experiences:null,
projects:null,
education:null,
skills:null,
portfolio:null,
contact:null
},
methods: {
changeLanguage: function () {
var zh_cn = 'zh_cn'
var en_us = 'en_us'
if(this.lang == zh_cn) {
this.lang = en_us
this.language = "Chinese"
} else {
this.lang = zh_cn
this.language = "英文简历"
}
var data = window.localStorage.getItem(this.lang)
if(data != null) {
data = JSON.parse(data)
this.basicInfo = data.basicInfo
this.experiences = data.experiences
this.projects = data.projects
this.education = data.education
this.skills = data.skills
this.portfolio = data.portfolio
this.contact = data.contact
}
}
},
mounted:function(){
this.changeLanguage()
}
})
}
</script>
就这么简单，完成之后只需要修改JSON信息就可以定制自己的网上简历了。定制完成直接丢到tomcat就可以了，服务器连重启都不用。
测试效果
中文简历
英文简历
专业技能
项目经验
作品展示