diff --git a/gatsby-config.js b/gatsby-config.js
index 4b6f958..400dafa 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -6,7 +6,32 @@
 
 module.exports = {
   /* Your site config here */
-  plugins: [`gatsby-transformer-sharp`, `gatsby-plugin-sharp`,
+  pathPrefix: `/portfolio-gatsby`,
+  siteMetadata: {
+    title: `Magda Rosłaniec Portfolio`,
+    description: `My developer's portfolio, main projects and articles`,
+    author: `Magda Rosłaniec`,
+  },
+  plugins: [
+    {
+      resolve: `gatsby-plugin-manifest`,
+      options: {
+        name: `GatsbyJS`,
+        short_name: `GatsbyJS`,
+        start_url: `/`,
+        background_color: `#6b37bf`,
+        theme_color: `#6b37bf`,
+        // Enables "Add to Homescreen" prompt and disables browser UI (including back button)
+        // see https://developers.google.com/web/fundamentals/web-app-manifest/#display
+        display: `standalone`,
+        icon: `src/assets/icon.jpg`, // This path is relative to the root of the site.
+      },
+    },
+
+    `gatsby-plugin-offline`,
+    `gatsby-plugin-react-helmet`,
+    `gatsby-transformer-sharp`,
+    `gatsby-plugin-sharp`,
     { resolve: `gatsby-source-filesystem`, options: { path: `./src/assets/` } },
   ],
 }
diff --git a/package-lock.json b/package-lock.json
index 0dbfb61..99d9965 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3194,6 +3194,14 @@
         "resolve": "^1.12.0"
       }
     },
+    "babel-extract-comments": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz",
+      "integrity": "sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==",
+      "requires": {
+        "babylon": "^6.18.0"
+      }
+    },
     "babel-loader": {
       "version": "8.2.1",
       "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-8.2.1.tgz",
@@ -3283,6 +3291,20 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.10.0.tgz",
       "integrity": "sha512-uKgTE+KGNuNVVAofCHYKAqe6pLzAQ0Qh+3L43SAN1LrN9Mc9HBWSzQTEzj3VM0HR2DgBO281S1SDk+B14t9XGg=="
     },
+    "babel-plugin-syntax-object-rest-spread": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U="
+    },
+    "babel-plugin-transform-object-rest-spread": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
+      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
+      "requires": {
+        "babel-plugin-syntax-object-rest-spread": "^6.8.0",
+        "babel-runtime": "^6.26.0"
+      }
+    },
     "babel-plugin-transform-react-remove-prop-types": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-react-remove-prop-types/-/babel-plugin-transform-react-remove-prop-types-0.4.24.tgz",
@@ -3330,6 +3352,11 @@
         }
       }
     },
+    "babylon": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babylon/-/babylon-6.18.0.tgz",
+      "integrity": "sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ=="
+    },
     "backo2": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/backo2/-/backo2-1.0.2.tgz",
@@ -4453,6 +4480,138 @@
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
     },
+    "cheerio": {
+      "version": "1.0.0-rc.5",
+      "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.5.tgz",
+      "integrity": "sha512-yoqps/VCaZgN4pfXtenwHROTp8NG6/Hlt4Jpz2FEP0ZJQ+ZUkVDd0hAPDNKhj3nakpfPt/CNs57yEtxD1bXQiw==",
+      "requires": {
+        "cheerio-select-tmp": "^0.1.0",
+        "dom-serializer": "~1.2.0",
+        "domhandler": "^4.0.0",
+        "entities": "~2.1.0",
+        "htmlparser2": "^6.0.0",
+        "parse5": "^6.0.0",
+        "parse5-htmlparser2-tree-adapter": "^6.0.0"
+      },
+      "dependencies": {
+        "dom-serializer": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
+          "integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+          "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w=="
+        },
+        "domhandler": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
+          "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
+          "requires": {
+            "domelementtype": "^2.1.0"
+          }
+        },
+        "domutils": {
+          "version": "2.4.4",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
+          "integrity": "sha512-jBC0vOsECI4OMdD0GC9mGn7NXPLb+Qt6KW1YDQzeQYRUFKmNG8lh7mO5HiELfr+lLQE7loDVI4QcAxV80HS+RA==",
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0"
+          }
+        },
+        "htmlparser2": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.0.0.tgz",
+          "integrity": "sha512-numTQtDZMoh78zJpaNdJ9MXb2cv5G3jwUoe3dMQODubZvLoGvTE/Ofp6sHvH8OGKcN/8A47pGLi/k58xHP/Tfw==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0",
+            "domutils": "^2.4.4",
+            "entities": "^2.0.0"
+          }
+        }
+      }
+    },
+    "cheerio-select-tmp": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/cheerio-select-tmp/-/cheerio-select-tmp-0.1.1.tgz",
+      "integrity": "sha512-YYs5JvbpU19VYJyj+F7oYrIE2BOll1/hRU7rEy/5+v9BzkSo3bK81iAeeQEMI92vRIxz677m72UmJUiVwwgjfQ==",
+      "requires": {
+        "css-select": "^3.1.2",
+        "css-what": "^4.0.0",
+        "domelementtype": "^2.1.0",
+        "domhandler": "^4.0.0",
+        "domutils": "^2.4.4"
+      },
+      "dependencies": {
+        "css-select": {
+          "version": "3.1.2",
+          "resolved": "https://registry.npmjs.org/css-select/-/css-select-3.1.2.tgz",
+          "integrity": "sha512-qmss1EihSuBNWNNhHjxzxSfJoFBM/lERB/Q4EnsJQQC62R2evJDW481091oAdOr9uh46/0n4nrg0It5cAnj1RA==",
+          "requires": {
+            "boolbase": "^1.0.0",
+            "css-what": "^4.0.0",
+            "domhandler": "^4.0.0",
+            "domutils": "^2.4.3",
+            "nth-check": "^2.0.0"
+          }
+        },
+        "css-what": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/css-what/-/css-what-4.0.0.tgz",
+          "integrity": "sha512-teijzG7kwYfNVsUh2H/YN62xW3KK9YhXEgSlbxMlcyjPNvdKJqFx5lrwlJgoFP1ZHlB89iGDlo/JyshKeRhv5A=="
+        },
+        "dom-serializer": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.2.0.tgz",
+          "integrity": "sha512-n6kZFH/KlCrqs/1GHMOd5i2fd/beQHuehKdWvNNffbGHTr/almdhuVvTVFb3V7fglz+nC50fFusu3lY33h12pA==",
+          "requires": {
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0",
+            "entities": "^2.0.0"
+          }
+        },
+        "domelementtype": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz",
+          "integrity": "sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w=="
+        },
+        "domhandler": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-4.0.0.tgz",
+          "integrity": "sha512-KPTbnGQ1JeEMQyO1iYXoagsI6so/C96HZiFyByU3T6iAzpXn8EGEvct6unm1ZGoed8ByO2oirxgwxBmqKF9haA==",
+          "requires": {
+            "domelementtype": "^2.1.0"
+          }
+        },
+        "domutils": {
+          "version": "2.4.4",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.4.4.tgz",
+          "integrity": "sha512-jBC0vOsECI4OMdD0GC9mGn7NXPLb+Qt6KW1YDQzeQYRUFKmNG8lh7mO5HiELfr+lLQE7loDVI4QcAxV80HS+RA==",
+          "requires": {
+            "dom-serializer": "^1.0.1",
+            "domelementtype": "^2.0.1",
+            "domhandler": "^4.0.0"
+          }
+        },
+        "nth-check": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.0.0.tgz",
+          "integrity": "sha512-i4sc/Kj8htBrAiH1viZ0TgU8Y5XqCaV/FziYK6TBczxmeKm3AEFWqqF3195yKudrarqy7Zu80Ra5dobFjn9X/Q==",
+          "requires": {
+            "boolbase": "^1.0.0"
+          }
+        }
+      }
+    },
     "chokidar": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.4.3.tgz",
