目標

打造一個線上履歷作品集網站，讓面試官能快速理解我的定位、技能、專案成果與聯絡方式，同時透過設計細節展現專業感。

內容架構

1. 個人資料、學經歷 → 定位 + 簡短故事

2. 技能樹 → 分層列點 + 強調亮點

   • 硬實力
     • 前端框架：Vue.js (Nuxt 3)、React
     • 樣式與設計：SCSS、Tailwind、Figma
     • 工具鏈：Git、Vite、GitHub Actions
   • 軟實力 （衝場面XD）
     • 溝通？問題解決能力？專案估時管理？…etc

3. 歷史專案

   • 專案名稱
   • 擔當角色
   • 設計思維 → 用 CAR 架構 包裝
     • C – Context（背景脈絡）
       • 專案是什麼？
       • 擔任的角色是什麼？
       • 目標是什麼？
       • 預期解決什麼問題？
     • A – Action（行動）
       • 實際做了什麼？
       • 採用了什麼方法？
       • 用了哪些技術或設計思維？
       • 遇到什麼困難和如何解決？
     • R – Result（成果）
       • 具體的結果或成效？
       • 數據呈現？
   • 產品網址

4. 聯絡我 → 行動召喚（Call To Action）

UIUX 規劃

列出目標之後，然後就開始規劃 UIUX 畫面，我覺得需要準備＆注意幾個部分

設計原則

1. 主色系：準備喜歡的 3-5 個主色系配色
2. 字級大小：
   • 注意字級大小(font-size)、是否粗體(font-weight)、字體高度(font-height)
   • 準備h1 - h6，而且要想一下電腦板/手機版的字體差異
     例如：電腦版標題是40px，手機版標題可能會是24px，以畫面舒服為準
3. 間隔大小：不成文規定得是8的倍數，例如: padding-right: 16px
4. 圓角設計：不成文規定得是8的倍數，如果有兩個div要圓角，用8倍數差來設計會比較平衡
   

草稿與視覺流程

1. 草稿：先用figma畫出wireframe
2. 內容：文字寫好，確定資訊層級
3. 上色：把主色系套進去
4. RWD：桌機橫排 → 手機直排；字級和間距調整，確保可讀性

上圖！

好，就這樣！