我的作品集 | Portfolio

關於我 (About)

熱愛像素與代碼的結合。我不只寫程式，更在乎如何透過流暢的互動體驗，將設計師的視覺語言完美轉譯給使用者。

嗨！我是 陳奕勳，目前就讀台科大，同時以自由接案者身份承接網頁專案。

能從純 HTML/CSS 的靜態形象頁，到 React + TypeScript 的完整電商 SPA，獨立完成整個開發流程。對技術選型有自己的判斷——用最合適的工具解決問題，而不是為了框架而框架。

對我而言，設計與開發不是兩件事。我特別在意視覺細節、微互動與排版節奏，致力於讓程式碼服務於使用者體驗，而不只是讓頁面「跑起來」。

服務項目 (Services)

從視覺切版到功能開發，提供一站式的網頁解決方案。
確保您的網站在任何裝置上都能完美呈現。

品牌形象網站
從 Landing Page 到多頁式官網，行動版優先、快速交付。純靜態方案無需後端，維護成本低。
前端應用開發
React + TypeScript 打造的互動式 SPA，含購物車、表單驗證、路由管理等完整前台功能。
UI 切版 & 動態效果
設計稿精準實作，微互動、捲動動畫、CSS 動態效果，致力於讓視覺語言如實呈現在瀏覽器中。

精選作品 (Works)

展示我運用全端技術與設計思維打造的專案。

Landing Page 展示

多種風格的單頁形象網站，涵蓋部落格、SaaS、活動、餐廳、健身等主題。

Drifting Notes — 個人部落格

深色極簡風格的寫作者個人主頁，螢光綠作為主色搭配暗背景，強調文字與內容本身。

HTML CSS Dark Mode

去看看

Flowline — SaaS 產品頁

玻璃擬態風格的 SaaS 流程管理工具形象頁，深藍漸層背景搭配卡片與定價方案區塊。

HTML CSS Glassmorphism

去看看

FORM 2026 — 設計研討會

新粗野主義風格的設計研討會 Landing Page，強烈紅黑對比配上大膽排版與幾何圖形。

HTML CSS Brutalism

去看看

ROKU — 日式餐廳形象頁

電影感暗色調的高端日式料理形象頁，金色細節搭配全屏視差效果，展現沉浸式品牌體驗。

HTML CSS Cinematic

去看看

PULSE — 健身 App 形象頁

高能量橙色漸層的健身應用形象頁，動態統計數字搭配功能介紹與下載 CTA。

HTML CSS App Landing

去看看

多頁式網站展示

完整多頁面網站，包含導覽、各功能分頁與行動版 RWD，模擬真實交付規格。

TERROIR — 咖啡廳多頁網站

暖色有機風格，7 頁完整網站含首頁、菜單（CSS-only Tab）、活動、訂位表單（含驗證）、聯絡頁等。

HTML CSS 7 頁表單驗證

去看看

NOOK — 山中民宿多頁網站

溫潤大地色調，7 頁完整網站含房型展示、設施介紹、相片集 Masonry Grid、地點與交通資訊、訂房表單。

HTML CSS 7 頁 Masonry Grid

去看看

電商前端展示

React + TypeScript 打造的完整電商 SPA，含商品列表、篩選、購物車、結帳流程。

VOID — 潮流電商

暗色極簡風格的潮流服飾電商，含商品篩選、尺寸選擇、購物車側邊欄、結帳表單，zustand 狀態管理。

React 19 TypeScript Tailwind zustand

去看看

KOMOREBI — 生活選品電商

日系無印風格的生活選品電商，乾淨白底搭配溫和木質色系，商品涵蓋文具、收納、廚房、家居四類。

React 19 TypeScript Tailwind zustand

去看看

聯絡我 (Contact)

有興趣合作嗎？準備好開始一個新專案了嗎？隨時發送郵件給我。

我的連結