張劭艾
前端工程師・網頁履歷

張劭艾

前端工程師|靜宜大學資訊管理學系

  • 具備 UI 協作 → 前端開發 → Flask API → Docker 部署的全流程能力,可獨立承接完整專案
  • 具備大型企業後台系統與全端小型專案的實際交付經驗
  • 日常以 Claude AI 輔助開發,迭代速度提升逾 50%;Hahow 平台網頁設計課程講師
前端開發工作環境

技術實力一覽

  • 前端以 Vue3 / JavaScript 搭配 Bootstrap / 原生 CSS 完成 RWD 介面
  • 有嵌入 Lottie 動畫提升介面流暢感的實作經驗
  • 後端以 Python / Flask 實作 API,搭配 PostgreSQL 與 Docker + Traefik 部署
  • 曾參與機場辨識、消防局辨識、智慧教室等大型後台前端開發
  • 能獨立完成全端小型專案(水利署 LLM、展覽互動、煙霧偵測)
  • 日常導入 Claude 協作,開發迭代速度提升逾 50%

個人簡介

身為前端工程師,具備從 UI 設計協作到後端 API、Docker 部署的全流程開發能力,能在專案中獨立承接完整開發範疇並穩定交付。開發前期可用 Figma 協助釐清頁面結構,前端以 Vue3 / JavaScript 搭配 Bootstrap / 原生 CSS 完成 RWD 介面,並有以 Lottie 嵌入動畫提升介面流暢感的實作經驗;後端以 Python / Flask 實作 API,搭配 PostgreSQL 資料存取與 Docker + Traefik 部署整合,確保系統能順利上線與穩定運作。

在大型專案中,曾負責機場辨識、消防局辨識、智慧教室等企業級後台系統的前端開發,將設計稿轉為可用介面並完成 API 串接;在小型專案上,能獨立完成水利署 LLM、展覽互動應用、煙霧偵測系統等全端專案的規劃到交付。近期將 Claude AI 納入日常開發協作,整體迭代速度提升逾 50%,交付效率與品質同步提升。

我做事負責細心,在完成系統功能的同時也留意 UI/UX 細節,並主動與設計師討論優化方向。曾在 Hahow 好學校開設零基礎網頁設計課程,擅長將複雜技術概念拆解成易懂的步驟;工作中習慣協助同事排除卡關問題,也曾協助主管帶領新人上手,是注重溝通、兼顧交付品質的工程師。

能力總覽

擅長領域

從企業後台到 AI 辨識系統,能獨立完成前端規劃與交付,也擅長在大型團隊中負責 API 串接與介面整合。

企業後台前端・AI 系統介面・全端小型專案

技術棧

以 Vue3 為主要前端框架,搭配 Flask 後端與 Docker 容器化部署,涵蓋從開發到上線的完整技術環節。

Vue3・JavaScript・Python Flask・Bootstrap・PostgreSQL・Docker・Traefik

核心強項

具備 UI 規劃到部署整合的全流程視野,能與設計師順暢協作,並將 AI 工具導入日常開發流程以提升效率。

全流程開發・UI 協作・AI 輔助迭代・RWD 介面

效率提升 50%↑ 日常導入 Claude AI 協作,進行需求拆解、程式產出與測試驗證,大幅縮短開發迭代週期。

工作經歷

2022/11 — 至今

前端工程師 瑞艾科技有限公司

  • 使用 Vue.js 搭配 Flask 架構進行網站架設與維護
  • 以 Bootstrap 或原生 CSS 製作 RWD 響應式網頁
  • 與 UI 設計師協作溝通,優化整體 UX 體驗
  • 以 Flask + Python 撰寫 API,進行資料庫存取
  • 大型專案負責 API 串接;小型專案完整獨立承擔前後端開發
2021/10 — 2022/03

UI / 網頁設計師 浚鋐網路科技有限公司

  • 使用 Figma 設計 App 視覺介面
  • 原生 CSS 製作 RWD 響應式網頁;WordPress 網站設計與調整
  • 使用 After Effects 製作網頁 Lottie 動畫及線上課程前導影片
  • 一頁式銷售頁視覺設計與文案初稿撰寫
2018/05 — 2020/03

助理工程師 亞昕資訊股份有限公司

  • 以 HTML、CSS、JavaScript 進行網頁編排與視覺設計
  • 維護及開發校務系統,執行 UI/UX 優化
  • 製作網頁背景圖、展架、Banner 等平面設計
  • 設計系統及展覽主視覺圖
2017/10 — 2018/03

影片製作技術人員 頑石生活股份有限公司

  • 使用 After Effects 製作活動宣傳影片與動畫
  • 活動企劃撰寫與執行,發想各場館創新活動
  • 粉專文案撰寫與營業現場顧客服務

技術能力

前端開發

  • Vue3 / Composition APISPA、動態路由、元件化
  • JavaScriptAxios 串接、非同步處理
  • Bootstrap / 原生 CSSRWD、Lottie 動畫整合
  • Figma頁面結構規劃、與設計師協作

後端開發

  • Python / FlaskRESTful API、Blueprint 模組化
  • PostgreSQL資料表規劃、資料存取
  • Flask + 資料庫完整 CRUD 流程

部署維運

  • Docker / Docker Compose多服務部署
  • Traefik反向代理、自動 SSL
  • Nginx靜態服務、反向代理

工具與其他

  • Claude AI需求拆解、程式產出、測試驗證
  • After Effects / Lottie動畫製作與嵌入
  • Illustrator視覺設計

人格特質

🎓

Hahow 線上課程講師

在 Hahow 好學校開設零基礎網頁設計課程。擅長將複雜概念拆解為可理解的步驟,協助入門者建立紮實基礎。

🤝

主動協作、樂於助人

習慣主動關心同事卡關狀況並提供協助,讓問題更快被解決;主管曾安排協助新人交接與帶領,維持團隊節奏。

高執行力與流程優化

每個專案結束後做回顧,將可重複使用的做法模組化整理;自由接案經驗讓我格外重視時間管理與交付效率。

個人作品

前端 Demo 展示站

收錄個人實作的前端互動範例,涵蓋動畫效果、UI 元件與小型應用展示,持續更新中。

前往查看 →

聯絡方式

歡迎來信洽詢,可提供作品展示與開發流程說明