component---src-pages-index-js-270ef162bd78076dfa97.js.map

{"version":3,"sources":["webpack:///./src/pages/index.js"],"names":["Content","styled","div","props","theme","breakpoints","tablet","phone","Hero","colors","grey","dark","IndexPage","posts","data","allMdx","nodes","to","big","width","height","viewBox","xmlns","d","map","post","title","frontmatter","date","excerpt","timeToRead","slug","fields","categories","key","IndexQuery"],"mappings":"0FAAA,6FAOMA,EAAUC,IAAOC,IAAV,oEAAGD,CAAH,qMAKU,SAAAE,GAAK,OAAIA,EAAMC,MAAMC,YAAYC,QAGjC,SAAAH,GAAK,OAAIA,EAAMC,MAAMC,YAAYE,QAMlDC,EAAOP,IAAOC,IAAV,iEAAGD,CAAH,gRAIC,SAAAE,GAAK,OAAIA,EAAMC,MAAMK,OAAOC,KAAKC,MAErB,SAAAR,GAAK,OAAIA,EAAMC,MAAMC,YAAYE,OAO/B,SAAAJ,GAAK,OAAIA,EAAMC,MAAMC,YAAYC,QAGjC,SAAAH,GAAK,OAAIA,EAAMC,MAAMC,YAAYE,QA8C3CK,UAxCG,SAAC,GAAD,IAEGC,EAFH,EAChBC,KACEC,OAAUC,MAFI,OAKhB,kBAAC,IAAD,KACE,kBAAC,IAAD,KACE,kBAACR,EAAD,KACE,mCACA,wLAIA,kBAAC,OAAD,CAAMS,GAAG,YACP,kBAAC,IAAD,CAAQC,KAAG,GACT,yBAAKC,MAAM,OAAOC,OAAO,OAAOC,QAAQ,gBAAgBC,MAAM,8BAC5D,0BAAMC,EAAE,4NAFZ,aAQJ,kBAACvB,EAAD,KACE,kBAAC,IAAD,uBACCa,EAAMW,IAAI,SAAAC,GAAI,OACb,kBAAC,IAAD,CACEC,MAAOD,EAAKE,YAAYD,MACxBE,KAAMH,EAAKE,YAAYC,KACvBC,QAASJ,EAAKI,QACdC,WAAYL,EAAKK,WACjBC,KAAMN,EAAKO,OAAOD,KAClBE,WAAYR,EAAKE,YAAYM,WAC7BC,IAAKT,EAAKO,OAAOD,aAkBtB,IAAMI,EAAU","file":"component---src-pages-index-js-270ef162bd78076dfa97.js","sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Link, graphql } from 'gatsby'\nimport styled from 'styled-components'\n\nimport { Layout, Article, Wrapper, Button, SectionTitle } from '../components'\n\nconst Content = styled.div`\n  grid-column: 2;\n  box-shadow: 0 4px 120px rgba(0, 0, 0, 0.1);\n  border-radius: 1rem;\n  padding: 3rem 6rem;\n  @media (max-width: ${props => props.theme.breakpoints.tablet}) {\n    padding: 3rem 2rem;\n  }\n  @media (max-width: ${props => props.theme.breakpoints.phone}) {\n    padding: 2rem 1.5rem;\n  }\n  overflow: hidden;\n`\n\nconst Hero = styled.div`\n  grid-column: 2;\n  padding: 3rem 2rem 6rem 2rem;\n  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);\n  color: ${props => props.theme.colors.grey.dark};\n\n  @media (max-width: ${props => props.theme.breakpoints.phone}) {\n    padding: 2rem 1rem 4rem 1rem;\n  }\n\n  p {\n    font-size: 1.68rem;\n    margin-top: -1rem;\n    @media (max-width: ${props => props.theme.breakpoints.tablet}) {\n      font-size: 1.45rem;\n    }\n    @media (max-width: ${props => props.theme.breakpoints.phone}) {\n      font-size: 1.25rem;\n    }\n  }\n`\n\nconst IndexPage = ({\n  data: {\n    allMdx: { nodes: posts },\n  },\n}) => (\n  <Layout>\n    <Wrapper>\n      <Hero>\n        <h1>Hi.</h1>\n        <p>\n          I&apos;m Danh Nguyen, a Senior Software Engineer with five years of industry experience, specializing in\n          developing React apps with the best UX users can get.\n        </p>\n        <Link to=\"/contact\">\n          <Button big>\n            <svg width=\"1792\" height=\"1792\" viewBox=\"0 0 1792 1792\" xmlns=\"http://www.w3.org/2000/svg\">\n              <path d=\"M1764 11q33 24 27 64l-256 1536q-5 29-32 45-14 8-31 8-11 0-24-5l-453-185-242 295q-18 23-49 23-13 0-22-4-19-7-30.5-23.5t-11.5-36.5v-349l864-1059-1069 925-395-162q-37-14-40-55-2-40 32-59l1664-960q15-9 32-9 20 0 36 11z\" />\n            </svg>\n            Contact\n          </Button>\n        </Link>\n      </Hero>\n      <Content>\n        <SectionTitle>Latest stories</SectionTitle>\n        {posts.map(post => (\n          <Article\n            title={post.frontmatter.title}\n            date={post.frontmatter.date}\n            excerpt={post.excerpt}\n            timeToRead={post.timeToRead}\n            slug={post.fields.slug}\n            categories={post.frontmatter.categories}\n            key={post.fields.slug}\n          />\n        ))}\n      </Content>\n    </Wrapper>\n  </Layout>\n)\n\nexport default IndexPage\n\nIndexPage.propTypes = {\n  data: PropTypes.shape({\n    allMdx: PropTypes.shape({\n      nodes: PropTypes.array.isRequired,\n    }),\n  }).isRequired,\n}\n\nexport const IndexQuery = graphql`\n  query IndexQuery {\n    allMdx(sort: { fields: [frontmatter___date], order: DESC }) {\n      nodes {\n        fields {\n          slug\n        }\n        frontmatter {\n          title\n          date(formatString: \"MM/DD/YYYY\")\n          categories\n        }\n        excerpt(pruneLength: 200)\n        timeToRead\n      }\n    }\n  }\n`\n"],"sourceRoot":""}