tweaks

gatsby-browser.js

@@ -6,6 +6,5 @@ exports.onClientEntry = () => {
   // IntersectionObserver polyfill for gatsby-image (Safari, IE)
   if (typeof window.IntersectionObserver === 'undefined') {
     require('intersection-observer')
-    console.log('👍 IntersectionObserver is polyfilled') // eslint-disable-line no-console
   }
 }

gatsby-node.js

@@ -23,7 +23,7 @@ const path = require('path')
 //
 // Create project pages from projects.yml
 //
-exports.createPages = ({ actions, graphql }) => {
+exports.createPages = async ({ actions, graphql }) => {
   const { createPage } = actions
 
   return new Promise((resolve, reject) => {

src/components/atoms/ProjectImage.jsx

@@ -22,7 +22,7 @@ ProjectImage.propTypes = {
 export const projectImage = graphql`
   fragment ProjectImageFluid on ImageSharp {
     fluid(maxWidth: 1200, quality: 85) {
-      ...GatsbyImageSharpFluid_noBase64
+      ...GatsbyImageSharpFluid_withWebp
     }
   }
 `

src/components/atoms/ProjectImage.module.scss

@@ -14,7 +14,7 @@
         overflow: hidden;
     }
 
-    .dark & {
+    :global(.dark) & {
         box-shadow: 0 3px 5px rgba(darken($brand-main, 20%), .15),
             0 5px 16px rgba(darken($brand-main, 20%), .15);
     }