Mizu 楊濬智  (期望職位:網頁前端工程師)

優勢:能夠獨力作業思考開發可複用的元件  

我是積極擅長溝通的人,對工作負責,對自己標準很高喜歡學新技術 。 因緣際會下接觸到了程式,對程式有非常高的熱情, 

喜歡思考如何優化、提高程式碼複用性,讓專案變得更好!


聯絡我:[email protected] 


 

   Notion 個人筆記  

   GitHub  

技能

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 監聽)

  • 點選訂單編號即可複製編號碼

    • 完成訂單頁面,點擊訂單查詢就會直接跳轉到訂單查詢頁面,並直接幫用戶貼上他的訂單編號,並且直接查詢結果供使用者查看。

以上皆展示作品部分內容,更詳細的功能,歡迎直接前往作品 DEMO 去體驗看看!

天氣、疫情查詢網 (手機優先)               /              小巷弄甜點電商( Vue 前端)


自傳


個人特質    

優勢:能夠獨力作業思考開發可複用的元件  

我是積極擅長溝通的人,對工作負責,對自己標準很高喜歡學新技術 。 因緣際會下接觸到了程式,對程式有非常高的熱情, 喜歡思考如何優化、提高程式碼複用性,讓專案變得更好!

轉職契機    

前公司工作內容固定,我不希望一輩子工作都在做相同的事,決定挑戰自我,踏上了程式語言的學習之路,寫程式非常的有趣,可以解決周遭碰到的問題,也能做資料處理,把複雜的資料用更好的方式呈現給用戶們去觀看。 

未來規劃 

目前開發中使用 Vue、Bootstrap、HTML、CSS 完成專案項目, 透過自身累積的前端技能,結合對於這份職務懷有的熱情,為公司帶來貢獻,對後端技術不排斥,目前正在研究 Node.js ,讓自己成為樣樣精通的工程師 


工作經歷


作業員

CB-CERATIZIT春保森拉天時

九月 2016 - 二月 2022

- 與部門同事協調分工,在接收模仁後,依照材質去分類
- 計算模仁收縮率及尺寸後,將工單派發給師傅進行製作

門市人員

全家便利商店股份有限公司

十二月 2013 - 七月 2016

- 貨品上架、結帳促銷,與客人交流、商品諮詢
- 處理各種突發狀況,臨場反應

麵包師

維也納烘焙坊

一月 2010 - 九月 2011

- 與師傅合作溝通分配工作項目
- 麵團製作、整形、 發酵、裝飾、烤焙

調酒師/吧台人員

美食達人股份有限公司(85度C)

七月 2009 - 九月 2011

- 與客人互動交流、點餐、接訂單、飲料製作、包蛋糕
- 開班表、處理每日報表、處理客訴

Powered By CakeResume