EN中文
JH

John Hsieh

資深軟體工程師

Singapore

7 年軟體工程經驗，專精 Web 架構設計與開發，曾任職於 TikTok Singapore 與 LINE Taiwan，擔任資深軟體工程師。最擅長大型產品工程、Web 架構與效能優化，並具備跨端交付的實戰經驗（Node.js BFF / GraphQL、Go、LLM 整合）。核心技術棧為 React (Next.js)、Vue (Nuxt.js) 與 TypeScript，橫跨資源有限的早期新創與嚴謹的大型企業環境：能從零規劃產品架構，也能在大型團隊中交付高品質程式碼，並始終在意軟體是否好用、體驗是否流暢。已將 AI 工具深度整合進日常開發流程，運用 GitHub Copilot Agent Mode、MCP 與 n8n 建立端到端的自動化 SOP，並具備 LLM API 串接與向量資料庫（RAG）開發經驗。流利使用英、日、中三種語言，熟悉敏捷開發與跨職能協作，能有效與非技術利害關係人溝通。

TikTok Singapore / LINE Taiwan — 跨國產品開發經驗
0

年軟體工程經驗

0

個完整產品

0

人團隊管理

0

種語言能力

工作經歷
  • TikTok Singapore

    軟體工程師

    TikTok Singapore

    • 在 TikTok User Growth 團隊擔任軟體工程師，於50+ 子專案、百萬級程式碼規模的海外增長業務 monorepo 中開發財務結算（合約管理、報價、結算單）與廣告採購（需求提交、審批流、評分任務）子系統，善用 AI 輔助開發獨立交付橫跨 TypeScript（前端）與 Go（後端）的全端功能
    • 兩次提早發現並規避線上事故（外部平台舊版 API 即將停用、其他團隊服務因合規需求阻斷特定機房間直連），自主通報升級並調動組員在不到 3 天內完成搶修，相關 on-call 數量為 0，事後匯總複盤報告並將預防做法納入團隊 SOP
    • 帶領團隊導入 Scrum，透過 retrospective 建立自我糾錯機制、以 refinement 解決各自為政無法互相 backup 的問題，並對齊開發時程、平衡工作量、提升 PM 對時程的掌握度
    • 打造全端 LLM 合約校驗系統，以多模態大型語言模型解析合約文件並逐條校驗動態規則後才允許提交，每週校驗 6–7 份合約、每月省下約 5 人天人力
    • 導入 Web Worker 多線程校驗機制並解決內部 Armor 框架的相容性限制（Blob URL、Comlink、Module Worker），在 10 萬筆 CSV 資料中降低 90% UI 卡頓時間
    • 打造模仿 React useMemo 的 cache/cacheMany 快取工具，在一次渲染 500 個表單的介面上降低 98% Total Blocking Time (TBT)
    • 以 partition、heap、streaming file 等手段優化龐大資料表驗重的線上 monitor 腳本（以非原本熟悉的 Python 撰寫），執行時間降低數十倍，空間複雜度由 O(n²) 優化到 O(n)
    • 設計 LLM 合約校驗的規則機制：規則由線上設定平台管理並分為強制阻斷與純警告，AI 高置信度不通過才阻斷、使用者可填寫說明否決並記錄供審計，並實作加上 SQL 唯讀過濾層的 DB Tool Call 與文件轉 Markdown 的 MCP，統一處理 PDF、Word、Excel 合約
    • 建立含錯誤與正確範例的合約語料庫作為 prompt 修改的 eval 門檻，由 Go 將每次模型對話寫入線上 log 系統供追查判斷原因，並將合約提交改為非同步以吸收模型延遲（平均約 5 分鐘通知結果）
    • 基於 JSON Schema 動態表單渲染方案開發大量業務表單元件，涵蓋級聯選擇、動態欄位與條件顯示，並實作財務、報價場景的浮點數精度計算方案
    • 透過公司自研框架實現子應用動態載入的微前端整合，並透過內部翻譯平台在 runtime 取得最新翻譯以支援多語系
    • 投入約 30% 工作時間處理線上 oncall，整理歸納廣告主與內部使用者每天反饋的問題與需求，主動發起對應的技術型開發任務，而非僅被動等待需求指派
  • LINE Taiwan

    軟體工程師

    LINE Taiwan

    • 在 LINE Taiwan 約 60 人的 EC team 開發 LINE 購物導購平台（Vue SSR 前端 + 整合數十個後端微服務的 Node.js + GraphQL BFF），橫跨日常開發（50%）、Team Leader（40%）、全公司前端準則制定（10%）三項職責，帶領 4 人團隊並指導新人
    • 帶領 4 人團隊主導 CMS 從 PHP 重構至 Next.js App Router 架構——是 LINE Taiwan 早期採用 App Router 的專案之一——以 iframe 微前端讓新舊專案獨立部署上線並可依 URL 漸進式遷移，約一年內達成前後端完全分離
    • 完成 CMS 遷移後 PHP 前端程式碼正式下線，新功能開發恢復前後端分工，平均降低 30% 開發時間，PHP 維護人力也從不足變為足夠
    • 獨立研究（參考 YouTube Shorts、Shopee Live Shopping 的滑動預覽機制）、設計、開發並驗證「直播購物」功能，打造具備雙 IntersectionObserver 與 Vuex 全局調度器、HLS.js 的可覆用影片自動播放模組，解決高速捲動下的預覽混亂與多直播源造成的記憶體暴增
    • 設計 iframe 微前端搭配線上 feature toggle，新頁面出問題時不用部署、修復即可立即切回舊頁面，滿足主管對零停機與災難復原的要求
    • 主持多場 Next.js 分享論壇逐步 demo App Router 優勢，說服以 Vue 為主、原本對 Next.js 有所排斥的組員投入遷移專案
    • 除了寫程式外，也一手包辦 CMS 專案的技術選型、時程規劃、跨團隊資源協調、風險評估與內部訓練，並兼任 PM 角色，分派工作、撰寫技術文件、與使用者直接溝通
    • 開發並維護 LINE 購物的 Vue SSR 前端與 Node.js + GraphQL BFF 兩個倉庫（皆為 TypeScript），並遵循「每行程式碼 merge 前都要經過 code review」的準則
    • 投入 JSTF 跨團隊小組制定全公司前端開發準則（框架選擇、coding style、PR review 規範、靜態程式碼分析），導入 Lighthouse CI 自動化效能評量並使其成為公司標準開發流程的一環
    • 與 JSTF 成員自行開發 React 專案初始 template 生成 CLI 工具，將 CI 規範、code lint 與 SonarQube 靜態分析納入樣板，加速新項目初期建置並統一全公司前端標準，另研究導入 OpenTel 前端監控
    • 擔任 mentor 指導 2 位新進工程師並獲得正向回饋，同時主導內部 Next.js 教學論壇，加速新人上手
  • AI.Book 愛相簿

    軟體工程師 (契約合作)

    AI.Book 愛相簿

    • AI.Book 契約合作的軟體工程師，擔任唯一技術負責人，獨立完成線上相片書編輯器的前端架構、編輯器核心與後端 API 設計，從零打造並於 6 個月內上線
    • 用純 Vue 搭建客製化拖拉編輯器，支援排版調整、文字輸入與字型字體大小編輯，同時支援網頁端與手機端瀏覽器操作，並可從 Google 相簿／Instagram 匯入相片
    • 主導後端 API 設計，涵蓋 AWS Cognito OAuth2 登入、購物車與訂單流程、金流結果串接，從消費端（前端）視角定義 API 契約、資料模型與錯誤處理，並與後端協作落地
    • 以遠端協作於產品草創期加入，在需求與規格尚不明確的情況下自行決定技術選型與架構，並直接與非技術背景的公司負責人溝通
  • FundFluent

    軟體工程師 (契約合作)

    FundFluent

    • FundFluent 契約合作的軟體工程師暨技術負責人，自公司初創期加入，獨立開發三套前端系統——共用 UI Kit、SME 貸款入口網站、銀行合作夥伴入口網站——服務香港中小企貸款平台
    • 個人主導規劃跨專案共用 UI 組件庫，以 Stencil.js Web Component 打造可用於非 React 專案的組件，搭配 Tailwind + Semantic UI 的 design system 與 Storybook 文件——發布至 private NPM，由兩個下游入口網站各自從獨立 repo 安裝使用
    • 打造 SME Portal，整合銀行與政府貸款資訊的一站式申請平台，並用 OCR 技術整理文件以減少跨貸款申請的重複提交，使用 React (Next.js)、TypeScript、Semantic UI 與 TailwindCSS 開發
    • 打造 Partner Portal，面向銀行等放貸方的管理平台，用以上架、整理貸款專案並審核中小企申請案件
    • 以遠端協作在需求與規格尚不明確的情況下，從 0 開始自行決定前端技術選型與架構，直接與非技術背景的公司負責人溝通，並以可複用組件在不同產品間維持一致的設計模式
  • FoxitSoftware

    全端工程師

    FoxitSoftware

    • 在 Foxit 新成立的 AI 團隊擔任全端工程師，規劃技術架構並管理 2 人前端團隊，從零打造一套 SaaS 自動化平台
    • 打造一個類似 n8n 的 SaaS 自動化平台，整合公司內部 PDF 相關服務（轉檔、翻譯、編輯、簽名），並串接手動觸發、email 關鍵字、Google Doc 更新等多種觸發器，自動完成一系列辦公流程
    • 前端技術棧為 NextJS + TypeScript + ElementUI，後端為 NodeJS + TypeScript + MongoDB + Redis + NestJS + GraphQL
  • 電獺 Aotter

    前端工程師

    電獺 Aotter

    • 電獺前端工程師，於約 4 人的專案導向團隊（PM、UI 設計、前後端工程師）中快速迭代交付廣告與數據平台
    • 開發 SuprLink 縮網址服務（支援 A/B 測試、數據分析、自訂網域、組織管理），並打造對應的 Chrome 擴充工具方便快速產生短連結
    • 開發 Aotter Trek，結合大數據分析的 DSP 廣告投放平台，透過大量圖表介面協助找出精準受眾
    • 開發資策會的政府開放資料儀表板，以及 beanfun! 跨產品數據管理中心，兩者皆具備高度客製化的圖表視覺化
    • 為每個專案量身訂做 TailwindCSS 小型 UI 框架，維持與設計稿高度一致的還原度，並在快節奏的多專案負載下堅持可複用、可擴充的程式碼
    • 以 Nuxt 生態系 + TypeScript + Sass & TailwindCSS 為主架構、Docker + K8s 執行 CI/CD，並在小人數團隊中以 Scrum 快速迭代、同時兼顧複數專案的開發時程
  • 第三緯度科技

    前端工程師

    第三緯度科技

    • 第三緯度科技的前端工程師，任職時間短暫，為咻咻漫畫（線上漫畫平台）建構 Vue + PHP 前後端分離架構
    • 串接微信支付金流系統，支援線上交易
  • 日商優橋

    數位廣告優化師 & 前端工程師

    日商優橋

    • 日商優橋的數位廣告優化師，其後轉任前端工程師兼 PM，為代理品牌架設官方網站與活動頁面
    • 管理 2 人前端團隊，同時兼任 PM 與日文行銷窗口，以日文作為主要工作溝通語言
    • 獲得公司第一屆內部評鑑優勝（評量業務及市場把握程度、日文商談能力與危機處理能力）
    • 管理 Facebook Ads Manager / Google Ads 廣告投放成效並優化網站流量與 SEO，運用 Heatmap 與 A/B Testing 降低跳出率，並導入 Google Analytics 使用者流程報表提升網站易用性
    • 為代理品牌（俏樂斯保養品牌、髮樂活、日本嚴選）架設官方網站與一頁式活動網頁，以原生 JavaScript、jQuery 處理切版與動態效果，搭配 PHP MPA 架構並偶爾以 WordPress 快速架站
  • 亞洲遊

    日本市場業務及營運

    亞洲遊

    • 亞洲遊擔任日本市場業務及營運，接洽日本旅宿（share house 與民宿）房源並支援平台的日本市場成長與翻譯需求
    • 2017 年度（1–9 月）房源數達 2,616（達成率 93%）、預約筆數 8,846，與前年比成長 276%
    • 2016 年度（3–12 月）房源數達 1,682（達成率 82%）、預約筆數 2,353
    • 以每季為單位設定並管理日本房源成長目標，以日本市場為中心向民宿經營者介紹服務並協助房源上架
    • 為既有經營者提供服務支援，包含促銷推廣提案、翻譯、刊登協助與入住問題處理
    • 擔任公司對日翻譯窗口，並協助消費者排除旅日中遇到的緊急狀況