@@ -4830,6 +4989,16 @@
       "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
       "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs="
     },
+    "compass-vertical-rhythm": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/compass-vertical-rhythm/-/compass-vertical-rhythm-1.4.5.tgz",
+      "integrity": "sha512-bJo3IYX7xmmZCDYjrT2XolaiNjGZ4E2JvUGxpdU0ecbH4ZLK786wvc8aHKVrGrKct9JlkmJbUi8YLrQWvOc+uA==",
+      "requires": {
+        "convert-css-length": "^1.0.1",
+        "object-assign": "^4.1.0",
+        "parse-unit": "^1.0.1"
+      }
+    },
     "component-bind": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/component-bind/-/component-bind-1.0.0.tgz",
@@ -4960,6 +5129,11 @@
       "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
       "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
     },
+    "console-polyfill": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/console-polyfill/-/console-polyfill-0.1.2.tgz",
+      "integrity": "sha1-ls/tUcr3gYn2mVcubxgnHcN8DjA="
+    },
     "console-stream": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/console-stream/-/console-stream-0.1.1.tgz",
@@ -5044,6 +5218,15 @@
         "qs": "^6.5.2"
       }
     },
+    "convert-css-length": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/convert-css-length/-/convert-css-length-1.0.2.tgz",
+      "integrity": "sha512-ecV7j3hXyXN1X2XfJBzhMR0o1Obv0v3nHmn0UiS3ACENrzbxE/EknkiunS/fCwQva0U62X1GChi8GaPh4oTlLg==",
+      "requires": {
+        "console-polyfill": "^0.1.2",
+        "parse-unit": "^1.0.1"
+      }
+    },
     "convert-hrtime": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/convert-hrtime/-/convert-hrtime-3.0.0.tgz",
@@ -6327,6 +6510,12 @@
         }
       }
     },
+    "email-addresses": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-3.1.0.tgz",
+      "integrity": "sha512-k0/r7GrWVL32kZlGwfPNgB2Y/mMXVTq/decgLczm/j34whdaspNrZO8CnXPf1laaHxI6ptUlsnAxN+UAPw+fzg==",
+      "dev": true
+    },
     "emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
@@ -7591,6 +7780,35 @@
         "trim-repeated": "^1.0.0"
       }
     },
+    "filenamify-url": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/filenamify-url/-/filenamify-url-1.0.0.tgz",
+      "integrity": "sha1-syvYExnvWGO3MHi+1Q9GpPeXX1A=",
+      "dev": true,
+      "requires": {
+        "filenamify": "^1.0.0",
+        "humanize-url": "^1.0.0"
+      },
+      "dependencies": {
+        "filename-reserved-regex": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/filename-reserved-regex/-/filename-reserved-regex-1.0.0.tgz",
+          "integrity": "sha1-5hz4BfDeHJhFZ9A4bcXfUO5a9+Q=",
+          "dev": true
+        },
+        "filenamify": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/filenamify/-/filenamify-1.2.1.tgz",
+          "integrity": "sha1-qfL/0RxQO+0wABUCknI3jx8TZaU=",
+          "dev": true,
+          "requires": {
+            "filename-reserved-regex": "^1.0.0",
+            "strip-outer": "^1.0.0",
+            "trim-repeated": "^1.0.0"
+          }
+        }
+      }
+    },
     "filesize": {
       "version": "3.5.11",
       "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.11.tgz",
@@ -8240,6 +8458,72 @@
         "micromatch": "^4.0.2"
       }
     },
+    "gatsby-plugin-manifest": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-manifest/-/gatsby-plugin-manifest-2.9.1.tgz",
+      "integrity": "sha512-SkZSAIjSp31VxstFg4y7xks9w8lxhcxjzKeChxnjeVYbAFWhgLEvo8fJ9aI3yXvFRKCX1+kj5QCaMbM9eq2pMA==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "gatsby-core-utils": "^1.7.1",
+        "gatsby-plugin-utils": "^0.6.0",
+        "semver": "^7.3.2",
+        "sharp": "^0.26.3"
+      },
+      "dependencies": {
+        "gatsby-core-utils": {
+          "version": "1.7.1",
+          "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.7.1.tgz",
+          "integrity": "sha512-hnzQCixp2C4opmSgjido/CQwSt4FL3CcmGwq6fK3PVPTT3hLPz7rvuTMQIUlR8BJjGYai6i5f6V3wfkCJ3VTgQ==",
+          "requires": {
+            "ci-info": "2.0.0",
+            "configstore": "^5.0.1",
+            "fs-extra": "^8.1.0",
+            "node-object-hash": "^2.0.0",
+            "proper-lockfile": "^4.1.1",
+            "tmp": "^0.2.1",
+            "xdg-basedir": "^4.0.0"
+          }
+        },
+        "gatsby-plugin-utils": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-0.6.0.tgz",
+          "integrity": "sha512-xoniyZtU1NLQJtb1JQaGQOjt7rriJcklfSaUnWfWojg0HmOxs+tm1ImpfHL9AOhNkVGim/YbQFXZqOQj/oUM+Q==",
+          "requires": {
+            "joi": "^17.2.1"
+          }
+        }
+      }
+    },
+    "gatsby-plugin-offline": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-offline/-/gatsby-plugin-offline-3.7.1.tgz",
+      "integrity": "sha512-PRx44UwdvGF0uxTZKdTn8K4YTelrIAHeOa/OigTM4QROZBDIfmpvZ9o92uE8oMtN9rPu7aG9tv8q8CQpzx/RYw==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "cheerio": "^1.0.0-rc.3",
+        "gatsby-core-utils": "^1.7.1",
+        "glob": "^7.1.6",
+        "idb-keyval": "^3.2.0",
+        "lodash": "^4.17.20",
+        "workbox-build": "^4.3.1"
+      },
+      "dependencies": {
+        "gatsby-core-utils": {
+          "version": "1.7.1",
+          "resolved": "https://registry.npmjs.org/gatsby-core-utils/-/gatsby-core-utils-1.7.1.tgz",
+          "integrity": "sha512-hnzQCixp2C4opmSgjido/CQwSt4FL3CcmGwq6fK3PVPTT3hLPz7rvuTMQIUlR8BJjGYai6i5f6V3wfkCJ3VTgQ==",
+          "requires": {
+            "ci-info": "2.0.0",
+            "configstore": "^5.0.1",
+            "fs-extra": "^8.1.0",
+            "node-object-hash": "^2.0.0",
+            "proper-lockfile": "^4.1.1",
+            "tmp": "^0.2.1",
+            "xdg-basedir": "^4.0.0"
+          }
+        }
+      }
+    },
     "gatsby-plugin-page-creator": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-2.4.0.tgz",
@@ -8270,6 +8554,14 @@
         }
       }
     },
+    "gatsby-plugin-react-helmet": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-3.7.0.tgz",
+      "integrity": "sha512-vynqIMOUR/sOfM2eXpZiECuEZ6G/97ic+ulkyCVw7CjHNTQCW2evzJKNbHQrBYgmQCGXzQJuyGf1F5khLm8H7g==",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "gatsby-plugin-sharp": {
       "version": "2.11.2",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-sharp/-/gatsby-plugin-sharp-2.11.2.tgz",
@@ -8547,6 +8839,14 @@
         "babel-plugin-remove-graphql-queries": "^2.10.0"
       }
     },
