2022/12
著作『WebGL — 建構網頁中的 3D 遊戲，從基礎渲染原理、光影到應用』
深智數位(2022) / ISBN: 9786267146828
延續 iThome 2021 WebGL 系列文章，使用大量範例帶領讀者學習 WebGL。除了畫面渲染的部份之外，在這本書還加入了『遊戲互動』製作教學，設計出『Catch The Wind!』航行遊戲
邱冠喻
西瓜 | Leo
台灣 台北 軟體工程師
興趣使然的軟體工程師，對資訊科技的一切事物有興趣，從電腦硬體、作業系統、網路到網站前後端、應用程式之技術
投入於 Web、前端工程，喜歡有趣的互動體驗以及創造的過程，以參與遊戲的開發為目標。
經歷
2022/3 ~ 2026/2
2021/2 ~ 2022/3
Freelancer進修、自我實現
Cogini 接案
協助 Elixir / Phoenix 專案之開發
2017/2 ~ 2021/2
五倍紅寶石全端工程師
QuickBuy クイックバイ 電商平台與手機 App
帶領團隊並協助國際客戶開發 MVP (最小可行性產品)
使用 React Native 製作 Android/iOS 跨平台應用程式，並建立 CI/CD 自動化應用程式建置節省開發者時間
後端使用 Ruby on Rails、前端使用 React 作為管理界面前端框架
『美玉姨』之入口介紹網站 (checkcheck.me)
透過 Gatsby — React 靜態網站產生器來建立，與設計師合作開發出美觀並具有 RWD, i18n 之網頁
Shopmatic 電商平台
使用 React 改寫商店、管理編輯頁面，並改善使用體驗
使用 Elixir 製作並進行零下線時間的 DB migration 轉換半百萬筆商店頁面
職涯第一個長期維護、開發的 Ruby on Rails 專案
成就 & 出版品
2022/1
優選iThome 鐵人賽 2021 Modern Web 組
主題：如何在網頁中繪製 3D 場景？從 WebGL 的基礎開始說起
帶領讀者從 WebGL 的基礎 — 畫三角形開始，到 2D/3D transform、光影效果，最後製作出帆船與海的 3D 場景
講座、課程
2021/4
ASTRO Camp 7thJavascript 課程講師
2020/12
ASTRO Camp 6thJavascript 課程講師
2020/8
ASTRO Camp 5thJavascript 課程講師
2020/8
快速打造專屬你的神手級工具：翻譯・單字卡Chrome 擴充套件工作坊講師
2020/8
COSCUP 2020ArchLinux installation workshop
2019/8
COSCUP 2019用 WebRTC 建立半分散式網路
2018/11
MOPCON 2018WebComponent & lit-html 前端開發新選擇
2018/8
COSCUP 2018全面使用 archlinux 之旅
2018/4
Ruby & Elixir Conf TW 2018Not familiar with Elixir? Let me do a simple intro in 30 minutes
2016/2
SITCON 2016客製化我的開發環境並將它開源！
學歷
2012 ~ 2016
國立中興大學資訊科學與工程學系
曾於在學期間擔任資訊社社長、學生會資訊管理人員
2009 ~ 2012
新北市板橋高中二類組
技能
前端
- Javascript / Typescript
- React / Next.js / React Native
- Three.js / WebGL
- DOM API / jQuery
- CSS / Tailwind CSS / Bootstrap
後端、資料庫
- Ruby / Rails
- Elixir / Phoenix
- Node.js
- PostgreSQL
DevOps
- Linux / ArchLinux / Ubuntu
- Git / Git flow CI/CD
- Container (Docker / Podman)
- Self-hosted Proxmox / GCP
作品集
PastLeo.me
個人網站及部落格，履歷頁面可以直接以直式 A4 列印
使用 https://astro.build/ 及 AI 搭建，並使用靜態網站生成方式佈署
查看https://pastleo.me原始碼https://github.com/pastleo/pastleo.me
帆船與海
iThome 鐵人賽 2021 系列文章帶著讀者撰寫之最終成果
用純 WebGL 實做，讀取帆船 .obj 3D 模型檔案並加入陰影、水面倒影、反光等效果
查看https://static.pastleo.me/webgl-ironman/06-boat-ocean.html
3D 太空跳棋
用純 WebGL 實做的跳棋遊戲，讓三位玩家進行對戰
使用 shader 技巧渲染星空
查看https://static.pastleo.me/webgl-practice/10-diamond-chinese-checkers.html
Unity 小遊戲 - Drifting Sailboat
2022 過年期間進行的自我黑客松，深入使用 Unity 並做出此作品
使用空白鍵或是觸控螢幕開帆乘風前進，供玩家挑戰在觸礁之前能夠航行多遠
查看https://static.pastleo.me/DriftingSailboat/原始碼https://github.com/pastleo/DriftingSailboat
鱗片球體與鏡面、陰影效果
iThome 鐵人賽 2021 系列文章帶著讀者撰寫成果之一
用純 WebGL 實做，讀取圖片 texture 作為球體之顏色、表面細節
查看https://static.pastleo.me/webgl-ironman/05-framebuffer-shadow.html
Bazaar 多人連線橫向捲軸
與大學朋友發起的小遊戲專案，透過 Websocket 與伺服器連線，接著透過 WebRTC 進行全連接形成多人連線遊戲
五十音練習小工具
使用 Vue 前端框架製作
除了有 Vue 2 傳統實做方式之外也做了 Vue 3 composotion API 版
查看https://static.pastleo.me/kana-vue原始碼https://github.com/pastleo/kana-vue
圍框框遊戲
使用 React 實作，此為女友兒時遊戲的復刻版
雙方玩家輪流選擇一個邊進行佔領
當一個格子的最後一個邊被佔領時該格便被該玩家佔領，並且該玩家得 1 分
比賽進行到所有邊、格子皆被佔領時，分數高者獲勝
查看https://static.pastleo.me/squaring-game原始碼https://github.com/pastleo/squaring-game
unamed-network-demo
使用 WebSocket + WebRTC 進行節點連線，透過 Kademlia DHT 演算法形成 p2p 網路
以房間名稱為 DHT hashing 之輸入值，不同使用者只要輸入相同房間名稱即可找到彼此
DEMO 站運用 unamed-network 提供簡易的文字訊息傳輸功能
unnamed-network-chat-ysync
提供使用者進行 Youtube 影片同步觀看、文字訊息傳輸功能
使用 WebSocket + WebRTC 進行節點連線，形成半分散式 p2p 網路
在 COSCUP 2019 以及技術文章介紹與 DEMO 此半分散式 p2p 網路而製作此專案
PopKube
使用 Elixir LiveView 製作類似 POPCAT 計數所有使用者總點擊次數，並實現即時同步功能
此專案完成了 Digital Ocean 的 Kubernetes 2021 挑戰，將 Webapp 包成 container，連同資料庫以及 load balancer 等整套系統部署到 Digital Ocean Kubernetes cluster
透過 Webassembly 執行之 Conway’s game of life
康威生命遊戲，根據一定的開關規則進行棋盤模擬並形成 Pattern
使用 Rust 實作並編譯成 Webassembly 使其跑在瀏覽器中並整合 Javascript DOM API 顯示棋盤與使用者互動
查看https://static.pastleo.me/rs-wasm-glife-20201213原始碼https://github.com/pastleo/rs-wasm-glife
hello-solidity-web
使用 Solidity 製作運作於 Ethereum 的 smart contract
在鏈上以錢包帳號為 key、讀寫對應此帳號的字串資料，來嘗試以及測試智能合約所提供之功能
使用者只需 Metamask 即可在網頁上進行操作
查看https://static.pastleo.me/hello-solidity-web原始碼https://github.com/pastleo/hello-solidity-web
