Moon-Bound Connection is a Spotify lookalike website, inspired by a playlist that a friend and I created together. It contains songs that are meaningful to us and our friendship. We wanted a place to document why the songs were special to us, and decided that a website was a lot cooler and more fun than a simple Google Docs file. As such, Moon-Bound Connection was born!
View the actual playlist here: https://open.spotify.com/playlist/12GF3zySyMTd86armWIvzc?si=5caa55c4691a403c
We first began with designing the website on Figma. Here, we decided which parts should be clickable, and got some help with the CSS values. This was my first time using Figma, so I was in the process of learning all the controls and features.
Once that was done, I began building the website with only HTML and CSS, searching up my inquiries on the way. My original plan was to redirect to different HTML files every time a new page was to be shown. However, I then discovered Vue.js, and used that in my project instead!
In the end, I have become more comfortable with HTML and CSS, and I now have functional knowledge of my first Javascript framework.
As this was my first major project, I did not make the website fully responsive. The CSS tends to break on different screen sizes, such as on mobile or when you resize your browser window. In the future, I hope to revamp the CSS so it looks the way it should on all devices and viewports.
Next, I'd like to add an "about" page, where the Thunder 78 profile button in the top right corner is clickable. This was in the original plan, but it was a bit bugged, so I left the code out for now. I would also like the layout of our song descriptions to be nicer; as of now, the design is a bit boring.
Finally, the real playlist contains 22 songs, whereas the website only has 7. This is because my friend and I have yet to finish writing our thoughts on the rest of the playlist! Hopefully sometime soon, we will find the time to continue expressing our emotions.