//assets.cakeresume.com/assets/contentarea/contentarea-2d64eca8dae2a1ffb31e0fb1df887bbad072c7c19734d7d30fa14884bbcc299a.css

Demo：
https://pourquoiaimer.github.io/Kaohsiung-Tourism/

Code：
https://github.com/pourquoiaimer/Kaohsiung-Tourism

作品介紹：
本網頁為六角學院『JavaScript 入門篇 - 學徒的試煉』中的最終作業之一
以高雄旅遊網提供的公開景點資料進行製作，通過下拉式選單選擇地區即可呈現相應景點。

使用技術包括
-HTML/CSS
-SCSS
-JaveScript/jQuery (捲軸滾動及監測部份)
-Bootstrap4 (方便製作響應式)

頁面功能包括：
--RWD響應式網頁
--通過切換上方的地區欄位或者點擊熱門行政區的按鈕切換該區的景點
--下方景點若超過十個會自動分頁

練習設計稿來自 六角學院 - JavaScript 入門篇 - 學徒的試煉：https://hexschool.github.io/JavaScript_HomeWork/

高雄旅遊資訊

副工程師 @ 亞旭電腦股份有限公司

董劭杰

Demo：
https://pourquoiaimer.github.io/BMI-Calculator/

Code：
https://github.com/pourquoiaimer/BMI-Calculator

作品介紹：
本網頁為六角學院『JavaScript 入門篇 - 學徒的試煉』中的最終作業之一
主要通過localStorage的方式進行資料的紀錄及取用

使用技術包括：
-HTML/CSS
-SCSS
-JaveScript(localStorage)

頁面功能包括：
--透過localStorage將BMI計算結果紀錄在本機，並可提取和刪除
--輸入身高體重即可查詢BMI
--不同健康等級有不同顏色呈現，並有紀錄計算日期
--支持單筆和全部刪除

練習設計稿來自 六角學院 - JavaScript 入門篇 - 學徒的試煉：https://hexschool.github.io/JavaScript_HomeWork/

BMI計算器

MaskMap-口罩地圖

Demo：
https://pourquoiaimer.github.io/bootstrap-final/
Code：
https://github.com/pourquoiaimer/bootstrap-final

使用技術包括：
-HTML/CSS
-SCSS
-Bootstrap-4
-jQuery/JavaScript

內容說明：
主要通過Bootstrap製作一個多頁式的網站，除使用預設的框架格線外，亦嘗試調整部份Bootstrap的設定以達到客製化的排版需求，除Bootstrap的互動按鈕外，也使用jQuery及JavaScript針對商品顯示的切換及結帳頁面的金額計算等功能嘗試進行了編譯。

頁面功能包括：
--RWD響應式網頁
--首頁可點擊"本日精選"、"人氣推薦"、"新衣上市"切換相應商品的顯示
--購物車頁面可透過按鈕調整商品數量並即時更新各項金額

網站之原設計稿來自六角學院-使用 Bootstrap 開發甜點電商：https://xd.adobe.com/spec/934efdb7-a7e4-47d5-572e-efece0914f62-e57f/grid
網站中的背景及商品圖片皆取自免費網站 Pexels及 PhotoAC

有衣天（服飾專賣）-Bootstrap4練習網頁

MaskMap-口罩地圖

Demo：
https://pourquoiaimer.github.io/MaskMap
Code：
https://github.com/pourquoiaimer/MaskMap

使用技術包括：
-HTML/CSS
-SCSS
-JavaScript (AJAX串接API)
-Leaflet(地圖框架) + OSM (OpenStreetMap) + MarkerClusterGroup(Leaflet插件)

內容說明：
依據設計稿製作口罩地圖，練習使用AJAX獲取藥局資料，並透過Leaflet、OSM、MarkerClusterGroup建構地圖，使用JavaScript搭配地圖做到各縣市及各區的藥局資料切換和簡單的搜索和定位功能。

頁面功能包括：
--RWD響應式網頁
--通過AJAX串接API獲取即時的藥局和口罩剩餘量資料
--使用Leaflet地圖框架搭配Openstreetmap圖資構建地圖
--切換左上城市欄位及區域，下方即會呈現該區的藥局資料，可直接看到成人及兒童口罩剩餘數量，並可點擊資料欄位右上角的icon，切換到地圖上的藥局位置並打開相應Popup
--左上搜索欄位可透過藥局名稱或地址進行搜索，只要輸入的文字有包含在名稱或地址中即可找到，各藥局地址首字"台"已統一為"臺"，但搜索端輸入"台"亦可搜到正確結果

練習設計稿來自THE F2E 2nd -第十關中 Wendy的設計稿：https://challenge.thef2e.com/user/2259?schedule=4452#works-4452
藥局資料來源：https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json
台灣城市區域資料來源：https://github.com/donma/TaiwanAddressCityAreaRoadChineseEnglishJSON/blob/master/CityCountyData.json

MaskMap-口罩地圖

2020年4月開始，我通過六角學院的線上課程及其他網路資源自學，從零開始累積自己的前端技術能力，並十分渴望能將所學投入到工作當中。
目前在亞旭擔任前端工程師。

六角學院-網路學習

上海大學

亞旭電腦股份有限公司

副工程師

前端工程師

主要內容為維護並修正路由器中用於調適連線設定的網頁

台灣新北市

主要負責：
1.企劃書撰寫及簡報
2.參與活動內容溝通
3.參與活動執行


栯菘創意傳播事業有限公司

活動企劃

主要負責：
1.案件裁罰：包括案件的審查、裁罰及後續可能的訴願工作，都能良好勝任，並有參與相關法條的修正及討論。
（於案件判斷中，有自行設計並使用excel中的函數簡化keyin的過程並減少錯誤）
2.裁罰案件的統計報表輸出：於系統中撈取數據並整理除錯，同時也對過往帳目進行檢查和修正，曾歸納使用經驗並對查詢系統提出部份修正建議。




分享