摘要：我的個(gè)人簡(jiǎn)歷線上版背景在國(guó)外已經(jīng)生活了將近四年，突然間萌生了想辭掉現(xiàn)在工作回國(guó)重新找工作的想法。設(shè)計(jì)設(shè)計(jì)主要包括以下幾個(gè)部分顏色，字體中文和英文，圖像等。色調(diào)大致如下字體方面，英文字體就不必說(shuō)了，系統(tǒng)自帶的已經(jīng)足夠了，我選了，個(gè)人偏好。

在國(guó)外已經(jīng)生活了將近四年，突然間萌生了想辭掉現(xiàn)在工作回國(guó)重新找工作的想法。既然是找工作，那么簡(jiǎn)歷自然是少不了的事情。作為一個(gè)前端工程師，如果沒有一份線上簡(jiǎn)歷，這將是一件很low逼的事情，于是有了現(xiàn)在這份線上簡(jiǎn)歷。

不懂產(chǎn)品的開發(fā)不是一個(gè)好的開發(fā)。在做這份簡(jiǎn)歷之前我站在產(chǎn)品的角度上進(jìn)行了很多思考:

產(chǎn)品面向的用戶是誰(shuí)？
既然是找工作，那么這份簡(jiǎn)歷如果真能被看到應(yīng)該是HR和國(guó)內(nèi)的一些同行。

產(chǎn)品的入口是什么？
對(duì)于HR，看到我這份線上簡(jiǎn)歷肯定是通過(guò)我的PDF版簡(jiǎn)歷，如果只是在上面附上一個(gè)鏈接，想象著HR手動(dòng)輸入你的鏈接去看一下那簡(jiǎn)直是太天真了，時(shí)間對(duì)于他們是很寶貴的，所以最好的形式應(yīng)該是一個(gè)二維碼，拿出手機(jī)掃一掃，直接瀏覽。對(duì)于一些同行，可能是上班的時(shí)候，看到社區(qū)中我的一些宣傳，點(diǎn)擊鏈接的形式打開。所以線上版本應(yīng)該同時(shí)對(duì)移動(dòng)端和PC端友好。

信息架構(gòu)？
簡(jiǎn)歷應(yīng)該主要包括以下內(nèi)容：個(gè)人信息，教育背景，工作經(jīng)歷，技能。簡(jiǎn)歷的最終呈現(xiàn)形式應(yīng)該是簡(jiǎn)潔的，突出重點(diǎn)，尤其是在移動(dòng)端，由于屏幕的限制，應(yīng)該只顯示關(guān)鍵內(nèi)容。對(duì)于PC端可以適當(dāng)?shù)脑黾右恍﹥?nèi)容。

設(shè)計(jì)主要包括以下幾個(gè)部分: 顏色，字體(中文和英文)，圖像等。作為一個(gè)開發(fā)，這對(duì)我來(lái)說(shuō)還是有點(diǎn)難度的，對(duì)于顏色方面，由于個(gè)人的偏好，比較喜歡極簡(jiǎn)風(fēng)(又稱性冷淡風(fēng))，所以色彩方面整體比較淡雅，色彩使用colors進(jìn)行調(diào)配。色調(diào)大致如下:

字體方面，英文字體就不必說(shuō)了，系統(tǒng)自帶的已經(jīng)足夠了，我選了monospace，個(gè)人偏好。中文字體讓人非常為難，好看的系統(tǒng)沒有，如果引入外部字體，大幾千個(gè)漢字會(huì)造成字體文件非常大，用戶的響應(yīng)時(shí)間也會(huì)增加，在沒有更好的方案之前，最終還是選用系統(tǒng)默認(rèn)的中文字體 - 微軟雅黑和華文細(xì)黑。圖片方面，頁(yè)面中引用的圖片只有本人的頭像和一個(gè)微信二維碼，所以圖片方面沒有太大的問(wèn)題(已考慮到iphone的2x或3x retina高分屏)。

實(shí)現(xiàn)方面，引用了前端自動(dòng)化工具gulp?？赡苡械娜藭?huì)說(shuō)我裝逼，總共幾個(gè)頁(yè)面，純html，css，js兩三個(gè)小時(shí)完全可以做的很好。你要是這么說(shuō)，我也無(wú)言以對(duì)，使用gulp是基于以下幾個(gè)方面考慮:

開發(fā)時(shí)，我希望頁(yè)面可以實(shí)時(shí)刷新，能夠立馬反饋到我代碼方面的更新，使用純頁(yè)面開發(fā)則需要我手動(dòng)刷新，作為一個(gè)工程師簡(jiǎn)直無(wú)法忍受

