John H 的個人網站

Projects

專案經歷

從個人 side project 到大型企業產品，這些是我參與開發、負責過的專案，由新到舊排列。

2026

個人專案2026

嗶速 BiBoost - 海外影片加速 for bilibili

開源

讓海外使用者看 B 站更順的開源瀏覽器擴充套件

B 站預設分配的 CDN 節點對海外使用者常繞路、造成緩衝。這個開源、永久免費的擴充套件會把影片與直播取流的 CDN host 動態重排為當地最快的節點，播放失敗或卡住時自動 fallback 回原生備援節點。同一份原始碼支援 Chrome / Edge / Firefox / Safari，從架構、開發到上架與維護皆由我獨立完成。

技術亮點

  • 注入頁面 MAIN world，hook fetch / XHR 與 playinfo setter，即時改寫串流 CDN host
  • 自動容錯：偵測 403/404/5xx、逾時與卡頓，先靜默切換備援節點
  • 以 Python 打造群眾外包測速桌面工具 CDNSpeedTest，回收各國實測資料篩選節點
  • 可重現建置、商店素材自動截圖、發版流程自動化與 Safari Web Extension

成果

  • 2 天開發上架、零廣告，9 天內週活躍使用者破 1,000
  • 83 天（不到 3 個月）週活躍使用者破 10,000，最近 4 週每日淨增約 240 人
  • 163 則評分、平均 4.9★、98% 五星，106 則附文字回饋
Chrome Extension Manifest V3Vanilla JavaScript (ES6+)Safari Web Extension (Xcode)Node.jsPuppeteerPythonNeon (PostgreSQL)Claude Code

相關文章

查看專案詳情
商店頁面GitHub

個人專案2026

Lazy CV

AI 驅動的客製化履歷生成系統（也就是這個網站）

提供一個職缺連結，透過 Claude Code 的 /cv 指令自動抓取 JD、分析需求，並依個人資料來源生成中英雙語的客製化履歷網頁，可直接列印成 PDF。

技術亮點

  • 由多個 Claude Code skill 組成工作流：/cv、/update、/cover-letter、/job 職缺搜尋
  • check-cv 規則檢查 + ATS 加權計分，作為 AI 產出履歷的質量門禁
  • Docker → ECR → Lambda Web Adapter，靜態資產走 S3 + CloudFront
Next.js 16React 19TailwindCSS 4Drizzle ORMNeon Serverless PostgreSQLPlaywrightDocker
查看專案詳情
網站GitHub

個人專案2026

SiyaMap

演唱會場館座位視角分享平台

與一位 UI 設計師合作的兩人 side project：產品構想與介面設計由設計師負責，工程端由我獨立完成。平台以場館 SVG 座位圖為索引，讓看過演出的人投稿自己座位的實拍視角與觀演體驗，後來的購票者點選座位圖就能看到那個位置的真實視角。目前部署於 Stage 環境。

技術亮點

  • Next.js 以 Lambda Web Adapter 跑在 AWS Lambda，無流量時幾乎零運算成本
  • 後端採 Route → Controller → Service 分層與建構子注入，Zod 一份 schema 衍生所有 DTO
  • 獨立的 image-processor Lambda 負責浮水印與按需縮圖，並以寬度白名單防止成本型攻擊
  • pnpm Workspaces + Turborepo 管理三個模組，共用 UI 元件庫以 Storybook 獨立部署
TypeScriptNext.js 16React 19HonoZodDrizzle ORMNeon Serverless PostgreSQLAWS LambdaTurborepoStorybook 10

相關文章

查看專案詳情
GitHubInfra 架構圖資料庫 ER 圖

個人專案2026

AI 擬人寵物聊天機器人

整合 n8n 與大語言模型的 LINE 聊天機器人

把寵物擬人化、用 LINE 互動的聊天機器人。以大模型與 n8n 工作流為基底，具備上下文記憶、圖片與語音理解，並能以貼圖或文字互動。

技術亮點

  • n8n 調度 LINE Webhook、Gemini API 與資料庫，免去傳統後端 API 開發
  • 過往記憶存成 JSONL 並向量化，透過 tool call 讓寵物擁有長期記憶
  • Docker 容器化部署於 DigitalOcean VPS
n8nGemini APILINE Messaging APIDocker
查看專案詳情
2024

TikTok2024 –

UG 海外增長業務平台

TikTok 廣告海外增長業務的企業級 Monorepo

服務 TikTok 線上廣告海外增長業務線，涵蓋媒體資產管理、財務結算、供應商採購、數據看板等領域，管理 50+ 子專案、百萬級程式碼。我負責財務結算（合約、報價、結算單）與廣告採購（需求提交、審批流、評分任務）兩個子系統。

技術亮點

  • Web Worker 多線程 CSV 校驗，解決內部框架下的相容性限制，UI 卡頓時間降低 90%
  • 以 cache / cacheMany 函數快取優化表單渲染引擎，500 個表單的介面 TBT 降低 98%
  • LLM 合約 AI 校驗：規則線上可配置、強制阻斷與警告分級、唯讀 SQL Tool Call
React 17TypeScriptRush + PNPM WorkspacesArco DesignEChartsRspackJest

相關文章

查看專案詳情
Web Worker 架構圖
2023

LINE Taiwan2023 – 2024

CMS 重構為 React & Next.js

帶領 4 人團隊重構 LINE 購物後台

