個人作品集網站，採用分屏式互動介面設計。
- 上方工具列全寬顯示，右側導航位於工具列下方（桌機/手機一致）
- 三欄式佈局：左側章節大綱、中央內容區、右側分類導航
- 左側章節大綱自動擷取
h1~h6，可收合章節並同步目前閱讀位置 - 左側大綱與中央內容採獨立捲動，長頁面閱讀更穩定
- 行動裝置優化：直式畫面自動隱藏左側大綱，右側改為漢堡選單側邊欄
- 使用 Markdown 管理內容
- 支援首頁扉頁封面（Notion 風格）
- 支援圖片並排網格（Justified Gallery）
- 支援文字/圖片/影片多欄混合排版（可設定欄寬比例）
- 支援影片播放、GIF-like 影片與 iframe 嵌入
- URL Hash 路由，支援上一頁/下一頁（預設進入
about） - 視窗縮放時自動重新計算圖片排版
- HTML / CSS / JavaScript
- Marked.js（Markdown 解析）
- Splide.js（gallery 輪播）
- 套件來源：
index.html透過 jsDelivr 載入 Splide core CSS 與 runtime JS。 - 結構來源：
js/markdown-extensions.js輸出 Splide 規範結構（splide / splide__track / splide__list / splide__slide）。 - 初始化來源：
js/widgets.js以new Splide(...)建立主輪播與縮圖輪播，並使用main.sync(thumbs)做連動。 - 主要 API：
new Splide(mainElement, options)new Splide(thumbsElement, options)main.sync(thumbs)thumbs.mount()/main.mount()main.go('<' | '>')
├── index.html # 入口頁：載入樣式與腳本、定義三欄容器
├── css/
│ ├── typography.css # 字體 token 與標題/導航字級
│ ├── panels.css # 工具列、三欄面板、RWD 抽屜導航
│ ├── style.css # 內容區與媒體通用樣式（表格 / iframe / layout）
│ ├── grid.css # :::grid 的 Justified 圖片排版
│ └── gallery.css # :::gallery 輪播圖庫與 lightbox 樣式
├── js/
│ ├── app.js # 應用啟動、Hash 路由、內容載入、導航互動
│ ├── outline.js # 左側文件大綱（h1~h6）生成與捲動同步
│ ├── markdown-extensions.js # 自訂 Markdown 指令解析與 HTML 輸出
│ ├── options.js # 共用媒體/圖庫參數解析（border/radius/height）
│ ├── justify.js # 圖片網格比例計算與重排
│ └── widgets.js # gallery 互動元件掛載（Splide + lightbox）
└── content/
├── config.json # 分類與專案清單（右側導航來源）
├── about.md # About 頁內容
└── <CATEGORY>/<PROJECT>/ # 專案資料夾（含 content.md / assets）
:::grid
::::::grid用於圖片並排，套用 Justified Gallery。- 圖片標題由
的title產生，置中顯示於圖片下方。 - 連續兩張圖片不需要空行，也可正確顯示各自標題。
:::gallery{height=280px,border=false,radius=true}
::::::gallery會輸出主視窗 + 下方縮圖，並啟用左右循環輪播與點擊放大檢視。- 放大檢視僅顯示圖片與左右切換，不顯示 caption 文字。
- 區塊參數支援：
height、border、radius。 height以px為規格（例如280px；純數字會自動轉為px）。border/radius套用在 gallery 主視窗，不套用在縮圖。gallery內單張圖片僅支援，不支援單張{border,radius}。
:::layout[40,60]
@slot
@slot
### 文字說明
這裡可以放段落、清單或其他 Markdown。
:::end-layout:::layout[25,35,40]
@slot
@slot
@video[Demo](https://example.com/demo.mp4)
@slot
@iframe[Site](https://example.com)
:::end-layout:::layout[40,60]的數字代表各欄比例，會自動正規化為 100%。- 若比例格式不正確，或比例數量與欄位數不一致，會自動平均分配。
- 欄位由
@slot分隔。
第一行文字 @br 第二行文字第一行 @br(2) 第三行@br：分行 1 次。@br(n)：分行n次（目前上限 6）。
@cover(url)- 封面容器會以中心裁切，比例為
16:4，並填滿目前內容區寬度。
{border=true,radius=true}title會顯示在圖片下方並置中。- 不需要標題可用
。 - 可在尾端加樣式參數：
{border=true,radius=true}。 - 一般圖片（含單張顯示與
layout內圖片）預設左右填滿當前欄位（width: 100%）。 - 圖片高度會隨寬度等比例調整（
height: auto）。
@video[title](url)
@video[title](url){border=true,radius=true}title可為空：@video[](url)。- 可在尾端加樣式參數：
{border=true,radius=true}。 - 支援常見影片格式（如
mp4、webm、ogg/ogv、mov；實際播放能力依瀏覽器而定）。
@gif[title](url)
@gif[title](url){border=true,radius=true}- 語法與
@video相同：title可為空，例：@gif[](url)。 - 可在尾端加樣式參數：
{border=true,radius=true}。 - 行為為自動播放、循環、靜音、行動裝置內嵌播放（
autoplay + loop + muted + playsinline）。 - 支援常見影片格式（如
mp4、webm、ogg/ogv、mov；實際播放能力依瀏覽器而定）。
@iframe[title](url)
@iframe[title](url){border=true,radius=true}title可為空：@iframe[](url)。- 可在尾端加樣式參數：
{border=true,radius=true}。 - 非影片型
@iframe會在右下角顯示極簡Full圖示按鈕，可直接進入全螢幕。 - 影片型嵌入（如 YouTube/Vimeo）不顯示自訂按鈕，維持播放器原生全螢幕控制。
- 適用於
![]()、@video、@gif、@iframe，以及:::gallery區塊參數。 - 寫法：在語法尾端加
{key=value,key=value}。 - 目前支援：
border=true|false（預設false）radius=true|false（預設true）- 僅接受
true/false兩種值（其他寫法會回退預設）
- 視覺效果：
border=true時套用2px邊框。radius=true時套用8px圓角。
- 補充：
:::gallery區塊內每張圖片不解析{border,radius}，由區塊參數統一控制。
- 會自動讀取目前頁面的
h1~h6建立左側章節大綱。 - 支援巢狀階層、章節收合與展開（符號：
⌵/▸）。 - 捲動中央內容時，左側會自動高亮目前章節，並自動將 active 項目捲動到可視區。
- 在
content/下對應分類資料夾（如PROJECT、ROBOT、DESIGN、WORKSHOP）建立新專案資料夾。 - 在該資料夾內新增
content.md。 - 更新
content/config.json，加入專案 ID 到對應分類。 - 專案會依照
content/config.json順序顯示。
MIT License