開發者成就系統 | Developer Achievement System

🌐 Languages / 多語言版本: 繁體中文 | English

一個結合 成就系統、磁貼美學 與 代碼編輯器風格 的個人技術足跡打卡與分享圖卡生成平台。為軟體工程師、開源愛好者與程式修仙者量身打造！

🔗 線上網址: https://ivanusto.github.io/developer-achievement-list/

本系統完全部署於雲端，玩家無需安裝任何程式或下載檔案，即可直接在瀏覽器中完成所有的打卡記錄，解鎖工程師生涯成就。

---

🌟 核心特色

1. Dashboard 統計看板: 即時計算玩家等級（每 10 個成就為 1 級）與修仙稱號（例如：🌱 Hello World 新手、🐛 Bug 捕手、🌐 系統架構師、🧙‍♂️ 傳奇軟體架構宗師 等）。
2. 24 大技術領域版圖: 互動式技術網格地圖，點擊可直接點亮/標記已涉足之技術領域（包含前端、後端、運維、電腦科學與開發工具五大板塊），動態計算各領域的掌握率。
3. Canvas 探索雷達圖: 原生 Canvas 繪製，無任何外部第三方 JS 庫依賴，完美顯示 5 大開發領域的能力雷達。
4. 100 項工程師成就資料庫: 包含 Beginner 至 Legendary 共計六大難度，且支持 Steam 隱藏成就 效果，解鎖時可看見驚喜描述。
5. 10 大榮譽徽章牆: 自動判定如 ⌨️ 鍵盤行者、🎨 像素完美主義、💾 資料庫守護者、🔥 伺服器大難不死者 等徽章解鎖進度。
6. 一鍵分享圖卡 (PNG): Canvas 自動合成一張包含暱稱、頭像、等級、徽章牆、雷達圖與最引以為傲成就的 800x1200 高解析度名片。
7. 雙主題切換: 支持 Cyberpunk IDE 暗色風（預設）與 Code Editor 亮色風。
8. 備份與還原: 本地 LocalStorage 自動存檔，並支持匯出與導入 JSON 進度，方便跨裝置同步。
9. 無任何後端: 完全靜態的單一 HTML 檔案，載入極快，資料 100% 留存在本地端，確保使用者隱私。
10. 自訂成就系統: 允許玩家建立最多 10 個個人專屬的自訂成就並進行勾選，融入分享圖卡。

---

🛠️ 技術實現

• 核心技術: HTML5 / Vanilla CSS / Vanilla JavaScript (ES6)
• 圖表/名片生成: HTML5 Canvas API (動態縮放適應 Retina 螢幕)
• 音效合成: Web Audio API (程式動態合成音頻 Chime)
• 動態效果: CSS Keyframes + Canvas 粒子物理系統 (Confetti)
• 本地儲存: LocalStorage API
• 國際化: 內建多語系引擎 (i18n)

---

📄 授權條款

本專案基於 MIT 授權條款開源。 本專案靈感與架構源於 taiwan-travel-achievement-list。