Project Updates: Component Extraction & Design System
Thursday, July 2, 2026

The site's been growing, and with growth comes the need to tidy up before things get messy. Here's what we've been up to.

Component extraction

PageHeader.astro and TerminalLine.astro were living inline across multiple pages. Extracted them into proper reusable components. Same markup, same behavior — but now one source of truth instead of three.

Design system formalized

Created DESIGN.md — the full catalog of tokens, typography, components, layout, and interaction patterns. Everything from color ramps to the exact clamp() formula for fluid type. No more guessing what --space-4 means.

The rest of the bag

  • OG meta tags so embeds don't look like garbage
  • Styled 404 page (because you will hit a dead link)
  • Empty states for every data-driven view
  • a11y: ARIA landmarks, focus-visible, keyboard nav
  • Self-hosted JetBrains Mono (no more Google Fonts)
  • Fluid typography via clamp() — looks right at every viewport
  • Responsive breakpoints at 768, 1024, and 1440px
  • Touch targets at least 44px, prefers-reduced-motion respected
  • No-js fallback so the terminal aesthetic still lands
  • CSS containment for paint isolation
  • Button press animation that actually feels tactile
  • Security and cache headers locked down

Why now

Because every project hits a point where you either formalize the patterns or let entropy win. The design system was living in my head and scattered across files. Now it's in DESIGN.md where anyone (including future me) can read it.

site โตขึ้น และพอโตก็ต้องเก็บกวาดก่อนที่ทุกอย่างจะรก นี่คือสิ่งที่ทำไป

Component extraction

PageHeader.astro กับ TerminalLine.astro อยู่แบบ inline หลายหน้า ดึงออกมาเป็น reusable components ที่แท้จริง markup และ behavior เหมือนเดิม — แต่มี source of truth เดียวแทนที่จะเป็นสาม

Design system formalized

สร้าง DESIGN.md — แคตตาล็อกเต็มของ tokens, typography, components, layout, interaction patterns ตั้งแต่ color ramps ไปจนถึงสูตร clamp() ที่แน่นอนสำหรับ fluid type ไม่ต้องเดาอีกแล้วว่า --space-4 คืออะไร

ที่เหลือ

  • OG meta tags — embed ไม่ดูขยะอีก
  • 404 หน้าที่มีสไตล์ (เพราะคุณ จะ เจอ dead link)
  • Empty states ทุก data-driven view
  • a11y: ARIA landmarks, focus-visible, keyboard nav
  • Self-hosted JetBrains Mono (bye Google Fonts)
  • Fluid typography ด้วย clamp() — ดูดีทุก viewport
  • Responsive breakpoints ที่ 768, 1024, 1440px
  • Touch targets ขั้นต่ำ 44px, เคารพ prefers-reduced-motion
  • No-js fallback — terminal aesthetic ยังอยู่แม้ไม่มี JS
  • CSS containment สำหรับ paint isolation
  • Animation ตอนกดปุ่มที่ให้ความรู้สึก tactile จริงๆ
  • Security และ cache headers ล็อคแน่น

ทำไมตอนนี้

เพราะทุกโปรเจกต์ถึงจุดที่ต้อง formalize patterns หรือปล่อยให้ entropy ชนะ design system อยู่ในหัวและกระจายตามไฟล์ ตอนนี้มันอยู่ใน DESIGN.md แล้วที่ใครก็อ่านได้ (รวมถึง future me)

← prev
next →