Claude Code Instructions for Astro Blog

Instructions for working with Amador López Parra's personal blog/portfolio site.

Project Overview

Personal blog/portfolio site built with Astro 5 and Tailwind CSS. Features a chalkboard visual theme (dark background with chalk-white text and "Schoolbell" handwriting font). Content is primarily in Spanish.

Commands

When working with this project, use these commands:

```bash

npm run dev # Start dev server at localhost:4321

npm run build # Build production site to ./dist/

npm run preview # Preview production build locally

```

Architecture

**Framework**: Astro 5 with Tailwind CSS integration

**Content Structure**:

**Layout System**:

**Key Directories**:

**Styling**:

**RSS**: Generated via `src/pages/rss.xml.js` using @astrojs/rss

Instructions for Claude Code

When working with this codebase:

1. **Respect the chalkboard theme**: Use existing theme colors (`chalk`, `board`, `board-dark`) and the `chalkboard` font family

2. **Blog posts**: Create new posts as Markdown files in `src/pages/blog/` with proper frontmatter

3. **Spanish content**: Default to Spanish for content unless specifically asked otherwise

4. **Layout consistency**: All pages should use `src/layouts/Layout.astro`

5. **Images**: Place blog images in `public/img/` and reference them correctly in frontmatter

6. **Testing**: Use `npm run dev` to test changes locally before building

7. **File-based routing**: Remember Astro uses file-based routing - page structure maps to URL structure

Common Tasks

**Adding a blog post**:

1. Create new `.md` file in `src/pages/blog/`

2. Include complete frontmatter (title, description, date, layout, tags, image)

3. Write content in Markdown

4. Add any images to `public/img/`

5. Test with `npm run dev`

**Modifying styles**:

1. For theme-wide changes, edit `src/styles/global.css` or `tailwind.config.mjs`

2. For component-specific styles, edit the component's Astro file

3. Maintain the chalkboard aesthetic

**Updating components**:

1. Find component in `src/components/`

2. Edit the Astro component file

3. Test across pages that use the component

Constraints