# Music Is Life (V1)

## About

Music Is Life is a website that features information and music about some of the artists I like. I wanted to create this website as a way to sort of shed a light to these music artists since I would say that they are "niche" (no gatekeeping lol).

This project uses Bootstrap (including Font Awesome and Bootstrap Icons), HTML, CSS, and Javascript.

This website is only computer friendly (so far).

**Time Spent:** ![Hackatime: Time Spent on This Project](https://hackatime-badge.hackclub.com/U08UGTGS4HE/musicislife)

For the Athena Award: [![Athena Award Badge](https://img.shields.io/endpoint?url=https%3A%2F%2Faward.athena.hackclub.com%2Fapi%2Fbadge)](https://award.athena.hackclub.com?utm_source=readme)

## How to Use this Website

For each artist page, there is a video, a profile, and 4 vinyls. The vinyls are interactable, so when you click on them, they will play a song from the artist. Clicking on them pauses the music (this is the feature that I'm most proud of).

## Journey

At the beginning of creating this project, I had planned to feature a higher number of artists to make pages about and wanted to feature a record player that users could "use" to make it a bit more interactive. However, at a certain point I realized that it would be too hard for me to add all of these features and design each artist's page (at least for now). This is why this is the first version of this tribute site since I wanted to start somewhere small. I didn't want to overcomplicate things for myself and I also wanted this project to be possible to complete but something that will also challenge me at least a bit beyond my current abilities.

I started with about 40-60 artists, and narrowed them down to 5, then to 3 artists. I chose these 3 artists since they are the most memorable to me at the moment.

## Resources

For future reference, I like to list some articles/forum posts that helped me complete the project.

### Tutorials

* Sidebar: [How to Make a Sidebar in Boostrap 5](https://youtu.be/LjsCyH_5ERs?si=ADGBxUEj7k2FGBBl)