Intro:
As a DJ duo in the world of bass music, having a strong online presence is key to reaching and engaging with fans and for potential bookings. For Stackpackers, I decided to create a website that not only represents our style but also provides a smooth user experience, showcasing our music, shows, and contact details. In this post, I'll walk you through how I built it.
Links:
Framework: Next.js
I chose Next.js for a few reasons — mainly because I wanted to get more hands-on experience with it, but also because of built-in features like server-side rendering (SSR). I’ve read that SSR is great for search engine optimisation (SEO), which made it feel like a good fit for a music project where visibility online matters.
To be honest, I’m still learning about how SSR and SEO really tie together in practice, but I figured my DJ website would be the perfect space to experiment and explore that.
One issue I ran into, though, was with the next/image component. For some reason, it completely broke the navigation between sections on my site, the Navbar wasn't registering where the page was. I spent hours debugging it — even had to step away and come back the next day. Eventually, I swapped out Image for regular img tags, and that fixed everything. I'm still not entirely sure why it caused the problem in the first place.
Styling: Tailwind CSS (with some regular CSS sprinkled in)
I went with Tailwind CSS for styling because it just makes life easier. It was my first big project using Tailwind, I'm already used to Bootstrap so it wasn't too hard to switch. The utility classes let me build and tweak things super fast without writing a ton of CSS from scratch. It’s also great for making stuff responsive without having to overthink it — perfect for a project like this where I wanted everything to feel clean on mobile and desktop. I still used some classic CSS too. A couple of components needed more specific styles, or just things that were easier to handle in a .module.css file — like layering, custom animations, or fine-tuning certain layouts.
SEO & Metadata
As a DJ duo looking to connect with fans, SEO is important. I added Open Graph and JSON-LD structured data to ensure that Stackpackers' website would rank well and display properly on social media platforms like Facebook and TikTok. Additionally, I set up Meta tags and added TikTok/Meta Pixels for tracking user interactions.
One thing I struggled with in an older version of the site was the favicon not showing up consistently — especially in places like Google search results or browser tabs across different devices. This time, I used realfavicongenerator.net to generate all the proper favicon sizes and meta tags. Super helpful and made sure the icon shows up everywhere it should. Luckily I have experience using photoshop, so I was able to quickly design the favicon, and OG image to match our branding (the OG image was actually taken from a previous mix we did, featuring a stunning shot of Melbourne inner city).
🎯 Key Features of the Stackpackers Website
1. Animated Gradient Background
The animated gradient background that flows smoothly across the page. It really complements the electric yellow colour scheme and gives off this kind of glowing blue-sky energy — a nice match for the chaotic energy in Stackpackers’ music. This animation is achieved using CSS transitions and keyframes.
2. Dynamic Visual Overlays: Particles + Lightning
To add more visual flair, I implemented two interactive overlays:
Particle Overlay: Floating particles behind the content create an ethereal effect, keeping things visually engaging as users scroll.
Lightning Overlay: Inspired by the high-energy, electric feel of drum and bass, this overlay adds flashing lightning effects across the screen.
Both of these components are built using React and styled with CSS.
3. Embedded Music Platforms
The website allows users to easily listen to Stackpackers' latest tracks and mixes, by embedding SoundCloud, and Spotify directly into the site. This makes it simple for fans to access the music without leaving the page.
4. Shows & Music Sections
The Shows section is there to keep fans in the loop with upcoming gigs (or past ones if I’ve been too slow to update it 😂). It’s a pretty simple layout — just event artwork in a clean 4:5 ratio, fading in smoothly as you scroll down. Each image links directly to the ticket page. Down the line, I might add more info directly on the site, or maybe even build something that auto-moves older shows into a past events section.
The music section behaves similarly, however these are 1:1 ratio - to match album cover artwork, and link to either Spotify or Soundcloud.
5. Contact Form
Right now, I’ve just embedded a Google Form because it was quick and easy to set up. It does the job for now, even though customising the styling (especially the colours) is super limited. I might switch it out in the future for a more flexible, styled form that blends in better with the site’s look.
6. Interactive Navigation & Smooth Scroll
For navigation, I used smooth scroll to make the user experience feel fluid and natural. The interactive navbar allows users to easily jump between sections of the site without jarring transitions. It’s a small touch, but it adds a professional polish to the user experience.
🌐 Hosting & Deployment
The site is hosted on HostPapa, and I’ve been really happy with their service so far. The customer support team has been awesome — quick responses, and super helpful (even when I ask dumb questions 😂).
📱 Performance & Responsiveness - Mobile-First Approach
I took a mobile-first approach to design, ensuring the site looks and runs smoothly on both desktop and mobile. Since most users will be coming through from social media on their phones, it was important to prioritise mobile responsiveness. Tailwind’s responsive classes made it easy to adapt layouts and spacing, and I tested it across different screen sizes to ensure everything stayed sharp and easy to navigate.
🧠 Lessons Learned
This project taught me a lot — from working with metadata and favicons (which I had tried to implement before but missed some important details), to diving deeper into what Next.js can do. Debugging the image scroll bug was frustrating but satisfying once I found a workaround. It’s always such a great feeling when you go from thinking you're a terrible coder to realising, "Hey, I’m not that bad!" I also realised how much little visual touches, like particles and smooth scrolling, can really elevate how polished a site feels.
This is definitely a step up from the last site I built (which you can check out the repo here). I did a lot of research into other inspiring sites and realised ours was lacking that fresh, animated vibe. I’m already thinking about improvements — like a more customisable contact form, a proper gallery section instead of just a few images, or even an event archive that updates automatically. But for now, I’m really happy with where it’s at and proud of how it reflects both our music and my skills as a developer.
If you have any suggestions or feedback, feel free to reach out!
