The people who are crazy enough to think they can change the world are the ones who do."

By Steve Jobs
jeff.jpg

王建傑 Wang Chien-Chieh

 (+886) 916958529   
新北市汐止區 Xizh Districti, New Taipei, Taiwan

Front-end Developer, EDM, Surfing, Fitness


   Education

  •   臺北市立南港高中- (2008~2010)
    Taipei Municipal Nan-Gang Senior high school, Taiwan.

  •   SMEAG語言學校- (2014~2015)
    Study Abroad, English Training Center, Philippines. 

  •   私立大同大學-資訊經營學系 (2010~2015)
    Bachelor's degree ,Department of Information      Management ,Tatung University, Taiwan.

tw-taipei-nksh.jpg sme.png Ttumark.jpg

   Skills

開發環境 DE:
  Mac os、Sublime Text、Webpack、NPM、Babel、Chrome DevTools
使用技術 Technique:
  HTML5、CSS3、JS、jQuery 、 Bootstrap、 RWD、React、React-router、Flux、Redux、ES6
版控工具 Revision control:
  Git、Github、SourceTree
語言能力 Language Skill:
  IELTS (average 5.5)
其他 others:CCNA


   Experience


大同大學資訊經營系學會-資訊組組長, 08 June 2012 - 2013

主要負責系學會內資訊設備的架設及迎新宿營影片的剪接製作。

Ttumark.jpg

HEIMAVISTA黑快馬-暑期實習,  July 2013 - Sept 2013

協助公司網站的維護,需求文件的撰寫。

HV-p.gif

巨匠電腦-CiscoCCNAX網路工程師認證班, June 2014 - Sept 2014

學習Switch與Router的運作原理與組態設定以及區域網路、廣域網路的基本原理。

ccna.png

Digital Plus 數碼數位-Front-end Intern, April 2015 - Sept 2015

實習內容:輔助執行企劃與後端團隊討論,及負責前端的開發和網站的維護,並與設計師做協調。    詳見作品欄

114.png

Reactjs.tw - 社群小聚 8, 24 June 2015

樂天實戰經驗 與 桌面程式開發。

下載.png

Will 保哥實戰課程-AngularJS 開發實戰:新手入門篇, 02 Aug 2015

AngularJS 觀念與架構 基礎開發入門。

AngularJS-Shield-200x200_original_large_large.png

Node.js Party 分享會 -JavaScript fullstack Test flow, 6 Aug 2015

分享E2E測試的相關經驗。

ㄍㄟ.jpg

黑客松台灣-第十屆, 15 Aug 2015

參與活動及工作坊。

黑客松.jpg

COSCUP 2015 React/Flux 入門-Jeremy Lu, 22 Aug 2015

由Jeremy 大講授入門React該注意的事項。

150329150418_coscup-logo-512_promote_promote.png

Will 保哥實戰課程-JavaScript 開發實戰:核心概念篇, 27 Dec 2015

 講授JavaScript 程式語言中重要的觀念與特性及一些新手容易發生的錯誤。

js.jpg

Will 保哥實戰課程-Git 版本控管實戰:新手入門篇, 23 Jan 2016

講述Git 基本版控流程、基本版控命令和Git 圖形化介面工具。

git.jpg

CTJS -中台灣 JavaScript Conference, 25 June 2016

第一次現場參與的大型技術分享會,由台中前端社群主辦。

ctjs.png

原生JavaScript程式設計進階班:飛肯設計學苑, 19 Nov - 10 Dec 2016

講授有關JavaScript 的一些進階觀念(prototype, design pattern ,ES6 ....),講師:林儀泰老師

images.jpeg

JSDC - JavaScript Conference, 22-23 Oct 2016

台灣JavaScript 開發者年會,是我今年來第二次參與的大型技術分享會,主義議題圍繞在react, react-native, vue等...的javascript框架上,比較印象深刻的是在講universal javascript的那場,提到了很多相關的know how。



jsdc-2016.png

LiTV 線上影視  - Front-end engineer  , 12 Sept - 31 Dec 2016

負責專案的切版、網站的維護、功能的模組化、設計師協調UI&UX、接後端的API

使用的技術上主。    詳見作品欄

photo.jpg

   Works

螢幕快照 2016-07-23 下午6.02.58.png
螢幕快照 2016-07-23 下午6.02.46.png

系上專題實作

和系上同學合作開發的畢業專題,為期三個月,本人負責遊戲內 容的規劃及實作、Google Map API&JSON的串接。

實務上,使用 Java去實作外部的Android介面,再透過Android SDK提供的Webview去完成主遊戲程式和API的串接。


使用技術 Technique:
HTML5(template) Javascript(遊戲邏輯)
Google map API(地圖資料串接)

Android API(外部介面&內部嵌套) 

JSON(資料串接)LocalStorage(存擋紀錄功能)


iApp 自媒體平台

由一位設計師一位PM及兩位後端人員和我(前端)組成的五人團隊,進行為期五個月左右的開發,圖示為初期的Beta版本。
原則上,先由PM跟設計師討論出整體設計風格及樣式,再由前端工程師(我)切出template給後端,然後再根據需求加上樣式(CSS)及效果(JS),並串接後端提供的API。

使用技術 Technique:
前端 Frontend:
HTML5(template)
CSS(介面樣式、轉場效果)
jQuery(選單、按鈕)
masonry.js & infinitescroll.js
(瀑布流效果)
Bootstrap (RWD)
後端 Backend:
ASP.NET(Beta版), Node.js
版控Revision control:Git、Github

螢幕快照 2016-07-23 下午5.54.23.png
螢幕快照 2016-07-23 下午6.16.04.png
螢幕快照 2016-07-23 下午5.59.15.png
螢幕快照 2016-07-23 下午5.59.15.png

Jeff-Markdown-Slideshow

這是在服役期間利用勤餘的時間所做的side project,也順便練習下這陣子所學的React.js。
實作上,分為SlideShowApp Component(Parent)及LivePreview,SlideShowButton Component(Child),元件之間的溝通則是在Parent Component 中用state追蹤資料的狀態,當發生異動時再透過props傳給Child Component,接著利用React Lifecycle API和外部Library去完成LivePreview和Slide的功能。

使用技術 Technique:
Bootstrap(介面樣式&Grid System)
React(template&邏輯)Babel(轉譯ES6語法)Webpack(模組整合)
npm(外部模組的引入)express(Server)
Git(Github)
Showdown.js(轉譯markdown語法)
Remark.js(輸出Slide)

LiTV 線上影視 

這是一個由純javascript寫的alert module,因為公司網站的架構慢慢變大,因此有很多功能和視圖就需要切出來另外做模組化,以便好維護和日後的擴展。

以不同的面向去思考前端工程,重新認識了OOP, 學習到用封裝、多行、繼承和抽象化的概念去重新設計。

實作上,在一開始先把view append到Document Fragment (虛擬的DOM tree)中,並且select 出需要的DOM element儲存在變數中,在呼叫show的接口時,再把Fragment append到要render的DOM element中,架構的設計採用的是revealing module pattern的方式,只return要公開的方法,把不必要公開的方法用匿名函式的特性隱藏起來。

使用技術 Technique:
Only  JavaScript and a little bit css3, html5.

螢幕快照 2016-12-25 下午3.18.07.png螢幕快照 2016-12-25 下午3.30.04.png
螢幕快照 2016-12-25 下午3.16.57.png
螢幕快照 2016-12-25 下午3.17.08.png
螢幕快照 2016-12-25 下午3.17.53.png
Powered by CakeResumePowered by CakeResume
Powered by CakeResumePowered by CakeResume