【專案記錄】個人主頁設計和實現

程然然然然然發表於2018-12-18

思路

希望有一個站點可以歸併技術文章、產品探索、生活記錄和專案程式碼。

技術文章
Hexo活躍齊全的生態的確很誘人，但通過Github管理文章、圖片資源其實並不是很優雅。再者，存在流通和傳播上的問題。現有的專欄平臺支援標籤和交流功能，也可手動設計標題代替類別目錄，夠夠的，於是選擇了segmentfault。

產品探索
研究一些好用的應用，個人對產品的思考，記在知乎專欄。

生活記錄
日誌、畫、書音影，豆瓣再合適不過。

專案程式碼
自然是GitHub。

個人站點即一個集中入口，簡單明瞭的首頁+個人介紹頁，完畢。

開發流程

在iPad上畫了個草圖，四個明晃晃的入口，要有Logo。

各種解析度的屏上表現不差勁，用SVG。

資源請求儘量簡單，SVG樣式可控，svg-sprite，那得上gulp了。

gulp處理完的symbol要插入頁面，加上入口項複用，用模板吧，熟悉的是handlebars。

既然上了gulp，乾脆SCSS，livereload，dev-server都搞一搞。

為什麼一個簡單的頁面要搞那麼複雜，練手而已。

開發記錄

gulp4 的更新

gulp預設裝了4.0.0的版本，很久沒關注。

增加gulp.series和gulp.parallel

gulp預設最大化並行執行任務，以往需要順序執行任務時，需要藉助輔助外掛run-sequence之類。上述兩個方法提供序列和並行選擇，同時gulp4中不再支援[task]寫法，必須使用上述兩個方法代替。

gulp.series(`clean`, `build`); // 先執行clean task，再執行build task
gulp.series(`clean`, function () {
    // do some things
});

gulp.parallel(`watch`, `connect`) // 同時執行watch和connect
gulp.series(`clean`, gulp.parallel(`styles`, `scripts`)) // 先執行clean，然後styles + scripts

gulp.watch(`src/**/*.js`, [`scripts`]) // error: watch task has to be a function (optionally generated by using gulp.parallel or gulp.series)

非同步任務需要結束訊號

當任務中可能有非同步程式碼（比如watch，比如dev-server），需要顯示發出非同步完成訊號

在Gulp 3.x中，你可以在不這樣做的情況下離開。如果您沒有顯式地發出非同步完成訊號，則只會假設您的任務是同步的，並且在任務函式返回後立即完成。 Gulp 4.x在這方面更加嚴格。您必須明確表示任務完成。

支援的寫法挺潮的

卡片佈局

思路

svg需要設定寬度和高度，如果跟隨卡片變化，卡片不能使用padding-bottom實現寬高比（沒有高度），所以卡片必須指定寬高。可以使用媒體查詢調整卡片尺寸，目前使用固定寬度實現（未測試大屏下情況）。
實現四張卡片對齊排布，四列兩列到一列分佈。flexbox搭配flex-wrap屬性可以實現自動換行，結合媒體查詢控制容器寬度實現列數控制。

卡片動畫

typing效果
右邊框模擬游標，一個邊框顏色透明->實色->透明的無限動畫
寬度控制字元顯示長度，使用step函式將動畫分段，產生間隔效果

DONE

專案倉庫：https://github.com/curlywater…
線上效果：https://curlywater.github.io/…

  1. 主內容區佈局
  2. 豆瓣卡片動畫
  3. 頁尾設計
  4. Github卡片動畫

相關文章