The site got a rewrite — moved from a generic look to something that actually feels like a tool. We went with Neobrutalism: hard shadows, thick borders, and a high-contrast palette. Here's how it went.
Phase 1: The Foundation
Replaced CDN fonts with self-hosted JetBrains Mono (variable WOFF2). Extracted PageHeader and TerminalLine into reusable Astro components. Added safe-area insets and 44px touch targets.
Phase 2: Going Fluid
Used clamp() for fluid typography so the type scales between 768px and 1440px without awkward breakpoint jumps.
Phase 3: The Feel
Added a tactile :active scale animation on buttons, a custom 404 page, and empty states for all data views.
Phase 4: Under the Hood Set up Vercel immutable cache headers for fonts and assets. Added security headers (X-Content-Type-Options, etc.) and Open Graph tags.
Phase 5: The Final Polish
Added a <noscript> fallback, did a full CSS audit to clean up dead styles, and wrote everything down in DESIGN.md.
The Result A site that's faster, cleaner, and looks like it belongs in a terminal. No Tailwind, no React — just CSS and Astro.
site ถูก rewrite — จากลุคทั่วไปกลายเป็นอะไรที่รู้สึกเหมือน tool จริงๆ เราไปกับ Neobrutalism: เงานิ่ม, ขอบหนา, palette contrast สูง นี่คือที่มาที่ไป
Phase 1: The Foundation
แทนที่ CDN fonts ด้วย self-hosted JetBrains Mono (variable WOFF2) ดึง PageHeader และ TerminalLine เป็น Astro components ที่ reuse ได้ เพิ่ม safe-area insets และ 44px touch targets
Phase 2: Going Fluid
ใช้ clamp() สำหรับ fluid typography — type scale ปรับระหว่าง 768px ถึง 1440px โดยไม่มีการกระโดด awkward ที่ breakpoint
Phase 3: The Feel
เพิ่ม tactile :active scale animation บนปุ่ม, 404 หน้า custom, และ empty states สำหรับทุก data view
Phase 4: Under the Hood ตั้งค่า Vercel immutable cache headers สำหรับฟอนต์และ assets เพิ่ม security headers (X-Content-Type-Options, ฯลฯ) และ Open Graph tags
Phase 5: The Final Polish
เพิ่ม <noscript> fallback, ทำ CSS audit เต็มๆ เพื่อ cleanup dead styles, และเขียนทุกอย่างลงใน DESIGN.md
ผลลัพธ์ site ที่เร็วขึ้น, สะอาดขึ้น, และดูเป็น terminal จริงๆ ไม่มี Tailwind, ไม่มี React — แค่ CSS และ Astro