Building BlueMountainDJ.com: A Modern Wedding DJ Website with Tailwind CSS and JavaScript

As a web developer, I recently had the opportunity to create BlueMountainDJ.com, a single-page website for an award-winning DJ service in Blue Mountain, Ontario. This project was an exciting blend of modern web technologies, creative design, and user-focused functionality, all tailored to showcase a premium wedding and event entertainment business. In this post, I'll walk you through the technical highlights, design decisions, and key features that make this site stand out.

Project Overview

Blue Mountain DJ, led by industry veteran DJ Marty C., needed a website that reflected their 25+ years of experience and 10,000+ successful events. The goal was to create a visually engaging, responsive, and SEO-optimized site that would attract couples planning weddings, corporate event organizers, and party hosts. The site needed to highlight their services (DJ, photobooth, karaoke, lighting, and more) while providing an intuitive user experience and strong calls-to-action (CTAs).

I chose a tech stack of HTML, Tailwind CSS, and vanilla JavaScript, hosted on GitHub Pages, to deliver a lightweight, performant, and maintainable solution. Here's how I brought it to life.

Technical Highlights

1. Responsive Design with Tailwind CSS

To ensure the site looks stunning on all devices, I leveraged Tailwind CSS for its utility-first approach. Tailwind allowed rapid prototyping and consistent styling without writing excessive custom CSS. Key responsive features include:

• Fluid Grid Layouts: Used Tailwind's grid system for sections like services (grid-cols-1 md:grid-cols-2 lg:grid-cols-3) and pricing packages (grid-cols-1 md:grid-cols-2 lg:grid-cols-4) to adapt seamlessly across screen sizes.
• Mobile Navigation: A hamburger menu toggles a full-screen mobile menu with smooth transitions (transform: translateX) for smaller screens, while the desktop menu uses a flex layout.
• Dynamic Typography: Combined Playfair Display for elegant headings and Inter for clean body text, with responsive font sizes (text-5xl md:text-7xl).

2. Engaging Hero Section with Video Background

The hero section is the centerpiece of BlueMountainDJ.com, featuring a looping video background (<video autoplay loop muted>) overlaid with a semi-transparent gradient (bg-black bg-opacity-50). This creates a cinematic feel that instantly grabs attention. I used CSS positioning and transforms to ensure the video scales correctly across devices, with a fallback gradient for accessibility.

Floating music note icons (<i class="fas fa-music music-note">) animate upward using CSS keyframes (@keyframes musicFloat), adding a playful nod to the DJ theme. The hero also includes trust badges and a scroll indicator to guide users to the next section.

3. Smooth Animations and Scroll Effects

To enhance user engagement, I implemented several animations:

• Fade-In Effects: Sections use the IntersectionObserver API to trigger fade-in animations (opacity and translateY) as they enter the viewport, creating a polished reveal effect.
• Stats Counter: The stats section animates numbers (e.g., "10,000+ Events") using JavaScript intervals, triggered only once when the section is visible to optimize performance.
• Sticky CTA Button: A "Book Now" button appears after scrolling 200px (IntersectionObserver and scroll event listener) and hides when the contact form is in view, ensuring it doesn't obstruct key content.

4. Interactive Features

• FAQ Toggles: FAQ items use vanilla JavaScript to toggle answers (classList.toggle('hidden')) with smooth transitions and chevron icon swaps (fa-chevron-down to fa-chevron-up).
• Scroll-to-Top Button: A fixed button (position: fixed) appears after scrolling 300px, with a smooth scroll to the top using window.scrollTo.
• Navbar Scroll Effect: The navigation bar transitions from transparent to a blurred, dark background (backdrop-filter: blur(10px)) on scroll, enhancing readability.

5. SEO and Schema Optimization

To boost search visibility, I implemented comprehensive SEO practices:

• Meta Tags: Detailed <meta> tags for description, keywords, and Open Graph/Twitter Cards ensure rich social sharing previews.
• JSON-LD Schema: A ProfessionalService schema provides structured data for search engines, including business details, address, and operating hours.
• Canonical URL: Prevents duplicate content issues with <link rel="canonical">.
• Semantic HTML: Proper use of <section>, <nav>, and ARIA attributes (aria-label) improves accessibility and crawlability.

6. Formspree Integration

The contact form uses Formspree for serverless form handling, with fields tailored for event inquiries (e.g., event date, guest count, package selection). JavaScript adds a loading state (fa-spinner) on submission to enhance user feedback.

7. Performance and Accessibility

• Optimized Assets: The video background (event.mp4) is compressed for fast loading, with a fallback gradient for low-bandwidth scenarios.
• Accessibility: Semantic HTML, ARIA attributes, and high-contrast text ensure inclusivity. Form fields include required attributes and clear labels.
• Custom Scrollbar: A styled scrollbar (::-webkit-scrollbar) adds a subtle branded touch without compromising usability.

Design Choices

The design draws inspiration from modern event industry trends, with a focus on elegance and energy:

• Color Palette: Gradients of blue, purple, and pink (from-blue-600 to-purple-600) reflect the vibrant, celebratory nature of DJ services, with yellow accents for CTAs.
• Typography: Playfair Display adds sophistication to headings, while Inter ensures readability for body text.
• Visual Hierarchy: Bold headings, spacious layouts, and animated CTAs guide users through the site, from the hero section to the contact form.
• Micro-Interactions: Hover effects on cards (card-hover), buttons (glow-btn), and pricing packages (transform: scale) create a dynamic, engaging experience.

Challenges and Solutions

One challenge was balancing the video background's visual impact with performance. I optimized the video file and used playsinline to ensure compatibility on mobile devices. Another challenge was implementing smooth scroll behavior with a fixed navbar. I used scroll-padding-top: 80px and adjusted scrollTo offsets to account for the navbar height, ensuring accurate anchor navigation.

Key Features for Users

• Service Showcase: Six service cards (Wedding DJ, Corporate Events, Photobooth, etc.) with icon animations and detailed lists.
• Pricing Packages: Four tiered packages (Silver, Gold, Platinum, Diamond) with hover effects and a "Best Value" ribbon for the Platinum package.
• Testimonials: Real client reviews with star ratings and gradient avatars for authenticity.
• DJ Marty C. Section: Highlights the founder's credentials, with a glowing image effect and a quote block for personality.

Future Enhancements

The client could get me to add a photo gallery section using a lightbox plugin for event showcases. I could potentially integrate a booking calendar API for real-time availability checks. A blog section could also share DJ tips and event planning advice to boost engagement and SEO. 

Conclusion

Building BlueMountainDJ.com was a rewarding project that combined technical expertise with creative design. The site not only showcases a premier DJ service but also demonstrates the power of modern web technologies like Tailwind CSS and vanilla JavaScript to create a fast, accessible, and visually stunning experience. Check out the live site at BlueMountainDJ.com and let me know your thoughts!

Have you built a similar single-page site? I'd love to hear about your approach in the comments or connect on Twitter/X. If you're interested in a custom website for your business, feel free to reach out!