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

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

不懂產品的開發不是一個好的開發。在做這份簡歷之前我站在產品的角度上進行了很多思考:

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

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

信息架構？
簡歷應該主要包括以下內容：個人信息，教育背景，工作經歷，技能。簡歷的最終呈現形式應該是簡潔的，突出重點，尤其是在移動端，由于屏幕的限制，應該只顯示關鍵內容。對于PC端可以適當的增加一些內容。

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

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

實現方面，引用了前端自動化工具gulp。可能有的人會說我裝逼，總共幾個頁面，純html，css，js兩三個小時完全可以做的很好。你要是這么說，我也無言以對，使用gulp是基于以下幾個方面考慮:

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

相比于css我更喜歡sass/scss，所以要求能夠實時編譯到css

從長遠的角度來看，以后應該會對該項目進行更新，當項目變得龐大時再引入自動化流程為時已晚

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

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

//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;
  }
}

內容展示方面，提前做好規劃，在什么樣尺寸方面展現什么內容如何布局等，然后使用相關的media-query語句。

使用fullpage.js。

開發時，使用gulp browser-sync作為本地的靜態服務器，這樣當你有所改動時，頁面會實時刷新，另一個好處，你可以同時在移動設備進行測試。

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

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

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

速度測試方面使用chrome network throttling對各種網絡環境下進行測試, 即使是在GPRS環境下，也能在2s左右打開頁面:

在實體機上進行測試，測試機型為iphone 5/6/6+還有我的13 MBP。

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

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

這個小項目耗時2天，線上版本為CV線上版。寫這篇博客的目的一方面是為了對這個項目進行一些總結，如果你對源代碼感興趣請訪問項目地址。另一方面也希望業內的一些朋友能夠關注到我給我提供一些工作的機會，先謝謝各位大佬。如果你想更多的了解我，請訪問我的個人主頁。

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