ProjectSites Template

Reusable website template for ProjectSites.dev — the AI-powered website builder.

What This Is

This template provides the foundation for every website generated by ProjectSites. Claude Code clones this repo, then customizes it with business-specific content, colors, images, and copy.

Structure

├── index.html          # Base HTML skeleton with all required meta tags
├── css/
│   ├── variables.css   # CSS custom properties (colors, fonts, spacing)
│   ├── animations.css  # 14+ @keyframes definitions
│   ├── components.css  # Glassmorphism cards, gradient buttons, etc.
│   ├── layout.css      # Responsive grid system
│   └── accessibility.css # Focus styles, skip-link, reduced motion
├── js/
│   ├── scroll-reveal.js  # IntersectionObserver section animations
│   ├── carousel.js       # Hero image/video carousel
│   ├── data-polling.js   # D1 live data update polling
│   └── contact-form.js   # Form submission handler
└── CLAUDE.md           # Instructions for Claude Code on how to customize

Visual Quality Standards

Every site built from this template includes:

• 14+ CSS animations (scroll reveals, entrance effects, hover micro-interactions)
• Glassmorphism effects (backdrop-filter: blur)
• Gradient text on display headings
• 10+ unique images per site
• Mobile-first responsive design
• WCAG 2.1 AA accessibility
• 90+ Lighthouse scores (Performance, Accessibility, SEO, Best Practices)

License

MIT — used internally by ProjectSites.dev