mohammadNafia/portfolio

此為原始貼文，保留以供溯源。並非工作副本。

權威系統位於 docs/pixel-portfolio-style/ ，包含四個參考檔案及 assets/base.css。請閱讀該處。

此檔案早於建置所依賴的兩項新增內容：規則 #0（就地應用系統；絕不重寫一個可運作、已測試的應用程式以採用某種外觀——該規則決定了整個重新設計）以及規則 #9 加上 references/rtl-and-locales.md 指標。若依此副本操作，將錯過這兩項。

像素作品集風格

一套完整的視覺+動態系統。請嚴格遵循。當此處未涵蓋某項內容時，請選擇更安靜、更圓潤、更幾何的選項——切勿引入新的顏色、字體、圓角半徑或緩動曲線。

不可妥協之事（每次均需閱讀）

1. 僅限兩種字體。 區塊標題與英雄文字使用像素顯示字體。其他所有內容使用幾何無襯線字體。
2. 僅限一種強調色。 藍色 #0B8DF8。次要按鈕使用黑色 #111。不得使用其他顏色。
3. 每個區塊標題 為：大寫像素字體 + 手繪波浪 SVG 底線，置中對齊。
4. 每個區塊 在滾動時以相同的模糊漸顯過渡效果顯示（請參閱 references/motion.md）。
5. 圓角半徑為藥丸形或 20px。 絕不使用 4px、8px 或尖角（鋸齒分隔線除外）。
6. 無邊框。 區塊間隔來自 #F2F2F2 填充與柔和陰影，而非 1px 線條。
7. 置中，最大 1080px 內容欄位。 寬裕的垂直節奏（區塊之間 120–160px）。
8. 文案風格偏向小寫、自嘲/人性化，絕不商業化。使用簡短句子。

添加任何新內容時的工作流程

1. 閱讀 references/design-tokens.md → 使用 CSS 變數，絕不使用原始十六進制碼。
2. 閱讀 references/components.md → 檢查該內容是否已作為某種模式存在（藥丸、標籤、卡片、區塊標題、跑馬燈、輪播、表單欄位）。重複使用它。請勿發明第二種卡片風格。
3. 閱讀 references/motion.md → 附加標準的顯示 + 懸停行為。
4. 如果是全新的區塊，請閱讀 references/section-recipes.md 並嚴格遵循「新區塊模板」（間距、標題、顯示、容器）。
5. 交替使用 --bg / --bg-hero 作為區塊背景。如果兩個相鄰區塊背景不同，請在它們之間放置一個鋸齒分隔線（絕不使用直線）。
6. 僅當區塊 ID 是頂層目的地時，才將其註冊到導航藥丸連結中（最多 4 個導航連結；如果要添加第 5 個，請詢問使用者要刪除哪一個）。
7. 將任何新的圖片欄位添加到 assets/IMAGES.md，並附上所需的確切長寬比，以便使用者知道要提供什麼。

完成前的自我檢查

• 每個新標題是否都使用了像素字體 + 波浪底線？
• 是否有任何十六進制碼不在標記列表中？請移除它。
• 是否有任何圓角半徑不是 999px 或 20px / 16px / 14px？請修正它。
• 新區塊是否以 blur(10px) → 0 和 y: 30px → 0 淡入？
• 懸停狀態是否使用了 scale(1.03) + 陰影上移 + 250ms？
• 行動版：扇形/輪播/網格是否按照 references/components.md 中的行動版規則折疊？
• 我是否將區塊的垂直內邊距保持在 clamp(80px, 10vw, 160px)？

參考檔案

檔案	何時閱讀
references/design-tokens.md	總是——顏色、字體比例、間距、陰影、字體
references/components.md	建置任何 UI 元素（導覽、卡片、標籤、表單、跑馬燈、輪播、分隔線）
references/motion.md	任何動畫、顯示、懸停或頁面載入編排
references/section-recipes.md	添加全新的區塊或頁面
assets/base.css	已實現所有標記 + 基本元件的即用樣式表
assets/IMAGES.md	網站需要哪些圖片及其比例