BY SARAH PALUSZNY
I have built four different resume websites, all of which I mostly finished but never went back to update. This was because I used HTML and CSS to write them, which can be difficult to maintain. After getting familiar with Next.js and React, I thought it was time to try making anotherāone that would allow me to add projects and move others to archive with simple changes.
This was one of my first drafts of my site in Figma. My main inspiration for the website was newspapers. I wanted something simple and easy to understand, yet aesthetically pleasing. At first, I went a little too hard on the design aspect. It was getting difficult to format, and I knew I wasn't using React and Next.js to their full potential. All the posts were hard coded into the website, instead of using components. I knew if I continued with this site it would end up like all my others, quickly outdated in work and style, making me start from scratch again rather then working on the real projects I want to be making. I decided to go back to the drawing board, aka figma, with a simpler design approach and a more sophisticated component system. I took note of what I liked and what I didn't and started on a whole new design and approach.
The Design Process
The thing I liked the most about my first version were the posts and that was about it. I wasn't happy with most of the fonts, the color, or the layout.
My biggest enemy: color palette, feeling like I'm 5 years old again not being able to decide what crayon to use first on my brand new coloring book. I decided this project, I wasn't going to do it. It's going to be all black and white with the only color coming from images. I later ended up adding colors to the tags to help with organization of my skills but other then that I stayed true to my word. I also decided to add a dark mode. There is a lot of white and I didn't want to blind anyone viewing my site at night. It would also provide me another design challenge that I would be eager to tackle. Although it wasn't much of a challenge, Tailwind makes this super easy. I had to troubleshoot a little since there were not recent tutorials with Tailwind v4, which migrated all Tailwind config to globals.css but later found a key piece of code I needed in the Tailwind documentation. Side note, did you know you could change the selection color of websites super easily? I just found this out and went a little crazy with it on this site. Check it out, highlight something!
Before I was using 5 different fonts, now I'm only using two, inria sans and inria serif. They have three different fonts weights light, regular, and bold. Allowing for enough customizablity without being overwhelmed with choices.
Original design
This was my first version of my website. I wasn't using React to it's full potential. All the posts were hard coded into the website.