mvgwf9yunjbo4skmaw3w.png

鍾維聖 FlyC

          

La vie est drôle

人生很有趣

  關於我

個性隨和、帶點幽默,

喜愛音樂與動漫、還有那種可能一生中都用不到的冷知識


連學生時期一併算入已踏入前端領域逾 8 年, (2015起)

漸漸理解到只要專精一項、要上手其他的項目也不會太難的那種程式浪漫。

對於前端技術這些年來的爆炸性成長感到心累的同時、也覺得自己非常幸運能一直跟著趨勢往前走。


以前熱衷於在前端分享平台 codepen 上發表作品,

累積至今也有些點閱破萬破千的成果。

近年隨著工作上的技術分離,對於純動畫效果展示的作品產量雖不如以往,

但也因此在以純功能性質為主、重視設計架構與效能的專案開發有了非常大的進步。


-

過去的累積必定會在未來找到它的歸屬 

如今也在為了解決生活中的小事而寫著程式

聯繫我 Contact Me
  [email protected]
+886 956639361 

  技能欄 Skills


 HTML

從無框架的原生事件綁定開始打起的硬底子
靜態編輯與組件化等
各式選擇器的應用與追蹤應用


 CSS

使用SCSS,

最近開始嘗試 windicss



 Javascript

 專精

包含ES5 與ES6

熟悉模組化與異步請求

熟悉純值與記憶體位置的概念

原型練, prototype和閉包等相關知識

各式Worker, storage與瀏覽器除錯等

 框架與套件 Frameworks & Packages


 Vue / Nuxt

 專精 (vue2)

含SPA 與純靜態 Vue.js

有 vue2 與 vue3 的開發經驗

store 使用 vuex 與 pinia 的經驗皆有

Webpack、Vite 的調適經驗等


 React

學習中

頂著 vue 的知識學習的第二個前端框架。


 其他

pnpm、axios、moment、lodash、elementUI、sweetalert、json-server、ChanceJS、socket.io

...等使用經驗

 輔助工具


 Git

 專精

熟悉各大版本控制流程與操作指令

熟悉 submodule 與 worktree 的使用

熟悉各種復原機制的步驟與場景

搭配部署相關的狀態重整與 gitlab CI/CD 腳本撰寫經驗

講師相關簡報


 終端機Shell

使用的 shell 為 zsh

開發各式指令工具利於操作控管機器服務

撰寫各式場景、各種產品的部屬腳本

因應技術債限制而撰寫的客製化流程

搭配 Docker 與 nginx 作服務建制等


 Docker

搭配 gitlab CI/CD 撰寫 Dockerfile
開發部署用的 docker-image
純功能性 docker-image 建置等

  參與專案/產品 Participate Project


樂透彩券

短時間請求次數非常高的產品

因應多種玩法而衍伸的程式碼複用性與維護和修改的彈性性為重點


體育彩券

因應短時間內的大量賠率更新,
在 socket 的收發與渲染效能的調適上多有著墨的專案

行銷站

為了增加曝光度而生的各種推廣用網站。 除了吸眼球的大量資料以外, 同時也提供外嵌式的部落格小工具程式碼增加推廣力度。


代理系統

金字塔式的層層代理系統。
每一層要往下繼承的項目處理與往上累積的利潤計算。

複合式入口網站

結合了上述如彩券、體育和代理系統的入口網站,含處理各子專案間的獨立打包等與該如何複用與 MVC 和 SPA 的套件等。

串接其他第三方電子遊戲等也在此處。


後台報表系統

各種專案的後台系統。
包含了轉帳許可申請、統計圖表、前台網站設定和各種權限樹狀管理等

各式專案打包腳本

結合 Jenkins 組態參數傳遞

實作了部分區塊更新、打包資源的共用與快取、最小人力的自動化與客製化錯誤補捉等


快閃式活動網站

因應各大節日而生的快閃式活動網頁製作。 含抽獎系統與簽到登入活動等。

  大事記 Experience

天堂遊戲 - 前端工程師 2017.09 - 2022.05

Served as frontend research developer of Paradise-Soft Company

  • 舊有專案維護與重構
將舊專案的 knockout 轉換成 vue,
同時也逐步將 Golang 的 MVC 框架改成 SPA 前後端分離
  • 各層級快取機制的建立與優化
快取住單一專案沒有異動到的部分
透過客製化的 hash 快取資源檔,同時也因應會日漸成長的容量做機器資源整理
  • 複用性規則制定與原型創建
根據常用的新舊子組件創建專屬的建構子做出規範的同時維持擴充性,
藉此提示下一個工程師不會誤用此組件等
  • 版本管理與包布板機制創建
因應各個專案客製化打包流程,且規劃組合專案的打包順序與快取方式。
同時也有在災難發生時的快速回滾機制
  • 新專案的規劃與建置
產出雷同專案架構下的基本雛型後交付給其他組員後續開發。
也有將舊專案的流程逐步統一成新架構
  • 極大數量元件的畫面效能規劃與處理
處理舊有專案上不合理的渲染方式與程式碼編排,
大幅度提高渲染效率和程式碼的可讀性
  • Git 和 Javascript 講師

風尚數位 - 前端工程師 2016.10 -  2017.07

Served as frontend research developer of FashionGuide Company

  • 活動案切版與串接 api
因應各個節日創建該節日的活動案網站
  • 舊版網站程式碼維護與重構
社群網路群雄並起、前端技術爆炸成長的開端,網站改版刻不容緩
  • 單一功能性 function library 製作
為了讓下次專案能更順利,自己幫自己種樹,自己在自己種的樹下乘涼
  • 新技術研究與實作
公司有新想法,先遣隊的探路是必需的

課程前端講師 2016.09 

html, css, javascript 基礎概念

台北市立大學 2011.09 - 2015.06 

獎項: 社群網路小組競賽第一名

助教: 網路課程前端助教

實習: 痞客邦 (half year)

  作品集 Projects

Paragraph image 03 00@2x a10257c22ab8b43ba541f7170ecfbbafea76718648ab6504b9015d9950ed2250

Floating Dream 

作品集的集結作品

透過 scss 的迴圈快速定義基準點

再使用 parallax.js 做出漂浮的感覺


Floating Words 

計算歌詞裡每個字的出現頻率決定文字的大小和速度、藉此營造出景深

Paragraph image 02 00@2x cb1a9cce8ec2420576e7f93d4a97d2663cb38d3060b7943702140d7f6da9f81e

Paragraph image 03 00@2x a10257c22ab8b43ba541f7170ecfbbafea76718648ab6504b9015d9950ed2250

SVG Customized Polygon Layout 

透過傳入 json 格式的資料做出客製化的多邊形 layout

也可以透過修改參數來改變線的粗細、顏色等



Rainbow Fall 

透過判定文字的位子來決定文字的顏色

且透過計算與滑鼠間的距離決定其文字的加速度方向

Paragraph image 02 00@2x cb1a9cce8ec2420576e7f93d4a97d2663cb38d3060b7943702140d7f6da9f81e

Customized Snowflake 

客製化雪花

透過調整邊的個數、長寬、切割術等做出獨一無二的雪花

還可以調整旋轉的速度營造出特別的動畫

Powered By CakeResume