2023 年由我提出並主導此遷移，決定引入微前端（iframe）與 Next.js App Router 架構，把 PHP 架構的 LINE 購物 CMS 重構為 Next.js App Router。除了開發，也負責技術選型、內訓、時程規劃、工作分配與風險評估。

技術亮點

  • 以 iframe 實現微服務，新舊專案可獨立部署並依 URL 漸進切換
  • LINE Taiwan 早期採用 Next.js App Router 的專案之一
  • 除了寫程式，也擔任架構師規劃整個專案，並兼任 PM：分派工作、撰寫技術文件、與使用者溝通

成果

  • 完成遷移後平均降低 30% 的開發時間，PHP 維護人力從不足變為足夠
ReactNext.jsApp Router
查看專案詳情
2021

AI.Book 愛相簿2021 – 2024

線上相片書編輯器

6 個月從 0 到上線的核心產品

讓使用者在線上製作客製化相簿並印製成實體紀念冊。我從 0 開始單獨規劃並開發，一人完成前端架構、編輯器核心與後端 API 設計。

技術亮點

  • 純 Vue 打造的編輯器：拖拉排版、加入/移除照片、文字與字型編輯
  • 支援網頁與手機瀏覽器，可從 Google 相簿／Instagram 匯入相片
  • 主導後端 API 設計：Cognito OAuth2、購物車與訂單、金流串接
TypeScriptVue 2Nuxt 2VuexTailwindCSSAWS Cognito OAuth2AWS S3CloudFront
網站

LINE Taiwan2021 – 2024

LINE 購物

LINE 的導購與點數回饋平台

經由 LINE 購物外連到合作商家消費即可獲得 LINE 點數回饋，也是集結第三方電商的購物入口。全端專案包含 Vue SSR 前端與整合數十個微服務的 BFF（Node.js + GraphQL），皆由我維護、開發與迭代。

技術亮點

  • 獨自完成「直播購物」的調研、設計、開發與驗證
  • 雙 IntersectionObserver + Vuex 全局調度器 + HLS.js，解決高速捲動時預覽混亂
  • 避免單頁過多直播源造成記憶體暴增
Vue 2Vue SSRVuex 3TypeScriptNode.jsGraphQL (Apollo Server)RedisLighthouse CI

相關文章

查看專案詳情
網站直播自動播放架構圖

LINE Taiwan2021 – 2024

JavaScript Task Force

為全公司制定前端開發準則的跨團隊小組

這不是一個實際產品，而是一個專案小組，成員分別代表並來自不同的團隊，目的是為整個 LINE Taiwan 制定前端開發準則。我們研究了 SonarQube 靜態程式碼分析工具、在 CI 中加入 Lighthouse 評分、前端 monitor 工具 OpenTel，並自行開發 React 專案初始 template 生成工具：把 CI 規範、code lint 與 SonarQube 靜態程式碼分析納入樣板的 CLI，加速新項目的初期建置並統一全公司前端標準。

TypeScriptCLI (yargs, prompts)Next.jsSentryLighthouse CISonarQubeESLintDrone CI

FundFluent2021

FundFluent UI Kit

不受框架限制的跨專案 UI 組件庫

個人主導、從 0 開始單獨開發的內部跨專案 UI 組件平台。以 Stencil.js 打造 Web Components，CSS 整合 TailwindCSS 與客製化 Semantic UI 實現公司的 design system，以 Storybook 撰寫文件並發布到 private NPM。

技術亮點

  • UI 組件使用 Stencil 搭建 web components，因此使用上不限框架
  • 透過 Tailwind + Semantic UI 構建 design system
  • 透過 Storybook 展示組件，更容易與設計師溝通確認
  • 組件庫發布至 private NPM，由 SME portal、Partner portal 等業務專案各自安裝使用，組件庫與業務程式碼分屬獨立 repo
Stencil.jsTailwindCSSFomantic UIStorybook
架構圖

FundFluent2021

SME Portal

香港中小企業的整合貸款平台

提供銀行與政府貸款資訊、一站式申請，並以 OCR 協助整理文件。從 0 開始單獨開發。

React 17Next.js 12TailwindCSSReact Hook Form
網站

FundFluent2021

Partner Portal

放貸方的貸款管理與審核平台

讓銀行等放貸方上架、整理貸款專案並審核中小企業的申請。從 0 開始單獨開發。

React 17Next.js 12MobXTailwindCSS
網站
2019

電獺股份有限公司2019 – 2020

Aotter Trek

結合大數據分析的廣告投放 DSP 平台

以大量圖表介面協助使用者找出最適合的廣告 TA。

Vue 2Nuxt.js 2Chart.jsExpressMongoDB
網站

電獺股份有限公司2019 – 2020

資策會 城市儀表板

集中展示政府數據的資料庫

有高度客製化的圖表及資料篩選模組。

Vue 2D3.jsChart.jsGoogle Maps
網站

電獺股份有限公司2019 – 2020

beanfun! 數據與管理中心

企業內部各項指標的集中 Dashboard

擁有各種圖表的集中數據 Dashboard。

Nuxt.js 2VuetifyExpressgRPCMongoDB
網站
2017

日商優橋2017 – 2019

俏樂斯 官方網站

沖繩保養品俏樂斯的台灣官網

日本沖繩保養品俏樂斯的台灣官方網站。

網站

日商優橋2017 – 2019

髮樂活

美髮保養的內容型自媒體網站

美髮保養的內容型自媒體網站。

網站

日商優橋2017 – 2019

日本嚴選

專接業配的部落格

專接業配的部落格。

網站