Blog
所有文章
用 Astro Content Collections 管理部落格文章
從 glob loader 到 Zod schema,聊聊這個部落格的文章是怎麼被管理的,以及 draft 草稿機制怎麼做。
用 Canvas 做科技藍圖網格背景:呼吸亮點與沿格線行走的光痕
拆解這個站的背景動畫:離屏靜態層、以格座標為種子的穩定亂數、呼吸點陣,和會在交叉點轉彎的光痕。
深色模式的兩個坑:白屏閃爍與 View Transitions
手動切換的深色模式看起來簡單,但要做到「不閃」需要一點技巧:inline script 搶先套主題,以及處理 Astro 換頁後屬性被重設的問題。
黑底上的毛玻璃:深色模式 glassmorphism 踩坑記
淺色模式的毛玻璃配方直接搬到深色模式會整個糊掉。記錄從 iOS 材質配方出發,到深色玻璃該用白色 tint 提亮的過程。
Lenis + GSAP:讓網站慢下來的捲動與動畫配方
這個站的調性是「慢優雅」。記錄 Lenis 平滑捲動怎麼跟 GSAP ScrollTrigger 同步,以及 View Transitions 下動畫該怎麼收拾自己。
Tailwind CSS v4:設定檔再見,@theme 你好
Tailwind v4 把設定搬進 CSS 裡。記錄這個站怎麼用 @theme、@custom-variant 和 @plugin 完成整站樣式設定。
Hello World:部落格開站了
用 Astro 和 Tailwind CSS 打造個人部落格的第一篇文章,順便測試各種 Markdown 排版。