{"version":3,"sources":["webpack://rayofhina-website/./src/containers/layout/hero-area/hero-area.stc.js","webpack://rayofhina-website/./src/containers/layout/hero-area/index.js","webpack://rayofhina-website/./src/containers/about/about-banner-area/about-banner-area.stc.js","webpack://rayofhina-website/./src/containers/about/about-banner-area/index.js","webpack://rayofhina-website/./src/containers/about/about-content-area/about-content-area.stc.js","webpack://rayofhina-website/./src/containers/about/about-content-area/index.js","webpack://rayofhina-website/./src/pages/about.js"],"names":["HeroWrapper","styled","device","HeroBG","BackgroundImage","HeroTextBox","PortfolioHeroArea","props","image","heading","preheading","headingStyle","textStyle","textHeadingStyle","fluid","childImageSharp","Container","Row","Col","defaultProps","fontSize","textTransform","fontFamily","fontWeight","as","color","lineHeight","AboutBannerWrap","heroImage","useStaticQuery","aboutJson","AboutContentWrap","html","markdownRemark","dangerouslySetInnerHTML","__html","lg","style","borderRadius","src","title","description","keywords","className"],"mappings":"4QAMaA,EAAcC,6BAAH,oEAAGA,CAAH,6NAIlBC,WAGAA,WAGAA,WAiBOC,GAASF,aAAOG,KAAV,0EAAGH,CAAH,wJAWNI,EAAcJ,yBAAH,oEAAGA,CAAH,6IAKlBC,UAGAA,YC5CAI,EAAoB,SAACC,GAAW,IAC3BC,EAA0ED,EAA1EC,MAAOC,EAAmEF,EAAnEE,QAASC,EAA0DH,EAA1DG,WAAYC,EAA8CJ,EAA9CI,aAAcC,EAAgCL,EAAhCK,UAAWC,EAAqBN,EAArBM,iBAE5D,OACI,gBAACb,EAAD,KACI,gBAACG,EAAD,CAAQW,MAAON,EAAMO,gBAAgBD,QACrC,gBAACE,EAAA,EAAD,KACI,gBAACC,EAAA,EAAD,KACI,gBAACC,EAAA,EAAD,KACI,gBAACb,EAAD,KACKK,GAAc,gBAAC,IAAD,iBAAUG,EAAsBD,GAAYF,GAC1DD,GAAW,gBAAC,IAAD,iBAAaI,EAAsBF,GAAeF,SAe1FH,EAAkBa,aAAe,CAC7BP,UAAW,CACPQ,SAAU,CAAC,OAAQ,OAAQ,OAAQ,QACnCC,cAAe,YACfC,WAAY,aACZC,WAAY,OAEhBZ,aAAc,CACVa,GAAI,KACJJ,SAAU,CAAC,OAAQ,OAAQ,OAAQ,QACnCC,cAAe,YACfC,WAAY,aACZC,WAAY,OAEhBV,iBAAkB,CACdY,MAAO,OACPC,WAAY,EACZH,WAAY,YAIpB,S,6KCrDaI,EAAkB1B,yBAAH,6EAAGA,CAAH,gDC2B5B,EAtBwB,WACpB,IAaM2B,GAbOC,oBAAe,cAaLC,UAAUtB,MACjC,OACI,gBAACmB,EAAD,KACI,gBAAC,IAAD,CAAUnB,MAAOoB,EAAWlB,WAAW,aAAaD,QAAQ,kB,mECpB3DsB,EAAmB9B,6BAAH,mFAAGA,CAAH,iIAEvBC,UAGAA,YCyBN,EA3ByB,SAACK,GACtB,IAOOyB,GAPWH,oBAAe,cAORI,eAAlBD,KAEP,OACI,gBAACD,EAAD,KACI,gBAACf,EAAA,EAAD,KACI,gBAACC,EAAA,EAAD,KACI,gBAACC,EAAA,EAAD,KAAK,gBAAC,IAAD,CAASM,GAAG,MAAZ,wCAET,gBAACP,EAAA,EAAD,KACI,gBAACC,EAAA,EAAD,CAAKgB,wBAAyB,CAACC,OAAQH,GAAOI,GAAI,IAClD,gBAAClB,EAAA,EAAD,CAAKkB,GAAI,GACL,uBAAKC,MAAO,CAACC,aAAc,GAAIC,IAAI,4BCF3D,EAhBkB,kBAChB,gBAAC,IAAD,KACE,gBAAC,IAAD,CACIC,MAAM,QACNC,YAAY,yBACZC,SAAU,CAAC,QAAS,WAAY,kBAEpC,gBAAC,IAAD,MACA,uBAAKC,UAAU,gBACX,gBAAC,EAAD,MACA,gBAAC,EAAD,OAEJ,gBAAC,IAAD","file":"component---src-pages-about-js-19b6ace4caebac193e4c.js","sourcesContent":["import styled from 'styled-components';\nimport BackgroundImage from 'gatsby-background-image'\nimport { Container } from 'reactstrap';\nimport BannerShape from '../../../assets/img/home-one-banner-shape.png'\nimport {device} from '../../../theme'\n\nexport const HeroWrapper = styled.section `\n    height: 300px;\n    position: relative;\n    margin-bottom: 50px;\n    ${device.xsmall}{\n        height: 300px;\n    }\n    ${device.medium}{\n        height: 400px;\n    }\n    ${device.large}{\n        height: 500px;\n    }\n    &:before{\n        position: absolute;\n        content: '';\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 1;\n    }\n    .row, .col {\n        position: initial\n    }\n`;\n\nexport const HeroBG = styled(BackgroundImage) `\n    position: absolute !important;\n    background-position: top center;\n    background-repeat: no-repeat;\n    background-size: cover;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const HeroTextBox = styled.div `\n    position: absolute;\n    bottom: 52px;\n    text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.8);\n\n    ${device.small}{\n        bottom: 56px;\n    }\n    ${device.medium}{\n        bottom: 106px;\n    }\n    * {\n        position: relative;\n        z-index: 9;\n    }\n`; ","import React from 'react'\nimport PropTypes from 'prop-types'\nimport { Container, Row, Col } from 'reactstrap';\nimport { useStaticQuery, graphql } from 'gatsby'\nimport Heading from '../../../components/shared/heading'\nimport Text from '../../../components/shared/text'\nimport { HeroWrapper, HeroBG, HeroTextBox } from './hero-area.stc'\n\nconst PortfolioHeroArea = (props) => {\n    const {image, heading, preheading, headingStyle, textStyle, textHeadingStyle } = props;\n\n    return (\n        <HeroWrapper>\n            <HeroBG fluid={image.childImageSharp.fluid} />\n            <Container>\n                <Row>\n                    <Col>\n                        <HeroTextBox>\n                            {preheading && <Text {...textHeadingStyle} {...textStyle}>{preheading}</Text>}\n                            {heading && <Heading {...textHeadingStyle} {...headingStyle}>{heading}</Heading>}\n                        </HeroTextBox>\n                    </Col>\n                </Row>\n            </Container>\n        </HeroWrapper>\n    )\n}\n\nPortfolioHeroArea.propTypes = {\n    headingStyle: PropTypes.object,\n    textStyle: PropTypes.object,\n    textHeadingStyle: PropTypes.object\n}\n\nPortfolioHeroArea.defaultProps = {\n    textStyle: {        \n        fontSize: ['42px', '48px', '48px', '64px'],\n        textTransform: 'uppercase',\n        fontFamily: 'montserrat',\n        fontWeight: '300'\n    },\n    headingStyle: {\n        as: 'h1',\n        fontSize: ['42px', '48px', '48px', '64px'],\n        textTransform: 'uppercase',\n        fontFamily: 'montserrat',\n        fontWeight: '500'\n    },\n    textHeadingStyle: {\n        color: '#fff',\n        lineHeight: 1,\n        fontWeight: 'regular'\n    }\n}\n\nexport default PortfolioHeroArea\n","import styled from \"styled-components\";\n\nexport const AboutBannerWrap = styled.div `\n    margin-bottom: 50px;\n    img{\n        border-radius: 5px;\n    }\n`;","import React from 'react'\nimport {Container, Row, Col} from 'reactstrap'\nimport {useStaticQuery, graphql} from 'gatsby'\nimport Image from '../../../components/image'\nimport HeroArea from '../../layout/hero-area'\nimport {AboutBannerWrap} from './about-banner-area.stc'\n\nconst AboutBannerArea = () => {\n    const data = useStaticQuery(graphql `\n        query AboutBannerQuery {\n            aboutJson(id: {eq: \"about-hero-content\"}){\n                image {\n                    childImageSharp {\n                        fluid(maxWidth: 1920, quality: 100) {\n                            ...GatsbyImageSharpFluid_withWebp\n                        }\n                    }\n                }\n            }\n        }      \n    `);\n    const heroImage = data.aboutJson.image;\n    return (\n        <AboutBannerWrap>\n            <HeroArea image={heroImage} preheading=\"My name is\" heading=\"Carina Wang\"/>\n        </AboutBannerWrap>\n    )\n}\n\nexport default AboutBannerArea\n","import styled from \"styled-components\";\nimport { themeGet } from '@styled-system/theme-get';\nimport {device} from '../../../theme'\n\nexport const AboutContentWrap = styled.section `\n    padding-bottom: 56px;\n    ${device.small}{\n        padding-bottom: 76px;\n    }\n    ${device.medium}{\n        padding-bottom: 96px;\n    }\n\n    h1, h2, h3, h4 {\n        margin-bottom: 26px;\n    }\n\n    p {\n        margin-bottom: 24px;\n    }\n`;","import React from 'react'\nimport {Container, Row, Col} from 'reactstrap'\nimport {useStaticQuery, graphql} from 'gatsby'\nimport Heading from '../../../components/shared/heading'\nimport Text from '../../../components/shared/text'\nimport {AboutContentWrap} from './about-content-area.stc'\n\nconst AboutContentArea = (props) => {\n    const aboutData = useStaticQuery(graphql `\n        query AboutContentQuery {\n            markdownRemark(frontmatter: {type: {eq: \"about\"}}) {\n                html\n            }\n        }\n    `)\n    const {html} = aboutData.markdownRemark\n\n    return (\n        <AboutContentWrap>\n            <Container>\n                <Row>\n                    <Col><Heading as=\"h3\">I'm a Digital Designer from Denver</Heading></Col>\n                </Row>\n                <Row>\n                    <Col dangerouslySetInnerHTML={{__html: html}} lg={7}></Col>\n                    <Col lg={5}>\n                        <img style={{borderRadius: 5}} src=\"/about-cosplay.jpg\" />\n                    </Col>\n                </Row>\n            </Container>\n        </AboutContentWrap>\n    )\n}\n\nexport default AboutContentArea\n\n\n  ","import React from \"react\"\nimport SEO from '../components/seo'\nimport Layout from \"../containers/layout/layout\"\nimport Header from '../containers/layout/header'\nimport Footer from '../containers/layout/footer'\nimport AboutBannerArea from '../containers/about/about-banner-area'\nimport AboutContentArea from '../containers/about/about-content-area'\n \nconst AboutPage = () => (\n  <Layout>\n    <SEO \n        title=\"About\" \n        description=\"About Page description\"\n        keywords={[\"about\", \"about me\", \"my portfolio\"]}\n    />\n    <Header/>\n    <div className=\"main-content\">\n        <AboutBannerArea/>\n        <AboutContentArea/>\n    </div>\n    <Footer/>\n  </Layout>\n)\n\nexport default AboutPage\n"],"sourceRoot":""}