{"size": 2405, "ext": "js", "max_stars_repo_path": "src/pages/projects/index.js", "max_stars_repo_name": "popoidev/webwarrior", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/projects/index.js", "max_issues_repo_name": "popoidev/webwarrior", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/pages/projects/index.js", "max_forks_repo_name": "popoidev/webwarrior", "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": 35.3676470588, "max_line_length": 238, "alphanum_fraction": 0.4187110187}
import React from 'react'
import Layout from '../../components/Layout'
import * as styles from '../../styles/projects.module.css'
import { graphql, Link } from 'gatsby'
import { GatsbyImage  } from 'gatsby-plugin-image'

export default function Projects({ data }) {

    const projects = data.projects.edges
    const contact = data.contact.siteMetadata.contact

    return (
        <Layout>
            <section className={ styles.portfolio }>
                <h2>Projects</h2>
                <h3>Projects & Websites I've created.</h3>
                <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Temporibus ad, tempore, vero maiores voluptatem optio rerum quidem rem porro et inventore doloribus quae nostrum amet quisquam saepe. Dolore, at repudiandae.</p>

                <div className={ styles.projects }>
                    { projects && projects.map( project => {
                        const { title, slug, stack, thumb } = project.node.frontmatter
                      
                        return (
                            <Link 
                                key={ project.node.id } 
                                to={ `/projects/${ slug }` }>
                                <div>
                                    <GatsbyImage image={ thumb.childImageSharp.gatsbyImageData } />
                                    <h3>{ title }</h3>
                                    <p>{ stack }</p>
                                </div>
                            </Link>
                        )
                    } ) }
                </div>

                <p>Like what you see ? You can email me at { contact } for a quoute.</p>
            </section>
        </Layout>
    )
}

export const query  = graphql`
    query Projects {
        projects: allMarkdownRemark(sort: {fields: frontmatter___date, order: DESC}) {
            edges {
                node {
                    id
                    frontmatter {
                        title
                        stack
                        slug
                        thumb {
                            childImageSharp {
                                gatsbyImageData
                            }
                        }
                    }
                }
            }
        }
        contact: site {
            siteMetadata {
                contact
            }
        }
    }
`