Itzrnxytjihtstm6cxne

黃嘉函, Northa

喜歡前端，是因為可以親眼見證自己作品的誕生，看得到也玩得到。

前端工程師

Keelung City, Taiwan.

[email protected]

工作經歷

新芽網路股份有限公司, Frontend Developer, Mar 2022 ~ Present

Angular 開發

少部分用 React 開發

Rwwsxv2kll8wzlb6duke

Sparkamplify, Software Engineer, Oct 2020 ~ Mar 2022

- Responsibility -

SparkAmplify platform (SaaS) development and maintenance .


- Tech Stack -

Front-End:

    React, Redux, Redux-Saga,

    Next.js (SSR), Typescript,

    Styled-Components.

Back-End:

    Node.js / Express,

    MySQL, GCP/AWS.

Others:

    Git / GitLab,

    Swagger (API documentation),

    ESLint (Airbnb)

Zipstulcrvb9jv3rzuqr

歐銀數位科技, 前端工程師, Jul 2019 ~ Jan 2020

B2B 包網平台製作；主責後台管理系統的前端開發。

切版後使用 Ajax 串接 PHP(資料庫)、Java(金流) API。


平台開發之功能包含:

1. 會員/員工的身分/權限設定及管理

2. 網站內容管理 (編輯前台顯示之內容和區塊)

3. 會員層級 (類似 VIP 功能)

4. 優惠活動和回饋金額設定

5. 公告信和站內信管理

6. 儲值及提款功能

7. 會員及員工金流紀錄報表設定和匯出

8. 金流稽核功能, etc.


Zipstulcrvb9jv3rzuqr

才式創意科技, 前端工程師, Jul 2016 ~ May 2019

接案公司；主責 PSD 檔切版作業，完成後交給後端套版。

在案件不少的狀況下按照事情的優先順序去進行工作排程。

將 SCSS、模板模組化技術帶入部門使所有前端工作效率大大提升。

曾經將 "康健人壽保障規劃網" 進行樣式模組化重構，讓前端的維護時間節省超過一半的時間。


工作內容：

1. 運用 HTML5、SCSS 及 jQuery 將設計稿製成 RWD、AWD 網頁。

2. 使用 PS Resize 或是微調圖片，確保各裝置顯示正確。

3. 網頁維護更新。

4. 前端公版製作維護。


Zipstulcrvb9jv3rzuqr

技能

▲ 前端框架和 Library

React 16.8+

  • 理解 Class/Pure/Functional Component 差別
  • 理解 HOC (Higher-Order Components) 如何使用
  • 理解 Hooks 和製作 Custom Hooks
  • 理解常用生命週期
  • 工作主要使用 Funtional Component + Hooks + Hoc

Next.js

  • 製作預設或 Custom Server
  • 了解如何實現 Server Side Render, Static Site Generator 和純靜態網頁
  • 理解 Page Folder 即 Router，並且知道如何實現動態 Router (URL Path 當作 Parameter)

Vue3

Angular

Astro3

Axios

  • Axios 實體化管理 API

Styled-Components

  • props 傳遞
  • Themes 設定

Typescript

  • 理解 interface, type, enum
  • 知道如何在不同位置定義型別

Lodash

Bootstrap - Grid System

Chart.js

jQuery

TweenMax (動畫)

▲ 前端基本技術

HTML5

  • 語意化
  • 有邏輯的架構

CSS3

  • 了解權重
  • 非必要不使用 !important
  • 能適當的選擇使用 rem / em / % / px 單位
  • 可以純手刻出設計複雜的頁面

SASS / SCSS

  • 會製作 Mixins / Function 來加速開發和增加可維護性
  • 能夠分析整理出方便使用的變數(顏色、單位、動畫時間等等) 

ECMAScript

  • Hoisting, Closure, Scope / Block, 箭頭函式
  • 陣列處理 (map, filter, reduce, etc.)
  • 了解物件傳值 / 傳址概念
  • 了解物件原型的繼承
  • 理解原型鏈
  • 理解基本的設計模式 (Factory, Iterator, Decorator, etc)

▲ 工具

  • Git (terminal)
  • Git-Flow
  • 基礎 Node.js, Express
  • Create-React-App, Create-Next-App
  • 基礎 Webpack
  • ESLint
  • Prettier

作品集

卡牌蒐尋器

Projects 01 00@2x

Side Project: React 作品 (第一次嘗試 Typescript)；採⽤ CRA-Typescript Starter 作開發。
利⽤ Axios 串接 Scryfall API 來達成搜尋 + 顯示英文卡牌 + 點擊後顯示詳細中文訊息功能。
樣式採⽤ Styled-Components 處理。

Skills: React, Typescript, React Hooks, Context, React-Router, Styled-Components, Axios, RegExp, Bootstrap-Grid, Git-Flow.

2020 總統選戰大數據

Projects 01 00@2x接案: Vue 作品；使⽤ Axios 串接 API。
Chart.js 顯示圖表，方便使用者分析戰況。
Skills: Vue, Vue-Router, Vuex, Axios, Chart.js, SCSS. 

Yahoo 奇摩 - 時尚美妝

Projects 01 00@2x

才式創意切版作品。
印象最深刻的就是首頁的大 Carousel，困難點為中間的圖片和左右的圖片上下錯位；
最後解決辦法是在頁面渲染時複製一份 Carousel，調整參數並顯示下方的文字資訊後置中來達成需求。


Skills: HTML, SCSS, jQuery 

Discovery 官方網站

北藝大琵琶展活動網頁

Powered By
CakeResume