# CLAUDE.md

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

## Development Commands

**Start development server:**

```bash
npm run dev
```

**Build for production:**

```bash
npm run build
```

**Type checking and linting:**

```bash
npm run check          # Type check with svelte-check
npm run lint           # Check formatting and linting
npm run format         # Auto-format code with prettier
```

**Preview production build:**

```bash
npm run preview
```

## Architecture Overview

This is a SvelteKit personal portfolio site for @jedmund that integrates with multiple external APIs to display real-time data about music listening habits and gaming activity.

We are using Svelte 5 in Runes mode, so make sure to only write solutions that will work with that newer syntax.

Make sure to use the CSS variables that are defined across the various files in `src/assets/styles`. When making new colors or defining new variables, check that it doesn't exist first, then define it.

### Key Architecture Components

**API Integration Layer** (`src/routes/api/`)

- **Redis caching**: Shared Redis client (`redis-client.ts`) used across API routes for caching external API responses
- **External APIs**: Last.fm (music), Steam (games), PSN (PlayStation games), Giant Bomb (game metadata)
- **Data enrichment**: Last.fm data is enhanced with iTunes artwork and Giant Bomb metadata

**Frontend Structure**

- **Component-based**: Reusable Svelte components in `$lib/components/`
- **Page composition**: Main page (`+page.svelte`) composed of multiple `Page` components with different content sections
- **Data loading**: Server-side data fetching in `+page.ts` with error handling

**Styling System**

- **SCSS-based**: Global variables, fonts, themes automatically imported via Vite config
- **Asset management**: SVG icons and illustrations with automatic processing and alias imports

### Key Aliases (svelte.config.js)

- `$components` → `src/lib/components`
- `$icons` → `src/assets/icons`
- `$illos` → `src/assets/illos`
- `$styles` → `src/styles`

### Environment Dependencies

- Requires `LASTFM_API_KEY` and `REDIS_URL` environment variables
- Uses Node.js adapter for deployment
