🌟 Building an Impressive Portfolio Website in minutes with Gatsby - A Step-by-Step Guide

Introduction 🚀

Welcome to our step-by-step guide on creating an impressive portfolio website using Gatsby! 🎉 In this tutorial, we'll be working with an amazing portfolio website template crafted by the talented developer and designer, Preet Suthar, me lol. This template comes with fantastic features, including a theme toggler 🌓, color switching for headings and links, fetching data from the GitHub API, an awesome "About Me" section, a tools section with SVG icons for various technologies like Gatsby, Next.js, HTML, and CSS, a beautifully designed project section with an excellent UI/UX, and a contact section.

A well-designed portfolio website can be a powerful tool for showcasing your skills and accomplishments to potential employers or clients. So, let's dive in and build your stunning Gatsby portfolio website together!

Prerequisites ✅

Before we begin, ensure you have the following prerequisites:

• Basic knowledge of JavaScript.
• Familiarity with Git and GitHub.
• Node.js installed on your computer.
• Gatsby CLI (Command Line Interface) installed globally. If you don't have it yet, you can install it using the following command:

npm install -g gatsby-cli

Step 1: Forking the Portfolio Template 🍴

To get started, we'll fork the GitHub repository containing the portfolio website template created by Preet Suthar.

Step-by-step Guide: 📝

1. Open your web browser and visit the GitHub repository for the Gatsby portfolio template at https://github.com/preetsuthar17/gatsby-portfolio-template.

2. In the top-right corner of the GitHub page, click on the "Fork" button. This will create a copy of the repository under your GitHub account. 🍴

3. After forking, you will be redirected to your forked repository. The URL should look like this: https://github.com/your-username/gatsby-portfolio-template.

🌟 Meet the Template Author - Preet Suthar (preetsuthar17) 🌟
Before we proceed, let's take a moment to acknowledge the original creator of this impressive Gatsby portfolio template. Preet Suthar is a talented developer and designer. You can find more of his work on his website https://preetsuthar.me. Show him some appreciation by visiting his site and giving him a follow on GitHub! 😊 (it's me lmao)

Step 2: Setting up the Development Environment 💻

Now that you have your forked portfolio template locally, let's set up your development environment to begin customizing it.

Step-by-step Guide: 📝

1. Open your terminal or command prompt.

2. Navigate to the directory where you want to store your Gatsby project by using the cd (change directory) command. For example:
   

cd ~/projects

1. Clone your forked repository using the git clone command. Replace your-username with your GitHub username:

git clone https://github.com/your-username/gatsby-portfolio-template.git

The repository will be cloned to a new folder named gatsby-portfolio-template.

1. Move into the project directory:

cd gatsby-portfolio-template

You're all set up! You now have the Gatsby portfolio template on your local machine and are ready to start customizing it to make it your own.

Step 3: Customizing the Portfolio Website 🎨

Now comes the exciting part - customizing the portfolio website template with your information, projects, and preferred color scheme.

Step-by-step Guide: 📝

1. Update Site Metadata: Open the gatsby-config.js file in the root directory of your project. Here, you can modify the site metadata, such as the site title, description, author, and other settings. Replace the existing information with your own.

module.exports = {
  siteMetadata: {
    title: "Your Portfolio Title",
    description: "Your portfolio description goes here.",
    author: "Your Name",
    siteUrl: "https://your-portfolio-url.com", // Update this with your portfolio's URL
  },
  // ...
};

1. Update About Me Section: Navigate to the src/data/about.json file. Replace the sample data with your own captivating introduction and personal information.

2. Add Projects: The projects section is located in the src/data/projects.json file. You can add, edit, or remove projects from this JSON file. Each project should have a title, description, image (place the image file in the src/images/projects directory), and a GitHub repository URL.

3. Customize Primary Color: The portfolio template supports color switching for headings and links. Open the src/data/colors.json file, and you can modify the primary color by providing the HEX code of your desired color.

4. Update Tools Section: The tools section is defined in the src/data/tools.json file. Customize the list of tools or technologies you want to showcase.

5. Customize Contact Section: In the src/data/contact.json file, update your contact information, such as email address, social media profiles, and any other preferred contact methods.

6. Update GitHub Username: Open the gatsby-config.js file again, and in the plugins section, replace 'preetsuthar17' with your GitHub username. This is needed for fetching data from the GitHub API to display your repositories.

Step 4: Installing Additional Packages 📦

This template may already include the necessary packages for the theme toggler and color switching. However, ensure they are installed by running the following command:

npm install

Step 5: Testing Locally 🧪

Before deploying your portfolio website, it's crucial to test it locally to ensure everything looks and functions as expected.

Step-by-step Guide: 📝

1. Open your terminal or command prompt.

2. Make sure you are in the root directory of your project (gatsby-portfolio-template).

3. Run the following command to start the development server:
   

gatsby develop

1. Once the development server has started, open your web browser and navigate to http://localhost:8000 to view your portfolio website.

2. Test all the features, including the theme toggler, color switching, project section, and contact section, to ensure everything works smoothly.

3. If you encounter any issues, refer to the terminal output for error messages, and you can also check the developer console in the browser for potential errors.

4. Once you're satisfied with the local testing, you're ready to deploy your stunning portfolio website!

Step 6: Hosting on Vercel or Netlify 🚀

Both Vercel and Netlify are excellent platforms for hosting Gatsby websites. We'll provide steps for deploying to both platforms, and you can choose the one that suits you best.

Deployment on Vercel:

1. If you haven't signed up for a Vercel account, go to https://vercel.com/signup and sign up for free.

2. Install the Vercel CLI (Command Line Interface) globally (if you haven't already) using the following command:
   

npm install -g vercel

1. Deploy your portfolio website to Vercel using the following command:

vercel

1. Follow the prompts to log in to your Vercel account and deploy the site. Vercel will provide you with a unique URL for your deployed portfolio.

2. Congratulations! Your portfolio is now live and accessible to the world.

Deployment on Netlify:

1. If you haven't signed up for a Netlify account, go to https://www.netlify.com/ and sign up for free.

2. Install the Netlify CLI (Command Line Interface) globally (if you haven't already) using the following command:
   

npm install -g netlify-cli

1. Build your portfolio website using the following command:

gatsby build

1. Deploy your portfolio website to Netlify using the following command:

netlify deploy

1. Follow the prompts to log in to your Netlify account and deploy the site. Netlify will provide you with a unique URL for your deployed portfolio.

2. Congratulations! Your portfolio is now live and accessible to the world.

You've successfully built and deployed your impressive Gatsby portfolio website! 🎉 Your website showcases your skills, projects, and contact information, ready to make a great impression on potential clients or employers.

Remember to keep your portfolio updated with new projects and achievements to reflect your latest accomplishments. Now, go ahead and share your portfolio with the world and embark on exciting opportunities. Happy coding! 😄🚀