首頁專案文章關於我
陳子涵的照片

你好，我是陳子涵

目前是前端工程師

我熱衷於透過 Next.js、TypeScript 與 Tailwind CSS，打造兼顧效能、無障礙體驗與商業價值的數位產品。我致力於在開發過程中實現「以技術解決問題，以數據驅動優化」。


專業實踐與開發經驗

在職期間，我主導並參與多項企業級網站應用開發。我曾獨立負責從需求分析、線框圖繪製到功能落地的全生命週期開發，成功實作複雜的 VoIP 網路電話系統與物流產品；同時，我也具備與前端團隊協作開發大型開源系統（如視訊會議、即時通訊平台）客製化需求的經驗，擅長與 PM、設計師及後端夥伴高效溝通，主導 REST API 規格對接。


技術核心與工程素養

  • 介面與效能：堅持響應式設計 (RWD) 與無障礙原則，並透過 Lighthouse 與 Vercel 工具持續監測與優化網站效能。
  • 全端整合力：具備 SQL 與 Neon Serverless PostgreSQL 的實踐經驗，獨立完成個人專案的資料庫規劃與後端 API。
  • 數據與測試：具備 GA4 認證與流量分析經驗，並能運用 Playwright 撰寫自動化測試腳本，確保核心功能品質。

目前我正透過六角學院系統化進修後端開發與雲端架構，持續提升前後端整合的廣度與深度。如果你正在尋找一位具備產品思維、重視開發品質且持續成長的技術夥伴，歡迎與我聯繫！

經歷

前端工程師　樂倍達數位科技股份有限公司

2023/09 ~ 現今

在職期間主導與參與多項企業級網站應用開發，擅長於大型開源系統中實作客製化功能，並透過自動化工具大幅提升開發與測試效率。

  1. 企業級 VoIP 網路電話系統

    • 技術棧：Next.js (App router), TypeScript, Tailwind CSS, Headless UI, SIP.js, Web Audio API
    • 核心貢獻：
      • 獨立負責從需求盤點、流程圖與線框圖繪製、API 規格溝通對接到功能落地之全生命週期開發。
      • 透過 SIP.js 與 PBX 主機建立 WebSocket 通訊連線，支援轉移、會議通話、插撥等 15+ 項複雜通訊功能。
      • 深入運用 Web Audio API 處理硬體音訊裝置切換與 DTMF 鍵盤音效，確保高品質通訊體驗。
      • 自行建立測試用後端 API 模擬客戶公司網站 API，輸出靜態檔案供客戶部署上線。

  2. 企業級即時通訊平台客製化

    • 技術棧：Rocket.Chat, React, TypeScript, Styled Components, i18next
    • 核心貢獻：
      • 基於 Rocket.Chat 開源專案實作客製化介面與功能，並持續更新維護 i18next 多語系字串。
      • 繪製流程圖與線框圖，撰寫 REST API 規格草稿，主導前端功能與後端服務之高效對接。

  3. 企業級視訊會議系統客製化

    • 技術棧：BigBlueButton, React, Styled Components, Transifex, Playwright
    • 核心貢獻：
      • 基於 BigBlueButton 開源專案實作客製化介面與功能，並持續更新維護 Transifex 多語系字串。
      • 導入 Playwright 撰寫 E2E 自動化測試腳本，將原本 45 分鐘的手動回歸測試流程大幅優化至 5 分鐘。

  4. 物流服務產品宣傳網頁

    • 技術棧：HTML, Tailwind CSS, JavaScript, GitLab CI/CD, Google Analytics
    • 核心貢獻：
      • 負責產品官方網站之響應式切版與企業形象呈現。
      • 撰寫 GitLab CI/CD Pipeline 腳本，實作測試環境自動部署與正式環境手動部署之分流管理。
      • 整合 Google Analytics (GA) 事件追蹤與埋碼，提供產品轉化率之量化數據依據。

前端網頁實習生　亞瑞特數位社群行銷有限公司

2022/11 ~ 2023/04

使用 HTML + SCSS + JavaScript + PHP + GitLab，任務包括公司電子報模板的切版、公司內部報表產出網站改用前後端分離、協助正職員工開發客戶專案。

UI/UX設計團隊-實習生　眾匯智能健康股份有限公司

2020/07 ~ 08

使用 XAMPP + MySQL + PHP + GitHub，參與使用者體驗規劃，與介面設計和前端的同學合作，負責後端資料庫建置與功能開發，實作醫療論壇網站的帳號、文章、留言、收藏、追蹤等功能。

技能

網站前端

  • 核心開發：Next.js, React, TypeScript
  • 樣式與介面：Tailwind CSS, Headless UI, React Hook Form
  • 瀏覽器 API：Web Audio API

後端與資料庫

  • 資料庫管理：SQL, Neon Serverless PostgreSQL
  • 開發與測試：REST API 規格定義, Playwright

版本控制與部署

  • 版本管理：Git, GitHub, GitLab
  • 自動化與部署：GitLab CI/CD, Vercel, Zeabur

設計與效能監測

  • 介面設計：Figma, FigJam, Penpot
  • 數據與效能：Google Analytics, Google Search Console, Lighthouse

進修

六角學院 | 後端系列課程

後端與資料庫基礎 (已結束)

  • 後端工程師 - 資料庫體驗營 (2024/10 ~ 12)
    從前端視角跨入後端領域，掌握基礎 SQL 語法與關聯式資料庫設計，建立審核後端代碼品質與獨立規劃資料表的能力。
  • 後端工程師體驗營 (2025/12 ~ 2026/02)
    透過 Docker 容器化技術啟動開發環境，使用 GUI 軟體查詢資料庫，完成 API 邏輯，體驗後端日常開發維運任務。

後端工程師就業培訓班 (進行中)

  • JavaScript 學程 (2026/03 ~ 04) 深造核心語法與非同步處理。
  • Node.js 學程 (2026/06 ~ 08) 實作伺服器端開發與 API 整合。
  • AWS 雲端架構部署學程 (2026/09 ~ 12) 掌握雲端服務與系統架構。

後端工程師專題班 (未開始)

  • 專題實作、成果發表會 (2026/12 ~ 2027/03) 前後端完整整合與雲端架構遷移。

認證

Google 數位人才探索計畫

2023/03 ~ 06

  • 參加 Google Analytics 4 學程
  • 通過 Google Analytics (分析) 認證
  • 取得 Google 數位人才結業證書
  • 參加數位人才媒合日

認可

放視大賞

2021/05

  • 組別：行動應用類 - 軟體內容創意企劃組
  • 成就：全國決賽入圍
  • 專案：畢業專題「珍食力」
    一款專為優化食材管理與烹飪效率設計的手機應用程式原型，透過拳頭體積估算、食材保鮮指南與平行時間軸功能，協助使用者精準掌握食量並高效完成多道料理。
  • 貢獻：參與使用者體驗 (UX) 與介面設計 (UI)。
  • 工具：Miro (流程規劃), Figma (高擬真原型設計)。

學歷

國立台中教育大學 | 數位內容科技學系

2017/09 ~ 2021/06

  • 學位：學士畢業
  • 選修群組課程：數位技術應用、數位設計。
  • 學習重點：結合程式開發技術與視覺設計理論，建立跨領域的數位產品開發基礎。