Colophon

This site uses Astro, React, Tailwind CSS, and Bun. It runs on Cloudflare.

Framework & Build

• Framework: Astro - A modern static site generator with partial hydration
• UI Components: React for interactive components where needed
• Styling: Tailwind CSS for utility-first styling
• Runtime & Package Manager: Bun for fast builds and dependency management
• Type Safety: TypeScript throughout the codebase

Data Architecture

Project metadata is stored as RDF/Turtle and transformed for the frontend:

• Project Data: Stored in src/data/projects.ttl using RDF/Turtle format - a semantic web standard for representing linked data
• Data Processing: GraphQL queries transform the TTL data into the JSON structures needed by the frontend components
• Benefits: This approach provides semantic richness, easy data relationships, and the flexibility to query data in different ways for different pages

Deployment & Infrastructure

• Domain Registrar: Cloudflare - providing integrated DNS management with the deployment platform
• Hosting: Cloudflare Pages - static site hosting at the edge for global distribution
• Edge Computing: Cloudflare Workers handle dynamic routing and request processing
• CDN: Cloudflare's global network ensures fast load times worldwide
• Build Process: Automated deployments triggered by git pushes to the main branch

Performance Optimizations

• Static Generation: All pages are pre-rendered at build time for instant loading
• Image Optimization: Responsive images with modern formats (WebP)
• Partial Hydration: JavaScript is only loaded for interactive components
• Edge Caching: Static assets cached at Cloudflare edge locations

Design Philosophy

The technical choices reflect several principles:

• Simplicity: Static site generation avoids unnecessary complexity
• Performance: Edge deployment and minimal JavaScript ensure fast load times
• Developer Experience: Modern tools like Bun and TypeScript improve productivity
• Semantic Data: RDF/Turtle format provides rich, queryable project metadata
• Progressive Enhancement: The site works without JavaScript, with enhancements where beneficial