New Taipei City, Taiwan
在鴻騰上班時第一次接觸到C語言,並產生了興趣和成就感,決心前往緯育Tibame中壢前端工程師養成班,培養個人的分析能力、邏輯思考能力及處理問題的技巧,累積了個人作品與團隊專題,下方有簡易作品集介紹,在前端程式這條道路上充滿了熱情與不斷學習新知識的求知慾。
信箱 : [email protected]
電話 : 0989996423
學歷 : 龍華科技大學-機械工程學系畢
生日 : 1994/08/15
Sonic Drink Can (音樂網站)
https://gles868.github.io/-Portfolio/index.html
JavaScript Vue.js JQuery PHP Node.js
HTML5 CSS3 SASS/SCSS MySQL Github
Illustrator Photoshop XD
緯育Tibame中壢前端工程師養成班 --個人作品最佳網站獎第一名(附圖)
緯育Tibame中壢前端工程師養成班 --個人作品視覺設計網站獎第三名
九月 2017 - 八月 2018
Taipei, Taiwan
我在精密量測實驗室單位內任職助理工程師,且擔任過4人小組組長,工作內容為用QV檢測程式去測量產品尺寸的精度,去評估產品的缺陷在哪,尺寸是否符合標準,並修改程式量測的準確度與速度提升效率,也時常與現場單位溝通,共同討論產品的量測手法是否準確,回報數據,並以機械構造圖為準去加以執行。
八月 2020 - 二月 2021
Taipei, Taiwan
學習前端網頁技術,培養了個人的分析能力、邏輯思考能力及處理問題的技巧,累積了個人作品與團隊專題,在團隊專題裡擔任組長,學習團隊合作與溝通。
課程篩選
網頁最上方有篩選區塊
網頁載入後預設為全部課程-共10門課
卡牌hover後會翻轉
卡牌背後有價位、屬性、 報名截止日期
hover顯示文字利用CSS 3D屬性打造浮雕感
網頁底塊為推薦道具輪播圖
點即可前往商城選購
可依照屬性做篩選條件
也可依照價位做篩選條件
更可以兩者搭配做雙向篩選
點擊input (radio)下方卡牌會動態切換符合篩選條件
使用PHP撈出課程資料轉成JSON格式放入Vue data array裡
(如下)
下MySQL指令
撈回所下條件
join表格
截止日期需大於當下所屬日期
取前10門課程 (如下)
Vue (Filter) 過濾器將後端撈回的資料搭配match後以資料渲染畫面。
(如下圖-)
報名流程
報名頁面帶入會員資料
所選課程之班級資料
用v-for渲染後端撈回的資料
用課程編號判定以資料渲染畫面
含有以下
價格、課程圖片、 課名、 課程介紹、 指導老師、 屬性、
開課日期
需登入才可前往報名
會員偵測判定
信用卡表單
付款方式
填寫完整且正確表單和選擇好付款方式按下確認後
下方會打印出使用者所選以及填寫的資訊,提供給使用者確認
右圖以ATM當範例
打印出
銀行代碼
轉帳帳號
轉帳金額
繳款期限(以當日後一天23:59為限)
最下方送出鈕如未選擇付款方式
會有報錯提醒
商城
相關功能
購物車
相關功能
小遊戲
小精靈下樓梯
phaser.js撰寫
遊戲規則
支援RWD
小精靈下樓梯
phaser.js撰寫
遊戲規則
首頁
首頁第一屏滿版主視覺
圖片使用重疊大小縮圖增加視覺立體感,背景聲波強調整體網站為音樂核心,簡易音樂撥放器使用position :fixed固定在網頁可視範圍右下角。
首頁
熱門音樂單曲輪播
單曲圖固定秒數後自動輪播,中間音樂圖示放大,支援拖曳滑動以及左右鍵點擊,hover後play鍵顯現,圖示變暗,點擊play鍵右下角播放器連動撥放音樂。
播放器
使用JQuery撰寫
上下首切換
單曲播完自動播放下一首
暫停功能
音量控制
播放時單曲使用GASP 圖示會模擬唱盤旋轉
音樂進度條點擊可即刻更改歌曲時間
偵測滑鼠點擊更改寬度達到控制音樂進度
排行榜
點擊歌手名字前往歌手資訊
點擊歌曲名字前往單曲資訊
滑鼠移至單曲時跳出加入歌單以及變色
背景有彩帶動態生成
當滑鼠在LEADER BOARD 文字上移動時,動態更改顏色
DJ資訊
第一屏霓虹跑馬翻轉動畫文字使用textillate.js套件
DJ hover後伸長大小顯示隱藏文字
對偽元素使用linear-gradient漸層打造霓光燈感
創作者
資訊
世界地圖上擁有歌手圖示
表達用戶來自世界各地
凸顯網站的全球性
使用aos套件
網頁載入時圖示fade in
有時間差,製造冒泡感
圖示hover後會有飄浮感恆動動畫
演出活動
第一屏video主視覺
左方地區與日期選擇器
關鍵字搜尋
滑鼠滾輪滾動視窗定點後定住
主題歌單
使用swiper套件
可拖曳滑動看更多歌單
點擊歌曲圖示一樣可右下角播放器播放
我要上傳
上傳自創歌曲
偵測介紹文字輸入限制
單曲介紹
歌手介紹
感謝您耐心的閱覽
New Taipei City, Taiwan
在鴻騰上班時第一次接觸到C語言,並產生了興趣和成就感,決心前往緯育Tibame中壢前端工程師養成班,培養個人的分析能力、邏輯思考能力及處理問題的技巧,累積了個人作品與團隊專題,下方有簡易作品集介紹,在前端程式這條道路上充滿了熱情與不斷學習新知識的求知慾。
信箱 : [email protected]
電話 : 0989996423
學歷 : 龍華科技大學-機械工程學系畢
生日 : 1994/08/15
Sonic Drink Can (音樂網站)
https://gles868.github.io/-Portfolio/index.html
JavaScript Vue.js JQuery PHP Node.js
HTML5 CSS3 SASS/SCSS MySQL Github
Illustrator Photoshop XD
緯育Tibame中壢前端工程師養成班 --個人作品最佳網站獎第一名(附圖)
緯育Tibame中壢前端工程師養成班 --個人作品視覺設計網站獎第三名
九月 2017 - 八月 2018
Taipei, Taiwan
我在精密量測實驗室單位內任職助理工程師,且擔任過4人小組組長,工作內容為用QV檢測程式去測量產品尺寸的精度,去評估產品的缺陷在哪,尺寸是否符合標準,並修改程式量測的準確度與速度提升效率,也時常與現場單位溝通,共同討論產品的量測手法是否準確,回報數據,並以機械構造圖為準去加以執行。
八月 2020 - 二月 2021
Taipei, Taiwan
學習前端網頁技術,培養了個人的分析能力、邏輯思考能力及處理問題的技巧,累積了個人作品與團隊專題,在團隊專題裡擔任組長,學習團隊合作與溝通。
課程篩選
網頁最上方有篩選區塊
網頁載入後預設為全部課程-共10門課
卡牌hover後會翻轉
卡牌背後有價位、屬性、 報名截止日期
hover顯示文字利用CSS 3D屬性打造浮雕感
網頁底塊為推薦道具輪播圖
點即可前往商城選購
可依照屬性做篩選條件
也可依照價位做篩選條件
更可以兩者搭配做雙向篩選
點擊input (radio)下方卡牌會動態切換符合篩選條件
使用PHP撈出課程資料轉成JSON格式放入Vue data array裡
(如下)
下MySQL指令
撈回所下條件
join表格
截止日期需大於當下所屬日期
取前10門課程 (如下)
Vue (Filter) 過濾器將後端撈回的資料搭配match後以資料渲染畫面。
(如下圖-)
報名流程
報名頁面帶入會員資料
所選課程之班級資料
用v-for渲染後端撈回的資料
用課程編號判定以資料渲染畫面
含有以下
價格、課程圖片、 課名、 課程介紹、 指導老師、 屬性、
開課日期
需登入才可前往報名
會員偵測判定
信用卡表單
付款方式
填寫完整且正確表單和選擇好付款方式按下確認後
下方會打印出使用者所選以及填寫的資訊,提供給使用者確認
右圖以ATM當範例
打印出
銀行代碼
轉帳帳號
轉帳金額
繳款期限(以當日後一天23:59為限)
最下方送出鈕如未選擇付款方式
會有報錯提醒
商城
相關功能
購物車
相關功能
小遊戲
小精靈下樓梯
phaser.js撰寫
遊戲規則
支援RWD
小精靈下樓梯
phaser.js撰寫
遊戲規則
首頁
首頁第一屏滿版主視覺
圖片使用重疊大小縮圖增加視覺立體感,背景聲波強調整體網站為音樂核心,簡易音樂撥放器使用position :fixed固定在網頁可視範圍右下角。
首頁
熱門音樂單曲輪播
單曲圖固定秒數後自動輪播,中間音樂圖示放大,支援拖曳滑動以及左右鍵點擊,hover後play鍵顯現,圖示變暗,點擊play鍵右下角播放器連動撥放音樂。
播放器
使用JQuery撰寫
上下首切換
單曲播完自動播放下一首
暫停功能
音量控制
播放時單曲使用GASP 圖示會模擬唱盤旋轉
音樂進度條點擊可即刻更改歌曲時間
偵測滑鼠點擊更改寬度達到控制音樂進度
排行榜
點擊歌手名字前往歌手資訊
點擊歌曲名字前往單曲資訊
滑鼠移至單曲時跳出加入歌單以及變色
背景有彩帶動態生成
當滑鼠在LEADER BOARD 文字上移動時,動態更改顏色
DJ資訊
第一屏霓虹跑馬翻轉動畫文字使用textillate.js套件
DJ hover後伸長大小顯示隱藏文字
對偽元素使用linear-gradient漸層打造霓光燈感
創作者
資訊
世界地圖上擁有歌手圖示
表達用戶來自世界各地
凸顯網站的全球性
使用aos套件
網頁載入時圖示fade in
有時間差,製造冒泡感
圖示hover後會有飄浮感恆動動畫
演出活動
第一屏video主視覺
左方地區與日期選擇器
關鍵字搜尋
滑鼠滾輪滾動視窗定點後定住
主題歌單
使用swiper套件
可拖曳滑動看更多歌單
點擊歌曲圖示一樣可右下角播放器播放
我要上傳
上傳自創歌曲
偵測介紹文字輸入限制
單曲介紹
歌手介紹
感謝您耐心的閱覽