做爲前端開發，如何寫好一個簡歷

背景

前一陣子，閒下來便開始着手作一個一直想作的東西--resume。通過幾天業餘時間的折騰，終於作出了一番模樣。
Github項目地址：https://github.com/eternityspring/eternityspring.github.io

需求來源

一般在各個招聘網站，咱們填寫完一些信息後，網站就能夠幫助咱們生成一個很不錯的簡歷。可是做爲一名開發者，尤爲是前端開發者，可能對這種簡歷並不滿意。
這時候，相信有不少同胞們就但願能本身動手作一個很漂亮的web版的簡歷：

• 別具一格的，擁有本身的風格，不一樣於大衆化的簡歷風格。
• 響應式的，在手機、pad、pc各個平臺很方便的瀏覽。
• 可打印的，不單單可以在瀏覽器很好的展現，在須要使用的時候也能夠很方便的打印出來。

有了這樣一個簡歷，走到哪裏，別人問你你能夠選擇掏出手機打開網站，而後展現你的我的介紹。打開網址而後打印成紙質檔。

設計

有了需求，接下來就是設計了。包括界面的設計，和具體展現內容的設計。
在界面設計方面，咱們能夠去：Pinterest、Behance、Dribbble、花瓣、站酷等知名的設計展搜索簡歷或者resume，而後綜合一下，作出一個適合本身的風格。
內容方面，咱們能夠看看傳統簡歷的內容劃分。我在製做的過程當中將內容劃分紅了：

• 基本資料：姓名、聯繫方式之類的。
• 我的簡介：介紹一些我的基本狀況。
• 經驗：不一樣時期簡短的從業經歷介紹。
• 技能：客觀的對本身所掌握的工具和技術棧打個分。
• 常逛網站：經過常常瀏覽的這些網站能夠看出我一般所關注的技術領域。

因爲在瀏覽器中展現，爲了好看，頁面可能會很長。因此這裏我把聯繫方式放在首屏展現，頁腳也展現了一下。這樣可讓瀏覽者便捷的聯繫到我。

環境搭建

Git，作代碼管理版本控制。在這裏我選擇把源碼託管在Github上，並建立了一個Github Page：
https://eternityspring.github.io。
webpack，作自動化構建。包括對js、scss的打包，還能夠建立一個基於nodejs的http server已經熱部署能衆多功能。
webstrom，前端開發神器。不解釋。

架構與編碼

這裏，我採用了restful的開發風格。先作出了一個純html的版本，而後再把裏邊展現的我的信息放在了一個json文件中。而後引入zepto和vue.js兩個js庫。固然，若是你有耐心，也能夠選擇本身造輪子用原生的來寫。這裏我不想折騰，因此用了第三方。在這方面很贊同一個羣友的說法：有輪子就用唄，只要不是方的就好-.-
vue.js是用來渲染數據到html頁面中的。zepto是用來發請求，獲取數據用的（請求工具修改成了vue-resource）。
編碼調試，是最爲機械的部分了，只要你是老司機，都是手起刀落嘛！

完善與點綴

作完上述功能，能不能添加點花樣呢？時下css3這麼火熱，何不用css3添加一些過分動畫，讓頁面中的信息展現的更天然。因而，設計一些過分效果，添加到頁面中。這裏我選擇引入了wow.js。css3動畫是本身寫的。一共也沒多少效果。
因而，就有了頁面加載時的加載動畫，有了頁面滾動時，元素出現的動畫。
web版的基本上是由了。那麼實際中若是須要紙質版呢？so easy，打印web版唄。因而基於上邊的版本作了一個打印測試，結果不盡人意。因而我查了一下，有css3的媒體查詢能夠控制打印樣式（@media print）。如此神器，便又是一番啪啪啪的編碼調試。
最後，爲了保護隱私。我選擇了把真實名字在打印的時候才顯示。在一般只顯示了暱稱。

總結

比起看書，可能我更習慣於這種以需求爲驅動的學習吧。經過製做這個resume，學習了webpack的使用，學習了vue的使用。學習了css3的一些新特性。學習了flex佈局。多動手吧-.-
你也能夠選擇fork個人項目，而後改一個本身的版本：
https://github.com/eternityspring/eternityspring.github.io
固然，若是star我也不介意-.-