#UI/UX
#Front-end
#視覺美感
#邏輯思考
視覺表現
的能力,及善於邏輯思考
、獨立作業
的人格特質,建議我去了解網頁的製作。從Udemy線上課程中萌發對前端工程的興趣,便在2023年報名相關職訓課程,發想出
貓知識測驗小遊戲「貓奴檢定」
,於今年1月自學 React 將此專案實現,並加以摸索網頁動畫製作平台 Rive 將所畫的貓貓動態化,為「貓奴檢定」建立一個有互動效果的介紹網頁。
期許能在重視覺表現的公司裡,發揮己長,參與一件件酷炫網頁的製作!
喵起來 - 貓貓咖啡廳預約、認養複合式平台
🖼前期發想 🎨網頁 Layout (製作中)
🐈貓奴檢定 - 貓知識測驗小遊戲 🎮Link 🖥Github
#React
#useState
#useEffect
#SCSS
每次遊玩都從題庫隨機取題,以 React 各式 hook 完成進度切換、成績計算及題目解析等功能,並使用 html2canvas 達成測驗結果下載。
🐈貓奴檢定 - 設計發想介紹網頁 🎮Link 🖥Github
#React
#SCSS
#Rive
介紹貓奴檢定的視覺設計及看不到的程式小巧思,將本來置於 Behance 等平台的平面內容,使用 Rive 及 CSS 加上一個有互動性的登陸頁,並監聽滾動事件,以優化使用者體驗。
🥇React Quiz - React 知識測驗 🎮Link 🖥Github
#React
#useReducer
#json-server
搭配線上課程所提供的 CSS 所建立的 React 測驗小遊戲 ,利用 Json-server 建立 Fake api 串接測驗題目,及 React useReducer 更新及管理複數 state 。
🎬Usepopcorn - 電影搜尋 🎮Link 🖥Github
#React
#useEffect
#Data fetching
#Custom hooks
#Local storage
搭配線上課程所提供的 CSS ,使用 React 串接電影資訊 api ,供使用者英文輸入搜尋電影,並提供評分電影、加入片單至 Local storage 等功能,且嘗試製作 Custom hooks ,利於工作上與他人共同開發。