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

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

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

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

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

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

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

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

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

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

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

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

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

由于要同時(shí)支持移動(dòng)頁和pc頁，所以應(yīng)為響應(yīng)式布局。移動(dòng)方面，參考了阿里的flexible方案，但是在落地實(shí)現(xiàn)時(shí)我使用了一種更為簡單的方案，分別定義了三種尺寸的屏幕：480px(手機(jī))，480 - 768px(平板)，768以上(pc)。每一種屏幕對應(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語句。

使用fullpage.js。

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

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

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

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

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

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

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

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

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

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