Frontend Engineer

電話:0926266959

Email : [email protected]

黃彥銘

    Frontend Engineer |  積極負責 | 團隊合作 | 抗壓性高 | 學習力強

應徵職位:前端工程師

工作地點:台北、新北

從小喜歡參與公共事務,參與過兩次輔選活動,曾擔任青年部實習計畫北區幹部,也有自己經營電商的經驗,想要擁有另一個領域的專長,以增加自己實力,透過資策會的課程熟悉HTML5/CSS網站設計、應用Bootstrap加手刻切版,運用Node.js、Mysql結合Javasript、React、Bootstrap完成簡易前後端串接,持續保持熱忱,精進自己有關前端工程師的各項技術。

     

技能

程式語言


前端

  • HTML/CSS
  • Javascript
  • React/Vue

JavaScript


  • 使用 JavaScript 基礎語法
  • 了解 ES6 語法

React


  • 熟悉Hook使用
  • ReactRouter路由管理
  • SPA 單頁式網頁製作
  • 熟悉 component 使用
  • 了解 React 生命週期

Web Layout


  • 使用 HTML5 / CSS3 網站設計
  • 使用 RWD 響應式網頁設計
  • 使用 Bootstrap 4 / Tailwind 規劃網頁
  • 使用 SCSS 規劃網頁

後端


  • PHP
  • MySQL
  • Node.js

Git


  • 熟悉 Git Flow 開發流程
  • 熟悉 GitHub 遠端版控

其他使用工具


  • Photoshop
  • Figma

其他技能


  • 企劃書撰寫
  • 活動規劃
  • 組織聯繫

經歷

2022/1 - 

香港商台灣邏輯媒體科技有限公司台灣分公司 

根據公司活動需求排版、處理Bug、串接API、維護公司網站

2021/6 - 2021/11

資策會前端工程師養成班

在專案中負責撰寫會員中心的部分、包含會員資料庫建置、機器人驗證、Email寄信功能、Email驗證功能、JWT驗證會員、區分會員等級、前後端資料比對、顯示歷史訂單。

前端技術:使用原生Javascript,進行註冊、登入/登出、前端驗證(RegExp)、個人資料編輯的功能撰寫,使用HTML、CSS、Bootstrap進行畫面的設計與切版。

後端技術:使用MySQL、Node.js將前端的資料傳到資料庫,並使用Node.js寫入會員、訂單、商品資料,以及後端驗證(帳號比對、加密過後的密碼比對、機器人比對、驗證碼比對)。

2020/9 - 2021/1

青年部實習計畫幹部

擔任此計畫北區幹部,管理約15人團隊,以舉辦活動為主,搜集輿情、組織聯繫、處理成員問題為輔。

2019/9 - 2020/1

立委競選團隊

參與新北市永和區選舉團隊,擔任組織部執行長,管理約10人團隊,協調與中央官員、地方議員行程、規劃共同活動,工作內容包含撰寫企劃書、活動細節規劃、主持活動、嘉賓邀請等。

2018/6 - 2018/11

市長競選團隊

參與2018市長選舉團隊,為組織部成員,曾負責規劃台北市大安、文山區行程規劃,拜訪各地方要角、安排公聽會、協助舉辦各類小型活動等。

2018/6 - 至今

自行經營網拍

自行找廠商進貨,企劃書、商品、商品照、頁面、文稿、都由自己包辦,月營業額曾連續三個月皆達8萬,受邀獲選優選賣家。

2017/7 - 2018/8

全國公信力民意調查實務實習

參與系上所舉辦民意調查實務實習,學習民意調查各階段的細節,包含問卷設計、信度、校度、問卷結果分析,以及搜集民意的過程。

學歷

2020/9 - 至今

政治大學國發所就讀中

2020年推甄錄取政大國發所,並在9月入學,未來論文題目會朝向再生能源產業的企業社會責任的面向。

2015/6 - 2019/9

淡江大學公共行政學系

在校成績優良,在學期間多次獲得系上成績優良的獎學金、農會、國泰人壽的獎學金。

2019曾參選商管學院補選議員。

2018年曾投稿大專生研究計畫。

運用React, TailwindCSS 製作作品集

(含RWD)

點擊這裡來進行觀看

在此作品集包含以下功能:

1.更改滑鼠、ScrollBar樣式。

2.監聽ScrollBar來進行許多互動動畫特效。

3.許多Hover特效。

4.NavBar隨著Scroll滾動、視窗Resize更換樣式。

5.在React實現點擊移到指定區域。

6.卡片漂浮特效。

7.冰雪模式。

8.紙飛機寄信功能。

9.開場動畫設計。

10.等您來觀看!!!

加密過後的密碼比對、機器人比對、驗證碼比對

運用React, Node.js 製作會員中心功能

在專案中負責撰寫會員中心的部分、包含會員資料庫建置、機器人驗證、Email寄信功能、Email驗證功能、JWT驗證會員、區分會員等級後端資料比對、顯示歷史訂單。


前端技術:使用原生Javascript,進行註冊、登入/登出、前端驗證(RegExp)、個人資料編輯的功能撰寫用HTML、CSS、Bootstrap進行畫面的設計與切版。


後端技術:使用MySQL、Node.js將前端的資料傳到資料庫,並使用Node.js寫入會員、訂單、商品資料,以及後端驗證(帳號比對、加密過後的密碼比對、機器人比對、驗證碼比對)。


無限廚房、VESPA官網

切版練習(含RWD)

運用Bootstrap4進行主畫面的排版,搭配手刻CSS排版,包含輪播牆、卡片,根據瀏覽器大小進行display none/block的設定,使得照片或文字不會爆版。

Navbar運用fixed的效果,可以隨著畫面移動,適當使用relative、absolute的功能,使得畫面有重疊的效果,看起來更活潑。


mamestro官網切版練習(不含RWD)

適當運用Bootstap4進行主畫面切版,該網站大量運用手刻CSS進行切版,使得Logo、圖片、文字可以重疊,包含relative、absolute、transform,不過也因為如此該網站較難實現RWD的功能。


monterose網

切版練習(含RWD)

運用Tailwind進行主畫面的排版,搭配手刻CSS排版,包含輪播牆、卡片,根據瀏覽器大小進行display none/block的設定,使得照片或文字不會爆版。

配手刻CSS排版,卡片,根據瀏覽器大小進行display              none/block的設定,使得照片或文字不會爆版。              此網站有大量使用absolute來進行排版,此外,搭配grid來進行RWD的排版設計。



運用PHP製作會員中心功能

該專案中我負責製作註冊會員、登入、個人資訊編輯的部分,包含使用者介面與後台管理者CRUD的部分。

表單設有常見regexp的前端驗證,後端也設有帳戶驗證,避免重複帳號的問題,密碼則使用hash防止SQL Injection的部分,資料庫管理者也無法看到用戶的密碼,以確保以確保足夠的安全性。

此外,會根據帳號所累積的消費金額顯示不同的等級、圖片,大頭貼另設有預覽功能,讓用戶可以決定是否更換。

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Powered By CakeResume