{"version":3,"sources":["webpack://gatsby-starter-hello-world/./src/components/HomeContent.js","webpack://gatsby-starter-hello-world/./src/components/Project.js","webpack://gatsby-starter-hello-world/./src/components/Projects.js","webpack://gatsby-starter-hello-world/./src/components/AboutHome.js","webpack://gatsby-starter-hello-world/./src/pages/index.js"],"names":["HomeStyles","styled","changeBg","HomeAbout","justifyCenter","large","href","SingleProjectStyles","project","image","getImage","className","url","target","rel","G","alt","name","small","responsibilities","map","responsibility","index","key","techStack","stack","description","projects","useStaticQuery","allContentfulProjects","nodes","largePadding","nonFluid","id","AboutHomeStyles","useState","setChangeBg","handleChangeBg","e","window","scrollY","innerHeight","useEffect","addEventListener","Layout","SEO","title"],"mappings":"kOAUMA,EAAaC,oBAAH,+DAAGA,CAAH,mFACA,qBAAGC,SAA2B,OAAS,aAI1C,qBAAGA,SAA2B,IAAM,OAG3CC,EAAYF,oBAAH,8DAAGA,CAAH,6CA+Bf,EAvBoB,SAAC,GAAkB,IAAhBC,EAAe,EAAfA,SACrB,OACE,gBAAC,KAAD,KACE,gBAACF,EAAD,CAAYE,SAAUA,GACpB,gBAAC,KAAD,KACE,gBAAC,KAAD,CAAME,eAAa,GACjB,gBAACD,EAAD,KACE,gBAAC,KAAD,CAASE,OAAK,GAAd,sDAGA,2BACE,qBAAGC,KAAK,iCACN,gBAAC,KAAD,kC,oBCjCZC,EAAsBN,oBAAH,wEAAGA,CAAH,6wBA+GzB,EA3CgB,SAAC,GAAiB,IAAfO,EAAc,EAAdA,QACXC,GAAQC,OAASF,EAAQC,OAE/B,OACE,gBAACF,EAAD,KACE,uBAAKI,UAAU,qBACb,qBAAGL,KAAI,GAAKE,EAAQI,IAAOC,OAAO,SAASC,IAAI,cAC7C,gBAAC,EAAAC,EAAD,CAAaN,MAAOA,EAAOO,IAAKR,EAAQS,QAE1C,qBAAGX,KAAI,GAAKE,EAAQI,IAAOC,OAAO,SAASC,IAAI,cAC7C,uBAAKH,UAAU,mBACb,2BACE,gBAAC,KAAD,CAASO,OAAK,GAAd,oBACA,0BACGV,EAAQW,iBAAiBC,KAAI,SAACC,EAAgBC,GAC7C,OAAO,sBAAIC,IAAKD,GAAQD,OAG5B,gBAAC,KAAD,CAASH,OAAK,GAAd,cACA,0BACGV,EAAQgB,UAAUJ,KAAI,SAACK,EAAOH,GAC7B,OAAO,sBAAIC,IAAKD,GAAQG,QAI9B,2BACE,gDAKR,uBAAKd,UAAU,kBACb,qBAAGL,KAAI,GAAKE,EAAQI,IAAOC,OAAO,SAASC,IAAI,cAC7C,gBAAC,KAAD,CAASI,OAAK,GAAEV,EAAQS,OAE1B,2BACE,yBAAIT,EAAQkB,iBCtEtB,EAfiB,WACf,IACMC,GADOC,oBApBG,cAqBMC,sBAAsBC,MAE5C,OACE,gBAAC,KAAD,CAASC,cAAY,GACnB,gBAAC,KAAD,CAAWC,UAAQ,GAChBL,EAASP,KAAI,SAAAZ,GACZ,OAAO,gBAAC,EAAD,CAASA,QAASA,EAASe,IAAKf,EAAQyB,WC5BnDC,EAAkBjC,oBAAH,sEAAGA,CAAH,8PA8CrB,EAvBkB,WAChB,OACE,gBAAC,KAAD,KACE,gBAACiC,EAAD,KACE,gBAAC,KAAD,KACE,gBAAC,KAAD,CAAM9B,eAAa,GACjB,2BACE,gBAAC,KAAD,2KAIE,4BACE,qBAAGE,KAAK,iCAAR,yB,UCNlB,EAzBa,WACX,OAAgC6B,eAAS,GAAlCjC,EAAP,KAAiBkC,EAAjB,KAEMC,EAAiB,SAAAC,GACjBC,OAAOC,QAAUD,OAAOE,YAAc,EACxCL,GAAY,GAEZA,GAAY,IAQhB,OAJAM,gBAAU,WACRH,OAAOI,iBAAiB,SAAUN,KACjC,IAGD,gBAACO,EAAA,EAAD,KACE,gBAACC,EAAA,EAAD,CAAKC,MAAM,SACX,gBAAC,EAAD,CAAa5C,SAAUA,IACvB,gBAAC,EAAD,MACA,gBAAC,EAAD","file":"component---src-pages-index-js-b95de4ca8d21aac68048.js","sourcesContent":["import React from \"react\"\nimport styled from \"styled-components\"\nimport {\n  Heading,\n  Container,\n  Flex,\n  Section,\n  ButtonPrimary,\n} from \"../styles/gobalStyles\"\n\nconst HomeStyles = styled.div`\n  background: ${({ changeBg }) => (changeBg ? \"#fff\" : \"#e6b753\")};\n  width: 100vw;\n  height: 100vh;\n  transition: all 0.5s ease;\n  opacity: ${({ changeBg }) => (changeBg ? \"0\" : \"1\")};\n`\n\nconst HomeAbout = styled.div`\n  text-align: center;\n\n  div {\n    margin-top: 2rem;\n  }\n`\n\nconst HomeContent = ({ changeBg }) => {\n  return (\n    <Section>\n      <HomeStyles changeBg={changeBg}>\n        <Container>\n          <Flex justifyCenter>\n            <HomeAbout>\n              <Heading large>\n                Hi, I’m Hien. Melbourne-based Front End Developer.\n              </Heading>\n              <div>\n                <a href=\"mailto:info@hiennguyen.com.au\">\n                  <ButtonPrimary>Let's collaborate</ButtonPrimary>\n                </a>\n              </div>\n            </HomeAbout>\n          </Flex>\n        </Container>\n      </HomeStyles>\n    </Section>\n  )\n}\n\nexport default HomeContent\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { Heading } from \"../styles/gobalStyles\"\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\"\n\nconst SingleProjectStyles = styled.div`\n  &:not(:last-child) {\n    margin-bottom: 6rem;\n    @media (max-width: 728px) {\n      margin-bottom: 2rem;\n    }\n  }\n  .overlay-container {\n    position: relative;\n\n    .project-overlay {\n      display: flex;\n      flex-direction: column;\n      justify-content: space-between;\n      position: absolute;\n      padding: 2rem;\n      height: 100%;\n      width: 100%;\n      top: 0;\n      left: 0;\n      color: #fff;\n      background: #000;\n      opacity: 0;\n      transition: opacity 200ms linear;\n\n      @media (max-width: 400px) {\n        display: none;\n      }\n\n      &:hover {\n        opacity: 1;\n      }\n      ul {\n        margin-bottom: 3rem;\n        @media (max-width: 568px) {\n          margin-bottom: 2rem;\n\n          li {\n            @media (max-width: 568px) {\n              font-size: 1.2rem;\n            }\n          }\n        }\n      }\n\n      button {\n        font-size: 1.2rem;\n        font-weight: 700;\n        text-transform: uppercase;\n        color: #fff;\n        text-decoration: none;\n        border-bottom: 1px solid #fff;\n        padding-bottom: 2px;\n        transition: all 200ms linear;\n\n        &:hover {\n          color: #e6b753;\n          border-bottom: 1px solid #e6b753;\n        }\n      }\n    }\n  }\n\n  .project-detail {\n    padding: 2rem 0;\n  }\n`\n\nconst Project = ({ project }) => {\n  const image = getImage(project.image)\n\n  return (\n    <SingleProjectStyles>\n      <div className=\"overlay-container\">\n        <a href={`${project.url}`} target=\"_blank\" rel=\"noreferrer\">\n          <GatsbyImage image={image} alt={project.name} />\n        </a>\n        <a href={`${project.url}`} target=\"_blank\" rel=\"noreferrer\">\n          <div className=\"project-overlay\">\n            <div>\n              <Heading small>Responsibilities</Heading>\n              <ul>\n                {project.responsibilities.map((responsibility, index) => {\n                  return <li key={index}>{responsibility}</li>\n                })}\n              </ul>\n              <Heading small>Tech Stack</Heading>\n              <ul>\n                {project.techStack.map((stack, index) => {\n                  return <li key={index}>{stack}</li>\n                })}\n              </ul>\n            </div>\n            <div>\n              <button>Visit site</button>\n            </div>\n          </div>\n        </a>\n      </div>\n      <div className=\"project-detail\">\n        <a href={`${project.url}`} target=\"_blank\" rel=\"noreferrer\">\n          <Heading small>{project.name}</Heading>\n        </a>\n        <div>\n          <p>{project.description}</p>\n        </div>\n      </div>\n    </SingleProjectStyles>\n  )\n}\n\nexport default Project\n","import React from \"react\"\nimport { graphql, useStaticQuery } from \"gatsby\"\nimport { Container, Section } from \"../styles/gobalStyles\"\nimport Project from \"./Project\"\n\nexport const query = graphql`\n  {\n    allContentfulProjects(sort: { fields: createdAt, order: DESC }) {\n      nodes {\n        id\n        name\n        url\n        responsibilities\n        techStack\n        collaborators\n        description\n        image {\n          gatsbyImageData(layout: CONSTRAINED, placeholder: TRACED_SVG)\n        }\n      }\n    }\n  }\n`\n\nconst Projects = () => {\n  const data = useStaticQuery(query)\n  const projects = data.allContentfulProjects.nodes\n\n  return (\n    <Section largePadding>\n      <Container nonFluid>\n        {projects.map(project => {\n          return <Project project={project} key={project.id} />\n        })}\n      </Container>\n    </Section>\n  )\n}\n\nexport default Projects\n","import React from \"react\"\nimport styled from \"styled-components\"\nimport { Container, Flex, Section, BodyText } from \"../styles/gobalStyles\"\n\nconst AboutHomeStyles = styled.div`\n  background: #92c9c0;\n  height: calc(100vh - 71px);\n  width: 100vw;\n  color: #000;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    max-width: 770px;\n    text-align: center;\n    p {\n      font-weight: 400;\n    }\n    a {\n      border-bottom: 1px solid #000;\n      padding-bottom: 2px;\n      margin-left: 4px;\n    }\n  }\n`\n\nconst AboutHome = () => {\n  return (\n    <Section>\n      <AboutHomeStyles>\n        <Container>\n          <Flex justifyCenter>\n            <div>\n              <BodyText>\n                With a background in customer service, I put myself in the\n                client's shoes throughout the entire design and development\n                process. To collaborate on a project, please\n                <span>\n                  <a href=\"mailto:info@hiennguyen.com.au\">get in touch.</a>\n                </span>\n              </BodyText>\n            </div>\n          </Flex>\n        </Container>\n      </AboutHomeStyles>\n    </Section>\n  )\n}\n\nexport default AboutHome\n","import React, { useState, useEffect } from \"react\"\n\nimport Layout from \"../components/Layout\"\nimport HomeContent from \"../components/HomeContent\"\nimport Projects from \"../components/Projects\"\nimport AboutHome from \"../components/AboutHome\"\nimport SEO from \"../components/SEO\"\n\nconst Home = () => {\n  const [changeBg, setChangeBg] = useState(false)\n\n  const handleChangeBg = e => {\n    if (window.scrollY > window.innerHeight / 3) {\n      setChangeBg(true)\n    } else {\n      setChangeBg(false)\n    }\n  }\n\n  useEffect(() => {\n    window.addEventListener(\"scroll\", handleChangeBg)\n  }, [])\n\n  return (\n    <Layout>\n      <SEO title=\"Home\" />\n      <HomeContent changeBg={changeBg} />\n      <Projects />\n      <AboutHome />\n    </Layout>\n  )\n}\n\nexport default Home\n"],"sourceRoot":""}