Emmanuel Mobile Mechanic Website

A beautiful, responsive website for Emmanuel Mobile Mechanic built with modern HTML, CSS, and JavaScript.

Features

• ✅ Fully Responsive Design - Works perfectly on all devices (mobile, tablet, desktop)
• ✅ Modern UI/UX - Clean, professional design with smooth animations
• ✅ Mobile-First Approach - Optimized for mobile users
• ✅ Interactive Elements - Mobile menu, smooth scrolling, form validation
• ✅ SEO Optimized - Proper meta tags and semantic HTML
• ✅ Fast Loading - Optimized CSS and minimal dependencies
• ✅ Contact Form - Functional contact form with validation
• ✅ Service Showcase - Detailed service listings with icons

File Structure

/Users/sokpyeon/emmanuel/
├── index.html          # Main HTML file
├── styles.css          # Responsive CSS styles
├── script.js           # JavaScript functionality
├── README.md           # This file
└── Screenshot 2025-09-11 at 2.55.51 AM.png  # Business card reference

Getting Started

1. Open the website locally:

   • Open index.html in any modern web browser
   • The website will load with all functionality

2. Customize the content:

   • Edit index.html to update business information
   • Modify styles.css to change colors, fonts, or layout
   • Update script.js for additional functionality

Customization Guide

Business Information

Update the following sections in index.html:

• Contact Details: Replace phone number, email, and service area
• About Section: Update the description and experience stats
• Services: Modify service offerings and descriptions
• Social Media: Add your actual social media links

Color Scheme

Modify the CSS custom properties in styles.css:

:root {
    --primary-color: #2563eb;    /* Main brand color */
    --primary-dark: #1d4ed8;    /* Darker shade for hover */
    --accent-color: #f59e0b;    /* Accent color */
    --bg-dark: #0f172a;         /* Dark backgrounds */
}

Services

To add or modify services, update the services grid in index.html:

<div class="service-card">
    <div class="service-icon">
        <i class="fas fa-tool-icon"></i>  <!-- Font Awesome icon -->
    </div>
    <h3>Service Name</h3>
    <p>Description</p>
    <ul class="service-features">
        <li>Feature 1</li>
        <li>Feature 2</li>
    </ul>
</div>

Deployment

Option 1: GitHub Pages (Free)

1. Create a GitHub repository
2. Upload all files to the repository
3. Go to Settings → Pages
4. Select "main" branch as source
5. Your site will be live at https://yourusername.github.io/repository-name

Option 2: Netlify (Free)

1. Sign up for a free Netlify account
2. Drag and drop the entire folder to the deployment area
3. Your site will be live instantly with a .netlify.app domain

Option 3: Traditional Hosting

1. Upload all files to your web hosting provider
2. Ensure the hosting supports HTML, CSS, and JavaScript
3. The site will work on any standard web hosting

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+
• Mobile browsers (iOS Safari, Chrome Mobile)

Technologies Used

• HTML5 - Semantic markup and structure
• CSS3 - Modern styling with CSS Grid and Flexbox
• JavaScript (ES6+) - Interactive functionality
• Font Awesome - Professional icons
• Google Fonts - Modern typography (Inter font)

Features Breakdown

Navigation

• Fixed header with smooth scroll navigation
• Mobile-responsive hamburger menu
• Active section highlighting

Hero Section

• Compelling headline and call-to-action
• Service highlights with icons
• Prominent contact buttons

About Section

• Business credibility with stats
• Key benefits and features
• Professional presentation

Services Section

• 6 core service categories
• Detailed feature lists
• Hover effects and animations

Contact Section

• Contact information with icons
• Functional contact form
• Form validation and user feedback

Footer

• Social media links
• Quick navigation
• Professional branding

Performance

• Fast Loading: Minimal dependencies, optimized CSS
• SEO Friendly: Proper meta tags, semantic HTML
• Accessible: Keyboard navigation, screen reader friendly
• Mobile Optimized: Touch-friendly interface

Customization Tips

1. Colors: Use your brand colors by updating CSS custom properties
2. Fonts: Change the Google Fonts import in index.html
3. Images: Add your own service photos or logo
4. Services: Update based on your actual offerings
5. Contact Info: Replace with your real business details

Support

If you need help customizing this website:

1. Check the browser console for any errors
2. Ensure all files are in the same directory
3. Verify that you're using a modern web browser

License

🚀 Deployment Instructions

Enable GitHub Pages:

1. Go to your repository: https://github.com/lelandsequel/HTXMobileMechanic
2. Click Settings tab
3. Scroll down to Pages section
4. Under Source, select Deploy from a branch
5. Under Branch, select main and /(root)
6. Click Save
7. Your site will be live at: https://lelandsequel.github.io/HTXMobileMechanic/

Diagnostic Pages:

• Main Site: index.html
• Simple Test: simple.html (if main site has issues)
• Diagnostic Test: test.html (to check what's working)

🎯 Troubleshooting

If the website looks "goofy":

1. Check the diagnostic page at test.html
2. Try the simplified version at simple.html
3. Verify GitHub Pages is enabled in repository settings

📱 Features

• ✅ Houston Astros Theme - Navy blue & orange colors
• ✅ Fully Responsive - Works on all devices
• ✅ Professional Design - Clean, modern layout
• ✅ Contact Integration - Working phone number: (832) 712-7776
• ✅ SEO Optimized - Search engine friendly
• ✅ Fast Loading - Optimized performance

🎨 Website Versions

Current Version: index.html + styles.css

• Complex design with advanced animations
• May have loading issues on some browsers

Clean Version: index_clean.html + styles_clean.css ⭐ RECOMMENDED

• Simplified, professional design
• Guaranteed to work perfectly
• Faster loading
• Better mobile experience

To Switch to Clean Version:

1. Rename files:

   mv index.html index_old.html
   mv styles.css styles_old.css
   mv index_clean.html index.html
   mv styles_clean.css styles.css

2. Commit and push:

   git add .
   git commit -m "Switch to clean version"
   git push

3. Vercel will automatically redeploy

🧪 Test Your Website

• Main Site: https://htx-mobile-mechanic.vercel.app/
• Clean Version: https://htx-mobile-mechanic.vercel.app/index_clean.html
• Diagnostic: https://htx-mobile-mechanic.vercel.app/test.html
• Simple Test: https://htx-mobile-mechanic.vercel.app/simple.html

This website template is free to use and modify for your business needs.