{"size": 3622, "ext": "js", "max_stars_repo_path": "src/pages/index.js", "max_stars_repo_name": "MadMaxMcKinney/max-mckinney-gatsby", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/pages/index.js", "max_issues_repo_name": "MadMaxMcKinney/max-mckinney-gatsby", "max_issues_repo_issues_event_min_datetime": "2022-02-26T04:39:57.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-26T04:39:57.000Z", "max_forks_repo_path": "src/pages/index.js", "max_forks_repo_name": "MadMaxMcKinney/max-mckinney-gatsby", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 1, "max_forks_count": null, "avg_line_length": 40.2444444444, "max_line_length": 389, "alphanum_fraction": 0.629210381}
import React from 'react'
import { graphql } from "gatsby"
import Img from 'gatsby-image'
import { StaticImage } from 'gatsby-plugin-image';
import ProjectCard from '../components/cards/ProjectCard';
import PageLink from '../components/links/PageLink'
import { MHeadingHero, MBodyLead } from '../components/typography';

const IndexPage = ({data}) => (
  <React.Fragment>
	  <div className="px-6">

        <div className="flex items-end relative h-header-mobile md:min-h-870px md:h-header" id="Header">
            <div className="contained-content z-10 pb-16 md:pb-32">
                <StaticImage className="h-auto w-40 mb-8 animate-fade-in-fast md:w-52" src={"../assets/img/max_transition_shapes.png"} alt="Max Shape Logo"/>
                <MHeadingHero className="mb-5 animate-fade-in">Designer.</MHeadingHero>
                <MHeadingHero className="mb-5 animate-fade-in-slow">Leader.</MHeadingHero>
                <MHeadingHero className="animate-fade-in-very-slow">Nerd.</MHeadingHero>
            </div>
            <Img style={{position: 'absolute', top: 0, left: '-24px', right: '-24px', height: `100%`}} fluid={data.maxBG.childImageSharp.fluid} className="bg-bottom animate-fade-in-slow"/>
        </div>
		

        <div className="contained-content mt-16 animate-fade-in-slow sm:mt-24" id="BioDescription">

            <div className="text-gray-400">
                <MBodyLead className="mb-6">Hi. I’m <span className="text-transparent bg-gradient-to-r from-max-red-300 via-max-purple-300 to-max-pink-300 bg-clip-text bg-300% animate-flow-background">Max McKinney</span>. I’m currently a design lead at IBM working in the cyber security space. I run a design centric YouTube channel, do automotive photography, and build cars.</MBodyLead>

                <MBodyLead className="mb-6">I specialize in design architecture and thrive in undefined problem spaces. My experience is in UX design, user interfaces, design systems, and design leadership.</MBodyLead>

                <MBodyLead className="mb-6">To support my designs I enjoy creating end-to-end experiences via frontend web development with a focus in React and CSS component systems.</MBodyLead>

                <MBodyLead>Currently not available for hire. If you want to connect reach out to me at <PageLink href="mailto:hello@maxmckinney.com">hello@maxmckinney.com</PageLink>.</MBodyLead>
            </div>
        </div>

        {/* Project Card Grid */}
		<div id="ProjectGrid" className="animate-fade-in-slow mt-24 grid grid-cols-1 gap-16 sm:mt-30 lg:gap-32">
			{data.allMarkdownRemark.edges.map(({node}) => (
				<ProjectCard data={node} key={node.key}></ProjectCard>
			))}
		</div>

	</div>
  </React.Fragment>
)

export default IndexPage

export const query = graphql`
query ProjectQuery {
	allMarkdownRemark(sort: {fields: [frontmatter___sortDate], order: DESC}, filter: {fileAbsolutePath:{regex: "/work/.*.md$/"}}) {
		edges {
		  node {
			fields {
				slug
			}
			frontmatter {
			  title
			  projectShortBrief
			  themeColor
			  accentColor
			  image {
				childImageSharp {
				  fluid(maxWidth: 1920) {
					...GatsbyImageSharpFluid
				  }
				}
              }
              thumb {
				childImageSharp {
				  fluid(maxWidth: 1920) {
					...GatsbyImageSharpFluid
				  }
				}
              }
              categories
			}
		  }
		}
	}
    maxBG: file(relativePath: { eq: "img/max-helmet.jpeg" }) {
        childImageSharp {
          fluid(maxWidth: 2400) {
            ...GatsbyImageSharpFluid
          }
    	}
    }
}
`