作品集
做過的東西
工作要用的系統、自己想做的網站，和讓它們跑起來的工具。
- 站台
- 12
- 分類
- 3
- 使用技術
- 38
精選
先看這三個
這些標籤沒有符合的站台
工作與研究
2公司業務要用的系統，以及為了工作上的題目做出來的東西
個人專案
6自己想做才做的
工具與自動化
4讓其他系統跑起來的東西：發布工具、流程自動化、排程、資料搬運
作品細節
GE 績效分析
把計畫、組別、主辦工程師的月度績效算出來
解決什麼問題
月度績效散在三份 Excel 裡，主管想比較五個組的獲利，得自己開檔案手算，每個月都要重來一次。
怎麼做的
- Excel 進 ETL 洗成規範化的資料表，異常值另外記下來不中斷流程
- REST API 直接餵 Power BI，金額單位與民國年都在回應裡講清楚
- 儀表板看人均獲利、獲利率、組別比較與時間趨勢
使用技術
- FastAPI
- PostgreSQL
- React
- Docker
- Power BI
標籤
土地調查 GIS
地籍上圖、現場查報、一鍵出 PDF 報告
解決什麼問題
土地調查的地籍資料、現況照片與查報紀錄散在 GeoJSON、相簿與 Excel 裡，要回答「這塊地現在誰在用」得翻好幾個地方，出報告更是逐筆手工排版。
怎麼做的
- 地籍 GeoJSON 進 PostGIS，地圖依使用分區配色，地號與地段即時搜尋
- 現場查報直接在地圖上做完整 CRUD，照片與街景一起掛在地籍上
- 土地資產 PDF 報告批次匯出，基本資料、現況、課題、地圖與街景截圖一次帶齊
- 角色與方案分級，管理者可個別開關功能
使用技術
- Leaflet
- Chart.js
- Express
- PostgreSQL
- PostGIS
- Nginx
- Docker
標籤
靈光魔法島
在 3D 島上解謎，練低年級資優鑑定的 71 種題型
解決什麼問題
資優鑑定的練習題型多又雜，要讓低年級孩子願意天天練，題目得包進一個會想一直玩下去的故事。
怎麼做的
- 故事：九顆靈光石被小火龍的噴嚏吹暗了。選一位英雄，在可以轉動的 3D 島上解題，每區拿到的星星決定靈光石有多亮
- 71 種題型：矩陣補圖、旋轉摺紙、積木拼圖、數字推理、記憶、國語與常識，另有魔王關、火山限時挑戰與模擬考
- 題目可以念出來（瀏覽器語音合成），音效用 Web Audio 即時合成，不載音檔
- 一個家庭可以有多位玩家，新增玩家要家長密碼；進度存在瀏覽器，也能用家庭同步碼換裝置接著玩，可加到主畫面當 App 開
使用技術
- Three.js
- JavaScript
- Web Speech API
- Web Audio API
- PWA
標籤
kimiio 小教室
國小數學、自然、社會的互動課，照年級和科目找
解決什麼問題
國小數學和社會需要補充講解時，之前做的互動教材都是單頁，散在各處，要用的時候找不到。
怎麼做的
- 首頁是一張「年級 × 科目」功課表，可以只看某個年級或某一科，選擇寫進網址，能直接加書籤
- 每堂課都能動手：用放大鏡把 0.1 切成 0.01、讓兩隻青蛙在數線上跳出最小公倍數、切披薩學擴分，最後是隨機練習
- 依課本單元排出「期中考前地圖」，點單元就能上課；首頁也收了練習遊戲的入口
- 純靜態 HTML、CSS、JS，CSP 嚴格；新增一堂課只要在課程清單加一筆、放一個資料夾，push 後由 Mac 上的排程自動上線
使用技術
- HTML/CSS/JS
- Node.js
- Playwright
- nginx
- Docker
- Cloudflare Tunnel
標籤
行事曆中樞
家裡的行程與活動，一個網址全部看到
解決什麼問題
暑假的營隊、樂團、托育、出遊與接送分散在不同的訊息與檔案裡，家人問「那天誰去接」時沒有一個地方可以直接指給對方看。
怎麼做的
- 每個行事曆是一個自含的靜態網頁，殼層用分頁切換，新增一份不用動別的
- 便利貼與狀態直接寫在頁上，瀏覽器只打同源 API，金鑰不出伺服器
- 純靜態檔加一支小 API，Nginx 服務，重建不掉資料
使用技術
- HTML
- Nginx
- Docker
標籤
Mini Taiwan Pulse
用開放資料，看見航班、船舶、列車與公車的即時脈動
解決什麼問題
航班、船舶、列車、公車的即時位置都有公開資料，但各自在不同的網站，看不到它們同時在這座島上怎麼流動。
怎麼做的
- 同一張 3D 地圖上疊航班弧線、船舶光球、六個軌道系統的列車與雙北五千多輛公車
- 公車 GPS 投影到路線幾何上沿道路平滑移動，路線配對率 99.9%
- 即時模式每 30 秒更新，回放模式載入歷史軌跡；H3 人口密度與機場、車站等地標一併呈現
使用技術
- React
- TypeScript
- deck.gl
- MapLibre
- three.js
- Supabase
- Docker
標籤
帳單自動彙整
Gmail 裡的每張電子帳單，變成可稽核、不重複的帳本
解決什麼問題
信用卡、水電瓦斯、電信、稅單與保險的帳單全進 Gmail，有的是加密 PDF、有的只有信件本文、有的只給連結。每月要知道「總共花了多少、哪些還沒繳」得一封一封翻，而且電費刷卡付掉之後很容易被算兩次。
怎麼做的
- 信件本文、加密附件與人工補件都是一級來源，每個候選都要走到唯一終態，未分類的數量顯式呈現
- 帳單義務、付款事件與信用卡交易分開存，用連結對回去，月度費用只算一次
- 唯讀的帳本網站看每月完整性、單月明細、來源命中與覆核佇列；帳本資料留在本機 volume
使用技術
- Python
- PostgreSQL
- n8n
- pdfplumber
- Docker
標籤
課程報名排程
熱門課程開放報名那一秒，替你按下確定
解決什麼問題
學校社團課程用 ecampus 報名，熱門課程開放幾秒就額滿，家長得掐著時間守在電腦前，還常常慢一步。
怎麼做的
- 先登入、找到課程、確認解析到的列跟報名按鈕送的是同一個請求，測試通過才排程
- 對齊網站伺服器的時鐘，到點送出與「確定報名」按鈕相同的請求
- 設定介面管理多個帳號與多個排程，紀錄留在本機 volume
使用技術
- Node.js
- Express
- Cheerio
- Docker
標籤
AI 對話
自架的大型語言模型對話介面
解決什麼問題
想在自己的機器上跑模型，又要有跟雲端服務一樣好用的對話介面，而且換模型、換機器時不必重新拼裝一次。
怎麼做的
- Apple Silicon 上用 MLX 在主機跑模型，容器裡只放 LiteLLM 與 Open WebUI
- LiteLLM 當統一的 OpenAI 相容入口，前端不用知道後面是哪個模型
- 同一份 compose 在 NVIDIA 主機換成 vLLM、Windows 換成 Ollama
使用技術
- Open WebUI
- LiteLLM
- MLX
- PostgreSQL
- Docker
標籤
流程自動化
把重複的事情交給排程跑
解決什麼問題
工作紀錄、帳單、通知這些事情本身不難，但每天做、忘記做就會積起來。
怎麼做的
- 每個流程一個 webhook，從哪裡呼叫都可以
- 會寫入的動作一律先確認再送出
- 同一筆重複送不會做兩次
使用技術
- n8n
- Docker
- Notion API
標籤
Notion 知識庫 MCP
把 Notion 工作區變成本機 RAG，讓 Claude 直接查
解決什麼問題
多年的筆記都在 Notion，想讓 AI 助理回答時引用它們，但每次查詢都付一次 API 費用、而且 Notion 的搜尋找不到段落層級的內容。
怎麼做的
- 每天增量同步 Notion，依標題切段，用本機 Ollama 的 bge-m3 做向量，存進 Qdrant
- 以 MCP Server 對外，Claude.ai 用訂閱直接連，每次查詢不另外付費
- 只開一個連接埠，其餘服務在內部網路；排程器每週做向量庫快照
使用技術
- FastMCP
- FastAPI
- Qdrant
- Ollama
- Docker
標籤
Vitrine
作品集的前身：自架系統的入口與健康偵測
解決什麼問題
自架的系統各自在不同子網域，要進哪個得先記住網址；哪個掛了通常是要用的時候才發現；要跟別人介紹得開一堆分頁。
怎麼做的
- 一個入口列出全部，登入一次就通到底
- 後端定時偵測，目錄上直接看得到哪個站掛了
- 每個站有畫面輪播，上課直接拿這頁講
- 2026-10 目錄併入這個網站的作品集，健康偵測之後也會搬過來
使用技術
- React
- FastAPI
- SQLite
- Playwright
- Cloudflare Tunnel