Create your personal portfolio with Gatsby

After graduating from boot camp and starting my job search everyone kept saying I needed to have a personal portfolio to market myself and show off my work. I felt kind of stuck, wondering should I work on my portfolio or work on my projects. It was almost like a chicken and egg scenario.

I needed a portfolio to show off my cool projects, but all my projects after boot camp were really small, full of bugs, and half-finished features from the limited time. What should I be working on? Another part of my stress was that everyone kept insisting if I wanted to be a frontend developer I had to make my own portfolio from scratch and it better be beautiful.

As much as a love frontend, CSS and design have never been my forte. This caused me a lot of anxiety and made starting a lot more difficult. I decided to use Gatsby after hearing a lot about it on Twitter.

What is Gatsby?

Gatsby is a React-based framework that specializes in static sites that are great for blogs and portfolios. The Gatsby documentation is probably my favorite and I think they do a great job explaining even though I had never used Gatsby before.

I don't quite understand the technology behind Gatsby but because it pre-builds pages and creates static assets for you everything loads very fast and makes for a nice portfolio experience. Gatsby has a lot of different plugins to help make your portfolio better and do some cool things.

Why Gatsby?

The biggest reason I suggest Gatsby to people is because of Gatsby Starters. Gatsby has a ton of different Starters and these are files that are already built out for you. My current portfolio is a Gatsby starter.

I loved the design of this starter and I wanted my portfolio to be up and running quickly so I could work on personal projects. A lot of the Gastby Starters have documentation to tell you how to change the data to your information. This does require you to get a handle on reading other people's code so give yourself room to stumble and learn.

// the gatsby starter I used has a data.js file that holds all the personal information

Hero Section

export const heroData = {
  title: '', // Hello, my name is
  name: '', // John
  subtitle: '', // I'm the Unknown Developer.
  cta: '', // Know more
};

About Section

export const aboutData = {
  img: 'profile.jpg', // put your profile image (recommended aspect radio: square)
  paragraphOne: '',
  paragraphTwo: '',
  paragraphThree: '',
  resume: 'https://www.resumemaker.online/es.php', // if no resume, the button will not show up
};

I was able to put my portfolio together and deploy it in only a couple days (we all learn at different paces so if this isn't the case for you try not to get too down on yourself). Instead of agonizing about the design and building all the components from scratch, this was a breath of fresh air.

Now with my portfolio out of the way I could focus on fine-tuning my projects and building new ones. I also felt a little more confident about applying to jobs because I had a portfolio that I could finally link.

This is by no means meant to discourage you from building your own portfolio from scratch with other technologies. My friends from boot camp went in both directions. Some built their portfolios from scratch and had a ton of fun adding their own creative flair. While others used Gatsby to get their portfolio up and running quickly and turn their focus back to projects.

I hope my thoughts on this topic have helped you! If you have issues with Gatsby, feel free to reach out to me on Twitter and maybe we can debug together!

If you're wondering what to add to your portfolio or what makes a good portfolio feel free to check out my other post about leveling up your developer portfolio.