GOAS Website Assistant

AI assistant for maintaining the Giants of All Sizes band website. This skill provides context and guidelines for working on the official site for this 4-piece indie band from Philadelphia.

Project Context

The website serves as the band's primary online presence for fans, industry professionals, and potential bookers. Built with vanilla HTML/CSS/JS using Tailwind CSS, hosted on GitHub Pages.

Design System

**Aesthetic**: Dark, edgy, modern with retro-futuristic elements

**Colors**:

**Typography**:

**Layout**: Single-page design with smooth scrolling, mobile-first responsive

Site Structure

1. **Hero Section**: Band name with gradient, transparent logo (littleShits.png), animated orbs, CTA buttons

2. **Music Section**: Bandcamp embed, streaming platform links (Spotify placeholder)

3. **Shows Section**: Dynamic show listings with ticket buttons

4. **About Section**: Band description, group photo, member cards with influences

5. **Interactive Features**: Guestbook (Disqus/localStorage), newsletter (Mailchimp), mobile menu

Instructions

When maintaining this website:

1. **Understand the aesthetic**: All changes must maintain the dark, edgy, retro-futuristic vibe. Use the gradient accent colors (#ff0080, #ff8c00, #40e0d0) and keep backgrounds dark.

2. **Use the tech stack correctly**:

- Write semantic HTML5

- Use Tailwind CSS utility classes (CDN-based)

- Keep JavaScript vanilla ES6+

- Optimize images for web

- Ensure keyboard accessibility

3. **Adding new shows**:

- Update the shows section in HTML

- Format: Date - Venue, City, State

- Include ticket link button when available

- Maintain responsive grid layout

4. **Updating social links**:

- Social icons are in footer

- Ensure all external links have `target="_blank"` and `rel="noopener noreferrer"`

5. **Testing requirements**:

- Mobile (320px+), tablet (768px+), desktop (1025px+)

- Cross-browser: Chrome, Firefox, Safari, Edge

- Smooth scrolling navigation works

- Forms validate properly

- All interactive elements keyboard-accessible

6. **Service integrations**:

- **Mailchimp**: Replace `YOUR-MAILCHIMP-URL-HERE` with actual form action

- **Disqus**: Replace `YOUR-DISQUS-SHORTNAME` with actual shortname, configure dark theme

7. **Performance best practices**:

- Keep dependencies minimal

- Use CDNs for libraries

- Optimize all images

- Consider lazy loading for image galleries

8. **SEO maintenance**:

- Keep meta tags descriptive and current

- Use semantic HTML structure

- Maintain proper heading hierarchy (h1→h2→h3)

- Add alt text to all images

Common modification patterns:

**Color scheme changes**: Update gradient values in inline styles and Tailwind config. Maintain dark background for readability.

**Content updates**: Modify HTML directly. Keep copy concise and band-voice consistent (edgy, authentic indie rock).

**New sections**: Follow existing pattern - dark background, gradient accents, responsive grid, smooth scroll anchors.

**Form additions**: Use Tailwind form classes, implement validation, ensure mobile-friendly.

Examples

**Adding a show**:

```html

<div class="bg-gray-800 p-6 rounded-lg">

<h3 class="text-2xl mb-2">March 15, 2024</h3>

<p class="text-gray-400 mb-4">Underground Arts - Philadelphia, PA</p>

<a href="TICKET_URL" target="_blank" class="inline-block px-6 py-2 bg-gradient-to-r from-pink-500 to-orange-500 rounded-full">

Get Tickets

</a>

</div>

```

**Updating social link**:

```html

<a href="https://instagram.com/giantsofallsizes" target="_blank" rel="noopener noreferrer" class="text-2xl hover:text-pink-500 transition">

<i class="fab fa-instagram"></i>

</a>

```

Constraints

Contact

Band email: [email protected]

Website: giantsofallsizes.net