An indie music commentary website and podcast created using Bootstrap, JavaScript, and LESS.

Homepage
The AudioHammock page uses a simple 3-column layout focusing on navigation, primary content, and social proofing and secondary value. On mobile the menu folds up into a hamburger menu in the top right. When creating this layout I was hoping to design something sleek and informative yet not overwhelming and so I tried to balance the white and neutral space to let the artwork of the content lead the user journey.
Album Reviews

As an avid Pitchfork, Consequence of Sound, and Indieheads reader I wanted the focus of the content to again be on the music itself. I often find myself listening to music based on moods and preferred genres that fluctuate like the wind so instead of just listing albums out in linear fashion I wanted users to quickly be able to sort albums based on genre. For the albums themselves each one was stored in an array based on genre and toggled to display and animate into position based on the album type selected by the user.
In addition to genre sorting I wanted the artwork to invoke interest from the user as opposed to informative text so all the artist info is reserved for album hover.



