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

DevLog #1 - Landing Page and Sign-in. Finished making the landing page for my sat prep website. I like the minimalist and simple look I went for. The website uses NextJS and Tailwind for styling, and I just implemented Supabase to handle email signups/auth and connected Google OAuth to allow google signups as well. A big challenge was getting the sign up to work because authentication with Supabase requires a lot of boilerplate, as well as configurations in both Supabase console and Google Cloud console. Will be working on the question bank next.

terminal user interface

i implemented the feature where users can open a log file with the database instructions. The tui uses the bubble tea framework so I just wired in the list component from bubbles.