Frontend Engineer · Creative Development
以程式實現想法讓互動創造更多
專注於前端開發與互動實作，運用現代前端技術，打造兼具效能、可用性與視覺表現的網站。
About / 關於我
從完成需求，到理解問題。
我是 Elio，一名前端工程師，主要使用 Vue 進行網頁介面開發。剛開始工作時，我更在意如何把畫面做出來、讓功能正常運作。進入公司後，我同時接觸 Vue 2 與 Vue 3 的專案，開始學會理解既有程式的設計原因、框架之間的差異，以及修改可能影響的範圍，再決定合適的實作方式。
工作之外，我也透過個人專案探索前端技術與互動設計。這個網站的 3D 遺跡與迴廊，便是我運用 Three.js 與 GLSL Shader 探索空間感、動態效果與網頁互動的實驗。
- 核心技術
- 以 Vue 2、Vue 3 為主要開發技術，具備 Vuetify、PrimeVue 與 Nuxt UI 等 UI 元件框架的使用經驗，並運用 Nuxt、TypeScript 與 Tailwind CSS 建構網頁應用。在互動與視覺開發方面，持續探索 Three.js、GLSL Shader 與 GSAP 的應用。
- 實務經驗
- 具備既有系統維護、Vue 2 與 Vue 3 專案開發、介面調整與元件行為除錯經驗，曾處理元件互動異常與樣式問題，並在修改過程中兼顧既有功能。
- 工程思維
- 重視程式碼可讀性、元件結構與可維護性。面對開發問題時，先釐清原因與影響範圍，再進行修改並驗證結果，讓每次變更都有明確的目標與依據。
7 min
實戰紀錄
既有系統除錯思路：從重現問題到建立防護
面對非本人撰寫的舊程式碼時，如何透過清晰的最小重現範例、斷點排查與元件解耦逐步解決問題。
8 min
工程品質與資安
前端工程化與品質：測試策略、無障礙與 Web Vitals
測試、自動化驗證、無障礙設計、效能優化與大型專案的維護思維。
9 min
工程品質與資安
JWT 要存哪裡：從 localStorage 到 Cookie + CSRF Token
比較 JWT 存在 localStorage 與 HttpOnly Cookie 的差異，說明 XSS 與 CSRF 的風險，並記錄實際專案改用 Cookie 加 CSRF Token 的做法與踩坑。
10 min
實戰紀錄
用 Notion API 當 CMS：東京自由行旅遊網站的實作紀錄
為了 9 月的東京自由行，用 Nuxt 4 做了一個旅遊行程網站，把 Notion 當成內容後台，並用伺服器路由、transformer 與快取隔開 Notion 的資料結構。