前一阵子,闲下来便开始着手作一个一直想作的东西--resume。通过几天业余时间的折腾,终于作出了一番模样。
Github项目地址:https://github.com/eternityspring/eternityspring.github.iocss
一般在各个招聘网站,咱们填写完一些信息后,网站就能够帮助咱们生成一个很不错的简历。可是做为一名开发者,尤为是前端开发者,可能对这种简历并不满意。
这时候,相信有不少同胞们就但愿能本身动手作一个很漂亮的web版的简历:html
有了这样一个简历,走到哪里,别人问你你能够选择掏出手机打开网站,而后展现你的我的介绍。打开网址而后打印成纸质档。前端
有了需求,接下来就是设计了。包括界面的设计,和具体展现内容的设计。
在界面设计方面,咱们能够去:Pinterest、Behance、Dribbble、花瓣、站酷等知名的设计展搜索简历或者resume,而后综合一下,作出一个适合本身的风格。
内容方面,咱们能够看看传统简历的内容划分。我在制做的过程当中将内容划分红了:vue
因为在浏览器中展现,为了好看,页面可能会很长。因此这里我把联系方式放在首屏展现,页脚也展现了一下。这样可让浏览者便捷的联系到我。node
Git,作代码管理版本控制。在这里我选择把源码托管在Github上,并建立了一个Github Page:
https://eternityspring.github.io。
webpack,作自动化构建。包括对js、scss的打包,还能够建立一个基于nodejs的http server已经热部署能众多功能。
webstrom,前端开发神器。不解释。webpack
这里,我采用了restful的开发风格。先作出了一个纯html的版本,而后再把里边展现的我的信息放在了一个json文件中。而后引入zepto和vue.js两个js库。固然,若是你有耐心,也能够选择本身造轮子用原生的来写。这里我不想折腾,因此用了第三方。在这方面很赞同一个群友的说法:有轮子就用呗,只要不是方的就好-.-
vue.js是用来渲染数据到html页面中的。zepto是用来发请求,获取数据用的(请求工具修改成了vue-resource)。
编码调试,是最为机械的部分了,只要你是老司机,都是手起刀落嘛!css3
作完上述功能,能不能添加点花样呢?时下css3这么火热,何不用css3添加一些过分动画,让页面中的信息展现的更天然。因而,设计一些过分效果,添加到页面中。这里我选择引入了wow.js。css3动画是本身写的。一共也没多少效果。
因而,就有了页面加载时的加载动画,有了页面滚动时,元素出现的动画。
web版的基本上是由了。那么实际中若是须要纸质版呢?so easy,打印web版呗。因而基于上边的版本作了一个打印测试,结果不尽人意。因而我查了一下,有css3的媒体查询能够控制打印样式(@media print)。如此神器,便又是一番啪啪啪的编码调试。
最后,为了保护隐私。我选择了把真实名字在打印的时候才显示。在一般只显示了昵称。git
比起看书,可能我更习惯于这种以需求为驱动的学习吧。经过制做这个resume,学习了webpack的使用,学习了vue的使用。学习了css3的一些新特性。学习了flex布局。多动手吧-.-
你也能够选择fork个人项目,而后改一个本身的版本:
https://github.com/eternityspring/eternityspring.github.io
固然,若是star我也不介意-.-github