專案介紹
21 個代表性專案，展示產品影響力與技術棧。

個人專案

(4)
嗶速 BiBoost - 海外影片加速 for bilibili - 1
嗶速 BiBoost - 海外影片加速 for bilibili - 2
嗶速 BiBoost - 海外影片加速 for bilibili - 3
嗶速 BiBoost - 海外影片加速 for bilibili - 4
嗶速 BiBoost - 海外影片加速 for bilibili - 5
嗶速 BiBoost - 海外影片加速 for bilibili - 6

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

一款讓海外使用者觀看網頁版 Bilibili 影片與直播更順暢的開源、永久免費瀏覽器擴充套件，動態將取流 CDN host 重排為當地最快節點，並在分段請求失敗或播放卡住時自動 fallback 至 B 站原生備援節點。支援全球所有國家（可搭配自製 CDNSpeedTest 桌面測速工具建立自訂節點列表），同一份原始碼支援 Chrome / Edge / Firefox / Safari 四大瀏覽器與五語系介面，並以社群回饋驅動迭代。從技術架構、開發到上架與維護皆為個人獨立完成。

Chrome Extension Manifest V3Vanilla JavaScript (ES6+)chrome.storagechrome.i18nContent Scripts (MAIN world / ISOLATED world)fetch / XMLHttpRequest hookFLV / HLS (m3u8) / fMP4 串流Safari Web Extension (Xcode)Node.jsJSZipPuppeteerSharpPythontkinterPyInstallerDNS over HTTPS (ECS)Cloudflare Workers (KV)GitHub Issues APIGoogle Apps ScriptGoogle SheetsNeon (PostgreSQL)Git HooksClaude Code
AI 擬人對話機器人 - 1
AI 擬人對話機器人 - 2

