Mizu 楊濬智 (期望職位：網頁前端工程師)
優勢：能夠獨力作業、思考開發可複用的元件 。
我是積極、擅長溝通的人，對工作負責，對自己標準很高，喜歡學新技術 。 因緣際會下接觸到了程式，對程式有非常高的熱情，
喜歡思考如何優化、提高程式碼複用性，讓專案變得更好！
技能
Vue / Javascript
- Vue3 開發專案
- Vue Router 建構路由 ( SPA )
- Vue CLI 建構及管理專案
- Pinia 狀態管理工具
- components 元件拆分管理
- AJAX / JSON 串接 RESTful API
- ESLint 管控程式品質( standard 風格 )
Web layout
- Bootstrap 5 完成網站架構
- 使用 RWD 響應式網頁設計
- 使用 SCSS 進行開發
- HTML / CSS 網站設計
Other
- Git 版控與團隊協作(分支管理)
- GitHub Pages 部署靜態網頁
- Swiper 輪播
- Vee-Validate 表單驗證
- vue-datepicker-next 日期套件
- AOS 滾動視差
- Typescript (略懂)
- Webpack (略懂)
專案
專案起源
由於疫情當前，許多疫情資訊包括確診數、死亡數、藥局販售快篩數量都公告在不同地方，需要有地方能去整合資料，所以這個作品就這樣問世了。
考量到家人平常只使用手機查看資訊，比較少用電腦，所以此專案就以手機版為優先。
原先是只想做給家人使用，但沒想到後來家人分享給各自公司的同事們，並獲得他們的好評，
有幫助到身邊周遭親人、朋友，覺得非常有成就感，
也更讓我有動力持續做下去！
網站使用技術
- Vue3 開發專案
- Vue Router 建構路由 ( SPA )
- components 元件拆分管理
- 使用 mixins 拆分元件可共用部分出來
- 將常用函式拆分模組 ( ESM )
- AJAX / JSON 串接 RESTful API ( 氣象局、環保署 、政府公開平台、國外疫情網 API )
- ESLint 管控程式品質(standard 風格)
- Bootstrap 5 整合 SCSS 開發
- 使用 RWD 響應式網頁設計
- localStorage 開發收藏功能
- Git 版本控制、良好 commit 命名與管理
快篩數量查詢
- 下拉選單查詢縣市、地區藥局快篩剩餘數量
- 關鍵字查詢藥局快篩剩餘數量
- 可輸入藥局名稱或地址查詢
- localStorage 開發收藏功能，加入、移除收藏，
- 只要將家或公司附近的藥局加入收藏，下次開啟網頁，只要點擊查詢已收藏藥局，就能直接查詢。
天氣查詢
- 跑馬燈顯示天氣警報
- 查看縣市、地區的天氣、溫度、紫外線、 降雨率、空氣品質...等，並依照天氣狀況來改變天氣 icon 圖示
- localStorage 開發收藏功能，加入、移除收藏。
- 點擊已收藏的地區就自動搜尋該縣市天氣，
- 移動到該地區位置(自動展開該地區 + 高亮)
確診數查詢
- 功能提示教學 (Bootstrap Modal)
- 查詢今天、昨天、前天疫情狀況
- 可使用下拉選單查詢其他國家的疫情
- 可使用關鍵字查詢各個國家疫情 (英文)
- 關鍵字英文大小寫都可以 ( toLowerCase )
- 切換國家就更換為該國家的國旗
這個專案是我人生第一次獨自完成一個專案，我在裡面做了非常多的嘗試，也碰到了許多困難，不論是專案結構規劃、版型、套件使用、CSS 動畫、Vue Watch...等等。
但在我克服這些難題後，我才發現自己在實做中也成長不少，同時也覺得在開發的過程中是非常興奮、愉快的，雖然很多未知的東西尚未接觸過，但在查找資料、了解它、實做後直到完成它的過程是非常有成就感的！
在自己獨自完成專案後，才了解工程師的世界裡，沒有一件事情是簡單的，所以必須非常努力，才能看起來豪不費力。
- Vue3 開發專案
- 使用 Vue Router 建構路由 ( SPA )
- components 元件拆分管理
- 使用 mixins 拆分元件共用部分出來
- AJAX / JSON 串接 RESTful API
- ESLint 管控程式品質(standard 風格)
- Bootstrap 5 整合 SCSS 開發
- 使用 RWD 響應式網頁設計
- localStorage 開發收藏功能
- GitHub Pages 部署靜態網頁
- Swiper 輪播
- Vee-Validate 表單驗證
- AOS 滾動視差
產品頁面
點擊愛心將產品加入收藏、移除收藏 (已收藏產品有自己獨立的頁面)
點擊類別可做篩選 (filter)
可透過部分關鍵字搜尋產品名稱
點擊產品卡片可進入單一產品頁面 ($router.push)
加入購物車功能
購物車頁面
購物車沒商品時，會有引導客人前往購買的提示
產品輪播，持續推薦更多的產品刺激購買
購物車產品可增加、減少數量
可以勾選刪除、單一刪除、全部刪除
購物流程的添加樣式 (watch 監聽)
點選訂單編號即可複製編號碼
完成訂單頁面，點擊訂單查詢就會直接跳轉到訂單查詢頁面，並直接幫用戶貼上他的訂單編號，並且直接查詢結果供使用者查看。
自傳
個人特質
優勢：能夠獨力作業、思考開發可複用的元件 。
我是積極、擅長溝通的人，對工作負責，對自己標準很高，喜歡學新技術 。 因緣際會下接觸到了程式，對程式有非常高的熱情， 喜歡思考如何優化、提高程式碼複用性，讓專案變得更好！
轉職契機
前公司工作內容固定，我不希望一輩子工作都在做相同的事，決定挑戰自我，踏上了程式語言的學習之路，寫程式非常的有趣，可以解決周遭碰到的問題，也能做資料處理，把複雜的資料用更好的方式呈現給用戶們去觀看。
未來規劃
目前開發中使用 Vue、Bootstrap、HTML、CSS 完成專案項目， 透過自身累積的前端技能，結合對於這份職務懷有的熱情，為公司帶來貢獻，對後端技術不排斥，目前正在研究 Node.js ，讓自己成為樣樣精通的工程師！
工作經歷
作業員
CB-CERATIZIT春保森拉天時
九月 2016 - 二月 2022
- 與部門同事協調分工，在接收模仁後，依照材質去分類
- 計算模仁收縮率及尺寸後，將工單派發給師傅進行製作
門市人員
全家便利商店股份有限公司
十二月 2013 - 七月 2016
- 貨品上架、結帳促銷，與客人交流、商品諮詢
- 處理各種突發狀況，臨場反應
麵包師
維也納烘焙坊
一月 2010 - 九月 2011
- 與師傅合作、溝通分配工作項目
- 麵團製作、整形、 發酵、裝飾、烤焙
調酒師／吧台人員
美食達人股份有限公司(85度C)
七月 2009 - 九月 2011
- 與客人互動、交流、點餐、接訂單、飲料製作、包蛋糕
- 開班表、處理每日報表、處理客訴