相比于css我更喜歡sass/scss，所以要求能夠?qū)崟r(shí)編譯到css

從長(zhǎng)遠(yuǎn)的角度來(lái)看，以后應(yīng)該會(huì)對(duì)該項(xiàng)目進(jìn)行更新，當(dāng)項(xiàng)目變得龐大時(shí)再引入自動(dòng)化流程為時(shí)已晚

線上版本和開發(fā)版本是有區(qū)別的。如果在本地開發(fā)之后，直接推到線上在展示方面沒什么問(wèn)題，但是在性能方面表現(xiàn)的則不太好。一個(gè)良好的線上版本應(yīng)該是壓縮合并過(guò)后的html/css/js/image等，將文件體積和http請(qǐng)求數(shù)減少到最小，這樣用戶在網(wǎng)絡(luò)環(huán)境并不好的環(huán)境下也能在可接受范圍內(nèi)訪問(wèn)到頁(yè)面。自動(dòng)化流程中的一些工具可以幫助我們很方面的做到這些。

由于要同時(shí)支持移動(dòng)頁(yè)和pc頁(yè)，所以應(yīng)為響應(yīng)式布局。移動(dòng)方面，參考了阿里的flexible方案，但是在落地實(shí)現(xiàn)時(shí)我使用了一種更為簡(jiǎn)單的方案，分別定義了三種尺寸的屏幕：480px(手機(jī))，480 - 768px(平板)，768以上(pc)。每一種屏幕對(duì)應(yīng)于html font-size: 16px, 20px, 24px。其他元素尺寸使用rem。這種方案，元素雖不會(huì)等比放大，但是顯示效果可接受。

//IOS: 320/480, 320/568 -> 2, 375/667 -> 2, 414/736 -> 3
@media screen and (max-width: $screen-phone) {
  html {
    font-size: 16px;
  }
}

@media screen and (min-width: $screen-phone + 1) and (max-width: $screen-tablet - 1) {
  html {
    font-size: 20px;
  }
}

@media screen and (min-width: $screen-tablet) {
  html {
    font-size: 24px;
  }
}

內(nèi)容展示方面，提前做好規(guī)劃，在什么樣尺寸方面展現(xiàn)什么內(nèi)容如何布局等，然后使用相關(guān)的media-query語(yǔ)句。

使用fullpage.js。

開發(fā)時(shí)，使用gulp browser-sync作為本地的靜態(tài)服務(wù)器，這樣當(dāng)你有所改動(dòng)時(shí)，頁(yè)面會(huì)實(shí)時(shí)刷新，另一個(gè)好處，你可以同時(shí)在移動(dòng)設(shè)備進(jìn)行測(cè)試。

使用bower作為包管理器，搭配gulp的wiredep工具，引入的外部js文件時(shí)會(huì)自動(dòng)引入到頁(yè)面中。搭配其他一些工具對(duì)html/css/js等進(jìn)行壓縮合并等。

talk is easy, show me the code, 具體請(qǐng)參考項(xiàng)目的gulpfile.js文件。

使用responsive design工具對(duì)各尺寸屏幕進(jìn)行測(cè)試，在各種尺寸下顯示良好:

速度測(cè)試方面使用chrome network throttling對(duì)各種網(wǎng)絡(luò)環(huán)境下進(jìn)行測(cè)試, 即使是在GPRS環(huán)境下，也能在2s左右打開頁(yè)面:

在實(shí)體機(jī)上進(jìn)行測(cè)試，測(cè)試機(jī)型為iphone 5/6/6+還有我的13 MBP。

對(duì)于一個(gè)程序員，github應(yīng)該是你最好的托管中心。對(duì)于靜態(tài)頁(yè)面github提供了兩種方式: gh-pages分支和master分支的docs目錄。我采用了第二種方式，gulp構(gòu)建流程的最后一步就是將線上使用到的文件拷入到docs目錄。

感興趣的話你就掃一掃吧:

這個(gè)小項(xiàng)目耗時(shí)2天，線上版本為CV線上版。寫這篇博客的目的一方面是為了對(duì)這個(gè)項(xiàng)目進(jìn)行一些總結(jié)，如果你對(duì)源代碼感興趣請(qǐng)?jiān)L問(wèn)項(xiàng)目地址。另一方面也希望業(yè)內(nèi)的一些朋友能夠關(guān)注到我給我提供一些工作的機(jī)會(huì)，先謝謝各位大佬。如果你想更多的了解我，請(qǐng)?jiān)L問(wèn)我的個(gè)人主頁(yè)。

寫完這篇文章之后，突然間聽到一個(gè)噩耗，國(guó)內(nèi)好像不能訪問(wèn)github。此刻我的心情：