Building a Portfolio Website with React and Gatsby

This tutorial will guide you through the process of building a portfolio website using React and Gatsby. A portfolio website is a crucial tool for software developers to showcase their skills and projects to potential employers and clients. React and Gatsby, a static site generator powered by React, provide a powerful and efficient way to build fast and interactive websites.

Introduction

What is a portfolio website?

A portfolio website is a collection of work samples, projects, and achievements that demonstrates a developer's skills and expertise. It serves as a visual representation of their capabilities and can greatly enhance their chances of landing new opportunities.

Why use React and Gatsby?

React is a popular JavaScript library for building user interfaces. It provides a component-based architecture and enables developers to create reusable UI components. Gatsby, on the other hand, is a static site generator that utilizes React to build fast and performant websites. It optimizes the website for speed, improves SEO, and enables easy deployment.

Setting Up the Project

To get started, you need to have Node.js installed on your machine. Node.js comes with npm, the package manager for JavaScript. Open your terminal and run the following command to install Gatsby CLI globally:

npm install -g gatsby-cli

Once the installation is complete, you can create a new Gatsby project by running the following command:

gatsby new my-portfolio-website

This will create a new Gatsby project with the folder structure necessary to get started.

Building the Layout

Creating the header

The first step is to create a header component for our portfolio website. This component will contain the navigation and other elements that will be visible on every page. Create a new file called Header.js in the src/components directory and add the following code:

import React from "react"

const Header = () => {
  return (
    <header>
      <nav>
        <ul>
          <li><a href="/">Home</a></li>
          <li><a href="/projects">Projects</a></li>
          <li><a href="/about">About</a></li>
          <li><a href="/contact">Contact</a></li>
        </ul>
      </nav>
    </header>
  )
}

export default Header

In this code, we define a functional component Header that returns the HTML markup for the header section. It contains a navigation menu with links to the different sections of our portfolio website.

Adding navigation

To include the Header component in our layout, open the src/layouts/index.js file and add the following code:

import React from "react"
import Header from "../components/Header"

const Layout = ({ children }) => {
  return (
    <>
      <Header />
      <main>{children}</main>
    </>
  )
}

export default Layout

Here, we import the Header component and include it at the top of the layout. The children prop represents the content of each page and is rendered within the <main> element.

Designing the main content area

Now that we have the basic layout in place, let's design the main content area of our portfolio website. Create a new file called index.js in the src/pages directory and add the following code:

import React from "react"
import Layout from "../layouts"

const Home = () => {
  return (
    <Layout>
      <h1>Welcome to my Portfolio Website</h1>
      <p>Here, you can explore my projects and learn more about me.</p>
    </Layout>
  )
}

export default Home

In this code, we import the Layout component and wrap our content within it. We display a heading and a paragraph to introduce our portfolio website.

Creating Components

Building reusable components

To keep our code organized and maintainable, we'll create reusable components for different sections of our portfolio website. For example, we can create a Project component to display information about each project. Create a new file called Project.js in the src/components directory and add the following code:

import React from "react"

const Project = ({ title, description }) => {
  return (
    <div>
      <h2>{title}</h2>
      <p>{description}</p>
    </div>
  )
}

export default Project

Here, we define a functional component Project that accepts title and description as props. It renders the project title and description within a <div> element.

Styling with CSS-in-JS

To style our components, we'll use CSS-in-JS, specifically the styled-components library. Install it by running the following command:

npm install styled-components

Then, create a new file called styled.js in the src/styles directory and add the following code:

import styled from "styled-components"

export const Container = styled.div`
  max-width: 800px;
  margin: 0 auto;
  padding: 0 16px;
`

export const Heading = styled.h1`
  font-size: 32px;
  color: #333;
`

export const Paragraph = styled.p`
  font-size: 16px;
  color: #666;
`

In this code, we define styled components for a container, heading, and paragraph. These components will be used to style our layout and content.

Fetching Data

Using GraphQL

To fetch data for our portfolio website, we'll use GraphQL, a query language for APIs. Gatsby has built-in support for GraphQL, making it easy to query data from various sources. Create a new file called projects.js in the src/pages directory and add the following code:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../layouts"
import { Container, Heading, Paragraph } from "../styles/styled"

const Projects = ({ data }) => {
  const projects = data.allProjectsJson.edges

  return (
    <Layout>
      <Container>
        <Heading>Projects</Heading>
        {projects.map(({ node }) => (
          <div key={node.id}>
            <Heading>{node.title}</Heading>
            <Paragraph>{node.description}</Paragraph>
          </div>
        ))}
      </Container>
    </Layout>
  )
}

export const query = graphql`
  query {
    allProjectsJson {
      edges {
        node {
          id
          title
          description
        }
      }
    }
  }
`

export default Projects

In this code, we import the necessary dependencies and define a functional component Projects. We use the graphql function from Gatsby to perform a query for the project data. The queried data is then rendered within the component.

Querying data from external sources

To fetch data from external sources, we can use plugins in Gatsby. For example, we can use the gatsby-source-filesystem plugin to read data from JSON files. Install it by running the following command:

npm install gatsby-source-filesystem

Then, open the gatsby-config.js file and add the following configuration:

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "data",
        path: `${__dirname}/src/data/`,
      },
    },
  ],
}

This configuration tells Gatsby to read data from the src/data directory. Create a new file called projects.json in the src/data directory and add some sample project data:

[
  {
    "id": 1,
    "title": "Project 1",
    "description": "Lorem ipsum dolor sit amet."
  },
  {
    "id": 2,
    "title": "Project 2",
    "description": "Consectetur adipiscing elit."
  }
]

Now, when you run gatsby develop, Gatsby will read the data from the JSON file and make it available for querying in GraphQL.

Optimizing Performance

Code splitting

To optimize the performance of our portfolio website, we can utilize code splitting. Code splitting allows us to split our JavaScript bundle into smaller chunks, which can be loaded on demand. Gatsby automatically performs code splitting, so we don't have to do anything extra.

Image optimization

To optimize the images used in our portfolio website, we can use the gatsby-image plugin. Install it by running the following command:

npm install gatsby-image

Then, modify the GraphQL query in your component to include image data:

export const query = graphql`
  query {
    allProjectsJson {
      edges {
        node {
          id
          title
          description
          image {
            childImageSharp {
              fluid(maxWidth: 800) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`

Here, we query for the fluid image data, which is optimized for different screen sizes. We can then use the gatsby-image component to render the image.

Deploying the Website

Building for production

To build our portfolio website for production, run the following command:

gatsby build

This command generates a production-ready build of our website, optimized for performance and ready for deployment.

Hosting options

There are several hosting options available for deploying our Gatsby website. Some popular choices include Netlify, Vercel, and AWS Amplify. Choose the hosting provider that best fits your needs and follow their deployment instructions.

Conclusion

In this tutorial, we have explored the process of building a portfolio website using React and Gatsby. We covered the initial project setup, building the layout and components, fetching data with GraphQL, optimizing performance, and deploying the website. By following these steps, you can create a professional and efficient portfolio website to showcase your skills and projects as a software developer. Happy coding!