鐵人檔案
每天多出的通勤時間，能做什麼？我決定把這些零碎時光，拿來挑戰一個「小而完整」的專案：用 Nuxt 3 從零開始打造我的作品集網站。
這 30 天，我會把大工程拆成小任務——從建立專案、UI/UX 思維、元件化設計，到 SEO 優化、圖片最佳化、GitHub Pages 上線。每一天的努力，就像利用通勤時間完成一個小挑戰，最後串起一個完整的成果。
這不只是技術練習，也是時間管理的實驗：證明即使只有零碎的時間，也能累積出有價值的作品。
今天的挑戰聚焦在 Contact 區塊，除了排版之外，也開始進入表單設計。版面配置延續整體風格：電腦版使用 雙欄式，手機版則轉為 單欄垂直排列，確保在不同裝置上...
除了重複的區塊可以抽成元件外，最小的組成單元常見就是按鈕，它有很多不同的狀態，透過抽離成獨立元件，能確保整體介面的一致性與邏輯可維護性。 常見的基礎元件包含：...
在表單設計裡，輸入框是最常出現的元件，但它同時也有許多變化，例如文字、數字、日期、多行文字等等。如果每一種情境都獨立寫一份程式碼，不僅會造成重複，更難以維護。這...
這個功能是：使用者按下送出表單後，可以自動將內容寄送到我的 email ，以便收到新訊息通知。通常會透過後端提供整合 api 來串接實作，但我不會後端，所以希望...
Day 15 的挑戰 focus 在 全站 RWD 檢查與微調。依序測試桌機、平板與手機版本，針對排版、字體、圖片大小與互動細節進行調整，確保在不同螢幕尺寸下都...
網站裡圖片往往是最佔空間的資源，如果沒有處理，會拖慢載入速度、影響使用體驗。透過壓縮、Lazy Loading、自適應尺寸等方式，不僅能加快網頁載入，也能減少流...
目標：希望在google 搜尋我的名字時，可以出現我的作品集網站。 1. SEO 基本觀念 SEO（Search Engine Optimization）：...
還記得在前段有設計 project-card 元件嗎？ 卡片上顯示專案名稱、我在其中所擔任的角色，並搭配設計概念與產品網址按鈕。角色定位以 hashtag 標...
主要針對navbar進行微微動畫的設計： 1. 點擊 navbar 的 item，可以描點至該區塊 在navbar 的 item 加上點擊事件，並為每個區塊元件...
每個 project-card 都需要以下資訊： 我希望「上次更新時間」能隨著 GitHub repo 的 commit 更新而自動同步。當我每次推送新版本（p...
