詹琇安  前端工程師

            

「勇於嘗試,積極學習,斜槓發展」

  在大學期間輔修設計系時,接觸到網頁設計的課程,發現近年的網頁設計趨勢,由於使用者習慣的關係,越來越趨向響應式網頁,適逢泰山職訓開設的 “前端網頁開發技術” 課程開班,便積極爭取到了上課的資格,課程進入尾聲時,我們需要獨立完成一個專題,過程中,從企劃、設計到程式執行,自己獨力開發完整網站,若遇到卡關的地方,會讓自己保持不同角度的思考方式,也會搜尋前輩們的解答,融會貫通後再來對照解決我的問題。

  前端技術新增與變化迅速,越是鑽研越是了解程式是學不盡的,也深深的了解到自己還有許多不足之處!閒暇之餘,也喜歡多逛逛各種網頁,並去研究了解網站的程式結構,及進修其他的程式知識,以期未來要用到時,能立即應用。未來,會再繼續增進各種技能,同時不斷吸收新知識來擴充知識庫,希望多元的思考方式,可以碰撞出不同的火花,並將所學融合創作不同的樣貌!

- 技能 -

前端

   Vue.js  /  Vue Cli  /  Vue Router         JavaScript        jQuery       Bootstrap       Sass        HTML       CSS

後端

   Node.js        MongoDB         express

工具

   Git 版本管理        Chrome Dev Tool    Xmind   Draw.io

設計

   Illustrator      Photoshop      Figma   UI / UX觀念

- 作品 -


   隨時記錄 - 來自一本書、一句詞、一個讓你感動的瞬間。

   方便儲存 -  紀錄讓你心動的剎那,隨時回味翻找查詢。

   便捷分享 -  立即跟親朋好友分享,創造更好的文字風景。

DTNS  - 每字美句每個你喜歡的瞬間 (個人獨立製作專題)        

  • 網站功能簡介

  • 會員可以新增文章及問題留言。
  • 會員可以修改文章及刪除自己的文章 
  • 會員可以檢視自己所有的文章。
  • 分享牆可以檢視公開的文章、並依據不同的主題文章分類。
  • 非會員僅能看到有公開分享及非下架的文章。
  • 管理員可以新增使用者資料。
  • 管理員可以下架文章及回復問題。
  • 檢視模式有黑暗模式可以選擇切換。
  • 前台使用技術  

  • 使用 Vue-Cli 開發專案 
  • 使用 Vue-Router 套件管理路由 
  • 使用 VueMaterial UI 框架 
  • RWD 響應式網頁設計 
  • 應用 components 去管理重複的元件 
  • 使用 Sass 預處理器管理 CSS 
  • 使用 ESLint 管理程式碼風格 
  • 使用 Axios 串接後端 API  
  • PWA (Progressive Web App) 設定 

 Vue     VueMaterialUI    RWD    Axios    Sass    ESLint    PWA 

  • 後台使用技術  

  • 自行撰寫資料庫。
  • 開發使用 Node.js + Express 
  • 資料庫使用 MongoDB + Mongoose 套件 
  • cors 去處理跨域請求 
  • 驗證使用 jwt 機制
  • 註冊及登入使用 Line login API 
  • 部署在 Heroku

 Node.js    Express    MongoDB    Mongoose    cors      jwt    Line login     Heroku 

Vue 番茄鐘    

  • 依照 UI 設計師稿件 規劃版型。
  • 使用 BootstrapVue 框架。
  • 使用 Vuex 儲存資料。

  Vue.js    Vuex    BootstrapVue    Pug    Sass 

Line bot - Stock.Find    

  • Open Data 資料串接。
  • 使用 Axios 串接後台及第三方 API 。
  • 使用 LineBot 套件 
  • Line Flex Message 應用呈現 
  • 使用 JavaScript 判斷式實現不同回應

 Node.js    Line Flex Message    Axios  

  木門咖啡   

  • 小組協作,配合設計稿,完成切版及功能應用。
  • 使用 Bootstrap 4 框架。
  • RWD響應式網頁設計
  • 了解並應用套件 - 導覽列、動畫、解鎖、輪播、燈箱

 Bootstrap 4    RWD    JavaScript 

  山居歲月   

  • RWD 響應式網頁設計 
  • 使用 Sass 語法撰寫 
  • 串接 Google Maps API ,實作景點介紹的功能 
  • 運用日期及表單驗證套件,建立線上訂房表單 

  RWD    JavaScript    Sass    API 

打字練習遊戲    

  • 依照畫面上鍵盤所顯示的字母練習打字,按正確的字母會加分,會依照得分的高低取得不同的成就

 jQuery    Localstorage 

射氣球    

  • 開始後,畫面各區會出現氣球,並且會隨機出現顏色不同分數較高的氣球,擊中即可得分。

  jQuery    sweetalert2.js 

天氣卡片    

  • 使用 Axios 串接氣象公開資料 
  • 運用 aos.js 實現網頁互動效果。

 JavaScript    aos.js    Axios 

可愛時鐘    

  • 運用 JavaScript 抓取即時時間,動態呈現。

  JavaScript 


- 工作經歷 -

約僱職務代理人

國立台灣海洋大學附屬基隆海事高級職業學校  •  2019.12 -  2020.12 

人事行政相關業務

設計工讀生

中國科技大學  •  2017.11 -  2019.06 

海報設計、展板設計

行政人員

中國科技大學  •  2015.02 -  2019.06

文書處理、信件收發、網頁建立及維護、零用金管理

教學助理

中國科技大學  •  2017.08 -  2018.08

教學簡報設計、資料統計、文書處理

學歷

勞動部勞動力發展署北基宜花金馬分署泰山職業訓練場

前端網頁開發技術班  •  2021.02 - 2021.08

台中市民眾技藝補習班

RWD 跨平台網頁前端介面設計實戰班  •  2019.07 - 2019.09

中國科技大學

主修 - 財務金融系 輔修 - 視覺傳達設計系  •  2014.09 - 2019.06

Powered by CakeResumePowered by CakeResume