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.

![building portfolio website react gatsby](https://dopebase.com/media/cover15.jpg)
## 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:

```shell
npm install -g gatsby-cli
```

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

```shell
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:

```jsx
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:

```jsx
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:

```jsx
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:

```jsx
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:

```shell
npm install styled-components
```

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

```jsx
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:

```jsx
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:

```shell
npm install gatsby-source-filesystem
```

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

```javascript
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:

```json
[
  {
    "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:

```shell
npm install gatsby-image
```

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

```jsx
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:

```shell
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!

Learn how to build a portfolio website using React and Gatsby. Enhance your web development skills and showcase your projects.

In this article, we will explore the process of building a portfolio website using React and Gatsby. By leveraging the power of React and the static site generation capabilities of Gatsby, you can create a high-performance website to showcase your projects and enhance your web development skills.

Building a Portfolio Website with React and Gatsby

About

Legal

Products

Resources

Category:

Tags: