{"id":21802579,"url":"https://github.com/rayc2045/pokedex","last_synced_at":"2025-10-07T23:30:37.964Z","repository":{"id":65262668,"uuid":"585238723","full_name":"rayc2045/pokedex","owner":"rayc2045","description":"An interactive Pokédex application powered by Vue.js and the PokeAPI, allowing users to search, explore, and view detailed Pokémon data.","archived":false,"fork":false,"pushed_at":"2023-01-28T05:35:48.000Z","size":147376,"stargazers_count":7,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-05T07:51:41.755Z","etag":null,"topics":["async-await","asynchronous","fetch-api","language-switch","language-switching","pokeapi","pokedex","pokedex-api","pokedex-application","pokedex-vue","pokemon","pokemon-api","responsive","responsive-design","responsive-layout","responsive-web-design","rwd","rwd-grid","vue","vuejs"],"latest_commit_sha":null,"homepage":"https://pokedex-list.netlify.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rayc2045.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2023-01-04T17:03:38.000Z","updated_at":"2025-06-25T12:34:00.000Z","dependencies_parsed_at":"2023-02-13T03:16:03.832Z","dependency_job_id":null,"html_url":"https://github.com/rayc2045/pokedex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/rayc2045/pokedex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fpokedex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fpokedex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fpokedex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fpokedex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rayc2045","download_url":"https://codeload.github.com/rayc2045/pokedex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rayc2045%2Fpokedex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278862684,"owners_count":26058994,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-07T02:00:06.786Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["async-await","asynchronous","fetch-api","language-switch","language-switching","pokeapi","pokedex","pokedex-api","pokedex-application","pokedex-vue","pokemon","pokemon-api","responsive","responsive-design","responsive-layout","responsive-web-design","rwd","rwd-grid","vue","vuejs"],"created_at":"2024-11-27T11:29:32.665Z","updated_at":"2025-10-07T23:30:34.967Z","avatar_url":"https://github.com/rayc2045.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pokédex｜寶可夢圖鑑\n\n![cover](https://cdn.dribbble.com/users/3800131/screenshots/20373285/media/49406b603c8d8386bd9cf6bcfb67cc6d.png)\n\n[\u003e Pokédex](https://pokedex-list.netlify.app/)\n\n### 簡介\n\u003e 在 Instagram 看到有人分享在日本操作機器、製作寶可夢客製化衣服的貼文，聯想起先前在網上閱讀到關於 Pokémon API 的文章，一時興起也使用 [PokeAPI](https://pokeapi.co/) 仿刻貼文中機器的操作介面。然而在開發過程中，發現連續抓取 905 份寶可夢資料實在耗時 (約 50 秒)，因此特意自製一份包含了 905 隻寶可夢 id、名稱、圖片及種類的 JSON 資料檔，極大縮短頁面的載入時間。\n\n### 外觀與互動設計\n- 使用瀏覽器內建支援的色彩 - [HTML Colors](https://www.w3schools.com/tags/ref_colornames.asp) 作為色票參考\n- 使用[思源黑體 (Noto Sans TC)](https://fonts.google.com/noto/specimen/Noto+Sans+TC) 作為網站字體\n- 加入寶貝球圖片配上 CSS 旋轉動畫作為網頁載入完成前的過場\n- 透過載入目標數和當前資料量做計算、結合樣式綁定 (Style Binding) 方法，製作出頁面上方跑動的進度條\n- 參考 W3Schools 介紹使用 CSS 製作的[提示框 (Tooltip)](https://www.w3schools.com/css/css_tooltip.asp)，做出滑鼠碰觸圖鑑元素就會在序號前顯示寶可夢名稱的方便設計\n- 資訊卡中的寶可夢圖片加上白色陰影 ([CSS `drop-shadow()`](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow))，達成如同發出光輝般的效果\n- 設計在大尺寸螢幕上，元素及字體大小能夠自適應縮放的響應式設計\n\n### 開發紀錄\n- 透過 Node.js 將 PokeAPI 905 份寶可夢資料轉換成一份 [JSON API](https://raw.githubusercontent.com/rayc2045/pokedex/main/data/PokeApi.json)，將網頁載入時間縮短為 1 秒，並實現中英語言切換\n- 使用體積小的 Vue 代替方案 - [Petite Vue](https://github.com/vuejs/petite-vue) 作為開發方式\n- 使用寶可夢的 `types` 資料，製作出可透過點擊切換不同寶可夢種類的標籤\n- 開發過程中發現在切換寶可夢分類 (filter) 時，相較於建立 computed 的資料再使用 Vue 語法 `v-for` 產出元素，透過對元素綁定 HTML 屬性 `hidden` 或是改變其 CSS 屬性 `display` 的作法，有更好的狀態更新效能\n- 分別針對資訊卡中的寶可夢中、英文名字，以平均字數為基準，自動調整字體大小\n- 將整體寶可夢圖片從 118.2MB 壓縮到 32.8MB，進一步加快網頁載入","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fpokedex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frayc2045%2Fpokedex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frayc2045%2Fpokedex/lists"}