Devlog for personal website

I felt bored so I wanted to make a personal developer website.

Day 1 7/18 - MVP

I started from a Next.js scaffold and turned into a single column portfolio. I was going for a minimalist look without any visual noise, so kind of like a digital resume. I plan to add some more interesting stuff but for day 1 I just got the basic structure, black/white styling, and theme toggle. It was initially too small so I had to scale everything up a bit so the website wasn’t cramped. I also made sure to fix the page to the viewport so that there was no scrolling when viewed on a computer. Finished the day off by putting in my info into the website.

Day 2 7/19 - Spotify and Deployment

This day I added some fun stuff and deployed the initial MVP. I added a Spotify widget that uses the Spotify web API to get my current playing song as well as last played and show a little status bar on the bottom footer of the website. The status bar dynamically changes color and updates every 30 seconds or so. I polished up some UI and animations, such as making icons like Instagram, Mail, Sun/moon prettier and having light/dark switch transition smoothly. I made a custom favicon of the character of my surname and made it the website icon, which was pretty neat to see. To end the day off I deployed my first version of my website with Vercel and hosted it at andrewjhu.com

Day 3 - Spotify visualizer (today)

I spent a few hours today trying to figure out how to make a psuedo audio visualizer appear in the Spotify bar. I found online some CSS + JS that uses the Perlin 1D visualizer and ported that over to React. A big challenge was to get the visualizer to look natural and “jumpy” like an actual audio visualizer would look. Claude lowkey messed it up really bad so I implemented myself a useInterval hook that updates the base height value array with random values every 5 seconds -> looked prety good to me so thats what I stuck with. On top of that I fixed bugs where the visualizer would freeze when pausing and resuming a track which was a useEffect dependency issue.

TODO: add some cool transitions, QoL UI improvements, and a new page for extended projects showcase and maybe a blog