How To Build A Portfolio Using Gatsby

Overview

Live Demo

Hey, welcome to this two part tutorial where I'll walk you through how to build your first portfolio with Gatsby, Tailwind CSS and Framer Motion.

This is broken down into two parts; the first covers everything you need to know to get going on building your basic portfolio and projects overview; the second part takes a bit of a deeper dive into one particular way you could choose to build a blog with Gatsby using MDX.

Like with most things in tech, there is a lot of existing content out there on similar topics but on my travels I couldn't find a complete joined up tutorial covering the two or with the technology stack I wanted to use. This was especially true when I was trying to add additional functionality to my blog such as code blocks, syntax highlighting and other features.

A small caveat; I'm no expert but I have just gone through this very process building my own portfolio, which you can take a look at here, and blog and a large part of the writing process for me is improving my own understanding of a topic.

Who is this for?

This isn't a Gatsby starter, although you are welcome to use the GitHub repository as a starter for your own use. If you do, please star the repository. This tutorial is aimed at people who are interested in how to build their own Gatsby portfolio from scratch without the aid of a starter.

What will this cover?

We'll cover the following during the tutorial:

Part 1

• Setting up
• Configuring Tailwind CSS
• Create site config file
• Create layout component
• Create header component
• Create icon component and helper function
• Create footer component
• Set up image plugins
• Create about component
• Create projects component
• Create a contact me component
• Making your portfolio responsive
• Using Framer Motion to animate your components
• Deployment using Netlify
• Summary

Part 2

• Why MDX?
• What are you going to build?
• Create a blog page
• Configure the Gatsby filesystem plugin
• Create your first MDX blog articles
• Create slugs for your MDX blog posts
• Programmatically create your MDX pages using the createPages API
• Create a blog post template
• Dynamically show article read times
• Make an index of blog posts
• Create a featured posts section
• Customise your MDX components
• Add syntax highlighting for code blocks
• Add a featured image to blog posts
• Add Google Analytics
• Summary