Bandstory is a website I created to document my performances from high school band (I played the saxophone!). I have a strong attachment to band, and I would even say that I wouldn't be the person I am today if not for band.
I have always wanted a way to share my band performances with others, but keeping the files on Google Drive was eating away at my storage, and YouTube would copy strike me. In addition to this, I love listening to our high school's past recordings, even if they weren't the best. Thus, I created Bandstory to gather all our concert pieces in one place!
This was my first solo endeavour with React.js, and I now feel more comfortable with the framework! I did a lot of searching on Stack Overflow, asked friends for help, and got frustrated for no reason (it turns out I was reading the error message wrong). I experimented a lot and familiarized myself with the syntax (apparently it's not necessary to use semi-colons in Javascript!).
In the past, my websites would break when I resized my screen, because I would use measurements in pixels and base my CSS around my laptop viewport. However, while working on Bandstory, I used @media to set new style guidelines for smaller screen sizes! Now — for the first time — my website is responsive, and even works perfectly on mobile :)
As of right now, the audio controls are minimal — you click a piece title to play, and click again to stop it. In the future, I'd like to design a sort of audio player to go at the bottom of the website, like the ones I used to see on Tumblr blogs in 2015. It should include more functions such as volume, pause, manual scrubbing to change your position in the song, etc.
Additionally, I have a ton of Javascript files in this project (more precisely, one for every different piece, plus some extras). I'm not sure if there's a way to cut that number down and combine files/information, but if I ever discover it, I'll be sure to come back and update this.