個人我的簡歷線上版

個人我的簡歷線上版

背景

在國外已經生活了將近四年，忽然間萌生了想辭掉如今工做回國從新找工做的想法。既然是找工做，那麼簡歷天然是少不了的事情。做爲一個前端工程師，若是沒有一份線上簡歷，這將是一件很low逼的事情，因而有了如今這份線上簡歷。

產品

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

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

2. 產品的入口是什麼？
   對於HR，看到我這份線上簡歷確定是經過個人PDF版簡歷，若是隻是在上面附上一個連接，想象着HR手動輸入你的連接去看一下那簡直是太天真了，時間對於他們是很寶貴的，因此最好的形式應該是一個二維碼，拿出手機掃一掃，直接瀏覽。對於一些同行，多是上班的時候，看到社區中個人一些宣傳，點擊連接的形式打開。因此線上版本應該同時對移動端和PC端友好。

3. 信息架構？
   簡歷應該主要包括如下內容：我的信息，教育背景，工做經歷，技能。簡歷的最終呈現形式應該是簡潔的，突出重點，尤爲是在移動端，因爲屏幕的限制，應該只顯示關鍵內容。對於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測試

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

性能測試

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

1. 在實體機上進行測試，測試機型爲iphone 5/6/6+還有個人13 MBP。

發佈

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

總結

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

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

寫完這篇文章以後，忽然間聽到一個噩耗，國內好像不能訪問github。此刻個人心情：