Designing and Developing My Personal Website Update in One Weekend

I attempted to go for something that looked like the JavaScript logo, but my font of choice had other ideas.

Each summer I typically have more time to focus on improving my development skills. Because of this, I like to take some time as school is starting back up each year to make tweaks to my personal website.

This year was no different and I feel like I had learned a lot and there were new things I wanted to add to my site. However, I couldn’t just let this span over a few weeks, I wanted it done as soon as possible so that I could start applying to jobs for next summer.

Things worked out well when my fiancé was going to spend a weekend in Nashville for her bachelorette weekend. I decided to use this weekend at home alone to challenge myself to completely re-design and re-develop my personal website from the ground up.

Challenge accepted. Challenge completed. Here’s how I did it:

Step One: Picking Colors and Fonts

Going into the weekend, I knew I wanted to try a darker theme on the website. I’ve always been the person to utilize dark mode in any app that is smart enough to provide it. I wanted my personal website to be no different.

I’ve generally had the same color schemes for my websites over the past few years and I wasn’t planning on changing too much, but I knew I wanted to get the dark grey right this time so it didn’t seem too dull.

After playing around with adding touches of blue to my dark grey, I settled on #242529. It ended up being a nice color and a super easy to remember Hex value. I didn’t worry too much about the orange color and ended up just tweaking my previous orange slightly to fit better with the new grey. I quickly opted to use #ff8135. While I’ve usually used a slightly impure white for my light color in the past, because it was going to be used for all of the text and I had chosen to go with a lighter grey for the background, I opted to use plain white (#000000) as my main text color.

Now for my least favorite part of any web design I do: picking a font (or fonts in most cases). In the past I used to always use the same fonts that were at the top of Google Fonts. I’ve done my fair share of websites using Roboto and Open Sans. Lately I’ve attempted to branch out more and I wanted my updated version of my site to have a simple font, but one I hadn’t used before.

After some slight deliberation, I settled for Noto Sans as both my heading and main font. At first I wasn’t super sold on the font, but as I got into the design later and eventually when I had finished the site, it looked better than I originally expected.

This whole process occurred from 5:00 to 6:30pm on Friday night.

Step Two: Laying Out a Design

I’ve always enjoyed the design side of development, but I also wouldn’t really claim to be a ‘designer’ by any means. I’m just a developer that appreciates things that look good.

That being said, I have grown to enjoy laying out an entire design in Photoshop beforehand so that I can write out HTML and my styling faster without having to think about spacing and things later in the process.

As for this design, I sat down with my fresh new copy of Photoshop (thanks to Auburn’s recent announcement that all faculty and students would get Adobe Creative Cloud for free) and planned to lay out the design. I have always tried to stray further and further away from my ‘typical’ site layout when doing my personal site, and this year I went all in on it being ‘different.’

I aimed for my site to be laid out like a story with different parts where a visitor would just quickly scroll through each section. In my design, I originally had a simple navigation at the bottom of first view, but when it came to development, I ended up scrapping it all together and am still happy with how it turned out.

Other than my aim to use a different style for each section of the website, I won’t go into too much detail about my design choices. Like I said, I’m not a designer, so I don’t want to pretend that I had important reasoning for each of my design decisions.

Instead, I’ll leave you with two of my favorite sections of the website: the main view you see as soon as you land on the site (above) and the section highlighting my favorite podcasts that I listen to daily to learn and entertain (below).

Each podcast icon does a little ‘grow-and-twist’ animation on hover just to add a little bit of flavor to the section.

All of my design work took place from 8:00pm to 12:30am Friday night. I was ready to get up Saturday and knock out the development.

Step Three: Setting Up My Environment

Saturday morning I got up later than I had planned, but figured I needed the rest if I was going to know out my entire site in one day. Once I finally got started it was already 11:00am and I still needed to set up my code environment on my new computer.

As if designing and developing my new website wasn’t enough of a fun challenge, I decided to also do it on a almost brand new computer that I had just installed VS Code on a few days prior.

From about 11:00am to 12:30pm I went through and re-installed all my favorite VS Code plugins as well as laid our my file structure and moved the previous version of the website to a separate folder within the site structure.

For this project, and almost all other versions of my website, I opted to just use regular HTML5 and Sass/SCSS.

At 12:30pm on Saturday, I officially opened a new Git branch, 2018-update, and was ready to get to work…after lunch.

Step Four: Layout and Styling

After spending so long on the design and getting my environment set up, I figured I would be able to get off to a quick start on with the code. Well, I was wrong. I don’t know if it was because I was trying too hard to make it perfect or that I was attempting to do a few things I have typically not done, but the laying out the main view of my website took way longer than I was planning.

I couldn’t get the logo and text to sit like I had planned in my design and scaling down to mobile wasn’t working like I had planned. However, after about three hours of messing around (and eventually deciding to scrap the navigation bar altogether) I had a main view for my website and I was ready to crank out the rest.

The longer name for one of the certifications made for an interesting layout, but it shouldn’t look as weird when I add others in the future.

Like I mentioned in the design phase, I tried to do something different with each section. Some of these layouts were similar to things I’ve done in the past, but one of my favorite layouts on mobile ended up being the certifications section. I’ve played around with the side scrolling elements in the past, but mostly only for navigation and text.

Also, this was my first time using rem's on a project before (I know, I know) and it led to some weird scaling of text. In hindsight I probably should have used em's or normal px's in some sections, but ultimately I’m fine with how the text turned out and using rem's did end up being simpler to go from section to section and everything stay consistent.

Like the desktop view, I tried to keep each section as a separate view so that one section could be viewed at a time, but each other section was quickly accessible with a simple swipe up or down.

Because I often don’t take the time to make a mobile design, but instead just keep mobile in the forefront of my mind while designing my desktop layout, sometimes things don’t work out like I thought.

I needed a little extra time to get the responsiveness nailed down on the first few sections, but once I had the first two or three sections done, I was able to get through the final few much quicker.

This was a nice pick up in speed, because even with me hurrying through the last few sections, I was still up until 1:00am finishing the code and styling for my site.

I worked for almost 12 hours, from 2:00pm to 1:00am on Saturday with a quick break for dinner in there somewhere. But, with that, I was officially done with my site.

Step Five: Going Forward…

While I am did finish my website in just one weekend (32 hours if you want to be technical), I obviously have a few more things that I want to add when I get the chance. Because this is my personal site, I want it to have a few extra things that offer a bit of uniqueness and fun for those that visit the site as I apply for jobs.

I’ve already peppered a few little animations throughout the site, but I want to add even more fun movements and utilize JavaScript to manually control some of the events to make the site take an even bigger step in showing off my front end abilities.

Right now the site is broken into sections with one view at a time, and I’d like to add an ability to jump and snap to these sections so it feels as nice as it looks when you scroll to just the right point within each section.


And with that, my site, and my own challenge to myself, are complete. You can find my live website at www.jacobvarner.com and I hope you enjoyed the walkthrough of my thought process as I designed and developed my personal site in just one weekend.

If you have questions or comments about the site, or just want to keep up with my work, you can follow me on Twitter, connect with me on LinkedIn, or check out my little projects on CodePen.

Thanks for reading!