portfolio dev ep4: frontend changes + qol improvements

originally created on 2025-10-24

tags: [coding, portfolio-dev-series]
- - -

so...its been a hot minute. thanks for sticking around.

you might have noticed that there have been some graphical changes to the site. i will go over what is - essentially - all the updates on this portfolio from july 2025 to now.

before i start, i would like to credit a few people for inspiring some of these changes! personally, i suck at frontend (if you couldnt already tell lol), and some people really helped me out when it came to design.

man...now that i think about it, i have a lot of pretty smart people around me. i should be grateful.

the og thank you list from my first blog post

okay, onto the updates!

blog page hub changes

originally, the blog page hub was a static page that listed all my blog posts. the tags were on the right side of the screen, but if the viewport was too small, they would be on the top (before the blog list).

however, this did not look aesthetically pleasing, and the static nature of the page forced users to refresh whenever they selected a tag. to mitigate this, i made two changes:

the first change was harder than the second one...for sure.

in order to make the page dynamic, i made a new component and just stuck it on the server-rendered blog page.

the BlogSearch component is a client component that handles all the filtering and rendering of the blog posts. lets break it down.

we have a few states here:

on load, we will set the tag if there is one in the url.

then, we have a useeffect that runs whenever the tag changes. it will filter the displayed posts based on the tag. the fading logic is just for aesthetics.

there are many helper functions, and i will not go over all of them. they are used to handle tag filtering and transition effects.

in the end, we have a blog that looks like this:

the updated blog hub page

when a tag is clicked, the posts are filtered without a page refresh! only the blogsearch component is re-rendered.

overall, i think it feels more sleek and "modern" now.

icon updates

one of the big changes i made was updating icons on the site. i mainly did this in two areas:

my home page used to have generic links for my socials. however, i wanted something that looked less like a wall of text on the landing page.

because of this, i removed these links and made them icons. they are now in the footer, so my socials can be easily accessed from any page.

in the projects page, i also wanted a less "wall of text" feel. in order to do this, i made the descriptions a bit shorter and added icons for external links.

previously, the projects page had links attached to the titles, and you couldnt tell where they led. now, there are icons that clearly indicate what links are available to each project.

the updated projects page with icons!

the site looks less cluttered!

boxing stuff

i added boxes around certain sections of the website. in particular, i put a box on the home page around my description, and i put boxes around projects and blog posts. this made them pop out a bit more, and it made the site look a bit more organized.

highlighting improvements

you can now tell what page you are on in the navbar! the current page will be highlighted, making it slightly easier to navigate.

this highlighting is also done in the blog tags. the active tag will be highlighted, so you can tell what tag you are filtering by.

spotify status caching

you cant really see the difference here, but i changed how my spotify status is fetched.

previously, it would call the spotify api every time the page loaded. however, this caused a few issues:

to fix this, i made the spotify component fetch the status every 10 seconds.

however - as mentioned earlier - this comes with a ton of api calls to my backend. to mitigate hitting rate limits, i simply added a json object as a cache in the backend.

this way, if the cache is younger than 10 seconds, we just return what we cached before. the fastest we will ever hit the spotify api is once every 10 seconds, regardless of how many users/requests there are on our frontend.

conclusion

again, thank you to everyone who has given me feedback! i really appreciate it. this is a small update, but it is somewhat important!

going forward, my current goals are:

thanks for reading this snippet! see you soon. <3