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/
│ ├── components/ # Reusable UI components
│ ├── content/ # Blog posts and content collections
│ ├── layouts/ # Page templates
│ ├── pages/ # File-based routing
│ └── styles/ # Global CSS
├── public/ # Static assets (images, fonts, downloads)
└── .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: '/images/hero.jpg' # Optional
---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.
Theme based on Bear Blog by Herman Martinus.