Why I’m Using Gatsby for My Portfolio
A quick examination of what Gatsby can do for you
After graduating from Flatiron School’s Software Engineering immersive program, it became clear to me that I needed a space beyond Github, LinkedIn, and Medium to document both the skills I’ve developed as an engineer and the projects that I’ve built using those skills.
I wanted a space where I could show off what I’ve built and express myself and my experience in a way that truly reflected my personality as well, something that isn’t easily done using the standardized format of popular platforms. With that goal in mind, I set out on a journey to build the best portfolio I could and started looking for examples to serve as inspiration.
After a few hours of endlessly scrolling through blog posts with links to different sites and scouring the GitHub repos of the examples that caught my eye, I started to take notice of a trend — quite a few of these developers had used Gatsby for their projects.
So what is Gatsby? Let’s dive into it and discuss why it was so appealing to me for this purpose.
What Is Gatsby?
Gatsby, launched in 2015, is an open-source, React-based Progressive Web App generator powered by GraphQL.
To break that down, Gatsby is a framework that allows developers to easily create sites that are reliable no matter the device type or browser a visitor uses to visit (if you want to dive deeply into what a PWA is, Wikipedia is a good place to start). Since it’s React-based, the UI for a Gatsby site will be blazing fast, and GraphQL is helpful in that it allows you to explicitly define what information you want to request from an API and apply it to pre-existing templates that you’ve set up in your project.
In short, Gatsby is here to allow developers to build fast, responsive, and performant sites while overcoming some common challenges of developing a new project. Let’s discuss those challenges, one-by-one, and outline how Gatsby’s solutions are useful when building your portfolio.
Starting a new project is hard.
Heck, this blog is a great example of how difficult it can be. Every time a developer sits down to start a project, beginners and veterans alike have to decide between a huge variety of tools, technologies, and frameworks to get the job done. Sometimes, the right choice isn’t always clear.
Each choice you make will have an impact on performance, reliability, and scalability, and while one option might seem like the best one now, that often turns out not to be the case once you’ve gotten further along in your project and see how it's turning out.
Understanding that configuration is one of the hardest parts of a developer’s job, Gatsby aims to take the guesswork out of the equation and provide the developer with defaults to increase performance, reduce compile time, and allow the developer to just focus on the task at hand.
Gatsby also allows developers to easily change these defaults if they need to, without requiring you to eject defined defaults. All you have to do is is add a gatsby-config.js file to your project, state what you’d prefer to use, and you’re good to go.
To me, getting started quickly without a lot of room for error was really appealing for my purposes. Furthermore, the ability to update my configuration as my needs change is a great advantage considering that as I learn more about development, I’m sure I’ll come up with new and interesting ways to update my portfolio in the future.
The subject of iteration is a great segway for another challenge that Gatsby helps someone like me solve when building a new project…
Managing data and assets is an important consideration.
Once you’ve landed on a tech stack and configured your project as necessary at the start of development, you’re ready to start adding features and content.
The thing is, the organization and management of the data powering your project are just as important and potentially as complicated as deciding on the project's configuration.
Often, performance can be impacted by how information and assets are loaded. For example, large images can be a hassle for load times, as can requesting data via API. Furthermore, APIs can oftentimes pass more information as needed in their response, and you end up having to build out functions to filter out the information you don’t need.
To solve these problems, Gatsby has a few helpful features to ensure your data and assets are managed properly.
First, Gatsby follows the PRPL Pattern, a methodology that helps ensure web pages load and become interactive as quickly as possible. The acronym stands for:
- Push (or preload) the most important resources.
- Render the initial route as soon as possible.
- Pre-cache remaining assets.
- Lazy load other routes and non-critical assets.
The benefit of having this pattern baked into Gatsby’s foundations is that pages load as quickly as possible, and all assets that slow down other sites are loaded after initial render, allowing your visitors to start interacting with the site almost immediately.
After that initial load, assets are then pre-loaded to ensure that they can be served as needed to improve speed and your visitors’ experience overall. A great example of this is that Gatsby lazy loads the images on your site, and only loads the full image when on screen.
Going back to the subject of data requested via API, Gatsby utilizes GraphQL to overcome the “sit and wait” challenges of API.
With GraphQL, you define the exact data that you need to provide your ideal experience. This means a developer can apply data transformation in their data queries, so information is outputted in the correct format by default, and we remove data bloat since we only get what we’ve asked for.
All of this goes to say that Gatsby does everything it can to help you ensure your site is fast no matter what and allows you to manage your data as easily as possible.
For my purposes, a blazing fast portfolio means a better user experience, and better search rankings with Google, so this seemed like a pretty big perk. GraphQL integration is appealing as well, not only because it makes data management easier, but it’s a great solution for adding a blog to my portfolio in the future.
Another important thing to mention is that Gatsby has compatibility with many bespoke solutions through Gatsby Plugins. That means if you want to include item information from Shopify, or use Stripe’s payment solutions down the road, you can do so super easily.
I’m not planning on selling any at merch at the moment, but it’s nice to know I have the option to down the line.
Building a project the right way is difficult
Especially when you need to build something quickly. The fact that Gatsby acts as a shortcut for developers to focus on the task at hand was something that really resonated with me when researching how I should build my portfolio, and its plug-and-play functionality paired with smart data management gives me the confidence that I can take my portfolio in any direction I choose down the line.
That’s why I decided to use Gatsby as the foundation for my portfolio, and I’ve gotta say, I’m incredibly pleased with the decision.
While I’m in the final stages of styling my portfolio, you can follow me on GitHub or Twitter if you’d like to see the final result. I’ll be sure to link the final result in an edit to this article later.
Thanks for reading!
(P.S. I’m looking for a new role as well! Feel free to reach out if you’d like to discuss any opportunities you think I’d be a good fit for.)
