溫宗益

前端工程師

New Taipei City, Taiwan

在鴻騰上班時第一次接觸到C語言，並產生了興趣和成就感，決心前往緯育Tibame中壢前端工程師養成班，培養個人的分析能力、邏輯思考能力及處理問題的技巧，累積了個人作品與團隊專題，下方有簡易作品集介紹，在前端程式這條道路上充滿了熱情與不斷學習新知識的求知慾。

信箱 : [email protected]
電話 : 0989996423
學歷 : 龍華科技大學-機械工程學系畢
生日 : 1994/08/15

專案

個人作品

Sonic Drink Can (音樂網站)
https://gles868.github.io/-Portfolio/index.html

團隊專題麻瓜特訓班(課程報名)
https://tibamef2e.com/ced101/project/g3/main.html

技能

Tech Stack

JavaScript Vue.js JQuery PHP Node.js

HTML5 CSS3 SASS/SCSS MySQL Github

專案功能

Sass+ CSS 規劃響應式網頁版型以及美化排版。
個人作品-使用JQuery撰寫簡易音樂撥放器。
音量大小控制、曲目時間進度條點擊控制、播放上下首曲目、曲目暫停等功能。
團隊專題-使用Vue.js前端框架撰寫信用卡表單驗證。
提醒報錯即時顯現，輸入正確自動focus到下一格input，加強使用者體驗與直覺流程操作。
表單未填寫完整或正確之防呆判定。
團隊專題-使用Vue.js撰寫課程總覽雙向篩選功能。
Vue (Filter) 過濾器將後端撈回的資料搭配match後以資料渲染畫面。
團隊專題-使用phaser.js框架撰寫進階版小朋友下樓梯遊戲。
遊戲積分可折抵商城購物折扣，有無登入會員判定。
團隊專題-使用Vue.js前端框架撰寫購物車相關功能。
使用 jQuery / GASP 達到第三方插件動畫效果。
MySQL 操作有關資料的程式，提供效率查找、修改資料。
使用PHP撈資料和存資料至資料庫。

Design Tools

Illustrator Photoshop XD

獲獎經歷

緯育Tibame中壢前端工程師養成班 --個人作品最佳網站獎第一名(附圖)
緯育Tibame中壢前端工程師養成班 --個人作品視覺設計網站獎第三名

工作經歷

工程師助理

鴻騰精密股份有限公司

九月 2017 - 八月 2018
Taipei, Taiwan

我在精密量測實驗室單位內任職助理工程師，且擔任過4人小組組長，工作內容為用QV檢測程式去測量產品尺寸的精度，去評估產品的缺陷在哪，尺寸是否符合標準，並修改程式量測的準確度與速度提升效率，也時常與現場單位溝通，共同討論產品的量測手法是否準確，回報數據，並以機械構造圖為準去加以執行。

前端程式

緯育Tibame前端工程師養成班

八月 2020 - 二月 2021
Taipei, Taiwan

學習前端網頁技術，培養了個人的分析能力、邏輯思考能力及處理問題的技巧，累積了個人作品與團隊專題，在團隊專題裡擔任組長，學習團隊合作與溝通。

作品集-團隊專題-麻瓜特訓班(課程報名)-主要負責功能

課程篩選

網頁最上方有篩選區塊
網頁載入後預設為全部課程-共10門課
卡牌hover後會翻轉
卡牌背後有價位、屬性、報名截止日期
hover顯示文字利用CSS 3D屬性打造浮雕感
網頁底塊為推薦道具輪播圖
點即可前往商城選購

可依照屬性做篩選條件
也可依照價位做篩選條件
更可以兩者搭配做雙向篩選
點擊input (radio)下方卡牌會動態切換符合篩選條件

使用PHP撈出課程資料轉成JSON格式放入Vue data array裡
(如下)

window.addEventListener("load", function () {
    let classRows;
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        app.classRows = JSON.parse(xhr.responseText);
        console.log(app.classRows);
    }    
    xhr.open('get', 'php/getCourse.php', true);
    xhr.send(null);

});

下MySQL指令
撈回所下條件
join表格
截止日期需大於當下所屬日期
取前10門課程 (如下)

<?php
     try{
        require_once("connect_ced101g3.php");
        $sql = "SELECT * FROM course a join coursetype b on a.courTypeNo = b.courTypeNo join class c
         on a.courseNo = c.courseNo join teacher d on c.teachNo = d.teachNo
            -- where endDate >= curdate()
            order by courseStartDate
            LIMIT 10";
        $allCourse = $pdo->prepare($sql);
        $allCourse->execute();
        $courseRows = $allCourse->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($courseRows);
            }
     catch(PDOException $e){
        echo $e->getMessage();
        echo $e->getLine();
    }?>

Vue (Filter) 過濾器將後端撈回的資料搭配match後以資料渲染畫面。
(如下圖-)

報名流程
報名頁面帶入會員資料
所選課程之班級資料
用v-for渲染後端撈回的資料
用課程編號判定以資料渲染畫面
含有以下

價格、課程圖片、課名、課程介紹、指導老師、屬性、
開課日期

