🌿 官網連結
🌿 專案簡介
這個專案是我進公司後第一個負責的專案，也是公司的第一個官方網站，主要訴求是可以讓業務在外向客戶展示產品以及服務項目
🌿 功能簡介
RWD 響應式設計
- 因應使用者在外展示時，使用裝置多以手機為主，因此實作 RWD 以完善手機 UI 的呈現
寄信功能
- 聯絡我：使用 PHP 實作 Email 寄信功能，並串接 google 機器人驗證，避免被惡意連續寄信攻擊
語系切換
- 可切換簡體中文、繁體中文及英文語系
API 串接
- 試玩遊戲部分與後端配合，串接 API 資料並於 UI 呈現
🌿 框架與套件
JavaScript 框架
- Vue2
CSS 框架
- Bootstrap
套件
| 套件名稱 | 說明 | 參考文件 |
|---|---|---|
| node-sass | 將.scss 檔案轉換成 css | Github |
| vue-awesome-swiper | 輪播圖效果 | Github |
| vue-backtotop | 滾動至頂部 | Github |
| vue-recaptcha | Google 機器人驗證 | Github |
| vue-typer | 打字機效果 | Github |
| vue-wow | 捲動動畫效果 | Github |
| vue-axios | 非同步工具 | Github |
| vue-meta | Head 標籤管理 | 官方網站 |
| qs | 增加安全性的查詢字串解析和序列化字串的庫 | Github |
🌿 歷經重構
身為公司唯一的前端，在接收到任務時，只想著用最快、最熟悉的工具去完成專案。因此在實作此專案的第一版本時，使用的是單純的 HTML, Css 及 JavaScrip。
隨著前端框架的興起，嘗試瞭解並學習後，公司決定以 Vue 作為未來前端專案的主要框架。而為了方便專案管理，統一所有專案使用框架，因此對官網重構，將架構轉換為 Vue。
第一次使用 Vue 完成一個專案，一邊在網路上尋找教學一邊實作在專案中，遇到問題時也只能靠自己尋找答案，看到專案能夠正式上線，雖然過程中覺得辛苦，但這些都累積成了經驗，讓我在執行接下來的專案時，能夠更得心應手。
🌿 UI 設計
由於公司屬於新創階段，並沒有 UI 設計師的職位專門設計版面，因此從整體架構、 UI 版面、色系規劃，都是由一人主導並實作。
選擇 #EBC55D 作為主色，除了是呼應「Golden」，也意涵著與我們合作，將會帶來財富。
利用在 Sketch 繪製的 Mockup，與主管討論 UI 呈現及色彩規劃，在來回修正後，最終定案並進行實作。而隨著 Figma 興起，為了方便團隊共同編輯，則逐步把檔案轉放到 Figma 平台上。
