從零開始的個人作品集網站

為什麼要做這個作品

以前做個人作品集，光是「要先會架站、會部署」這道門檻就卡住我很多年；這次丟一個喜歡的網站風格給 Claude Code，說想要類似的感覺，它就把我的作品集做出來、部署上線了。

離開電視台之後，一直想有一個能完整展示自己的地方：動態特效、AI 影像生成、後期製作，這些年做過的東西攤開來給人看。但每次想到「要架站」「要部署」「要處理表單」，就打退堂鼓。技術門檻擋在最前面，作品集永遠停在「以後再說」。

這次迷你課讓我第一次真的把這件事做完：不用自己學怎麼架站，直接把想要的風格說清楚，交給 Claude Code 處理。

用到的工具與架構

• 參考風格：把喜歡的網站截圖／連結丟給它，說「我想要類似這種感覺」，它會先讀懂版面邏輯，再套進我自己的內容。
• Netlify：負責部署與聯絡表單（Netlify Forms），不用自己架伺服器。

以前怎麼做／現在怎麼做

以前想做作品集，第一步就卡住：不會寫網頁、不知道要部署在哪、聯絡表單要怎麼收信，光想就覺得麻煩，於是一直沒有自己的作品集網站，作品都散落在各個資料夾和雲端硬碟裡。

現在的做法完全不一樣：先想清楚要展示什麼（動態特效、AI 生成、後期製作三大類），把喜歡的網站風格截圖丟給 Claude Code，告訴它「想要類似這樣」，它就會先給一個粗略版本，再照我的內容和喜好一輪一輪調整。不用自己碰任何一行程式碼。

一次實際跑起來會發生什麼

先從首頁架構開始：導覽列、Hero 區、精選作品、類別瀏覽、關於、聯絡表單，一區一區確認。Hero 區原本只有文字，後來加上一支代表作影片，還特別調整播放鈕的樣式，讓手機和桌機看起來都舒服。

首頁 Hero 區：代表作影片搭配「品牌整合」「AI 生成」「後期製作」三個快速前往按鈕，讓人一進站就抓到重點。

現在的具體成果

網站已經正式上線在 wendy-liu-portfolio.netlify.app，架構完整涵蓋：

• Hero 區：代表作影片 + 三個類別快速入口。
• 精選作品：動態特效、AI 生成、品牌整合案例，用大卡片凸顯代表作。
• 類別瀏覽：把所有作品按「AI 企劃／生成／自媒體」「後期製作」等主題分類，方便瀏覽者依興趣切入。
• 聯絡表單：訪客可以直接在網站上留言洽談合作，不用另外寄信。

類別瀏覽頁：把這幾年做過的東西依主題分好類，讀者可以直接挑感興趣的類別點進去看。

**以前覺得做一個作品集網站門檻很高，真的有那麼簡單嗎？結果丟一張截圖、說一句「我想要做成這樣」，Claude Code 就先生出一個粗略版本，讓我能繼續往下調整。**原本覺得很難的障礙，就這樣一步一步解決了。

設計時做過哪些取捨與調整

• 聯絡表單不加隱藏防機器人欄位：一開始想加隱藏欄位防機器人，後來發現手機瀏覽器的自動填表會誤填隱藏欄位，反而讓平台把真人送出的訊息當垃圾丟掉，索性拿掉，交給平台內建的過濾機制。

下一步想優化什麼

想把「精選作品」的分類邏輯再打磨得更順手一點，讓不同背景的訪客（品牌方、同業、學員）都能快速找到他們最想看的那類作品，也想把更多這次迷你課測試出來的新作品陸續補進去。

給其他同學的話

不用先學會架站才能開始做作品集。先把想要的感覺講清楚——丟一張喜歡的截圖、說一句「我想要類似這樣」，剩下的交給 AI 先生出一個粗略版本，再一輪一輪調整，很多原本覺得過不去的門檻，做著做著就過去了。

進一步認識作者

我是 Wendy，做過四、五年電視台動態特效，現在以個人接案為主，同時也在應徵新工作。這個作品集網站是這次迷你課最想完成的一件事，完整版可以到 wendy-liu-portfolio.netlify.app 看看。