需登入才可前往報名
會員偵測判定

 classJump(name, Price, classNo) {
  if (memNavInfo.memData.memberNo){
  // 如果有登入會員
  window.location.href =
 './registration.html';
  storage['className'] = name;
  storage['classPrice'] = Price;
  storage['classNo'] = classNo;
 } else {
  // 如果未登入，跳出提示燈箱
  alert('請登入會員');                    }
  },

信用卡表單

提醒報錯即時顯現，卡號輸入正確自動focus到下一格input，加強使用者體驗與直覺流程操作。
表單未填寫完整或正確時按確認之防呆判定。
email 卡號等格式採用正規表示法判定

付款方式

填寫完整且正確表單和選擇好付款方式按下確認後
下方會打印出使用者所選以及填寫的資訊，提供給使用者確認
右圖以ATM當範例

打印出
銀行代碼
轉帳帳號
轉帳金額
繳款期限(以當日後一天23:59為限)

最下方送出鈕如未選擇付款方式
會有報錯提醒

商城
相關功能

全部商品換頁功能
右上角購物車數字攜帶
類型切換

購物車
相關功能

商品數量加減時金額改變
總金額改變計算
刪除購物車商品
使用storage帶資料

小遊戲

小精靈下樓梯
phaser.js撰寫

遊戲規則

使用方向鍵移動角色
踩到刺生命值-1
碰到頂刺生命值-3
隨時間增加階梯數增加
吃到星星時Bonus+1
總分為階梯數+星星數
生命值歸0或角色墜落畫面時判定遊戲結束
存進點數需登入會員，有會員判定功能

支援RWD

小精靈下樓梯
phaser.js撰寫

遊戲規則

使用方向鍵移動角色
踩到刺生命值-1
碰到頂刺生命值-3
隨時間增加階梯數增加
吃到星星時Bonus+1
總分為階梯數+星星數
生命值歸0或角色墜落畫面時判定遊戲結束
存進點數需登入會員，有會員判定功能

開始前畫面

死亡後畫面

作品集-個人作品-Sonic Drink Can(創作音樂分享平台)

首頁
首頁第一屏滿版主視覺

圖片使用重疊大小縮圖增加視覺立體感，背景聲波強調整體網站為音樂核心，簡易音樂撥放器使用position :fixed固定在網頁可視範圍右下角。

首頁
熱門音樂單曲輪播

單曲圖固定秒數後自動輪播，中間音樂圖示放大，支援拖曳滑動以及左右鍵點擊，hover後play鍵顯現，圖示變暗，點擊play鍵右下角播放器連動撥放音樂。

播放器
使用JQuery撰寫

上下首切換
單曲播完自動播放下一首
暫停功能
音量控制
播放時單曲使用GASP 圖示會模擬唱盤旋轉
音樂進度條點擊可即刻更改歌曲時間

parseInt(window.getComputedStyle(player__timelineBar).width);

偵測滑鼠點擊更改寬度達到控制音樂進度

排行榜

點擊歌手名字前往歌手資訊
點擊歌曲名字前往單曲資訊
滑鼠移至單曲時跳出加入歌單以及變色
背景有彩帶動態生成
當滑鼠在LEADER BOARD 文字上移動時，動態更改顏色

window.addEventListener("mousemove", function (e) {
for (let i = 0; i < dt.length; i++) {                    
let x = e.pageX - box.offsetLeft
 - dt[i].offsetWidth / 2;
let y = e.pageY - box.offsetTop - 
dt[i].offsetHeight / 2;
TweenLite.to(dt[i], i + 0.2, {
x: x,
y: y,
ease: Back.easeOut.config(1.7)                    
});                
}            
});

DJ資訊
第一屏霓虹跑馬翻轉動畫文字使用textillate.js套件
DJ hover後伸長大小顯示隱藏文字
對偽元素使用linear-gradient漸層打造霓光燈感

.box:before,.box :after{
background:linear-gradient(235deg,#89ff00,#010615,#00bcd4);
}
.box:nth-child(2):before,.box:nth-child(2):after{
 background:linear-gradient(235deg,#ff005e,#010615,#fbff00);
}
.box:nth-child(3):before,.box:nth-child(3):after{
 background:linear-gradient(235deg,#772aff,#010615,#2196fc);}

創作者
資訊
世界地圖上擁有歌手圖示
表達用戶來自世界各地
凸顯網站的全球性

使用aos套件
網頁載入時圖示fade in
有時間差，製造冒泡感
圖示hover後會有飄浮感恆動動畫

演出活動

第一屏video主視覺

左方地區與日期選擇器
關鍵字搜尋

position: sticky;

滑鼠滾輪滾動視窗定點後定住

主題歌單

使用swiper套件
可拖曳滑動看更多歌單
點擊歌曲圖示一樣可右下角播放器播放

我要上傳

上傳自創歌曲
偵測介紹文字輸入限制

$(document).ready(function () {            let textMax = $('#upload-song-content').attr('maxlength');
            $('#feedback').html(`剩餘字元數: <span style="color:honeydew;">${textMax}</span>`);
            $('#upload-song-content').keyup(function () {
                let textLength = $(this).val().length;
                $('#feedback').html(`剩餘字元數: <span style="color:honeydew;">
 ${textMax - textLength}</span>`);
            });
        }); 