薛少康

於資策會前端班的專題發表中使用 React 製作遊戲頁面與客服機器人的功能,我從這次的過程中,發現自己滿喜歡靠程式創造東西的。
在接案公司的期間,我經歷多個專案的頁面切版,從大學系所官網、銀行行銷網頁到政府交通部徵稿頁面 。
目前任職於方碼科技,負責維護活動設定的後台、報到的平台,與製作抽獎系統。
上班之餘偶爾做些小作品,豐富自己的眼界與經驗。 

  手機 : 0987-121-908

SIDE PROJECT



HANGMAN 猜字遊戲   

1. 結合 canvas 畫出多樣性的圖形。

2. 製作提示與重玩一次功能讓遊戲更完整。 

3. 將重複性高的指令包在一個 function,方便未來修改或呼叫(像重玩一次的功能)。





刮刮樂

藉由刮刮樂的每日遊戲獎勵,提升使用者對網頁的黏著度。我使用了Canvas 的重疊效果,來製造把銀漆刮去的感覺。在參考網路其他人的作品後,我發現有些還沒有刮到字,就會直接顯示結果,所以我有在這塊多做琢磨,我將條件改為刮到文字的80%,才會將其餘部分直接顯示出來,而這部分語法也是我學到較深刻的。



井字遊戲(結合socket實現即時對戰)  

1. 結合React 的 state 與 socket ,將狀態能於前端後端互相即時傳遞

2.使用狀態去控制遮罩 ,使點擊事件無效 ,讓玩家可以知道現在換誰,實現兩人對戰的感覺

3.將前端發布在 netlify ,而後端的 nodes 發布在 heroku


麥當勞(切版)    

使用Bootstrap切出RWD的網頁。

核心工具 : Bootstrap CSS


文華東方酒店首頁(切版)      

手刻方式切出網頁,使用flex來做出跟原網站使用margin或padding不一樣的寫法。

動漫人物(CSS)        

綜合CSS中的clip-path 絕對定位堆疊元件。

核心工具 : CSS

記憶力翻牌

使用CSS中的3D效果製作翻牌,藉由兩次翻牌判斷是否一樣,結束遊戲。

核心工具: jQuery   CSS

填字遊戲          

1. 拖曳時利用data傳遞我所挑選的英文字母到左邊的空格區。使用拖曳資料傳遞的語法,讓我不必製造新的變數來記錄,節省效能。

2. 為營造手電筒照亮的效果,監聽鼠標的位置,並使用了CSS的background屬性,而此語法中的xy值皆為相對黑色圓形位置,所以一開始使用了offset,然而卻碰到offset會吃到所有子層相對位置的問題。最後使用getBoundingClientRect解決該問題。


備忘錄         此作品deploy至netlify

此備忘錄使用react來製作,輸入框會在使用者未輸入任何字就送出的情況下,紅字提醒無法送出,利用localStorage儲存備忘的事項以及完成的時間,待完成製作完成與移除的按鈕供使用者自由確認或刪除。完成時間部分,當天會顯示幾秒前、幾分鐘前,或幾小時前。之後則是直接顯示那天的年月日。

 工作經歷

Dec 2022-Now

前端工程師

方碼科技有限公司

  • 架設抽獎網站
  • 活動網站萬人報到執行速度加速10倍
  • 維護更新活動平台

June 2022-Nov2022


前端工程師

百岳國際股份有限公司

  • 參與清大、政大、交通部網路徵稿、露營電商平台等等的網站切版,
  • 處理前台部分的 issue (例如: 跨瀏覽器相容 、 優化 SEO、頁面互動效果改寫) 

Nov 2020-Nov 2021


行李員

台北文華東方酒店 Mandarin Oriental, Taipei

  • 製作PPT幫助其他行李員複習與出題,出於客人的多樣性,我在題目中統整不同的情境能怎麼處理,並從同事的回應中確認他是否聽懂。

Apr 2018 - Apr 2019

門市人員

台灣屈臣氏個人用品商店股份有限公司


學歷

2015 - 2019

私立大同大學

電機系

技能


  • PowerPoint
  •  jQuery
  • CSS / HTML5 / Javascript
  • MySQL
  • Node.js
  • React.js

語言


  • English — 進階 (多益 765 分)

自傳

我是薛少康,畢業於大同大學電機系。2021年11月開始學習寫網頁的技術。

於方碼科技的期間,我負責維護活動設定的後台、報到的平台,與製作抽獎系統。

1. 活動報到平台在應付萬人以上時,處理速度時常需要等10秒左右,將前端儲存的資料改為使用 ES6 Map 後,在取得或改變資料的速度上有改善,網站執行速度加快10倍。

2. 抽獎系統在設定部分,讓每個獎項可以用多個條件去篩選出抽獎者,並為了在中途離線的情況下依然正常操作,利用Redux Toolkit 將資料統一管理並存於本地端;抽獎主頁為了讓畫面上的中獎列表能使用鍵盤向下滾動列表,接觸到 tabindex 的屬性,讓元件可藉由鍵盤focus,不必使用滑鼠往下滾動視窗。

在資策會前端班的課程中,期末專題我們做動物園網頁,而我負責遊戲部分與客服機器人。

遊戲部分我製作了每日刮刮樂、大家來找碴還有冷知識4選1。

1. 刮刮樂使用到 Canvas 的技術,選擇 globalCompositeOperation 工具,監聽使用者滑過的地方變得透明,來創造刮去銀漆的特效。

2. 大家來找碴藉由 localStorage 存取關卡,並且有倒數計時器的功能,其中我印象較深刻的是提示功能,利用陣列與狀態處理尚未選取的正確位置,並隨機選一個給予使用者協助。

3. 冷知識的部分,從資料庫隨機撈取10題,記錄玩家答題的選項並檢討,提供給對題目有興趣卻忘記當時答題情況的玩家,更好的使用者體驗,另外還有點數獎勵制度提升遊玩意願與購物的機會。

另一個客服機器人,畫面採用模擬類似 Line 對話框的風格,功能上包括自動關鍵字回覆、快捷選單,除此之外,還有1對1專人客服。

1. 自動回覆功能取材自台北動物園的常見 QA ,並儲存在資料庫中,當使用者輸入完問題後,到資料庫撈取回答即回傳至前端對話框。

2. 快捷選單是我常看到其他網站的客服機器人最重要的地方,所以我在選單中設計幾個增進使用者體驗、讓操作更順暢的功能。其中訂票功能可以直接在選單內呼叫 Redux,把商品加入購物車。另外我撈取政府的 API 做1週天氣預報,統整了日期、圖示、降雨機率、平均氣溫,做成卡片。

3. 1對1專人客服,在老師提到 webSocket ,和參考Line的獎金獵人比賽第一名的作品後,我腦中就有這想法了。為了實現這功能我使用到 Socket.io ,因為這不包含在課程中,於是我先跟著官網的教學做,但它是不分房間的多人對話,而我想做到的是分房間的1對1的客服對話。因此仍需判斷不同使用者與客服之間傳遞的對話,不能混淆不同房間對話,其中最難的地方,怎麼把使用者與房間綁在一起,是我覺得相對具挑戰性的,也逐漸對socket的技術有更多的興趣與想法。


Powered By CakeResume