{"version":3,"sources":["webpack:///./src/components/article/warning-alert.js","webpack:///./src/pages/about.js","webpack:///./src/components/hero.js","webpack:///./src/components/article/affiliate-alert.js"],"names":["Alert","StyledFontAwesomeIcon","FontAwesomeIcon","Title","Message","WarningAlert","title","children","icon","faExclamationTriangle","Wrapper","Container","SectionImageRight","Attribution","BoldLink","AboutPage","data","location","pathname","description","image","hero","childImageSharp","fluid","photo","alt","href","target","rel","Left","Description","Right","Hero","AffiliateAlert","faInfoCircle"],"mappings":"8JAKA,IAAMA,EAAK,8TAILC,EAAwB,YAAOC,IAAP,qBAAH,gLAIrBC,EAAK,4HAILC,EAAO,8IAgBEC,IAZM,SAAC,GAAyB,IAAvBC,EAAsB,EAAtBA,MAAOC,EAAe,EAAfA,SAC9B,OACC,YAACP,EAAD,KACC,YAACC,EAAD,CAAuBO,KAAMC,MAC7B,uBACC,YAACN,EAAD,KAAQG,GACR,YAACF,EAAD,KAAUG,O,4LCdd,IAAMG,EAAO,oTAIPC,EAAS,oFAQTC,GAJgB,oKAIC,sKAIjBC,EAAW,sJAQXC,GAJW,0HAIH,qFA+CCC,UA3CG,SAAC,GAAwB,IAAtBC,EAAqB,EAArBA,KAAMC,EAAe,EAAfA,SACvB,OACI,YAAC,IAAD,KACI,YAAC,IAAD,CACIX,MAAM,QACNY,SAAUD,EAASC,WAEvB,YAAC,IAAD,CAAMZ,MAAM,QAAQa,YAAY,qCAAqCC,MAAOJ,EAAKK,KAAKC,gBAAgBC,QACtG,YAAC,IAAD,KACI,YAACb,EAAD,KACI,YAACC,EAAD,KACI,YAACC,EAAD,KACI,YAAC,IAAD,CAAKW,MAAOP,EAAKQ,MAAMF,gBAAgBC,MAAOE,IAAI,+BAClD,8BAAY,+DAAZ,uBAEJ,mCAAc,+CAAd,+IACA,kWACA,YAAC,IAAD,CAAcnB,MAAM,4BAA4BC,SAAS,odACzD,oGAA+E,iBAAGmB,KAAK,0DAA0DC,OAAO,SAASC,IAAI,uBAAsB,YAACd,EAAD,kDAA3L,KACA,klBACA,yUACA,YAAC,IAAD,SAIZ,YAAC,IAAD,KACI,YAACJ,EAAD,KACI,YAACC,EAAD,KACI,gEAA2C,iBAAGe,KAAK,uEAAR,yBAIvD,YAAC,IAAD,KACI,YAACb,EAAD,KACI,iEAA4C,iBAAGa,KAAK,0BAA0BC,OAAO,SAASC,IAAI,uBAAsB,YAACd,EAAD,iBAAxH,KACA,6CAAwB,iBAAGY,KAAK,sBAAsBC,OAAO,SAASC,IAAI,uBAAsB,YAACd,EAAD,gBAAhG,KACA,oCAAe,iBAAGY,KAAK,uBAAuBC,OAAO,SAASC,IAAI,uBAAsB,YAACd,EAAD,iBAAxF,U,iGCzEpB,IAAMJ,EAAO,0OAIPC,EAAS,2aAITkB,EAAI,yGAIJ1B,EAAK,kIAIL2B,EAAW,iIAIXC,EAAK,qIAoBIC,IAhBF,SAAC,GAAmC,IAAjC1B,EAAgC,EAAhCA,MAAOa,EAAyB,EAAzBA,YAAaC,EAAY,EAAZA,MAChC,OACI,YAACV,EAAD,KACI,YAACC,EAAD,KACI,YAACkB,EAAD,KACI,YAAC1B,EAAD,KAAQG,GACR,YAACwB,EAAD,KAAcX,IAElB,YAACY,EAAD,KACA,YAAC,IAAD,CAAKR,MAAOH,S,kGChC5B,IAAMpB,EAAK,6TAILC,EAAwB,YAAOC,IAAP,qBAAH,+KAIrBC,EAAK,4HAILC,EAAO,8IAgBE6B,IAZQ,WACtB,OACC,YAACjC,EAAD,KACC,YAACC,EAAD,CAAuBO,KAAM0B,MAC7B,uBACC,YAAC/B,EAAD,mBACA,YAACC,EAAD","file":"component---src-pages-about-js-0942410cd84f3f3908b5.js","sourcesContent":["import React from \"react\"\nimport tw, { styled } from \"twin.macro\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { faExclamationTriangle } from \"@fortawesome/free-solid-svg-icons\"\n\nconst Alert = styled.div`\n\t${tw`flex bg-orange-200 border-l-8 rounded-md border-orange-600 my-8 p-4`}\n`\n\nconst StyledFontAwesomeIcon = styled(FontAwesomeIcon)`\n    ${tw`m-4 text-orange-600 text-2xl md:text-4xl float-left`}\n`\n\nconst Title = styled.h3`\n\t${tw`text-black`}\n`\n\nconst Message = styled.p`\n\t${tw`text-black text-lg`}\n`\n\nconst WarningAlert = ({ title, children }) => {\n\treturn (\n\t\t<Alert>\n\t\t\t<StyledFontAwesomeIcon icon={faExclamationTriangle} />\n\t\t\t<div>\n\t\t\t\t<Title>{title}</Title>\n\t\t\t\t<Message>{children}</Message>\n\t\t\t</div>\n\t\t</Alert>\n\t)\n}\n\nexport default WarningAlert","import React from \"react\"\nimport { graphql } from \"gatsby\"\nimport tw, { styled } from \"twin.macro\"\nimport Img from \"gatsby-image\"\n\nimport Layout from \"../components/layout\"\nimport SEO from \"../components/seo\"\nimport Hero from \"../components/hero\"\nimport Section from \"../components/section/section\"\nimport SectionSubscribe from \"../components/section/section-subscribe\"\nimport AffiliateAlert from \"../components/article/affiliate-alert\"\nimport WarningAlert from \"../components/article/warning-alert\"\n\nconst Wrapper = styled.div`\n    ${tw`container flex flex-col items-center`}\n`\n\nconst Container = styled.div`\n    ${tw`max-w-4xl`}\n`\n\nconst SectionImageLeft = styled.div`\n    ${tw`hidden md:block md:w-7/12 float-left m-2`}\n`\n\nconst SectionImageRight = styled.div`\n    ${tw`hidden md:block md:w-7/12 float-right m-2`}\n`\n\nconst Attribution = styled.div`\n    ${tw`text-white text-center`}\n`\n\nconst CenterVideo = styled.div`\n    ${tw`flex items-center justify-center`}\n`\n\nconst BoldLink = styled.span`\n    ${tw`font-semibold`}\n`\n\nconst AboutPage = ({ data, location }) => {\n    return(\n        <Layout>\n            <SEO\n                title=\"About\"\n                pathname={location.pathname}\n            />\n            <Hero title=\"About\" description=\"Learn more about Pocket Shutterbug\" image={data.hero.childImageSharp.fluid} />\n            <Section>\n                <Wrapper>\n                    <Container>\n                        <SectionImageRight>\n                            <Img fluid={data.photo.childImageSharp.fluid} alt=\"iPhoto Autumn Leaves Photo\" />\n                            <figcaption><strong>Image by Free-Photos from Pixabay</strong>&emsp;(Source: Pixabay)</figcaption>\n                        </SectionImageRight>\n                        <p>Welcome to <strong>Pocket Shutterbug</strong>, bringing you a selection of the best news, tips, tutorials, and reviews to help you become a better iPhone photographer and videographer.</p>\n                        <p>Mobile phone camera technology is reaching a point where they can be used to shoot exceptionally high quality photos and videos. With the advent of advanced computational photography, techniques that were once only possible with expensive DSLR and mirrorless cameras are now possible with the phone that you carry in your pocket.</p>\n                        <WarningAlert title=\"Computational Photography\" children=\"Defines a type of photography where the image capture process uses sophisticated computing techniques to maximise image quality. For example, in Portrait Mode on an iPhone, it attempts to capture scenes that would typically be lit by professional studio lighting. In many cases, the iPhone takes multiple images and processes them to combine to produce a single image. This has only become possible with the increasing processing power of the more recent iPhones.\" />\n                        <p>To read more about computational photography, I recommend starting with the <a href=\"https://en.wikipedia.org/wiki/Computational_photography\" target=\"_blank\" rel=\"noopener noreferrer\"><BoldLink>computational photography Wikipedia page</BoldLink></a>.</p>\n                        <p>I have recently upgraded to the iPhone 12 Pro Max, and whilst I am still learning how to use the new camera system, it already amazes me the quality of the shots that have come straight out of the phone. Whilst I do enjoy editing photos in Apple Photos, Affinity Photo or Pixelmator on either my iPad or Mac, it is refreshing just selecting and sharing the best photos with minimal editing. The addition of 10-bit Dolby Vision video turns the iPhone into a very capable video camera as well. The footage I have taken so far already looks better than my Fujifilm camera.</p>\n                        <p>As I learn more about the new lens and sensors in the iPhone 12, I will be sharing my journey and experiences. Whilst I still love to shoot with my Fujifilm camera, I do not always carry it with me. Having such a capable camera in my pocket is a testament to the advances in smartphone camera technology.</p>\n                        <AffiliateAlert/>\n                    </Container>\n                </Wrapper>\n            </Section>\n            <Section>\n                <Wrapper>\n                    <Container>\n                        <p>If you would like to contact us, please <a href=\"mailto:hello@pocketshutterbug.com?subject=Hi%20Pocket%20Shutterbug!\">send us an email.</a></p>\n                    </Container>\n                </Wrapper>\n            </Section>\n            <Section>\n                <Attribution>\n                    <div>Pocket Shutterbug is proudly hosted on <a href=\"https://www.netlify.com\" target=\"_blank\" rel=\"noopener noreferrer\"><BoldLink>Netlify</BoldLink></a>.</div>\n                    <div>Vector graphics by <a href=\"https://icons8.com/\" target=\"_blank\" rel=\"noopener noreferrer\"><BoldLink>Icons8</BoldLink></a>.</div>\n                    <div>Images by <a href=\"https://pixabay.com/\" target=\"_blank\" rel=\"noopener noreferrer\"><BoldLink>Pixabay</BoldLink></a>.</div>\n                </Attribution>\n            </Section>\n        </Layout>\n    )\n}\n\nexport default AboutPage\n\nexport const query=graphql`\n    query {\n        hero: file(relativePath: { eq: \"mirage-welcome_400.png\" }) {\n            childImageSharp {\n                fluid(maxWidth: 400 quality: 100) {\n                    ...GatsbyImageSharpFluid_withWebp\n                }\n            }\n        }\n        photo: file(relativePath: { eq: \"phone-1031194_600.jpg\" }) {\n            childImageSharp {\n                fluid(maxWidth: 600 quality: 100) {\n                    ...GatsbyImageSharpFluid_withWebp\n                }\n            }\n        }\n    }\n`\n","import React from \"react\"\nimport tw, { styled } from \"twin.macro\"\nimport Img from \"gatsby-image\"\n\nconst Wrapper = styled.section`\n    ${tw`w-full m-0 p-0 bg-psb-dark-gray-400 text-white`}\n`\n\nconst Container = styled.div`\n    ${tw`container flex flex-row items-center w-11/12 mx-auto px-5 py-8`}\n`\n\nconst Left = styled.div`\n    ${tw`lg:w-4/5`}\n`\n\nconst Title = styled.h1`\n    ${tw`text-white`}\n`\n\nconst Description = styled.p`\n    ${tw`text-white`}\n`\n\nconst Right = styled.div`\n    ${tw`lg:w-1/5 hidden lg:block`}\n`\n\nconst Hero = ({ title, description, image }) => {\n    return(\n        <Wrapper>\n            <Container>\n                <Left>\n                    <Title>{title}</Title>\n                    <Description>{description}</Description>\n                </Left>\n                <Right>\n                <Img fluid={image} />\n                </Right>\n            </Container>\n        </Wrapper>\n    )\n}\n\nexport default Hero","import React from \"react\"\nimport tw, { styled } from \"twin.macro\"\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\"\nimport { faInfoCircle } from \"@fortawesome/free-solid-svg-icons\"\n\nconst Alert = styled.div`\n\t${tw`flex bg-blue-200 border-l-8 rounded-md border-blue-600 my-8 p-4`}\n`\n\nconst StyledFontAwesomeIcon = styled(FontAwesomeIcon)`\n    ${tw`m-4 text-blue-600 text-2xl md:text-4xl float-left`}\n`\n\nconst Title = styled.h3`\n\t${tw`text-black`}\n`\n\nconst Message = styled.p`\n\t${tw`text-black text-lg`}\n`\n\nconst AffiliateAlert = () => {\n\treturn (\n\t\t<Alert>\n\t\t\t<StyledFontAwesomeIcon icon={faInfoCircle} />\n\t\t\t<div>\n\t\t\t\t<Title>Disclosure</Title>\n\t\t\t\t<Message>I may earn a small commission for my endorsement, recommendation, testimonial, and/or link to any products or services from this website. Your purchase helps support my work in bringing you real information about the best game development and technology products. I am an independent blogger and the reviews are done based on my own opinions.</Message>\n\t\t\t</div>\n\t\t</Alert>\n\t)\n}\n\t\nexport default AffiliateAlert"],"sourceRoot":""}