Portfolio

Scope

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

Design

Development

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) {
        ...GatsbyImageSharpFluid
      }        
    }
  }
}

`);

<Img fluid={data.headerImage.childImageSharp.fluid} />
Next Project
Match the Meme

Developed with