背景

前一陣子，閑下來(lái)便開(kāi)始著手做一個(gè)一直想做的東西--resume。經(jīng)過(guò)幾天業(yè)余時(shí)間的折騰，終于做出了一番模樣。
Github項(xiàng)目地址：https://github.com/eternityspring/eternityspring.github.io

需求來(lái)源

通常在各個(gè)招聘網(wǎng)站，我們填寫(xiě)完一些信息后，網(wǎng)站就可以幫助我們生成一個(gè)很不錯(cuò)的簡(jiǎn)歷。但是作為一名開(kāi)發(fā)者，尤其是前端開(kāi)發(fā)者，可能對(duì)這種簡(jiǎn)歷并不滿意。
這時(shí)候，相信有很多同胞們就希望能自己動(dòng)手做一個(gè)很漂亮的web版的簡(jiǎn)歷：

• 別具一格的，擁有自己的風(fēng)格，不同于大眾化的簡(jiǎn)歷風(fēng)格。
• 響應(yīng)式的，在手機(jī)、pad、pc各個(gè)平臺(tái)很方便的瀏覽。
• 可打印的，不僅僅能夠在瀏覽器很好的展示，在需要使用的時(shí)候也可以很方便的打印出來(lái)。
  有了這樣一個(gè)簡(jiǎn)歷，走到哪里，別人問(wèn)你你可以選擇掏出手機(jī)打開(kāi)網(wǎng)站，然后展示你的個(gè)人介紹。打開(kāi)網(wǎng)址然后打印成紙質(zhì)檔。

設(shè)計(jì)

有了需求，接下來(lái)就是設(shè)計(jì)了。包括界面的設(shè)計(jì)，和具體展示內(nèi)容的設(shè)計(jì)。
在界面設(shè)計(jì)方面，我們可以去：Pinterest、Behance、Dribbble、花瓣、站酷等知名的設(shè)計(jì)展搜索簡(jiǎn)歷或者resume，然后綜合一下，做出一個(gè)適合自己的風(fēng)格。
內(nèi)容方面，我們可以看看傳統(tǒng)簡(jiǎn)歷的內(nèi)容劃分。我在制作的過(guò)程中將內(nèi)容劃分成了：

• 基本資料：姓名、聯(lián)系方式之類(lèi)的。
• 個(gè)人簡(jiǎn)介：介紹一些個(gè)人基本情況。
• 經(jīng)驗(yàn)：不同時(shí)期簡(jiǎn)短的從業(yè)經(jīng)歷介紹。
• 技能：客觀的對(duì)自己所掌握的工具和技術(shù)棧打個(gè)分。
• 常逛網(wǎng)站：通過(guò)經(jīng)常瀏覽的這些網(wǎng)站可以看出我通常所關(guān)注的技術(shù)領(lǐng)域。

由于在瀏覽器中展示，為了好看，頁(yè)面可能會(huì)很長(zhǎng)。所以這里我把聯(lián)系方式放在首屏展示，頁(yè)腳也展示了一下。這樣可以讓瀏覽者便捷的聯(lián)系到我。

環(huán)境搭建

Git，做代碼管理版本控制。在這里我選擇把源碼托管在Github上，并創(chuàng)建了一個(gè)Github Page：
https://eternityspring.github.io。
webpack，做自動(dòng)化構(gòu)建。包括對(duì)js、scss的打包，還可以創(chuàng)建一個(gè)基于nodejs的http server已經(jīng)熱部署能眾多功能。
webstrom，前端開(kāi)發(fā)神器。不解釋。

架構(gòu)與編碼

這里，我采用了restful的開(kāi)發(fā)風(fēng)格。先做出了一個(gè)純html的版本，然后再把里邊展示的個(gè)人信息放在了一個(gè)json文件中。然后引入zepto和vue.js兩個(gè)js庫(kù)。當(dāng)然，如果你有耐心，也可以選擇自己造輪子用原生的來(lái)寫(xiě)。這里我不想折騰，所以用了第三方。在這方面很贊同一個(gè)群友的說(shuō)法：有輪子就用唄，只要不是方的就好-.-
vue.js是用來(lái)渲染數(shù)據(jù)到html頁(yè)面中的。zepto是用來(lái)發(fā)請(qǐng)求，獲取數(shù)據(jù)用的。
編碼調(diào)試，是最為機(jī)械的部分了，只要你是老司機(jī)，都是手起刀落嘛！

完善與點(diǎn)綴

做完上述功能，能不能添加點(diǎn)花樣呢？時(shí)下css3這么火熱，何不用css3添加一些過(guò)度動(dòng)畫(huà)，讓頁(yè)面中的信息展示的更自然。于是，設(shè)計(jì)一些過(guò)度效果，添加到頁(yè)面中。這里我選擇引入了wow.js。css3動(dòng)畫(huà)是自己寫(xiě)的。一共也沒(méi)多少效果。
于是，就有了頁(yè)面加載時(shí)的加載動(dòng)畫(huà)，有了頁(yè)面滾動(dòng)時(shí)，元素出現(xiàn)的動(dòng)畫(huà)。
web版的基本上是由了。那么實(shí)際中如果需要紙質(zhì)版呢？so easy，打印web版唄。于是基于上邊的版本做了一個(gè)打印測(cè)試，結(jié)果不盡人意。于是我查了一下，有css3的媒體查詢可以控制打印樣式（@media print）。如此神器，便又是一番啪啪啪的編碼調(diào)試。
最后，為了保護(hù)隱私。我選擇了把真實(shí)名字在打印的時(shí)候才顯示。在通常只顯示了昵稱(chēng)。
總結(jié)
比起看書(shū)，可能我更習(xí)慣于這種以需求為驅(qū)動(dòng)的學(xué)習(xí)吧。通過(guò)制作這個(gè)resume，學(xué)習(xí)了webpack的使用，學(xué)習(xí)了vue的使用。學(xué)習(xí)了css3的一些新特性。學(xué)習(xí)了flex布局。多動(dòng)手吧-.-
你也可以選擇fork我的項(xiàng)目，然后改一個(gè)自己的版本：
https://github.com/eternityspring/eternityspring.github.io
當(dāng)然，如果star我也不介意-.-