背景
前一陣子，閑下來便開始着手做一個一直想做的東西--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我也不介意-.-