From c908e3101c53481207ff892d557997990826ecb4 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sat, 13 Mar 2021 22:34:52 +0100
Subject: [PATCH] test tweaks

---
 package.json                                  |    2 +-
 src/components/atoms/Icon.jsx                 |   10 +-
 src/components/atoms/Vcard.test.jsx           |    4 +-
 src/components/molecules/ProjectNav.test.jsx  |   10 -
 src/components/molecules/ThemeSwitch.test.jsx |    4 +-
 src/components/organisms/Header.test.jsx      |    6 +-
 tests/__fixtures__/project.json               |  387 ++++-
 tests/__fixtures__/projects.json              | 1315 ++++++++++-------
 tests/__fixtures__/resume.json                |   74 +-
 9 files changed, 1161 insertions(+), 651 deletions(-)
 delete mode 100644 src/components/molecules/ProjectNav.test.jsx

diff --git a/package.json b/package.json
index 5ece20b..228c10f 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,7 @@
     "lint:css": "stylelint ./src/**/*.{css,scss}",
     "lint": "npm run lint:js && npm run lint:css",
     "format": "prettier --write 'src/**/*.{js,jsx,css,scss}'",
-    "test": "NODE_ENV=test npm run lint && jest --coverage --silent -c tests/jest.config.js",
+    "test": "NODE_ENV=test npm run lint && jest --coverage -c tests/jest.config.js",
     "test:watch": "NODE_ENV=test npm run lint && jest --coverage --watch -c tests/jest.config.js",
     "deploy:s3": "./scripts/deploy-s3.sh",
     "new": "babel-node ./scripts/new.js"
diff --git a/src/components/atoms/Icon.jsx b/src/components/atoms/Icon.jsx
index 71b3ad5..0fa045a 100644
--- a/src/components/atoms/Icon.jsx
+++ b/src/components/atoms/Icon.jsx
@@ -1,4 +1,4 @@
-import React, { memo } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 
 // https://featherstyles.com
@@ -27,7 +27,7 @@ import {
 } from 'react-feather'
 import { icon } from './Icon.module.css'
 
