text: import { graphql, Link } from "gatsby"
  import React from "react"
  import Layout from "../components/Layout"
  import * as styles from "../styles/home.module.css"
  import Img from "gatsby-image"
  
  export default function Home({ data }) {
    console.log(data)
    // const { title, description } = data.site.siteMetadata
    return (
      <Layout>
        <section className={styles.header}>
          <div>
            <h2>Design</h2>
            <h2>Develop & Deploy</h2>
            <p>Ux designer & web developer based in Minnesota</p>
            <Link to="/projects" className={styles.btn}>
              My Portfolio Projects
            </Link>
          </div>
          <Img fluid={data.file.childImageSharp.fluid} />
        </section>
      </Layout>
    )
  }
  
  export const query = graphql`
    query Banner {
      file(relativePath: { eq: "banner.png" }) {
        childImageSharp {
          fluid {
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  `
  