text: import React from "react"
  import {graphql} from "gatsby"
  import {
    Button,
    HeaderBack,
    HeadingXL,
    Image,
    Layout,
    SEO,
    TextBody,
  } from "../components"
  
  export default function About({data}) {
    return (
      <>
        <SEO title="About" />
        <HeaderBack />
        <Layout>
          <HeadingXL>About</HeadingXL>
          <Image fluid={data.RandomPhoto.childImageSharp.fluid} />
          <TextBody>
            Simona Cotin is a web developer with a passion for teaching. She
            spends most of her time tinkering with JavaScript in the cloud and
            sharing her experience with other developers at community events like
            meetups and conferences or online. As a Cloud Developer Advocate,
            Simona engages with the web community to help create a great developer
            experience with Azure. She loves shipping code to production and has
            built network data analytics platforms using Angular, Typescript,
            React, and Node.js.
          </TextBody>
          <Button href="mailto:your&#64;email.com">Get in touch</Button>
        </Layout>
      </>
    )
  }
  
  export const data = graphql`
    query {
      RandomPhoto: file(relativePath: {eq: "assets/images/RandomPhoto.jpg"}) {
        childImageSharp {
          fluid(maxWidth: 1400) {
            ...GatsbyImageSharpFluid_withWebp
          }
        }
      }
    }
  `
  