樂台計畫官方網站是以 Nuxt 建構的 SSR 形象網站。在此專案我負責的項目，包含定義網站架構與規格、UI/UX 設計、開發與部署。
關於《樂台計畫》平台詳細介紹請見MCIP CMS。
緣由
樂台計畫在初期並未規劃官方網站，但隨著規模逐漸成長，有越來越多人與音樂社團對我們感到好奇，這讓我們重新思考品牌形象的建立與加強推廣。為了能接觸到更多群眾，讓更多人可以透過 Facebook 粉絲專頁以外的管道來認識我們，遂開始著手官方網站的構思。
舊版網站
在原本的前期版本，網站的定位只是一個陽春的入口網站，用來引導使用者加入樂台計畫 LINE App。因此當時是朝著單頁式網站的方向來設計，畫面上也只放置了 QRCode 等必要資訊。
為了盡快的製作出 prototype，當時選用 Parcel 這個易上手的打包工具。只要設定好進入點，它就會自動分析所有相依的資源，並自動封裝成 bundle，也省去很多繁複的手動配置。
以 Nuxt 重新架構
隨著網站的內容的不斷擴充，逐漸加入了「合作院校」、「聯絡我們」、「最新消息」和「FAQ」等區塊，我開始思考該如何優化網站 SEO，於是在後期決定採用 Nuxt 這個 SSR 解決方案，從頭開始打造新的網站。
在遷移到 Nuxt 後有許多好處，最顯而易見的就是預先抓取非同步資料，將內容渲染在頁面後才傳送到 client 端。其他像是 title、meta description 和 Open Graph 標籤等，也可以透過 Vue Meta 統一管理，一併預先渲染出來，有助搜尋引擎的爬蟲擷取頁面資料。
例如在社群媒體或是通訊軟體分享最新消息的文章時，縮圖和文章內容就能夠順利的被平台抓取，直接秀出預覽的資訊，提升使用者對連結的興趣。
部署
此專案部署在 Vercel 上，堪稱是最最無腦的託管平台。基本上只需要按照官方指南，在根目錄建立配置檔 vercel.json，接著在平台上綁定 GitHub 版本庫即可。
在預設情況下 Vercel 就內建了 CI/CD，每當任何一個分支有新的 push，它都會立即執行建構和部署，並針對每個 commit 都產生出一個預覽用的 domain，方便驗證線上的結果。
Landing Page 的 Logo 動畫
我為識別 Logo 設計了簡單 SVG 動畫，藉著操控 stroke-dashoffset 和 stroke-dasharray 屬性，僅靠純 CSS3 就能達到酷炫的虛線描邊特效。
