歡迎，
來看看我的最新作品！
所有作品一共 23 件
Push Pull 益智遊戲
基於 Bubble Tea 打造的 TUI 益智遊戲，透過移動、推、拉、回朔等功能與場景物件互動來解謎關卡。可於終端運行或透過 WASM 運行於瀏覽器（包含手機操作）。
SVG 像素畫布
市面上缺乏輕量方便的 Pixel to SVG 繪圖工具，準備網頁使用的像素藝術素材往往需要繁瑣的轉換流程。SVG 像素畫布能直接將像素轉換為 SVG，特別適合用來繪製小型圖示或吉祥物。
- 容器化
multi-writer
基於 LiteLLM 服務與多位 AI 聊天，提出一個對話，平行比較與摘要回應。
- TypeScript
- Vue
- Shadcn UI
自動化表單視覺編輯器
工作上經常處理大量的表單欄位組合，牽扯到「模板樣式」、「欄位依賴」、「多步驟」等費時費力的工作，因而促使我製作視覺化的自動化表單來解決重複性的表單問題。
View Transition 高光動畫套件
一個輕量無依賴的 TypeScript 套件，利用 View Transitions API 創建流暢且高效能的高光動畫過場。
VSCode SVG 行內預覽插件
編輯行內 SVG 時總是很難看懂在編輯什麼東西，所以製作一個即時渲染當下文件 SVG 代碼功能方便快速預覽。
JSON 轉換工具
在瀏覽器中將 JSON 轉換為適合分享的格式，搭配 diff 編輯器與即時圖表。
- 容器化
Pet Lover
搜尋和探索各種類品種與其子品種的狗狗。
AiSpace
Fullstack AI 聊天室，使用類似 Tinder 的方式滑動卡片進行隨機配對並與 AI 交談。
- TypeScript
- Nuxt(Vue)
- Supabase(Postgres)
- Shadcn UI
- Gemini AI
- Zod
- vee-validate
QR Code Printer
在瀏覽器上有效率地產生並匯出多個二維碼為 PDF 檔案方便印刷！
- 容器化
MyNote
一個全端現代筆記網站，會員系統採用 JWT 進行驗證。
- TypeScript
- Nuxt(Vue)
- MySQL
- Drizzle ORM
- Shadcn UI
- Vitest
- Playwright
- Zod
- Vercel
- Edit Element
Edit Element
一個輕量級且靈活的 JavaScript/TypeScript 庫，用於在 HTML 元素中新增就地編輯功能。
- TypeScript
- Vite
- Playwright
- changesets + tsup
- GPT Markdown 翻譯器
GPT Markdown 翻譯器
客製化的 Markdown 翻譯器，使用 ChatGPT API 進行翻譯，支援自訂提示詞、複製重複檔案、避免重複翻譯。主要供我的部落格使用，已翻譯上百篇技術文章。
- ChatGPT AI
- 容器化
Letter 作品集模板
Letter 是一款簡潔明了的主題，專為開發者和數位創意人士設計。透過純 Markdown 格式分享線上履歷、作品集甚至問答集。
尋星
推廣本次中科大畢業展「尋星」，藉由心理測驗探討人與人之間合作尋求共識的旅途，讓受測者了解自己在團隊中可能的定位與能力趨勢，至今達成上萬人次測驗績效。
VueStore 商城
打造一個 SPA 架構的線上購物商城，具備商品展示、購物車（加入、調整數量、刪除單筆或全部購物車項目）、套用優惠券、結帳、部落格等功能。
撿到寶
跟著六角學院同學們一起切課程題目，使用 Sass 編譯客製化 Bootstrap 與使用 Astro 將資料與版面分離。
- 容器化
網頁東東
擔任遠端助教期間，為了能夠更快速齊全的回答同學的疑惑，因此建立了該部落格，至今已有 200 篇以上的相關文章描述前端相關技術。
三角東東
三角東東是我在大學時期與隊員組成的一個設計團隊，依照該團隊的所設計的作品集，簡單有效。
室內設計行銷頁面
赫綵設計學院需要一款單頁行銷頁面宣傳室內設計課程，因此從設計到前端都由我包辦與溝通需求。
赫綵設計學院室內設計行銷頁面
赫綵設計學院需要一款多媒體網頁設計班課程推銷網頁，因此從設計到前端都由我包辦與溝通需求。
百工之藝
作為網頁選手，我需要一個簡單但不枯燥的版面可以讓我在 2 小時內從發想到刻完，這是當時構想的文化題材方案。
台灣產業新勢力
作為網頁選手，我需要一個簡單但不枯燥的版面可以讓我在 2 小時內從發想到刻完，這是當時構想的電店方案。
查看原始碼
前往網站
前往網站