+    "gatsby-plugin-typography": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/gatsby-plugin-typography/-/gatsby-plugin-typography-2.9.0.tgz",
+      "integrity": "sha512-Hl4yEsnQHB6L2xmp11ZBI+kLCZ+SME2holFGOzGEUGoi+GL+V39EFrmGsjiNGupkYHNm8evOB5Cvnwkbxfsi4w==",
+      "requires": {
+        "@babel/runtime": "^7.12.5"
+      }
+    },
     "gatsby-plugin-utils": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/gatsby-plugin-utils/-/gatsby-plugin-utils-0.3.0.tgz",
@@ -8925,6 +9225,11 @@
         "has-symbols": "^1.0.1"
       }
     },
+    "get-own-enumerable-property-symbols": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz",
+      "integrity": "sha512-I0UBV/XOz1XkIJHEUDMZAbzCThU/H8DxmSfmdGcKPnVhu2VfFqr34jr9777IyaTYvxjedWhqVIilEDsCdP5G6g=="
+    },
     "get-port": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-3.2.0.tgz",
@@ -8964,6 +9269,60 @@
         "assert-plus": "^1.0.0"
       }
     },
+    "gh-pages": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/gh-pages/-/gh-pages-3.1.0.tgz",
+      "integrity": "sha512-3b1rly9kuf3/dXsT8+ZxP0UhNLOo1CItj+3e31yUVcaph/yDsJ9RzD7JOw5o5zpBTJVQLlJAASNkUfepi9fe2w==",
+      "dev": true,
+      "requires": {
+        "async": "^2.6.1",
+        "commander": "^2.18.0",
+        "email-addresses": "^3.0.1",
+        "filenamify-url": "^1.0.0",
+        "find-cache-dir": "^3.3.1",
+        "fs-extra": "^8.1.0",
+        "globby": "^6.1.0"
+      },
+      "dependencies": {
+        "array-union": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/array-union/-/array-union-1.0.2.tgz",
+          "integrity": "sha1-mjRBDk9OPaI96jdb5b5w8kd47Dk=",
+          "dev": true,
+          "requires": {
+            "array-uniq": "^1.0.1"
+          }
+        },
+        "async": {
+          "version": "2.6.3",
+          "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
+          "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+          "dev": true,
+          "requires": {
+            "lodash": "^4.17.14"
+          }
+        },
+        "globby": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-6.1.0.tgz",
+          "integrity": "sha1-9abXDoOV4hyFj7BInWTfAkJNUGw=",
+          "dev": true,
+          "requires": {
+            "array-union": "^1.0.1",
+            "glob": "^7.0.3",
+            "object-assign": "^4.0.1",
+            "pify": "^2.0.0",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "pify": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+          "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
+          "dev": true
+        }
+      }
+    },
     "gifwrap": {
       "version": "0.9.2",
       "resolved": "https://registry.npmjs.org/gifwrap/-/gifwrap-0.9.2.tgz",
@@ -9262,6 +9621,11 @@
       "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz",
       "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg=="
     },
+    "gray-percentage": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/gray-percentage/-/gray-percentage-2.0.0.tgz",
+      "integrity": "sha1-tyonTRsTeRBKAFC2OyB9xT/lb5k="
+    },
     "gud": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz",
@@ -9666,6 +10030,61 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz",
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw=="
     },
+    "humanize-url": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/humanize-url/-/humanize-url-1.0.1.tgz",
+      "integrity": "sha1-9KuZ4NKIF0yk4eUEB8VfuuRk7/8=",
+      "dev": true,
+      "requires": {
+        "normalize-url": "^1.0.0",
+        "strip-url-auth": "^1.0.0"
+      },
+      "dependencies": {
+        "is-plain-obj": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+          "integrity": "sha1-caUMhCnfync8kqOQpKA7OfzVHT4=",
+          "dev": true
+        },
+        "normalize-url": {
+          "version": "1.9.1",
+          "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-1.9.1.tgz",
+          "integrity": "sha1-LMDWazHqIwNkWENuNiDYWVTGbDw=",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.0.1",
+            "prepend-http": "^1.0.0",
+            "query-string": "^4.1.0",
+            "sort-keys": "^1.0.0"
+          }
+        },
+        "prepend-http": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+          "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
+          "dev": true
+        },
+        "query-string": {
+          "version": "4.3.4",
+          "resolved": "https://registry.npmjs.org/query-string/-/query-string-4.3.4.tgz",
+          "integrity": "sha1-u7aTucqRXCMlFbIosaArYJBD2+s=",
+          "dev": true,
+          "requires": {
+            "object-assign": "^4.1.0",
+            "strict-uri-encode": "^1.0.0"
+          }
+        },
+        "sort-keys": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/sort-keys/-/sort-keys-1.1.2.tgz",
+          "integrity": "sha1-RBttTTRnmPG05J6JIK37oOVD+a0=",
+          "dev": true,
+          "requires": {
+            "is-plain-obj": "^1.0.0"
+          }
+        }
+      }
+    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -9714,6 +10133,11 @@
         }
       }
     },
+    "idb-keyval": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-3.2.0.tgz",
+      "integrity": "sha512-slx8Q6oywCCSfKgPgL0sEsXtPVnSbTLWpyiDcu6msHOyKOLari1TD1qocXVCft80umnkk3/Qqh3lwoFt8T/BPQ=="
+    },
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -10363,6 +10787,11 @@
         "has-symbols": "^1.0.1"
       }
     },
+    "is-regexp": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-1.0.0.tgz",
+      "integrity": "sha1-/S2INUXEa6xaYz57mgnof6LLUGk="
+    },
     "is-relative": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
@@ -10978,6 +11407,11 @@
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
       "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
     },
+    "lodash._reinterpolate": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz",
+      "integrity": "sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0="
+    },
     "lodash.clonedeep": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
@@ -11013,6 +11447,11 @@
       "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
       "integrity": "sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk="
     },
+    "lodash.isnumber": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz",
+      "integrity": "sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w="
+    },
     "lodash.map": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.map/-/lodash.map-4.6.0.tgz",
@@ -11028,6 +11467,23 @@
       "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz",
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
+    "lodash.template": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/lodash.template/-/lodash.template-4.5.0.tgz",
+      "integrity": "sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==",
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0",
+        "lodash.templatesettings": "^4.0.0"
+      }
+    },
+    "lodash.templatesettings": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz",
+      "integrity": "sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==",
+      "requires": {
+        "lodash._reinterpolate": "^3.0.0"
+      }
+    },
     "lodash.toarray": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
@@ -11643,6 +12099,14 @@
       "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
       "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
     },
+    "modularscale": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/modularscale/-/modularscale-1.0.2.tgz",
+      "integrity": "sha1-So8TrzKl5SFPxuLPxSkGSr/X2Hc=",
+      "requires": {
+        "lodash.isnumber": "^3.0.0"
+      }
+    },
     "moment": {
       "version": "2.29.1",
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.1.tgz",
@@ -12581,6 +13045,11 @@
         "protocols": "^1.4.0"
       }
     },
+    "parse-unit": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parse-unit/-/parse-unit-1.0.1.tgz",
+      "integrity": "sha1-fhu21b7zh0wo45JSaiVBFwKR7s8="
+    },
     "parse-url": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/parse-url/-/parse-url-5.0.2.tgz",
