← 返回專案卷宗列表
EXPERIMENT // 介面實驗 LIVE [ON THIS SITE]
DOSSIER-004 // TECHNICAL & BUSINESS DOSSIER
Telegraph × CRT Terminal 雙模極簡設計系統
捨棄千篇一律的 SaaS 漸層模板,將 1950s 美國西聯電報打字機紙本與 1980s 琥珀/綠光 CRT 終端機融合為個人 IP 專屬互動體驗。
01 // PROBLEM STATEMENT PAIN POINT
多數 AI 工程師與顧問的個人網站長得像同一個 Tailwind 模板複製出來的,無法在 3 秒內傳達「硬核工程力 × 嚴謹商業紀律」的性格。
02 // ENGINEERED SOLUTION APPROACH
全站採用原生 CSS `color-scheme` 與 `light-dark()` 雙主題架構,支援頂部撥桿切換與 `⌘K` / `/` 終端機指令導航,零多餘肥大框架,滿分支援 Core Web Vitals。
03 // SYSTEM ARCHITECTURE & DATA FLOW PIPELINE
Semantic HTML5 (`<dialog>`, `<details>`) + Native CSS `light-dark()` + Zero-FOUC Theme Sync + Keyboard Command Palette 04 // TECH STACK, SKILLS & ADAPTERS
| 元件名稱 (Technology / Skill) | 分類 (Category) | 版本 / 規格 |
|---|---|---|
| Native CSS light-dark() | FRONTEND | Baseline 2024 |
| HTML <dialog> Top-Layer CLI | FRONTEND | HTML5 |
| Courier Prime / IBM Plex Mono | FRONTEND | Variable |
05 // VERIFIABLE METRICS (公開可驗證指標)
| 指標名稱 (Metric) | 數值 (Value) | 統計區間 (Period) | 資料來源與定義 (Source & Definition) | 驗證狀態 (Verified At) |
|---|---|---|---|---|
| 首屏外部 JS 框架負擔 | 0 KB | 2026-11 | Astro Build Output 純靜態語意化 HTML + 輕量原生互動腳本,確保極速 LCP 與無障礙體驗 | VERIFIED: 2026-11-15 |
06 // RELATED BUILD LOGS (關聯開發電報)
目前尚無關聯電報,可至 /admin 生成新草稿。