Profile 03 00@2x

鄭宏璋  ( Luke )  

Front-End 前端工程師

Angular

座右銘: 有捨 有得

        目前擔任 神達電腦 前端工程師  ( 2023/05~ Now ), 進入神達電腦後,因為是有規模的公司,所以重視團隊效率,需要及時與專案經理或是UI/UX做溝通協調,需以工程師的立場來評估並給予建議,並在有限的時程下完成任務,執行任務的過程中,了解到溝通的重要性,並在不同的任務中,持續學習成長 ; 

在解決問題的過程中,更了解 Javascript 最底層的原理,並規劃程式共用性與可讀性,並盡可能在短時間內,快速解決問題以及突發狀況,有辦法或透過各種資源學習新技術的習慣,在前端的領域只覺得越來越覺得有趣,讓我們來挖掘其中的樂趣吧!!


工作經歷

神達電腦 / 前端工程師:( 2023/5 ~ Now ) 

  • 使用框架 Vue2, Vue3 + Vuex + Pinia + Ant-design-vue + vue-i18n + vue-googlmap
  • 車隊管理系統 - 開發及維護 
  • 模組化專案
  • 串接 Restful API
  • 串接 WebRTC Live View  

坤侑科技 / 前端工程師:( 2022/3 ~ 2023/5 ) 

  • 使用框架 Angular + RxJS + Typescript + EChart + PrimNg + Boostrap4
  • 腳鐐監控系統 - 串接 台灣圖霸地圖,即時顯示攜戴者位置
  • 鑑識系統 - 串接簽名板, 高拍儀 
  • 系統建置及維護 
  • 串接 Restful API
  • 串接 SignalR 

新金寶集團 / 前端工程師:( 2019/7 ~ 2022/3 ) 

  • 使用框架 Angular + RxJS + Typescript + Chart.js + Angular Material
  • 智慧工廠 - 戰情室數據圖像化 
  • 智慧大樓 - 戰情室數據圖像化 (Maintain)
  • XZY官網建置及維護 
  • Docker 打包 Angular 專案 
  • 使用 Ajax 與後端合作串接資料 
  • 將XYZ官網的 Java 框架 轉換成 Angular 9 經驗
  • 教導菲律賓工程師 觀念及工具

巧禾數位 / 前端工程師:( 2018/8 ~ 2019/7 )

  • 使用框架 Vue.js / Nuxt.js 
  • 活動網站建置及維護 
  • 使用 Ajax 與後端合作串接資料
  • 串接 Line / Facebook 登入


佳因企業 / 網頁設計師:( 2015/10 ~ 2018/4 ) 

  • 公司網站維護 & 修改成手機版 
  • Google Ayanlytics 分析,Google tag manager,hotjar,YouTube,Facebook 經營 
  • Google,Yahoo 關鍵字廣告設定 
  • 影片拍攝及剪輯 
  • 產品拍攝及修圖 
  • DM,海報,名片設計





  Javascript

  •  JavaScript (ES6) 
  •  jQuery、plugin
  •  Vue.js、Nuxt.js ( 15 Months )
  •  AngularJS  ( 6 Months )
  •  Angular + RxJS  ( 30 Months )
  •  Ajax / Axios 串接 API 撈取遠端  JSON 資料 
  •  實作 Facebook , Line 登入串接


 RWD Layout

  • HTML / CSS 
  • 能解決跨瀏覽器的相容性
  • 能不依賴 framework 客製化網頁
  • 具有 UI 和 UX 的敏感性
  • 能以 SCSS 撰寫更好管理的程式碼
  • RWD 的 CSS 語法、技巧


  Tools

  • Git / npm
  • Github / Gitlab
  • Postman
  • Chrome Dev Tool 
  • 使用 Sourcetree 工具
  • Devtoys
  • Google Analytics 使用
  • 了解 Google 關鍵字廣告


工作作品 / Front-End 



Paragraph image 03 00@2x
神達電腦

2B-車隊管理系統 

經銷商查看目前車隊狀況

相關技術: 

  • Vue2 / Vue3
  • Ant-Design-Vue 
  • Vue-i18n
  • Dark / Light Theme
  • Vuex
  • WebRTC 即時影像
  • Map紀錄事件點位
  • EChart
  • API  串接 
  • HTML + SCSS
  • WebRTC即時影像

