CakeResume
CakeResume Logo
Log In
Sign Up
Build your Network
My Network
Access your personal network connections and manage your contacts.
CakeResume Meet
Expand your professional network by meeting and connecting with other users.
Community
Engage with other users through discussions, forums, and networking events.
Log In
Sign Up
Portfolios
傅典洋
網頁作品集

網頁作品集

Avatar of 傅典洋.
Avatar of 傅典洋.

網頁作品集

By傅典洋
Front-end Developer
・
New Taipei City, Taiwan

網站開發與維護

曾參與 4 個以上新聞媒體產業的網站開發、維護與搬遷，使用 Next.js/Nuxt.js 建立 SSR 網站，採用 RESTful API 與 GraphQL 串接資料，並處理第三方script載入、廣告系統、會員系統、頁面元件懶載入(lazy-loading）、SEO分數優化、網站效能與使用者體驗優化、響應式設計等各式問題。


  • 鏡週刊官網
  • 網址：https://www.mirrormedia.mg/
  • 專案細節：https://www.cakeresume.com/portfolios/1da49e-738212
  • 維護以 Nuxt.js 為基底的網站，並參與搬遷計畫，將其以Next.js 改寫，將RESTful API替換為 GraphQL。
  • 完成多份技術文件，並參與制定前後端資料溝通流程，明確規劃不同情境下的前後端溝通與處理方式。
  • 解決既有網站的潛在錯誤，完成多個頁面的共用元件、搬遷會員系統、優化廣告系統與第三方script載入，並優化SEO分數、頁面效能分數與使用者體驗。
  • 政見不失憶：臺灣 2022 選舉政見協作平台
  • 網址：https://whoareyou.readr.tw/2022
  • 專案細節：https://www.cakeresume.com/portfolios/2022-fd7bed
  • 參與網站的初期開發。獨立完成單一頁面，並使用 GraphQL query & mutation 查詢、新增、編輯資料。
  • 鏡電視官網
  • 網址：https://www.mnews.tw/
  • 參與鏡電視官網的日常維護，並優化無限滾動載入邏輯，解決抓取與載入資料所產生的錯誤。
  • READr官網
  • 網址：https://www.readr.tw/
  • 除了日常維護外，更參與文章版型的開發，以滿足不同文章呈現形式的需求。

共用元件

因應團隊需求，製作具備滿足多個專案需求的共用元件，減少團隊開發成本，並提升元件復用性。

互動式專題

與記者及設計師共同合作，推出具有互動性的專題報導，以更具互動性的方式呈現長篇、難以理解的議題或具時效性的資料給讀者。參與製作三篇的專題，在專題製作完畢後，也會紀錄心得及過程，並與團隊同仁分享開發與使用新技術的心得。


Side Project

在自學前端的過程中，我也與其他團隊的成員合作，共同製作 Side project，除了磨練技術以外，也希望專案可為對特定議題帶來影響力。


  • 大家來找廠：農地違章工廠辨識小遊戲
  • 網址：https://spot.disfactory.tw/#/
  • 專案細節：https://www.cakeresume.com/portfolios/a6a0cb
  • 由NGO地球公民基金於 g0v 發起的開源專案。可辨識特定座標的衛星雲圖，在不同年份無新增建物，辨識結果將回傳至後端，提供分析與倡議使用。
  • 使用 Vue 3 搭配 Vue router進行開發，並使用Leaflet顯示衛星雲圖。使用 localstorage 暫存問題座標與回答，降低請求頻率並提升使用者體驗。
包含網站開發、共用元件製作、專題製作，與自己嘗試的 side projects。
Avatar of the user.
Please login to comment.
傅典洋
Published: Dec 25th 2023
119
7
0

Tools

nextjs
Next.js
react
React
vuejs
Vue.js

Share

Other works from 傅典洋

Cover of React-image：用於依序載入圖片的共用元件.
React-image：用於依序載入圖片的共用元件
Cover of 鏡週刊官方網站.
鏡週刊官方網站
Cover of 政見不失憶：臺灣 2022 選舉政見協作平台.
政見不失憶：臺灣 2022 選舉政見協作平台
Cover of 大家來找廠：農地違章工廠辨識小遊戲.
大家來找廠：農地違章工廠辨識小遊戲
Cover of 盡力明白身邊的年輕人： 總統候選人寫給年輕人的信.
盡力明白身邊的年輕人： 總統候選人寫給年輕人的信