About MeExperienceProjects
pic
github
emial

Hi, I'm Joy!

2+ 年經驗前端工程師

擅長使用 React 和 MUI 做開發

目前任職於 IoT 產業,接觸的產品包括智能設備監控系統專案管理系統 我樂意嘗試各種不同產業及機會,歡迎寄信給我或是到 Github 翻閱我的作品集。

關於我的冷知識:

曾當過英文講師,輔導大學生及社會人士口說及多益英文

因為喜歡動畫,曾去日本打工度假一年

曾經騎車環台灣半島,遇上強風差點被吹下山谷

威力工業網絡

前端工程師

2022/10~在職中

skill-icons
  • 使用 React 與 MUI 框架,還原 UIUX 設計稿功能
  • 前端模組化。如將 Formik 表單管理與 MUI Table 合併,製作成可重複使用的 Table 表頭搜尋功能
  • 與後端工程師討論 RESTful API 回傳資料結構,並使用 SWR 管理快取
  • 使用 Git 提交進度並遵循 Git Flow 流程
  • 導入 Jest,進行自動化 Unit Test

友上科技

前端助理工程師

2021/07 ~ 2022/09

skill-icons
  • 根據客戶需求設計互動式 Dashboard,使用可搜尋表格及各式圖表協助客戶更清楚控管倉儲
  • 以 React class component 及 Ant Design 維護及修正原有專案
  • 使用 Three.js 製作廠房地圖,即時顯示智慧車位置
  • 與後端團隊討論 API 格式及串接
  • 製作英文簡報及協助文件翻譯,向國外客戶介紹產品

台中資策會

前端工程師就業養成班

2020/08 ~ 2020/12

skill-icons
  • 以 Vue、BootStrap、Express、MySQL 完成團隊專題 - 兜位趣旅行網站,負責文章發布、Google Map 顯示及留言評分功能
  • 以 PHP 完成個人專題 - 備單字線上單字本系統,包含登入系統、單字收藏、頭貼上傳功能,以 JavaScript 及 CSS 製作卡片收合效果及單字本翻頁效果
  • 以 HTML、CSS、JavaScript 練習切版
Joy's Frontend Learning Blog
#Hexo
#Markdown

我的前端開發筆記,紀錄在自學及工作上解決過的問題和踩過的坑。

使用 Hexo 網誌框架中的 NexT 主題,網站呈現黑白簡潔的基調。

文章都附有標籤,讓讀者能快速找到想看的文章。

MUI 折疊表格 Foldable Table
#MUI
#React Context
#React Router DOM

之前使用其他 UI 庫時,特別喜歡折疊表格的設計。在發現 MUI 沒有已經打包好的折疊表格,決定自己動手做一個。同時也練習使用 React Context 製作 Dark Mode 以及最近流行的將 State 存取在 url 中。

會議室預約系統 - Conference System
#React
#MUI
#SVG
#Redux

會議室即時監控及預約系統。

發想來自某次新聞介紹矽谷科技公司提供辦公室預約系統,讓員工能隨時預約辦公室。

主要功能包括使用 SVG 繪製的會議室狀態地圖及用 Redux 控管的會議筆記。

月曆系統 - Calender App
#React
#Chartjs
#CSS Grid
#Dayjs

共分為三大頁面。

首頁以 Dayjs 計算出今日距離下個假期有幾天,行事曆頁能查看月曆特殊節日及切換月份,統計表頁以長條圖顯示各月份放假天數,並用在圖中標記出最多天數的月份。

拓樸圖套件練習 - ReactFlow Practice
#React
#Reactflow

因工作需要繪製設備關係圖,使用拓樸圖套件 ReactFlow 練習。 主要功能為

1. 開關編輯功能

2.呈現各設備及連線狀態

3.拖曳、新增、刪除節點和連線

記憶遊戲 - Memory Game
#HTML
#CSS
#JavaScript

在初學期間為練習 JavaScript 而製作的記憶翻牌小遊戲。除了學習如何使用 JavaScript 控制 DOM ,使各卡片因狀態不同改變Style;也使用 CSS animation、perspective、tranform 製作 3D 翻牌效果

© 2023 JoyFan Taiwan. All rights reserved.