Anf0hwi2r1iydwnxbztx

黃俊彰

因為工作的關係,經手過許多不同類型的案子,

從官網到後台到活動站,從簡單的切版到一些 簡單的 Canvas 效果( 2D ) ,

網頁架構上從 MVC 到前後端分離都做過


在過去我經常使用的前端框架為 [email protected],並深入學過其底層架構,

也參考該架構寫了一個日曆套件,使用 webpack 打包後發佈於 npm 中



Skills


[email protected]

  • 具 Vue 開發經驗
  • 熟悉 Vuex 資料管理
  • 熟悉 Vue-Router 路由配置


Javascript

  • 熟悉 JS、ES6
  • 熟悉 DOM、BOM 操作
  • 熟悉 Ajax
  • 熟悉 JQuery


Layout

  • 熟悉 HTML、CSS
  • 熟悉 RWD 撰寫
  • 熟悉 Sass
  • 具 CANVAS、P5 撰寫經驗


Node

  • Node 常用原生庫
  • Express、Koa 基礎


Other

  • 可用 Git 版控
  • Webpack, babel
  • 略懂 TCP/IP
  • REACT

PROJECT


Paragraph image 02 00@2x

TCCF 2021

製作筆記 | 正式站

工具與技術:

案件概述:

  • 此案是我任職於山川久也時的作品,我負責所有前端部分。
  • 這個案子是文策院的活動站,核心視覺為框線展開,以文策院提供的影片參考,並以 Canvas 來實現該效果
Paragraph image 03 00@2x

PANASONIC 資安實驗室

製作筆記

工具與技術:


案件概述:
  • 此案是我任職於山川久也時的作品。
  • PANASNOIC 需要展示他們後台資安數據,我負責整個案子前端的開發,後端是由 Panasonic 開發,這個案子走前後端完全分離。
  • 這個案子最終會用兩台電視來展示,也就是截圖中的左右邊各用一台。
  • 此案為後台系統,並無 URL 可訪問,最終效果可至製作筆記中觀看!
  • 這案子製作過程有些複雜,簡言之就是根據後端給的 API 文件拿到數據後,將設計搞上的各種特效做出來,最終套數據來將效果顯示到畫面上,詳細細節可至製作筆記中觀看。
  • 這個案子因為初期沒有 API 可以打,所以我用 Express 來模擬 API 運行整個專案

Paragraph image 02 00@2x

巧舜雪印起司祭

製作筆記 | 正式站

工具與技術:

案件概述:

  • 此案是我任職於山川久也時的作品,我負責所有前端部分。
  • 這個案子是巧舜的活動站,背景下雪即是以雪印來發想,並以 Canvas 實現
  • 這個案子我最喜歡的部分就是下雪動畫,本來設計稿是一張靜態下雪圖 fixed 在後面,後來覺得還有些時間,所以就寫 Canvas 讓那些雪動起來,結果產生了畫龍點睛的效果!!!

日曆 library

動機:

  • 這個庫一開始只是為了刻 精神時光屋的第六關 需要日曆而寫了一個自己用的庫。
  • 後來漸漸覺得可以試著開源而發展成現在這個樣子。

特色:

  • 這個庫的架構很大成分都借用了 Vue 的概念,包括 diff 、 life-cycle、use 添加插件等等。
  • 另外有一個 cmz_swBtns 參數是參考 React.createElement 的參數。
  • 很多可以自定義的 Option,讓使用者可以更彈性的使用。
  • 插件模式,讓使用者可以只導入需要的插件跟日曆本體。
  • 利用 diff 來盡可能地重複使用已存在的 DOM 節點。

工具:

  • 原生 JS,沒有其他生產依賴
  • Webpack ( babel ) 打包
插件:
  • ZZSPER:
  • ZZRPER
    • 提供選擇範圍日期功能
    • GITHUB | NPM
其他:
  • 遵守 Angular commit 規範
  • 遵守 Git Flow 管理流程


Paragraph image 03 00@2x

法國雷恩商學院官網

製作筆記 | 正式站

工具與技術:

專案概述:

  • 這個案子是我任職於山川久也時的作品,我負責所有前端部分。
  • 這個案子沒有什麼太困難的特效或需求,就是細心切版慢慢刻。
  • 這個案子是走 MVC,但是他要求跳頁前需要 FadeOut,所以我的做法是將 a 的預設動作取消,接著等 fadeOut 結束之後才手動跳頁。
  • 這個案子切版較困難的應該是首頁的RWD,因為首頁的內容都很大很滿,RWD 不太好做,我的作法是將這些東西都改用 vw 來寫,這樣就能撐比較久才換版。