@@ -12592,6 +13061,19 @@
         "protocols": "^1.4.0"
       }
     },
+    "parse5": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
+      "integrity": "sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw=="
+    },
+    "parse5-htmlparser2-tree-adapter": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/parse5-htmlparser2-tree-adapter/-/parse5-htmlparser2-tree-adapter-6.0.1.tgz",
+      "integrity": "sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==",
+      "requires": {
+        "parse5": "^6.0.1"
+      }
+    },
     "parseqs": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/parseqs/-/parseqs-0.0.5.tgz",
@@ -14147,6 +14629,22 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-3.0.0.tgz",
       "integrity": "sha512-XzgvowFrwDo6TWcpJ/WTiarb9UI6lhA4PMzS7n1joK3sHfBBBOQHUc0U4u57D6DWO9vHv6lVSWx2Q/Ymfyv4hw=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
+    "react-helmet": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
+      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.7.2",
+        "react-fast-compare": "^3.1.1",
+        "react-side-effect": "^2.1.0"
+      }
+    },
     "react-hot-loader": {
       "version": "4.13.0",
       "resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
@@ -14189,6 +14687,16 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-side-effect": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
+      "integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
+    },
+    "react-typography": {
+      "version": "0.16.19",
+      "resolved": "https://registry.npmjs.org/react-typography/-/react-typography-0.16.19.tgz",
+      "integrity": "sha512-kV2qLEsdm0x9P4YXQEDVc88tDb4Vg0h/vdVZGgbqaRn8ERvNzV76JHUeOby3vvcUYU5MPd5Kz5DPH9Bhp4I/iw=="
+    },
     "read": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
@@ -16092,6 +16600,23 @@
         "xtend": "^4.0.0"
       }
     },
+    "stringify-object": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/stringify-object/-/stringify-object-3.3.0.tgz",
+      "integrity": "sha512-rHqiFh1elqCQ9WPLIC8I0Q/g/wj5J1eMkyoiD6eoQApWHP0FtlK7rqnhmabL5VUY9JQCcqwwvlOaSuutekgyrw==",
+      "requires": {
+        "get-own-enumerable-property-symbols": "^3.0.0",
+        "is-obj": "^1.0.1",
+        "is-regexp": "^1.0.0"
+      },
+      "dependencies": {
+        "is-obj": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
+          "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
+        }
+      }
+    },
     "strip-ansi": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
@@ -16112,6 +16637,15 @@
       "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
       "integrity": "sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM="
     },
+    "strip-comments": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/strip-comments/-/strip-comments-1.0.2.tgz",
+      "integrity": "sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==",
+      "requires": {
+        "babel-extract-comments": "^1.0.0",
+        "babel-plugin-transform-object-rest-spread": "^6.26.0"
+      }
+    },
     "strip-dirs": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/strip-dirs/-/strip-dirs-2.1.0.tgz",
@@ -16151,6 +16685,12 @@
         "escape-string-regexp": "^1.0.2"
       }
     },
+    "strip-url-auth": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-url-auth/-/strip-url-auth-1.0.1.tgz",
+      "integrity": "sha1-IrD6OkE4WzO+PzMVUbu4N/oM164=",
+      "dev": true
+    },
     "strtok3": {
       "version": "6.0.6",
       "resolved": "https://registry.npmjs.org/strtok3/-/strtok3-6.0.6.tgz",
@@ -16795,6 +17335,39 @@
         "is-typedarray": "^1.0.0"
       }
     },
+    "typography": {
+      "version": "0.16.19",
+      "resolved": "https://registry.npmjs.org/typography/-/typography-0.16.19.tgz",
+      "integrity": "sha512-zfsyjPPB1RaK8TzU3REta6EGDZa++YQ6g/CWw7hy/8xQK1qyzFWisMIw5J+Yg1KyiVgcchmxlgMcMA6JAJ9oew==",
+      "requires": {
+        "compass-vertical-rhythm": "^1.4.5",
+        "decamelize": "^1.2.0",
+        "gray-percentage": "^2.0.0",
+        "lodash": "^4.13.1",
+        "modularscale": "^1.0.2",
+        "object-assign": "^4.1.0",
+        "typography-normalize": "^0.16.19"
+      }
+    },
+    "typography-breakpoint-constants": {
+      "version": "0.16.19",
+      "resolved": "https://registry.npmjs.org/typography-breakpoint-constants/-/typography-breakpoint-constants-0.16.19.tgz",
+      "integrity": "sha512-vXjfV9hwAXIOf5+U5GN137ahBkK+sj1TJu/5ksmP+8XB/D80lmGb/m0nKviWaQ3t7HLrK848VGrFS+6E2vcmVg=="
+    },
+    "typography-normalize": {
+      "version": "0.16.19",
+      "resolved": "https://registry.npmjs.org/typography-normalize/-/typography-normalize-0.16.19.tgz",
+      "integrity": "sha512-vtnSv/uGBZVbd4e/ZhZB9HKBgKKlWQUXw74+ADIHHxzKp27CEf8PSR8TX1zF2qSyQ9/qMdqLwXYz8yRQFq9JLQ=="
+    },
+    "typography-theme-fairy-gates": {
+      "version": "0.16.19",
+      "resolved": "https://registry.npmjs.org/typography-theme-fairy-gates/-/typography-theme-fairy-gates-0.16.19.tgz",
+      "integrity": "sha512-3m0VdY504QqOKu3u3Q41iA9V8PHYFARsc28iYjP+wxZKrbc49TOUs7vH+EgqaLeeu63cIXO1wZ3BuULQLRwukg==",
+      "requires": {
+        "gray-percentage": "^2.0.0",
+        "typography-breakpoint-constants": "^0.16.19"
+      }
+    },
     "unbzip2-stream": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz",
@@ -18027,6 +18600,157 @@
       "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz",
       "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ=="
     },
