HI, I am a
Frontend Engineer
& UI Designer
01 Who am I? 關於我
程式與設計的雙棲身份
離開教育界後我便全心投入網頁開發的領域。這個行業要的學習的技能很多,每一個都是一門學問,資訊也不斷的進步,大大的滿足了我的求知慾。
接收到新的知識後,我會寫成筆記加以整理。一方面是要學習的東西太多,另一方面是希望能跟大家交流、一起成長,所以才會架設這個網站。
目前我感興趣的領域有網頁前端、動態效果,此外對2D&3D動畫設計也有深入的涉略,期待未來能做出讓自己滿意的網站。
下方的圖片是我平時的一些休閒興趣,日後有什麼心得也會放上來跟大家分享討論。
Anthony Tsai
FRONTEND ENGINEER / UI DESIGNER

植栽

電玩

閱讀

3D角色設計

桌遊

鋼琴
02 What can I do? 經歷&專長

Mar. 2017 - Dec. 2019
Homeroom Teacher
與朋友一起創立家教班,專門招收國際學校學生。主要以IB、SAT課程為主。

Mar. 2020 - Sep. 2022
AboutNIC / Website Designer
擁有網頁設計師和UI設計師的雙重身份,負責製作網頁設計提案並且進行切版及網頁互動效果。

Oct. 2022 - Currently
Codepulse / Frontend Engineer
根據設計稿進行切板工作,並與設計師深入討論,確定最佳可行性方法。與後端工程師合作,溝通API規格並進行串接。

HTML / CSS / JS
能快速且精準的RWD切版及製作可重用的UI元件,且熟悉Bootstrap、Element Plus,Tailwind等主流的Library。

Vue
一年 Vue 開發經驗,參與過從專案開發到上線的整個流程,並熟悉 Vue 的核心觀念、Vue Router、Pinia 等主流相關套件。

React
具有React side project經驗,了解 Hooks 的使用及styled-components等工具。

API串接
與後端討論規格並進行 Restful 和 Websocket API 的串接。

UI / UX Design
了解如何規劃出符合使用者經驗的UI Flow,並且產出UI Wireframe及Prototype,也會跟設計師一起討論設計的可行性及UX優化。

Animation
擅長使用GSAP做出可以與使用者交互的動畫,或是使用LottieFiles搭配AfterEffect製作較複雜的動畫。

Google Analythics & SEO
了解Google的搜索排名機制,並且在撰寫HTML時達到最佳化。

Web Browser
了解主流瀏覽器之間的差異,以及用Simulator檢查不同裝置,讓瀏覽器的畫面保持一致。

Git
熟悉 Git 進行版本控制和多人協作,具有分支管理和 Pull Request 的經驗。

Photoshop

Illustrator

Figma

Cinama 4D

After Effect

Visual Studio Code
03 What did I do? 作品&雜記

Frontend



Frontend


Frontend

Frontend / UI design
Frontend / UI design


Frontend / UI design

