莊盛州

  • English Name: Samuel Chuang
  • Location : 新竹市北區
  • Education : 資策會web/app前端工程師養成班、淡江大學歷史學系
  • E-mail : samuellllllllllllll@hotmail.com

Works

1. 相片裁切工具 (React)

  網址:https://eb3pb3ey83.github.io/reactImageEditor/

  • 使用react和canvas開發的相片切割工具,可把裁好的圖片下載到電腦上。
  • 手機、平板、電腦皆可使用。
  • 有兼顧相容性,ie11/edge/firefox/chrome皆可使用。(chrome、firefox使用dataURL下載圖片,ie11、edge則用msSaveBlob來下載圖片)
  • 可自訂相框的尺寸、形狀,也可等比例放大縮小相框來進行裁切。

2. 鼎恒數位科技股份有限公司(Mayo Human Capital)招募官網 (React/Redux/ReactRouter)

  網址:https://hrm.mayohr.com/rmsportal/7E5BA886-20FF-4AF4-A663-58D15F1FD673

  • 使用react 和 redux 製作的招募網站,主要負責版型切版和後端API串接

3. 高雄美食網 (React/Redux)

  網址:https://eb3pb3ey83.github.io/KaohsiungDelicacy/

  • 使用React + Redux製作,可查詢高雄各地的知名美食店家
  • 利用 AJAX 介接 JSON 資料

4. 圈圈叉叉遊戲(無限放大版) (React)

  網址:https://codepen.io/eb3pb3ey83/full/EwdLxe/

  • 使用react製作的圈圈叉叉小遊戲,格數可依照玩家喜好無限增加。

5. 旋轉式輪播 (React/CSS3)

  網址:https://codepen.io/eb3pb3ey83/full/mpQwQL/

  • 用react和css3製作的輪播,圖片變換時會旋轉。

6. 可以抓來抓去的圖片 (React)

  網址:https://codepen.io/eb3pb3ey83/full/dJEoVJ/

  • 在React框架上用e.clientX、e.clientY來製作可以抓放的圖片。

7. Camera Store (CSS3/RWD)

  網址:https://eb3pb3ey83.github.io/cameraStore/

  • 用flex製作一個RWD相機拍賣網站。

8. 勝利首席 (Jquery/SCSS)

  網址:http:// http://victoryone.tw/

  - 用CSS和jquery做的一個建案網站,裡面做了很多動畫效果。

9. 實踐大學官網 (Jquery/SCSS)

  網址:http://www.usc.edu.tw/

  • 用CSS3和Jquery來製作的鋼筋結構圖。

10. 華梵大學官網 (Jquery/SCSS)

  網址:http://www.hfu.edu.tw/

  • 用CSS3和Jquery來製作的鋼筋結構圖。

11. 明道大學官網 (Jquery/SCSS)

  網址:http://www.usc.edu.tw/

  • 用CSS3和Jquery來製作的鋼筋結構圖。

12. 鋼筋水泥結構圖 (Jquery/CSS3)

  網址:https://eb3pb3ey83.github.io/building/

  • 用CSS3和Jquery來製作的鋼筋結構圖。

13. 瞄準動畫 (CSS3)

  網址:https://eb3pb3ey83.github.io/aiming/

  • 用CSS animation製作的動畫,父層和子層兩個走相反的方向可以讓圓圈裡的圖片靜止不動。

Career

銳綸數位股份有限公司 - 網頁設計師 (2015/09 – 2017/06)

  • 製作學校單位和建案網站
  • 使用photoshop製作版型
  • 負責網頁切版和jquery動畫製作

鼎桓數位科技股份有限公司 – 前端工程師 (2017/06 - 2018/01)

  • 參與公司新版招募網頁開發專案,負責網頁功能與資料渲染的 JS 部分
  • 參與公司人資產品開發專案,負責網頁功能與資料渲染的 JS 部分
  • 與後端合作,熟悉 API 操作與前後端的溝通

Skills

HTML/CSS/RWD/JavaScript/jQuery

  • HTML 建立網頁架構、CSS 修飾網頁、RWD 響應式設計
  • 熟悉 JavaScript,能夠運用程式邏輯編寫各種效果
  • 使用 jQuery製做動畫效果

AJAX/ReactJS/Redux

  • 瞭解 JSON、第三方 API 串聯網頁的方式
  • 使用 AJAX 與資料庫進行基礎串聯
  • 使用ReactJS 對 DOM 進行操作
  • 使用Redux 連接後端 API,了解如何對redux的state進行操作

Git/GitHub

  • 能使用 Git 在 GitHub 上進行版本管理(commit、branch、push/pull、tag...etc)

Introduction

  • 當完兵後參加了資策會的web/app前端工程師養成班,從此展開了驚奇的前端旅程。
  • 接觸網頁程式語言後,發現自己對程式語言、對這個技術快速變遷的領域感到喜愛。
  • 在我的字典裡,沒有『不可能』三個字。
  • 隨時抱持求知的渴望。假日時常去進修css、js方面的課程。
  • 想法、點子多,不斷嘗試新方式。網頁程式是能讓我好好發揮的地方。