Hello, I'm Hazel I'm a Front-end Developer

Discover My Works

Things About Me

 自我介紹

我是一個不安份的化學工程師, 熱愛學習, 喜歡挑戰, 用開放的心態嘗試不一樣的新事物。 在經歷一波又一破壞式創新後, AI崛起, 大數據當道, 虛擬貨幣成為現實。 實在是不想錯過這場世紀洪流, 真心希望擠身這場全球運動, 所以乾脆放手一博, 在2018年7月遞交辭職信, 經歷了一個月的調查與研究, 我決定從前端著手, 現在是一個充滿熱情, 擁抱技術, 享受解決問題的前端工程師。

具備的能力/擅長的技能

解決問題的能力, 多年的理工科學習背景使我成為一個訓練有素的化學工程師,這讓我具備工程設計與解決問題的能力, 擅長問對問題, 找資料, 能夠在面對未知的問題時, 有系統的分析與拆解問題, 再透過歸納與重整問題找到解決方案. 英語能力: 多益成績: 910/990(聽力:490 & 閱讀:420), 中文能力: 母語. 程式技能如下. -->

To See My Resume →
me1 me2 me3

Skill set

Language

熟悉 HTML5 & CSS3,能夠解決跨瀏覽器的相容性 熟悉 CSS framework,如 Bootstrap / Semantic UI 能以 SASS 撰寫更好管理的程式碼,使用 Emmet 快速建立html架構 使用 BEM 命名規範讓網站架構一目了然 熟悉 flexbox, RWD 的切版方式, 熟悉 JavaScript (ES6)

Framework

對 Express.js 有基礎概念 (MVC) React.js & Redux + firebase 可以註冊會員 / 登入 / 留言 / 回覆留言 / 編輯留言 / 刪除留言 / 分頁 / 紀錄登入狀況 / 密碼安全性(雜湊) / 防止SQL Injection等hack / 套bootstrap樣式 / RWD不會跑位) 熟悉使用 ajax 串接第三方api eg. 具有介接 FB Login、Google Service API 經驗

Database

Node.js / MongoDB 尚懂 Express 建立 server 熟悉 MVC 架構 使用 JWT 或 OAuth 做身份認證與授權 設計 RESTful API 與 DB 使用 Mongoose CRUD 操作 MongoDB 尚懂 Firebase

Tools

熟悉 Git flow 熟悉 Chrome Dev Tool 熟悉 VS Code 熟悉 NPM, yarn 指令 熟悉 gulp, webpack 自動化打包 使用 JSON Server 模擬 Restful API API文件閱讀能力、遇到問題會上Stackoverflow查詢並解決

Main Portfolios

 

Yelp Camp

  • Use NodeJS to write server-side JavaScript
  • Use Express and MongoDB to create full-stack JS applications
  • Use Bootstrap to create good-looking responsive layouts
  • Write Javascript functions, and understand scope and higher order functions
  • Difficulty: easy

Techniques:

MEN Stack

More Details
 

SweetTaste

  • output lists and conditional content
  • Styling of React components
  • access Http content from within React apps (AJAX)
  • Using Redux for app state management
  • Forms and form validation in React apps
  • Authentication: using local storage
  • run unit testing

Techniques:

React & Redux

More Details
 

DevConnector

  • Building an extensive backend API with Node.js & Express
  • Protecting routes/endpoints with JWT (JSON Web Tokens)
  • API testing with Postman
  • Integrating React with customed backend
  • Building frontend to work with the API
  • Using Redux for app state management
  • Testing with the Redux Chrome extension

Techniques:

MERN Stack

More Details
 

My Learning Notes & Blogs

Person on a tour
React Redux

I had the best week ever with my family

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui.

Person on a tour
Mary Smith

I had the best week ever with my family

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui.

Contact Me