Before this, it’s built with Vue. You can still find the source here.
Skip this next paragraph if you’re not interested in my old site’s origin story.
My old site is structured more like a resume than a personal self intro. It’s rather serious by nature since it was built at a time when I was looking my first job out of college. I stole the design from the personal site of a great friend of mine, Pat Pataranutaporn (just one out of the plethora of pages) and dulled it down a little. He rebuilt his entire personal site shortly after but I stick with it since I built it in a way that’s rather easy to maintain (as in adding and removing stuff overtime). It served me well during those times but at this point a redesign is rather long overdue.
I can’t really do design (unless I’m given a rigid component library then maybe 😅) so I looked up how some of the seasoned software engineers design their site and pick out the parts I like about them. Here are some of the websites I took inspiration from:
One of the most obvious common traits among them is how minimal they are while still showing a lot of personality. The other being that 2 / 3 have a dark mode toggle while Jane’s site is dark mode only. I stick with these ideas and decided to be more playful with my text colors especially since I can’t draw.
One other takeaway I had was that I really liked the monospaced font used on Cassidy’s site. I tried Victor Mono initially since I really like it (and use it day-to-day on all my text editors) but I find it’s readability isn’t great for longer paragraphs. I decided to settle for Fira Code instead (first font that introduced me to ligatures for programming).
Note: Monospaced fonts in general aren’t meant for regular text reading anyway so this is something completely within expectation.
One important thing of note is that, the toggle “button” (the
detail component) has to be at the same level as the top level of the rest of the components on the screen. I keep my toggle on the right which is sufficient to prevent colliding / blocked by other stuff on screen.
I tried my best to make everything as modular as possible so it should properly reorganize itself dynamically based on the given screen size. However, there are always exceptions and this is where
@media screen and (max-width: 1000px) comes in handy for addressing these edge cases.
As I add a few more sections to my side, I started to realize that the link menu might not fit on certain display sizes. In general, it just follows this w3c guide. I originally did one implementation that used the similar idea of the dark mode toggle above but I opted for
:hover instead of
[open] due to its interaction where I think it makes more sense to be dismissed when I tap on random places on the screen.
In order to make it more accessible, it is also important to add the appropriate aria labels. This page has a rather comprehensive guide on the proper labels to add for each fields.
Truncation (somewhat unrelated)
This is more for the blog part of the site where I find the default truncation being too lenient thus generating some of the overly long (and not uniformed) summary text.