01 / About
About
嗨，我是高子淵，一名軟體工程師，擁有近三年的企業級開發經驗。我能全程獨立扛起正式上線的 Web 應用，從架構設計、API 整合，到與產品、設計、後端團隊的跨職能協作與交付，一手包辦。
現在我負責制定團隊的前端工程規範，同時逐步往後端、雲端與基礎設施領域拓展。也經常跨出前端的範疇，主動排除卡點、讓交付順利推進。
我重視程式的可維護性與邊界情境處理，與設計師、PM、後端緊密協作，並在問題擴大前主動提出。
3
年軟體經驗
5
帶領過的工程師
20 +
交付的專案數
02 / Experience
Experience
Senior Software Engineer · Stockfeel Current
- 制定團隊程式碼規範並主導技術選型。建置基於 VSCode 的本地開發環境設置，將新人上手時間從 1 天以上縮短至 1 小時內。
- 主導全專案漸進式 JavaScript 至 TypeScript 遷移，優先強化共用模組的型別覆蓋率，同時維持功能開發速度；在 42.9k 個識別字的程式碼庫中達成 98.4% 的（嚴格模式）型別覆蓋率。
- 建置由 4 個 agents 與 6 個可重複使用的 skills AI 開發流程，從單一技能觸發直到自動產生 PR，並將其整合進儲存庫中，讓團隊無需額外設置即可採用。
- 擔任 2 位前端工程師的主要技術窗口，協助排除實作問題並審查架構決策。支援範圍延伸至前端以外，透過 EC2/ECS 日誌檢查診斷正式環境問題，並修改由 Terraform 管理的 CloudFront CSP 設定，以滿足客戶的 iframe 嵌入需求。
- 修復前端 CI 檢查，確保每個 PR 都會執行品質把關。將前後端的 git hooks 整合至單一管理工具，並負責維護團隊的 SonarQube 實例，落實靜態分析檢查。
Frontend Engineer · Stockfeel
- 建置包含 20 個以上高擴充性、低重複率元件的共用元件庫，提升開發效率 30%，並確保各產品間的 UI 一致性。
- 建立 Vitest 單元測試套件，達成 82% 的測試覆蓋率，透過提早偵測回歸問題，將除錯時間縮短 35%。
- 建置基於 token 的 SSO 解決方案，使 CDP 平台能無縫嵌入客戶系統，免除重複身分驗證。
Frontend Engineer · Yesee
- 獨立完成 3 個核心業務模組（預購、門市、商品管理），建置 30 個以上頁面並串接 60 個以上 RESTful API，處理商品邏輯、促銷計算與庫存管理。
- 在功能開發過程中將 Vue 2 元件重構為 Composition API，改善程式碼組織與 TypeScript 相容性，同時協助團隊成員解決遷移過程中的阻礙。
- 在 20 人以上的跨職能團隊中參與大型便利商店 CMS 專案，擔任前端技術對接窗口，負責技術方向的協調與溝通。
Fullstack Developer · APLHA CAMP
- 在這段期間，我深入掌握了 HTML、CSS 與 JavaScript 等基礎語言，並進一步精進了使用 React 開發動態且高效使用者介面的能力。同時，我也學會如何運用 Node.js 與 Express.js 建置後端服務，並將 SQL 資料庫整合進專案中，以管理資料的儲存與存取。在最終的專題（capstone）專案中，我使用 React 開發了一個 Podcast 串流平台。此平台整合了 Spotify 的 OAuth 登入系統，讓使用者能以自己的 Spotify 帳號輕鬆登入並存取個人化內容。為了實現這點，我深入研究並實作了 OAuth 2.0 驗證流程，並透過 Spotify API 取得使用者的播放清單、專輯與個人資料。這段經驗不僅讓我掌握了第三方 API 的整合，也提升了我處理身分驗證與安全性問題的能力。
03 / Skills
Skills
Certification
Stack
04 / Projects
Projects
Articote
這是我個人的技術部落格，使用 Next.js 與 TypeScript 打造，內容以 MDX 撰寫並透過 Velite 進行管理。網站透過 next-intl 支援中英雙語路由，並具備深色模式、程式碼語法高亮，以及自動產生的 OG 分享圖片等功能。這裡彙整了我在前端開發、後端工程、雲端服務與系統設計等領域的筆記、實作心得與踩坑經驗。 這個部落格是我把零散學習內容整理成有系統、可分享知識的地方。與其讓筆記散落在個人的知識庫裡，我更希望擁有一個公開、可搜尋、且中英文皆可閱讀的空間，記錄自己在軟體工程這條路上持續成長的軌跡。
TzuYuan Profile
這是我的個人作品集網站，使用 Astro 搭配 React、TypeScript 與 Tailwind CSS 打造，所有內容資料都透過 Zod 進行結構驗證。首頁以互動式 Three.js 3D 地形動畫為視覺主軸，會隨滑鼠移動即時變形，並在裝置不支援 WebGL 或使用者開啟「減少動態效果」時，降級為靜態漸層背景，同時透過 Intersection Observer 在區塊離開可視範圍或分頁切到背景時自動暫停渲染，兼顧視覺效果與效能。網站涵蓋自我介紹、工作經歷、技能、專案作品與聯絡方式等區塊，並支援中英雙語切換。 這個作品集是我整理近幾年工程師生涯成果的地方，也是實際練習效能優化與無障礙降級策略的場域。比起單純條列經歷，我更希望透過細膩的互動細節與雙語內容，呈現自己在前端工程上對細節與使用者體驗的重視。
MovieHub
MovieHub 是一個使用 React、TypeScript 與 Vite 建構的電影資訊網站，透過 Redux Toolkit 管理收藏清單，並將收藏資料保存在瀏覽器的本機儲存空間，提供直覺的介面讓使用者搜尋、瀏覽電影，並依類型探索片單。網站的電影資料來自 TMDB 提供的 API，包括電影詳情、預告片、演員陣容，以及該演員參與過的其他作品。所有 API 請求都會經由部署在 Vercel 的 Serverless Function 代理轉送給 TMDB，讓存取權杖只保存在伺服器端，不會外流到瀏覽器。 這個專案是我練習前端狀態管理與串接外部 API 的成果。過程中我也實際處理了跨來源請求代理的問題，並體驗了將 Frontend、API 代理服務部署在 Vercel 這種混合平台部署的實務情境。
Pokemon Illustrated Handbook
從小我就一直被寶可夢吸引著，這些可愛的生物伴隨著我一起成長，就像忠實的朋友一樣。他們的進化旅程就像我的童年記憶，持續陪伴著我。因為這些美好回憶，我受到了啟發，想要重溫那些美好的悸動。 此專案用React框架製作，串接由Pokemon 提供的API來獲取資料，並且此網站有查詢及喜愛功能。
05 / Contact
Let's work together.
不管是新的工作機會、合作提案，還是想聊聊技術問題，都歡迎透過下方方式找我。
asdll6618@gmail.com