Updating this website to actually be good

I’ve had my personal portfolio site for about year now, and finally recently decided to commit to a complete rebuild. The current design looks a bit bland, but my main focus is on making something not overly generic, as it is very easy and all to common to come across create modern, self-agrandizing sites. (For reference, check out Sylvan Franklin’s videos roasting some dev portfolios).

Because any portfolio site is content-heavy, I decided to go with Astro as my build framework, as it is content-first and static for speed, while also allowing islands of interactivity.

• Main pages: Home, Skills, Projects, Blogs

Home: Pretty standard. I think it’s cringe to mention things like “aspiring developer” or “full stack expert passionate in ___” so I put a short semi-meta introduction.

Skills: To be, it is difficult to parse a long list of abstract skills and their relative importance, so I think a natural way to display them is with a graph. Determining the parameters of the graph is tricky to balance visual clarity though: if I list or relate too many skills together, it loses most meaning. In the end, I settled on the name-image circular node model with simulated repelling and unified random noise force, highlighting edges that are used together in the same project.

Projects: This was the main thing that I wanted to be very cool, and I got inspired by a really cool infinite zoom effect on “Chomosuke’s site”. However, their effect was written in Dart; While Dart is great for handling these vector scale animations, it is not compatible with Astro. Thus, I took on the challenge of translating the logic into React.

(Go over it here) Blogs: What you’re seeing right now. I had a whole lot of content to translate over, but one of the benefits of Astro is that content can be automatically organized and formatted as something like structured mdx files. So, it was pretty simple to add a bunch of attributes to the blogs, and have each blog page be generated.