text: import React from "react"
  import Appbar from "../components/appbar"
  import { graphql } from "gatsby"
  import Card from "../components/card"
  import { Helmet } from "react-helmet"
  
  function Projects({ data }) {
    const projectList = data.allProjectsYaml.edges
  
    return (
      <div className="container-fluid" style={{ marginTop: "-2vh" }}>
        <Appbar />
        <Helmet>
          <meta charSet="utf-8" />
          <title>Projects | Josh</title>
        </Helmet>
        <div className="row">
          {projectList.map(({ node }) => {
            return (
              <Card
                cardTitle={node.title}
                cardSubtitle={node.subtitle}
                link={node.link}
                key={node.id}
              />
            )
          })}
        </div>
      </div>
    )
  }
  
  export default Projects
  
  export const query = graphql`
    {
      allProjectsYaml {
        edges {
          node {
            title
            subtitle
            link
            id
          }
        }
      }
    }
  `
  