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套件
可拖曳滑動看更多歌單
點擊歌曲圖示一樣可右下角播放器播放
我要上傳
上傳自創歌曲
偵測介紹文字輸入限制
單曲介紹
歌手介紹
感謝您耐心的閱覽