# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

This is a personal portfolio/blog website built with Next.js 13.4.16 (App Router), TypeScript, and Tailwind CSS. It's based on the Tailwind UI "Spotlight" template and features a modern, responsive design with dark mode support.

## Essential Commands

```bash
# Install dependencies
npm install

# Run development server (http://localhost:3000)
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linting
npm run lint

# Type checking (via build process)
npm run build
```

## Architecture & Key Patterns

### Directory Structure
- **`/src/app/`** - Next.js App Router pages and layouts
  - Each page is in its own directory with `page.tsx` or `page.mdx`
  - Articles are MDX files in subdirectories under `/articles/`
  - RSS feed generation at `/feed.xml/`

- **`/src/components/`** - Reusable React components
  - Layout components extend from `Layout.tsx`
  - All components use TypeScript with proper type definitions
  - Components use Tailwind CSS classes for styling

- **`/src/lib/`** - Utility functions
  - `articles.ts` - Functions for loading and managing MDX articles
  - `formatDate.ts` - Date formatting utilities

### Content Management
- Articles are written in MDX format in `/src/app/articles/[slug]/page.mdx`
- Each article directory can contain images alongside the MDX file
- Article metadata is defined in the MDX frontmatter
- The `ArticleLayout` component wraps all article content

### Styling Approach
- Tailwind CSS utility classes for all styling
- Dark mode support via `next-themes` package
- Typography plugin for prose content styling
- Custom Tailwind configuration in `tailwind.config.js`
- Code syntax highlighting with Prism CSS

### TypeScript Configuration
- Strict mode enabled
- Path alias `@/*` maps to `./src/*`
- All components and utilities should have proper TypeScript types

### Important Files
- `next.config.mjs` - Next.js configuration with MDX support
- `tailwind.config.js` - Tailwind CSS customization
- `.env.local` - Must set `NEXT_PUBLIC_SITE_URL` for production

## Development Guidelines

### Adding New Pages
1. Create a new directory under `/src/app/`
2. Add a `page.tsx` file with proper TypeScript types
3. Use the `SimpleLayout` or custom layout components
4. Follow existing page patterns for consistency

### Adding New Articles
1. Create a new directory under `/src/app/articles/[article-name]/`
2. Add a `page.mdx` file with frontmatter including title, description, author, and date
3. Place any images in the same directory
4. Articles automatically appear in the articles list and RSS feed

### Component Development
- Always use TypeScript with proper type definitions
- Follow existing component patterns for props and structure
- Use Tailwind CSS classes; avoid inline styles
- Components should be reusable and properly abstracted

### Environment Setup
Before running the project, create a `.env.local` file:
```
NEXT_PUBLIC_SITE_URL=https://your-domain.com
```

## No Testing Framework
This project does not currently have a testing framework configured. Consider adding Jest and React Testing Library if test coverage is needed.