寒假目標#1: 建立個人專案網站！

前言

之前在寫推甄自傳的時候，我總覺得好可惜，明明做了很多的專案，卻有許多專案很難用三言兩語解釋，讓人很難快速地看到成果。沒辦法demo是一點，但一部分也跟我的表達能力不足有關。

所以，我想好好整理自己曾做過的專案，想辦法用淺顯易懂的方式呈現出來。至於建立個人網站的部份，其實是我老早就想做的。架設的能力是有，但卻不知道該做什麼網站出來，剛好現在找到了一個方向。

這篇文章會寫下我打算如何架設網站，還有打算陳列和介紹專案的一些方式與想法。

最終的成品可能會跟接下來所寫的不完全一樣，不如說一定不一樣。過程中，一定會遇到當前沒設想過的情況。做出來之後，我會另外再寫一篇文章來介紹。

網站架設草圖，包含一些個人的想法

架設一個網站，我認為大方向是需要考量到開發者的體驗(DX)和使用者的體驗(UX)。

前者(DX) 重在框架、套件的選用，注重在整份程式的撰寫方式：

程式碼是否容易閱讀和維護？將來會不會難以擴充、增加功能？簡單來說，就是最終要讓我要看得順眼，寫得開心。

後者(UX) 就跟網站最終呈現出來的樣子有關囉，是我這次打算特別注重的方面：

一句話總結，就是網頁畫面要順眼，和使用者間的互動要直覺。

畫面不可過於擁擠，又或過於花俏、要從使用者的角度出發，加強重點，淡化非相關要素等等，實際上要考量的地方很多，我認為這也是提昇我「表達力」的一環。

以下我將網頁設計還有框架選擇分開來細講：

1. 網頁設計概念

說到網頁設計，我想大多數人的第一印象會認為這個跟美學、設計有關，一般人學不來，也不是該去注重的部份。但我認為，這部份至關重要！

寫網站，或是說寫程式的最終目的，不就是要給人看，或給人用嘛？而使用的人，最先看到的，一定只是網站最終呈現出來的樣貌。不是背後的程式碼寫得多麼整潔、多麼井井有條，也不是在嘔心瀝血後的10%效能提升。

人會有主觀感受，並且喜歡偷懶：
    精心編排，勝過平鋪直敘的陳列；
    圖文並茂，勝過一整片黑底白字；
    一目了然，勝過千言萬語的解釋。

我這幾天剛看完一本講解如何設計UI的書，名稱叫 Refactoring UI，是開發出Tailwind的人撰寫的。網頁設計其實並沒有那麼玄乎。只是需要多思考幾層： 我希望怎麼呈現？使用者想要看什麼？呈現出來的效果看起來舒不舒服？

或許說得有些抽象，我列幾個自己有印象的點：

• 行距隨著字體大小要有所調整，防止閱讀時跳行。
• 不同字體設計出來的用途不同，有的適合放很大當標題，有的正相反。
• 放大數值並縮小標籤名稱，可以將焦點放在「數字」上，相反則較容易讓人找到對應的規格標籤。

還有很多書中我沒列舉要點，族繁不及備載，如果有興趣可以去找找這本書，滿有料的。

一句話總結：設計雖然很主觀，但是我們可以很有邏輯地，根據主觀感受去設計。

我的個人網頁並不打算有很花俏的設計，「舒服簡潔」四個字是大方向。

網頁瀏覽起來順暢易讀、能簡單直覺地觀看各個專案，就是當前的最大目標。

2. 架設網頁選用框架

如果只是以老樣子，以React為基底，使用Next.js + tailwind撰寫，並且最終架設在Vercel上我幾乎可以說是駕輕就熟了。

但是近期有個熱門的框架：Astro，適合用在架個人專案網站，讓我想試著使用看看。

一方面，Astro整體算上是用靜態網頁的方式，載入速度比起純React.js的動態網頁會快不少。

另一方面，他好像可以在不同頁面使用不同的npm package。這樣如果我要呈現不同的網頁類型的專案，就可以分開包裝各自的函式庫，可謂相當方利。

專案介紹方式

我的專案類型呢，大部分都不是網頁形式，無法簡單的呈現，甚至難以demo 。

根據不同的專案類型，我會需要使用不同的呈現方式去展現成果。

不同的呈現方式所許要花費的時間、和能呈現的效果也不一樣，理想上是花費最少的時間，呈現出整個專案的成果、帶來的效益、中間的難點、遇到的挫折、還有學到的事物。

當然不太可能全部呈現出來，但畢竟這裡說的是理想目標嘛。

實際上還是先以能呈現出「成果和效益」為主。

1. 專案類型

我先列一些做過的專案：

1. 友會定向遊戲用的活動網站
2. 對戰網頁遊戲
3. 資料視覺化互動式網頁
4. Discord 機器人
5. 運用別人的程式以達成自己的特定目的
6. 符合硬體指令集限制的客製化模型量化
7. Blender做的動畫影片
8. 刪除特定port上運行的thread的bash cmd
9. opencv 為相機影像去背，並定位物體位置及旋轉角度
10. 實際拍攝和剪輯後製的影片
11. 用AE讓朋友照片的臉會眨眼的同時一邊旋轉

我從上述的專案中，分類出一些標籤類型：

1. 網頁
2. 時效性目標
3. 製作中，部份輸出不完整
4. 互動式圖表
5. 配合特定程式運行
6. 需要特定電腦硬件
7. 需要登入
8. 沒有圖形輸出
9. 跟程式無關
10. 有外部網址
11. 影片呈現
12. 教學性質
13. 學習新知
14. 非程式相關
15. 功能簡單單一
16. 架設不便（ex.須額外docker 環境架設）

2. 專案介紹欄位

• 首先最理想是可以讓人實際使用一次：
• 網頁類型可以透過連結重新導向或是直接內嵌在自己的網站上
• 如果不用連結鏡頭、且沒有特定硬體需求，可以考慮codesandbox內嵌 or anaconda
• 不管程式能否實際讓人使用一次，都要有功能展示圖片(拍照、截圖、自行繪製)，有gif或許最好。

• 功能簡單，可能會讓文章相當短，文長落差極大。或許可另開設一區，專門放此類專案。

• 具教學性質，可能會想寫心得文，心得寫在部落格上比較便利也較統一。因此當前適合的做法，是將心得寫在部落格上，再同樣用外部連結or內嵌的方式導過去。

專案呈現方式總結：

1. 用圖片或gif的方式配合少許說明文字簡易說明專案，並呈現結果。
2. 後續再提供可以實際運行專案的外部連結和將其內嵌。
3. 如果有心得/教學文，同樣提供外部連結或將其內嵌。
4. 最後再附上參考資料及github連結網址。

期許自己能於寒假結束之前，將這個網站變得有模有樣。