SmartPawLife 寵物智慧電商
這是一個從零規劃的寵物智慧電商練習專案，包含前台商品列表、商品詳情、購物車與結帳流程， 以及後台商品與訂單管理頁面。專案中著重在頁面結構拆分、狀態管理與 RWD 版型。
前台Demo 後台Demo Github
ABOUT
關於 Satar
來自台南的前端工程師，INFJ。早期主修工業設計，後來投入HTML/CSS與UIUX設計多年， 曾負責SaaS系統UIUX規劃設計與前端切版，各式前後台包含充電樁管理系統、政黨行程提報系統、銀行產業個資盤點系統、叫貨系統、點餐系統、電商購物網與多個形象官網等UIUX與切版工作，並經歷過多年接案與遠端合作。
在設計職涯的後期，我發現除了實現華麗視覺以外，更在意「結構、邏輯與長期維護」，也更熱衷於功能規格上的訂定與討論，因此開始系統性學習 JavaScript 與 React，完成六角學院 React / JavaScript 課程與實作專題， 把過去的規劃經驗轉化成前端工程的能力。
喜歡把事情整理清楚：從 Design System、CSS Token、版型規則、元件建立，到前端專案的檔案結構，建立CSS Token 搭配 Design System與設計師的設計習慣，能夠快素重複運用到不同的專案版型上， 希望協助團隊減少反覆溝通與「改不完」的修改循環，留下更多時間處理資料邏輯與調整互動體驗，打下穩定迭代的基礎。
SKILLS
擅長的領域
結合多年設計與前端經驗，專注在「從設計到程式」的那一段轉換過程。
不只是把畫面切出來，而是讓專案在結構、命名與維護上都有一致的邏輯。
讓網站產品確實符合功能邏輯，擁有良好的操作體驗。
前端技術
HTML5 / CSS3 / RWD 版型實作
Bootstrap 與客製化設計系統切版
Typescript
JavaScript（ES6+）
React / Next.js
Redux Toolkit 狀態管理
Vite 前端開發環境
Tailwind
使用者體驗
版面編排與階層結構
Figma / UIUX規劃實務
Design System / CSS Token 規劃
從需求訪談到介面規劃
工作習慣與溝通
善於整理規格與建立範本
重視維護成本與邊界設定
偏好書面溝通與清楚文件
PROJECTS
作品集精選
以下是近期較具代表性的前端作品，包含完整電商流程練習專案、React 狀態管理範例，以及切版與互動效果實作。 每一個作品都反映了我對結構清晰、維護友善與細節的堅持。
前台Demo 後台Demo Github
企業形象官網切版
經歷多個企業官網前端切版。 除了實作符合設計稿的畫面，也逐案整理CSS Token與共用元件（按鈕、表單、區塊間距）與 CSS 命名規則， 讓專案在往後修改內容時不容易「越改越亂」。
泓滎太陽能 統一期貨家蘭 小陳中古車庫 威仁法律事務所 ULTRA健身 綠意傢飾 優仕德
React Todo List（Redux Toolkit）
使用 Redux Toolkit 實作 Todo List 小專案，切分 Slice、設計 state 結構與撰寫 reducer，包含新增任務、刪除任務、狀態切換。 雖然功能不複雜，但幫助我理解如何在中小型專案中保持狀態管理的清楚與可維護。
Demo Github
wowoRoom 床墊電商購物網
純 JavaScript 開發 + 前後台，模擬完整前後台頁面，包含訂單資料處理、API 資料串接與 資料處理後使用C3.js 圖表顯示統計數據。
前台Demo 後台Demo Github
學習型 Side Project 與實驗
持續透過小型練習題與 Side Project 累積經驗，例如把舊專案重新用 React / TypeScript 寫一次、 練習拆分元件、調整檔案結構，以及探索未來想導入的 Next.js 與 Tailwind 流程。
CONTACT
聯絡方式
如果你正在尋找穩定、細心，重視結構與維護性的前端工程師，歡迎與我聯絡。 無論是遠端職缺、合作專案或單純想聊聊轉職與工作模式，都可以透過以下管道找到我。
- Email satarkuo@gmail.com
- GitHub GitHub 個人頁
- LinkedIn LinkedIn
- Location 台南 · 偏好遠端或穩定的混合辦公模式