我的個人簡歷線上版

2022-08-05 15:39:13 字數 1979 閱讀 6828

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

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

產品面向的使用者是誰?

既然是找工作,那麼這份簡歷如果真能被看到應該是hr和國內的一些同行。

產品的入口是什麼?

對於hr,看到我這份線上簡歷肯定是通過我的pdf版簡歷,如果只是在上面附上一個連結,想象著hr手動輸入你的連結去看一下那簡直是太天真了,時間對於他們是很寶貴的,所以最好的形式應該是一個***,拿出手機掃一掃,直接瀏覽。對於一些同行,可能是上班的時候,看到社群中我的一些宣傳,點選連結的形式開啟。所以線上版本應該同時對移動端和pc端友好。

資訊架構?

簡歷應該主要包括以下內容:個人資訊,教育背景,工作經歷,技能。簡歷的最終呈現形式應該是簡潔的,突出重點,尤其是在移動端,由於螢幕的限制,應該只顯示關鍵內容。對於pc端可以適當的增加一些內容。

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

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

由於要同時支援移動頁和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)

}@media screen and (min-width: $screen-phone + 1) and (max-width: $screen-tablet - 1)

}@media screen and (min-width: $screen-tablet)

}

內容展示方面,提前做好規劃,在什麼樣尺寸方面展現什麼內容如何佈局等,然後使用相關的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目錄。

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

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

本文**於:猿2048

我的個人簡歷線上版

我的世界史蒂夫 熊孩子版

試題描述 終於放暑假啦!一年一度的熊孩子大賽也即將開始。想參加大賽的你,必須贏得預選賽。 大家都知道史蒂夫是建築高手,所以史蒂夫建了n棟樓,每棟樓為i j個方塊 本題是二維題 ,給預選賽的熊孩子們炸 史蒂夫真有錢啊! 。 預選賽規則如下 輸入第一行只有三個數n,m,k。從第二行開始到n 1行,每行有...

我們關於版權保護的意見與建議

網際網路讓資訊生產變得很方便,客觀上也降低了作品質量,增加了作品數量。因此寫書變得輕鬆,盈利變得困難。以和過去一樣的方式,保護現在的文字作品...

我的奔騰B50 MT豪華版 典雅灰 選車篇

一直在關注車子,一直想著為自己找個 小老婆 車子 猶豫不決的朋友,可以參考一下我的選車過程,作一個參考吧 在網上關注了好久好久,大約近 1年...