{"version":3,"sources":["webpack://gatsby-casper/./src/pages/about.tsx"],"names":["PageTemplate","AuthorHeader","AuthorMeta","AuthorBio","AuthHeaderContent","AuthorProfileBioImage","data","css","className","SiteHeader","SiteArchiveHeader","outer","SiteNavMain","inner","isHome","backgroundImage","authorYaml","profile_image","childImageSharp","fluid","src","SiteHeaderBackground","style","marginTop","AuthorProfileImage","avatar","alt","id","bio","location","SiteMain","PostFull","NoImage","config","SocialLinkFb","href","title","target","rel"],"mappings":"yQAmCA,MAAMA,EAAY,0FAkPZC,EAAY,mNAgBZC,EAAU,qbAiCVC,GAAS,+KAWTC,GAAiB,4MAYjBC,EAAqB,6JAmB3B,UAlS6C,EAAGC,WAAH,aAC3C,QAAC,IAAD,MACE,QAAC,IAAD,MACE,yCAEF,QAAC,IAAD,CAASC,IAAKP,IACZ,kBAAQQ,UAAU,+BAA+BD,IAAG,CAAGE,KAAYC,KAAf,SAClD,eAAKH,IAAG,CAAGI,KAAOC,KAAV,SACN,eAAKL,IAAKM,OACR,QAAC,KAAD,CAASC,QAAQ,OAGrB,QAAC,KAAD,CACEC,gBAAe,UAAET,EAAKU,WAAWC,qBAAlB,aAAE,EAA+BC,gBAAgBC,MAAMC,IACtEb,IAAG,CAAGI,KAAOU,KAAV,OACHb,UAAU,2BAEV,eAAKD,IAAKM,OACR,QAAC,KAAD,CAAmBN,IAAKN,EAAcO,UAAU,sCAC9C,eACEc,MAAO,CAAEC,UAAW,OACpBhB,IAAG,CAAGiB,KAAoBnB,EAAvB,OACHe,IAAKd,EAAKU,WAAWS,OAAOP,gBAAgBC,MAAMC,IAClDM,IAAKpB,EAAKU,WAAWW,MAEvB,QAACvB,EAAD,CAAmBI,UAAU,0BAC3B,QAAC,KAAD,CAAWA,UAAU,cAAcF,EAAKU,WAAWW,IAClDrB,EAAKU,WAAWY,MAAO,QAACzB,EAAD,CAAWK,UAAU,cAAcF,EAAKU,WAAWY,MAC3E,eAAKrB,IAAKL,EAAYM,UAAU,eAC7BF,EAAKU,WAAWa,WACf,eAAKrB,UAAU,mBACZF,EAAKU,WAAWa,iBAgCjC,gBAAMF,GAAG,YAAYnB,UAAU,YAAYD,IAAG,CAAGuB,KAAUnB,KAAb,SAC5C,eAAKJ,IAAKM,OACR,mBAASL,UAAU,YAAYD,IAAG,CAAGwB,WAAUC,UAAb,SAChC,QAAC,IAAD,CAAiBxB,UAAU,sBACzB,eAAKA,UAAU,iBACb,uCACA,mBAcCyB,gBACC,aACE1B,IAAK2B,KACLC,KAAMF,cACNG,MAAM,YACNC,OAAO,SACPC,IAAI,wBAEJ,QAAC,IAAD,MAPF,cAQE,oBACA,oBAGHL,eACC,aACE1B,IAAK2B,KACLC,KAAMF,aACNG,MAAM,WACNC,OAAO,SACPC,IAAI,wBAEJ,QAAC,IAAD,MAPF,aAQE,oBACA,sBAIN,oBACA,6BA7CF,oDAiDE,oBAEA,8BAnDF,sCAuDE,oBACA,oBACA,oBACA,wBAKR,QAAC,IAAD","file":"4778eb91-7f8cf6ffa7537bc589c4.js","sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { graphql } from 'gatsby';\nimport { FluidObject } from 'gatsby-image';\nimport React from 'react';\nimport { Helmet } from 'react-helmet';\nimport { Footer } from '../components/Footer';\nimport SiteNav, { SocialLinks } from '../components/header/SiteNav';\nimport { Twitter } from '../components/icons/twitter';\nimport { PostFullContent } from '../components/PostContent';\nimport { Wrapper } from '../components/Wrapper';\nimport IndexLayout from '../layouts';\nimport { colors } from '../styles/colors';\nimport {\n  AuthorProfileImage,\n  inner,\n  outer,\n  ResponsiveHeaderBackground,\n  SiteArchiveHeader,\n  SiteHeader,\n  SiteHeaderBackground,\n  SiteHeaderContent,\n  SiteMain,\n  SiteNavMain,\n  SiteTitle,\n  SocialLink,\n  SocialLinkFb,\n} from '../styles/shared';\nimport { NoImage, PageContext, PostFull } from '../templates/post';\nimport config from '../website-config';\nimport { Facebook } from '../components/icons/facebook';\nimport { Youtube } from '../components/icons/youtube';\nimport { Instagram } from '../components/icons/instagram';\nimport { Linkedin } from '../components/icons/linkedin';\n\nconst PageTemplate = css`\n  .site-main {\n    margin-top: 64px;\n    padding-bottom: 4vw;\n    background: #fff;\n  }\n`;\n\ninterface AuthorTemplateProps {\n  location: Location;\n  data: {\n    logo: {\n      childImageSharp: {\n        fluid: any;\n      };\n    };\n    allMarkdownRemark: {\n      totalCount: number;\n      edges: Array<{\n        node: PageContext;\n      }>;\n    };\n    authorYaml: {\n      id: string;\n      website?: string;\n      twitter?: string;\n      facebook?: string;\n      location?: string;\n      profile_image?: {\n        childImageSharp: {\n          fluid: FluidObject;\n        };\n      };\n      bio?: string;\n      avatar: {\n        childImageSharp: {\n          fluid: FluidObject;\n        };\n      };\n    };\n  };\n}\n\nconst About: React.FC<AuthorTemplateProps> = ({ data }: AuthorTemplateProps) => (\n  <IndexLayout>\n    <Helmet>\n      <title>About Kazzuyak</title>\n    </Helmet>\n    <Wrapper css={PageTemplate}>\n      <header className=\"site-archive-header no-image\" css={[SiteHeader, SiteArchiveHeader]}>\n        <div css={[outer, SiteNavMain]}>\n          <div css={inner}>\n            <SiteNav isHome={false} />\n          </div>\n        </div>\n        <ResponsiveHeaderBackground\n          backgroundImage={data.authorYaml.profile_image?.childImageSharp.fluid.src}\n          css={[outer, SiteHeaderBackground]}\n          className=\"site-header-background\"\n        >\n          <div css={inner}>\n            <SiteHeaderContent css={AuthorHeader} className=\"site-header-content author-header\">\n              <img\n                style={{ marginTop: '8px' }}\n                css={[AuthorProfileImage, AuthorProfileBioImage]}\n                src={data.authorYaml.avatar.childImageSharp.fluid.src}\n                alt={data.authorYaml.id}\n              />\n              <AuthHeaderContent className=\"author-header-content\">\n                <SiteTitle className=\"site-title\">{data.authorYaml.id}</SiteTitle>\n                {data.authorYaml.bio && <AuthorBio className=\"author-bio\">{data.authorYaml.bio}</AuthorBio>}\n                <div css={AuthorMeta} className=\"author-meta\">\n                  {data.authorYaml.location && (\n                    <div className=\"author-location\">\n                      {data.authorYaml.location}\n                    </div>\n                  )}\n\n                  {/* {data.authorYaml.twitter && (\n                    <AuthorSocialLink className=\"author-social-link\">\n                      <AuthorSocialLinkAnchor\n                        href={`https://twitter.com/${data.authorYaml.twitter}`}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                      >\n                        Twitter\n                      </AuthorSocialLinkAnchor>\n                    </AuthorSocialLink>\n                  )}\n                  {data.authorYaml.facebook && (\n                    <AuthorSocialLink className=\"author-social-link\">\n                      <AuthorSocialLinkAnchor\n                        href={`https://www.facebook.com/${data.authorYaml.facebook}`}\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                      >\n                        Facebook\n                      </AuthorSocialLinkAnchor>\n                    </AuthorSocialLink>\n                  )} */}\n                </div>\n              </AuthHeaderContent>\n            </SiteHeaderContent>\n          </div>\n        </ResponsiveHeaderBackground>\n      </header>\n      <main id=\"site-main\" className=\"site-main\" css={[SiteMain, outer]}>\n        <div css={inner}>\n          <article className=\"post page\" css={[PostFull, NoImage]}>\n            <PostFullContent className=\"post-full-content\">\n              <div className=\"post-content\">\n                <h2>Social Platforms</h2>\n                <br />\n                {/* {config.youtube && (\n                  <a\n                    css={SocialLinkFb}\n                    href={config.youtube}\n                    title=\"Youtube\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <Youtube /> Youtube\n                    <br />\n                    <br />\n                  </a>\n                )} */}\n                {config.instagram && (\n                  <a\n                    css={SocialLinkFb}\n                    href={config.instagram}\n                    title=\"Instagram\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <Instagram /> Instagram\n                    <br />\n                    <br />\n                  </a>\n                )}\n                {config.linkedin && (\n                  <a\n                    css={SocialLinkFb}\n                    href={config.linkedin}\n                    title=\"LinkedIn\"\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                  >\n                    <Linkedin /> LinkedIn\n                    <br />\n                    <br />\n                  </a>\n                )}\n              </div>\n              <hr />\n              <h2>Contact</h2>\n\n              Feel free to message me on any social platforms.\n\n              <hr />\n\n              <h2>About Me</h2>\n\n              I&apos;m still writting this section...\n\n              <br />\n              <br />\n              <br />\n              <br />\n            </PostFullContent>\n          </article>\n        </div>\n      </main>\n      <Footer />\n    </Wrapper>\n  </IndexLayout>\n);\n\nexport const pageQuery = graphql`\n  query($author: String) {\n    authorYaml(id: { eq: $author }) {\n      id\n      website\n      twitter\n      bio\n      facebook\n      location\n      avatar {\n        childImageSharp {\n          fluid(quality: 100, srcSetBreakpoints: [40, 80, 120]) {\n            ...GatsbyImageSharpFluid\n          }\n        }\n      }\n    }\n    allMarkdownRemark(\n      filter: { frontmatter: { draft: { ne: true } } }\n      sort: { fields: [frontmatter___date], order: DESC }\n      limit: 2000\n    ) {\n      edges {\n        node {\n          excerpt\n          frontmatter {\n            title\n            excerpt\n            tags\n            date\n            draft\n            image {\n              childImageSharp {\n                fluid(maxWidth: 3720) {\n                  ...GatsbyImageSharpFluid\n                }\n              }\n            }\n            author {\n              id\n              bio\n              avatar {\n                children {\n                  ... on ImageSharp {\n                    fluid(quality: 100) {\n                      ...GatsbyImageSharpFluid\n                    }\n                  }\n                }\n              }\n            }\n          }\n          fields {\n            readingTime {\n              text\n            }\n            layout\n            slug\n          }\n        }\n      }\n    }\n  }\n`;\n\nconst AuthorHeader = css`\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: flex-start;\n  padding: 10vw 0 10px;\n  align-items: center;\n\n  @media (max-width: 500px) {\n    padding: 10px 0 0;\n\n    /* no image */\n    padding-bottom: 10px;\n  }\n`;\n\nconst AuthorMeta = css`\n  z-index: 10;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  margin: 0 0 0 1px;\n  font-size: 1.2rem;\n  font-weight: 400;\n  letter-spacing: 0.2px;\n  text-transform: uppercase;\n  white-space: nowrap;\n\n  .author-location + .author-stats:before,\n  .author-stats + .author-social-link:before,\n  .author-social-link + .author-social-link:before {\n    content: '•';\n    display: inline-block;\n    margin: 0 12px;\n    color: #fff;\n    opacity: 0.6;\n  }\n\n  @media (max-width: 500px) {\n    margin-top: 8px;\n  }\n`;\n\n// const AuthorSocialLink = styled.span`\n//   display: inline-block;\n//   margin: 0;\n//   padding: 6px 0;\n// `;\n\nconst AuthorBio = styled.h2`\n  z-index: 10;\n  flex-shrink: 0;\n  margin: 6px 0 0;\n  max-width: 46em;\n  font-size: 2rem;\n  line-height: 1.3em;\n  font-weight: 400;\n  opacity: 0.8;\n`;\n\nconst AuthHeaderContent = styled.div`\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  margin: 5px 0 0 30px;\n  @media (max-width: 500px) {\n    align-items: center;\n    margin: 16px 0 0 0;\n  }\n`;\n\n// .site-header-content .author-profile-image\nconst AuthorProfileBioImage = css`\n  z-index: 10;\n  flex-shrink: 0;\n  margin: -4px 0 0;\n  width: 110px;\n  height: 110px;\n  box-shadow: rgba(255, 255, 255, 0.1) 0 0 0 6px;\n  border-radius: 100%;\n`;\n\n// const AuthorSocialLinkAnchor = styled.a`\n//   color: #fff;\n//   font-weight: 600;\n\n//   :hover {\n//     opacity: 1;\n//   }\n// `;\n\nexport default About;\n"],"sourceRoot":""}