An example of a Bio component that can be used wherever

bio.js

import React from 'react'
import { StaticQuery, graphql } from 'gatsby'

export default function Bio() {
  return (
    <StaticQuery
      query={graphql`
        {
          file({ relativePath: { regex: "/bio.md/" }}) {
            childMarkdownRemark {
              frontmatter {
                name
              }
              html
            }
          }
        }
      `}
      render={data => (
        <div className="bio">
          <h1 className="bio-name">{data.file.childMarkdownRemark.frontmatter.name}</h1>
          <div className="bio-description" dangerouslySetInnerHTML={{ __html: data.file.childMarkdownRemark.html }} />
        </div>
      )}
    />
  )
}