這個網站記錄我做過並通過測試的軟體專案。排版上參考技術出版物的版型,內文提到的所有測試數據與設定,都來自實際的專案紀錄。
01 · 網站技術架構
使用 Astro 5.2.4 產生純靜態網頁,預設不載入前端框架 JavaScript。架構圖與主題切換使用瀏覽器原生 API 與少量 GSAP 動畫。
02 · 字型選擇
英文大標題使用 Instrument Serif,內文使用 Geist 與 Geist Mono。繁體中文直接使用系統內建字型(PingFang TC、Noto Sans TC、微軟正黑體),標題襯線字使用宋體(Songti TC),避免讓讀者額外下載好幾 MB 的中文字型檔。
03 · 色彩與對比度
淺色主題使用微黃的紙張底色(#FDFDFC)與深墨色文字(#18181B);深色主題使用深灰底色(#121214)與亮灰文字(#F4F4F5)。所有文字對比度都符合 WCAG 2.2 AA 標準(一般內文高於 4.5:1)。
04 · 架構圖繪製
專案裡的架構圖皆以 SVG 繪製,清楚標註資料走向與模組邊界,並附有純文字步驟切換,在不同螢幕尺寸下都能正常閱讀。
05 · 開源授權與致謝
本站使用到的開源專案包含:Astro (MIT)、Tailwind CSS (MIT)、GSAP (GreenSock Standard License)、Geist (OFL 1.1) 與 Instrument Serif (OFL 1.1)。