AI 擬人對話機器人

以大語言模型與 n8n 工作流自動化為基底，透過 LINE Messaging API 打造寵物擬人化 AI 聊天機器人。具備多輪對話記憶、圖片/語音理解（多模態）、長期記憶（向量資料庫 RAG）等功能，並可根據不同場景快速切換人格設定。

n8nGemini APILINE Messaging APIDockerVPSEmbedding
Lazy CV - 1
Lazy CV - 2
Lazy CV - 3
Lazy CV - 4
Lazy CV - 5

Lazy CV ↗

AI 驅動的客製化履歷生成系統。結合 AI Agent 與 Next.js 16，只需提供職缺連結即可自動抓取 JD 並生成量身定做的中英文雙語履歷網頁。整個專案從零到上線僅花費 2 天，全程透過 Vibe Coding 完成。本履歷就是用此專案自動生成的。

TypeScriptNext.js 16 (App Router)React 19TailwindCSS 4daisyUIFramer Motion (motion)tw-animate-cssRadix UI@base-ui/reactshadcncmdklucide-reactreact-iconsembla-carousel-reactreact-day-pickervaulsonnercobeNeon Serverless PostgreSQLDrizzle ORMdrizzle-zodZodjose (JWT)bcryptjspdf-libjsPDFhtml-to-imageAWS SDK (S3, Lambda)AWS Lambda Web AdapterDockerPlaywrightESLintPrettiertsxDrizzle Kit
SiyaMap

