{"version":3,"sources":["webpack:///./src/components/shared/Card.js","webpack:///./src/pages/Project.js","webpack:///./src/components/Heading/HeadStyle.js","webpack:///./src/components/shared/Image.js","webpack:///./src/components/Header.js","webpack:///./src/components/Containers/Container.js","webpack:///./src/pages/index.js","webpack:///./src/images/thinking.png","webpack:///./src/components/shared/Skill.js","webpack:///./src/pages/About.js","webpack:///./src/images/programming.svg"],"names":["StyledContainer","styled","div","Title","h2","Description","p","StyledPhoto","img","Card","title","description","photo","src","StyledRoot","breakpoints","mobileMax","Project","require","Heading","SideText","h1","Skill","h3","Image","props","width","height","Header","data","style","display","justifyContent","alignItems","flexDirection","lineHeight","site","siteMetadata","author","Wrapper","Row","Container","children","IndexPage","id","About","module","exports","SkillWrapper","Items","ul","SkillItem","li","TextWrapper","stacks","map","stack","key"],"mappings":"6IAGMA,EAAkBC,IAAOC,IAAV,4EAAGD,CAAH,mEAKfE,EAAQF,IAAOG,GAAV,kEAAGH,CAAH,6EAQLI,EAAcJ,IAAOK,EAAV,wEAAGL,CAAH,gFAOXM,EAAcN,IAAOO,IAAV,wEAAGP,CAAH,oFAmBFQ,EAXF,SAAC,GAAD,IACXC,EADW,EACXA,MACAC,EAFW,EAEXA,YACAC,EAHW,EAGXA,MAHW,OAKX,kBAACZ,EAAD,KACE,kBAACO,EAAD,CAAaM,IAAKD,IAClB,kBAACT,EAAD,KAAQO,GACR,kBAACL,EAAD,KAAcM,K,wBCjCZG,EAAab,IAAOC,IAAV,sEAAGD,CAAH,wBAGVD,EAAkBC,IAAOC,IAAV,2EAAGD,CAAH,qMAQEc,IAAYC,WAoCpBC,UA9BC,WACd,OACE,kBAACH,EAAD,KACE,kBAAC,IAAD,gBACA,kBAAC,IAAD,wBACA,kBAAC,EAAD,KACE,kBAAC,EAAD,CACEF,MAAOM,EAAQ,QACfR,MAAM,+BACNC,YAAY,oXAOd,kBAAC,EAAD,CACEC,MAAOM,EAAQ,QACfR,MAAM,+BACNC,YAAY,wX,6SCvCTQ,EAAUlB,IAAOC,IAAV,qEAAGD,CAAH,iMAQGc,IAAYC,WAKtBI,EAAWnB,IAAOoB,GAAV,sEAAGpB,CAAH,wFAMRqB,EAAQrB,IAAOsB,GAAV,mEAAGtB,CAAH,oFCpBLuB,EAAQvB,IAAOO,IAAV,4DAAGP,CAAH,2BACL,SAAAwB,GAAK,OAAIA,EAAMC,SACd,SAAAD,GAAK,OAAIA,EAAME,UCiCdC,EAhCA,WACb,IAAMC,EAAI,OASV,OACE,kBAACV,EAAD,KACE,kBAACK,EAAD,CACEE,MAAM,QACNC,OAAO,QACPd,IAAKK,EAAQ,UAEf,yBACEY,MAAO,CACLC,QAAQ,OACRC,eAAe,SACfC,WAAW,SACXC,cAAc,SACdC,WAAW,WAGb,kBAACf,EAAD,sBAAyBS,EAAKO,KAAKC,aAAaC,QAChD,kBAAChB,EAAD,8BC5BFiB,EAAUtC,IAAOC,IAAV,wEAAGD,CAAH,4JAMUc,IAAYC,WAK7BwB,EAAMvC,IAAOC,IAAV,oEAAGD,CAAH,gFAIcc,IAAYC,WAYpByB,EAPG,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SACnB,OACE,kBAACH,EAAD,KACE,kBAACC,EAAD,KAAME,K,wBCLGC,UAdG,kBAChB,kBAAC,IAAD,KACE,kBAAC,EAAD,MACA,kBAAC,EAAD,KACE,yBAAKC,GAAG,SACR,kBAACC,EAAA,QAAD,OAEA,yBAAKD,GAAG,WACR,kBAAC3B,EAAA,QAAD,W,qBChBN6B,EAAOC,QAAU,IAA0B,wD,oHCG9BC,EAAe/C,IAAOC,IAAV,sEAAGD,CAAH,8KAOAc,IAAYC,WAKxBiC,EAAQhD,IAAOiD,GAAV,+DAAGjD,CAAH,yOAMKc,IAAYC,WAOtBmC,EAAYlD,IAAOmD,GAAV,mEAAGnD,CAAH,yDCYP4C,UAnCD,WACZ,IAAMhB,EAAI,OASV,OACE,oCACE,kBAACwB,EAAA,EAAD,KACE,kBAAC,IAAD,2gBAWF,kBAACL,EAAD,KACE,iDACA,kBAACC,EAAD,KACGpB,EAAKO,KAAKC,aAAaiB,OAAOC,KAAI,SAAAC,GAAK,OACtC,kBAACL,EAAD,CAAWM,IAAKD,GAAQA,W,qBCjCpCV,EAAOC,QAAU,IAA0B","file":"component---src-pages-index-js-657d5951f52009d6f73e.js","sourcesContent":["import React from 'react'\nimport styled from 'styled-components'\n\nconst StyledContainer = styled.div`\n  border: 1px solid #fff;\n  padding: 25px 12px 18px;\n  background: #fff;\n`\nconst Title = styled.h2`\n  color: #2d2d2d;\n  font-weight: 300;\n  @media (max-width: 500px) {\n    font-size: 1rem;\n  }\n`\n\nconst Description = styled.p`\n  color: #2d2d2d;\n  font-weight: 300;\n  @media (max-width: 500px) {\n    font-size: 0.75rem;\n  }\n`\nconst StyledPhoto = styled.img`\n  width: 100%;\n  height: 40vh;\n  max-height: 40vh;\n  object-fit: cover;\n  border: 1px solid #fff;\n`\n\nconst Card = ({\n  title,\n  description,\n  photo\n}) => (\n  <StyledContainer>\n    <StyledPhoto src={photo} />\n    <Title>{title}</Title>\n    <Description>{description}</Description>\n  </StyledContainer>\n)\nexport default Card","import React from \"react\"\nimport styled from \"styled-components\"\nimport Card from \"../components/shared/Card\"\nimport { breakpoints } from \"../components/shared/Media\"\nimport { TitleComponent, StyledText } from \"../components/shared/TextWrapper\"\n\nconst StyledRoot = styled.div`\n  padding: 50px 12px;\n`\nconst StyledContainer = styled.div`\n  max-width: 70%;\n  width: 100%;\n  margin: auto;\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: 20px 20px;\n  cursor: pointer;\n  @media (max-width: ${breakpoints.mobileMax}) {\n    max-width: 90%;\n    grid-template-columns: 1fr;\n    grid-gap: 20px;\n  }\n`\nconst Project = () => {\n  return (\n    <StyledRoot>\n      <TitleComponent>Project</TitleComponent>\n      <StyledText>Some of my work</StyledText>\n      <StyledContainer>\n        <Card\n          photo={require(\"../images/programming.svg\")}\n          title=\"The Benefits of Green Apples\"\n          description=\"Green apples have a high fiber content which helps in increasing the\n      body's metabolism. While consuming an apple, make sure that you're not\n      tossing the peel in the trash. Consuming apple with its peel improves\n      the overall health. Due to its high fiber content, apple helps in\n      detoxification process. It keeps the liver and digestive system away\n      from harmful elements.\"\n        />\n        <Card\n          photo={require(\"../images/thinking.png\")}\n          title=\"The Benefits of Green Apples\"\n          description=\"Green apples have a high fiber content which helps in increasing the\n      body's metabolism. While consuming an apple, make sure that you're not\n      tossing the peel in the trash. Consuming apple with its peel improves\n      the overall health. Due to its high fiber content, apple helps in\n      detoxification process. It keeps the liver and digestive system away\n      from harmful elements.\"\n        />\n      </StyledContainer>\n    </StyledRoot>\n  )\n}\nexport default Project\n","import styled from \"styled-components\"\nimport {breakpoints} from '../shared/Media'\n\nexport const Heading = styled.div`\n  width: 100%;\n  height: 80vh;\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  justify-content: space-around;\n  background: #fff;\n  @media (max-width: ${breakpoints.mobileMax}) {\n      flex-direction: column;\n      justify-content: center;\n  }\n`\nexport const SideText = styled.h1`\n    font-size: 1.78rem;\n    color: #2d2d2d;\n    font-family: \"Raleway\", sans-sherif;\n    font-weight: 700;\n`\nexport const Skill = styled.h3`\n  font-size: 1.3rem;\n  color: #2d2d2d;\n  font-family: \"Open Sans\", sans-sherif;\n  opacity: .8;\n`\n","import styled from 'styled-components'\n\nexport const Image = styled.img`\n    width: ${props => props.width};\n    height: ${props => props.height};\n`","import React from \"react\"\nimport { Heading, SideText, Skill } from \"./Heading/HeadStyle\"\nimport { Image } from \"./shared/Image\"\nimport { useStaticQuery, graphql } from \"gatsby\"\n\nconst Header = () => {\n  const data = useStaticQuery(graphql`\n    query {\n      site {\n        siteMetadata {\n          author\n        }\n      }\n    }\n  `)\n  return (\n    <Heading>\n      <Image\n        width=\"400px\"\n        height=\"400px\"\n        src={require(\"../images/programming.svg\")}\n      />\n      <div\n        style={{\n          display: `flex`,\n          justifyContent: `center`,\n          alignItems: `center`,\n          flexDirection: `column`,\n          lineHeight: `.10rem`\n        }}\n      >\n        <SideText>Hi there, I'm {data.site.siteMetadata.author}</SideText>\n        <Skill>I'm a web designer</Skill>\n      </div>\n    </Heading>\n  )\n}\nexport default Header\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { breakpoints } from \"../shared/Media\"\n\nconst Wrapper = styled.div`\n  width: 100%;\n  padding: 3rem 0px;\n  display: flex;\n  justify-content: flex-start;\n  align-items: left;\n  @media (max-width: ${breakpoints.mobileMax}) {\n    justify-content: center;\n    align-items: center;\n  }\n`\nconst Row = styled.div`\n  max-width: 100%;\n  width: 100%;\n  padding: 0 3rem;\n  @media (max-width: ${breakpoints.mobileMax}) {\n    padding: 0;\n  }\n`\n\nconst Container = ({ children }) => {\n  return (\n    <Wrapper>\n      <Row>{children}</Row>\n    </Wrapper>\n  )\n}\nexport default Container\n","import React from \"react\"\n\nimport Layout from \"../components/layout\"\nimport Header from \"../components/Header\"\nimport Container from \"../components/Containers/Container\"\nimport About from \"./About\"\nimport Project from \"./Project\"\n\nconst IndexPage = () => (\n  <Layout>\n    <Header/>\n    <Container>\n      <div id=\"about\">\n      <About/>\n      </div>\n      <div id=\"project\">\n      <Project/>\n      </div>\n    </Container>\n  </Layout>\n)\n\nexport default IndexPage\n","module.exports = __webpack_public_path__ + \"static/thinking-4d418a1a3cd21c9e463202e015c97869.png\";","import styled from 'styled-components'\nimport { breakpoints } from './Media'\n\nexport const SkillWrapper = styled.div`\n    max-width: 100%;\n    display: flex;\n    justify-content: left;\n    flex-direction: column;\n    padding: 0 6rem;\n    line-height: 1rem;\n    @media (max-width: ${breakpoints.mobileMax}) {\n        justify-content: center;\n        align-items: center;\n    }\n`\nexport const Items = styled.ul`\n  list-style: circle;\n  display: grid;\n  justify-content: space-around;\n  grid-template-columns: 1fr 1fr 1fr;\n  grid-gap: 20px 20px;\n  @media (max-width: ${breakpoints.mobileMax}) {\n      grid-template-columns: 1fr 1fr;\n      grid-gap: 24px 50px;\n      justify-content: center;\n      aling-items: center;\n  }\n`\nexport const SkillItem = styled.li`\n    font-size: 1rem;\n    font-family: \"Open Sans\", sans-sherif;\n`","import React from \"react\"\nimport { Text, TextWrapper } from \"../components/shared/TextWrapper\"\nimport { SkillWrapper, Items, SkillItem } from \"../components/shared/Skill\"\nimport { useStaticQuery, graphql } from \"gatsby\"\n\nconst About = () => {\n  const data = useStaticQuery(graphql`\n    query {\n      site {\n        siteMetadata {\n          stacks\n        }\n      }\n    }\n  `)\n  return (\n    <>\n      <TextWrapper>\n        <Text>\n          Hello, My name is John Doe, and I'm a web design at My company, lorem\n          lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem\n          lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem\n          lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem\n          lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem\n          lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem\n          lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem\n          lorem lorem lorem lorem lorem lorem lorem lorem\n        </Text>\n      </TextWrapper>\n      <SkillWrapper>\n        <h4>Current Dev Stack</h4>\n        <Items>\n          {data.site.siteMetadata.stacks.map(stack => (\n            <SkillItem key={stack}>{stack}</SkillItem>\n          ))}\n        </Items>\n      </SkillWrapper>\n    </>\n  )\n}\nexport default About\n","module.exports = __webpack_public_path__ + \"static/programming-c1a95f7335cbfb730b937e19e8830a53.svg\";"],"sourceRoot":""}