+    "workbox-background-sync": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-background-sync/-/workbox-background-sync-4.3.1.tgz",
+      "integrity": "sha512-1uFkvU8JXi7L7fCHVBEEnc3asPpiAL33kO495UMcD5+arew9IbKW2rV5lpzhoWcm/qhGB89YfO4PmB/0hQwPRg==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-broadcast-update": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-4.3.1.tgz",
+      "integrity": "sha512-MTSfgzIljpKLTBPROo4IpKjESD86pPFlZwlvVG32Kb70hW+aob4Jxpblud8EhNb1/L5m43DUM4q7C+W6eQMMbA==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-build": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-build/-/workbox-build-4.3.1.tgz",
+      "integrity": "sha512-UHdwrN3FrDvicM3AqJS/J07X0KXj67R8Cg0waq1MKEOqzo89ap6zh6LmaLnRAjpB+bDIz+7OlPye9iii9KBnxw==",
+      "requires": {
+        "@babel/runtime": "^7.3.4",
+        "@hapi/joi": "^15.0.0",
+        "common-tags": "^1.8.0",
+        "fs-extra": "^4.0.2",
+        "glob": "^7.1.3",
+        "lodash.template": "^4.4.0",
+        "pretty-bytes": "^5.1.0",
+        "stringify-object": "^3.3.0",
+        "strip-comments": "^1.0.2",
+        "workbox-background-sync": "^4.3.1",
+        "workbox-broadcast-update": "^4.3.1",
+        "workbox-cacheable-response": "^4.3.1",
+        "workbox-core": "^4.3.1",
+        "workbox-expiration": "^4.3.1",
+        "workbox-google-analytics": "^4.3.1",
+        "workbox-navigation-preload": "^4.3.1",
+        "workbox-precaching": "^4.3.1",
+        "workbox-range-requests": "^4.3.1",
+        "workbox-routing": "^4.3.1",
+        "workbox-strategies": "^4.3.1",
+        "workbox-streams": "^4.3.1",
+        "workbox-sw": "^4.3.1",
+        "workbox-window": "^4.3.1"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "4.0.3",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
+          "integrity": "sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==",
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "jsonfile": "^4.0.0",
+            "universalify": "^0.1.0"
+          }
+        }
+      }
+    },
+    "workbox-cacheable-response": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-cacheable-response/-/workbox-cacheable-response-4.3.1.tgz",
+      "integrity": "sha512-Rp5qlzm6z8IOvnQNkCdO9qrDgDpoPNguovs0H8C+wswLuPgSzSp9p2afb5maUt9R1uTIwOXrVQMmPfPypv+npw==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-core": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-core/-/workbox-core-4.3.1.tgz",
+      "integrity": "sha512-I3C9jlLmMKPxAC1t0ExCq+QoAMd0vAAHULEgRZ7kieCdUd919n53WC0AfvokHNwqRhGn+tIIj7vcb5duCjs2Kg=="
+    },
+    "workbox-expiration": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-expiration/-/workbox-expiration-4.3.1.tgz",
+      "integrity": "sha512-vsJLhgQsQouv9m0rpbXubT5jw0jMQdjpkum0uT+d9tTwhXcEZks7qLfQ9dGSaufTD2eimxbUOJfWLbNQpIDMPw==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-google-analytics": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-4.3.1.tgz",
+      "integrity": "sha512-xzCjAoKuOb55CBSwQrbyWBKqp35yg1vw9ohIlU2wTy06ZrYfJ8rKochb1MSGlnoBfXGWss3UPzxR5QL5guIFdg==",
+      "requires": {
+        "workbox-background-sync": "^4.3.1",
+        "workbox-core": "^4.3.1",
+        "workbox-routing": "^4.3.1",
+        "workbox-strategies": "^4.3.1"
+      }
+    },
+    "workbox-navigation-preload": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-navigation-preload/-/workbox-navigation-preload-4.3.1.tgz",
+      "integrity": "sha512-K076n3oFHYp16/C+F8CwrRqD25GitA6Rkd6+qAmLmMv1QHPI2jfDwYqrytOfKfYq42bYtW8Pr21ejZX7GvALOw==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-precaching": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-precaching/-/workbox-precaching-4.3.1.tgz",
+      "integrity": "sha512-piSg/2csPoIi/vPpp48t1q5JLYjMkmg5gsXBQkh/QYapCdVwwmKlU9mHdmy52KsDGIjVaqEUMFvEzn2LRaigqQ==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-range-requests": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-range-requests/-/workbox-range-requests-4.3.1.tgz",
+      "integrity": "sha512-S+HhL9+iTFypJZ/yQSl/x2Bf5pWnbXdd3j57xnb0V60FW1LVn9LRZkPtneODklzYuFZv7qK6riZ5BNyc0R0jZA==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-routing": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-routing/-/workbox-routing-4.3.1.tgz",
+      "integrity": "sha512-FkbtrODA4Imsi0p7TW9u9MXuQ5P4pVs1sWHK4dJMMChVROsbEltuE79fBoIk/BCztvOJ7yUpErMKa4z3uQLX+g==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-strategies": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-strategies/-/workbox-strategies-4.3.1.tgz",
+      "integrity": "sha512-F/+E57BmVG8dX6dCCopBlkDvvhg/zj6VDs0PigYwSN23L8hseSRwljrceU2WzTvk/+BSYICsWmRq5qHS2UYzhw==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-streams": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-streams/-/workbox-streams-4.3.1.tgz",
+      "integrity": "sha512-4Kisis1f/y0ihf4l3u/+ndMkJkIT4/6UOacU3A4BwZSAC9pQ9vSvJpIi/WFGQRH/uPXvuVjF5c2RfIPQFSS2uA==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
+    "workbox-sw": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-sw/-/workbox-sw-4.3.1.tgz",
+      "integrity": "sha512-0jXdusCL2uC5gM3yYFT6QMBzKfBr2XTk0g5TPAV4y8IZDyVNDyj1a8uSXy3/XrvkVTmQvLN4O5k3JawGReXr9w=="
+    },
+    "workbox-window": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/workbox-window/-/workbox-window-4.3.1.tgz",
+      "integrity": "sha512-C5gWKh6I58w3GeSc0wp2Ne+rqVw8qwcmZnQGpjiek8A2wpbxSJb1FdCoQVO+jDJs35bFgo/WETgl1fqgsxN0Hg==",
+      "requires": {
+        "workbox-core": "^4.3.1"
+      }
+    },
     "worker-farm": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.7.0.tgz",
diff --git a/package.json b/package.json
index 57d25ea..98d8d9f 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "deploy": "gatsby build --prefix-paths && gh-pages -d public -b main"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.32",
@@ -19,15 +20,24 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "gatsby": "^2.26.1",
     "gatsby-image": "^2.8.0",
+    "gatsby-plugin-manifest": "^2.9.1",
+    "gatsby-plugin-offline": "^3.7.1",
+    "gatsby-plugin-react-helmet": "^3.7.0",
     "gatsby-plugin-sharp": "^2.11.2",
+    "gatsby-plugin-typography": "^2.9.0",
     "gatsby-source-filesystem": "^2.8.1",
     "gatsby-transformer-sharp": "^2.9.0",
     "normalize.css": "^8.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-icons": "^4.1.0"
