This is the second version of my portfolio website built using Gatsby and hosted on Firebase hosting. This repository also includes a GitHub workflow that enables continuous deployment.
This takes inspiration from one of my favourite portfolio websites by Brittany Chiang found at https://brittanychiang.com/ in terms of professionally structuring a Gatsby project.
- gatsby-plugin-react-svg
- gatsby-source-filesystem
- gatsby-transformer-remark
- gatsby-plugin-react-helmet
- AOS
| Colour | Hex |
|---|---|
| Primary Blue |  #18223C |
| Secondary Blue |  #233554 |
| Light Purple |  #9DAAF2 |
| Yellow |  #F4DB7D |
| Purplish White |  #E6F1FF |
| White |  #FFFFFF |
For personal reference and/or for whoever who would like to run this site locally, use the following commands.
- Assuming the repository is initially cloned, navigate into the project directory and install the dependencies:
npm install - Run the development server:
gatsby develop
Note: Bugs when working in development mode
- Multiple "root" queries found. When working with VSCode and the Powershell terminal, sometimes the case of the directory is, for some reason, inaccurate, eg. Desktop -> desktop. This can cause an issue when building and hence, to fix it, cd out and into the project directory with the correct casing and run gatsby clean, gatsby develop.
- The result of this StaticQuery could not be fetched. To fix this issue, first run gatsby clean to remove build cache and rerun gatsby develop.
- How to use useRef and the difference with useState
- Gatsby SEO component
- GitHub actions for deploying to Firebase
- Deploying a Gatsby application to Firebase
- Guide on GitHub actions for Gatsby Build + Firebase Deploy
- Fixing SSL issues with Firebase .web.app URLs
- Multiple Root Query Issue with Terminal Casing