EN

Front-end Engineer · 1-2 年經驗

廖偉帆 Sail Liao

使用 Next.js、React、Vue 與 TypeScript 打造後臺、桌面工具與瀏覽器插件。熟悉 UI 開發、狀態管理、Mock API 與前後端協作，樂於將需求轉化成流暢的互動體驗。

所在地

新北市汐止區

聯絡

liaoleon000513@gmail.com

目標職稱

前端工程師 / 軟體工程師

語言

英語 TOEIC 985 ・ 臺語中等

寫信給我

核心技能

打造可維護的前端架構、快速還原設計並確保串接效率。

Next.js
React
Vue.js
TypeScript
JavaScript
Tailwind
styled-components
Git / GitHub
Next.js
React
Vue.js
TypeScript
JavaScript
Tailwind
styled-components
Git / GitHub
Next.js
React
Vue.js
TypeScript
JavaScript
Tailwind
styled-components
Git / GitHub
Postman
Electron
jQuery
Git / GitHub
Next.js
React
Postman
Electron
jQuery
Git / GitHub
Next.js
React
Postman
Electron
jQuery
Git / GitHub
Next.js
React

前端框架

Next.js (App Router) React Vue.js Pinia Electron.js

UI / 樣式

Tailwind CSS Windi CSS styled-components Figma Claude MCP

狀態管理

Zustand Pinia React hooks

API / 開發流程

MSW Mock Swagger TypeScript Axios/Fetch Postman Mock Server

其他

jQuery Git / GitHub AJAX

工作經歷

帶領或參與後臺、管理系統、桌面工具與瀏覽器插件的前端開發。

2024/4 - 現在

臺北 · 區塊科技股份有限公司

網頁前端工程師

  • 以 Next.js App Router 打造 HyperLedger 區塊鏈管理平臺，Tailwind CSS 搭配 Figma Claude MCP 加速 UI 實作。
  • 使用 MSW 建立模擬 API，並與後端透過 Swagger UI 對齊資料格式，降低正式串接成本。
  • 以 Vue.js, Pinia, Postman mock api 開發內部人員/案件管理系統，支援狀態同步與配置調整。
  • 運用 jQuery、Electron.js 產出內部工具，提升蒐證與流程效率。

2023/8 - 2024/1

臺北 · AppWorks School

前端工程師（培訓實戰）

  • 4 週內以 React、styled-components 開發電商網站，含輪播、購物車、無限滾動等互動功能。
  • 5 週內自製 Chrome Extension，採 TypeScript + Zustand + Tailwind，強化靜態型別與狀態管理。
  • 協助工作坊導入 Tailwind，並在一週內與 iOS/後端協作完成電商功能擴充。

2019/3 - 2023/8

臺北 · 三民書局

高中英文教科書文字編輯

  • 維護教材內容、上架至 App 並同步改版，協調邀稿與審稿流程，確保時程與品質。
  • 經營高中高職 YouTube 頻道，管理影片上下架與首頁版面。

2016/8 - 2018/11

台北明明補習班

解題老師／閱卷人員

協助高中生英文解題與作文批改，提供技巧回饋。

專案成就

自製產品與商業側作品，著重資料流、互動體驗與部署。

2025/6 - 2025/12

BCJade 管理後台 · 聯盟鏈管理系統

Next.js · TanStack Query · TypeScript · msw · Tailwind

為 HyperLedger Fabric 聯盟鏈開發管理介面，包含節點監控、智能合約部署與權限管理功能。

2024/6 - Present

CT Wallet Scan · 數位鑑識工具

jQuery · Electron · SQLite

供執法單位使用的桌面鑑識工具，可快速篩查手機、電腦及檔案中的加密貨幣證據。支援錢包地址擷取、助記詞偵測，以及交易所 App 辨識。

Product Page

2023/11 - 2024/1

Tabsence · Chrome Extension

TypeScript · Tailwind · DaisyUI · Zustand

管理瀏覽器分頁的插件，可釘選、排序與自訂空間，並追蹤網站使用時間。透過 chrome.tabs API 取得分頁資料，並以輕量狀態管理維持瀏覽器端的同步性。

Chrome Web StoreRepo

2023/9 - 2023/10

STYLiSH · 電商網站

React · styled-components · React Router · Firebase Hosting

依 Figma 設計稿完成切版與互動，實作輪播、無限滾動、購物車等功能。採用 CSS-in-JS 保持元件樣式獨立，部署於 Firebase Hosting。

Repo

學歷與其他

語言背景強，能快速吸收新技術並跨國溝通。

2014/9 - 2018/6

國立臺灣大學 · 外國語文學系

學士，專注語言學與跨文化溝通。

語言能力

英文 TOEIC 985 · 中文、臺語

聽說讀寫精通；能流暢撰寫技術與產品文件。