1/ 網站製作

曾參與 4 個以上新聞媒體產業的網站製作、維護或上線，透過 Nuxt.js 建立 SSR 網頁並處理 SEO 問題，採用 graphQL 介接資料，並處理頁面上的懶載入、圖片優化、頁面 cache、元件複用等各式問題。

| Readr 官網

網址：https://www.readr.tw/

配合網站改版，重新製作全站頁面樣式，並配合 CMS 搬遷，將 API 形式由 Restful 改為 graphQL。實作圖片與區塊懶載入、無限載入、skeleton 效果，提升使用者體驗。

| 鏡新聞官網

網址：https://www.mnews.tw/

負責鏡新聞官網的製作、上線與維護，串接 Youtube API、Facebook SDK、GA 等第三方服務，並實作圖片輪播、頁面快取、埋設廣告等功能。

| 鏡週刊官網

網址：https://www.mirrormedia.mg/

除了日常維護官網正常運行，也參與會員訂閱的使用者介面、會員版型開發，並透過 Firebase 與 Nuxt.js 介接 Apple 第三方驗證。

| 願景工程官網

網址：https://visionproject.org.tw/

負責網站的初期建置並參與上線過程，與前、後端同仁一起討論實作方式，建構網站 Apollo 架構、基礎 Express.js 配置，並實作文章頁各客製化區塊。

2/ 新聞專題

與記者、設計師共同推出互動性專題，將長篇幅的議題性專題、原始資料難以吸收理解的報導、或具時效性的資料，以更具互動性的方式呈現給讀者。共參與 5 篇以上的專題製作，並個別獲得 3000 ~ 30000 以上的閱覽流量。

| 青春煉獄：網路獵騙性私密影像事件簿

網址：https://www.mirrormedia.mg/projects/image_based_sex_abuse_scam/

專案細節：https://www.cakeresume.com/portfolios/cf320e

製作網頁互動，呈現鏡週刊人物組專題報導，揭露一樁受害者多達 300 人的網路性影像詐騙販售案。追蹤台灣規模最大、獲利鉅額的付費色情論壇，如何透過販售被害人私密影像盈利，對被害人造成的深刻傷害，及司法可能的改革方向。

| 失控的鐵道安全：臺鐵的改革為什麼一直失靈

網址：https://www.readr.tw/project/3/train408

專案細節：https://www.cakeresume.com/portfolios/a45b09

以捲動式影片的方式，帶領讀者深入了解太魯閣出軌事件的原因，並進一步討論台鐵整體的問題，期待避免憾事再次發生。捲動式效果採用報導者的開放資源工具，並實作多個捲動式影片跳轉的功能，並在文章區塊實作表格、第三方互動圖表及問答區塊。

| 疫苗查詢器：我什麼時候可以打疫苗？

網址：https://www.readr.tw/project/3/covid19-vaccines-tracker

與部門記者共同創建的疫苗施打查詢平台，收集各縣市的疫苗施打規則，經過逐層篩選之後提供給使用者直接方便的疫苗施打指南，並嵌入相關互動圖表作為輔助說明，不足當時尚未完善的政府查詢網站。

| 民生情報站

網址：https://www.readr.tw/project/3/taiwan-dashboard-2021

因應 2021 年夏季缺水、缺電及疫情升溫等危機，將後端搜集與清理過的資料進行視覺化，提供一目了然的即時數據更新平台。此專案與多位工程同仁合作，自己主要以 D3.js 製作電力折線圖及負責表格相關的樣式。

3/ Side Projects

在工作之餘，我積極嘗試不同的技術與主題，希望能多方探索前端應用。在使用新工具構建自己的 side projects 同時，也會紀錄心得及過程，並反饋給工作團隊其他成員。追尋自我成長的同時，享受和工作同仁一同探索與討論新技術的過程。

| 古蹟導覽地圖

網址：https://culture-site-map-next.vercel.app/

專案細節：https://www.cakeresume.com/portfolios/a87e8c

介接政府公開資料，使用可者瀏覽古蹟資訊、分布位置與現況照片，並以圖表呈現各縣市古蹟數量與種類。

| 迷霧森林小遊戲

網址：https://kjwen310.github.io/vue-games/

專案細節：https://www.cakeresume.com/portfolios/0a0675

玩家需要在限制的條件內完成三個遊戲，才能解除森林的咒語，可選擇不同的難度，帶來不一樣的結局。

| Vatta 二手風格小舖

網址：https://kjwen310.github.io/vatta-vintage/

專案細節：https://www.cakeresume.com/portfolios/vatta-2544db

「Vatta 二手風格小舖」是一個虛構的電商網站，滿足電商基本的購物車、訂單處理與商品呈現等需求。作為較早期嘗試的作品，主要練習 API 串接、基本刻版，並了解電商網站的基本需求。