add blog, initial post

claude.md

@@ -0,0 +1,72 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+Static blog built with SvelteKit, MDsveX, and Tailwind CSS v4. Uses `@sveltejs/adapter-static` for static site generation.
+
+## Development Commands
+```bash
+pnpm install          # Install dependencies
+pnpm dev              # Start dev server (default: http://localhost:5173)
+pnpm build            # Build for production
+pnpm preview          # Preview production build
+pnpm check            # Type-check with svelte-check
+pnpm check:watch      # Type-check in watch mode
+pnpm format           # Format code with Prettier
+pnpm lint             # Lint with ESLint and Prettier
+```
+
+## Architecture
+
+### Routing Structure
+```
+src/routes/
+├── +layout.svelte          # Root layout with Nav component
+├── +page.svelte           # Blog listing (homepage at /)
+├── +page.ts              # Loads all posts from ./posts/*.md
+├── posts/
+│   ├── *.md              # Blog post markdown files (with frontmatter)
+│   └── [slug]/
+│       ├── +page.svelte  # Individual post renderer
+│       └── +page.ts      # Dynamic post loader
+├── about/
+│   └── +page.md          # About page (markdown)
+└── music/
+    └── +page.md          # Music page (markdown)
+```
+
+### Blog Post Structure
+- Posts are markdown files in `src/routes/posts/*.md`
+- Required frontmatter: `title`, `date`, `excerpt`
+- Posts accessed at `/posts/{slug}` where slug is filename without `.md`
+- Blog listing at root `/` shows all posts sorted by date (newest first)
+
+### Navigation
+Navigation component at `src/lib/components/Nav.svelte` with links:
+- Blog (/) - default landing page
+- About (/about)
+- Music (/music)
+
+### MDsveX Configuration
+- Configured in `svelte.config.js` to process `.md` and `.svx` files
+- Extensions: `['.svelte', '.md', '.svx']`
+- Preprocessors: `vitePreprocess()` and `mdsvex()`
+
+## Development Guidelines
+- Use Svelte 5+ with runes (`$props`, `$state`, `$derived`, etc.)
+- TypeScript with strict mode enabled
+- Tailwind CSS v4 classes only (no custom CSS unless necessary)
+- Use pnpm as package manager
+- Self-explanatory code without comments
+- Short, concise function and variable names
+- Careful state management to avoid infinite loops
+
+## Technology Stack
+- SvelteKit 2.x with static adapter
+- Svelte 5.x (runes-based)
+- MDsveX for markdown processing
+- Tailwind CSS v4 with @tailwindcss/typography
+- TypeScript with strict mode
+- ESLint + Prettier for code quality
+- Vite for build tooling