Hi, I'm BoYin Lee

我是一位網站前端工程師,熱愛實作高品質的網站系統及互動元件、追求優質友善的使用者體驗,常常被別人說是有 UI / UX 魂的工程師。

曾經在小型團隊中擔任網站全端工程師獨立開發數位學習系統,近期主要在大型公司中跟優秀的團隊成員合作開發產品,擁有系統性的規劃開發能力,樂於跨領域的團隊合作。

喜歡解決有挑戰性的問題、學習新技術、嘗試突破框架的創作。專業之餘我也熱愛戶外活動、桌遊、藝文活動、烹飪、攝影。

me at brown boulevard
me holding camera
my back view

Projects

Vue Layout System external link

這是一套以 Vue 開發的 UI Layout Component Library,結合多種元件專門解決前端日常開發會遇到的排列、對齊、內縮、間距、剩餘空間等排版問題,能有效提升開發效率和品質,也有助於工程師及設計師之間的溝通。

Vue component library npm package

e-commerce SKU calculator library external link

主要應用在購物網站前端的演算法,當消費者在選擇產品時,這套演算法能夠依據消費者已經選擇的規格及數量,即時計算出允許購買的規格組合、庫存數量、是否售罄及價格範圍,讓消費者很方便能比較不同規格之間的差異。

JavaScript algorithm npm package e-commerce

Byz external link

讀音像是「壁紙」,開發的初衷是為了讓團隊在進行產品易用性測試後,快速彙整大家觀察到的易用性問題並且投票表決處理問題的優先順序。Byz 是一款可以輕易透過連結邀請成員加入、新增貼文及評論,並且支援即時共同編輯的 Web App,很適合用在 Brainstorming 創意發想類型的會議。

Single Page Application co-editing Firebase Vue ITCSS FLIP animation

Everygram external link

這是一款與我設計師朋友合作目前正在開發中的 Web App,主要功能是管理登山裝備及規劃登山行程裝備,針對登山健行者的需求設計容易使用且齊全的功能,提倡輕量化旅行的精神。同時我也透過這個專案嘗試 PWA 相關的技術,將會是一款支援手機安裝、離線存取、跨裝置同步資料的 Web App。

Progressive Web App Single Page Application RWD Firebase Vue ITCSS

Color Teris external link

某個悠閒的週末突然想做個簡單的小遊戲當作消遣,順便藉此練習 Vue + TypeScript 的開發模式,用遊戲練習強型別語言再適合不過了。這是個考驗眼睛辨色能力及手速的小遊戲,盡可能在畫面堆滿色塊以前選取更多顏色相同的方塊吧!

Game Vue TypeScript Netlify Vite

Hourglass external link

有一天在玩桌遊的時候臨時需要用到沙漏,卻找不到令我滿意的沙漏 Web App,於是自己做了一個美感功能兼具的沙漏,並且在其中加入可切換顏色主題、可以用 URL 參數整合 iOS Shortcuts 等功能。

Progressive Web App Vue Sass Theme Colors

Voronoi Canvas external link

用 Processing.js 實作的 Voronoi Diagram 繪圖小程式,主要是練習將 Voronoi Diagram 演算法和 Processing.js 繪圖套件結合做成視覺化的應用程式。使用者可以新增、移動、刪除圖上的點,即時產生新的 Voronoi Diagram。

Processing.js Application

Skills

HTML & CSS
建造網站的零件
  • HTML
  • CSS
  • Sass
  • Bootstrap
喜歡的概念
  • BEM
  • ITCSS
  • BEMIT
  • Atomic CSS
  • Atomic Design
給了我很多啟發的人
  • Brad Frost
  • Bret Victor
  • Daniel Shiffman
  • Don Norman
  • Harry Roberts
  • Paul Lewis
JavaScript
擅長的框架
  • Vue
  • Vuex
  • Vue router
  • jQuery
常用的 Library
  • lodash
  • moment
  • axios
  • workbox
  • DIY libraries
想找機會學習的主題
  • React
  • TypeScript
  • Web Components
  • Jest
  • GraphQL
  • Progressive Web App
Backend & Tools
懂一些後端
  • PHP
  • CodeIgniter
  • Java
  • SQL
  • Firebase
常用的工具
  • git
  • npm
  • webpack
  • Postman
  • ESLint
  • Terminal
  • Chrome
會一點分析
  • Hotjar
  • Mixpanel
  • Google Tag Manger
  • Usability Test