{"version":3,"sources":["webpack:///./src/components/headerBack.js","webpack:///./src/components/layoutChild.js","webpack:///./src/pages/project-beme.js"],"names":["HeaderBack","render","className","to","color","href","React","Component","LayoutChild","children","siteTitle","PageLayout","styled","div","CellTitleGroup","Title","fontSize","space","Text","p","gray2","Subhead","ImgSingle","Img","ImgDouble","data","title","description","image","fluid","imageOne","childImageSharp","alt","fadeIn","imageTwo","imageThree","imageFour","imageFive","imageSix","imageSeven","query"],"mappings":"oKA2BeA,E,kGApBdC,OAAA,WACE,OACC,yBAAKC,UAAW,8BACd,yBAAKA,UAAW,uBACd,kBAAC,OAAD,CAAMC,GAAG,KACL,yBAAKD,UAAU,iBAAf,YAGN,yBAAKA,UAAU,qBACb,yBAAKA,UAAW,+BACd,kBAAC,OAAD,CAAMC,GAAG,YAAW,kBAAC,IAAD,CAAWC,MAAO,QAAlB,WAEtB,uBAAGC,KAAK,oCAAmC,kBAAC,IAAD,CAAWD,MAAO,OAAlB,aAE7C,yBAAKF,UAAW,0C,GAhBGI,IAAMC,W,sBCmChBC,IAzBK,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SAWrB,OACE,oCACE,kBAAC,EAAD,CAAYC,UAAW,SACvB,yBAAKR,UAAU,eAAf,KACE,8BAAOO,GACP,kBAAC,IAAD,S,kCC/BR,2IASME,EAAaC,IAAOC,IAAV,+EAAGD,CAAH,6OAaN,IAMJE,EAAiBF,IAAOC,IAAV,mFAAGD,CAAH,sEAGV,IAMJG,EAAQH,IAAOC,IAAV,0EAAGD,CAAH,sOAEMI,IAAS,GAERC,IAAM,GAAI,KAMPD,IAAS,GAKTA,IAAS,IAIxBE,EAAON,IAAOO,EAAV,yEAAGP,CAAH,yFACQK,IAAM,GAAI,KAEfb,IAAMgB,OAKbC,EAAUT,IAAOO,EAAV,4EAAGP,CAAH,6GACKK,IAAM,GAAI,MAUtBK,EAAYV,YAAOW,KAAV,8EAAGX,CAAH,yBAGTY,EAAYZ,YAAOW,KAAV,8EAAGX,CAAH,iGAQA,0BAAGa,EAAH,EAAGA,KAAH,OACb,kBAAC,IAAD,KACE,kBAAC,IAAD,CACEC,MAAM,OACNC,YAAY,+CACZC,MAAM,uBAER,kBAACjB,EAAD,KACI,kBAACG,EAAD,KACI,kBAACC,EAAD,aACA,kBAACM,EAAD,+BACA,kBAACH,EAAD,8NAEA,kBAACA,EAAD,gHACA,kBAACG,EAAD,wDACA,kBAACA,EAAD,+FAEA,kBAACC,EAAD,CACIO,MAAOJ,EAAKK,SAASC,gBAAgBF,MACrCG,IAAI,oCACJC,QAAQ,IAEZ,kBAACX,EAAD,CACIO,MAAOJ,EAAKS,SAASH,gBAAgBF,MACrCG,IAAI,2BACJC,QAAQ,IAEZ,kBAACX,EAAD,CACIO,MAAOJ,EAAKU,WAAWJ,gBAAgBF,MACvCG,IAAI,2BACJC,QAAQ,IAEZ,kBAACT,EAAD,CACIK,MAAOJ,EAAKW,UAAUL,gBAAgBF,MACtCG,IAAI,2BACJC,QAAQ,IAEZ,kBAACT,EAAD,CACIK,MAAOJ,EAAKY,UAAUN,gBAAgBF,MACtCG,IAAI,2BACJC,QAAQ,IAEZ,kBAACT,EAAD,CACIK,MAAOJ,EAAKa,SAASP,gBAAgBF,MACrCG,IAAI,2BACJC,QAAQ,IAEZ,kBAACT,EAAD,CACIK,MAAOJ,EAAKc,WAAWR,gBAAgBF,MACvCG,IAAI,2BACJC,QAAQ,OAMjB,IAAMO,EAAK","file":"component---src-pages-project-beme-js-9055065157531aec7462.js","sourcesContent":["import { Link } from \"gatsby\"\nimport React from \"react\"\nimport './header.css'\nimport BtnHeader from \"./Button-Header\"\n\nclass HeaderBack extends React.Component{\n\n render() {\n   return (\n    <div className={'HeaderBlock HeaderScrolled'}>\n      <div className={'HeaderNameBlockBack'}>\n        <Link to=\"/\">\n            <div className=\"NameTitleBack\">← Back</div>\n        </Link>\n        </div>\n      <div className=\"HeaderButtonBlock\">\n        <div className={'ButtonPad ButtonPadScrolled'}>\n          <Link to=\"/page-2/\"><BtnHeader color= \"blue\">about</BtnHeader></Link>\n        </div>\n        <a href=\"mailto:john@johncrossneumann.com\"><BtnHeader color= \"red\">contact</BtnHeader></a>\n      </div>\n      <div className={'HeaderDivider HeaderDividerScrolled'}></div>\n    </div>\n    )\n  }\n}\n\nexport default HeaderBack\n","/**\n * Layout component that queries for data\n * with Gatsby's useStaticQuery component\n *\n * See: https://www.gatsbyjs.com/docs/use-static-query/\n */\n\nimport React from \"react\"\nimport PropTypes from \"prop-types\"\n// import { useStaticQuery, graphql } from \"gatsby\"\n\nimport HeaderBack from \"./headerBack\"\nimport Footer from \"./footer\"\nimport \"./layout.css\"\n\nconst LayoutChild = ({ children }) => {\n//   const data = useStaticQuery(graphql`\n//     query SiteTitleQuery {\n//       site {\n//         siteMetadata {\n//           title\n//         }\n//       }\n//     }\n//   `)\n\n  return (\n    <>\n      <HeaderBack siteTitle={\"test\"} />\n      <div className=\"spacerChild\">&nbsp;</div>\n        <main>{children}</main>\n        <Footer></Footer>\n    </>\n  )\n}\n\nLayoutChild.propTypes = {\n  children: PropTypes.node.isRequired,\n}\n\nexport default LayoutChild","import React from \"react\"\nimport LayoutChild from \"../components/layoutChild\"\nimport SEO from \"../components/seo\"\nimport { color, fontSize, space } from '../components/constants'\nimport styled from 'styled-components'\nimport { graphql } from \"gatsby\"\nimport Img from \"gatsby-image\";\n\n\nconst PageLayout = styled.div`\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-gap: 36px;\n    margin: 0px 36px 72px;\n\n    @media (max-width: 1024px){\n        grid-gap: 24px;\n        margin: 0px 24px 24px;\n    }\n\n    @media (max-width: 640px){\n        grid-template-columns: 100% ;\n        ${'' /* grid-template-rows: 100%; */}\n        grid-gap: 24px;\n        margin: 0px 24px 24px;\n    }\n`\n/* Text Group */\nconst CellTitleGroup = styled.div`\n    width: 75%;\n    @media (max-width: 640px){\n        ${'' /* grid-row: 2; */}\n        width: 75%;\n        margin-top: 8px;\n    }\n\n`\nconst Title = styled.div`\n    color: white;\n    font-size: ${fontSize[3]};\n    font-weight: 200;\n    margin-top: ${space[4]+ \"px\"};\n    line-height: 0.8;\n    word-wrap:normal; /* YESSSSS */\n    text-rendering: optimizeLegibility;\n\n    @media (max-width: 1024px){\n        font-size: ${fontSize[2]};\n    }\n\n    @media (max-width: 640px){\n        word-spacing: normal;\n        font-size: ${fontSize[2]};\n    }\n\n`\nconst Text = styled.p`\n    margin-top: ${space[2]+ \"px\"};\n    word-wrap:normal; /* YESSSSS */\n    color: ${color.gray2};\n    @media (max-width: 1024px){\n        font-size: 16px;\n    }\n`\nconst Subhead = styled.p`\n    margin-top: ${space[4]+ \"px\"};\n    word-wrap:normal; /* YESSSSS */\n    color: white;\n    margin-bottom: 0px;\n    @media (max-width: 1024px){\n        font-size: 16px;\n    }\n`\n/* Image styles */\n\nconst ImgSingle = styled(Img)`\n    border-radius: 24px;\n`\nconst ImgDouble = styled(Img)`\n    border-radius: 24px;\n    grid-column: 1 / span 2;\n    @media (max-width: 640px){\n        grid-column: 1 / span 1;\n    }\n`\n\nexport default ({ data }) => (\n  <LayoutChild>\n    <SEO \n      title=\"beme\"\n      description=\"Most authentic way to share your experience.\"\n      image=\"../images/card.jpg\"\n    />\n    <PageLayout>\n        <CellTitleGroup>\n            <Title >beme</Title>\n            <Subhead>ROLE: UX LEAD&nbsp;DESIGNER</Subhead>\n            <Text>Beme is a video-sharing app developed by Casey Neistat and Matt Hackett. with a novel recording method, the app allowed interesting strangers from all over the world share 4 second moments and build&nbsp;relationships.\n            </Text>\n            <Text>RESPONSIBILITIES: Research, concept, interaction design, design system, visual design, and&nbsp;prototyping.</Text>\n            <Subhead>2016 WEBBY WINNER - MOBILE SITES &&nbsp;APP&nbsp;-&nbsp;SOCIAL</Subhead>\n            <Subhead>Research, concept, interaction design, design system, visual design, and&nbsp;prototyping.</Subhead>\n            </CellTitleGroup>\n            <ImgSingle \n                fluid={data.imageOne.childImageSharp.fluid}\n                alt=\"An image of the Scroll Reader App\"\n                fadeIn={true}\n                 />\n            <ImgSingle \n                fluid={data.imageTwo.childImageSharp.fluid}\n                alt=\"An image of the beme App\"\n                fadeIn={true}\n                 />\n            <ImgSingle\n                fluid={data.imageThree.childImageSharp.fluid}\n                alt=\"An image of the beme App\"\n                fadeIn={true}\n                 />\n            <ImgDouble\n                fluid={data.imageFour.childImageSharp.fluid}\n                alt=\"An image of the beme App\"\n                fadeIn={true}\n                 />\n            <ImgDouble \n                fluid={data.imageFive.childImageSharp.fluid}\n                alt=\"An image of the beme App\"\n                fadeIn={true}\n                 />\n            <ImgDouble \n                fluid={data.imageSix.childImageSharp.fluid}\n                alt=\"An image of the beme App\"\n                fadeIn={true}\n                 />\n            <ImgDouble \n                fluid={data.imageSeven.childImageSharp.fluid}\n                alt=\"An image of the beme App\"\n                fadeIn={true}\n                 />\n        </PageLayout>\n  </LayoutChild>\n)\n\nexport const query = graphql`\n  query {\n    imageOne: file(relativePath: { eq: \"beme/beme-1.webp\" }) {\n      childImageSharp {\n        # Specify the image processing specifications right in the query.\n        # Makes it trivial to update as your page's design changes.\n        fluid(maxWidth: 1440) {\n            ...GatsbyImageSharpFluid_withWebp\n        }\n      }\n    }\n    imageTwo: file(relativePath: { eq: \"beme/beme-2.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n    imageThree: file(relativePath: { eq: \"beme/beme-3.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n    imageFour: file(relativePath: { eq: \"beme/beme-4.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n    imageFive: file(relativePath: { eq: \"beme/beme-5.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n      imageSix: file(relativePath: { eq: \"beme/beme-6.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n      imageSeven: file(relativePath: { eq: \"beme/beme-7.webp\" }) {\n        childImageSharp {\n          # Specify the image processing specifications right in the query.\n          # Makes it trivial to update as your page's design changes.\n          fluid(maxWidth: 1440) {\n              ...GatsbyImageSharpFluid_withWebp\n          }\n        }\n      }\n  }\n`"],"sourceRoot":""}