薛少康

我喜歡寫小遊戲與網頁互動效果,提升使用者體驗 。在專題中使用 REACT 製作了遊戲頁面與客服機器人的功能。經由半年的磨練 ,現在的我可以獨立在3~5天內完成切版與 RWD , 成為一名獨當一面的前端工程師。

  手機 : 0987-121-908

SIDE PROJECT

刮刮樂


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


麥當勞(切版)    

使用Bootstrap切出RWD的網頁。

核心工具 : Bootstrap CSS


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

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

動漫人物(CSS)        

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

核心工具 : CSS

記憶力翻牌

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

核心工具:jQuery   CSS

填字遊戲          

製作這遊戲最大的挑戰是: 拖曳時該如何傳遞我所挑選的英文字母到左邊的空格區。我利用關鍵字查詢學到拖曳資料傳遞的語法,讓我不需使用新的變數來記錄,節省效能。

而右區塊的難題是,我必須監聽鼠標的位置,來讓該區塊亮起來,所以使用了CSS的background屬性,而此語法中的xy值皆為相對黑色圓形位置,所以一開始使用了offset,然後碰到offset會吃到所有子層相對位置的問題。經過查詢網路後,得到新的思考方式,最後解決問題。


備忘錄         此作品deploy至netlify

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

 工作經歷

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 分)

自傳

       我是薛少康,畢業於大同大學電機系。從去年的十一月開始學習寫網頁的技術,在資策會前端班的課程中,期末專題我們做動物園網頁,而我負責遊戲部分與客服機器人。                                                                                                        遊戲部分我製作了每日刮刮樂、大家來找碴還有冷知識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的技術有更多的興趣與想法。      

         在三星期的專題過程,我學會自己解決困難。在遇到 Socket.io 的分房對話問題時,我利用關鍵字查詢解決方案,或是研讀官網原文文件,並大膽嘗試符合我需求的語法。漸漸成為可以獨當一面的前端工程師。 

Powered By CakeResume