「PIRLS 閱讀理解網」是阿凱老師為石門國小打造的 閱讀推動入口網(real URL:read.smes.tyc.edu.tw),把學校 PIRLS 工具 + 閱讀推廣資源整理在一頁,是入口而不是工具本體。
🎯 核心特色
- 🎨 30 秒 RGB 漸層動畫 H1 — 15 色彩虹漸層循環,視覺記憶點爆棚
- 📚 多工具集中呈現 — 把 PIRLS 工具(#4 / #87)+ 閱讀推廣資源整理在一頁
- 🖼️ 圖書館書本背景圖 —
background-attachment: fixed固定背景,營造閱讀氛圍 - 📱 完整 RWD 響應式 — 手機 H1 自動縮小(5xl → 7xl),按鈕 flex-col 垂直堆疊
- ⚡ 純靜態極速載入 — 純 HTML + Tailwind CDN + animate.css,無 LLM、無後端
- 🏫 學校自訂域名加持 — 掛
read.smes.tyc.edu.tw,家長看到 smes 網域信任度爆表
💡 設計理念
入口網的價值在於品牌統一 + 多工具彙整 + 集中維護 + SEO 集中。阿凱把 PIRLS 三件套(#4 學校域名版 / #12 入口網 / #87 GitHub Pages Pro 版)規劃成完整生態:找入口 → #12,正式工具 → #4 / #87。30 秒漸層 H1 + hover scale 1.1 發光按鈕 + 70% 透明白色卡片,整體呈現「這所學校真的重視閱讀」的視覺承諾。
🎒 適合情境
適合教務 / 閱推組想做學校閱讀推動專屬網、想看「純靜態 + Tailwind + animate.css 入口頁」設計案例的開發者、學習「Firebase Hosting + 學校自訂域名」部署的老師。最常見用法:學校首頁設「閱讀推動」按鈕連過來;親職教育日宣傳「我們有閱讀推動專屬入口網」;校際交流秒展示石門特色。免費、可 fork 改學校資料自用。