THJCC 官方網站

專案介紹

THJCC 官方網站是臺灣高中職聯合資安競賽的常駐資訊入口，目前以第四屆主視覺呈現賽事理念、籌備團隊、支持單位與合作方式。網站由我負責設計、開發，以及後續維護更新。

網站內容

• 關於 THJCC：介紹競賽宗旨與學生自主籌辦的方向。
• 籌備團隊：依組別整理成員、職務與兼任身分，點開頭像可查看自我介紹和社群連結。
• 合作單位：呈現主辦、協辦與合作夥伴，提供介紹彈窗與官方網站入口。
• 贊助合作：說明資源用途、經費／物資／技術等支持方式，以及來信洽談流程。

首頁提供各區摘要，完整內容則放在關於、團隊、合作夥伴與贊助四個子頁，方便訪客直接分享特定資訊。

設計與互動

從 Figma 桌面設計稿延伸出平板與手機版，保留深色背景、金屬標誌與不對稱卡片等視覺元素。主視覺標誌會隨捲動縮小並移動到介紹區，成員頭像上的帽子也藏了可拖曳、可用鍵盤操作的彩蛋。

成員與單位彈窗支援 Esc、焦點循環和關閉後的焦點恢復；手機與減少動態效果模式則配合調整捲動與動畫。

技術與內容維護

網站以 Next.js App Router、React、TypeScript 與原生 CSS 建置，內容集中在型別化資料檔，啟動時不依賴資料庫或外部 API。成員、合作單位與贊助資訊可以分開更新，降低每次活動調整時的維護負擔。