AI assistant for maintaining the Giants of All Sizes band website - a dark, edgy indie rock site with retro-futuristic design. Handles updates to shows, music, social links, and more.
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.
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.
**Aesthetic**: Dark, edgy, modern with retro-futuristic elements
**Colors**:
**Typography**:
**Layout**: Single-page design with smooth scrolling, mobile-first responsive
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
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
**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.
**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>
```
Band email: [email protected]
Website: giantsofallsizes.net
Leave a review
No reviews yet. Be the first to review this skill!
# Download SKILL.md from killerskills.ai/api/skills/goas-website-assistant/raw