你好，我是 IAN
我是一位專注於電商領域的前端工程師，擁有 React 與 Vue 的雙框架開發經驗。與一般開發者不同，我具備深厚的 SEO
與數據分析 背景，能從爬蟲友善度、頁面加載效能（LCP/FID）與使用者行為數據角度，優化產品的轉換效率與技術指標。
近期參與的電商平台專案中，我負責前台（商品篩選、購物車、結帳流程）到後台管理（庫存與運費邏輯）的全面迭代，擅長處理複雜狀態管理與 RESTful API
串接，並在開發中落實以下準則：
• 元件化與系統化：抽離共用邏輯與建立 SCSS 樣式規範，提升重用性並降低維護成本。
• 使用者體驗優化：針對 RWD 與跨瀏覽器相容性深度調整，確保行動裝置購物體驗流暢直覺。
• 穩定開發流程：遵循 Git Flow 並快速定位修復 Bug，確保交付品質。
我能純熟運用 AI 工具協助需求拆解與單元測試編寫，整合進日常工作流以加速原型產出並提升代碼重構精準度。未來期許持續深化 React/Vue
生態系開發，發揮「數據驅動」特質，在提升網站性能與工程化維護的同時，為團隊與產品創造可量化的商業價值。
About
Profile
Front-end engineer focused on e-commerce, balancing SEO, performance, and maintainability in production-ready UI.
- Component-driven architecture with reusable UI patterns.
- State, form, and error handling for complex purchase flows.
- SEO/CWV mindset for crawlability and conversion impact.
Engineering Focus
- Clean component boundaries and predictable data flow.
- Performance tuning (LCP/FID) and render stability.
- RWD and cross-browser QA for consistent UX.
- Collaboration-ready handoff and documentation.
Experience
2025/12–至今
前端工程師｜ 歐維納資訊有限公司
電商平台前台與後台系統開發（React），依需求完成切版與互動功能。
前台：商品列表/篩選、商品詳情、購物車、結帳、會員頁維護與迭代。
後台：商品、訂單、運費/庫存流程開發，提升營運操作效率。
串接 RESTful API，處理 mapping、分頁/搜尋、錯誤回饋與狀態顯示，確保資料一致。
建立共用 UI 元件與 SCSS 規範，並落實 RWD/相容性調整。
2024/4–2025/7
SEO助理工程師｜華杰品牌行銷有限公司
網站架構優化、內容策略制定與優化、關鍵字研究與資料分析。
Google Analytics/GTM 追蹤與網站成效監測。
2020/8–2023/10
外務人員（倉儲物流）｜樹森開發股份有限公司
培養時間管理與組織能力，確保流程準時完成。
重視準確性與可靠性，注重細節並保持良好溝通。
確保客戶獲得穩定且高品質的服務體驗。
Education
2023–2024
Front-End & UI/UX Program
Completed Figma UI/UX and Vue.js coursework with hands-on projects.
2013–2016
Information Management (Related)
Coursework in programming, databases, and web fundamentals.
Skills
Core
- React
- TypeScript
- JavaScript
- HTML
- CSS/SCSS
- API Integration
- RWD
Engineering
- Componentization
- State Management
- Form Validation
- Error Handling
- Maintainability
- Accessibility
SEO & Performance
- Meta/OG/Canonical/Schema
- Sitemap/Robots
- Lighthouse/CWV
Tools
- Git
- GA/GTM
- CI/CD
Other (Exposure)
- Figma
- PHP
作品集
Kanban Flow
以 Vue 打造的看板式任務管理，呈現流程與工作狀態。
亮點
- 欄位式流程版面
- 任務卡片視覺結構
- 任務移動時的狀態更新
- 響應式看板佈局
清楚呈現任務在各階段的進度。
天氣卡片
串接天氣 API 的即時卡片，具動態狀態與資料更新。
亮點
- 非同步抓取與 loading/error 狀態
- 依 API 回應動態渲染
- 單位切換的簡易狀態管理
- 響應式卡片版面
API 失敗時仍可保持穩定呈現。
Microsoft 首頁切版
微軟首頁切版練習，聚焦版面結構與一致性。
亮點
- Flex/Grid 排版處理複雜區塊
- 模組化區塊結構提升維護性
- 桌機與平板斷點調整
- 互動元素 hover/focus 狀態
跨尺寸保持一致版面與視覺規範。
色彩辨識遊戲
以顏色辨識為主題的互動小遊戲，練習 JS 狀態與可及性。
亮點
- 隨機顏色生成邏輯
- 狀態驅動的勝負回饋
- 高對比色盤提升可讀性
- 清楚的 DOM 事件處理
遊戲流程完整且操作回饋明確。
BMI 計算器
具輸入驗證與即時回饋的 BMI 計算器。
亮點
- 輸入驗證與空狀態處理
- 即時計算與結果訊息
- 手機/桌機版面響應式
- 清楚的數值與等級呈現
避免錯誤輸入並保持操作流暢。