趙冠逸 Nono

前端工程師

  Taipei, Taiwan

原任職於卡訊電子擔任前端工程師,主要研發公司的新產品,以及將舊有產品改寫為網頁應用程式,透過網頁對控制相關硬體設備如攝影機、電視牆、導播機等,主要使用 Vue 開發,熟悉 Vue 相關生態,不排斥未來使用 React、Angular 等框架,若有工作需求有信心快速轉換。

熱愛開發網頁應用程式,樂於分享,且喜歡接觸新的技術、想法。有約三年前端開發經驗、一年後端 PHP 開發經驗,致力於撰寫乾淨可讀性良好的程式。

透過參與前端社群、活動來學習和分享新知識,曾參加過 IT 鐵人賽連續 30 天的技術文章分享,並受到肯定在 Morden Web 組別獲得優選。

  

Blog

前端技能

其他技能


  • ES6 語法並持續追蹤 ECMAScript 推出的功能
  • Vue.js 與相關生態 (Vuex、Vue Router、Vue i18n)
  • Jest 單元測試增加程式可用性
  • CSS 預處理主要使用 SASS/SCSS
  • UI Framework Vuetify、ElementUI、Bootstrap
  • Webpack 根據產品需求打包
  • Electron 編寫跨平台應用程式
  • Canvas 開發互動式圖片編輯介面、圖表、視覺效果

  • Git
  • ESLint 維持程式碼整潔
  • Restful API 串接經驗

工作經歷

前端工程師

KKBOX  •  六月 2021- Present

  • 使用 Vue.js 開發 KKBOX 年度音樂回顧,並加入引人注意的動態效果讓用戶有更沉浸的體驗
  • 與 marketing 團隊合作,開發無損音質耳力鑑賞室、傳說對決合作猜歌測驗等等活動頁面,包含前後端開發
  • 使用 Nest.js & Laravel 開發 API
  • 參加公司舉辦的黑客松,做了即時猜歌互動遊戲拿到第一名
  • 在公司舉辦 3 次技術分享會

Frontend Tech

Vue3、Vite、Pinia、tailwindcss、JAMStack、Lighthouse CI

Backend Tech

CI/CD、Docker、Nest.js、Laravel、LangChain


前端工程師

卡訊電子股份有限公司  •  四月 2018 - 五月 2021

- 與後端工程師與 UI/UX 設計師合作,負責網頁前端部分,研發公司新產品
- 將舊有產品改寫成網頁應用程式
- 將原本條列式的操作改為圖形化操作
- 將 i18n 檔案和 google spreadsheet 同步,讓產品語系更好的被修改
- 利用 Electron 製作應用程式讓廠務人員使用,協助廠務進行產品出廠前的測試與更新
-曾自願擔任內部講師教 Git
-導入 Jest 前端單元測試

相關技術
Vue、Electron、Git、Node.js

網頁工程師實習

曠世國際有限公司  •  二月 2017 - 九月 2017
- PHP Laravel 撰寫後端
- PhoneGap 使用
- Restful API
- 網站 SEO 優化
- Canvas 製作客製化手機膜功能

網頁工程師實習

振碩科技  •  六月 2016 - 二月 2017
- 使用 dojo toolkit 的相關功能及UI
- 提供 web api 供相關模組使用
- 網頁平台建構
- java http server 撰寫
- 撰寫系統分析文件

專案


直播串流處理器

一台能夠接收外部影音訊號,透過使用 Web 介面編輯多個導播畫面,並能讓使用者即時切換不同導播畫面等功能,主要參與前端部分。

  • 參與規劃前端架構
  • WebSocket 與設備狀態即時同步
  • 自訂編輯導播輸出畫面,並輸出完成的縮圖
  • i18n 多國語系
  • Jest 單元測試自訂元件

產品介紹連結



IP 分佈式影音控制管理

  • 條列式電視牆切換視覺化,改為透過拖曳來切換
  • Restful API 串接

產品介紹連結


(編輯電子看板操作)

智慧公共廣播

包含聲音以及電子看板的播放,可讓客人設定排程定時播放,參與整個產品的製作過程,並主要負責前端的部分。

  • 電子看板編輯
  • 廣播排程設定
  • Electron 製作電子看板 

參展影片連結


獎項

IT 鐵人賽 30 天技術文章挑戰 - Fabricjs 筆記 Morden Web 組別優選

文章連結

分享自身使用 Fabricjs 的一些經驗,從幾百位參賽者中受到評審的肯定,得到優選。



作品

Open Source Vue Component: vue-material-year-calendar

github npm

github 約有 90 stars

npm weekly downloads 平均約 100 次

Vue.js 製作的全年日期選擇,可透過滑動或點選的方式來選擇日期,目前為開源專案能在並能使用 npm 安裝。

演算法視覺化 (進行中)

link

Svelte 來做一些演算法過程的動畫,幫助了解演算法的演繹過程。

作品 - The F2E

The F2E 活動為六角學院舉辦的一週前端小專案挑戰,會有設計師在前一週投稿,一週後前端工程師能挑喜歡的設計稿來實作。

The F2E 新接龍

link

source code

HTML5 DnD、Vue 遞迴組件


The F2E 蕃茄鐘

link

source code

配合 Canvas 製作背景動畫效果


The F2E 90秒遊戲

link

source code

使用 Phaser.js 來製作,因為是第一次做遊戲又只有一週時間。不過最後還是有做出一點能夠玩的東西。


學歷

高雄應用科技大學

資訊管理學系  •  2013 - 2017

主要奠定程式基礎,期間有和學校合作接過一兩個案子,使用 PHP 負責開發客製 ERP 中的一部份模組。
一部份時間花在系排上,從大一排球新手到大四獲得南資盃冠軍。這部分讓我體悟了對一件事擁有熱情是很重要的。