Portfolio Project Challenge

Build a Developer Blog with Gatsby

Project Brief

As a developer, your GitHub is a huge step up from a bullet point list of buzzwords on a resume. However, your repos alone don't give much room to provide additional context around the other aspects of web development.

Your task is to use Gatsby to build a portfolio site that features your case studies. Make it performant and accessible out of the box, add SEO support so potential employers can find you with a quick search.

You can make this site using MDX, or stretch yourself a bit by relying on reusable React components and passing things via props. Both are great approaches to use inside Gatsby.

If you more ideas about what to include in your portfolio, check out this article by Joel Hooks.


  • The individual pages to the case studies need to be programmatically created from your GraphQL data using the File System Route API.

  • The index page of your portfolio site needs to include at least 3 case studies.

  • GatsbyImage is a React component specially designed to give users a great image experience. It combines speed and best practices. Process images and render them using GatsbyImage on each page.

  • MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents. Use MDX to process and render the content of each page.

  • Gatsby can help your site rank and perform better in search engines. Some advantages, like speed, come out of the box and others require configuration. Add SEO support to your portfolio.


  • The application uses Gatsby.

  • The application contains minimal bugs.

  • The application is deployed to the web and is useable for its intended purpose.

  • The application is accessible.

Did you complete the Portfolio Project Challenge?

Let us know what you built!

Tweet @eggheadio