Gavin Rozzi - Personal Website (Astro)

Modern, performant personal website built with Astro 5, showcasing digital transformation and civic technology work.

Quick Start

npm install
npm run dev

Visit http://localhost:4321

Build Commands

npm run dev          # Start dev server
npm run build        # Build for production
npm run preview      # Preview production build
npm run lint         # Run ESLint

Architecture

For detailed architecture documentation, component patterns, and code guidelines, see CLAUDE.md.

Key Features

• Content Collections: Blog, portfolio, media, publications, photos
• Modular Components: Reusable PageHero, FilterControls, Badge, Icon components
• Utility Modules: Centralized formatting, icons, and JSON-LD schema builders
• SEO Optimized: JSON-LD structured data, sitemaps, Open Graph images, schema-enforced title/description limits
• Responsive Design: Mobile-first with CSS custom properties
• TypeScript: Strict mode enabled

Project Structure

src/
├── components/         # Astro and React components
│   ├── hero/          # Homepage hero sub-components
│   ├── cards/         # Reusable card components
│   └── react/         # Interactive React components
├── content/           # Content collections (MDX)
├── layouts/           # Page layouts
├── lib/               # Schema builders and utilities
├── pages/             # File-based routing
├── styles/            # Global CSS and design tokens
└── utils/             # Formatting and icon utilities

SEO Validation

Content schemas enforce SEO best practices at build time:

• Page titles must be under 60 characters (including suffix)
• Meta descriptions must be under 160 characters
• Build fails if content exceeds limits, preventing SEO issues from deploying

Use seoTitle and seoDescription fields when the main title/summary exceeds limits. See CLAUDE.md for detailed guidelines.

Deployment

Deployed via Netlify. Configuration in netlify.toml.

License

© 2026 Gavin Rozzi. Licensed under CC BY-NC-ND 4.0.