YEAAAH THE PORTFOLIO HAVE A RADIO NOW!!
Today i worked mostly on improving some parts of my portfolio, especially the “NOW.PLAYING” panel, at first, it was supposed to be just a simple button to access my Spotify playlist… but well, things escalated REALLY quickly.
I wanted the panel to actually show some music, so i created a small playlist with some songs i like and built a random track system using JavaScript!
Now, every time the site starts, it randomly selects one of the songs and displays its name, artist and album cover.
but yeah, it wasn’t enough, not even close.
Each song also has its real duration stored in the system, so i made an ASCII playback bar:
PLAYBACK [|||||||||………….]
The timer progresses while the song is being displayed, and when it reaches the end, the site automatically chooses another random song and starts everything again!
I also made sure that the same song can’t be selected twice in a row :D
We originally tried using the Spotify API to automatically get the playlist data, but Spotify’s current requirements made that unnecessarily complicated for what i wanted to do. Sooooo… i just made my own little system instead KKKKKKKK ( Brazilian laugh)
After that, i spent some time improving the design: smaller typography, album covers with a thin green border, rounded corners, better spacing, centered controls and a bunch of tiny adjustments until everything finally looked right.
So now this tiny panel has: RANDOM TRACK SELECTION, ALBUM ART, REAL TRACK DURATIONS, ASCII PLAYBACK, AUTOMATIC TRACK SWITCHING, SPOTIFY PLAYLIST ACCESS….And somehow this all started because i thought:
“wouldn’t it be cool if NOW.PLAYING opened Spotify?”
…yeah.
I also prepared the GitHub repository for the portfolio and kept improving some of the site’s links and general design today.
There are still a LOT of things i want to build here — and i may or may not already have an idea involving the LOG.TERMINAL and some tiny games…
But that’s a problem for tomorrow :D
See ya!
Comments 1
posted 20/09
Sign in to join the conversation.