text: import * as React from "react"
  import { graphql } from "gatsby"
  import Layout from "../components/layout"
  import Seo from "../components/seo"
  import ProjectItem from "../components/project_content"
  
  
  
  const ProjectPage = ({ data, location }) => {
      const siteTitle = data.site.siteMetadata?.title || `Title`
      const Projectposts = data.projects.nodes
    
      if (Projectposts.length === 0) {
        return (
          <Layout location={location} title={siteTitle}>
            <Seo title="Selected work" />
        
            <p>
              No blog posts found. Add markdown posts to "content/blog" (or the
              directory you specified for the "gatsby-source-filesystem" plugin in
              gatsby-config.js).
            </p>
          </Layout>
        )
      }
    
      return (
        
        <Layout location={location} title={siteTitle}>
          <Seo title="Selected projects & apps" />
    
          <section  className="section-grid nobottom">
              <div className="title-container">
              <h1 className="titlesans">
                  Selected <em>Projects & Apps</em>
              </h1>
  
  
              </div>
            
          </section>
          
            {Projectposts.map(wpost => {
              const title = wpost.frontmatter.title || wpost.fields.slug
    
              return (
                    <ProjectItem slug={wpost.fields.slug} 
                                  role={wpost.frontmatter.role}
                                  project={wpost.frontmatter.project}
                                  status={wpost.frontmatter.status}
                                  html={wpost.html}
                                  img={wpost.frontmatter.featuredImage}>
                              
                    </ProjectItem>
              )
            })}
       
        </Layout>
      
      )
    }
    
    export default ProjectPage
    
    export const pageQuery = graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
        projects: allMarkdownRemark(filter: {fileAbsolutePath: {regex: "/(projects)/"}} sort: { fields: [frontmatter___date], order: DESC }
          limit: 2) {
          nodes {
            excerpt
            fields {
              slug
            }
            frontmatter {
              date(formatString: "MMMM DD, YYYY")
              role
              status
              project
              description
              featuredImage {
                childImageSharp {
                  gatsbyImageData
    
                } 
              }
            }
            html
          }
        }
      }
    `