Cinematic portfolio
一個單頁作品集，採用深色調，靈感來自編輯和 VFX 藝術家的作品集頁面：人物照片後方有巨大的浮水印文字，姓名疊在前面，標題為雙色（白色與一種強調色）。進入頁面時，30 個代理會逐步建構各個區塊（使用內建的 agent-build-effect 技能，已預置於 template/vendor/ 中）。
template/
index.html 頁面框架，無需修改
data.js 所有內容，只需編輯此檔案
styles.css 樣式；可透過 CSS 變數或 `data.js` 中的 `accent` 更改顏色
portfolio.js 根據 data.js 建構頁面，並啟動代理效果
vendor/ agent-build.js + .css
assets/ 已去背的人物照片 + 能力卡片圖片（範例：6 張深色/紅色圖片）
scripts/cutout.py 使用 rembg 去背人物照片
references/image-prompts.md 卡片圖片的提示詞，風格一致
流程
1. 在開始前詢問足夠資訊
一次簡潔地詢問使用者尚未提供的內容：
- 用於大標題的簡稱（一個詞最佳）、全名、職稱、一句自我介紹。
- 人物照片：半身或全身照，背景不要太雜亂，稍微側身。可以使用真實照片或 3D 渲染圖。
- 3 到 6 項想要展示的能力或專案（名稱、一句描述、使用的技術）。如果有附連結的實際專案，請為卡片設定
href。 - 經歷（工作、學歷）、技能、工作流程、一句引言。
- 媒體報導或獎項（如果沒有，則省略該區塊）。
- 聯絡方式：電子郵件、地區、行動呼籲按鈕。
- 頁面語言、強調色（預設為紅色
#ff3b30）、浮水印文字（預設為PORTFOLIO）。
請勿虛構數據、獎項或媒體報導。如果使用者沒有某個項目，請從 data.js 中移除，頁面會自動忽略該區塊。
2. 複製範本
將整個 template/ 目錄複製到使用者指定的位置（例如 ./my-portfolio/）。請勿修改技能中的原始範本。
3. 去背人物照片
pip install rembg pillow
python -I <skill>/scripts/cutout.py anh-goc.jpg my-portfolio/assets/photo.webp
預設模型 isnet-general-use 較輕量（約 180 MB，僅需下載一次）。僅在記憶體充足的機器上嘗試 birefnet-portrait：此模型約 1 GB，且曾在 1440px 圖片上導致記憶體不足。請在灰色背景上檢查一次結果（使用 PIL 合成灰色背景後再讀取圖片）。務必保留頭髮、眼鏡和手持物品。將 hero.photo 設為 assets/photo.webp。
4. 能力卡片圖片
範本已提供 6 張深色/紅色圖片（代理、自動化、網頁、聊天機器人、試算表、影片）。如果與卡片內容相符，可以直接使用。如果需要自訂圖片，請遵循 references/image-prompts.md 的指引：保留風格後綴，只更改主體。如果要更改強調色，請同時更改提示詞中的色碼。在大量生成圖片前，務必先詢問使用者（以免消耗他們的帳戶額度）。
如果沒有合適的圖片，請移除該卡片的 image 欄位，卡片仍會美觀地顯示（但無圖片）。請勿將同一張圖片用於內容不同的兩張卡片。
5. 填寫 data.js
hero.name：一個詞，會自動轉為大寫。如果名稱超過 7 個字元，請在.pf-name中調小字級。hero.stats：僅填寫真實數據（能力數量、年資、技術數量等）。- 區塊標題包含
title（白色）和accent（強調色）。兩個部分要簡短有力，例如：「不只是程式碼。」/「運行的解決方案。」 agents.labels：根據頁面語言翻譯。例如繁體中文：{ status: "{agents} 個代理 · {edits} 次編輯", building: "正在建構頁面", done: "建構完成", skip: "跳過" }。- 所有文字透過
textContent設定，因此無法嵌入 HTML（這是出於安全考量的設計）。
6. 測試（先檢查數字，再檢查圖片）
直接使用瀏覽器開啟 index.html（支援 file:// 協定），或使用任何靜態伺服器。使用 Playwright 在 1440×900 和 390×844 解析度下，加上 ?agents 參數測試：
({
sections: document.querySelectorAll(".pf-section").length,
overflowX: document.documentElement.scrollWidth > innerWidth, // 必須為 false
photo: document.querySelector(".pf-photo img")?.naturalWidth, // > 0
waiting: document.querySelectorAll('[data-ab="wait"]').length, // 滾動到底後應為 0
})
使用 window.scrollTo 以每次 600px 的步長滾動，每次滾動後等待約 1 秒，然後檢查 waiting 是否歸零，且主控台沒有錯誤。分別在兩種尺寸下各拍一張英雄區塊的截圖，以評估視覺效果。注意：自我介紹文字不能遮擋到人物；在手機版上，臉部不能被文字遮蓋。
7. 上線
結果目錄是靜態網站：可直接拖放到 Netlify Drop、使用 vercel deploy、GitHub Pages 或 Cloudflare Pages。無需建構步驟。
整合到現有的 Next.js / React 專案
重複使用 styles.css，將 :root 改為 .pf。將渲染邏輯改寫成伺服器元件，保留原有的 class 名稱。使用 agent-build-effect 技能中的 AgentBuild.tsx 元件來掛載效果，並使用與 portfolio.js 相同的 targets 列表。在實作 Next 版本時曾遇到的問題：
- 浮動標頭（sticky header）：為頁面設定負的
margin-top（等於標頭高度），讓英雄區塊可以延伸到標頭下方。 next/image使用fill屬性時，父容器必須設定position: relative，否則圖片會填滿整個頁面。- Anton 字體支援越南文字元。如果要自行託管字體，請下載完整的 latin、latin-ext 和 vietnamese 子集。
- Turbopack 開發伺服器有時會忽略使用
sed修改的 CSS 變更。改用編輯工具或直接寫入檔案，它就會偵測到變更。