-const Icon = memo(({ name, ...props }) => {
+export default function Icon({ name, ...props }) {
   const components = {
     Dribbble,
     Email: Mail,
@@ -63,12 +63,8 @@ const Icon = memo(({ name, ...props }) => {
   if (!IconMapped) return null
 
   return <IconMapped className={icon} {...props} />
-})
-
-Icon.displayName = 'Icon'
+}
 
 Icon.propTypes = {
   name: PropTypes.string.isRequired
 }
-
-export default Icon
diff --git a/src/components/atoms/Vcard.test.jsx b/src/components/atoms/Vcard.test.jsx
index e775234..2e9c144 100644
--- a/src/components/atoms/Vcard.test.jsx
+++ b/src/components/atoms/Vcard.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent, waitForElement } from '@testing-library/react'
+import { render, fireEvent, waitFor } from '@testing-library/react'
 import Vcard, { constructVcard, toDataURL, init } from './Vcard'
 import meta from '../../../tests/__fixtures__/meta.json'
 import resume from '../../../tests/__fixtures__/resume.json'
@@ -25,7 +25,7 @@ describe('Vcard', () => {
   it('Button click starts download', async () => {
     const { container } = render(<Vcard />)
     fireEvent.click(container.firstChild)
-    await waitForElement(() => global.URL.createObjectURL)
+    await waitFor(() => global.URL.createObjectURL)
     expect(global.URL.createObjectURL).toHaveBeenCalledTimes(1)
   })
 
diff --git a/src/components/molecules/ProjectNav.test.jsx b/src/components/molecules/ProjectNav.test.jsx
deleted file mode 100644
index 9efa87b..0000000
--- a/src/components/molecules/ProjectNav.test.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-import { render } from '@testing-library/react'
-import ProjectNav from './ProjectNav'
-
-describe('ProjectNav', () => {
-  it('renders correctly', () => {
-    const { container } = render(<ProjectNav currentSlug="oceanprotocol" />)
-    expect(container.firstChild).toBeInTheDocument()
-  })
-})
diff --git a/src/components/molecules/ThemeSwitch.test.jsx b/src/components/molecules/ThemeSwitch.test.jsx
index ffced97..6de6e10 100644
--- a/src/components/molecules/ThemeSwitch.test.jsx
+++ b/src/components/molecules/ThemeSwitch.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, fireEvent, cleanup, wait } from '@testing-library/react'
+import { render, fireEvent, cleanup, waitFor } from '@testing-library/react'
 import ThemeSwitch from './ThemeSwitch'
 
 describe('ThemeSwitch', () => {
@@ -7,7 +7,7 @@ describe('ThemeSwitch', () => {
 
   it('renders correctly', async () => {
     const { container } = render(<ThemeSwitch />)
-    await wait(() => container.querySelector('aside'))
+    await waitFor(() => container.querySelector('aside'))
     expect(container.querySelector('aside')).toBeInTheDocument()
   })
 
diff --git a/src/components/organisms/Header.test.jsx b/src/components/organisms/Header.test.jsx
index 61069a6..be897d5 100644
--- a/src/components/organisms/Header.test.jsx
+++ b/src/components/organisms/Header.test.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, cleanup, wait } from '@testing-library/react'
+import { render, cleanup, waitFor } from '@testing-library/react'
 import Header from './Header'
 
 describe('Header', () => {
@@ -7,13 +7,13 @@ describe('Header', () => {
 
   it('renders correctly', async () => {
     const { container } = render(<Header />)
-    await wait(() => container.firstChild)
+    await waitFor(() => container.firstChild)
     expect(container.firstChild).toBeInTheDocument()
   })
 
   it('Availability can be hidden', async () => {
     const { container } = render(<Header minimal={true} />)
-    await wait(() => container.querySelector('.availability'))
+    await waitFor(() => container.querySelector('.availability'))
     expect(container.querySelector('.availability')).not.toBeInTheDocument()
   })
 })
diff --git a/tests/__fixtures__/project.json b/tests/__fixtures__/project.json
index df011ee..0ee51d5 100644
--- a/tests/__fixtures__/project.json
+++ b/tests/__fixtures__/project.json
@@ -1,9 +1,9 @@
 {
   "projectsYaml": {
-    "title": "Ocean Protocol",
-    "slug": "/oceanprotocol/",
+    "title": "Ocean Protocol v1",
+    "slug": "/oceanprotocol-v1/",
     "fields": {
-      "descriptionHtml": "<p>Since 2017 I'm leading the UI design &#x26; development of Ocean Protocol, iterating on a components-based UI design system spanning all of Ocean Protocol's web properties. Additionally, I conceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.</p>\n<p>Most web interfaces are single-page JavaScript applications built with React, pulling their data from JSON files and various micro services. All design &#x26; development is embedded in a continuous deployment process via GitHub &#x26; Travis.</p>\n<p>Initial website in collaboration with <a href=\"https://balance.io/\">Balance</a>. Key visuals in collaboration with <a href=\"https://twitter.com/wojciechhupert\">Wojciech Hupert</a>.</p>\n",
+      "descriptionHtml": "<p>Since 2017 I'm leading the UI design &#x26; development of Ocean Protocol, iterating on a components-based UI design system spanning all of Ocean Protocol's web properties. Additionally, I conceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.</p>\n<p>Most web interfaces are single-page JavaScript applications built with React, pulling their data from multiple sources. All design &#x26; development is embedded in continuous deployment processes via GitHub, Travis, Kubernetes, and Vercel.</p>\n<p>In 2020 I was leading the refresh of Ocean Protocol's visual identity for the release of v3 and the <a href=\"/oceanprotocol-market/\">Ocean Market</a>.</p>\n<p>Initial website in collaboration with <a href=\"https://balance.io/\">Balance</a>. Key visuals in collaboration with <a href=\"https://twitter.com/wojciechhupert\">Wojciech Hupert</a>.</p>\n",
       "excerpt": "Since 2017 I'm leading the UI design & development of Ocean Protocol, iterating on a components-based UI design system spanning all of Ocean Protocol's web properties. Additionally, I conceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.\nMost web interfaces are..."
     },
     "links": [
@@ -22,11 +22,6 @@
         "url": "https://docs.oceanprotocol.com",
         "icon": "Compass"
       },
-      {
-        "title": "commons.oceanprotocol.com",
-        "url": "https://commons.oceanprotocol.com",
-        "icon": "Compass"
-      },
       {
         "title": "@oceanprotocol/art",
         "url": "https://github.com/oceanprotocol/art",
@@ -36,11 +31,6 @@
         "title": "@oceanprotocol/docs",
         "url": "https://github.com/oceanprotocol/docs",
         "icon": "GitHub"
-      },
-      {
-        "title": "@oceanprotocol/commons",
-        "url": "https://github.com/oceanprotocol/commons",
-        "icon": "GitHub"
       }
     ],
     "techstack": [
@@ -48,6 +38,7 @@
       "Affinity Designer",
       "React",
       "Gatsby",
+      "Next.js",
       "HTML",
       "SCSS",
       "JavaScript",
@@ -58,13 +49,12 @@
       "Ethereum",
       "Docker",
       "Kubernetes",
-      "Cypress",
       "IPFS"
     ],
     "img": {
       "childImageSharp": {
         "twitterImage": {
-          "src": "/static/674f679841915ed59da7394e937f8f8f/c7e19/oceanprotocol-01.png"
+          "src": "/static/674f679841915ed59da7394e937f8f8f/ccef1/oceanprotocol-v1-01.png"
         }
       }
     }
@@ -73,38 +63,355 @@
     "edges": [
       {
         "node": {
-          "id": "790521d3-05e7-5ab7-a499-86687637475b",
-          "fluid": {
-            "aspectRatio": 1.8,
-            "src": "/static/674f679841915ed59da7394e937f8f8f/af144/oceanprotocol-01.png",
-            "srcSet": "/static/674f679841915ed59da7394e937f8f8f/7c0ed/oceanprotocol-01.png 200w,\n/static/674f679841915ed59da7394e937f8f8f/647de/oceanprotocol-01.png 400w,\n/static/674f679841915ed59da7394e937f8f8f/af144/oceanprotocol-01.png 800w,\n/static/674f679841915ed59da7394e937f8f8f/ba299/oceanprotocol-01.png 1200w,\n/static/674f679841915ed59da7394e937f8f8f/9ecf6/oceanprotocol-01.png 1600w,\n/static/674f679841915ed59da7394e937f8f8f/7347c/oceanprotocol-01.png 2880w",
-            "srcWebp": "/static/674f679841915ed59da7394e937f8f8f/c6096/oceanprotocol-01.webp",
-            "srcSetWebp": "/static/674f679841915ed59da7394e937f8f8f/1932c/oceanprotocol-01.webp 200w,\n/static/674f679841915ed59da7394e937f8f8f/f4957/oceanprotocol-01.webp 400w,\n/static/674f679841915ed59da7394e937f8f8f/c6096/oceanprotocol-01.webp 800w,\n/static/674f679841915ed59da7394e937f8f8f/b6424/oceanprotocol-01.webp 1200w,\n/static/674f679841915ed59da7394e937f8f8f/7a72d/oceanprotocol-01.webp 1600w,\n/static/674f679841915ed59da7394e937f8f8f/b5fcc/oceanprotocol-01.webp 2880w",
-            "sizes": "(max-width: 800px) 100vw, 800px",
-            "originalImg": "/static/674f679841915ed59da7394e937f8f8f/7347c/oceanprotocol-01.png",
-            "originalName": "oceanprotocol-01.png",
-            "presentationWidth": 800,
-            "presentationHeight": 444
+          "id": "0bb861dd-385c-5081-96c6-e6e6d87bf227",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#f8f8f8",
+            "images": {
+              "fallback": {
+                "src": "/static/c2aed5f899971799a903fd8ced8f3114/ce694/oceanprotocol-commons-01.png",
+                "srcSet": "/static/c2aed5f899971799a903fd8ced8f3114/40caa/oceanprotocol-commons-01.png 360w,\n/static/c2aed5f899971799a903fd8ced8f3114/c5f5d/oceanprotocol-commons-01.png 720w,\n/static/c2aed5f899971799a903fd8ced8f3114/ce694/oceanprotocol-commons-01.png 1440w,\n/static/c2aed5f899971799a903fd8ced8f3114/cf037/oceanprotocol-commons-01.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/c2aed5f899971799a903fd8ced8f3114/f5d1b/oceanprotocol-commons-01.webp 360w,\n/static/c2aed5f899971799a903fd8ced8f3114/0b212/oceanprotocol-commons-01.webp 720w,\n/static/c2aed5f899971799a903fd8ced8f3114/ca3cc/oceanprotocol-commons-01.webp 1440w,\n/static/c2aed5f899971799a903fd8ced8f3114/5c5e9/oceanprotocol-commons-01.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
           }
         }
       },
       {
         "node": {
-          "id": "f49d52dd-60b9-5833-95ad-4428d4032e76",
-          "fluid": {
-            "aspectRatio": 1.8,
-            "src": "/static/32988a616cc5bc2354e02d16149dbcd6/af144/oceanprotocol-02.png",
-            "srcSet": "/static/32988a616cc5bc2354e02d16149dbcd6/7c0ed/oceanprotocol-02.png 200w,\n/static/32988a616cc5bc2354e02d16149dbcd6/647de/oceanprotocol-02.png 400w,\n/static/32988a616cc5bc2354e02d16149dbcd6/af144/oceanprotocol-02.png 800w,\n/static/32988a616cc5bc2354e02d16149dbcd6/ba299/oceanprotocol-02.png 1200w,\n/static/32988a616cc5bc2354e02d16149dbcd6/9ecf6/oceanprotocol-02.png 1600w,\n/static/32988a616cc5bc2354e02d16149dbcd6/7347c/oceanprotocol-02.png 2880w",
-            "srcWebp": "/static/32988a616cc5bc2354e02d16149dbcd6/c6096/oceanprotocol-02.webp",
-            "srcSetWebp": "/static/32988a616cc5bc2354e02d16149dbcd6/1932c/oceanprotocol-02.webp 200w,\n/static/32988a616cc5bc2354e02d16149dbcd6/f4957/oceanprotocol-02.webp 400w,\n/static/32988a616cc5bc2354e02d16149dbcd6/c6096/oceanprotocol-02.webp 800w,\n/static/32988a616cc5bc2354e02d16149dbcd6/b6424/oceanprotocol-02.webp 1200w,\n/static/32988a616cc5bc2354e02d16149dbcd6/7a72d/oceanprotocol-02.webp 1600w,\n/static/32988a616cc5bc2354e02d16149dbcd6/b5fcc/oceanprotocol-02.webp 2880w",
-            "sizes": "(max-width: 800px) 100vw, 800px",
-            "originalImg": "/static/32988a616cc5bc2354e02d16149dbcd6/7347c/oceanprotocol-02.png",
-            "originalName": "oceanprotocol-02.png",
-            "presentationWidth": 800,
-            "presentationHeight": 444
+          "id": "b7c89abb-87e4-5af7-a4db-74ba3ad8cd7f",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#f8f8f8",
+            "images": {
+              "fallback": {
+                "src": "/static/0dda6c1f4f857d25fec71f2f16f7b3e5/ce694/oceanprotocol-commons-02.png",
+                "srcSet": "/static/0dda6c1f4f857d25fec71f2f16f7b3e5/40caa/oceanprotocol-commons-02.png 360w,\n/static/0dda6c1f4f857d25fec71f2f16f7b3e5/c5f5d/oceanprotocol-commons-02.png 720w,\n/static/0dda6c1f4f857d25fec71f2f16f7b3e5/ce694/oceanprotocol-commons-02.png 1440w,\n/static/0dda6c1f4f857d25fec71f2f16f7b3e5/cf037/oceanprotocol-commons-02.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/0dda6c1f4f857d25fec71f2f16f7b3e5/f5d1b/oceanprotocol-commons-02.webp 360w,\n/static/0dda6c1f4f857d25fec71f2f16f7b3e5/0b212/oceanprotocol-commons-02.webp 720w,\n/static/0dda6c1f4f857d25fec71f2f16f7b3e5/ca3cc/oceanprotocol-commons-02.webp 1440w,\n/static/0dda6c1f4f857d25fec71f2f16f7b3e5/5c5e9/oceanprotocol-commons-02.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "39a06cc4-7b33-5402-b291-e281883f40df",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#f8f8f8",
+            "images": {
+              "fallback": {
+                "src": "/static/57ca1cf313ffe317506e5c3136458172/ce694/oceanprotocol-commons-03.png",
+                "srcSet": "/static/57ca1cf313ffe317506e5c3136458172/40caa/oceanprotocol-commons-03.png 360w,\n/static/57ca1cf313ffe317506e5c3136458172/c5f5d/oceanprotocol-commons-03.png 720w,\n/static/57ca1cf313ffe317506e5c3136458172/ce694/oceanprotocol-commons-03.png 1440w,\n/static/57ca1cf313ffe317506e5c3136458172/cf037/oceanprotocol-commons-03.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/57ca1cf313ffe317506e5c3136458172/f5d1b/oceanprotocol-commons-03.webp 360w,\n/static/57ca1cf313ffe317506e5c3136458172/0b212/oceanprotocol-commons-03.webp 720w,\n/static/57ca1cf313ffe317506e5c3136458172/ca3cc/oceanprotocol-commons-03.webp 1440w,\n/static/57ca1cf313ffe317506e5c3136458172/5c5e9/oceanprotocol-commons-03.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "65b2eb63-5836-5c1c-94bf-69297a361c9a",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#f8f8f8",
+            "images": {
+              "fallback": {
+                "src": "/static/f154f589e85335d2bfa0458934fe5098/ce694/oceanprotocol-commons-04.png",
+                "srcSet": "/static/f154f589e85335d2bfa0458934fe5098/40caa/oceanprotocol-commons-04.png 360w,\n/static/f154f589e85335d2bfa0458934fe5098/c5f5d/oceanprotocol-commons-04.png 720w,\n/static/f154f589e85335d2bfa0458934fe5098/ce694/oceanprotocol-commons-04.png 1440w,\n/static/f154f589e85335d2bfa0458934fe5098/cf037/oceanprotocol-commons-04.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/f154f589e85335d2bfa0458934fe5098/f5d1b/oceanprotocol-commons-04.webp 360w,\n/static/f154f589e85335d2bfa0458934fe5098/0b212/oceanprotocol-commons-04.webp 720w,\n/static/f154f589e85335d2bfa0458934fe5098/ca3cc/oceanprotocol-commons-04.webp 1440w,\n/static/f154f589e85335d2bfa0458934fe5098/5c5e9/oceanprotocol-commons-04.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "1195af99-ad24-58a1-91c8-363404b5a9d7",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#f8f8f8",
+            "images": {
+              "fallback": {
+                "src": "/static/c83aaf5a493aef55d3433f5294924354/ce694/oceanprotocol-commons-05.png",
+                "srcSet": "/static/c83aaf5a493aef55d3433f5294924354/40caa/oceanprotocol-commons-05.png 360w,\n/static/c83aaf5a493aef55d3433f5294924354/c5f5d/oceanprotocol-commons-05.png 720w,\n/static/c83aaf5a493aef55d3433f5294924354/ce694/oceanprotocol-commons-05.png 1440w,\n/static/c83aaf5a493aef55d3433f5294924354/cf037/oceanprotocol-commons-05.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/c83aaf5a493aef55d3433f5294924354/f5d1b/oceanprotocol-commons-05.webp 360w,\n/static/c83aaf5a493aef55d3433f5294924354/0b212/oceanprotocol-commons-05.webp 720w,\n/static/c83aaf5a493aef55d3433f5294924354/ca3cc/oceanprotocol-commons-05.webp 1440w,\n/static/c83aaf5a493aef55d3433f5294924354/5c5e9/oceanprotocol-commons-05.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "e140eb7b-cf21-5198-909f-2220ff5476cd",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#181818",
+            "images": {
+              "fallback": {
+                "src": "/static/76ebcd707f5a3e8b65e786c1772d243b/ce694/oceanprotocol-ipfs-01.png",
+                "srcSet": "/static/76ebcd707f5a3e8b65e786c1772d243b/40caa/oceanprotocol-ipfs-01.png 360w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/c5f5d/oceanprotocol-ipfs-01.png 720w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/ce694/oceanprotocol-ipfs-01.png 1440w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/cf037/oceanprotocol-ipfs-01.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/76ebcd707f5a3e8b65e786c1772d243b/f5d1b/oceanprotocol-ipfs-01.webp 360w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/0b212/oceanprotocol-ipfs-01.webp 720w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/ca3cc/oceanprotocol-ipfs-01.webp 1440w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/5c5e9/oceanprotocol-ipfs-01.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "83175de1-8822-59fc-9ecb-268302d187a0",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#f8f8f8",
+            "images": {
+              "fallback": {
+                "src": "/static/135a70a331a1c4ffcc1ebf4c02460e05/ce694/oceanprotocol-ipfs-02.png",
+                "srcSet": "/static/135a70a331a1c4ffcc1ebf4c02460e05/40caa/oceanprotocol-ipfs-02.png 360w,\n/static/135a70a331a1c4ffcc1ebf4c02460e05/c5f5d/oceanprotocol-ipfs-02.png 720w,\n/static/135a70a331a1c4ffcc1ebf4c02460e05/ce694/oceanprotocol-ipfs-02.png 1440w,\n/static/135a70a331a1c4ffcc1ebf4c02460e05/cf037/oceanprotocol-ipfs-02.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/135a70a331a1c4ffcc1ebf4c02460e05/f5d1b/oceanprotocol-ipfs-02.webp 360w,\n/static/135a70a331a1c4ffcc1ebf4c02460e05/0b212/oceanprotocol-ipfs-02.webp 720w,\n/static/135a70a331a1c4ffcc1ebf4c02460e05/ca3cc/oceanprotocol-ipfs-02.webp 1440w,\n/static/135a70a331a1c4ffcc1ebf4c02460e05/5c5e9/oceanprotocol-ipfs-02.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "83a39174-a39e-547a-9cc8-3e0cf795b45c",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#f8f8f8",
+            "images": {
+              "fallback": {
+                "src": "/static/674f679841915ed59da7394e937f8f8f/ce694/oceanprotocol-v1-01.png",
+                "srcSet": "/static/674f679841915ed59da7394e937f8f8f/40caa/oceanprotocol-v1-01.png 360w,\n/static/674f679841915ed59da7394e937f8f8f/c5f5d/oceanprotocol-v1-01.png 720w,\n/static/674f679841915ed59da7394e937f8f8f/ce694/oceanprotocol-v1-01.png 1440w,\n/static/674f679841915ed59da7394e937f8f8f/cf037/oceanprotocol-v1-01.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/674f679841915ed59da7394e937f8f8f/f5d1b/oceanprotocol-v1-01.webp 360w,\n/static/674f679841915ed59da7394e937f8f8f/0b212/oceanprotocol-v1-01.webp 720w,\n/static/674f679841915ed59da7394e937f8f8f/ca3cc/oceanprotocol-v1-01.webp 1440w,\n/static/674f679841915ed59da7394e937f8f8f/5c5e9/oceanprotocol-v1-01.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "7bec1ade-3ab4-589f-80fd-3ea2b34e62cb",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#181818",
+            "images": {
+              "fallback": {
+                "src": "/static/32988a616cc5bc2354e02d16149dbcd6/ce694/oceanprotocol-v1-02.png",
+                "srcSet": "/static/32988a616cc5bc2354e02d16149dbcd6/40caa/oceanprotocol-v1-02.png 360w,\n/static/32988a616cc5bc2354e02d16149dbcd6/c5f5d/oceanprotocol-v1-02.png 720w,\n/static/32988a616cc5bc2354e02d16149dbcd6/ce694/oceanprotocol-v1-02.png 1440w,\n/static/32988a616cc5bc2354e02d16149dbcd6/cf037/oceanprotocol-v1-02.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/32988a616cc5bc2354e02d16149dbcd6/f5d1b/oceanprotocol-v1-02.webp 360w,\n/static/32988a616cc5bc2354e02d16149dbcd6/0b212/oceanprotocol-v1-02.webp 720w,\n/static/32988a616cc5bc2354e02d16149dbcd6/ca3cc/oceanprotocol-v1-02.webp 1440w,\n/static/32988a616cc5bc2354e02d16149dbcd6/5c5e9/oceanprotocol-v1-02.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "4ae20cbb-bf65-58c0-9ecf-0e12fca45d55",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#181818",
+            "images": {
+              "fallback": {
+                "src": "/static/cb2de0894d8c65a935c1fb52c9f67319/ce694/oceanprotocol-v1-03.png",
+                "srcSet": "/static/cb2de0894d8c65a935c1fb52c9f67319/40caa/oceanprotocol-v1-03.png 360w,\n/static/cb2de0894d8c65a935c1fb52c9f67319/c5f5d/oceanprotocol-v1-03.png 720w,\n/static/cb2de0894d8c65a935c1fb52c9f67319/ce694/oceanprotocol-v1-03.png 1440w,\n/static/cb2de0894d8c65a935c1fb52c9f67319/cf037/oceanprotocol-v1-03.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/cb2de0894d8c65a935c1fb52c9f67319/f5d1b/oceanprotocol-v1-03.webp 360w,\n/static/cb2de0894d8c65a935c1fb52c9f67319/0b212/oceanprotocol-v1-03.webp 720w,\n/static/cb2de0894d8c65a935c1fb52c9f67319/ca3cc/oceanprotocol-v1-03.webp 1440w,\n/static/cb2de0894d8c65a935c1fb52c9f67319/5c5e9/oceanprotocol-v1-03.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "afd37263-cbbc-5e65-9a9b-81ffb8dbe3a0",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#181818",
+            "images": {
+              "fallback": {
+                "src": "/static/cb7b8721aa4d44eb86e870364672ff52/ce694/oceanprotocol-v1-04.png",
+                "srcSet": "/static/cb7b8721aa4d44eb86e870364672ff52/40caa/oceanprotocol-v1-04.png 360w,\n/static/cb7b8721aa4d44eb86e870364672ff52/c5f5d/oceanprotocol-v1-04.png 720w,\n/static/cb7b8721aa4d44eb86e870364672ff52/ce694/oceanprotocol-v1-04.png 1440w,\n/static/cb7b8721aa4d44eb86e870364672ff52/cf037/oceanprotocol-v1-04.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/cb7b8721aa4d44eb86e870364672ff52/f5d1b/oceanprotocol-v1-04.webp 360w,\n/static/cb7b8721aa4d44eb86e870364672ff52/0b212/oceanprotocol-v1-04.webp 720w,\n/static/cb7b8721aa4d44eb86e870364672ff52/ca3cc/oceanprotocol-v1-04.webp 1440w,\n/static/cb7b8721aa4d44eb86e870364672ff52/5c5e9/oceanprotocol-v1-04.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "5295d766-6bfa-5bdf-8a73-ae6cf0bd4092",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#181828",
+            "images": {
+              "fallback": {
+                "src": "/static/efd50223e7de013c9e2511cffe3c035f/ce694/oceanprotocol-v1-05.png",
+                "srcSet": "/static/efd50223e7de013c9e2511cffe3c035f/40caa/oceanprotocol-v1-05.png 360w,\n/static/efd50223e7de013c9e2511cffe3c035f/c5f5d/oceanprotocol-v1-05.png 720w,\n/static/efd50223e7de013c9e2511cffe3c035f/ce694/oceanprotocol-v1-05.png 1440w,\n/static/efd50223e7de013c9e2511cffe3c035f/cf037/oceanprotocol-v1-05.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/efd50223e7de013c9e2511cffe3c035f/f5d1b/oceanprotocol-v1-05.webp 360w,\n/static/efd50223e7de013c9e2511cffe3c035f/0b212/oceanprotocol-v1-05.webp 720w,\n/static/efd50223e7de013c9e2511cffe3c035f/ca3cc/oceanprotocol-v1-05.webp 1440w,\n/static/efd50223e7de013c9e2511cffe3c035f/5c5e9/oceanprotocol-v1-05.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "da6697fa-fd1f-5b93-b682-ea1c56f95b83",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#181818",
+            "images": {
+              "fallback": {
+                "src": "/static/c6298808496bc5a8dd0d7a707cb9e0bf/ce694/oceanprotocol-v1-06.png",
+                "srcSet": "/static/c6298808496bc5a8dd0d7a707cb9e0bf/40caa/oceanprotocol-v1-06.png 360w,\n/static/c6298808496bc5a8dd0d7a707cb9e0bf/c5f5d/oceanprotocol-v1-06.png 720w,\n/static/c6298808496bc5a8dd0d7a707cb9e0bf/ce694/oceanprotocol-v1-06.png 1440w,\n/static/c6298808496bc5a8dd0d7a707cb9e0bf/cf037/oceanprotocol-v1-06.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/c6298808496bc5a8dd0d7a707cb9e0bf/f5d1b/oceanprotocol-v1-06.webp 360w,\n/static/c6298808496bc5a8dd0d7a707cb9e0bf/0b212/oceanprotocol-v1-06.webp 720w,\n/static/c6298808496bc5a8dd0d7a707cb9e0bf/ca3cc/oceanprotocol-v1-06.webp 1440w,\n/static/c6298808496bc5a8dd0d7a707cb9e0bf/5c5e9/oceanprotocol-v1-06.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
+          }
+        }
+      },
+      {
+        "node": {
+          "id": "1ca0c411-255d-50ca-8c79-9a2a3586fba0",
+          "gatsbyImageData": {
+            "layout": "constrained",
+            "backgroundColor": "#083838",
+            "images": {
+              "fallback": {
+                "src": "/static/1531cd220bd930dc463b75b0eb57c6ca/ce694/oceanprotocol-v1-07.png",
+                "srcSet": "/static/1531cd220bd930dc463b75b0eb57c6ca/40caa/oceanprotocol-v1-07.png 360w,\n/static/1531cd220bd930dc463b75b0eb57c6ca/c5f5d/oceanprotocol-v1-07.png 720w,\n/static/1531cd220bd930dc463b75b0eb57c6ca/ce694/oceanprotocol-v1-07.png 1440w,\n/static/1531cd220bd930dc463b75b0eb57c6ca/cf037/oceanprotocol-v1-07.png 2880w",
+                "sizes": "(min-width: 1440px) 1440px, 100vw"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/1531cd220bd930dc463b75b0eb57c6ca/f5d1b/oceanprotocol-v1-07.webp 360w,\n/static/1531cd220bd930dc463b75b0eb57c6ca/0b212/oceanprotocol-v1-07.webp 720w,\n/static/1531cd220bd930dc463b75b0eb57c6ca/ca3cc/oceanprotocol-v1-07.webp 1440w,\n/static/1531cd220bd930dc463b75b0eb57c6ca/5c5e9/oceanprotocol-v1-07.webp 2880w",
+                  "type": "image/webp",
+                  "sizes": "(min-width: 1440px) 1440px, 100vw"
+                }
+              ]
+            },
+            "width": 1440,
+            "height": 800
           }
         }
       }
     ]
-  }
+  },
+  "extensions": {}
 }
diff --git a/tests/__fixtures__/projects.json b/tests/__fixtures__/projects.json
index df673cd..a841e15 100644
--- a/tests/__fixtures__/projects.json
+++ b/tests/__fixtures__/projects.json
@@ -3,64 +3,92 @@
     "edges": [
       {
         "node": {
-          "title": "Ocean Protocol",
-          "slug": "/oceanprotocol/",
+          "title": "Ocean Protocol - IPFS Integration",
+          "slug": "/oceanprotocol-ipfs/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/4bfe75568d863d8aab3bd7670c7e1680/55230/oceanprotocol-01.png",
-                "srcSet": "/static/4bfe75568d863d8aab3bd7670c7e1680/566d0/oceanprotocol-01.png 300w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/bd9e5/oceanprotocol-01.png 600w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/55230/oceanprotocol-01.png 1200w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/ea0ed/oceanprotocol-01.png 1800w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/9f094/oceanprotocol-01.png 2400w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/1a778/oceanprotocol-01.png 2880w",
-                "srcWebp": "/static/4bfe75568d863d8aab3bd7670c7e1680/a1b27/oceanprotocol-01.webp",
-                "srcSetWebp": "/static/4bfe75568d863d8aab3bd7670c7e1680/91d38/oceanprotocol-01.webp 300w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/2ead2/oceanprotocol-01.webp 600w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/a1b27/oceanprotocol-01.webp 1200w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/aae66/oceanprotocol-01.webp 1800w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/6de27/oceanprotocol-01.webp 2400w,\n/static/4bfe75568d863d8aab3bd7670c7e1680/d8a41/oceanprotocol-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/4bfe75568d863d8aab3bd7670c7e1680/1a778/oceanprotocol-01.png",
-                "originalName": "oceanprotocol-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#181818",
+                "images": {
+                  "fallback": {
+                    "src": "/static/76ebcd707f5a3e8b65e786c1772d243b/53a0b/oceanprotocol-ipfs-01.png",
+                    "srcSet": "/static/76ebcd707f5a3e8b65e786c1772d243b/6f0a4/oceanprotocol-ipfs-01.png 185w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/556c8/oceanprotocol-ipfs-01.png 370w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/53a0b/oceanprotocol-ipfs-01.png 740w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/d4077/oceanprotocol-ipfs-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/76ebcd707f5a3e8b65e786c1772d243b/b09fa/oceanprotocol-ipfs-01.webp 185w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/407fa/oceanprotocol-ipfs-01.webp 370w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/a550a/oceanprotocol-ipfs-01.webp 740w,\n/static/76ebcd707f5a3e8b65e786c1772d243b/63a41/oceanprotocol-ipfs-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "Since 2017 I'm leading the UI design & development of Ocean Protocol, iterating on a components-based UI design system spanning all of Ocean Protocol's web properties. Additionally, I conceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.\nMost web interfaces are single-page JavaScript applications built with React, pulling their data from JSON files and various micro services. All design & development is embedded in a continous deployment process via GitHub & Travis.\nInitial website in collaboration with [Balance](https://balance.io/). Key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).\n",
-          "links": [
-            {
-              "title": "oceanprotocol.com",
-              "type": "website",
-              "url": "https://oceanprotocol.com"
-            },
-            {
-              "title": "docs.oceanprotocol.com",
-              "type": "website",
-              "url": "https://docs.oceanprotocol.com"
-            },
-            {
-              "title": "Styleguide",
-              "type": null,
-              "url": "https://oceanprotocol.com/art"
-            },
-            {
-              "title": "@oceanprotocol/art",
-              "type": "github",
-              "url": "https://github.com/oceanprotocol/art"
-            },
-            {
-              "title": "@oceanprotocol/docs",
-              "type": "github",
-              "url": "https://github.com/oceanprotocol/docs"
+          }
+        }
+      },
+      {
+        "node": {
+          "title": "Ocean Protocol - Commons",
+          "slug": "/oceanprotocol-commons/",
+          "img": {
+            "childImageSharp": {
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#f8f8f8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/c2aed5f899971799a903fd8ced8f3114/53a0b/oceanprotocol-commons-01.png",
+                    "srcSet": "/static/c2aed5f899971799a903fd8ced8f3114/6f0a4/oceanprotocol-commons-01.png 185w,\n/static/c2aed5f899971799a903fd8ced8f3114/556c8/oceanprotocol-commons-01.png 370w,\n/static/c2aed5f899971799a903fd8ced8f3114/53a0b/oceanprotocol-commons-01.png 740w,\n/static/c2aed5f899971799a903fd8ced8f3114/d4077/oceanprotocol-commons-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/c2aed5f899971799a903fd8ced8f3114/b09fa/oceanprotocol-commons-01.webp 185w,\n/static/c2aed5f899971799a903fd8ced8f3114/407fa/oceanprotocol-commons-01.webp 370w,\n/static/c2aed5f899971799a903fd8ced8f3114/a550a/oceanprotocol-commons-01.webp 740w,\n/static/c2aed5f899971799a903fd8ced8f3114/63a41/oceanprotocol-commons-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
+              }
             }
-          ],
-          "techstack": [
-            "Sketch",
-            "Affinity Designer",
-            "React",
-            "Gatsby",
-            "HTML",
-            "SCSS",
-            "JavaScript",
-            "Travis",
-            "AWS S3",
-            "Cloudflare"
-          ]
+          }
+        }
+      },
+      {
+        "node": {
+          "title": "Ocean Protocol v1",
+          "slug": "/oceanprotocol-v1/",
+          "img": {
+            "childImageSharp": {
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#f8f8f8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/674f679841915ed59da7394e937f8f8f/53a0b/oceanprotocol-v1-01.png",
+                    "srcSet": "/static/674f679841915ed59da7394e937f8f8f/6f0a4/oceanprotocol-v1-01.png 185w,\n/static/674f679841915ed59da7394e937f8f8f/556c8/oceanprotocol-v1-01.png 370w,\n/static/674f679841915ed59da7394e937f8f8f/53a0b/oceanprotocol-v1-01.png 740w,\n/static/674f679841915ed59da7394e937f8f8f/d4077/oceanprotocol-v1-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/674f679841915ed59da7394e937f8f8f/b09fa/oceanprotocol-v1-01.webp 185w,\n/static/674f679841915ed59da7394e937f8f8f/407fa/oceanprotocol-v1-01.webp 370w,\n/static/674f679841915ed59da7394e937f8f8f/a550a/oceanprotocol-v1-01.webp 740w,\n/static/674f679841915ed59da7394e937f8f8f/63a41/oceanprotocol-v1-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
+              }
+            }
+          }
         }
       },
       {
@@ -69,50 +97,28 @@
           "slug": "/ipdb/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/acb1835345fea2d0585c1091a7a5e2c1/55230/ipdb-01.png",
-                "srcSet": "/static/acb1835345fea2d0585c1091a7a5e2c1/566d0/ipdb-01.png 300w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/bd9e5/ipdb-01.png 600w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/55230/ipdb-01.png 1200w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/ea0ed/ipdb-01.png 1800w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/9f094/ipdb-01.png 2400w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/1a778/ipdb-01.png 2880w",
-                "srcWebp": "/static/acb1835345fea2d0585c1091a7a5e2c1/a1b27/ipdb-01.webp",
-                "srcSetWebp": "/static/acb1835345fea2d0585c1091a7a5e2c1/91d38/ipdb-01.webp 300w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/2ead2/ipdb-01.webp 600w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/a1b27/ipdb-01.webp 1200w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/aae66/ipdb-01.webp 1800w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/6de27/ipdb-01.webp 2400w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/d8a41/ipdb-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/acb1835345fea2d0585c1091a7a5e2c1/1a778/ipdb-01.png",
-                "originalName": "ipdb-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#084858",
+                "images": {
+                  "fallback": {
+                    "src": "/static/acb1835345fea2d0585c1091a7a5e2c1/53a0b/ipdb-01.png",
+                    "srcSet": "/static/acb1835345fea2d0585c1091a7a5e2c1/6f0a4/ipdb-01.png 185w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/556c8/ipdb-01.png 370w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/53a0b/ipdb-01.png 740w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/d4077/ipdb-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/acb1835345fea2d0585c1091a7a5e2c1/b09fa/ipdb-01.webp 185w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/407fa/ipdb-01.webp 370w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/a550a/ipdb-01.webp 740w,\n/static/acb1835345fea2d0585c1091a7a5e2c1/63a41/ipdb-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "From 2015–2017 I was leading the UI design & development of all IPDB web properties and additonally iterated on the creative and visual direction of the IPDB brand.\nThe main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it. All design & development is embedded in a continous deployment process via GitHub & Travis.\nBranding and key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).\n",
-          "links": [
-            {
-              "title": "Link",
-              "type": null,
-              "url": "https://ipdb.io"
-            },
-            {
-              "title": "Styleguide",
-              "type": null,
-              "url": "https://ipdb.io/styleguide/"
-            },
-            {
-              "title": "GitHub",
-              "type": null,
-              "url": "https://github.com/ipdb/website"
-            }
-          ],
-          "techstack": [
-            "Sketch",
-            "Jekyll",
-            "Gulp",
-            "HTML",
-            "SCSS",
-            "JavaScript",
-            "Travis",
-            "AWS S3",
-            "Cloudflare",
-            "3Scale"
-          ]
+          }
         }
       },
       {
@@ -121,36 +127,28 @@
           "slug": "/biv/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/ed917fad5fb6829ce2234fabcbea9b49/55230/biv-01.png",
-                "srcSet": "/static/ed917fad5fb6829ce2234fabcbea9b49/566d0/biv-01.png 300w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/bd9e5/biv-01.png 600w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/55230/biv-01.png 1200w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/ea0ed/biv-01.png 1800w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/9f094/biv-01.png 2400w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/1a778/biv-01.png 2880w",
-                "srcWebp": "/static/ed917fad5fb6829ce2234fabcbea9b49/a1b27/biv-01.webp",
-                "srcSetWebp": "/static/ed917fad5fb6829ce2234fabcbea9b49/91d38/biv-01.webp 300w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/2ead2/biv-01.webp 600w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/a1b27/biv-01.webp 1200w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/aae66/biv-01.webp 1800w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/6de27/biv-01.webp 2400w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/d8a41/biv-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/ed917fad5fb6829ce2234fabcbea9b49/1a778/biv-01.png",
-                "originalName": "biv-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#283848",
+                "images": {
+                  "fallback": {
+                    "src": "/static/ed917fad5fb6829ce2234fabcbea9b49/53a0b/biv-01.png",
+                    "srcSet": "/static/ed917fad5fb6829ce2234fabcbea9b49/6f0a4/biv-01.png 185w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/556c8/biv-01.png 370w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/53a0b/biv-01.png 740w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/d4077/biv-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/ed917fad5fb6829ce2234fabcbea9b49/b09fa/biv-01.webp 185w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/407fa/biv-01.webp 370w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/a550a/biv-01.webp 740w,\n/static/ed917fad5fb6829ce2234fabcbea9b49/63a41/biv-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "I designed & developed the website and a basic branding for the Berlin-based VC firm Berlin Innovation Ventures. The main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it.\n",
-          "links": [
-            {
-              "title": "Link",
-              "type": null,
-              "url": "http://berlininnovation.vc"
-            }
-          ],
-          "techstack": [
-            "Sketch",
-            "Jekyll",
-            "Gulp",
-            "HTML",
-            "SCSS",
-            "JavaScript"
-          ]
+          }
         }
       },
       {
@@ -159,49 +157,28 @@
           "slug": "/9984/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/ce6c8319412d8d0b8c659f67d173a97c/55230/9984-01.png",
-                "srcSet": "/static/ce6c8319412d8d0b8c659f67d173a97c/566d0/9984-01.png 300w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/bd9e5/9984-01.png 600w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/55230/9984-01.png 1200w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/ea0ed/9984-01.png 1800w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/9f094/9984-01.png 2400w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/1a778/9984-01.png 2880w",
-                "srcWebp": "/static/ce6c8319412d8d0b8c659f67d173a97c/a1b27/9984-01.webp",
-                "srcSetWebp": "/static/ce6c8319412d8d0b8c659f67d173a97c/91d38/9984-01.webp 300w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/2ead2/9984-01.webp 600w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/a1b27/9984-01.webp 1200w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/aae66/9984-01.webp 1800w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/6de27/9984-01.webp 2400w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/d8a41/9984-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/ce6c8319412d8d0b8c659f67d173a97c/1a778/9984-01.png",
-                "originalName": "9984-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#e8e8e8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/ce6c8319412d8d0b8c659f67d173a97c/53a0b/9984-01.png",
+                    "srcSet": "/static/ce6c8319412d8d0b8c659f67d173a97c/6f0a4/9984-01.png 185w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/556c8/9984-01.png 370w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/53a0b/9984-01.png 740w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/d4077/9984-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/ce6c8319412d8d0b8c659f67d173a97c/b09fa/9984-01.webp 185w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/407fa/9984-01.webp 370w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/a550a/9984-01.webp 740w,\n/static/ce6c8319412d8d0b8c659f67d173a97c/63a41/9984-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "In 2017 I was leading the UI design & development for the 9984 >> Summit, the first joint summit of BigchainDB & IPDB. Additionally, I conceptualized, executed and iterated on the creative and visual direction of the 9984 brand.\nThe main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it. All design & development is embedded in a continous deployment process via GitHub & Travis.\nBranding and key visuals in collaboration with [Cristina Vulpe](https://www.linkedin.com/in/cristina-vulpe-41469262) & [Wojciech Hupert](https://twitter.com/wojciechhupert).\n",
-          "links": [
-            {
-              "title": "Link",
-              "type": null,
-              "url": "https://2017.9984.io"
-            },
-            {
-              "title": "Styleguide",
-              "type": null,
-              "url": "https://2017.9984.io/styleguide/"
-            },
-            {
-              "title": "GitHub",
-              "type": null,
-              "url": "https://github.com/9984/2017.9984.io"
-            }
-          ],
-          "techstack": [
-            "Sketch",
-            "Jekyll",
-            "Gulp",
-            "HTML",
-            "SCSS",
-            "JavaScript",
-            "Travis",
-            "AWS S3",
-            "Cloudflare"
-          ]
+          }
         }
       },
       {
@@ -210,56 +187,28 @@
           "slug": "/bigchaindb/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/fad33c2d37f62e5be6f9c155583ba3fc/55230/bigchaindb-01.png",
-                "srcSet": "/static/fad33c2d37f62e5be6f9c155583ba3fc/566d0/bigchaindb-01.png 300w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/bd9e5/bigchaindb-01.png 600w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/55230/bigchaindb-01.png 1200w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/ea0ed/bigchaindb-01.png 1800w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/9f094/bigchaindb-01.png 2400w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/1a778/bigchaindb-01.png 2880w",
-                "srcWebp": "/static/fad33c2d37f62e5be6f9c155583ba3fc/a1b27/bigchaindb-01.webp",
-                "srcSetWebp": "/static/fad33c2d37f62e5be6f9c155583ba3fc/91d38/bigchaindb-01.webp 300w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/2ead2/bigchaindb-01.webp 600w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/a1b27/bigchaindb-01.webp 1200w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/aae66/bigchaindb-01.webp 1800w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/6de27/bigchaindb-01.webp 2400w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/d8a41/bigchaindb-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/fad33c2d37f62e5be6f9c155583ba3fc/1a778/bigchaindb-01.png",
-                "originalName": "bigchaindb-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#485868",
+                "images": {
+                  "fallback": {
+                    "src": "/static/fad33c2d37f62e5be6f9c155583ba3fc/53a0b/bigchaindb-01.png",
+                    "srcSet": "/static/fad33c2d37f62e5be6f9c155583ba3fc/6f0a4/bigchaindb-01.png 185w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/556c8/bigchaindb-01.png 370w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/53a0b/bigchaindb-01.png 740w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/d4077/bigchaindb-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/fad33c2d37f62e5be6f9c155583ba3fc/b09fa/bigchaindb-01.webp 185w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/407fa/bigchaindb-01.webp 370w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/a550a/bigchaindb-01.webp 740w,\n/static/fad33c2d37f62e5be6f9c155583ba3fc/63a41/bigchaindb-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "Since 2016 I'm leading the UI design & development of all BigchainDB web properties. I created the initial BigchainDB brand and further conceptualize, execute and iterate on the creative and visual direction of BigchainDB. This includes creating and iterating on a components-based UI design system for all of BigchainDB's web properties.\nThe main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it, pulling data from various external sources and microservices. All design & development is embedded in a continous deployment process via GitHub & Travis.\nBranding & key visuals in collaboration with [Wojciech Hupert](https://twitter.com/wojciechhupert).\n",
-          "links": [
-            {
-              "title": "Link",
-              "type": null,
-              "url": "https://www.bigchaindb.com"
-            },
-            {
-              "title": "Styleguide",
-              "type": null,
-              "url": "https://www.bigchaindb.com/styleguide/"
-            },
-            {
-              "title": "GitHub",
-              "type": null,
-              "url": "https://github.com/bigchaindb/site"
-            },
-            {
-              "title": "Dribbble",
-              "type": null,
-              "url": "https://dribbble.com/shots/2522184-BigchainDB-site"
-            }
-          ],
-          "techstack": [
-            "Sketch",
-            "Affinity Designer",
-            "Illustrator",
-            "Jekyll",
-            "Gulp",
-            "HTML",
-            "SCSS",
-            "JavaScript",
-            "Travis",
-            "AWS S3",
-            "Cloudflare"
-          ]
+          }
         }
       },
       {
@@ -268,55 +217,28 @@
           "slug": "/chartmogul/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/65f6e4c810abdf72631369b5b196a0fa/55230/chartmogul-01.png",
-                "srcSet": "/static/65f6e4c810abdf72631369b5b196a0fa/566d0/chartmogul-01.png 300w,\n/static/65f6e4c810abdf72631369b5b196a0fa/bd9e5/chartmogul-01.png 600w,\n/static/65f6e4c810abdf72631369b5b196a0fa/55230/chartmogul-01.png 1200w,\n/static/65f6e4c810abdf72631369b5b196a0fa/ea0ed/chartmogul-01.png 1800w,\n/static/65f6e4c810abdf72631369b5b196a0fa/9f094/chartmogul-01.png 2400w,\n/static/65f6e4c810abdf72631369b5b196a0fa/1a778/chartmogul-01.png 2880w",
-                "srcWebp": "/static/65f6e4c810abdf72631369b5b196a0fa/a1b27/chartmogul-01.webp",
-                "srcSetWebp": "/static/65f6e4c810abdf72631369b5b196a0fa/91d38/chartmogul-01.webp 300w,\n/static/65f6e4c810abdf72631369b5b196a0fa/2ead2/chartmogul-01.webp 600w,\n/static/65f6e4c810abdf72631369b5b196a0fa/a1b27/chartmogul-01.webp 1200w,\n/static/65f6e4c810abdf72631369b5b196a0fa/aae66/chartmogul-01.webp 1800w,\n/static/65f6e4c810abdf72631369b5b196a0fa/6de27/chartmogul-01.webp 2400w,\n/static/65f6e4c810abdf72631369b5b196a0fa/d8a41/chartmogul-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/65f6e4c810abdf72631369b5b196a0fa/1a778/chartmogul-01.png",
-                "originalName": "chartmogul-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#f8f8f8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/65f6e4c810abdf72631369b5b196a0fa/53a0b/chartmogul-01.png",
+                    "srcSet": "/static/65f6e4c810abdf72631369b5b196a0fa/6f0a4/chartmogul-01.png 185w,\n/static/65f6e4c810abdf72631369b5b196a0fa/556c8/chartmogul-01.png 370w,\n/static/65f6e4c810abdf72631369b5b196a0fa/53a0b/chartmogul-01.png 740w,\n/static/65f6e4c810abdf72631369b5b196a0fa/d4077/chartmogul-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/65f6e4c810abdf72631369b5b196a0fa/b09fa/chartmogul-01.webp 185w,\n/static/65f6e4c810abdf72631369b5b196a0fa/407fa/chartmogul-01.webp 370w,\n/static/65f6e4c810abdf72631369b5b196a0fa/a550a/chartmogul-01.webp 740w,\n/static/65f6e4c810abdf72631369b5b196a0fa/63a41/chartmogul-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "From 2015–2017 I was co-designing and leading the UI design & development of various ChartMogul web properties. This included the creation of a components-based UI design system and implementing it across all web touch points.\nThe main website with its landing pages is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it, while the blog is running on WordPress with its own custom theme. All embedded in an automated development & deployment workflow via GitHub and Travis.\nBesides designing and implementing new features, I maintained the front-end of the ChartMogul application and implemented the UI design system by refactoring most of its front-end codebase.\nAll branding, design & key visuals directed by Michelle Myung.\n",
-          "links": [
-            {
-              "title": "Link",
-              "type": null,
-              "url": "https://chartmogul.com/"
-            },
-            {
-              "title": "Styleguide",
-              "type": null,
-              "url": "https://chartmogul.com/styleguide/"
-            },
-            {
-              "title": "Dribbble",
-              "type": null,
-              "url": "https://dribbble.com/kremalicious/projects/311439-ChartMogul"
-            }
-          ],
-          "techstack": [
-            "Sketch",
-            "Affinity Designer",
-            "Illustrator",
-            "HTML",
-            "SCSS",
-            "JavaScript",
-            "PHP",
-            "Jekyll",
-            "Gulp",
-            "WordPress",
-            "Travis",
-            "AWS S3",
-            "Cloudflare",
-            "Ruby on Rails",
-            "Backbone.js"
-          ]
+          }
         }
       },
       {
@@ -325,41 +247,28 @@
           "slug": "/sharethemeal/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/d00971ec082602b2f0757e795ef3669e/55230/sharethemeal-01.png",
-                "srcSet": "/static/d00971ec082602b2f0757e795ef3669e/566d0/sharethemeal-01.png 300w,\n/static/d00971ec082602b2f0757e795ef3669e/bd9e5/sharethemeal-01.png 600w,\n/static/d00971ec082602b2f0757e795ef3669e/55230/sharethemeal-01.png 1200w,\n/static/d00971ec082602b2f0757e795ef3669e/ea0ed/sharethemeal-01.png 1800w,\n/static/d00971ec082602b2f0757e795ef3669e/9f094/sharethemeal-01.png 2400w,\n/static/d00971ec082602b2f0757e795ef3669e/1a778/sharethemeal-01.png 2880w",
-                "srcWebp": "/static/d00971ec082602b2f0757e795ef3669e/a1b27/sharethemeal-01.webp",
-                "srcSetWebp": "/static/d00971ec082602b2f0757e795ef3669e/91d38/sharethemeal-01.webp 300w,\n/static/d00971ec082602b2f0757e795ef3669e/2ead2/sharethemeal-01.webp 600w,\n/static/d00971ec082602b2f0757e795ef3669e/a1b27/sharethemeal-01.webp 1200w,\n/static/d00971ec082602b2f0757e795ef3669e/aae66/sharethemeal-01.webp 1800w,\n/static/d00971ec082602b2f0757e795ef3669e/6de27/sharethemeal-01.webp 2400w,\n/static/d00971ec082602b2f0757e795ef3669e/d8a41/sharethemeal-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/d00971ec082602b2f0757e795ef3669e/1a778/sharethemeal-01.png",
-                "originalName": "sharethemeal-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#f8f8f8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/d00971ec082602b2f0757e795ef3669e/53a0b/sharethemeal-01.png",
+                    "srcSet": "/static/d00971ec082602b2f0757e795ef3669e/6f0a4/sharethemeal-01.png 185w,\n/static/d00971ec082602b2f0757e795ef3669e/556c8/sharethemeal-01.png 370w,\n/static/d00971ec082602b2f0757e795ef3669e/53a0b/sharethemeal-01.png 740w,\n/static/d00971ec082602b2f0757e795ef3669e/d4077/sharethemeal-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/d00971ec082602b2f0757e795ef3669e/b09fa/sharethemeal-01.webp 185w,\n/static/d00971ec082602b2f0757e795ef3669e/407fa/sharethemeal-01.webp 370w,\n/static/d00971ec082602b2f0757e795ef3669e/a550a/sharethemeal-01.webp 740w,\n/static/d00971ec082602b2f0757e795ef3669e/63a41/sharethemeal-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "ShareTheMeal is an app from the United Nations World Food Programme (WFP) that enables people to \"share their meals\" with children in need. In 2015 I was consulting, co-designing and leading the front-end development of the ShareTheMeal website and various parts of the ShareTheMeal apps for iOS & Android.\nThe main website is a static site built with Jekyll and a custom Gulp-based build pipeline in front of it, embedded in a continous deployment process via GitHub & Travis.\n",
-          "links": [
-            {
-              "title": "Link",
-              "type": null,
-              "url": "https://sharethemeal.org/"
-            }
-          ],
-          "techstack": [
-            "Sketch",
-            "Illustrator",
-            "Jekyll",
-            "Gulp",
-            "HTML",
-            "SCSS",
-            "JavaScript",
-            "Travis",
-            "AWS S3",
-            "Cloudflare",
-            "Node.js"
-          ]
+          }
         }
       },
       {
@@ -368,50 +277,28 @@
           "slug": "/ezeep/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/0bf3f682179b1dd551b43b3533d0f103/55230/ezeep-01.png",
-                "srcSet": "/static/0bf3f682179b1dd551b43b3533d0f103/566d0/ezeep-01.png 300w,\n/static/0bf3f682179b1dd551b43b3533d0f103/bd9e5/ezeep-01.png 600w,\n/static/0bf3f682179b1dd551b43b3533d0f103/55230/ezeep-01.png 1200w,\n/static/0bf3f682179b1dd551b43b3533d0f103/ea0ed/ezeep-01.png 1800w,\n/static/0bf3f682179b1dd551b43b3533d0f103/9f094/ezeep-01.png 2400w,\n/static/0bf3f682179b1dd551b43b3533d0f103/1a778/ezeep-01.png 2880w",
-                "srcWebp": "/static/0bf3f682179b1dd551b43b3533d0f103/a1b27/ezeep-01.webp",
-                "srcSetWebp": "/static/0bf3f682179b1dd551b43b3533d0f103/91d38/ezeep-01.webp 300w,\n/static/0bf3f682179b1dd551b43b3533d0f103/2ead2/ezeep-01.webp 600w,\n/static/0bf3f682179b1dd551b43b3533d0f103/a1b27/ezeep-01.webp 1200w,\n/static/0bf3f682179b1dd551b43b3533d0f103/aae66/ezeep-01.webp 1800w,\n/static/0bf3f682179b1dd551b43b3533d0f103/6de27/ezeep-01.webp 2400w,\n/static/0bf3f682179b1dd551b43b3533d0f103/d8a41/ezeep-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/0bf3f682179b1dd551b43b3533d0f103/1a778/ezeep-01.png",
-                "originalName": "ezeep-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#f8f8f8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/0bf3f682179b1dd551b43b3533d0f103/53a0b/ezeep-01.png",
+                    "srcSet": "/static/0bf3f682179b1dd551b43b3533d0f103/6f0a4/ezeep-01.png 185w,\n/static/0bf3f682179b1dd551b43b3533d0f103/556c8/ezeep-01.png 370w,\n/static/0bf3f682179b1dd551b43b3533d0f103/53a0b/ezeep-01.png 740w,\n/static/0bf3f682179b1dd551b43b3533d0f103/d4077/ezeep-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/0bf3f682179b1dd551b43b3533d0f103/b09fa/ezeep-01.webp 185w,\n/static/0bf3f682179b1dd551b43b3533d0f103/407fa/ezeep-01.webp 370w,\n/static/0bf3f682179b1dd551b43b3533d0f103/a550a/ezeep-01.webp 740w,\n/static/0bf3f682179b1dd551b43b3533d0f103/63a41/ezeep-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "From 2012–2015 I worked at ezeep, where I helped creating an unprecedented, market-leading & award-winning user experience based on the principles of emotional design way ahead of all competitors. This included conceptualizing executing, and iterating on the creative & visual direction of the ezeep brand.\nI was leading the UI design & development of all ezeep touch points and - as a product designer - defined the ezeep product based on user and market research in an iterative process. On top of that, I designed and helped building all app experiences of ezeep on Windows, macOS, iOS, and Android.\nezeep was acquired by [Cortado AG](https://www.cortado.com) in 2015 and became part of their [ThinPrint Cloud Services](https://www.thinprintcloud.com) suite of products.\n",
-          "links": [
-            {
-              "title": "Info",
-              "type": null,
-              "url": "https://kremalicious.com/enterprise-software-sucks/"
-            },
-            {
-              "title": "Dribbble",
-              "type": null,
-              "url": "https://dribbble.com/kremalicious/projects/84318-ezeep"
-            }
-          ],
-          "techstack": [
-            "Photoshop",
-            "Illustrator",
-            "InDesign",
-            "Sketch",
-            "HTML",
-            "SCSS",
-            "JavaScript",
-            "PHP",
-            "WordPress",
-            "Travis",
-            "AWS",
-            "Cloudflare",
-            "Node.js",
-            "Backbone.js",
-            "Electron"
-          ]
+          }
         }
       },
       {
@@ -420,23 +307,28 @@
           "slug": "/mrreader/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/7d47f4d930476068faaa9e3b76a0c639/55230/mrreader-01.png",
-                "srcSet": "/static/7d47f4d930476068faaa9e3b76a0c639/566d0/mrreader-01.png 300w,\n/static/7d47f4d930476068faaa9e3b76a0c639/bd9e5/mrreader-01.png 600w,\n/static/7d47f4d930476068faaa9e3b76a0c639/55230/mrreader-01.png 1200w,\n/static/7d47f4d930476068faaa9e3b76a0c639/ea0ed/mrreader-01.png 1800w,\n/static/7d47f4d930476068faaa9e3b76a0c639/9f094/mrreader-01.png 2400w,\n/static/7d47f4d930476068faaa9e3b76a0c639/1a778/mrreader-01.png 2880w",
-                "srcWebp": "/static/7d47f4d930476068faaa9e3b76a0c639/a1b27/mrreader-01.webp",
-                "srcSetWebp": "/static/7d47f4d930476068faaa9e3b76a0c639/91d38/mrreader-01.webp 300w,\n/static/7d47f4d930476068faaa9e3b76a0c639/2ead2/mrreader-01.webp 600w,\n/static/7d47f4d930476068faaa9e3b76a0c639/a1b27/mrreader-01.webp 1200w,\n/static/7d47f4d930476068faaa9e3b76a0c639/aae66/mrreader-01.webp 1800w,\n/static/7d47f4d930476068faaa9e3b76a0c639/6de27/mrreader-01.webp 2400w,\n/static/7d47f4d930476068faaa9e3b76a0c639/d8a41/mrreader-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/7d47f4d930476068faaa9e3b76a0c639/1a778/mrreader-01.png",
-                "originalName": "mrreader-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#d8d8c8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/7d47f4d930476068faaa9e3b76a0c639/53a0b/mrreader-01.png",
+                    "srcSet": "/static/7d47f4d930476068faaa9e3b76a0c639/6f0a4/mrreader-01.png 185w,\n/static/7d47f4d930476068faaa9e3b76a0c639/556c8/mrreader-01.png 370w,\n/static/7d47f4d930476068faaa9e3b76a0c639/53a0b/mrreader-01.png 740w,\n/static/7d47f4d930476068faaa9e3b76a0c639/d4077/mrreader-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/7d47f4d930476068faaa9e3b76a0c639/b09fa/mrreader-01.webp 185w,\n/static/7d47f4d930476068faaa9e3b76a0c639/407fa/mrreader-01.webp 370w,\n/static/7d47f4d930476068faaa9e3b76a0c639/a550a/mrreader-01.webp 740w,\n/static/7d47f4d930476068faaa9e3b76a0c639/63a41/mrreader-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "While working with indy iOS developer Curious Times in 2012, I designed the app icon, a custom theme, and various promotion materials for Mr. Reader, a powerful and highly loved RSS feed reader for iPad.\n",
-          "links": null,
-          "techstack": ["Photoshop"]
+          }
         }
       },
       {
@@ -445,29 +337,28 @@
           "slug": "/ipixelpad/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/6f255d7df0c12b2ec3bd78e92e87e121/55230/ipixelpad-01.png",
-                "srcSet": "/static/6f255d7df0c12b2ec3bd78e92e87e121/566d0/ipixelpad-01.png 300w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/bd9e5/ipixelpad-01.png 600w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/55230/ipixelpad-01.png 1200w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/ea0ed/ipixelpad-01.png 1800w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/9f094/ipixelpad-01.png 2400w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/1a778/ipixelpad-01.png 2880w",
-                "srcWebp": "/static/6f255d7df0c12b2ec3bd78e92e87e121/a1b27/ipixelpad-01.webp",
-                "srcSetWebp": "/static/6f255d7df0c12b2ec3bd78e92e87e121/91d38/ipixelpad-01.webp 300w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/2ead2/ipixelpad-01.webp 600w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/a1b27/ipixelpad-01.webp 1200w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/aae66/ipixelpad-01.webp 1800w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/6de27/ipixelpad-01.webp 2400w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/d8a41/ipixelpad-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/6f255d7df0c12b2ec3bd78e92e87e121/1a778/ipixelpad-01.png",
-                "originalName": "ipixelpad-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#e8e8f8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/6f255d7df0c12b2ec3bd78e92e87e121/53a0b/ipixelpad-01.png",
+                    "srcSet": "/static/6f255d7df0c12b2ec3bd78e92e87e121/6f0a4/ipixelpad-01.png 185w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/556c8/ipixelpad-01.png 370w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/53a0b/ipixelpad-01.png 740w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/d4077/ipixelpad-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/6f255d7df0c12b2ec3bd78e92e87e121/b09fa/ipixelpad-01.webp 185w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/407fa/ipixelpad-01.webp 370w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/a550a/ipixelpad-01.webp 740w,\n/static/6f255d7df0c12b2ec3bd78e92e87e121/63a41/ipixelpad-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "So, what to do when everyone seem to release iPad icons but fail to include some crisp small size icons? Pushing the pixels for yourself of course. So here’s my take on the smaller sizes of an Apple iPad icon, called iPixelPad.\nReleased as a goodie on [kremalicious.com](https://kremalicious.com/ipixelpad/).\n",
-          "links": [
-            {
-              "title": "Download",
-              "type": null,
-              "url": "https://kremalicious.com/ipixelpad/"
-            }
-          ],
-          "techstack": ["Photoshop"]
+          }
         }
       },
       {
@@ -476,29 +367,28 @@
           "slug": "/outofwhaleoil/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/86ce88b849146660420149407ae47868/40570/outofwhaleoil-01.jpg",
-                "srcSet": "/static/86ce88b849146660420149407ae47868/7bafc/outofwhaleoil-01.jpg 300w,\n/static/86ce88b849146660420149407ae47868/a5a41/outofwhaleoil-01.jpg 600w,\n/static/86ce88b849146660420149407ae47868/40570/outofwhaleoil-01.jpg 1200w,\n/static/86ce88b849146660420149407ae47868/6a8f4/outofwhaleoil-01.jpg 1800w,\n/static/86ce88b849146660420149407ae47868/3e55d/outofwhaleoil-01.jpg 2400w,\n/static/86ce88b849146660420149407ae47868/c7ccf/outofwhaleoil-01.jpg 2880w",
-                "srcWebp": "/static/86ce88b849146660420149407ae47868/a1b27/outofwhaleoil-01.webp",
-                "srcSetWebp": "/static/86ce88b849146660420149407ae47868/91d38/outofwhaleoil-01.webp 300w,\n/static/86ce88b849146660420149407ae47868/2ead2/outofwhaleoil-01.webp 600w,\n/static/86ce88b849146660420149407ae47868/a1b27/outofwhaleoil-01.webp 1200w,\n/static/86ce88b849146660420149407ae47868/aae66/outofwhaleoil-01.webp 1800w,\n/static/86ce88b849146660420149407ae47868/6de27/outofwhaleoil-01.webp 2400w,\n/static/86ce88b849146660420149407ae47868/d8a41/outofwhaleoil-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/86ce88b849146660420149407ae47868/c7ccf/outofwhaleoil-01.jpg",
-                "originalName": "outofwhaleoil-01.jpg",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#588858",
+                "images": {
+                  "fallback": {
+                    "src": "/static/86ce88b849146660420149407ae47868/5cdf2/outofwhaleoil-01.jpg",
+                    "srcSet": "/static/86ce88b849146660420149407ae47868/a8510/outofwhaleoil-01.jpg 185w,\n/static/86ce88b849146660420149407ae47868/99090/outofwhaleoil-01.jpg 370w,\n/static/86ce88b849146660420149407ae47868/5cdf2/outofwhaleoil-01.jpg 740w,\n/static/86ce88b849146660420149407ae47868/1f62b/outofwhaleoil-01.jpg 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/86ce88b849146660420149407ae47868/b09fa/outofwhaleoil-01.webp 185w,\n/static/86ce88b849146660420149407ae47868/407fa/outofwhaleoil-01.webp 370w,\n/static/86ce88b849146660420149407ae47868/a550a/outofwhaleoil-01.webp 740w,\n/static/86ce88b849146660420149407ae47868/63a41/outofwhaleoil-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "Tribute wallpaper pack inspired by the Futurama movie _Into The Wild Green Yonder_. Released as a goodie on [kremalicious.com](https://kremalicious.com/out-of-whale-oil/).\n",
-          "links": [
-            {
-              "title": "Download",
-              "type": null,
-              "url": "https://kremalicious.com/out-of-whale-oil/"
-            }
-          ],
-          "techstack": ["Photoshop"]
+          }
         }
       },
       {
@@ -507,45 +397,28 @@
           "slug": "/unihalle/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/abcea3265322bfbc06599d7eb173e57a/55230/unihalle-01.png",
-                "srcSet": "/static/abcea3265322bfbc06599d7eb173e57a/566d0/unihalle-01.png 300w,\n/static/abcea3265322bfbc06599d7eb173e57a/bd9e5/unihalle-01.png 600w,\n/static/abcea3265322bfbc06599d7eb173e57a/55230/unihalle-01.png 1200w,\n/static/abcea3265322bfbc06599d7eb173e57a/ea0ed/unihalle-01.png 1800w,\n/static/abcea3265322bfbc06599d7eb173e57a/9f094/unihalle-01.png 2400w,\n/static/abcea3265322bfbc06599d7eb173e57a/1a778/unihalle-01.png 2880w",
-                "srcWebp": "/static/abcea3265322bfbc06599d7eb173e57a/a1b27/unihalle-01.webp",
-                "srcSetWebp": "/static/abcea3265322bfbc06599d7eb173e57a/91d38/unihalle-01.webp 300w,\n/static/abcea3265322bfbc06599d7eb173e57a/2ead2/unihalle-01.webp 600w,\n/static/abcea3265322bfbc06599d7eb173e57a/a1b27/unihalle-01.webp 1200w,\n/static/abcea3265322bfbc06599d7eb173e57a/aae66/unihalle-01.webp 1800w,\n/static/abcea3265322bfbc06599d7eb173e57a/6de27/unihalle-01.webp 2400w,\n/static/abcea3265322bfbc06599d7eb173e57a/d8a41/unihalle-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/abcea3265322bfbc06599d7eb173e57a/1a778/unihalle-01.png",
-                "originalName": "unihalle-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#f8f8f8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/abcea3265322bfbc06599d7eb173e57a/53a0b/unihalle-01.png",
+                    "srcSet": "/static/abcea3265322bfbc06599d7eb173e57a/6f0a4/unihalle-01.png 185w,\n/static/abcea3265322bfbc06599d7eb173e57a/556c8/unihalle-01.png 370w,\n/static/abcea3265322bfbc06599d7eb173e57a/53a0b/unihalle-01.png 740w,\n/static/abcea3265322bfbc06599d7eb173e57a/d4077/unihalle-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/abcea3265322bfbc06599d7eb173e57a/b09fa/unihalle-01.webp 185w,\n/static/abcea3265322bfbc06599d7eb173e57a/407fa/unihalle-01.webp 370w,\n/static/abcea3265322bfbc06599d7eb173e57a/a550a/unihalle-01.webp 740w,\n/static/abcea3265322bfbc06599d7eb173e57a/63a41/unihalle-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "From 2009–2012 I worked at the IT services department of [Martin-Luther-Universität Halle-Wittenberg](http://www.uni-halle.de) where I conceptualized, designed & implemented numerous in-house and public facing interfaces for thousands of students and staff.\nAdditionally, I conceptualized, designed, created, and maintained the blog network & community for all students & staff.\n",
-          "links": [
-            {
-              "title": "Link",
-              "type": null,
-              "url": "http://blogs.urz-uni-halle.de"
-            },
-            {
-              "title": "Dribbble",
-              "type": null,
-              "url": "https://dribbble.com/kremalicious/projects/690029-MLU"
-            }
-          ],
-          "techstack": [
-            "Photoshop",
-            "Illustrator",
-            "HTML",
-            "SCSS",
-            "JavaScript",
-            "PHP",
-            "Ruby on Rails",
-            "WordPress",
-            "Ilias",
-            "Stud.IP"
-          ]
+          }
         }
       },
       {
@@ -554,29 +427,28 @@
           "slug": "/coffeecup/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/c6b5a93dc77983bf55a511a6847cbbbe/55230/coffeecup-01.png",
-                "srcSet": "/static/c6b5a93dc77983bf55a511a6847cbbbe/566d0/coffeecup-01.png 300w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/bd9e5/coffeecup-01.png 600w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/55230/coffeecup-01.png 1200w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/ea0ed/coffeecup-01.png 1800w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/9f094/coffeecup-01.png 2400w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/1a778/coffeecup-01.png 2880w",
-                "srcWebp": "/static/c6b5a93dc77983bf55a511a6847cbbbe/a1b27/coffeecup-01.webp",
-                "srcSetWebp": "/static/c6b5a93dc77983bf55a511a6847cbbbe/91d38/coffeecup-01.webp 300w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/2ead2/coffeecup-01.webp 600w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/a1b27/coffeecup-01.webp 1200w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/aae66/coffeecup-01.webp 1800w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/6de27/coffeecup-01.webp 2400w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/d8a41/coffeecup-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/c6b5a93dc77983bf55a511a6847cbbbe/1a778/coffeecup-01.png",
-                "originalName": "coffeecup-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#888898",
+                "images": {
+                  "fallback": {
+                    "src": "/static/c6b5a93dc77983bf55a511a6847cbbbe/53a0b/coffeecup-01.png",
+                    "srcSet": "/static/c6b5a93dc77983bf55a511a6847cbbbe/6f0a4/coffeecup-01.png 185w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/556c8/coffeecup-01.png 370w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/53a0b/coffeecup-01.png 740w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/d4077/coffeecup-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/c6b5a93dc77983bf55a511a6847cbbbe/b09fa/coffeecup-01.webp 185w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/407fa/coffeecup-01.webp 370w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/a550a/coffeecup-01.webp 740w,\n/static/c6b5a93dc77983bf55a511a6847cbbbe/63a41/coffeecup-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "Desktop icons showing the fuel of most designers. Released as a goodie on [kremalicious.com](https://kremalicious.com/coffee-cup-icon/).\n",
-          "links": [
-            {
-              "title": "Download",
-              "type": null,
-              "url": "https://kremalicious.com/coffee-cup-icon/"
-            }
-          ],
-          "techstack": ["Photoshop"]
+          }
         }
       },
       {
@@ -585,29 +457,28 @@
           "slug": "/projectpurple/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/8cc647e8b1490931daa6580a40883e29/55230/projectpurple-01.png",
-                "srcSet": "/static/8cc647e8b1490931daa6580a40883e29/566d0/projectpurple-01.png 300w,\n/static/8cc647e8b1490931daa6580a40883e29/bd9e5/projectpurple-01.png 600w,\n/static/8cc647e8b1490931daa6580a40883e29/55230/projectpurple-01.png 1200w,\n/static/8cc647e8b1490931daa6580a40883e29/ea0ed/projectpurple-01.png 1800w,\n/static/8cc647e8b1490931daa6580a40883e29/9f094/projectpurple-01.png 2400w,\n/static/8cc647e8b1490931daa6580a40883e29/1a778/projectpurple-01.png 2880w",
-                "srcWebp": "/static/8cc647e8b1490931daa6580a40883e29/a1b27/projectpurple-01.webp",
-                "srcSetWebp": "/static/8cc647e8b1490931daa6580a40883e29/91d38/projectpurple-01.webp 300w,\n/static/8cc647e8b1490931daa6580a40883e29/2ead2/projectpurple-01.webp 600w,\n/static/8cc647e8b1490931daa6580a40883e29/a1b27/projectpurple-01.webp 1200w,\n/static/8cc647e8b1490931daa6580a40883e29/aae66/projectpurple-01.webp 1800w,\n/static/8cc647e8b1490931daa6580a40883e29/6de27/projectpurple-01.webp 2400w,\n/static/8cc647e8b1490931daa6580a40883e29/d8a41/projectpurple-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/8cc647e8b1490931daa6580a40883e29/1a778/projectpurple-01.png",
-                "originalName": "projectpurple-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#382838",
+                "images": {
+                  "fallback": {
+                    "src": "/static/8cc647e8b1490931daa6580a40883e29/53a0b/projectpurple-01.png",
+                    "srcSet": "/static/8cc647e8b1490931daa6580a40883e29/6f0a4/projectpurple-01.png 185w,\n/static/8cc647e8b1490931daa6580a40883e29/556c8/projectpurple-01.png 370w,\n/static/8cc647e8b1490931daa6580a40883e29/53a0b/projectpurple-01.png 740w,\n/static/8cc647e8b1490931daa6580a40883e29/d4077/projectpurple-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/8cc647e8b1490931daa6580a40883e29/b09fa/projectpurple-01.webp 185w,\n/static/8cc647e8b1490931daa6580a40883e29/407fa/projectpurple-01.webp 370w,\n/static/8cc647e8b1490931daa6580a40883e29/a550a/projectpurple-01.webp 740w,\n/static/8cc647e8b1490931daa6580a40883e29/63a41/projectpurple-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "It had been revealed the original iPhone was developed in a locked down building under the name Project Purple and because of the secrecy involved, the team decorated the building with Fight Club references. Perfect story to create a wallpaper out of it.\nReleased as a goodie on [kremalicious.com](https://kremalicious.com/projectpurple/).\n",
-          "links": [
-            {
-              "title": "Download",
-              "type": null,
-              "url": "https://kremalicious.com/projectpurple/"
-            }
-          ],
-          "techstack": ["Photoshop"]
+          }
         }
       },
       {
@@ -616,23 +487,28 @@
           "slug": "/allinnia/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/d86855c9ee74e8dfbf169ded0631f5c3/55230/allinnia-01.png",
-                "srcSet": "/static/d86855c9ee74e8dfbf169ded0631f5c3/566d0/allinnia-01.png 300w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/bd9e5/allinnia-01.png 600w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/55230/allinnia-01.png 1200w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/ea0ed/allinnia-01.png 1800w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/9f094/allinnia-01.png 2400w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/1a778/allinnia-01.png 2880w",
-                "srcWebp": "/static/d86855c9ee74e8dfbf169ded0631f5c3/a1b27/allinnia-01.webp",
-                "srcSetWebp": "/static/d86855c9ee74e8dfbf169ded0631f5c3/91d38/allinnia-01.webp 300w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/2ead2/allinnia-01.webp 600w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/a1b27/allinnia-01.webp 1200w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/aae66/allinnia-01.webp 1800w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/6de27/allinnia-01.webp 2400w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/d8a41/allinnia-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/d86855c9ee74e8dfbf169ded0631f5c3/1a778/allinnia-01.png",
-                "originalName": "allinnia-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#484848",
+                "images": {
+                  "fallback": {
+                    "src": "/static/d86855c9ee74e8dfbf169ded0631f5c3/53a0b/allinnia-01.png",
+                    "srcSet": "/static/d86855c9ee74e8dfbf169ded0631f5c3/6f0a4/allinnia-01.png 185w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/556c8/allinnia-01.png 370w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/53a0b/allinnia-01.png 740w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/d4077/allinnia-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/d86855c9ee74e8dfbf169ded0631f5c3/b09fa/allinnia-01.webp 185w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/407fa/allinnia-01.webp 370w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/a550a/allinnia-01.webp 740w,\n/static/d86855c9ee74e8dfbf169ded0631f5c3/63a41/allinnia-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "In 2009 I created the branding, website, and various key visuals for professional music production studio Allinnia Creative Group, reflecting their own musical compositions.\nThe website was built from scratch as a simple PHP application with a store and music listening functionality.\n",
-          "links": null,
-          "techstack": ["Photoshop", "HTML", "CSS", "JavaScript", "PHP"]
+          }
         }
       },
       {
@@ -641,23 +517,28 @@
           "slug": "/apertureloupe/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/04fa21ff7752ace46c954f5995deb0d5/55230/apertureloupe-01.png",
-                "srcSet": "/static/04fa21ff7752ace46c954f5995deb0d5/566d0/apertureloupe-01.png 300w,\n/static/04fa21ff7752ace46c954f5995deb0d5/bd9e5/apertureloupe-01.png 600w,\n/static/04fa21ff7752ace46c954f5995deb0d5/55230/apertureloupe-01.png 1200w,\n/static/04fa21ff7752ace46c954f5995deb0d5/ea0ed/apertureloupe-01.png 1800w,\n/static/04fa21ff7752ace46c954f5995deb0d5/9f094/apertureloupe-01.png 2400w,\n/static/04fa21ff7752ace46c954f5995deb0d5/1a778/apertureloupe-01.png 2880w",
-                "srcWebp": "/static/04fa21ff7752ace46c954f5995deb0d5/a1b27/apertureloupe-01.webp",
-                "srcSetWebp": "/static/04fa21ff7752ace46c954f5995deb0d5/91d38/apertureloupe-01.webp 300w,\n/static/04fa21ff7752ace46c954f5995deb0d5/2ead2/apertureloupe-01.webp 600w,\n/static/04fa21ff7752ace46c954f5995deb0d5/a1b27/apertureloupe-01.webp 1200w,\n/static/04fa21ff7752ace46c954f5995deb0d5/aae66/apertureloupe-01.webp 1800w,\n/static/04fa21ff7752ace46c954f5995deb0d5/6de27/apertureloupe-01.webp 2400w,\n/static/04fa21ff7752ace46c954f5995deb0d5/d8a41/apertureloupe-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/04fa21ff7752ace46c954f5995deb0d5/1a778/apertureloupe-01.png",
-                "originalName": "apertureloupe-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#384848",
+                "images": {
+                  "fallback": {
+                    "src": "/static/04fa21ff7752ace46c954f5995deb0d5/53a0b/apertureloupe-01.png",
+                    "srcSet": "/static/04fa21ff7752ace46c954f5995deb0d5/6f0a4/apertureloupe-01.png 185w,\n/static/04fa21ff7752ace46c954f5995deb0d5/556c8/apertureloupe-01.png 370w,\n/static/04fa21ff7752ace46c954f5995deb0d5/53a0b/apertureloupe-01.png 740w,\n/static/04fa21ff7752ace46c954f5995deb0d5/d4077/apertureloupe-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/04fa21ff7752ace46c954f5995deb0d5/b09fa/apertureloupe-01.webp 185w,\n/static/04fa21ff7752ace46c954f5995deb0d5/407fa/apertureloupe-01.webp 370w,\n/static/04fa21ff7752ace46c954f5995deb0d5/a550a/apertureloupe-01.webp 740w,\n/static/04fa21ff7752ace46c954f5995deb0d5/63a41/apertureloupe-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "When Apple released their professional photography app _Aperture_ in 2008, the loupe tool in there was something really novel and just fun to play with. Inspired by that, I created this macOS desktop icon.\n",
-          "links": null,
-          "techstack": ["Photoshop"]
+          }
         }
       },
       {
@@ -666,29 +547,28 @@
           "slug": "/adiumeetie/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/55230/adiumeetie-01.png",
-                "srcSet": "/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/566d0/adiumeetie-01.png 300w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/bd9e5/adiumeetie-01.png 600w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/55230/adiumeetie-01.png 1200w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/ea0ed/adiumeetie-01.png 1800w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/9f094/adiumeetie-01.png 2400w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/1a778/adiumeetie-01.png 2880w",
-                "srcWebp": "/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/a1b27/adiumeetie-01.webp",
-                "srcSetWebp": "/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/91d38/adiumeetie-01.webp 300w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/2ead2/adiumeetie-01.webp 600w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/a1b27/adiumeetie-01.webp 1200w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/aae66/adiumeetie-01.webp 1800w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/6de27/adiumeetie-01.webp 2400w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/d8a41/adiumeetie-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/1a778/adiumeetie-01.png",
-                "originalName": "adiumeetie-01.png",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#b8b8b8",
+                "images": {
+                  "fallback": {
+                    "src": "/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/53a0b/adiumeetie-01.png",
+                    "srcSet": "/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/6f0a4/adiumeetie-01.png 185w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/556c8/adiumeetie-01.png 370w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/53a0b/adiumeetie-01.png 740w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/d4077/adiumeetie-01.png 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/b09fa/adiumeetie-01.webp 185w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/407fa/adiumeetie-01.webp 370w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/a550a/adiumeetie-01.webp 740w,\n/static/d58bb3fcb97a3fbaa31ec8f1e4703c7e/63a41/adiumeetie-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "A macOS replacement desktop icon created in 2009 for the popular Mac IM client Adium following the style of atebit’s excellent Tweetie for Mac icon. Released as a goodie on [kremalicious.com](https://kremalicious.com/adiumeetie/).\n",
-          "links": [
-            {
-              "title": "Download",
-              "type": null,
-              "url": "https://kremalicious.com/adiumeetie/"
-            }
-          ],
-          "techstack": ["Photoshop"]
+          }
         }
       },
       {
@@ -697,31 +577,380 @@
           "slug": "/niepces-camera-obscura/",
           "img": {
             "childImageSharp": {
-              "fluid": {
-                "aspectRatio": 1.8,
-                "src": "/static/d40b5eff60152eada7bbbc6c03f5c8a8/40570/niepces-camera-obscura-01.jpg",
-                "srcSet": "/static/d40b5eff60152eada7bbbc6c03f5c8a8/7bafc/niepces-camera-obscura-01.jpg 300w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/a5a41/niepces-camera-obscura-01.jpg 600w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/40570/niepces-camera-obscura-01.jpg 1200w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/6a8f4/niepces-camera-obscura-01.jpg 1800w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/3e55d/niepces-camera-obscura-01.jpg 2400w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/c7ccf/niepces-camera-obscura-01.jpg 2880w",
-                "srcWebp": "/static/d40b5eff60152eada7bbbc6c03f5c8a8/a1b27/niepces-camera-obscura-01.webp",
-                "srcSetWebp": "/static/d40b5eff60152eada7bbbc6c03f5c8a8/91d38/niepces-camera-obscura-01.webp 300w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/2ead2/niepces-camera-obscura-01.webp 600w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/a1b27/niepces-camera-obscura-01.webp 1200w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/aae66/niepces-camera-obscura-01.webp 1800w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/6de27/niepces-camera-obscura-01.webp 2400w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/d8a41/niepces-camera-obscura-01.webp 2880w",
-                "sizes": "(max-width: 1200px) 100vw, 1200px",
-                "originalImg": "/static/d40b5eff60152eada7bbbc6c03f5c8a8/c7ccf/niepces-camera-obscura-01.jpg",
-                "originalName": "niepces-camera-obscura-01.jpg",
-                "presentationWidth": 1200,
-                "presentationHeight": 667
+              "gatsbyImageData": {
+                "layout": "constrained",
+                "backgroundColor": "#282828",
+                "images": {
+                  "fallback": {
+                    "src": "/static/d40b5eff60152eada7bbbc6c03f5c8a8/5cdf2/niepces-camera-obscura-01.jpg",
+                    "srcSet": "/static/d40b5eff60152eada7bbbc6c03f5c8a8/a8510/niepces-camera-obscura-01.jpg 185w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/99090/niepces-camera-obscura-01.jpg 370w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/5cdf2/niepces-camera-obscura-01.jpg 740w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/1f62b/niepces-camera-obscura-01.jpg 1480w",
+                    "sizes": "(min-width: 740px) 740px, 100vw"
+                  },
+                  "sources": [
+                    {
+                      "srcSet": "/static/d40b5eff60152eada7bbbc6c03f5c8a8/b09fa/niepces-camera-obscura-01.webp 185w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/407fa/niepces-camera-obscura-01.webp 370w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/a550a/niepces-camera-obscura-01.webp 740w,\n/static/d40b5eff60152eada7bbbc6c03f5c8a8/63a41/niepces-camera-obscura-01.webp 1480w",
+                      "type": "image/webp",
+                      "sizes": "(min-width: 740px) 740px, 100vw"
+                    }
+                  ]
+                },
+                "width": 740,
+                "height": 411
               }
             }
-          },
-          "description": "In 2008 I used the camera obscura as it was used by Nicéphore Niépce in 1826 to create an Aperture and iPhoto replacement icon.\nNicéphore Niépce made it first possible to preserve an image taken with a camera obscura in 1826 or 1827 by using a special mixture of bitumen on a glass or metal plate, naming it Heliography. This first preserved image 'View from the Window at Le Gras' is the one you can see in the iPhoto icon.\n",
-          "links": [
-            {
-              "title": "Info",
-              "type": null,
-              "url": "https://kremalicious.com/niepces-camera-obscura-and-the-history-of-the-first-photograph/"
-            }
-          ],
-          "techstack": ["Photoshop"]
+          }
         }
       }
     ]
-  }
+  },
+  "projectImageFiles": {
+    "edges": [
+      {
+        "node": {
+          "name": "repos"
+        }
+      },
+      {
+        "node": {
+          "name": "meta"
+        }
+      },
+      {
+        "node": {
+          "name": "resume"
+        }
+      },
+      {
+        "node": {
+          "name": "chartmogul-05"
+        }
+      },
+      {
+        "node": {
+          "name": "ezeep-06"
+        }
+      },
+      {
+        "node": {
+          "name": "ezeep-05"
+        }
+      },
+      {
+        "node": {
+          "name": "ipixelpad-01"
+        }
+      },
+      {
+        "node": {
+          "name": "projects"
+        }
+      },
+      {
+        "node": {
+          "name": "allinnia-02"
+        }
+      },
+      {
+        "node": {
+          "name": "ezeep-03"
+        }
+      },
+      {
+        "node": {
+          "name": "ipdb-04"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-commons-02"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-commons-04"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-ipfs-02"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-v1-06"
+        }
+      },
+      {
+        "node": {
+          "name": "allinnia-03"
+        }
+      },
+      {
+        "node": {
+          "name": "ezeep-07"
+        }
+      },
+      {
+        "node": {
+          "name": "unihalle-03"
+        }
+      },
+      {
+        "node": {
+          "name": "apertureloupe-01"
+        }
+      },
+      {
+        "node": {
+          "name": "ipdb-01"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-commons-03"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-ipfs-01"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-v1-04"
+        }
+      },
+      {
+        "node": {
+          "name": "coffeecup-01"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-v1-03"
+        }
+      },
+      {
+        "node": {
+          "name": "bigchaindb-02"
+        }
+      },
+      {
+        "node": {
+          "name": "ezeep-04"
+        }
+      },
+      {
+        "node": {
+          "name": "ipdb-03"
+        }
+      },
+      {
+        "node": {
+          "name": "mrreader-01"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-commons-01"
+        }
+      },
+      {
+        "node": {
+          "name": "unihalle-02"
+        }
+      },
+      {
+        "node": {
+          "name": "chartmogul-02"
+        }
+      },
+      {
+        "node": {
+          "name": "mrreader-02"
+        }
+      },
+      {
+        "node": {
+          "name": "chartmogul-03"
+        }
+      },
+      {
+        "node": {
+          "name": "ezeep-02"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-v1-02"
+        }
+      },
+      {
+        "node": {
+          "name": "bigchaindb-05"
+        }
+      },
+      {
+        "node": {
+          "name": "ipdb-02"
+        }
+      },
+      {
+        "node": {
+          "name": "outofwhaleoil-01"
+        }
+      },
+      {
+        "node": {
+          "name": "outofwhaleoil-02"
+        }
+      },
+      {
+        "node": {
+          "name": "9984-02"
+        }
+      },
+      {
+        "node": {
+          "name": "bigchaindb-03"
+        }
+      },
+      {
+        "node": {
+          "name": "ezeep-08"
+        }
+      },
+      {
+        "node": {
+          "name": "niepces-camera-obscura-01"
+        }
+      },
+      {
+        "node": {
+          "name": "niepces-camera-obscura-02"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-v1-01"
+        }
+      },
+      {
+        "node": {
+          "name": "unihalle-01"
+        }
+      },
+      {
+        "node": {
+          "name": "adiumeetie-01"
+        }
+      },
+      {
+        "node": {
+          "name": "outofwhaleoil-03"
+        }
+      },
+      {
+        "node": {
+          "name": "ezeep-01"
+        }
+      },
+      {
+        "node": {
+          "name": "chartmogul-01"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-commons-05"
+        }
+      },
+      {
+        "node": {
+          "name": "9984-01"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-v1-05"
+        }
+      },
+      {
+        "node": {
+          "name": "bigchaindb-04"
+        }
+      },
+      {
+        "node": {
+          "name": "chartmogul-04"
+        }
+      },
+      {
+        "node": {
+          "name": "oceanprotocol-v1-07"
+        }
+      },
+      {
+        "node": {
+          "name": "sharethemeal-01"
+        }
+      },
+      {
+        "node": {
+          "name": "mrreader-03"
+        }
+      },
+      {
+        "node": {
+          "name": "projectpurple-01"
+        }
+      },
+      {
+        "node": {
+          "name": "bigchaindb-01"
+        }
+      },
+      {
+        "node": {
+          "name": "biv-01"
+        }
+      },
+      {
+        "node": {
+          "name": "allinnia-01"
+        }
+      },
+      {
+        "node": {
+          "name": "favicon"
+        }
+      },
+      {
+        "node": {
+          "name": "github-header"
+        }
+      },
+      {
+        "node": {
+          "name": "twitter-card"
+        }
+      },
+      {
+        "node": {
+          "name": "index"
+        }
+      },
+      {
+        "node": {
+          "name": "logo"
+        }
+      },
+      {
+        "node": {
+          "name": "avatar"
+        }
+      }
+    ]
+  },
+  "extensions": {}
 }
diff --git a/tests/__fixtures__/resume.json b/tests/__fixtures__/resume.json
index 12b5acd..a38dfd3 100644
--- a/tests/__fixtures__/resume.json
+++ b/tests/__fixtures__/resume.json
@@ -5,15 +5,24 @@
       "label": "Designer & Developer",
       "picture": {
         "childImageSharp": {
-          "fixed": {
-            "aspectRatio": 1,
+          "gatsbyImageData": {
+            "layout": "fixed",
+            "images": {
+              "fallback": {
+                "src": "/static/b45f45aa8d98d4e4019a242d38f2f248/68974/avatar.jpg",
+                "srcSet": "/static/b45f45aa8d98d4e4019a242d38f2f248/68974/avatar.jpg 256w,\n/static/b45f45aa8d98d4e4019a242d38f2f248/3c367/avatar.jpg 512w",
+                "sizes": "256px"
+              },
+              "sources": [
+                {
+                  "srcSet": "/static/b45f45aa8d98d4e4019a242d38f2f248/22bfc/avatar.webp 256w,\n/static/b45f45aa8d98d4e4019a242d38f2f248/d689f/avatar.webp 512w",
+                  "type": "image/webp",
+                  "sizes": "256px"
+                }
+              ]
+            },
             "width": 256,
-            "height": 256,
-            "src": "/static/b45f45aa8d98d4e4019a242d38f2f248/c296b/avatar.jpg",
-            "srcSet": "/static/b45f45aa8d98d4e4019a242d38f2f248/c296b/avatar.jpg 1x,\n/static/b45f45aa8d98d4e4019a242d38f2f248/28b3a/avatar.jpg 1.5x,\n/static/b45f45aa8d98d4e4019a242d38f2f248/72cad/avatar.jpg 2x",
-            "srcWebp": "/static/b45f45aa8d98d4e4019a242d38f2f248/59c88/avatar.webp",
-            "srcSetWebp": "/static/b45f45aa8d98d4e4019a242d38f2f248/59c88/avatar.webp 1x,\n/static/b45f45aa8d98d4e4019a242d38f2f248/bd640/avatar.webp 1.5x,\n/static/b45f45aa8d98d4e4019a242d38f2f248/b957b/avatar.webp 2x",
-            "originalName": "avatar.jpg"
+            "height": 256
           }
         }
       },
@@ -35,16 +44,6 @@
           "network": "GitHub",
           "url": "https://github.com/kremalicious",
           "username": "kremalicious"
-        },
-        {
-          "network": "Dribbble",
-          "url": "https://dribbble.com/kremalicious",
-          "username": "kremalicious"
-        },
-        {
-          "network": "Keybase",
-          "url": "https://keybase.io/kremalicious",
-          "username": "kremalicious"
         }
       ],
       "location": {
@@ -155,8 +154,7 @@
         "website": "https://oceanprotocol.com",
         "startDate": "2017-01-01",
         "endDate": null,
-        "summary": "Leading the UI design & development of Ocean Protocol's user interfaces, iterating on a components-based UI design system spanning all of Ocean Protocol's web properties. \n\nConceptualize, execute and iterate on the creative and visual direction of the Ocean Protocol brand.\n\nAs a core developer leading the execution of [multiple user interfaces](/oceanprotocol) and core components.",
-        "highlights": ["Started the company"]
+        "summary": "Co-Founded the Ocean Protocol project and as a core developer leading the execution of [multiple user interfaces](/oceanprotocol) and core components.\n\nIn general, leading the UI design & development of Ocean Protocol's user interfaces, iterating on a components-based UI design system spanning all of Ocean Protocol's web properties. This also includes the conceptualization, execution and iteration of the creative and visual direction of the Ocean Protocol visual brand."
       },
       {
         "company": "BigchainDB GmbH",
@@ -164,8 +162,7 @@
         "website": "https://bigchaindb.com",
         "startDate": "2016-12-01",
         "endDate": "2018-12-31",
-        "summary": "Leading the UI design & development of all BigchainDB web properties. I created the initial BigchainDB brand and further conceptualized, executed and iterated on the creative and visual direction of BigchainDB. This included creating and iterating on a components-based UI design system for all of [BigchainDB's user interfaces](/bigchaindb).",
-        "highlights": ["Started the company"]
+        "summary": "Leading the UI design & development of all BigchainDB web properties. I created the initial BigchainDB brand and further conceptualized, executed and iterated on the creative and visual direction of BigchainDB. This included creating and iterating on a components-based UI design system for all of [BigchainDB's user interfaces](/bigchaindb)."
       },
       {
         "company": "ascribe GmbH",
@@ -173,8 +170,7 @@
         "website": "https://ascribe.io",
         "startDate": "2016-01-01",
         "endDate": "2017-12-31",
-        "summary": "Description...",
-        "highlights": ["Started the company"]
+        "summary": "Leading the technical architecture of ascribe's web presence, and maintaining the front-end of the product."
       },
       {
         "company": "ChartMogul Ltd.",
@@ -182,8 +178,7 @@
         "website": "https://chartmogul.com",
         "startDate": "2015-07-15",
         "endDate": "2017-02-01",
-        "summary": "Co-designing and leading the UI design & development of various [ChartMogul web properties](/chartmogul). This included the creation of a components-based UI design system and implementing it across all web touch points.\n\nBesides designing and implementing new features, I maintained the front-end of the ChartMogul application and implemented the UI design system by refactoring most of its front-end codebase.",
-        "highlights": ["Started the company"]
+        "summary": "Co-designing and leading the UI design & development of various [ChartMogul web properties](/chartmogul), helping the company to position itself as a market leader. This included the creation of a components-based UI design system and implementing it across all web touch points.\n\nBesides designing and implementing new features, I maintained the front-end of the ChartMogul application and implemented the UI design system by refactoring most of its front-end codebase."
       },
       {
         "company": "UN World Food Programme/ShareTheMeal",
@@ -191,8 +186,7 @@
         "website": "https://sharethemeal.org",
         "startDate": "2014-10-01",
         "endDate": "2015-06-01",
-        "summary": "[app and website](/sharethemeal)",
-        "highlights": ["Started the company"]
+        "summary": "Leading the creation of the [website for ShareTheMeal](/sharethemeal) and assisting in building and consulting for the iOS and Android app."
       },
       {
         "company": "ezeep GmbH",
@@ -200,8 +194,7 @@
         "website": "https://ezeep.com",
         "startDate": "2012-01-01",
         "endDate": "2014-09-01",
-        "summary": "Creating an unprecedented, market-leading & award-winning user experience around printing based on the principles of emotional design way ahead of all competitors.\n\nThis included defining the product based on user & market research in an iterative process and designing & building [ezeep’s numerous touch points](/ezeep), like the web app, web site, desktop apps for Windows & Mac OS X and apps for iOS & Android.\n\nOn top of that I created the corporate identity and a consistent visual branding, including the logo.",
-        "highlights": null
+        "summary": "Creating an unprecedented, market-leading & award-winning user experience around printing based on the principles of emotional design way ahead of all competitors.\n\nThis included defining the product based on user & market research in an iterative process and designing & building [ezeep’s numerous touch points](/ezeep), like the web app, web site, desktop apps for Windows & Mac OS X and apps for iOS & Android.\n\nOn top of that I created the corporate identity and a consistent visual branding, including the logo."
       },
       {
         "company": "Martin Luther University Halle-Wittenberg",
@@ -209,8 +202,7 @@
         "website": null,
         "startDate": "2009-02-01",
         "endDate": "2012-01-01",
-        "summary": "Conceptualizing & implementing [numerous in-house and public facing interfaces](/unihalle) for thousands of students and staff. Additionally, conceptualizing, creating and maintaining the blog network & community for all students & staff.",
-        "highlights": null
+        "summary": "Conceptualizing & implementing [numerous in-house and public facing interfaces](/unihalle) for thousands of students and staff. Additionally, conceptualizing, creating and maintaining the blog network & community for all students & staff."
       },
       {
         "company": "Harz University of Applied Sciences",
@@ -218,8 +210,7 @@
         "website": null,
         "startDate": "2011-02-01",
         "endDate": "2011-05-01",
-        "summary": "Conceptualizing a web design & development university seminar and building a [responsive & fluid grid framework](https://github.com/kremalicious/hsresponsive) with a basic HTML/CSS template for students of Media Informatics at the Harz University of Applied Sciences to learn and use.",
-        "highlights": null
+        "summary": "Conceptualizing a web design & development university seminar and building a [responsive & fluid grid framework](https://github.com/kremalicious/hsresponsive) with a basic HTML/CSS template for students of Media Informatics at the Harz University of Applied Sciences to learn and use."
       },
       {
         "company": "Martin Luther University Halle-Wittenberg",
@@ -227,8 +218,7 @@
         "website": null,
         "startDate": "2011-02-01",
         "endDate": "2011-05-01",
-        "summary": "Conceptualizing a WordPress-based web design university seminar and building a minimal starting theme for students of media & communication science at the MLU Halle-Wittenberg to learn and use.",
-        "highlights": null
+        "summary": "Conceptualizing a WordPress-based web design university seminar and building a minimal starting theme for students of media & communication science at the MLU Halle-Wittenberg to learn and use."
       },
       {
         "company": "Shortmoves",
@@ -236,8 +226,7 @@
         "website": null,
         "startDate": "2009-01-01",
         "endDate": "2010-01-01",
-        "summary": "Creating & managing the web presence and marketing material of the International Shortfilm Festival Shortmoves in Halle (Saale), Germany.",
-        "highlights": null
+        "summary": "Creating & managing the web presence and marketing material of the International Shortfilm Festival Shortmoves in Halle (Saale), Germany."
       },
       {
         "company": "Agentur Ahron",
@@ -245,8 +234,7 @@
         "website": null,
         "startDate": "2005-01-01",
         "endDate": "2008-12-31",
-        "summary": "Co-founded and built up a photo agency from the ground up and worked as a photographer ranging from journalistic works for news agencies & newspapers to photographic work for private clients.",
-        "highlights": null
+        "summary": "Co-founded and built up a photo agency from the ground up and worked as a photographer ranging from journalistic works for news agencies & newspapers to photographic work for private clients."
       },
       {
         "company": "Freelance",
@@ -254,8 +242,7 @@
         "website": null,
         "startDate": "2004-01-01",
         "endDate": null,
-        "summary": "Numerous projects and clients as a UI/UX Designer, Front End Developer, Icon Designer & Photographer.",
-        "highlights": null
+        "summary": "Numerous projects and clients as a UI/UX Designer, Front End Developer, Icon Designer & Photographer."
       }
     ],
     "awards": [
@@ -272,5 +259,6 @@
         "summary": null
       }
     ]
-  }
+  },
+  "extensions": {}
 }