Karen網頁作品集

關於我作品集

以產品思維為導向的前端工程師，擁有 3 年以上經驗，專注於使用 React 與 TypeScript 開發可擴展的網頁與 Electron 應用程式。

精選作品 - 網頁應用程式開發

韓國四柱 AI 命理分析
Next.jsTypeScriptFastAPILLMRedis

韓國四柱 AI 命理分析

採用 Next.js / TypeScript 前端與無狀態 FastAPI 後端開發的韓國四柱（Saju）AI 命理分析平台。透過快取條件化的 Prompt 重構與 Python 預先計算的命盤專屬關聯，成功降低約 75% 的 LLM 生成成本。具備 Redis 限流機制，並完成英／韓／繁中在地化與客製化設計系統。

View Page
燕雲十六聲 AI 遊戲攻略助理
React 19NestJSOpenAI GPT-4oSSEi18n

燕雲十六聲 AI 遊戲攻略助理

以 React 19 + NestJS + OpenAI GPT-4o 打造的全端 AI 搜尋助手，透過 SSE 實現逐字串流回應，並具備即時「思考步驟」動畫。具備穩健的狀態管理、每日 Token 使用限制與快取策略、效能優化（React.lazy、debounce、React.memo），以及中英雙語自動偵測介面。

View Page
Image Color Picker
ReactReact ReduxRedux ToolkitReact Error BoundaryMUI

圖片取色器

透過上傳暫存圖片來獲取色彩參數，輕鬆擷取您心儀的色彩。

View Page
React - Weather in 7 Days
ReactAPIsChart.js資料視覺化明暗主題切換

React - 7天天氣預報

一個多功能的天氣預報網頁應用程式，讓使用者能夠預先安排未來7天的生活計畫和搭配服裝。應用程式提供明亮和暗色的主題切換，提供使用者在不同光線的情況下有更舒適的體驗。整合了 Chart.js 以實現直觀的資料視覺化。採用位置和天氣 API 進行資料擷取，使用 Adobe XD 設計 UI，和使用 React、SCSS、Bootstrap 和 Chart.js 開發完成。

View Page
Astronomy Picture of the Day (APOD)
Vanilla JSNASA APOD APILocal Storage

重新設計的每日天文圖片（APOD）

對 NASA APOD 網頁應用程式進行設計改版和開發，提供豐富的使用者體驗。整合 NASA 的 APOD API 和所有網頁資訊與功能，以暗色主題進行設計，提供身歷其境的天文體驗。使用 HTML、SCSS、Javascript 和 Bootstrap 構建，完成無JavaScript框架的網頁應用程式開發。

View Page