作为前台开发，如何写好一个简历

通常在各个招聘网站，我们填写完少量信息后，网站即可以帮助我们生成一个很不错的简历。但是作为一名开发者，尤其是前台开发者，可能对这种简历并不满意。

这时候，相信有很多同胞们就希望能自己动手做一个很漂亮的web版的简历：

• 别具一格的，拥有自己的风格，不同于大众化的简历风格。
• 响应式的，在手机、pad、pc各个平台很方便的浏览。
• 可打印的，不仅仅能够在浏览器很好的展现，在需要使用的时候也可以很方便的打印出来。
  有了这样一个简历，走到哪里，别人问你你可以选择掏出手机打开网站，而后展现你的个人详情。打开网址而后打印成纸质档。

设计

有了需求，接下来就是设计了。包括界面的设计，和具体展现内容的设计。
在界面设计方面，我们可以去：Pinterest、Behance、Dribbble、花瓣、站酷等知名的设计展搜索简历或者者resume，而后综合一下，做出一个适合自己的风格。
内容方面，我们可以看看传统简历的内容划分。我在制作的过程中将内容划分成了：

• 基本资料：姓名、联络方式之类的。
• 个人简介：详情少量个人基本情况。
• 经验：不同时期简短的从业经历详情。
• 技能：客观的对自己所掌握的工具和技术栈打个分。
• 常逛网站：通过经常浏览的这些网站可以看出我通常所关注的技术领域。

因为在浏览器中展现，为了好看，页面可能会很长。所以这里我把联络方式放在首屏展现，页脚也展现了一下。这样可以让浏览者便捷的联络到我。

环境调试

Git，做代码管理版本控制。在这里我选择把源码托管在Github上，并创立了一个Github Page。
webpack，做自动化构建。包括对js、scss的打包，还可以创立一个基于nodejs的http server已经热部署能众多功能。webstrom，前台开发神器。不解释。

架构与编码

这 里，我采用了restful的开发风格。先做出了一个纯html的版本，而后再把里边展现的个人信息放在了一个json文件中。而后引入zepto和 vue.js两个js库。当然，假如你有耐心，也可以选择自己造轮子用原生的来写。这里我不想折腾，所以用了第三方。在这方面很赞同一个群友的说法：有轮 子就用呗，只需不是方的就好-.-
vue.js是用来渲染数据到html页面中的。zepto是用来发请求，获取数据用的。
编码调试，是最为机械的部分了，只需你是老司机，都是手起刀落嘛！

完善与点缀

做完上述功能，能不能增加点花样呢？时下css3这么火热，何不用css3增加少量过度动画，让页面中的信息展现的更自然。于是，设计少量过度效果，增加到页面中。这里我选择引入了wow.js。css3动画是自己写的。一共也没多少效果。

于是，就有了页面加载时的加载动画，有了页面滚动时，元素出现的动画。

web 版的基本上是由了。那么实际中假如需要纸质版呢？so easy，打印web版呗。于是基于上边的版本做了一个打印测试，结果不尽人意。于是我查了一下，有css3的媒体查询可以控制打印样式（@media print）。如此神器，便又是一番啪啪啪的编码调试。

最后，为了保护隐私。我选择了把真实名字在打印的时候才显示。在通常只显示了昵称。

总结

比起看书，可能我更习惯于这种以需求为驱动的学习吧。通过制作这个resume，学习了webpack的使用，学习了vue的使用。学习了css3的少量新特性。学习了flex布局。多动手吧-.-

这里推荐一下我的前台学习交流扣qun：784783012 ，里面都是学习前台的，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到手机端HTML5的项目实战的学习资料都有整理，送给每一位前台小伙伴。2019最新技术，从企业招聘人才需求 到怎样学习前台开发，和学习什么内容都有免费系统分享。好友都在里面学习交流，每天都会有大牛定时讲解前台技术!

点击：加入