Colophon

How It Works

Astro does the heavy lifting. It's a static site builder that excels at content-heavy sites like portfolios. Astro delivers excellent performance through its islands architecture - it sends minimal JavaScript to your browser while keeping interactive bits where they're needed. It also handles image optimisation, routing, and content collections.

The foundation combines HTML, CSS, and TypeScript with React components for interactive elements. All content is written in MDX - enhanced Markdown that lets me embed custom React components directly in case studies and project descriptions.

Tailwind CSS handles styling with a custom design system that includes fluid typography, semantic colour variables, and responsive breakpoints. The design supports both light and dark themes through CSS custom properties.

Framer Motion powers the subtle animations you see throughout the site. It respects users who prefer reduced motion. Custom animation components like FadeIn, SlideIn, and ScaleIn provide consistent motion patterns.

Content Structure

Content management is deliberately simple - flat files organised in collections. Project case studies live in /src/content/projects/ as MDX files. Each has structured frontmatter defining metadata like services, skills, publication dates, and hero images.

Astro's content collections provide type safety and validation. The content schema enforces required fields and validates data types, preventing broken pages.

Design & Typography

Typography uses a fluid scale system from Utopia, automatically adjusting font sizes based on viewport width. Headings are set in Cormorant Garamond for editorial elegance. Body text uses Inter for optimal readability. A custom font, Locke Regular, adds personality to the site title.

The colour system uses semantic CSS variables that automatically switch between light and dark themes. This maintains accessibility standards for contrast ratios.

Development Approach

TypeScript provides type safety and a better developer experience. ESLint and Prettier ensure code quality and consistent formatting. Path aliases simplify imports across the component architecture.

Custom React components handle specific use cases - from responsive images and video players to structured data for SEO. The component library includes reusable cards, animation wrappers, and content formatting elements.

Performance & Accessibility

Astro's static generation ensures fast loading and excellent SEO. The site includes proper structured data for search engines, semantic HTML for screen readers, and optimised images in modern formats.

Motion respects user preferences through prefers-reduced-motion detection. The design system maintains WCAG contrast requirements across both light and dark themes.