text: import React from 'react';
  import { graphql } from 'gatsby';
  import PropTypes from 'prop-types';
  import { Layout, Hero, About, Internships, Featured, Research, Contact } from '@components';
  import styled from 'styled-components';
  import { Main } from '@styles';
  
  const StyledMainContainer = styled(Main)`
    counter-reset: section;
  `;
  
  const IndexPage = ({ location, data }) => (
    <Layout location={location}>
      <StyledMainContainer>
        <Hero data={data.hero.edges} />
        <About data={data.about.edges} />
        <Featured data={data.featured.edges} />
        <Internships data={data.internships.edges} />
        <Research data={data.research.edges} />
        <Contact data={data.contact.edges} />
      </StyledMainContainer>
    </Layout>
  );
  
  IndexPage.propTypes = {
    location: PropTypes.object.isRequired,
    data: PropTypes.object.isRequired,
  };
  
  export default IndexPage;
  
  export const pageQuery = graphql`
    {
      hero: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/hero/" } }) {
        edges {
          node {
            frontmatter {
              title
              name
              subtitle
              contactText
            }
            html
          }
        }
      }
      about: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/about/" } }) {
        edges {
          node {
            frontmatter {
              title
              avatar {
                childImageSharp {
                  fluid(maxWidth: 700, quality: 90, traceSVG: { color: "#64ffda" }) {
                    ...GatsbyImageSharpFluid_withWebp_tracedSVG
                  }
                }
              }
              skills
            }
            html
          }
        }
      }
      internships: allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/internships/" } }
        sort: { fields: [frontmatter___date], order: DESC }
      ) {
        edges {
          node {
            frontmatter {
              title
              company
              location
              range
              url
            }
            html
          }
        }
      }
      featured: allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/featured/" } }
        sort: { fields: [frontmatter___date], order: DESC }
      ) {
        edges {
          node {
            frontmatter {
              title
              cover {
                childImageSharp {
                  fluid(maxWidth: 700, quality: 90, traceSVG: { color: "#64ffda" }) {
                    ...GatsbyImageSharpFluid_withWebp_tracedSVG
                  }
                }
              }
              tech
              github
              external
              show
            }
            html
          }
        }
      }
      research: allMarkdownRemark(
        filter: { fileAbsolutePath: { regex: "/research/" } }
        sort: { fields: [frontmatter___date], order: DESC }
      ) {
        edges {
          node {
            frontmatter {
              title
              tech
              github
              external
              show
            }
            html
          }
        }
      }
      contact: allMarkdownRemark(filter: { fileAbsolutePath: { regex: "/contact/" } }) {
        edges {
          node {
            frontmatter {
              title
            }
            html
          }
        }
      }
    }
  `;
  