Electric Studios Website

A modern, single-page static website for Electric Studios - professional YouTube content services including thumbnail design, upload strategy, and strategy consultation.

Tech Stack

• HTML5 - Semantic markup
• CSS3 - Modern styling with CSS Grid and Flexbox
• Vanilla JavaScript - No frameworks, just clean ES6+
• Formspree - Contact form handling
• Wasmer - Edge deployment platform

Design System

Colors

• Background: #222222 (dark gray)
• Text: #ffffff (white)
• Accent: #FFD558 (yellow/gold)
• Card Background: #2a2a2a

Typography

• Font Family: Inter (Google Fonts)
• Modern, clean, professional aesthetic

Project Structure

/
├── index.html           # Main page
├── css/
│   ├── reset.css       # Browser reset
│   ├── variables.css   # Design tokens
│   ├── layout.css      # Layout and grid
│   ├── components.css  # Component styles
│   └── animations.css  # Animations and transitions
├── js/
│   ├── main.js         # Main functionality
│   └── animations.js   # Intersection Observer
├── images/
│   └── logo.png        # ES logo
├── wasmer.toml         # Wasmer config
└── README.md

Setup Instructions

1. Add Your Logo

Save your ES logo image as images/logo.png:

• Recommended size: 400-600px width for retina displays
• Format: PNG with transparency
• The yellow/orange gradient ES logo

2. Configure Formspree

The contact form uses Formspree to send emails directly to you.

1. Go to formspree.io and sign up for a free account
2. Create a new form
3. Copy your form endpoint (looks like https://formspree.io/f/xxxxx)
4. Open index.html and find line with the form action:

   <form id="contact-form" class="contact-form" action="https://formspree.io/f/YOUR_FORM_ID" method="POST">
   

5. Replace YOUR_FORM_ID with your actual Formspree form ID

3. Local Development

To test the website locally, you can use any static web server:

Option 1: Python

python -m http.server 8000

Option 2: Node.js (npx)

npx http-server

Option 3: VS Code Live Server

• Install the "Live Server" extension
• Right-click index.html and select "Open with Live Server"

Then open your browser to http://localhost:8000 (or the port shown).

4. Deploy to Wasmer

1. Install Wasmer CLI if you haven't already:

   curl https://get.wasmer.io -sSfL | sh
   

2. Deploy your website:

   wasmer deploy --publish-package
   

3. Follow the prompts to configure your deployment

4. Your site will be live at a Wasmer Edge URL

5. Deploy to GitHub Pages (Alternative)

1. Initialize a git repository:

   git init
   git add .
   git commit -m "Initial commit"
   

2. Create a GitHub repository and push:

   git remote add origin https://github.com/yourusername/electric-studios.git
   git branch -M main
   git push -u origin main
   

3. Enable GitHub Pages:

   • Go to repository Settings
   • Navigate to Pages section
   • Select "main" branch and root folder
   • Save

Your site will be live at https://yourusername.github.io/electric-studios/

Features

Responsive Design

• Mobile-first approach
• Breakpoints: 480px, 768px, 1024px
• Fully responsive grid layout

Animations

• Fade-in on scroll for service cards
• Smooth scrolling navigation
• Hover effects on interactive elements
• Logo pulse animation
• Parallax effect on hero section

Accessibility

• Semantic HTML5 elements
• ARIA labels where appropriate
• Keyboard navigation support
• Reduced motion support for accessibility
• High contrast text (WCAG AA compliant)

Performance

• No build process required
• Minimal dependencies
• Optimized CSS and JavaScript
• Fast load times
• Google Fonts with font-display: swap

Customization

Changing Colors

Edit css/variables.css and update the color variables:

:root {
  --color-bg: #222222;        /* Background */
  --color-text: #ffffff;      /* Main text */
  --color-accent: #FFD558;    /* Accent/highlight */
}

Adding More Services

Edit index.html and add a new service card in the services section:

<article class="service-card">
  <div class="service-icon" aria-hidden="true">🎯</div>
  <h3 class="service-title">Your Service</h3>
  <p class="service-description">
    Service description here.
  </p>
</article>

Update css/layout.css if you want more than 3 services to adjust the grid.

Modifying Content

All content is in index.html:

• Hero section: Update title, tagline, and logo
• Services: Edit service titles and descriptions
• Footer: Update copyright information

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• Mobile browsers (iOS Safari, Chrome Mobile)

License

MIT License - feel free to use this template for your own projects.

Support

For questions or issues, contact Electric Studios or open an issue on GitHub.

---

Built with vanilla HTML, CSS, and JavaScript. No frameworks, no dependencies, just clean code.