Fix: Resolve blog flickering issue and other minor improvements

Replaced `GatsbyImage` components with `StaticImage` components wherever possible

Wherever possible, I have replaced the GatsbyImage components with StaticImage components throughout the project.
Earlier the querying of images might have been done so that Gtasby would process them (speculation), but with the latest version of gatsby-plugin-image, the StaticImage component also does all the pre-processing and we can pass the image URLs directly.
So I removed all the queries where we were querying the images and now just using the URLs to render static images wherever possible.

The issue #195 is also resolved.
Instead of using the grommet library's ResponsiveContext to find out the number of required columns, I created a custom event listener to do that.
I also added a new breakpoint for medium screens (like tablets), which would set the number of columns to 2.
To address the flickering issue, I have added a Loading text while the blogs get loaded. We can use some other component or some loader in the future instead of just "Loading..." text.
The issue was that we were setting the initial value in useState to be 1. I tried changing it and replaced it by calculating the columns based on window.innerWidth. It worked fine during the development but the compilation failed during build time because, during the SSR, the window object cannot be accessed.

Earlier, the "show all tags" toggle button was being shown even when there were no more tags (for project tags). This bug came to my notice as a new project tag was recently added and the toggle button was showing even when there were no more tags.

I have added a DEV_SSR flag in the config file to catch any server-side rendering error. This would help us to know beforehand during development if there would be any error during the build time.
Ref: https://www.gatsbyjs.com/docs/debugging-html-builds/#ssr-during-gatsby-develop

I have tried resolving all the warnings and errors in the browser's console.
Except for one warning, which seems to be related to some internal component in Gatsby (speculation).
Some of the warnings were due to the use of the defaultProps, which is going to be deprecated in the next version. I changed it in the SEO component and MasonryLayout component.
There are other warnings too (the yellow ones) which we see during the development in the IDE's terminal, those warnings are mostly related to declaring a component and not using it.

In mobile screens, earlier in the latest updates section on the homepage, the external link icons were not rendering with proper width when the title was too long. This bug is fixed.

Name	Link
Latest commit	f3ae28baa73c42a5a3b6d665aa3d1ed7e90aa30b
Latest deploy log	https://app.netlify.com/sites/tattle-website-preview/deploys/66c8ec1a3332ac000847a9aa
Deploy Preview	https://deploy-preview-197--tattle-website-preview.netlify.app
Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.