個人網站開發 (1)

從去年11月開始, 由於工作需求有時候需要處理一些前端相關的case, 不過自己前端技能點數幾乎為0(以前只寫過簡單的html跟js), 修個bug改點css調個layout或許還行, 可是要是哪天要我寫整個網站, 我八成就要準備升天了, 有鑑於此, 乾脆趁這時候重新開始學習前端開發的技能好了。

目前的學習計畫是, 先把前端的線上學習課程有系統的上個一輪(html, css, javascript以及進階的框架使用, 目前codecademy免錢的部分幾乎快上完了, 不過感覺也只是有個概念, 沒有真的下去做技能還是練不起來), 另外想說也來寫個介紹自己side projects的個人網站, 畢竟有實作才知道自己會遇到那些問題啊...。

首先, 由於不想從頭手刻到尾(真這樣等我刻完不知道要到西元幾年...畢竟只能用下班&休假寫啊), 所以第一步就是想找有哪些open source的網站可以當初始的版面, 再來慢慢改成自己想要的style. 幾番搜尋之後, 最後發現yelp.github.io的網站做得很棒, 有接github的api展現自己open source專案, 頁面簡潔好看又是Apache License, 就決定以這個做為基礎版面了。

決定好基礎版面之後, 就開始設計&實作設計啦, 首先先想好並列出自己想要的功能:

1. 有些自己的side project並沒有放在github上, 還有一些學生時代做的小玩意也想做個介紹網頁放上來, 所以不能只靠github api取得的data, 還必須有個virtual repositories讓我能放自定義的網頁。
2. 以前逛網站看到一些粒子特效覺得超級炫, 也想讓自己的網站有些酷炫的特效(超推薦codepen.io這個網站, 資源超級多又能即時demo, 又是MIT Licensed, 超級感謝有這網站以及上面大大們的分享)。
3. yelp的meun-bar並沒有下拉式選單的功能, 這個我希望自己的網站要有, 所以也要做。
4. etc...

再來就是美術素材部分, 這邊就包給我哥處理啦XDDD  這塊認真說最難搞, 畢竟我不會畫圖, 只能慢慢等我哥生出來, 不過這也間接造成我的惰性, 沒有素材的情況在開發時, 真的是呈現三天捕魚兩天曬網的情況, 這也讓我下定決心, 這個網站開發不能一步到位了, 我打算先把最想做的幾頁做出來後, 就先去想下個side project要做什麼, 畢竟我個人對前端的興趣雖然說有, 可是並不想一直花技能點數下去啊!!

目前總算初版做出來了:
https://project.zmcx16.moe/

除了首頁的之外, 因為MahoMangaDownloader並沒有放到Github上, 所以也做了MahoMangaDownloader的介紹頁:

https://project.zmcx16.moe/?page=MahoMangaDownloader

(以前都是用Blog作為介紹 & 更新頁, 現在總算有專屬頁面了, 雖然很陽春啦XD)

再做MahoMangaDownloader的介紹頁時, 花最多時間的竟然是在選漫畫demo的圖上面, 我用掉了整個過年看了超過100本漫畫, 然後過完年後再把這些圖組成分隔圖, 現在想想自己原本是為了網頁素材看漫畫, 結果最後反而還真的都變成在看漫畫了, 這實在是太扯了WWWWW

再來的計劃嘛, 目前打算在做個misc頁面, 把學生時代做的一些東西做成一個介紹網頁, 然後就繼續想想再來能做什麼吧~。