Writing
Thoughts on frontend architecture, AI integration, and building scalable systems.
Lucky Duck gestalten: Eine Rewards-Plattform-MVP als Growth-Funktion
Eine Produkt- und Frontend-Fallstudie zu Lucky Duck — einem MVP-Konzept für eine Verbraucher-Rewards-Plattform. Wie ich das Erlebnis um Growth Loops herum strukturiert, ein token-basiertes Designsystem für Hell & Dunkel gebaut und einen voll klickbaren Prototyp auf genau dem Stack ausgeliefert habe, auf dem das Produkt starten würde.
設計 Lucky Duck：把獎勵平台 MVP 當成一種成長函數
一個產品 + 前端的案例研究——Lucky Duck，一個消費者獎勵平台的 MVP 概念。我如何把體驗圍繞成長迴圈來設計、建立一套淺色與深色通用的 token 設計系統，並用產品實際上線會採用的同一套技術棧，做出完全可點擊的原型。
Designing Lucky Duck: A Rewards Platform MVP as a Growth Function
A product + front-end case study on Lucky Duck — a consumer rewards platform MVP concept. How I structured the experience around growth loops, built a token-based design system for light & dark, and shipped a fully clickable prototype on the same stack the product would launch on.
Von 60 auf 100: Wie ich mein Astro-Portfolio auf perfekte Lighthouse-Werte optimiert habe
Eine praxisnahe Fallstudie zur Optimierung einer Astro + React Islands Portfolio-Website. Erfahren Sie, wie Self-Hosting von Schriftarten, statisches Hero-Rendering, Islands Code-Splitting und kritisches CSS-Inlining den FCP von 2,9s auf 0,4s verbesserten und einen perfekten Desktop-Lighthouse-Score erzielten.
從 60 分到 100 分：我如何將 Astro 作品集網站優化到 Lighthouse 滿分
一個真實案例，記錄如何優化 Astro + React Islands 作品集網站。透過自託管字型、Hero 靜態渲染、Islands 程式碼分割和關鍵 CSS 內聯，將 FCP 從 2.9 秒降至 0.4 秒，Desktop Lighthouse 達到滿分 100。
From 60 to 100: How I Optimized My Astro Portfolio to Perfect Lighthouse Scores
A real-world case study on optimizing an Astro + React Islands portfolio site. Learn how self-hosted fonts, static Hero rendering, Islands code splitting, and critical CSS inlining improved FCP from 2.9s to 0.4s and achieved a perfect Desktop Lighthouse score.
行動版 PageSpeed Insights 優化：完整指南
詳細記錄所有針對行動版網頁效能分數（PageSpeed Insights）所做的優化調整，包括移除 render-blocking 資源、修復強制重排、快取策略和 SEO 改善。
Mobile PageSpeed Insights Optimization: A Comprehensive Guide
A detailed breakdown of all optimizations implemented to improve mobile PageSpeed Insights scores, including render-blocking resource removal, forced reflow fixes, caching strategies, and SEO improvements.
Practical Notes: Migration Challenges and Solutions from SPA to Astro Islands Architecture
An in-depth exploration of the most common architectural issues when integrating Astro with React: Context loss, file strategy choices, and TypeScript type definitions.
實戰筆記：從 SPA 到 Astro Islands 架構的遷移挑戰與解決方案
深入探討 Astro 與 React 整合時最容易遇到的架構問題：Context 丟失、檔案策略選擇以及 TypeScript 型別定義。
本地聊天系統
一個用於考試的本地聊天模擬器，使用 TypeScript 和 React 構建。功能包括用戶登入、即時訊息傳遞，以及跨瀏覽器標籤頁的持久化用戶名。按照設置指南來克隆、配置和部署應用程式。
Local Chat System
A local chat simulator for exams, built with TypeScript and React. Features include user login, real-time messaging, and persistent usernames across browser tabs. Follow the setup guide to clone, configure, and deploy the application.