❯ Colophon

Stack

• Framework: Astro 5.16.3
• Styling: Tailwind CSS v4 with custom @theme tokens
• Search: Algolia Search for instant content discovery
• MDX: @astrojs/mdx for enhanced Markdown
• Build tooling: Vite with HMR and optimizations
• Package manager: pnpm for efficient dependency management
• Site map: @astrojs/sitemap for SEO
• Icons: astro-icon for optimized SVG assets

Design

The design is inspired by terminal aesthetics, bringing a developer-focused interface that feels both familiar and modern. The site features a command palette (⌘K) for quick navigation and interaction.

• Color system: Catppuccin theme (Mocha for dark mode, Latte for light mode)
• Typography: JetBrains Mono and IBM Plex Mono monospace fonts throughout
• Interactive Command Palette: Instant search, help navigation, and theme switching via keyboard shortcuts
• Theme switching: Light/dark mode with localStorage persistence and FOUC prevention
• Backdrop effects: backdrop-blur-2xl with gradients and modern transparency
• Terminal elements: Prompts, paths, and monospace aesthetic with cursor animations

Performance

• Static rendering via Astro (zero JS by default)
• SVGO enabled for optimized SVG assets
• Minimal client-side JS; progressive enhancement approach
• Vite-powered build with modern ES modules and tree-shaking
• Command Palette: Debounced search (150ms) to prevent API spam
• Algolia Search integration for instant full-text search
• Theme switching with FOUC prevention via inline script
• Smooth 200ms transitions between theme changes

Accessibility

Accessibility is a core priority. All design decisions are validated against WCAG AAA standards to ensure the site is usable by everyone.

• WCAG 2.1 AAA color contrast compliance (7:1+ for body text)
• Touch targets: All interactive elements are minimum 44×44px
• Keyboard navigation throughout with visible focus states
• Command Palette: Full keyboard support with ↑↓ arrow navigation and Enter to activate
• Semantic HTML with proper ARIA labels and landmarks
• Screen reader friendly text and descriptions
• Automated testing: axe CLI (pnpm accessibility) with 100% compliance
• Respects prefers-reduced-motion for animations and transitions
• Theme preference respects system settings with manual override option

Content & Workflow

• Markdown/MDX content with full component support
• Image optimization via Astro's built-in processing
• Type-safe configuration using TypeScript interfaces

Hosting & Deployment

Deployed as a static site. CDN and caching configured via hosting provider for optimal performance worldwide.

Privacy

No invasive tracking. Basic analytics and monitoring may be used to improve the site experience.

Credits

• Created by Steve McDougall (steve@juststeveking.com)
• Open-source dependencies credited via package manifests
• Built with care for accessibility, performance, and user experience