/** @jsx jsx */
import { Link } from 'gatsby'
import { jsx, Flex, Box, Heading } from 'theme-ui'

export default () => {
  return (
      <Flex as='nav' sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
          <div p={2} sx={{marginLeft: '5%', marginRight: '5%'}}>
              <Link to='/'>
                  <Heading as='h3'>home</Heading>
              </Link>
          </div>
          <div p={2} sx={{marginLeft: '5%', marginRight: '5%'}}>
              <Link to='/portfolio'>
                  <Heading as='h3'>portfolio</Heading>
              </Link>
          </div>
          <div p={2} sx={{marginLeft: '5%', marginRight: '5%'}}>
              <Link to='/about'>
                  <Heading as='h3'>about</Heading>
              </Link>
          </div>
    </Flex>
  )
}