# Project Context for Claude Code

## What is this project?

This is a personal landing page for hiddenden.cafe, built with Astro. The owner is Mats, a gay furry developer who values self-hosting, privacy, and cozy aesthetics.

## Key Design Principles

1. **Cozy Aesthetic** - Warm colors, coffee/cappuccino theme, hidden den vibes
2. **Self-Hosted** - Everything runs on personal infrastructure (homelab/VPS)
3. **Privacy First** - No tracking, no external dependencies
4. **Lightweight** - Static HTML/CSS, minimal JavaScript
5. **Docker-Ready** - Easy deployment via containers

## Owner Preferences

- **Tech Stack**: Python/Flask normally, learning Astro for this project
- **Deployment**: Docker containers pushed to personal Gitea registry at git.hiddenden.cafe
- **Aesthetic**: Warm, comfy, coffee-themed, furry-friendly
- **Content**: Honest and authentic, not corporate or sterile

## Current Status

The site currently has:
- ✅ Landing page with hero section
- ✅ About Hidden Den section
- ✅ About Me section (Mats)
- ✅ Services section (Gitea linked)
- ✅ Support section
- ✅ Docker deployment setup
- ✅ Responsive design

## What Might Be Added Later

- Blog section for project updates
- More self-hosted services as they're deployed
- Payment/donation links when ready
- Project showcase pulling from Gitea
- Community features

## Important Implementation Details

### Color System
All colors use CSS custom properties. To change theme, edit variables in `BaseLayout.astro`. Current palette is coffee/earth tones.

### Content Updates
Main content is in `src/pages/index.astro`. Each section is wrapped in semantic HTML with consistent styling via `.card` class.

### Deployment Flow
1. Develop locally with `npm run dev`
2. Build with `npm run build`
3. Create Docker image with `docker build`
4. Push to Gitea registry
5. Deploy on homelab/VPS

### File Organization
- `src/layouts/` - Reusable layouts (currently just BaseLayout)
- `src/pages/` - Routes (index.astro = homepage)
- `src/components/` - Reusable components (empty, ready for future use)
- `public/` - Static assets (favicon, images)

## Communication Style

When discussing this project:
- Be warm and friendly (matches the site vibe)
- Use clear, direct language
- Respect the furry community context
- Focus on practical implementation
- Acknowledge this is a learning project with Astro

## Common Modification Patterns

**Adding a service:**
```astro
<div class="service-item">
  <h3><a href="https://service.hiddenden.cafe">🔧 Service Name</a></h3>
  <p>Description of the service</p>
</div>
```

**Adding a section:**
```astro
<section class="section new-section">
  <div class="container">
    <div class="card fade-in">
      <h2>Section Title</h2>
      <p>Content</p>
    </div>
  </div>
</section>
```

**Modifying colors:**
Edit the `:root` variables in `src/layouts/BaseLayout.astro`

## Testing Checklist

Before deploying changes:
- [ ] `npm run dev` - Check locally
- [ ] `npm run build` - Ensure build succeeds
- [ ] `docker build -t hiddenden-cafe .` - Verify Docker build
- [ ] Test on mobile viewport
- [ ] Check all links work
- [ ] Verify color contrast for accessibility

## Owner's Workflow

Mats typically:
1. Works in bursts of creative energy
2. Uses Docker for all deployments
3. Pushes to personal Gitea at git.hiddenden.cafe
4. Values complete control over hosting
5. Prefers warm, personal styling over corporate design

## Success Criteria

The site should:
- Load fast (static HTML)
- Feel warm and welcoming
- Accurately represent Mats and Hidden Den
- Work on all screen sizes
- Be easy to deploy via Docker
- Require minimal maintenance