Personal Portfolio Website

Jul 17, 2021 | Programming

The second iteration of chandrikadeb7.github.io built with Gatsby and hosted using GitHub Pages.

Previous iterations: Version 1

Demo

TL;DR

Yes, you can fork this repo. Please give proper credit by linking back to brittanychiang.com. Thanks!

Installation

Set Up

  1. Install the Gatsby CLI (Use npm 10)
    npm install -g gatsby-cli
  2. Install and use the correct version of Node (18 or 20) using NVM
    nvm install --force
  3. Build using Gatsby
    gatsby build
  4. Start the development server (localhost)
    npm start

Building and Running for Production (GitHub Pages)

  1. Generate a full static production build
    gatsby build
  2. Push to production
    npm run deploy

Color Reference

Color Hex
Navy #0a192f
Light Navy #172a45
Lightest Navy #303C55
Slate #8892b0
Light Slate #a8b2d1
Lightest Slate #ccd6f6
White #e6f1ff
Green #64ffda

Troubleshooting

If you encounter issues during installation or running your portfolio website, here are some troubleshooting tips:

  • Ensure that you’ve installed the correct version of Node. You can verify by running
    node -v

    in your terminal. If the version is incorrect, reinstall using NVM.

  • If Gatsby commands are not recognized, ensure that Gatsby CLI is properly installed using
    npm install -g gatsby-cli

    .

  • Check the console for any error messages during the build or deployment process. They can provide valuable information on what went wrong.
  • If you’re still facing challenges, consider reaching out to communities or forums specializing in Gatsby.
  • For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.

Understanding the Code via Analogy

Imagine your portfolio website as a recipe for a delicious meal. Each step in the installation and deployment process represents a crucial ingredient and action needed to create the delightful dish that is your online presence.

  • Installing the Gatsby CLI is like gathering your ingredients—essential for cooking up your site.
  • Using NVM to manage your Node versions is like using the right cooking temperature—each recipe requires a precise setting for the best results.
  • Building the site with Gatsby is akin to baking your dish; you must follow the recipe closely to ensure it comes out just right.
  • Starting the development server (localhost) is like tasting your meal while cooking; it lets you check how everything is coming together in real-time.
  • Generating a production build is like plating your dish for presentation; you want it to look appealing before serving it to your guests (the users).
  • Lastly, pushing to production is like serving the meal at a dinner party, where you want everything to be perfect for your audience.

By following these instructions, you can whip up an impressive portfolio website that showcases your talents and skills to the world!

Stay Informed with the Newest F(x) Insights and Blogs

Tech News and Blog Highlights, Straight to Your Inbox