At the beginning of last week, I decided to redesign my personal website. The decision was fairly sudden, but really, this was a long time coming - I've known for a while that my website was ready for a redesign. Lately I've been so unhappy with the site that when I apply to jobs, I include a direct link to the blog page instead of including the website url. I've needed to do this for a while and just haven't done it ... so when I felt inspired, I cleared my schedule for the rest of the day and jumped right into the redesign.
I started off by writing some code - I wanted to completely redo the homepage, which was essentially a fancy list of links to other pages, but if I was getting rid of the links on the homepage, I needed to create a navbar (which I honestly should have done in the first place). I created a navbar, and then re-arranged the existing elements in the header.
Spoiler Alert: I ended up eliminating the header because I had a different design idea, so ... I probably should have started by sketching out the design instead of just jumping into coding.
While I was working on the navigation and header, I came up with the idea of combining two pages, the resume and tech stack pages, into one "about" page that would have a basic overview of me, my experience, and my skills. I decided to keep the downloadable resume (which had previously been on the resume page) on my about page so that people who wanted more details about my experience could access that information easily.
One of the major reasons for the redesign was to replace my useless index page, so I put a lot of thought into what I thought belonged on the first page of my website. It needed to be enough information to give people a basic overview of who I am, what I do, and what is important to me, but not so much content as to be overwhelming. Ultimately, I decided on three sections - a short bio (who I am), a little bit about my latest project (what I do), and a paragraph from my latest blog post (what's important to me). Once I knew what I wanted on the page, I had to write some new GraphQL queries (so that it would automatically update the blog post and project and I didn't need to update those sections manually every time I added something new), which was a good opportunity to see how much I had learned about GraphQL (I'm still not an expert, but I'm getting pretty decent at writing queries ... with the help of GraphiQL, of course). The hardest part of the index page was probably writing my bio - I hate talking about myself, and writing bios is something I have always struggled with. After a lot of thought, I was able to write a short blurb that felt like a good introduction to who I am.
Once I had the index page done, it was time to move on to the even harder "writing about myself" part - the "about" page. I wanted to give a short overview of my career and what tech I've worked with, but I also wanted to include some information about my pre-development background and who I am when I'm not sitting in front of my code editor. I originally decided on three paragraphs - dev career overview, pre-dev career overview, and personal overview - but eventually decided to add a separate paragraph describing the technologies I've worked with because I didn't want them to get lost in the career paragraph. I considered adding some pictures of me doing non-dev things (my first thought was a race picture or a picture with a baseball mascot), but I decided that without a dev-related picture to balance it out, it didn't feel right. My goal is now to get a picture of me doing something dev-related (possibly speaking at a meetup?) so that I feel more comfortable posting these non-dev pictures.
Another page that needed a lot of work was the project page, where I list some of the projects I've worked on recently. When I initially designed the site, I just had boxes with some information about the project, with the intention to add pictures and beautify it later. Well ... that never happened. During one of my early color experiments (more on that later), I saw that the project page just didn't work with the colors I was looking at, and I realized that now was the perfect time to redesign it and take it from a list of things to a showcase of my past works. I couldn't really figure out what I wanted the project page to be, so I looked at other developers' portfolios for inspiration before deciding on an approach. Eventually I decided on something that felt simple enough to match the classic, simple look I was going for, but gave enough information about the projects to show what I can do.
I'm also considering redesigning the blog list and individual blog pages, but I'm not 100% decided on that. I may decide to tweak those a bit later, but as of right now, those pages will be the same (other than the header/footer that are being changed/eliminated throughout the site) in the initial redesign launch.
One of the things more difficult I needed to figure out while I was working on the redesign was what colors I wanted to use. I definitely wanted some fun bursts of color on there, but since I also want to ensure that my website is fully accessible, I needed to ensure that there was sufficient contrast between the background color I choose and the accent colors I wanted to use. I decided that I wanted to do a blue and cream color scheme, but then decided to throw in some medium purple instead, and then a light blue instead of a cream, but the purple against the blue wasn't a big enough contrast ... this is still a work in progress. Picking colors is really hard, and I have a huge amount of admiration for people who have to do this every day as part of their job.
My plan is to try to have the redesigned site live before the end of the month. Once it launches, I plan to continue to make small improvements now and then - whether that means redesigning the blog pages, changing around how I organize the CSS (and possibly using either SCSS or a CSS-in-JS solution), or making small tweaks to my bio or how I display projects - I don't want this to be a one and done change. I want to constantly be improving and applying the new things I learn to my website.
This website redesign was a little more difficult than I expected, but was still a lot of fun. It's nice to change things up sometimes (especially when it means writing more fun code), and I've definitely learned a few things about myself as part of the redesign. Stay tuned to see the final results!