Paragraph image 02 00@2x

震旦傢俱首頁

製作筆記 | DEMO

工具與技術:

專案概述:

  • 這個案子是我任職於山川久也時的作品,我負責所有前端部分。
  • 這個案子當時只有包前端切版結束就交付了,而且只有包單頁,所以上面連結是當時給客戶看效果的純切版頁面,並不是他們套過後端的正式上線網址。
  • 這個作品需要支援 IE11。
  • 因為設計稿版型的關係,這個作品我大量使用了 Swiper 來完成。

數位校園出缺勤點名系統

                GITHUB | DEMO

動機:

  • 這個專案是在火箭隊培訓時的專題報告,與我同組的後端以前是一位老師。
  • 他提出他過去的經驗而產生這個系統,例如
    • 紙本點名造成行政人員手動 KeyIn 的人力浪費。
    • 紙本點名造成資訊的不即時性。

功能:

  • 任課老師可用手機、平板、電腦進行點名
  • 導師可隨時查看該班學生的出勤狀況,並提供家長資訊以供聯絡,且可撰寫聯絡記錄以供未來查閱
  • 行政人員可查閱全校學生資訊,且可進行缺曠修改,並提供列印通知單之功能
  • 學生可查閱自身缺曠詳情與自身操行成績

工具:

  • 使用 VueVuexVue-Router 撰寫
  • 使用 SVG 做操行扣分動畫效果
  • 使用 Axios 收發請求
  • 使用 Element-uiNProgress 等第三方 UI 庫
  • 部分頁面 RWD 撰寫
Paragraph image 02 00@2x

BMW 設計徵選活動

 正式站

工具與技術:

案件概述:

  • 此案是我任職於山川久也時的作品,我負責前端第一階段開發。
  • 這個案子是 BMW 一個票選活動,它分成兩個階段,而我負責包含人氣投票、活動理念、評審陣容、徵選獎勵的第一階段開發

Front  End

2019-09  開始接觸前端

2020-01  加入六角洧杰老師於高雄所籌辦的火箭隊實體培訓

2020-06  火箭隊結訓 

2020-11  開發日曆開源 library

2021-03  任職於山川久也網頁設計公司


About Me


我是來自高雄的黃俊彰。 


最初我於 2019 年初開始接觸程式學習,最開始接觸的語言為 Python ,後來為了響應頁面的需求而開始接觸前端。

我從 2019 年 7 月開始我的前端旅程,剛好在這段期間,六角學院的洧杰老師於高雄籌辦了火箭隊實體培訓營,而我也順利的入取第三梯,並於 2020 年 1 月開始受訓。 


火箭隊在當時有前端組與後端組,各組四人,這期間大部分時間都是在自學,從切版到 JS 再到 VUE,而在結訓前一個月會開始分組專題,基本上是一個前端搭一個後端,與我搭配的後端曾經是一位學校老師,我們也因此一起產出了校園點名系統的 Demo,總體來說就是他負責提需求跟開 API,我負責設計畫面與製作,串接他開的 API 。 


在結訓之後我決定繼續自修,在 2020 年底時,我為了畫面需要而寫了一個自己用的日曆,後來想利用這個需求將自己當時腦中所學的知識做成一個開源項目,而後參考了 VUE 的底層與 API 而製作了 ZZ,包括他的 LIFECycel、Plugin、Diff 等等的概念,寫出這個開源庫也不是希望誰去使用它,而是想將自己所學應用出來,並且學習如何寫一個開源庫,包括 Git flow 怎麼跑、Git Commit 怎麼寫等等。


在寫完 ZZ 與兩個插件後,我便開始找工作,在這期間遇到了一些挫折,但也因為這個挫折而開始稍微接觸了一些 LAMP,一直到 2021 年 02 月中,我決定回來繼續寫前端,並且在 2021 年 03 月加入了山川久也。


加入山川久也後,工作上以切版為重,這也是當時我決定加入的原因,由於在學習的路上花了相當大的心力在 JS 與框架等大家較常討論的技能點上,不過覺得自己對於切版相當沒有信心,所以想到一個有很多設計稿可以切的網頁設計公司,一方面貢獻自己所學,另一方面提升自己的切版能力!


希望自己未來能繼續補足自己的不足之處,在各項專業技能上都能有更成熟的表現。

Powered by CakeResumePowered by CakeResume