Kose Productions

I designed and built a minimalistic site for a talented local guitarist and songwriter. Built with HTML, SCSS and vanilla JavaScript.

About Kose Productions

Kosti Orbinski is a ridiculously talented guitarist/songwriter, and an overall great dude. He needed a website to showcase his various musical outlets, starting with his first four EPs.

Fun with Polaroid cards and subtle animations

The beautiful cover images for Kosti’s first batch of EPs were styled to resemble polaroid photos. Very cool! Seeing those original images gave me the idea to recreate a Polaroid layout for the EP cards with CSS. Complete with a handwritten font for the captions and fade-in effects to simulate the development of a freshly taken Polaroid photo.

Orb in the Sky - Merciless Killer

Sick Hill B - The Darkest Corner

Kylmä Syli & Herra Virtanen - Epäkelpojen lelujen saari

Kylmä Syli & Tony Kaikkonen - Suru

Fun with seasonal color themes and Sass maps

Given that this layout is very minimalistic, I thought it would be nice to add a little bit of flair by having the entire color theme of the site change with each season. With JavaScript, the class name of .season–-[season-name-modifier] gets added to the HTML tag depending on the current month. Then I created four different sets of custom properties for each theme’s colors that are then scoped to each season’s ruleset. And finally, I plugged the custom properties into a Sass variable map.

A black and grey winter night inspired theme from December through February
A fresh spring green inspired theme from March through May
A summer sunset inspired theme from June through August
A warm, deep autumn inspired theme from September through November

Conclusion

I’m looking forward to Kose’s next batch of releases! Both as a fan of his music and to see what else I can do with this fun site when I add the new releases!

Back to top