Rggrqakiysisqxzsapnf

劉杰

 New Taipei City,TW    [email protected]

你好,我是劉杰,正在嘗試成為一個合格的前端工程師,2020 年10月開始自學程式,目前總學習時間為五個月,總共實作了 20 幾個大大小小的實作練習,內容包含第三方 API 串接與 Ajax 、JS 與切板練習,累積了60 多篇的學習筆記在 我的技術 blog


大部份的專案從 Udemy 課程、Traversy Media Youtube 頻道取得,並嘗試自行翻閱文件解決問題,例如:想要知道 javascript 原生 API 時,翻閱 MDN 文件。想要學習 Vue.js 時,翻閱 Vue.js 官方文件。通過網路學習,嘗試自行解決問題,培養獨立思考與解決問題的能力。

曾任職健身產業,靠自主學習、訓練,考取證照且順利就職。在高壓的環境下工作(教課兼顧業績),自我提升。


Skills


Front-End

  • HTML5/ CSS3
  • Javascript/ ES6 
  • jQuery 
  • SASS/ SCSS 
  • Bootstrap 
  • Vue.js

Third-Party API

  • Money Exchange 
  • Youtube Data API 
  • Github API 
  • Weather API 
  • Joke API
  • Random User API
  • Movie API


Tools

  • Git 
  • npm
  • CLI with Windows WSL
  • Visual Studio Code 
  • Hexo (static website generator)

API Projects



Paragraph image 00 00@2x

YoutubeFinder

Demo 實作筆記 

  • 串接第三方 Youtube API  功能:
  • 透過 Youtube Search API 搜尋顯示搜尋 Youtube 影片
  • 使用 iframe 直接撥放影片並且不更新頁面
  • 換頁功能 - 透過 Youtube api 回傳的 token,來實現切換上下頁
  • 使用技術:HTML, CSS, jQuery, fancy-box, Ajax
  • 遇到的困難點:  閱讀文件找到要使用的部分、token跟按鈕配合、畫面與按鈕清理
  • 學到的東西: 理解 Google API 屬性如何使用、iframe 設定配置的方法

Paragraph image 00 00@2x

GithubFinder 

Demo 實作筆記 

  • 串接 Github API 
  • 串接 Profile API 可以取得使用者的真實資料
  • 功能: 顯示搜尋的使用者資訊、最近專案名稱
  • 使用技術: HTML, CSS, Bootstrap, JS, jQuey, Ajax
  • 遇到的困難點: 簡化撰寫變數的方式、不要呈現undefined
  • 學習到的點: 利用物件當作變數傳入、jQuery使用ajax方法、體會到Bootstrap的美好

Paragraph image 00 00@2x

匯率轉換器

Demo 實作筆記 

  • 使用 Exchange Rate API
  • 功能:轉換各國真實線上匯率並且可以輸入金額、對調金額
  • 使用技術:HTML, CSS, JS, fetch API
  • 遇到困難的點: 交換幣值的部分處理需要設置變數給其中一個交換對象而不能直接做轉換
  • 學習到的點: fetch API 的使用、值互相交換必須設置新的變數來取代

Paragraph image 00 00@2x

Infinite Scroll Posts

Demo 實作筆記 

  • 串接 假文產生(Placeholder) API
  • 功能:載入100則假文,載入時有特效,並且可以搜尋關鍵字
  • 使用技術:HTML, CSS, JS, fetch API , document 屬性: scrollTop,  scrollHeight,  clientHeight
  • 遇到的困難點: 如何讓文章滑動超過一定距離產生新的文章
  • 學習到的點: 使用animation-delay、 keyframes 來處理加載時出現的球球、設置 scroll、使用 indexOf 篩選內容
Paragraph image 00 00@2x

台灣天氣APP

Demo 實作筆記 

Paragraph image 00 00@2x

使用者製造器

Demo 實作筆記 

  • 串接第三方 randomuser API
  • 功能:可以隨機顯示不同的使用者名字、照片、信箱
  • 使用技術: HTML, CSS, Vue.js, fetch

Side Projects



Paragraph image 00 00@2x

火星氣象 

Demo 實作筆記 

這個作品的目的是串接 Nasa 的 API,取得火星的氣象資料,可是這計劃中止,因此變成切板作品
  • 呈現氣象網站的切版作品
  • 使用技術: HTML, SASS, gird, flex
  • 學習到的點: 指針的部份使用 clip-path: polygon 裁剪出三角形、transform-origin 讓三角形的旋轉是以底部的中心點轉才不會偏調

Paragraph image 00 00@2x

New Year Countdown

Demo 實作筆記 

  • 功能:倒數距離新的一年的時間、載入時間時會有載入圖片轉圈
  • 使用技術:HTML, CSS, JS, jQuery

Paragraph image 00 00@2x

音樂撥放器

Demo 實作筆記 

  • 功能:播放、暫停、換歌曲三個按鈕且當歌曲撥放時會有相關特效
  • 使用技術:HTML, CSS, JS

Paragraph image 00 00@2x

可拖曳列表

Demo 實作筆記 

  • 功能:可以拖曳物件並且判斷是否是正確的排序
  • 使用技術:HTML, CSS, JS, 拖曳Event

Paragraph image 00 00@2x

BookList App

Demo 實作筆記 

  • 功能:可以加入、刪除項目                 
  • 使用技術:HTML, CSS, JS, Bootstrap, localStorage

Paragraph image 00 00@2x

Netflix / 純切版作品

Demo 實作筆記 

  • 切版作品展示 Netflix 首頁
  • 並使用簡單的 JS 讓畫面可以切換
  • 使用技術:HTML, CSS, JS, RWD

Paragraph image 00 00@2x

Clothes Store / 純切版作品

Demo 實作筆記 

  • 切版作品展示衣服網站
  • 使用技術:HTML, SASS, grid, flex, RWD

Paragraph image 00 00@2x

十個JS小練習

實作筆記 

  • 十個不同的小 JS 效果,舉凡下雪、漢堡選單、文字跑馬燈等功能型練習
  • 使用技術:HTML, CSS, JS

Experience


2015 美國打工旅遊四個月

2019 10月透過自主訓練以及學習成為健身教練

2020/10月離職下定決心轉職工程師經由網路學習至今

Education

輔仁大學, 學士學位, 社會工作學系, 2011 ~ 2016

Language

多益成績 795分

Powered by CakeResumePowered by CakeResume