bloomfolio CLAUDE.md

CLAUDE.md

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

Project Overview

Bloomfolio is an Astro-based portfolio template using Tailwind CSS 4.x and DaisyUI for styling. The project follows Astro's standard project structure with file-based routing.

Development Commands

# Install dependencies
npm install

# Start development server (localhost:4321)
npm run dev

# Build for production (outputs to ./dist/)
npm run build

# Preview production build locally
npm run preview

# Run Astro CLI commands
npm run astro -- <command>

# Type checking and content validation
npm run check

Architecture

Framework & Build Setup

• Astro 7.x: Server-rendered web framework with component islands architecture
• Tailwind CSS 4.x: Integrated via Vite plugin (@tailwindcss/vite)
• DaisyUI: Loaded as Tailwind plugin in src/styles/global.css
• TypeScript: Strict mode enabled via astro/tsconfigs/strict
• Keystatic CMS: Git-based headless CMS for content management
  • Admin UI at /keystatic route (auto-generated by @keystatic/astro)
  • Configuration in keystatic.config.ts
  • Local storage mode (stores content in src/content/)
  • Integrates with Astro Content Collections

Styling System

The styling architecture uses Tailwind CSS 4.x with the new CSS-first configuration:

1. Global styles are defined in src/styles/global.css using @import "tailwindcss" and @plugin "daisyui"
2. The Tailwind Vite plugin is configured in astro.config.mjs
3. DaisyUI components are available project-wide through the plugin system
4. Component-scoped styles can be added in <style> tags within .astro files

Project Structure

src/
├── assets/          # Static assets (images, SVGs)
├── components/      # Reusable Astro components
├── layouts/         # Layout templates (wraps page content)
├── pages/           # File-based routing (each file = route)
└── styles/          # Global CSS (Tailwind + DaisyUI imports)