ReactVite
Gridos 螢跡
以視覺化回饋為核心的習慣追蹤應用，靈感源自 GitHub 貢獻圖。採用玻璃擬態 UI 設計，將成長足跡轉化為直觀的熱力圖與連續紀錄。
Gridos 螢跡
「我們重複執行的行為造就了我們。因此，卓越不是一個行為，而是一個習慣。」
螢跡 Gridos：由每一道微光，記錄成長的軌跡。
📖 專案簡介 (Introduction)
Gridos (Grid + OS) 是一個專注於視覺化回饋的習慣追蹤應用程式。
設計靈感源自於 GitHub 的貢獻圖 (Contribution Graph)，我們深信 「可視化的進步」 是維持自律最強大的動力。透過直觀的熱力圖與互動式介面，Gridos 將枯燥的打卡轉化為富有成就感的視覺體驗，協助使用者建立並維持長期的正面習慣。
🚀 要解決的問題 (Problem Solved)
建立與維持新習慣往往面臨以下挑戰：
- 缺乏即時回饋：每天的努力容易被遺忘，難以感受到長期積累的價值。
- 動力難以維持：缺乏明確的進度指標，容易在幾天後放棄。
- 介面繁瑣：市面上的工具往往過於複雜，反而增加了執行的心理負擔。
Gridos 透過以下方式解決這些痛點：
- 熱力圖回顧 (History Heatmap)：一目瞭然地看見過去每一天的努力軌跡，填滿格子的過程本身就是一種獎勵。
- 連續紀錄 (Streak Tracking)：透過連續天數的統計，激發使用者「不想中斷紀錄」的心理動力。
- 極致的 UI/UX：採用深色玻璃擬態 (Glassmorphism) 設計與流暢的微動畫 (Micro-interactions)，讓每一次操作都充滿質感與愉悅。
- 本地端資料保存：資料安全地儲存在瀏覽器 LocalStorage，無需註冊即可立即使用。
🛠️ 使用技術 (Tech Stack)
本專案採用現代化的前端技術棧構建，不僅追求效能，更注重開發體驗與程式碼品質：
- 核心框架: React 19
- 建置工具: Vite - 極速的開發服務器與打包工具
- 程式語言: TypeScript & JavaScript (ES6+)
- 樣式系統: Tailwind CSS v4 - 採用最新的 Utility-first CSS 框架
- 動畫互動: Framer Motion - 製作流暢的佈局轉換與進出場動畫
- 圖示庫: Lucide React - 輕量且風格統一的 SVG 圖示
- 部署: GitHub Pages
💻 使用方式 (Getting Started)
您可以將此專案 Clone 到本地端進行開發或體驗。
1. 安裝 (Installation)
確認您的環境已安裝 Node.js (建議 v18+)。
2. 開發模式 (Development)
啟動本地開發伺服器：
啟動後，瀏覽器通常會自動開啟 。
3. 建置與部署 (Build & Deploy)
若您想將專案部署至 GitHub Pages：
注意：本專案已配置 套件與 GitHub Action 兼容的設定。在部署前，請確保 中的 路徑與您的 Repository 名稱相符。
📂 專案結構 (Project Structure)
✨ 主要功能特點 (Features)
- 自訂習慣：支援自訂習慣名稱、目標次數與專屬顏色標籤。
- 一鍵打卡：直覺的卡片式介面，點擊即可完成打卡，支援長按或多次點擊累計。
- 進度可視化：即時顯示今日完成率、剩餘次數與進度條。
- 歷史熱力圖：展開式的詳細月曆視圖，檢視每個習慣的長期執行狀況。
- 每日格言：隨機顯示激勵人心的名言，為每一天注入正能量。
- 永久習慣保存 (Persistent Habits)：自訂的習慣項目會永久保存於本地端，無需每日重複建立。每天打開 App，您的習慣清單都會自動準備好。
- 每日進度重置 (Daily Reset)：系統會根據日期自動判斷，在跨日後自動將所有習慣的「今日完成次數」歸零，讓您迎接新的一天挑戰，而歷史紀錄則會被完整保留。
Made with ❤️ by Gridos Team.