DEV Community


Let's Refactor My Personal Website and Portfolio using Gatsby, Part One: Planning

dylanesque profile image Michael Caveney Updated on ・3 min read

I just completed my first client site in Gatsby, and I was pleasantly surprised at how much faster and smoother the development process was for me, so I think it's time to refactor my own website! I'll try and explain everything I'm doing in great detail, but I will assume you're familiar with the basics of React. I'll be going over that process in great detail here, so let's get started!

Why Gatsby?

For those that aren't familiar, Gatsby is a static-site generator built on React. What that means is that it takes the React code you write and compiles it down to basic HTML, CSS, and JS files. This makes the site very fast, secure (because of the lack of a traditional backend), and flexable. Gatsby also has a vast array of plugins for a variety of use cases, something I'll be discussing in depth in this blog series.

The Current Site

My current site lives here. I'm mostly happy with it, but I have several concerns with the current iteration, namely:

  • Styling and layout wasn't written with a mobile-first experience in mind. This sped up the development process and (probably) resulted in less wasted/redundant CSS.

  • I recently learned from Sara Soueidan's appearance on that font icons are terrible for accessibility. I also had some trouble getting them to behave in terms of sizing and layout, so I'll be switching to SVG icons for this one.

  • I used the styled-components library, and liked it, but many folks seem to prefer the very similar Emotion, so I'm going to give that a whirl.

  • Gatsby has several powerful tools for optimizing images that I didn't take advantage of, so that's going to change.

  • Because the blogging functionality is so superior here on Dev, I'm ditching the blog page and merely linking to my profile here.

  • I barely, if at all, thought about SEO on this version. I've learned a lot about how to approach this with Gatsby, and will be drafting this site with that in mind.

  • I want to improve the design of the site, and give a bit more thought to typography before I start writing code.

  • I'm going to begin with the end in mind, and utilize (BDD) Behavior Driven Development paired with TDD (Test Driven Development) to stay organized and focused. On that note, let's have a high-level look at what I need the site to do.

User Stories

freeCodeCamp has sneakily been introducing users to BDD via the user stories that communicate challenge requirements. In that vein, here are my site requirements:

  • The landing page welcomes visitors to the site and catches their eye.

  • Navigation will be visible on every page, and will contain visual indicators to the user exactly which page they are on.

  • The About Page will give the user brief biographical information and contain an "elevator pitch" on my development philosophy.

  • The Work page will detail information on the technologies I'm proficient in, contain links to my resume and Github, and highlight several of my best projects.

  • The Contact page will contain links to contact me via Twitter, Dev, Email, and LinkedIn.

I think that's a good start for now. Next time: Creating the project, installing dependencies, and other introductory steps!

Discussion (3)

Editor guide
wanzulfikri profile image

I really like your plan especially your assessment of your current site.

Do keep us updated when the next part of the refactor is complete.

dylanesque profile image
Michael Caveney Author

Part Two is coming very soon!

dance2die profile image
Sung M. Kim

Personal page indeed a great place to try new technologies on 😀