Paragraph image 03 00@2x
坤侑科技

鑑識系統  (內部系統,無法展示)

建立鑑識資料,並追蹤鑑識進度

相關技術: 

  • Angular 11
  • PrimeNg 
  • RxJS + Typescript
  • SCSS
  • EChart
  • API  串接 
  • HTML + SCSS
  • 串接簽名板, 高拍儀

Paragraph image 03 00@2x
坤侑科技

監控系統  (內部系統,無法展示)

監控施戴者 離開or進入 圓圈預警範圍

相關技術: 

  • Angular 11
  • PrimeNg 
  • RxJS + Typescript
  • SCSS
  • EChart
  • API  串接 
  • HTML + SCSS
  • 台灣圖霸

Paragraph image 03 00@2x
金寶電子

IOT智慧工廠  ( Smart-Factory )

更多圖片 

相關技術: 

  • Angular 11
  • Angular Cli
  • RxJS + Typescript
  • Angular Material
  • Chart.js
  • API  串接 
  • HTML + SCSS
  • Lay-out UI 切版

Paragraph image 03 00@2x
金寶電子

IOT智慧大樓  ( Smart-Building )

更多圖片 

Maintain

相關技術: 

  • Angular 11
  • Angular Cli
  • RxJS + Typescript
  • API  串接 
  • Chart.js
  • HTML + SCSS

Paragraph image 03 00@2x

日本 Renyi 官網

網站連結 

切版及動畫效果

相關技術: 

  • SCSS
  • Gulp
  • jQuery
  • javascript 

Paragraph image 03 00@2x

日本客戶-保育士

網站連結 

切版及動畫效果

相關技術: 

  • RWD
  • SCSS
  • Gulp
  • jQuery
  • javascript 

Paragraph image 03 00@2x

日本客戶-介護廣場

網站連結 

切版及動畫效果

相關技術: 

  • RWD
  • SCSS
  • Gulp
  • jQuery
  • javascript 

金寶電子

XYZ-Printing ( 多語系 )

網站連結 

將專案從 Play Framework
轉成 Angular 9

相關技術: 

  • Angular 9
  • Angular Cli
  • ngx-translate 多國語系
  • RxJS + Typescript
  • API  串接 
  • SCSS

巧禾數位

永豐銀行-大戶

網站連結 

切版及動畫效果

相關技術: 

  • RWD
  • SCSS
  • jQuery
  • javascript 

巧禾數位

路博邁 刮刮樂  (Mobile)

網站連結 

串接 Line 登入 + 串接後台 API + canvas 刮刮樂效果

相關技術: 

  • RWD
  • SCSS
  • canvas 套用
  • jQuery
  • javascript 
  • Line login

巧禾數位

富達息專家

網站連結 

切版,及拼圖效果

相關技術: 

  • RWD
  • SCSS
  • jQuery
  • javascript 

巧禾數位

台新 Richart

網站連結 

利用 css 製作連續動畫 + Javascript 製作 loading 畫面

相關技術: 

  • RWD
  • SCSS
  • CSS Animation 
  • jQuery
  • javascript 頁面 loading

巧禾數位

鋒裕匯理投信

依照客戶需求客製化頁面

相關技術: 

  • RWD
  • SCSS
  • jQuery
  • javascript 

巧禾數位

富邦投信

網站連結 

position 定位(上下移動的 4 個 icon)

相關技術: 

  • RWD
  • SCSS
  • CSS Animation
  • jQuery
  • javascript

巧禾數位

保德信投信

依照客戶需求客製化頁面

相關技術: 

  • RWD
  • SCSS
  • Flex
  • jQuery
  • javascript

巧禾數位

股感網站 (切版)

網站連結 

Tab 切換效果+ swipe slide 套件

相關技術: 

  • SCSS
  • jQuery
  • swiper slide

巧禾數位

股感網站 (切版+js)

網站連結 

SCSS + Javascript 依照輸入的年齡切換圖片,並進入下一步

相關技術: 

  • SCSS
  • jQuery
  • javascript 

巧禾數位

股感網站 (切版+js) 

網站連結 

SCSS + Javascript 左右按鈕&控制點&左右滑動&左方三個 card click 觸發 slide 

相關技術: 

  • SCSS
  • jQuery
  • javascript