diff --git a/assets/assets.sketch b/assets/assets.sketch
index 5106ded..42a7d23 100644
Binary files a/assets/assets.sketch and b/assets/assets.sketch differ
diff --git a/gatsby-browser.js b/gatsby-browser.js
index 10143bc..fffb184 100644
--- a/gatsby-browser.js
+++ b/gatsby-browser.js
@@ -4,20 +4,24 @@
  * @see https://www.gatsbyjs.org/docs/browser-apis/
  */
 
+require('./src/styles/app.scss') // main styling
+
+const { activeEnv, isProd } = require('./utils/environment')
 const printCorporateMessage = require('./gatsby/browser/corporateMessage')
 const setDefaultTime = require('./gatsby/browser/defaultTime')
 
-require('./src/styles/app.scss') // main styling
-
 // module.exports.wrapPageElement = require('./gatsby/wrapPageElement')
 module.exports.wrapRootElement = require('./gatsby/wrapRootElement')
 
 module.exports.onClientEntry = () => {
   setDefaultTime()
+  console.info(`Environment: %c${activeEnv}`, 'color: blue;')
 }
 
 module.exports.onInitialClientRender = () => {
-  printCorporateMessage()
+  if (isProd) {
+    printCorporateMessage()
+  }
 }
 
 module.exports.onServiceWorkerUpdateReady = () => {
diff --git a/gatsby/node/onCreateNode.js b/gatsby/node/onCreateNode.js
index 0778959..d478c93 100644
--- a/gatsby/node/onCreateNode.js
+++ b/gatsby/node/onCreateNode.js
@@ -15,7 +15,6 @@ module.exports = async ({ node, getNode, actions }) => {
       console.log()
       console.log(dim(`Creating ${source} node`))
       console.log(bold(fileNode.relativePath))
-      console.log(node.frontmatter)
       console.log(fileNode)
     }
 
@@ -23,6 +22,7 @@ module.exports = async ({ node, getNode, actions }) => {
       return // skip this unpublished stuff only in production
     }
 
+    let parent = null // set parent if the source is a children of another source
     let slug = node.frontmatter.slug || undefined
     if (!slug) {
       slug = createFilePath({ node, getNode })
@@ -46,20 +46,42 @@ module.exports = async ({ node, getNode, actions }) => {
         }
         node.frontmatter = { ...defaults, ...node.frontmatter }
         break
+
       case 'writings':
         defaults = {
           ...defaults,
           categories: [],
           tags: [],
         }
+        break
+
+      case 'education':
+        parent = 'about'
+        defaults = {
+          ...defaults,
+          qualifications: [],
+        }
         node.frontmatter = { ...defaults, ...node.frontmatter }
         break
+
+      case 'experience':
+        parent = 'about'
+        defaults = {
+          ...defaults,
+          responsibilities: [],
+        }
+        node.frontmatter = { ...defaults, ...node.frontmatter }
+        break
+    }
+
+    if (isDev) {
+      console.log(node.frontmatter)
     }
 
     createNodeField({
       node,
       name: 'slug',
-      value: `/${source}/${slug}`,
+      value: parent ? `/${parent}/${source}/${slug}` : `/${source}/${slug}`,
     })
     createNodeField({
       node,
diff --git a/src/components/timeline/Item.jsx b/src/components/timeline/Item.jsx
new file mode 100644
index 0000000..3f56d24
--- /dev/null
+++ b/src/components/timeline/Item.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link as NativeLink } from 'gatsby'
+
+import Time from '../Time'
+
+const Item = ({ title, description, started, ended, link }) => (
+  <div className="item">
+    <div className="timespan">
+      <Time date={started} /> – <Time date={ended} />
+    </div>
+    <div className="title">
+      <NativeLink to={link}>{title}</NativeLink>
+    </div>
+    <div className="desc">{description}</div>
+  </div>
+)
+
+export default Item
diff --git a/src/components/timeline/Section.jsx b/src/components/timeline/Section.jsx
new file mode 100644
index 0000000..284cd4f
--- /dev/null
+++ b/src/components/timeline/Section.jsx
@@ -0,0 +1,22 @@
+import React from 'react'
+
+import Item from './Item'
+import Icon from '../Icon'
+
+const Section = ({ name, icon, data }) => {
+  return (
+    <section>
+      <header>
+        <Icon name={icon} />
+        <h2 className="title">{name}</h2>
+      </header>
+      <div className="items">
+        {data.map((props, index) => (
+          <Item key={index} {...props} />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default Section
diff --git a/src/components/timeline/Timeline.jsx b/src/components/timeline/Timeline.jsx
new file mode 100644
index 0000000..7692257
--- /dev/null
+++ b/src/components/timeline/Timeline.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+
+import Section from './Section'
+
+const Timeline = ({ data }) => {
+  return (
+    <div className="container container--small">
+      <div id="timeline">
+        {data.map((props, index) => (
+          <Section key={index} {...props} />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default Timeline
diff --git a/src/images/icons/book.svg b/src/images/icons/book.svg
new file mode 100644
index 0000000..b317a65
--- /dev/null
+++ b/src/images/icons/book.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m460.6 512v-430.08h-10.24c-8.533361 0-15.786639-2.9866394-21.76-8.96s-8.96-13.2266394-8.96-21.76 2.986639-15.7866394 8.96-21.76 13.226639-8.96 21.76-8.96h10.24v-20.48h-358.4c-14.0800737 0-26.1332828 5.01325824-36.1599959 15.0400205-10.0267213 10.0266803-15.0400041 22.0798976-15.0400041 36.1599795v399.36c0 17.066754 5.9732738 31.573271 17.92 43.52 11.9467295 11.946726 26.453246 17.92 43.52 17.92zm-20.48-409.6v389.12h-286.72v-389.12h81.92v225.28l61.44-61.44 61.44 61.44v-225.28zm-307.2 389.12h-20.48c-11.520057 0-21.2266271-3.946627-29.1200041-11.839996-7.8933688-7.893377-11.8399959-17.599947-11.8399959-29.120004v-358.4c4.2666885 3.4133606 8.9599754 5.9733606 14.08 7.68 5.1200246 1.706639 10.6666394 2.56 16.64 2.56h30.72zm-30.72-471.04h307.2s-1.706639 3.0932992-5.12 9.2799795-5.12 13.1199795-5.12 20.8000615c0 7.68 1.706639 14.8266188 5.12 21.4399385 3.413361 6.6134016 5.12 9.9200205 5.12 9.9200205h-307.2c-8.533377 0-15.7866394-2.9866394-21.76-8.96s-8.96-13.2266394-8.96-21.76 2.9866394-15.7866394 8.96-21.76 13.226623-8.96 21.76-8.96zm153.6 81.92h81.92v176.000041l-40.96-40.96-40.96 40.96z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/images/icons/briefcase.svg b/src/images/icons/briefcase.svg
new file mode 100644
index 0000000..9590788
--- /dev/null
+++ b/src/images/icons/briefcase.svg
@@ -0,0 +1 @@
+<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><path d="m512 98.7692308v393.8461542h-512v-393.8461542h157.538462v-36.923077-2.4615384c0-26.2565416 11.897304-39.3846154 35.692307-39.3846154h121.846154c11.487232 0 20.923077 3.6923077 28.307692 11.0769231 7.384616 7.3846154 11.076923 16.8204603 11.076923 28.3076923v2.4615384 36.923077zm-334.769231 0h157.538462v-36.923077c0-14.7693095-6.974307-22.1538461-20.923077-22.1538461h-119.384616c-11.487232 0-17.230769 7.3845366-17.230769 22.1538461zm315.076923 374.1538462v-245.692308h-472.6153843v245.692308zm0-265.384615v-89.076924h-472.6153843v89.076924z" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/src/pages/about/education.jsx b/src/pages/about/education.jsx
new file mode 100644
index 0000000..9ec67cb
--- /dev/null
+++ b/src/pages/about/education.jsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+import { HistoryConsumer } from '../../provider/history'
+import Head from '../../components/Head'
+import Timeline from '../../components/timeline/Timeline'
+
+class Page extends React.Component {
+  state = {
+    pageName: 'Education',
+  }
+
+  componentDidMount() {
+    const { breadcrumb } = this.props.pageContext
+
+    this.props.history.update({
+      location: breadcrumb.location,
+      crumbLabel: this.state.pageName,
+      crumbs: breadcrumb.crumbs,
+    })
+  }
+
+  render() {
+    const {
+      allMdx: { edges },
+    } = this.props.data
+
+    const timelineSection = edges.map(({ node: { frontmatter, fields, excerpt } }) => ({
+      title: frontmatter.title,
+      description: excerpt,
+      started: frontmatter.started,
+      ended: frontmatter.ended,
+      link: fields.slug,
+    }))
+    const timelineData = [
+      {
+        name: 'Education',
+        icon: 'book',
+        data: timelineSection,
+      },
+    ]
+
+    return (
+      <>
+        <Head pageName={this.state.pageName} bodyClasses="home" />
+
+        <h1 className="headline">{this.state.pageName}</h1>
+
+        <Timeline data={timelineData} />
+      </>
+    )
+  }
+}
+
+export default React.forwardRef((props, ref) => (
+  <HistoryConsumer>
+    {(history) => <Page {...props} ref={ref} history={history} />}
+  </HistoryConsumer>
+))
+
+export const query = graphql`
+  query EducationQuery {
+    allMdx(
+      filter: { fields: { source: { eq: "education" } } }
+      sort: { fields: [frontmatter___ended, frontmatter___started], order: DESC }
+    ) {
+      edges {
+        node {
+          frontmatter {
+            title
+            qualifications
+            started
+            ended
+          }
+          fields {
+            slug
+          }
+          excerpt
+        }
+      }
+    }
+  }
+`
diff --git a/src/pages/about/experience.jsx b/src/pages/about/experience.jsx
new file mode 100644
index 0000000..0f285ec
--- /dev/null
+++ b/src/pages/about/experience.jsx
@@ -0,0 +1,83 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+import { HistoryConsumer } from '../../provider/history'
+import Head from '../../components/Head'
+import Timeline from '../../components/timeline/Timeline'
+
+class Page extends React.Component {
+  state = {
+    pageName: 'Experience',
+  }
+
+  componentDidMount() {
+    const { breadcrumb } = this.props.pageContext
+
+    this.props.history.update({
+      location: breadcrumb.location,
+      crumbLabel: this.state.pageName,
+      crumbs: breadcrumb.crumbs,
+    })
+  }
+
+  render() {
+    const {
+      allMdx: { edges },
+    } = this.props.data
+
+    const timelineSection = edges.map(({ node: { frontmatter, fields, excerpt } }) => ({
+      title: frontmatter.title,
+      description: excerpt,
+      started: frontmatter.started,
+      ended: frontmatter.ended,
+      link: fields.slug,
+    }))
+    const timelineData = [
+      {
+        name: 'Experience',
+        icon: 'briefcase',
+        data: timelineSection,
+      },
+    ]
+
+    return (
+      <>
+        <Head pageName={this.state.pageName} bodyClasses="home" />
+
+        <h1 className="headline">{this.state.pageName}</h1>
+
+        <Timeline data={timelineData} />
+      </>
+    )
+  }
+}
+
+export default React.forwardRef((props, ref) => (
+  <HistoryConsumer>
+    {(history) => <Page {...props} ref={ref} history={history} />}
+  </HistoryConsumer>
+))
+
+export const query = graphql`
+  query ExperienceQuery {
+    allMdx(
+      filter: { fields: { source: { eq: "experience" } } }
+      sort: { fields: [frontmatter___ended, frontmatter___started], order: DESC }
+    ) {
+      edges {
+        node {
+          frontmatter {
+            title
+            position
+            started
+            ended
+          }
+          fields {
+            slug
+          }
+          excerpt
+        }
+      }
+    }
+  }
+`
diff --git a/src/styles/app.scss b/src/styles/app.scss
index f001626..441cde9 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -59,6 +59,7 @@
 @import "components/separator";
 @import "components/status";
 @import "components/theme-switch";
+@import "components/timeline";
 @import "components/toast";
 @import "components/tooltip";
 
diff --git a/src/styles/components/_timeline.scss b/src/styles/components/_timeline.scss
new file mode 100644
index 0000000..501fdef
--- /dev/null
+++ b/src/styles/components/_timeline.scss
@@ -0,0 +1,102 @@
+#timeline {
+  @include breakpoint-up(md) {
+    margin-bottom: 80px;
+  }
+
+  header {
+    display: grid;
+    grid-template-columns: 30px 1fr;
+    align-items: center;
+    margin-bottom: var(--spacing-lg);
+    column-gap: var(--spacing-lg);
+    user-select: none;
+
+    @include breakpoint-up(md) {
+      grid-template-columns: 50px 1fr;
+      margin-bottom: var(--spacing-xl);
+    }
+
+    .icon {
+      --icon-size: 100%;
+    }
+
+    .title {
+      font-size: var(--text-lg);
+      letter-spacing: var(--spacing-sm);
+      text-transform: uppercase;
+
+      @include breakpoint-up(md) {
+        font-size: var(--text-xxl);
+      }
+    }
+  }
+
+  .items {
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: 10px;
+      left: 15px;
+      width: 2px;
+      height: 110%;
+      background: var(--color-light);
+      background: linear-gradient(0deg, transparent 0%, var(--color-light) 30%);
+
+      @include breakpoint-up(md) {
+        left: 25px;
+        height: 130%;
+      }
+    }
+
+    .item {
+      position: relative;
+      margin-bottom: var(--spacing-xl);
+      padding-left: calc(30px + var(--spacing-lg));
+
+      @include breakpoint-up(md) {
+        padding-left: calc(50px + var(--spacing-lg));
+      }
+
+      &::before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 10px;
+        width: 12px;
+        height: 12px;
+        border: 2px solid var(--color-light);
+        border-radius: var(--border-radius-full);
+        background: var(--background-color-normal);
+        box-shadow: 0 0 0 8px var(--background-color-normal);
+
+        @include breakpoint-up(md) {
+          top: 4px;
+          left: 18px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      .timespan {
+        color: var(--color-06);
+      }
+
+      .title {
+        margin-top: var(--spacing-xxs);
+        margin-bottom: var(--spacing-xxs);
+        color: var(--color-primary);
+        font-size: var(--text-lg);
+
+        &:hover {
+          color: var(--color-primary-dark);
+        }
+
+        a {
+          display: block;
+        }
+      }
+    }
+  }
+}
diff --git a/src/templates/EducationSingle.jsx b/src/templates/EducationSingle.jsx
new file mode 100644
index 0000000..f79010f
--- /dev/null
+++ b/src/templates/EducationSingle.jsx
@@ -0,0 +1,127 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+import { HistoryConsumer } from '../provider/history'
+import Article from '../layouts/Article'
+import Head from '../components/Head'
+import DataType from '../components/DataType'
+import Time from '../components/Time'
+import { Link } from '../elements/Link'
+import Hero from '../components/Hero'
+import { stringTruncateMiddle } from '../utils/helper'
+
+class Page extends React.Component {
+  state = {
+    pageName: 'Education',
+  }
+
+  componentDidMount() {
+    const { breadcrumb } = this.props.pageContext
+
+    this.props.history.update({
+      location: breadcrumb.location,
+      crumbLabel: this.props.data.mdx.frontmatter.title,
+      crumbs: breadcrumb.crumbs,
+    })
+  }
+
+  render() {
+    const {
+      mdx: {
+        fields: { slug },
+        frontmatter: { tags, title, qualifications, institution, started, ended },
+        body,
+        excerpt,
+      },
+    } = this.props.data
+
+    const keywords =
+      tags?.length > 0 ? tags : qualifications?.length > 0 ? qualifications : null
+
+    return (
+      <>
+        <Head
+          pageTitle={title}
+          pageName={this.state.pageName}
+          pageDescription={excerpt}
+          pageKeywords={keywords}
+          bodyClasses="single"
+        />
+
+        <Hero size="medium">
+          <div className="container container--medium">
+            <div className="post-title">
+              <h1 itemProp="headline">{title}</h1>
+              <h2 itemProp="alternativeHeadline">{qualifications.join(' | ')}</h2>
+            </div>
+            <div className="post-info">
+              <ul>
+                <li>
+                  <span className="pre">Timespan:</span> <Time date={started} /> –{' '}
+                  <Time date={ended} />
+                </li>
+                <li>
+                  <span className="pre">Institution:</span> {institution.name}
+                </li>
+                <li>
+                  <span className="pre">Address:</span>{' '}
+                  <Link
+                    href={`https://maps.apple.com/?address=${encodeURIComponent(
+                      institution.location
+                    )}`}
+                  >
+                    {institution.location}
+                  </Link>
+                </li>
+                <li>
+                  <span className="pre">Website:</span>{' '}
+                  {institution.website ? (
+                    <Link
+                      href={institution.website}
+                      title={`Link to website: ${institution.website}`}
+                    >
+                      {stringTruncateMiddle(institution.website, 30)}
+                    </Link>
+                  ) : (
+                    <DataType tooltip="Not set" type="null"></DataType>
+                  )}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </Hero>
+
+        <Article slug={slug} mdx={body} />
+      </>
+    )
+  }
+}
+
+export default React.forwardRef((props, ref) => (
+  <HistoryConsumer>
+    {(history) => <Page {...props} ref={ref} history={history} />}
+  </HistoryConsumer>
+))
+
+export const query = graphql`
+  query($slug: String!) {
+    mdx(fields: { slug: { eq: $slug }, source: { eq: "education" } }) {
+      body
+      excerpt(pruneLength: 150)
+      fields {
+        slug
+      }
+      frontmatter {
+        title
+        started
+        ended
+        qualifications
+        institution {
+          name
+          location
+          website
+        }
+      }
+    }
+  }
+`
diff --git a/src/templates/ExperienceSingle.jsx b/src/templates/ExperienceSingle.jsx
new file mode 100644
index 0000000..6924b26
--- /dev/null
+++ b/src/templates/ExperienceSingle.jsx
@@ -0,0 +1,134 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+
+import { HistoryConsumer } from '../provider/history'
+import Article from '../layouts/Article'
+import Head from '../components/Head'
+import DataType from '../components/DataType'
+import Time from '../components/Time'
+import { Link } from '../elements/Link'
+import Hero from '../components/Hero'
+
+class Page extends React.Component {
+  state = {
+    pageName: 'Experience',
+  }
+
+  componentDidMount() {
+    const { breadcrumb } = this.props.pageContext
+
+    this.props.history.update({
+      location: breadcrumb.location,
+      crumbLabel: this.props.data.mdx.title,
+      crumbs: breadcrumb.crumbs,
+    })
+  }
+
+  render() {
+    const {
+      mdx: {
+        fields: { slug },
+        frontmatter: { tags, responsibilities, title, position, company, started, ended },
+        body,
+        excerpt,
+      },
+    } = this.props.data
+
+    const keywords =
+      tags?.length > 0 ? tags : responsibilities?.length > 0 ? responsibilities : null
+
+    return (
+      <>
+        <Head
+          pageTitle={title}
+          pageName={this.state.pageName}
+          pageDescription={excerpt}
+          pageKeywords={keywords}
+          bodyClasses="single"
+        />
+
+        <Hero size="medium">
+          <div className="container container--medium">
+            <div className="post-title">
+              <h1 itemProp="headline">{title}</h1>
+              <h2 itemProp="alternativeHeadline">{responsibilities.join(' | ')}</h2>
+            </div>
+            <div className="post-info">
+              <ul>
+                <li>
+                  <span className="pre">Timespan:</span> <Time date={started} /> –{' '}
+                  <Time date={ended} />
+                </li>
+                <li>
+                  <span className="pre">Company:</span> {company.name}
+                </li>
+                <li>
+                  <span className="pre">Position:</span> {position}
+                </li>
+                <li>
+                  <span className="pre">Address:</span>{' '}
+                  <Link
+                    href={`https://maps.apple.com/?address=${encodeURIComponent(
+                      company.address
+                    )}`}
+                  >
+                    {company.address}
+                  </Link>
+                </li>
+                <li>
+                  <span className="pre">Industry:</span> {company.industry}
+                </li>
+                <li>
+                  <span className="pre">Website:</span>{' '}
+                  {company.website ? (
+                    <Link
+                      href={company.website}
+                      title={`Link to website: ${company.website}`}
+                    >
+                      {company.website}
+                    </Link>
+                  ) : (
+                    <DataType tooltip="Not set" type="null"></DataType>
+                  )}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </Hero>
+
+        <Article slug={slug} mdx={body} />
+      </>
+    )
+  }
+}
+
+export default React.forwardRef((props, ref) => (
+  <HistoryConsumer>
+    {(history) => <Page {...props} ref={ref} history={history} />}
+  </HistoryConsumer>
+))
+
+export const query = graphql`
+  query($slug: String!) {
+    mdx(fields: { slug: { eq: $slug }, source: { eq: "experience" } }) {
+      body
+      excerpt(pruneLength: 150)
+      fields {
+        slug
+      }
+      frontmatter {
+        title
+        started
+        ended
+        position
+        responsibilities
+        company {
+          name
+          address
+          industry
+          website
+        }
+      }
+    }
+  }
+`
diff --git a/src/utils/helper.js b/src/utils/helper.js
index 53bf686..f8855a0 100644
--- a/src/utils/helper.js
+++ b/src/utils/helper.js
@@ -68,6 +68,28 @@ export function stringSlugify(text, separator) {
   return text
 }
 
+/**
+ * Truncate a string from the middle.
+ *
+ * @param {string} str string to truncate
+ * @param {number} maxLength string max length
+ * @param {string} separator set a separator
+ */
+export function stringTruncateMiddle(str, maxLength = 50, separator = '...') {
+  if (str.length < maxLength) {
+    return str
+  }
+
+  const length = str.length
+  const charsToShow = maxLength - separator.length
+  const frontChars = Math.ceil(charsToShow / 2)
+  const backChars = Math.floor(charsToShow / 2)
+
+  return str.substr(0, frontChars) + separator + str.substr(length - backChars)
+}
+
+// 100 - 50 = 50
+
 /**
  * Turn an array to an object by key/value.
  *