c2aad20868020ccc6dc79584802d91cef97051ea-c43bdba536453c937703.js.map

{"version":3,"file":"c2aad20868020ccc6dc79584802d91cef97051ea-c43bdba536453c937703.js","mappings":"sMAQA,MAAMA,GAAsBC,EAAAA,EAAAA,GAAOC,EAAAA,EAAW,qBAAlBD,CAAmB,4IAkB/C,MAN2DE,IAEpD,IAFqD,aAC1DC,GACD,EACC,OAAOC,EAAAA,EAAAA,IAACL,EAAmB,CAACM,MAAOF,EAAcG,IAAI,iBAAkB,E,6BCTzE,MAAMC,GAAU,sFAKVC,GAAO,+OAgBPC,GAAkB,kKAWlBC,GAAmB,uLASnBC,GAAQ,uIASRC,GAAK,qJAULC,GAAe,whBAqCfC,GAAcd,EAAAA,EAAAA,GAAOe,EAAAA,EAAe,oBAAtBf,CAAuB,4CAyC3C,MArC2DE,IAGpD,IAHqD,aAC1DC,EAAY,OACZa,GACD,EACC,MAAM,KAAEC,EAAI,OAAEC,GAAWF,GACnB,MAAEG,EAAK,OAAEC,EAAM,SAAEC,GAAaH,EACpC,OACEd,EAAAA,EAAAA,IAACG,EAAU,MACTH,EAAAA,EAAAA,IAACI,EAAO,MACNJ,EAAAA,EAAAA,IAACK,EAAkB,MACjBL,EAAAA,EAAAA,IAACkB,EAAY,CAACnB,aAAcA,KAE5BC,EAAAA,EAAAA,IAAAA,MAAAA,MACEA,EAAAA,EAAAA,IAACO,EAAQ,KAAC,qBACVP,EAAAA,EAAAA,IAACQ,EAAK,KAAEK,MAIZb,EAAAA,EAAAA,IAACM,EAAmB,MAClBN,EAAAA,EAAAA,IAACS,EAAe,CAACU,KAAI,UAAYJ,IAC/Bf,EAAAA,EAAAA,IAACU,EAAW,CAACU,KAAMC,EAAAA,OACnBrB,EAAAA,EAAAA,IAAAA,MAAAA,KAAMe,KAERf,EAAAA,EAAAA,IAACS,EAAe,CAACU,KAAMH,EAAQM,OAAO,WACpCtB,EAAAA,EAAAA,IAACU,EAAW,CAACU,KAAMG,EAAAA,OACnBvB,EAAAA,EAAAA,IAAAA,MAAAA,KAAK,YAEPA,EAAAA,EAAAA,IAACS,EAAe,CAACU,KAAMF,EAAUK,OAAO,WACtCtB,EAAAA,EAAAA,IAACU,EAAW,CAACU,KAAMI,EAAAA,OACnBxB,EAAAA,EAAAA,IAAAA,MAAAA,KAAK,yBAIA,C","sources":["webpack://gatsby-starter-default/./src/components/Main/ProfileImage.tsx","webpack://gatsby-starter-default/./src/components/Main/Introduction.tsx"],"sourcesContent":["import React, { FunctionComponent } from 'react'\nimport styled from '@emotion/styled'\nimport { GatsbyImage, IGatsbyImageData } from 'gatsby-plugin-image'\n\ntype ProfileImageProps = {\n  profileImage: IGatsbyImageData\n}\n\nconst ProfileImageWrapper = styled(GatsbyImage)`\n  width: 120px;\n  height: 120px;\n  margin-bottom: 30px;\n  border-radius: 50%;\n\n  @media (max-width: 768px) {\n    width: 80px;\n    height: 80px;\n  }\n`\n\nconst ProfileImage: FunctionComponent<ProfileImageProps> = ({\n  profileImage,\n}) => {\n  return <ProfileImageWrapper image={profileImage} alt=\"Profile Image\" />\n}\n\nexport default ProfileImage\n","import React, { FunctionComponent } from 'react'\nimport styled from '@emotion/styled'\nimport { IGatsbyImageData } from 'gatsby-plugin-image'\nimport ProfileImage from './ProfileImage'\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faEnvelope } from '@fortawesome/free-solid-svg-icons'\nimport { faGithub, faLinkedin } from '@fortawesome/free-brands-svg-icons'\nimport { authorType } from 'types/siteData.type'\n\ntype IntroductionProps = {\n  profileImage: IGatsbyImageData\n  author: authorType\n}\n\nconst Background = styled.div`\n  width: 100%;\n  color: #ffffff;\n`\n\nconst Wrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\n  width: 768px;\n  height: 350px;\n  margin: 0 auto;\n\n  @media (max-width: 768px) {\n    width: 95%;\n    height: 250px;\n    padding: 0 15px;\n  }\n`\n\nconst PorfileLeftWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  width: 40%;\n  align-items: center;\n\n  @media (max-width: 768px) {\n    width: 50%;\n  }\n`\n\nconst PorfileRightWrapper = styled.div`\n  display: flex;\n  flex-direction: column;\n  height: 55%;\n  justify-content: flex-start;\n  color: rgba(255, 255, 255, 0.88);\n  padding-left: 40px;\n`\n\nconst SubTitle = styled.div`\n  font-size: 20px;\n  font-weight: 400;\n\n  @media (max-width: 768px) {\n    font-size: 15px;\n  }\n`\n\nconst Title = styled.div`\n  margin-top: 5px;\n  font-size: 35px;\n  font-weight: 700;\n\n  @media (max-width: 768px) {\n    font-size: 20px;\n  }\n`\n\nconst IconTextWrapper = styled.a`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  font-size: 18px;\n  margin-top: 15px;\n\n  // underline animation\n  position: relative;\n  color: #ffffff;\n  text-decoration: none;\n  width: fit-content;\n\n  @media (max-width: 768px) {\n    font-size: 14px;\n    width: 100%;\n  }\n\n  &::after {\n    content: '';\n    position: absolute;\n    width: 100%;\n    transform: scaleX(0);\n    height: 2px;\n    bottom: 0;\n    left: 0;\n    background-color: rgba(255, 255, 255, 0.88);\n    transform-origin: bottom right;\n    transition: transform 0.25s ease-out;\n  }\n\n  &:hover::after {\n    transform: scaleX(1);\n    transform-origin: bottom left;\n  }\n`\n\nconst IconWrapper = styled(FontAwesomeIcon)`\n  margin-right: 5px;\n`\n\nconst Introduction: FunctionComponent<IntroductionProps> = ({\n  profileImage,\n  author,\n}) => {\n  const { name, social } = author\n  const { email, github, linkedIn } = social\n  return (\n    <Background>\n      <Wrapper>\n        <PorfileLeftWrapper>\n          <ProfileImage profileImage={profileImage} />\n\n          <div>\n            <SubTitle>Junior Developer</SubTitle>\n            <Title>{name}</Title>\n          </div>\n        </PorfileLeftWrapper>\n\n        <PorfileRightWrapper>\n          <IconTextWrapper href={`mailto:${email}`}>\n            <IconWrapper icon={faEnvelope} />\n            <div>{email}</div>\n          </IconTextWrapper>\n          <IconTextWrapper href={github} target=\"_blank\">\n            <IconWrapper icon={faGithub} />\n            <div>shaqok</div>\n          </IconTextWrapper>\n          <IconTextWrapper href={linkedIn} target=\"_blank\">\n            <IconWrapper icon={faLinkedin} />\n            <div>Daniel Daeyeon Kim</div>\n          </IconTextWrapper>\n        </PorfileRightWrapper>\n      </Wrapper>\n    </Background>\n  )\n}\n\nexport default Introduction\n"],"names":["ProfileImageWrapper","_styled","GatsbyImage","_ref","profileImage","___EmotionJSX","image","alt","Background","Wrapper","PorfileLeftWrapper","PorfileRightWrapper","SubTitle","Title","IconTextWrapper","IconWrapper","FontAwesomeIcon","author","name","social","email","github","linkedIn","ProfileImage","href","icon","faEnvelope","target","faGithub","faLinkedin"],"sourceRoot":""}