Stay home for the holidays and check out this site from WESTSIDE BOOGIE:
(The above link is a rough archive of the original site, I have more complete images below).
This is the home page for the rapper Boogie. It's named for his 2019 album "Everythings for Sale" which was one of my favorites that year.
He's now going by the name WESTSIDE BOOGIE so I'll be using that from now on. I liked "Boogie" but I think he may be changing it to avoid confusion with A Boogie Wit Da Hoodie. Aesop Rock never slowed down A$AP Rocky, but I understand the change.
Anyways, this is a pretty straight-forward site so let's hop in!
EverythingsFor.Sale
First off, I love a site with a non-standard domain extension, in this case everythingsfor.sale.
The next thing to pop up – literally – is a group of six 90's era pop-ups:
You can refresh the page to get different placements of each "ad", but if you're on mobile you might not be able to see them all. For that reason (and just in case his site changes in the future), I added all the pop-ups to the end of this post.
The Animation
Before moving on to the rest of the site, the part that interested me most were those pop-ups so I wanted to checkout their code.
Thankfully we've got some great source code that we can read directly this time, enjoy:
I always like to see what JS frameworks sites are using and am happy when I find sites like this that eschew the larger frameworks like React and Angular when Javascript alone will suffice.
Analyzing the DOM
As I keep analyzing these sites, I'm learning new ways to find the source files that manipulate the DOM (Document Object Model).
In this case, I just used the inspector to look at the pop-up images, and found a unique sounding element ("enter-anim" in this case).
I then searched for that string in the browser dev tools which lead me to the source from the previous section.
"Desktop"
Once you enter the site proper, you're greeted with (depending on your age) some Windows XP nostalgia:
This led me to look up WESTSIDE BOOGIE's age and sure enough we're in the same ballpark which makes the art direction of the site click even more.
If you peruse the source code further you'll see some nifty well-commented code on the animations and functions of the Windows XP home screen. You'll also find that the site is built on the Drupal CMS.
Beyond that if anything else on the site interests you, it should be there in the source for your own exploration. That's why I love unminified code so much (which I went into on my previous post).
Everythings For Sale
So with that I encourage you to check out the site but most importantly check out his album "Everythings for Sale".
As someone who was slower to appreciate modern melodies in rap (really just the autotuned ones), WESTSIDE BOOGIE's raw vocals and emotion really helped bridge that gap for me.
As one final push, I leave you with the album's short film:
Bonus track! Bonus track!
As promised here is your pop-up post script, all 6 pop-ups in full resolution:
If you enjoyed this breakdown, please feel free to retweet and share.
Peace!