SiyaMap ↗

與一位 UI 設計師合作的兩人 side project（2026 年 2 月起，目前已部署至 Stage 環境）。平台以場館 SVG 座位圖為索引，讓看過演出的人針對坐過的座位投稿實拍視角照片與觀演體驗（滿意度、視線是否受阻、散場時間、冷氣強度等），後來的購票者點選座位圖即可查看該位置的真實視角。產品構想與介面設計由設計師負責，工程端（資料庫建模、後端 API、前端與共用 UI 元件庫、圖片處理服務、AWS 基礎設施與 CI/CD）由個人獨立完成。

TypeScriptNext.js 16 (App Router, standalone)React 19TailwindCSS 4TanStack React QueryHonoZod@hono/zod-validatorDrizzle ORMdrizzle-kitNeon Serverless PostgreSQLDBMLjose (JWT)bcryptjsGoogle OAuth 2.0DOMPurifynext-swagger-docSwagger UIsharpAWS (Route 53, CloudFront, S3, API Gateway, Lambda, ECR, IAM)AWS Lambda Web AdapterAWS SDK v3DockerGitHub Actionspnpm WorkspacesTurborepotsupStorybook 10VitestJestPlaywrightHuskyESLintPrettier

公司專案

(17)
UG 海外增長業務平台 - 1
UG 海外增長業務平台 - 2
UG 海外增長業務平台 - 3
TikTok SingaporeTikTok Singapore

UG 海外增長業務平台

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

