Anthony Tsai's blog

HI, I am a

Frontend Engineer

& UI Designer

Scroll

01 Who am I? 關於我

程式與設計的雙棲身份

離開教育界後我便全心投入網頁開發的領域。這個行業要的學習的技能很多，每一個都是一門學問，資訊也不斷的進步，大大的滿足了我的求知慾。

接收到新的知識後，我會寫成筆記加以整理。一方面是要學習的東西太多，另一方面是希望能跟大家交流、一起成長，所以才會架設這個網站。

目前我感興趣的領域有網頁前端、動態效果，此外對2D&3D動畫設計也有深入的涉略，期待未來能做出讓自己滿意的網站。

下方的圖片是我平時的一些休閒興趣，日後有什麼心得也會放上來跟大家分享討論。

Anthony Tsai

FRONTEND ENGINEER / UI DESIGNER

MY HOBBY.

植栽

電玩

閱讀

3D角色設計

桌遊

鋼琴

02 What can I do? 經歷&專長

WORK EXPERIENCE.

Mar. 2017 - Dec. 2019

Homeroom Teacher

與朋友一起創立家教班，專門招收國際學校學生。主要以IB、SAT課程為主。

Mar. 2020 - Sep. 2022

AboutNIC / Website Designer

擁有網頁設計師和UI設計師的雙重身份，負責製作網頁設計提案並且進行切版及網頁互動效果。

Oct. 2022 - Currently

Codepulse / Frontend Engineer

根據設計稿進行切板工作，並與設計師深入討論，確定最佳可行性方法。與後端工程師合作，溝通API規格並進行串接。

KNOWLEDGE & SKILL.

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

能熟練的使用Ps編輯素材，達到去背、修圖或合成的效果。

Illustrator

能熟練的使用Ai製作向量素材，並輸出到其他軟體或是製作SVG供程式使用。

Figma

擅長使用Figma完成介面設計、視覺規範及製作Prototype做出畫面的演示。

Cinama 4D

擅長製作3D素材及角色設計，也能製作簡單的3D動畫。

After Effect

擅長運用素材製作簡單的轉場動畫或是循環動畫。

Visual Studio Code

熟悉Vscode與WebStorm的開發環境。

03 What did I do? 作品&雜記

WORK.

納智捷汽車

Frontend

01專案簡介

納智捷是台灣的汽車品牌，他們計劃推出全新的電動車，為此希望建立一個嶄新的官方網站，以展現電動車的品牌形象。因為這是我首次使用Vue框架進行開發，所以對我來說意義重大。

02挑戰

客戶為了電車有打造一個充電生態圈，所以首頁要強調他們為電車所提供的服務。因為網站整體走精緻高尚的風格，所以動畫上使用了比較細節的處理，像是header的hover效果、車子開進來的效果、區塊放大的進場效果。

我覺得設計師還滿厲害的，因為當初客戶要求要有綠色跟黃色跟紅色，但是這種色系很難跟精品風格連結在一起。原本有做切換的時候文字跟圖片都會同時切換，但是因為圖片不夠就沒拿掉了，app區塊也是本來有手機示意圖上線前被拔掉了之後才會補上，覺得有點可惜。這一頁我覺得最難的是右邊的錨點很容易因為gsap固定區塊的關係算錯距離，後來用特殊的方式計算區塊所在位置才成功。

這個網站也是首次做AWD的網站，因為要做的像應用程式介面，所以電腦版跟手機版的呈現是完全不一樣的(在充電地圖也是類似這種做法只是這頁還沒有對外開放)。

購車流程的第一個步驟是選車子的型號跟顏色，這邊有參考特斯拉的樣式，在挑選的途中會因為選擇的顏色切換到對應的顏色圖片，切換外裝顏色時會切換到外裝的圖庫(外裝的輪播圖跟內裝是分開的)。

03總結

這個專案應該是我最痛苦的階段，幾乎每天都需要加班改進度，大概有150個頁面要在5個月上線。不過也是第一次體驗到專案上線的成就感，畢竟是自己從0開始打造出來的孩子，雖然做完發現自己還有很多不足但是也有感覺自己成長了很多XD。

泰琪科技

Frontend

01專案簡介

泰琪科技是生產環境模擬設備的高科技公司，因為公司想要轉型想要做一個很富有科技AI感的形象網站，經過設計出了好幾版後終於定案了，然後設計就問我說這個網站真的做得出來嗎XD。

02挑戰

首頁想呈現一種dive in到機器裡面的感覺，我覺得這個想法十分的酷，但是很擔心我對準不了物件的位置。但GSAP很罩，裝置大小產生的問題不大，主要是要花時間調整參數。客戶驗收的時候有點嚇到，因為長得跟設計稿幾乎是相同的(可能他覺得多少會有差異)。

這個網站也讓我嘗試了很多以往沒有做過的特效，像是three.js、客製化游標、網站變成暗色系等等，以第一次嘗試的結果我覺得算滿意了。

03總結

很高興我幫公司完成了一個當初認為做不出來的網站，聽說客戶也是找了很多網頁公司才找到肯幫他們做的。我覺得有點可惜的地方是因為首頁效果用得太多，所以變的很吃效能，如果用前端框架不知道能不能改善這個問題。

SATORO

Frontend

01專案簡介

這是RedPeak委託製作的形象官網，跟太空事業相關的網站，因此整體風格帶有神秘的感覺。

02挑戰

RedPeak有在figma描述想呈現的動畫效果，因為他們想要的動畫效果滿複雜的，都是需要花時間調整參數的(滾動視差、會移動的線、卡片收疊)，還好成果有達到他們的期待也很順利地交付出去。

從設計稿可以看得出來RedPeak對於細節非常講究，他們希望能夠在不同大小的裝置看到相同的畫面，也就是說css的數值必須隨著螢幕寬度而調整，這邊我是使用clamp搭配函式去做處理。

這一頁的手機版算是最難製作的區塊，必須要偵測螢幕滑動的方向，往下或右滑是前進到下一個項目，往上或左滑是前進到上一個項目，滑到最後一個項目時取消釘選效果恢復正常滾動。

03總結

因為是第一次跟別的公司合作所以還滿擔心會不會溝通上的問題，但還好在驗收的過程都很順利，可能我做過UI設計所以比較能get到設計師的想法，結案後客戶也有主動聯繫我們希望之後有合作的機會。

Beanhub

Frontend / UI design

01專案簡介

Beanhub是一個自動化記帳軟體，他的優勢是支援多種貨幣及不可以隨意竄改紀錄。在規劃wireframe時因為每個section的字很多而且比較偏向於敘述的手法去介紹產品，所以我想用動畫的方式讓整個網站有活潑的感覺。

02挑戰

這個專案在前期花費很多時間在製作動畫素材跟研究LottieFiles可以做到什麼程度，用lottie的好處是你可以設定動畫要怎麼播放，像是第一個區塊人躺下來就不重複播放，但是背景是會重複播放的。壞處就是lottie有時候不支援漸層，匯出的時候會是一個純色色塊，再來是製作動畫真的很多時間跟眼力，所以後面幾個section就減少動畫的複雜程度，使用css的方法完成。

03總結

首先很感謝業主給我很大的空間去發揮創意，在規劃網站的時候他也會適時給我一些構圖的idea，所以我們都很滿意最終的結果。因為業主在美國所以我也是第一次在深夜12點開會，算是很特別的經驗XD。