+    "react-helmet": "^6.1.0",
+    "react-icons": "^4.1.0",
+    "react-typography": "^0.16.19",
+    "typography": "^0.16.19",
+    "typography-theme-fairy-gates": "^0.16.19"
   },
   "devDependencies": {
+    "gh-pages": "^3.1.0",
     "prettier": "2.1.2"
   },
   "repository": {
diff --git a/src/assets/about/lake_krzywe.png b/src/assets/about/lake_krzywe.png
new file mode 100644
index 0000000..f978d17
Binary files /dev/null and b/src/assets/about/lake_krzywe.png differ
diff --git a/src/assets/about/spring-lake.png b/src/assets/about/spring-lake.png
new file mode 100644
index 0000000..065fe9c
Binary files /dev/null and b/src/assets/about/spring-lake.png differ
diff --git a/src/assets/about/zalew-trees.png b/src/assets/about/zalew-trees.png
new file mode 100644
index 0000000..8cbb6b9
Binary files /dev/null and b/src/assets/about/zalew-trees.png differ
diff --git a/src/assets/icon.jpg b/src/assets/icon.jpg
new file mode 100644
index 0000000..eb82a52
Binary files /dev/null and b/src/assets/icon.jpg differ
diff --git a/src/components/aboutSection/aboutSection.js b/src/components/aboutSection/aboutSection.js
new file mode 100644
index 0000000..9934da5
--- /dev/null
+++ b/src/components/aboutSection/aboutSection.js
@@ -0,0 +1,104 @@
+import React from 'react'
+import { data } from '../../constants/links'
+import styles from './aboutSection.module.css'
+import Img from 'gatsby-image'
+import { graphql, useStaticQuery } from "gatsby"
+
+
+const AboutSection = () => {
+
+const data = useStaticQuery(graphql`
+fragment squareImage on File {
+  childImageSharp {
+    fluid(maxWidth: 550, maxHeight: 550) {
+      ...GatsbyImageSharpFluid
+    }
+  }
+}
+
+query {
+  image1: file(relativePath: { eq: "about/lake_krzywe.png" }) {
+    ...squareImage
+  }
+
+  image2: file(relativePath: { eq: "about/spring-lake.png" }) {
+    ...squareImage
+  }
+
+  image3: file(relativePath: { eq: "about/zalew-trees.png" }) {
+    ...squareImage
+  }
+}
+`);
+
+  
+  const { image1, image2, image3 } = data
+  console.log(data)
+  console.log(image1.childImageSharp.fluid)
+    return (
+      <section>
+        <article className={styles.card}>
+        
+        <p className={styles.intro}>
+          My name's Magdalena Rosłaniec but I like my internet nickname: makneta.
+          I'm a teacher, mother and self-taught developer who wants to change
+          her career into programming.
+        </p>
+        <div >
+          <Img fluid={image1.childImageSharp.fluid}
+            alt="spring lake"
+            style={{maxWidth: "550px", margin: "3rem auto", borderRadius: "5px",
+            boxShadow: "1px 3px 3px 1px rgba(0, 0, 0, 0.5"}}
+            loading="eager"
+            
+          />
+        </div>
+        <p className={styles.description}>
+          I live in a medium size town in the north-east Poland. I love my small
+          fatherland, it's a peaceful place, full of lakes and forests, where I
+          enjoy running, nordic walking and riding a bike in my free time.
+        </p>
+        <div >
+        <Img fluid={image2.childImageSharp.fluid}
+            alt="spring lake"
+            style={{maxWidth: "550px", margin: "3rem auto", borderRadius: "5px",
+            boxShadow: "1px 3px 3px 1px rgba(0, 0, 0, 0.5"}}
+            loading="eager"
+           
+          />
+        </div>
+        <p className={styles.description}>
+          I started my adventure with programming in September 2017 and since
+          then I've been slowly but steadily learning Python and Django. I've
+          learnt also a bit of SQL, JavaScript and C++ but Python is deeply in
+          my heart. My other passion is art, so I sometimes "draw" in CSS for
+          pleasure.
+        </p>
+        
+        <p className={styles.description}>
+          I take part in a #100DaysOfCode movement and everyday teach myself
+          something new. I'm a driven by these words:
+         
+          <blockquote className={styles.blockquote}>
+            “Don't wish it was easier
+            wish you were better. Don't wish for less problems wish for more
+            skills. Don't wish for less challenge wish for more wisdom” 
+            <em>Jin Rohn</em> 
+        </blockquote> 
+          
+        </p>
+        <div >
+        <Img fluid={image3.childImageSharp.fluid}
+              alt="spring lake"
+              style={{ maxWidth: "550px", margin: "3rem auto", borderRadius: "5px",
+              boxShadow: "1px 3px 3px 1px rgba(0, 0, 0, 0.5"}}
+              loading="eager"
+              
+            />
+        </div>
+        </article>
+      </section>
+    )
+}
+
+export default AboutSection
diff --git a/src/components/aboutSection/aboutSection.module.css b/src/components/aboutSection/aboutSection.module.css
new file mode 100644
index 0000000..33dc715
--- /dev/null
+++ b/src/components/aboutSection/aboutSection.module.css
@@ -0,0 +1,90 @@
+.card {
+    
+    margin-bottom: 0;     
+    margin-top: -3rem; 
+    padding: 5%;
+    grid-template-rows: 1fr;
+  }
+  
+  .about-title {
+    padding-bottom: 2rem;
+  }
+  
+  .intro {
+    line-height: 1.5;
+    text-align: justify;
+    margin-bottom: 2.2em;
+    font-size: 1.1rem;
+    letter-spacing: 1px;
+  }
+
+  .description {
+    line-height: 1.5;
+    text-align: justify;
+    margin-bottom: 2.2rem;
+    margin-top: 2.2rem;
+  }
+  
+  .about-picture {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 2rem auto;
+  }
+  
+  .about-img {
+    max-width: 290px;
+    height: auto;
+    border-radius: 5px;
+    box-shadow: 1px 3px 3px 1px var(--box-shadow-color);
+  }
+  
+  .about-img:hover {
+    transform: scale(1.05);
+  }
+  
+  
+  .blockquote {
+    background: #cac7c7;
+    border-left: 10px solid var(--green);
+    margin: 1.5em 10px;
+    padding: 1rem;
+    padding-left: 2rem;
+    line-height: 1.5;
+    letter-spacing: 1px;
+    font-size: 1.1rem;
+  }
+
+  @media (min-width: 672px) {
+    .card {
+      padding-left: 10%;
+      padding-right: 10%;
+    }
+    .about-img {
+      max-width: 310px;
+    }
+    .description {
+      font-size: 1.4rem;
+    }
+
+    .intro {
+      font-size: 1.5rem;
+    }
+  }
+  @media (min-width: 798px) {
+    .card {
+      padding-left: 10%;
+      padding-right: 10%;
+    }
+
+    .description {
+      font-size: 1.6rem;
+      color: rgba(0, 0, 0, 0.8)
+    }
+    .intro { 
+      font-size: 1.65rem;
+    }
+    .about-img {
+      max-width: 400px;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/articles/articles.js b/src/components/articles/articles.js
index 153615c..f266e96 100644
--- a/src/components/articles/articles.js
+++ b/src/components/articles/articles.js
@@ -4,74 +4,48 @@ import SectionTitle from '../sectionTitle/sectionTitle'
 import MoreBtn from '../moreBtn/moreBtn'
 
 const Articles = () => {
-    return (
-        <section className={styles.articles} id="articles">
-        <SectionTitle text="from my blog"/>
-       
-        <div className={styles.cards}>
-          <figure className={styles.card}>
-            <div className={styles.topCard}>
-              <img src="./img/Name_Generator_1.png" alt="" />
-            </div>
+  return (
+    <section className={styles.articles} id="articles">
+      <SectionTitle text="from my blog" />
+
+      <div className={styles.cards}>
+        <figure className={styles.card}>
+          <div className={styles.topCard}>
+            <img src="./img/Name_Generator_1.png" alt="" />
+          </div>
 
-            <figcaption className={styles.description} className={styles.article}>
-              <div className={styles.title}>
-                <h2 className={styles.projectTitle}>
-                  <a href="">Name Generator in Python</a>
-                </h2>
-                <div className={styles.rowSubtitle}>
-                  <h3 className={styles.category}>Python</h3>
-                  <h3 className={styles.slash}>/</h3>
-                  <h3 className={styles.date}>Nov. 2, 2020</h3>
-                </div>
+          <figcaption className={styles.description} className={styles.article}>
+            <div className={styles.title}>
+              <h2 className={styles.projectTitle}>
+                <a href="">Name Generator in Python</a>
+              </h2>
+              <div className={styles.rowSubtitle}>
+                <h3 className={styles.category}>Python</h3>
+                <h3 className={styles.slash}>/</h3>
+                <h3 className={styles.date}>Nov. 2, 2020</h3>
               </div>
-              <div className={styles.text}>
-                <p>
-                  When I started learning to code, I found a pretty long list of
-                  tasks to do. Some of them were pretty easy, but others were
-                  much difficult. I solved some of the puzzles then. But now,
-                  and I want to go through all of them and write about it here.
-                  The language of my choice (for now) is Python because I
-                  haven't been using it much recently.
+            </div>
+            <div className={styles.text}>
+              <p>
+                When I started learning to code, I found a pretty long list of
+                tasks to do. Some of them were pretty easy, but others were
+                much difficult. I solved some of the puzzles then. But now,
+                and I want to go through all of them and write about it here.
+                The language of my choice (for now) is Python because I
+                haven't been using it much recently.
                 </p>
-              </div>
+            </div>
 
-           
-            </figcaption>
-          </figure>
 
-          <figure class="card">
-            <div class="top-card">
-              <img src="./img/python-logo.png" alt="" />
-            </div>
+          </figcaption>
+        </figure>
 
-            <figcaption class="description article">
-              <div class="title">
-                <h2 class="project-title">
-                  <a href=""> How I was learning Python</a>
-                </h2>
-                <div class="row-subtitle">
-                  <h3 class="category">Python</h3>
-                  <h3 class="slash">/</h3>
-                  <h3 class="date">Sept. 23, 2020</h3>
-                </div>
-              </div>
-              <div class="text">
-                <p>
-                  Python is my first and favourite programming language (not
-                  that I've been learning lots of them). It's friendly for new
-                  coders, almost like writing in English. There are also lots of
-                  resources for learners.
-                </p>
-              </div>
-            </figcaption>
-          </figure>
-        </div>
-        <div className={styles.spaceBottom}>
+      </div>
+      <div className={styles.spaceBottom}>
         <MoreBtn text="View More Posts" href="/articles/" />
       </div>
-      </section>
-    )
+    </section>
+  )
 }
 
 export default Articles
diff --git a/src/components/contactForm/contactForm.js b/src/components/contactForm/contactForm.js
new file mode 100644
index 0000000..655a71c
--- /dev/null
+++ b/src/components/contactForm/contactForm.js
@@ -0,0 +1,27 @@
+import React from 'react'
+import styles from './contactForm.module.css'
+
+
+const ContactForm = () => {
+    return (
+        <section className={styles.contactPage}>
+            <article className={styles.contactForm}>
+
+                <form action="https://formspree.io/f/xeqpvzpr" method="POST">
+                    <div className={styles.formGroup}>
+                        <h3>What can I do for you?</h3>
+                        <input type="text" name="name" placeholder="name" className={styles.formControl} />
+                        <input type="email" name="_replyto" placeholder="email" className={styles.formControl} />
+
+
+                        <textarea name="massage" id="message" rows="25" placeholder="message" className={styles.formControl} />
+                        <button type="submit" className={styles.submitBtn} >submit here</button>
+                    </div>
+                </form>
+
+            </article>
+        </section>
+    )
+}
+
+export default ContactForm
diff --git a/src/components/contactForm/contactForm.module.css b/src/components/contactForm/contactForm.module.css
new file mode 100644
index 0000000..9826419
--- /dev/null
+++ b/src/components/contactForm/contactForm.module.css
@@ -0,0 +1,71 @@
+.contact-page {
+  margin: -5rem auto 0;
+}
+
+.contact-form {
+   display: flex;
+   justify-content: center;
+   align-items: center;
+   margin: 0 auto;
+
+}
+
+.form-group {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: center;
+    max-width: 550px;
+    justify-content: center;
+  
+}
+
+input[type=text], input[type=email], textarea {
+  width: 100%;
+  margin: 0.5rem 1rem;
+  vertical-align: middle;
+  padding: .5rem;
+  font-size: 1rem;
+  outline: none;   
+}
+
+.form-control {
+  background:#f9f9f9;
+  border: 2px solid #e2e2e2;
+}
+
+.form-group h3 {
+  display: block;
+  width: 100%;
+  text-transform: uppercase;
+  font-size: 1.25rem;
+  color: rgba(0, 0, 0, 0.8);
+  padding:  .75rem 1.25rem;
+  line-height: 1.5;
+  text-align: left;
+  
+}
+
+.submitBtn {
+    padding: 1.35rem 2.5rem;
+    font-size: 1.25rem;
+    outline: transparent;
+    background: var(--green);
+    border: 1px solid var(--green);
+    border-radius: 35px;
+    color: var(--text-on-color);
+    text-decoration: none;
+    letter-spacing: 1px;
+    margin-top: 2rem;
+    min-width: 200px;
+    text-align: center;
+}
+
+
+  .submitBtn:hover,
+  .submitBtn:focus {
+    background: transparent;
+    border: 2px solid #93b876;
+    color: var(--green);
+    transform: scale(1.1);
+    font-weight: bold;
+  }
\ No newline at end of file
diff --git a/src/components/footNote/footNote.module.css b/src/components/footNote/footNote.module.css
index d53132d..c7e7a12 100644
--- a/src/components/footNote/footNote.module.css
+++ b/src/components/footNote/footNote.module.css
@@ -2,6 +2,7 @@
     height: 60px;
     border-top: 2px solid var(--grey-border);
     letter-spacing: 1px;
+    background: var( --black-bg);
   
     color: rgba(255, 255, 255, 0.7);
   }
\ No newline at end of file
diff --git a/src/components/header/header.js b/src/components/header/header.js
deleted file mode 100644
index 3f4730a..0000000
--- a/src/components/header/header.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react'
-import styles from "./header.module.css"
-import Navbar from "../navbar/navbar"
-import Hero from "../hero/hero"
-
-
-const Header = props => {
-    return (
-      <header className={styles.header}>
-       <Navbar />
-       <Hero />
-       
-      </header>
-    )
-}
-
-export default Header
diff --git a/src/components/header/header.module.css b/src/components/header/header.module.css
deleted file mode 100644
index e8c6a8d..0000000
--- a/src/components/header/header.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-header {
-  background: rgb(25, 26, 29);
-  clip-path: polygon(100% 0, 100% 89%, 72% 100%, 0 83%, 0 0);
-  padding: 0 0 2.5%;
-  margin-bottom: 10rem;
-}
-
-section {
-  width: 100%;
-  padding: 5%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-@media (min-width: 798px) {
-  section {
-    display: flex;
-    flex-direction: row;
-  }
-}
diff --git a/src/components/hero/hero.js b/src/components/hero/hero.js
index bd4efca..784ed8c 100644
--- a/src/components/hero/hero.js
+++ b/src/components/hero/hero.js
@@ -16,7 +16,7 @@ const Hero = props => {
       </div>
       <div className={styles.mePhoto}>
         <figure className={styles.me}>
-          <img className={styles.meImg} src={author} alt="woman's face" />
+          <img className={styles.meImg} src={author} alt="face" />
         </figure>
       </div>
     </section>
diff --git a/src/components/heroSmall/heroSmall.js b/src/components/heroSmall/heroSmall.js
new file mode 100644
index 0000000..82e1818
--- /dev/null
+++ b/src/components/heroSmall/heroSmall.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from './heroSmall.module.css'
+
+const HeroSmall = (props) => {
+    return (
+        <section className={styles.hero}>
+            <div className={styles.heroInfo}>
+                <h1>{props.title}</h1>
+                <p>
+                   {props.text}
+            </p>
+            </div>
+        </section>
+    )
+}
+
+export default HeroSmall
diff --git a/src/components/heroSmall/heroSmall.module.css b/src/components/heroSmall/heroSmall.module.css
new file mode 100644
index 0000000..e507269
--- /dev/null
+++ b/src/components/heroSmall/heroSmall.module.css
@@ -0,0 +1,56 @@
+.hero {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    /* margin-top: 65px; */
+    text-align: center;
+    line-height: 1.75;
+    color: white;
+    min-height: 55vh;
+    padding-top: 3rem;
+    padding-bottom: 7.5rem;
+    align-items: center;
+    justify-content: center;
+   
+}
+  .hero-info {
+      display: flex;
+      flex-direction: column;
+    padding-left: 5%;
+    padding-right: 5%;
+    width: 100%;
+    
+  }
+  .hero h1 {
+    margin-top: 5rem;
+    margin-bottom: 1rem;
+    font-weight: bold;
+    letter-spacing: 2px;
+    font-size: 2rem;
+    color: var(--green);
+  }
+  
+  .hero p {
+    font-size: 1.25rem;
+  }
+
+  @media (min-width: 672px) {
+    .hero h1 {
+        margin-top: 0;
+        font-size: 2.5rem;
+      }
+}
+
+@media (min-width: 798px) {
+    .hero h1 {
+        margin-top: 0;
+        padding-left: 10%;
+        padding-right: 10%;
+        font-size: 3rem;
+      }
+    
+      .hero p {
+        font-size: 1.5rem;
+      }
+   
+}
\ No newline at end of file
diff --git a/src/components/navbar/navbar.js b/src/components/navbar/navbar.js
index aea0631..8a147fa 100644
--- a/src/components/navbar/navbar.js
+++ b/src/components/navbar/navbar.js
@@ -11,9 +11,7 @@ const tempLinks = data.map(link => {
   )
 })
 
-
 const Navbar = () => {
-
     return (
         <div>
         <nav className={styles.nav}>
diff --git a/src/components/seo.js b/src/components/seo.js
new file mode 100644
index 0000000..ced3101
--- /dev/null
+++ b/src/components/seo.js
@@ -0,0 +1,81 @@
+import React from "react"
+import PropTypes from "prop-types"
+import { Helmet } from "react-helmet"
+import { useStaticQuery, graphql } from "gatsby"
+
+function SEO({ description, lang, meta, title }) {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+          }
+        }
+      }
+    `
+  )
+
+  const metaDescription = description || site.siteMetadata.description
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title={title}
+      titleTemplate={`%s | ${site.siteMetadata.title}`}
+      meta={[
+        {
+          name: `description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:title`,
+          content: title,
+        },
+        {
+          property: `og:description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:type`,
+          content: `website`,
+        },
+        {
+          name: `twitter:card`,
+          content: `summary`,
+        },
+        {
+          name: `twitter:creator`,
+          content: site.siteMetadata.author,
+        },
+        {
+          name: `twitter:title`,
+          content: title,
+        },
+        {
+          name: `twitter:description`,
+          content: metaDescription,
+        },
+      ].concat(meta)}
+    />
+  )
+}
+
+SEO.defaultProps = {
+  lang: `en`,
+  meta: [],
+  description: ``,
+}
+
+SEO.propTypes = {
+  description: PropTypes.string,
+  lang: PropTypes.string,
+  meta: PropTypes.arrayOf(PropTypes.object),
+  title: PropTypes.string.isRequired,
+}
+
+export default SEO
\ No newline at end of file
diff --git a/src/constants/links.js b/src/constants/links.js
index 6c4197a..d45847d 100644
--- a/src/constants/links.js
+++ b/src/constants/links.js
@@ -18,7 +18,7 @@ export const data = [
     {
         id: 4,
         text: "articles",
-        url: "/articles/"
+        url: "/blog/"
     },
     {
         id: 5,
diff --git a/src/pages/about.js b/src/pages/about.js
new file mode 100644
index 0000000..f20eed1
--- /dev/null
+++ b/src/pages/about.js
@@ -0,0 +1,24 @@
+import React from "react"
+import Layout from "../components/layout"
+import Navbar from '../components/navbar/navbar'
+import Footer from '../components/footer/footer'
+import HeroSmall from '../components/heroSmall/heroSmall'
+import AboutSection from '../components/aboutSection/aboutSection'
+
+
+const About = () => {
+    return (
+        <Layout>
+            <header>
+                <Navbar />
+                <HeroSmall title="Who am I?" />
+            </header>
+            <main>
+                <AboutSection />
+            </main>
+            <Footer />
+        </Layout>
+    )
+}
+
+export default About
diff --git a/src/pages/blog.js b/src/pages/blog.js
new file mode 100644
index 0000000..d13043f
--- /dev/null
+++ b/src/pages/blog.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import Layout from "../components/layout"
+import Navbar from '../components/navbar/navbar'
+import Footer from '../components/footer/footer'
+import HeroSmall from '../components/heroSmall/heroSmall'
+
+const Blog = () => {
+    return (
+        <Layout>
+            <header style={{ display: "flex", flexDirection: "column" }}>
+                <Navbar />
+                <HeroSmall title="My articles" />
+            </header>
+
+
+            <main>
+
+            </main>
+
+            <Footer />
+
+        </Layout>
+    )
+}
+
+export default Blog
\ No newline at end of file
diff --git a/src/pages/contact.js b/src/pages/contact.js
new file mode 100644
index 0000000..fd44e3b
--- /dev/null
+++ b/src/pages/contact.js
@@ -0,0 +1,25 @@
+import React from 'react'
+import Layout from "../components/layout"
+import Navbar from '../components/navbar/navbar'
+import FootNote from '../components/footNote/footNote'
+import HeroSmall from '../components/heroSmall/heroSmall'
+import ContactForm from '../components/contactForm/contactForm'
+
+const Contact = () => {
+    return (
+        <Layout>
+            <header style={{ display: "flex", flexDirection: "column" }}>
+                <Navbar />
+                <HeroSmall title="Contact" text="For all enquiries email me using the form below." />
+            </header>
+            <main>
+                <ContactForm />
+
+            </main>
+            <FootNote />
+
+        </Layout>
+    )
+}
+
+export default Contact
diff --git a/src/pages/index.js b/src/pages/index.js
index 3cbf184..c52e2ca 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,8 +2,9 @@ import React from "react"
 import Layout from "../components/layout"
 import Articles from '../components/articles/articles'
 import Projects from '../components/projects/projects'
-import Header from '../components/header/header'
 import Footer from '../components/footer/footer'
+import Navbar from "../components/navbar/navbar"
+import Hero from "../components/hero/hero"
 
 import "../../static/styles/reset.css"
 import "../../static/styles/style.css"
@@ -11,7 +12,11 @@ import "../../static/styles/style.css"
 
 export default function Home() {
   return <Layout>
-    <Header />
+
+    <header>
+      <Navbar />
+      <Hero />
+    </header>
     <main>
       <Projects />
       <Articles />
diff --git a/src/pages/projects.js b/src/pages/projects.js
new file mode 100644
index 0000000..6d89ced
--- /dev/null
+++ b/src/pages/projects.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import Layout from "../components/layout"
+import Navbar from '../components/navbar/navbar'
+import Footer from '../components/footer/footer'
+import HeroSmall from '../components/heroSmall/heroSmall'
+
+const Projects = () => {
+    return (
+        <Layout>
+            <header style={{ display: "flex", flexDirection: "column" }}>
+                <Navbar />
+                <HeroSmall title="My projects" />
+            </header>
+
+
+            <main>
+                
+            </main>
+
+            <Footer />
+
+        </Layout>
+    )
+}
+
+export default Projects
diff --git a/static/styles/style.css b/static/styles/style.css
index 2c3af4a..dade828 100644
--- a/static/styles/style.css
+++ b/static/styles/style.css
@@ -34,6 +34,13 @@ section {
   align-items: center;
 }
 
+header {
+  background: rgb(25, 26, 29);
+  clip-path: polygon(100% 0, 100% 89%, 72% 100%, 0 83%, 0 0);
+  padding: 0 0 2.5%;
+  margin-bottom: 10rem;
+}
+
 
 
 @media (min-width: 672px) {