Rush v5 (Monorepo)PNPM WorkspacesReact 17TypeScriptreact-router-dom v5/v6Arco Designunstated-nextAxiosEChartsLessCSS ModulesRspackJest@testing-library/reactESLintcommitlintlint-staged
LINE 購物 - 1
LINE 購物 - 2
LINE 購物 - 3
LINE 購物 - 4
LINE TaiwanLINE Taiwan

LINE 購物 ↗

LINE 導購服務，經由 LINE 購物外連到合作夥伴商家消費可獲 LINE 點數回饋，同時也是集結合作第三方電商、可搜尋比價與分享好物的購物入口網站。全端專案包含 Vue SSR 前端倉庫與整合數十個後端微服務的 BFF（Node.js + GraphQL），皆以 TypeScript 開發並由個人維護迭代。

JavaScript (ES6+)Vue 2Vue Router 3Vue SSR (vue-server-renderer)Vuex 3vuex-router-syncTypeScriptNode.jsExpressGraphQL (Apollo Server Express)DataLoaderRedis (ioredis)OAuth2SASSPostCSSWorkboxSentryFirebase (FCM)Jest@vue/test-utilsStorybookWebpack 4BabelDockerDrone CISonarQubeLighthouse CI
CMS 重構 NextJS - 1
CMS 重構 NextJS - 2
LINE TaiwanLINE Taiwan

CMS 重構 NextJS

2023 年提出並主導將 PHP 架構的 LINE 購物 CMS 重構為 React & NextJS app router 架構，引入 iframe 微前端，帶領 4 人團隊完成前後端分離，並負責技術選型、內訓、時程規劃、工作分配與風險評估。這也是少數幾個在 LINE Taiwan 中實際採用 NextJS app router 的早期專案之一。

ReactNextJSApp RouterTypeScript
AI.Book 相簿編輯器 - 1
AI.Book 相簿編輯器 - 2
AI.Book 愛相簿AI.Book 愛相簿

AI.Book 相簿編輯器

線上相片書編輯器，支援拖拉排版加入/移除照片、文字編輯，並可從 Google 相簿／Instagram 匯入相片。從零規劃到上線僅 6 個月。

TypeScriptVue 2Nuxt 2 (SPA)nuxt-property-decoratorVuexSCSS/SassTailwindCSSElement UIvuedraggablevue-drag-dropcropperjsflipbook-vuevee-validatelottie-webAxios@nuxtjs/auth-nextAWS Cognito OAuth2Google OAuthInstagram Graph API OAuthNuxt build (Webpack)GitHub ActionsAWS S3CloudFrontSwagger/OpenAPI
FundFluent UI Kit Library
FundFluentFundFluent

FundFluent UI Kit Library

跨專案共用 UI 組件平台，使用 Web Component（Stencil.js）打造不受框架限制的組件庫，整合 TailwindCSS + Semantic UI 並以 Storybook 作文件。

TypeScriptStencil.js (Web Components)Lit-htmlTailwindCSSFomantic UISass/LessPostCSSGulpStorybook
SuprLink 超級連結
電獺 Aotter電獺 Aotter

SuprLink 超級連結 ↗

從 A/B 分流到數據分析，再到廣告投放一氣呵成的縮網址服務，支援自訂網域與組織管理。

TypeScriptNuxt.js 2 (SSR)Vue 2nuxt-property-decoratorNuxt PWAVuexvuex-map-fieldsChart.jsvue-chartjsGoogle ChartsTailwindCSSBuefySassAxiosExpressMongoDBGoogle APIsJestTestCafeAzure PipelinesDockerPM2Kubernetes
Aotter Trek DSP 平台
電獺 Aotter電獺 Aotter

Aotter Trek DSP 平台 ↗

結合大數據分析的廣告投放 DSP 平台，使用大量圖表介面為使用者找出最適合的廣告 TA。

Vue 2VuexjQueryNuxt.js 2TypeScriptExpressMongoDBpost-robotEventEmitter3Chart.jsvue-chartjsGoogle ChartsBootstrap 4SCSS/LESSElement UIAxiosJestKarmaJasmineDockerDocker Compose
JavaScript Task Force
LINE TaiwanLINE Taiwan

JavaScript Task Force

LINE Taiwan 跨團隊專案小組，制定全公司前端開發準則，研究導入 SonarQube、Lighthouse CI、OpenTel 前端監控、React 專案 template 生成器等。

