This personal portfolio was designed and created to serve as a platform for sharing my work. I chose to build this project with Gatsby because I wanted to learn a React framework to generate my static website.

Technologies Used

  • GatsbyJS
  • SaSS
  • Adobe XD
  • Adobe Photoshop



First I installed GatsbyCli

npm install -g gatsby-cli

Here I created my project name

gatsby new portfolio-site

Next I needed to install node-sass and gatsby-plugin-sass dependency

npm install --save node-sass gatsby-plugin-sass

To use sass and other gatsby plugins, I had to include the plugin into my gatsby-config.js file

plugins: [`gatsby-plugin-sass`],

The following code snippet is the query to access images to utilize gatsby-image plugin. Then using the query to create a fluid image component. When I first implemented the query, the image was very low quality and had loss of colours, so to fix it, I needed to the write the query parameters quality.

const data = useStaticQuery(graphql`
query {
  headerImage: file(relativePath: { eq: "portfolio-header.png" }) {
    childImageSharp {
      fluid(quality: 100) {


<Img fluid={data.headerImage.childImageSharp.fluid} /> 

Next Project
Match the Meme