Personal blog and portfolio for John Riccardi, a web developer and consultant with a background in design and animation.
🌐 Live Site: arcanegrain.dev
- Framework: Astro 5 - Fast, content-focused static site generator
- Styling: Tailwind CSS 4 + custom CSS
- Content: Markdown/MDX with type-safe content collections
- Deployment: Netlify with continuous deployment
- Package Manager: pnpm
- 100/100 Lighthouse performance score
- SEO-friendly with canonical URLs and OpenGraph metadata
- RSS feed support
- Automatic sitemap generation
- Type-safe content with Zod schema validation
- Responsive design optimized for mobile and desktop
- Git hooks for automatic code formatting
# Install dependencies
pnpm install
# Start dev server at localhost:4321
pnpm dev
# Build for production
pnpm build
# Preview production build
pnpm preview
# Type checking
pnpm astro check
# Format code
pnpm run prettier:write├── src/
│ ├── assets/ # Images and media for optimization (hero images, etc.)
│ ├── components/ # Reusable UI components
│ ├── content/ # Blog posts and content collections
│ ├── layouts/ # Page templates
│ ├── pages/ # File-based routing
│ └── styles/ # Global CSS
├── public/ # Static assets served as-is (fonts, downloads, favicons)
└── .claude.json # Claude Code MCP server configuration
Create a new .md or .mdx file in src/content/blog/ with the following frontmatter:
---
title: 'Your Post Title'
description: 'SEO description for the post'
pubDate: '2024-01-01'
heroImage: '../../assets/images/hero.jpg' # Optional - relative path from content file
---Important: Store images in src/assets/images/ (not public/) so Astro can optimize them during build. Reference them using relative paths from your content file.
Files prefixed with . (e.g., .draft-post.md) are excluded from builds.
This project includes a .claude.json file that configures the Playwright MCP server for automated browser testing when using Claude Code. See CLAUDE.md for detailed guidance on working with this codebase.