Cozy-Den/PROJECT_CONTEXT.md

Project Context for Claude Code

What is this project?

This is a personal landing page for hiddenden.cafe, built with Astro. The owner is Latte, 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 (Latte)
• ✅ Services section (Gitea linked)
• ✅ Support section
• ✅ Docker deployment setup
• ✅ Responsive design
• ✅ Custom 404 page with themed styling
• ✅ Sitemap integration for SEO
• ✅ robots.txt for search engines
• ✅ Accessibility improvements (ARIA labels, semantic HTML)

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, 404.astro = error page)
• src/components/ - Reusable components (empty, ready for future use)
• public/ - Static assets (favicon.svg, robots.txt)

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:

<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:

<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

Latte 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 Latte and Hidden Den
• Work on all screen sizes
• Be easy to deploy via Docker
• Require minimal maintenance