TypeScriptNode.js CLI (yargs, prompts)@vercel/nccNext.jsSentryLighthouse CISCSSJestTesting LibraryESLintStylelintPrettierHuskylint-stagedDrone CISonarQube
FundFluent SME Portal
FundFluentFundFluent

FundFluent SME Portal ↗

面向香港中小企業的整合貸款平台，提供銀行與政府貸款資訊、一站式申請，並透過 OCR 技術整理文件以降低重複提交成本。

TypeScriptReact 17Next.js 12React ContextuseReducerTailwindCSSSemantic UI ReactSassReact Hook FormYupnext-i18nextBitbucket PipelinesDockerGCP Artifact RegistryGKE
FundFluent Partner Portal
FundFluentFundFluent

FundFluent Partner Portal ↗

面向銀行等放貸方的管理平台，可上架、整理各項貸款專案，以及審核來自中小企的申請案件。

TypeScriptReact 17Next.js 12MobXmobx-reactTailwindCSSFomantic UISassReact Hook FormYupnext-translateBitbucket PipelinesDockerGCP Artifact RegistryGKE
Chrome Extension - SuprLink
電獺 Aotter電獺 Aotter

Chrome Extension - SuprLink

快速在 SuprLink 超級連結產生縮網址的 Chrome 擴充工具。

Vue 2 (Options API)Vue RouterWebExtension APIVuexTailwindCSSPostCSSAxiosWebpack 4Babel
資策會 城市儀表板
電獺 Aotter電獺 Aotter

資策會 城市儀表板

收集分散各地的政府數據於同一平台展示的政府資料數據庫，具備可高度客製化的圖表及資料篩選模組。

Vue 2Chart.jsvue-chartjsD3.jsTopojsonGoogle MapsmarkerclustererHandsontableBootstrap-VueElement UImdbvueAxiosjQuery
beanfun! 數據管理中心
電獺 Aotter電獺 Aotter

beanfun! 數據管理中心

擁有各種圖表的集中數據 Dashboard，用以顯示企業內部各項指標。

Nuxt.js 2 (SPA)Vue 2VuetifyVuexChart.jsvue-chartjsCountUp.jsVueWordCloudStylusSassAxiosExpressgRPCMongoDB (Mongoose)JWT/JWKSGoogle Maps APIDockerAzure Kubernetes Service (AKS)
咻咻漫畫
第三緯度科技第三緯度科技

咻咻漫畫

使用 Vue + PHP 前後端分離架構開發的線上漫畫平台，串接微信支付金流系統。

VuePHPWeChat Pay
俏樂斯 官方網站
日商優橋日商優橋

俏樂斯 官方網站

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

PHPjQueryCSS
髮樂活
日商優橋日商優橋

髮樂活

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

WordPressPHPCSS
日本嚴選
日商優橋日商優橋

日本嚴選

專接業配的部落格。

