loading...
Cover image for Refreshing My Personal Website

Refreshing My Personal Website

robertcoopercode profile image Robert Cooper Originally published at robertcooper.me ・5 min read

Originally posted on my blog.

I've decided to redo my website, yet again. This is the 3rd or 4th iteration of my website.

Here were the motivations and goals for the redesign:

1. Host my blog articles on my own website

I've been writting a lot on both Medium and a bit on Dev Community, but I want to have a bit more control in the design and presentation of my blog posts. One of my biggest gripes with Medium is the lack of syntax highlighting for code blocks.

2. Better highlight past projects

In 2019, I want to work with a few clients on a part-time basis to supplement the income I make through my full-time job. The first step to doing that was to make sure I can showcase some of my past work in a favorable light.

3. New tech stack

My previous website was using gulp to build HTML pages from templated pug files. This wasn't that bad since I only had one page on the website, so there wasn't a need to move between pages. However, now that I was going to include a blog, I was going to have to have multiple pages on the website and thus I wanted to use React to get the performance associated with a single page application.

Design

So with those three goals in mind I started to research blogs that I admired. I made sure to screenshot and anotate any elements that stood out to me. I gathered all those screenshots in my design app of choice: Figma.

A collection of screenshots from the blogs and websites that I admire.

A collection of screenshots from the blogs and websites that I admire.

After I gathered all the pieces of inspiration, I went ahead and designed my own website. I knew I wanted to have both a light and dark theme to my website, so I made sure to design both variations.

The designs for both light and dark theme pages of my new website.

The designs for both light and dark theme pages of my new website.

The reason why I create design mockups instead of just coding the site straight away is so that I can quickly test out which designs look good. I find that I end up doing a few design interations before coming up with a final design. Doing those different variations in code rather than in a design software would take much longer. I also find it helps me better organize my work when I design the project before going into the code, and it ultimately saves me time.

Home Page

The home page, being the first place site visitors land when they visit my site, includes a short description of who I am, the blog articles I've recently written, as well as a preview of the recent projects I've worked on. I made sure to animate elements on the page, using the animate on scroll library, to make the experience slightly more enjoyable.

The home page elements fade into the page as a user scrolls scroll.

The home page elements fade into the page as a user scrolls.

I've included a headshot of myself and I tried to crop out all of the background from the image. Unfortunately, I don't have the design skills required to get rid of some of the white background from my hair and it is prooving to be quite the annoyance every time I see it.

Lingering white background that remains on Robert's headshot image.

Lingering white background that remains on the headshot image 😑

Projects

I've created a page to better showcase my past projects. Each app is presented in a similar way, with screenshots of the apps found within desktop/mobile device frames. Each project is also given it's own section with a short description along with keywords indicating the main technologies used for the projects. A call to action section is found at the bottom of the page for any visitors interested in working together on a project.

In the future, I plan to create full pages for each project in order to present them as full blown case studies.

The new projects page of the website showing projects for the React Montreal Meetup group, the Meat Journal mobile app, and an ecommerce Shopify theme called Daisies and Dandelions.

The new projects page of the website showcases three recent projects and a call to action link at the bottom of the page.

Blog

The blog is where things get exciting technology wise. The website is built with React and Gatsby. I'm also using gatsby-mdx which allows me to write my blog posts using MDX. MDX is a different flavour of Markdown which allows for the use of JSX and React components to coexist with markdown in the same file.

If I want to include a custom React component into a blog post to make the post more interactive, I can now do that in MDX. As an example, I can embed the theme switcher component I'm using for my website right into this post:

See this blog post on my website to see the embbeded React component.

I'm quite excited to take advantage of the power of MDX in some of my future blog articles.

Another feature I've added to my blog is the horizontal progress bar indicating a user's progress through a blog post. I've seen this UI pattern on some other blogs and have enjoyed it myself.

An horizontal progress bar at the top of a blog article indicates how much further a user needs to scroll to reach the bottom of the page.

An horizontal progress bar at the top of a blog article indicates how much further a user needs to scroll to reach the bottom of the page.

I've also include a comment section to blog posts using the Disqus embed. This was surprisingly easy to incorporate into the website using disqus-react.

Dark / Light Theme

Perhaps my favourite part of the website is the ability to toggle between a dark and light themes. I'm using Styled Components to manage the styles on my website and it fortunately has great a API for managing theming.

Toggling between dark and light theme through a toggle switch found in the main menu.

Toggling between dark and light theme.

I'd like to point out that the design and functionality of the theme toggle switch was all taken from @thekitze's Twizzy App landing page. I'm always thankful when talented people like this make their projects open source to allow others to benefit.


I hope to continue to make incremental improvements to my website. Some of the things I'd like to add include unit testing, end to end testing, and an RSS feed to the website. There are also a few bugs I need to squash 👞🐜.

See the source code.

Discussion

pic
Editor guide
Collapse
quii profile image
Chris James

I was going to have to have multiple pages on the website and thus I wanted to use React to get the performance associated with a single page application.

Is an SPA really necessary for a blog?

SPAs are definitely not always faster than just a traditional server-side solution. Especially given the amount of JavaScript that has to be downloaded and executed (no caching does not stop this cost).

For some perspective your website took a full 3 minutes to load on my laptop.

Slow times

This isn't intended as a flame; but web performance and accessibility is very important to me so I feel the need to highlight that throwing technologies like react and SPAs around definitely do not give you enough to make a fast and accessible website.

Collapse
peternycander profile image
Peter Nycander

I don't think the load time is a result of the choice of tech stack. Gatsby is a static site generator, which can hydrate to a SPA once loaded. I think it is a great choice for a blog! As you can see it is the intial html page which is the worst offender, not some huge javascript blob.

Collapse
rhymes profile image
rhymes

I tried robertcooper.me/refreshing-my-pers... and I get similar numbers:

There are many assets to download, the service workers is pulling down gifs of several megabytes and lots of different JS files. Probably by fixing those huge assets the UX will improve a lot :-)

Thread Thread
garfbradaz profile image
Gareth Bradley

Seeing the same on mobile as well (slow loading speeds) running through my home WiFi. Once loaded though the site looks lovely.

Collapse
faraixyz profile image
Farai Gandiya

Is an SPA really necessary for a blog?

I mean, the essence of a personal website is a place to play around with since it's...personal.

Then again, you have a good point considering accessibility and performance. The personal website could lead to a rabbit hole of ruthless optimization to make it as good as possible.

Collapse
quii profile image
Chris James

It's a fair point, one of the joys of a personal website is that you can do whatever you want; and feel free to do so.

The only risk is if your priority is about communicating text based information and you're making it hard for people by making a slow website.

Collapse
robertcoopercode profile image
Robert Cooper Author

Oh my. I need to look into optimizing those assets! Thanks for pointing this out.

Collapse
nickytonline profile image
Nick Taylor (he/him)

If you're having trouble removing the background of your headshot, check out

Thanks to @chriscoyier for this great find.

Collapse
asapabedi profile image
Abednego Edet

Good job, Robert.

Collapse
mrahmadawais profile image
Ahmad Awais ⚡️

May I recommend Remove.bg for removing bg from your headshot? YOU'LL THANK ME LATER.

Collapse
robertcoopercode profile image
Robert Cooper Author

Haha, I did try using it, and it does an AMAZING job at removing the background. However, I found that it reduced the image quality to much :(.

However, your post motivated me to open up a photo editor and remove the lingering background pixel-by-pixel.

Collapse
shinyuy profile image
Shinyuy Marcel

It looks great, Robert.

Collapse
codejoywins profile image
Max Jann

nice job