{"size": 1069, "ext": "js", "max_stars_repo_path": "src/pages/projects.js", "max_stars_repo_name": "devil-geek/car-oc", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/projects.js", "max_issues_repo_name": "devil-geek/car-oc", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/projects.js", "max_forks_repo_name": "devil-geek/car-oc", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.8163265306, "max_line_length": 64, "alphanum_fraction": 0.5416276894}
import React from 'react';
import { graphql } from 'gatsby';
import Layout from '../components/layout';
import SEO from '../components/seo';
import Header from '../components/header';
import ProjectCard from '../components/projectCard';

const ProjectsPage = ({ data }) => (
  <Layout>
    <SEO
      title="Home"
      keywords={[`gatsby`, `application`, `react`, `portfolio`]}
    />
    <Header title={'Projects'} text={'Some of my work'} />

    <div className="project-list">
      {data.allProjectsJson.edges.map(project => (
        <ProjectCard key={project.node.id} project={project} />
      ))}
    </div>
  </Layout>
);

export default ProjectsPage;

export const projectsQuery = graphql`
  query {
    allProjectsJson {
      edges {
        node {
          id
          title
          description
          url
          tech
          company
          thumbnailImage {
            childImageSharp {
              fluid(maxWidth: 1920) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  }
`;