WordPressPHPCSS
技術棧可視化
核心技術與周邊能力的連結關係圖。
GitHub Copilot
n8n
Prompt Engineering
MCP
AI Agent
AI 開發 & 工具
Vibe Coding
Gemini API
Claude API
RAG
Tool Call
TypeScript
React
NextJS
Vue
NuxtJS
GraphQL
Socket.io
前端 JS 框架與工具
Jest
Cypress
Webpack
Storybook
Firebase
i18n
Lodash
Sass / Scss
TailwindCSS
Bootstrap
ElementUI
Buefy
前端 CSS 框架
Vuetify
BEM
CSS Variable
Media Query
Service Worker
Workbox
web-push
PWA
IndexedDB
Cache Storage
Navigator API
Shadow DOM
StencilJS
微服務 & Web Component
Web Socket
Quill
Express
Socket.io
MongoDB
Mongoose
後端框架 & 資料庫
EJS
Swagger
GraphQL
技能
TypeScriptReactNext.jsVueNuxtJSGraphQLTailwindCSSSass / SCSSNode.jsExpress
TypeScriptReactNext.jsVueNuxtJSGraphQLTailwindCSSSass / SCSSNode.jsExpress
TypeScriptReactNext.jsVueNuxtJSGraphQLTailwindCSSSass / SCSSNode.jsExpress
TypeScriptReactNext.jsVueNuxtJSGraphQLTailwindCSSSass / SCSSNode.jsExpress
MongoDBPostgreSQLRedisDockerKubernetesGitHub ActionsFirebaseAWSDrizzle ORMMongoose
MongoDBPostgreSQLRedisDockerKubernetesGitHub ActionsFirebaseAWSDrizzle ORMMongoose
MongoDBPostgreSQLRedisDockerKubernetesGitHub ActionsFirebaseAWSDrizzle ORMMongoose
MongoDBPostgreSQLRedisDockerKubernetesGitHub ActionsFirebaseAWSDrizzle ORMMongoose
JestCypressStorybookWebpackViteGitLighthouseRenovatepnpmESLint
JestCypressStorybookWebpackViteGitLighthouseRenovatepnpmESLint
JestCypressStorybookWebpackViteGitLighthouseRenovatepnpmESLint
JestCypressStorybookWebpackViteGitLighthouseRenovatepnpmESLint
AxiosEChartsChart.jsFramer MotionReact Hook FormYupLodashi18nArco DesignRush Monorepo
AxiosEChartsChart.jsFramer MotionReact Hook FormYupLodashi18nArco DesignRush Monorepo
AxiosEChartsChart.jsFramer MotionReact Hook FormYupLodashi18nArco DesignRush Monorepo
AxiosEChartsChart.jsFramer MotionReact Hook FormYupLodashi18nArco DesignRush Monorepo
Claude CodeGitHub CopilotCursorn8nPrompt EngineeringMCPAI AgentVibe CodingClaude APIRAG
Claude CodeGitHub CopilotCursorn8nPrompt EngineeringMCPAI AgentVibe CodingClaude APIRAG
Claude CodeGitHub CopilotCursorn8nPrompt EngineeringMCPAI AgentVibe CodingClaude APIRAG
Claude CodeGitHub CopilotCursorn8nPrompt EngineeringMCPAI AgentVibe CodingClaude APIRAG
Web WorkerComlinkService WorkerIndexedDBStencilJSShadow DOMSocket.ioPWAWeb SocketREST API
Web WorkerComlinkService WorkerIndexedDBStencilJSShadow DOMSocket.ioPWAWeb SocketREST API
Web WorkerComlinkService WorkerIndexedDBStencilJSShadow DOMSocket.ioPWAWeb SocketREST API
Web WorkerComlinkService WorkerIndexedDBStencilJSShadow DOMSocket.ioPWAWeb SocketREST API
BootstrapElementUIBuefyVuetifyCSS ModulesLessBEMVuexVue RouterMobX
BootstrapElementUIBuefyVuetifyCSS ModulesLessBEMVuexVue RouterMobX
BootstrapElementUIBuefyVuetifyCSS ModulesLessBEMVuexVue RouterMobX
BootstrapElementUIBuefyVuetifyCSS ModulesLessBEMVuexVue RouterMobX
HTMLJavaScriptjQuerynpmSDDOpenAI APIVuelidateVeeValidateQuillD3.js
HTMLJavaScriptjQuerynpmSDDOpenAI APIVuelidateVeeValidateQuillD3.js
HTMLJavaScriptjQuerynpmSDDOpenAI APIVuelidateVeeValidateQuillD3.js
HTMLJavaScriptjQuerynpmSDDOpenAI APIVuelidateVeeValidateQuillD3.js
CSSCSS variableMedia queryCache StorageWorkboxweb-pushNavigator APIEJSSwaggermustache
CSSCSS variableMedia queryCache StorageWorkboxweb-pushNavigator APIEJSSwaggermustache
CSSCSS variableMedia queryCache StorageWorkboxweb-pushNavigator APIEJSSwaggermustache
CSSCSS variableMedia queryCache StorageWorkboxweb-pushNavigator APIEJSSwaggermustache
Chrome ExtensionManifest V3PuppeteerVert.xWeb Extension APIGCP Artifact RegistryWeb ComponentsMicro FrontendNestJSGo
Chrome ExtensionManifest V3PuppeteerVert.xWeb Extension APIGCP Artifact RegistryWeb ComponentsMicro FrontendNestJSGo
Chrome ExtensionManifest V3PuppeteerVert.xWeb Extension APIGCP Artifact RegistryWeb ComponentsMicro FrontendNestJSGo
Chrome ExtensionManifest V3PuppeteerVert.xWeb Extension APIGCP Artifact RegistryWeb ComponentsMicro FrontendNestJSGo
ReduxReact QueryGemini APICLAUDE.mdcopilot-instructions.mdAGENTS.mdAI Workflow DesignSystem PromptTool CallPurgeCSS
ReduxReact QueryGemini APICLAUDE.mdcopilot-instructions.mdAGENTS.mdAI Workflow DesignSystem PromptTool CallPurgeCSS
ReduxReact QueryGemini APICLAUDE.mdcopilot-instructions.mdAGENTS.mdAI Workflow DesignSystem PromptTool CallPurgeCSS
ReduxReact QueryGemini APICLAUDE.mdcopilot-instructions.mdAGENTS.mdAI Workflow DesignSystem PromptTool CallPurgeCSS
Apollo ClientApollo ServerDataLoaderZodNeon PostgreSQLGCPAzuregRPCDrizzle KitDOMPurify
Apollo ClientApollo ServerDataLoaderZodNeon PostgreSQLGCPAzuregRPCDrizzle KitDOMPurify
Apollo ClientApollo ServerDataLoaderZodNeon PostgreSQLGCPAzuregRPCDrizzle KitDOMPurify
Apollo ClientApollo ServerDataLoaderZodNeon PostgreSQLGCPAzuregRPCDrizzle KitDOMPurify
PlaywrightTestCafeKarmaJasmineTesting LibraryDrone CISonarQubeBitbucket PipelinesAzure PipelinesPM2
PlaywrightTestCafeKarmaJasmineTesting LibraryDrone CISonarQubeBitbucket PipelinesAzure PipelinesPM2
PlaywrightTestCafeKarmaJasmineTesting LibraryDrone CISonarQubeBitbucket PipelinesAzure PipelinesPM2
PlaywrightTestCafeKarmaJasmineTesting LibraryDrone CISonarQubeBitbucket PipelinesAzure PipelinesPM2
Huskylint-stagedStylelintSentryRadix UIshadcndaisyUIFomantic UIPostCSSStylus
Huskylint-stagedStylelintSentryRadix UIshadcndaisyUIFomantic UIPostCSSStylus
Huskylint-stagedStylelintSentryRadix UIshadcndaisyUIFomantic UIPostCSSStylus
Huskylint-stagedStylelintSentryRadix UIshadcndaisyUIFomantic UIPostCSSStylus
GulpLit-htmlOAuth2JWTAWS CognitobcryptjsGoogle ChartsHandsontableGitHubautoprefixer
GulpLit-htmlOAuth2JWTAWS CognitobcryptjsGoogle ChartsHandsontableGitHubautoprefixer
GulpLit-htmlOAuth2JWTAWS CognitobcryptjsGoogle ChartsHandsontableGitHubautoprefixer
GulpLit-htmlOAuth2JWTAWS CognitobcryptjsGoogle ChartsHandsontableGitHubautoprefixer
AWS S3AWS CloudFrontAWS LambdaAWS ECRAWS API GatewayAWS Route 53AWS IAMLambda Web AdapterGKEAKS
AWS S3AWS CloudFrontAWS LambdaAWS ECRAWS API GatewayAWS Route 53AWS IAMLambda Web AdapterGKEAKS
AWS S3AWS CloudFrontAWS LambdaAWS ECRAWS API GatewayAWS Route 53AWS IAMLambda Web AdapterGKEAKS
AWS S3AWS CloudFrontAWS LambdaAWS ECRAWS API GatewayAWS Route 53AWS IAMLambda Web AdapterGKEAKS
HonoTurborepopnpm WorkspacestsupVitestsharpjoseDBMLOpenAPIPrettier
HonoTurborepopnpm WorkspacestsupVitestsharpjoseDBMLOpenAPIPrettier
HonoTurborepopnpm WorkspacestsupVitestsharpjoseDBMLOpenAPIPrettier
HonoTurborepopnpm WorkspacestsupVitestsharpjoseDBMLOpenAPIPrettier
Vector DatabaseConversation History ManagementAgent Skills
Vector DatabaseConversation History ManagementAgent Skills
Vector DatabaseConversation History ManagementAgent Skills
Vector DatabaseConversation History ManagementAgent Skills
學歷與證書

學歷

學校學位 / 性質期間
東吳大學文學士 (BA) — 日本語文學系2013 - 2017
京都同志社大學交換留學 — 日本語及文化2016.03 - 2016.08

證書與認證

日文檢定 JLPT N1

日文檢定 JLPT N1

最高級認證 — 商業會談程度

台大資訊推廣部

網頁開發技術課程

語言能力

中文 — 母語日文 — 商業會談 (JLPT N1)英文 — 流暢職場溝通