{"version":3,"file":"component---src-pages-about-tsx-f138b1683b3956b3c172.js","mappings":"yOAGaA,EAAuBC,EAAAA,QAAAA,GAAAA,WAAS,qFAATA,CAAS,iCAIhCC,EAAUD,EAAAA,QAAAA,IAAAA,WAAU,wEAAVA,CAAU,6rBAgCpBE,EAAoBF,EAAAA,QAAAA,GAAAA,WAAS,kFAATA,CAAS,mXAQpCC,GAQOE,EAAAA,EAAAA,GAAS,mBAAoB,Y,YChB1C,EAtBmE,SAAH,GAGzD,IAFLC,EAAK,EAALA,MACGC,GAAK,YAER,OACE,gBAACN,EAAyBM,EACvBD,EAAME,KAAI,SAACC,EAAMC,GAAK,OACrB,gBAACN,EAAiB,CAACO,IAAKD,GACtB,qBAAGE,KAAMH,EAAKI,IAAK,aAAW,kBAC3BJ,EAAKK,MAAQ,QAEC,MAAhBL,EAAKM,SAAoC,KAAjBN,EAAKM,QAC5B,gBAACZ,EAAO,KAAEM,EAAKM,SAAW,eAE1B,GAEgB,IAI5B,E,sBClCaC,EAAed,EAAAA,QAAAA,IAAAA,WAAU,+DAAVA,CAAU,wMA0CzBe,GA/BiBf,EAAAA,QAAAA,IAAAA,WAAU,iEAAVA,CAAU,uXAQ3BG,EAAAA,EAAAA,GAAS,mBAAoB,YAahBH,EAAAA,QAAAA,IAAAA,WAAU,6DAAVA,CAAU,4JAURA,EAAAA,QAAAA,IAAAA,WAAU,+DAAVA,CAAU,uUAQzBG,EAAAA,EAAAA,GAAS,mBAAoB,aAW7Ba,EAAiBhB,EAAAA,QAAAA,IAAAA,WAAU,iEAAVA,CAAU,uUC7ClCiB,EAAc,CAClB,CACEL,KAAM,gBAAC,MAAc,MACrBD,IAAK,0CACLE,QAAS,YAEX,CACED,KAAM,gBAAC,MAAe,MACtBD,IAAK,4CACLE,QAAS,aAEX,CACED,KAAM,gBAAC,MAAa,MACpBD,IAAK,mCACLE,QAAS,WAEX,CACED,KAAM,gBAAC,MAAc,MACrBD,IAAK,0CACLE,QAAS,aAEX,CACED,KAAM,gBAAC,MAAe,MACtBD,IAAK,8BACLE,QAAS,aAwDb,EAlDmD,YACpCK,EAAAA,EAAAA,gBAAe,aAkB5B,OACE,gBAACJ,EAAY,KASX,gBAACC,EAAY,KACX,mDACA,qMAKA,mNAMA,gBAACC,EAAc,KACb,gBAAC,EAAa,CAACZ,MAAOa,MAKhC,EC7EA,EAb2D,WACzD,OACE,gBAAC,IAAM,KACL,gBAAC,IAAG,CACFE,MAAM,QACNC,YAAY,kDAGd,gBAAC,EAAK,MAGZ,C","sources":["webpack://@blog/wbm/./src/components/social-profile/social-profile.style.tsx","webpack://@blog/wbm/./src/components/social-profile/social-profile.tsx","webpack://@blog/wbm/./src/containers/about/style.tsx","webpack://@blog/wbm/./src/containers/about/index.tsx","webpack://@blog/wbm/./src/pages/about.tsx"],"sourcesContent":["import styled from 'styled-components';\r\nimport { themeGet } from '@styled-system/theme-get';\r\n\r\nexport const SocialProfileWrapper = styled.ul`\r\n display: inline-flex;\r\n`;\r\n\r\nexport const Tooltip = styled.div`\r\n position: absolute;\r\n background-color: #fff;\r\n pointer-events: none;\r\n padding: 0.4rem 0.8rem;\r\n border-radius: 3px;\r\n color: #333;\r\n font-size: 13px;\r\n bottom: 90%;\r\n left: 50%;\r\n opacity: 0;\r\n white-space: nowrap;\r\n visibility: hidden;\r\n z-index: 999;\r\n box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2);\r\n transform: translate3d(-50%, 0, 0);\r\n transition: 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);\r\n\r\n &:after {\r\n content: '';\r\n position: absolute;\r\n width: 0;\r\n height: 0;\r\n border-top: 6px solid #fff;\r\n border-right: 6px solid transparent;\r\n border-left: 6px solid transparent;\r\n bottom: -6px;\r\n left: 50%;\r\n transform: translateX(-50%);\r\n }\r\n`;\r\n\r\nexport const SocialProfileItem = styled.li`\r\n list-style: none;\r\n position: relative;\r\n margin-right: 20px;\r\n &:last-child {\r\n margin-right: 0;\r\n }\r\n &:hover {\r\n ${Tooltip} {\r\n opacity: 1;\r\n visibility: visible;\r\n bottom: calc(100% + 5px);\r\n }\r\n }\r\n\r\n a {\r\n color: ${themeGet('colors.textColor', '#292929')};\r\n font-size: 22px;\r\n padding: 0.2em;\r\n display: block;\r\n svg {\r\n display: block;\r\n }\r\n }\r\n`;\r\n","import * as React from 'react';\r\nimport {\r\n SocialProfileWrapper,\r\n SocialProfileItem,\r\n Tooltip,\r\n} from './social-profile.style';\r\n\r\ntype SocialProfileProps = {\r\n items: SocialItem[];\r\n};\r\n\r\ntype SocialItem = {\r\n url: string;\r\n icon: React.ReactElement;\r\n tooltip?: string;\r\n};\r\n\r\nconst SocialProfile: React.FunctionComponent = ({\r\n items,\r\n ...props\r\n}) => {\r\n return (\r\n \r\n {items.map((item, index) => (\r\n \r\n \r\n {item.icon || 'icon'}\r\n \r\n {item.tooltip != null && item.tooltip !== '' ? (\r\n {item.tooltip || 'Social Link'}\r\n ) : (\r\n ''\r\n )}\r\n \r\n ))}\r\n \r\n );\r\n};\r\n\r\nexport default SocialProfile;\r\n","import styled from 'styled-components';\r\nimport { themeGet } from '@styled-system/theme-get';\r\n\r\nexport const AboutWrapper = styled.div`\r\n position: relative;\r\n padding: 90px 75px 0 75px;\r\n @media (max-width: 990px) {\r\n padding: 80px 45px 30px 45px;\r\n }\r\n @media (max-width: 575px) {\r\n padding: 60px 25px 0 25px;\r\n }\r\n`;\r\n\r\nexport const AboutPageTitle = styled.div`\r\n margin-bottom: 45px;\r\n @media (max-width: 767px) {\r\n margin-bottom: 30px;\r\n }\r\n h2 {\r\n font-size: 30px;\r\n font-weight: 700;\r\n color: ${themeGet('colors.textColor', '#292929')};\r\n line-height: 1.53;\r\n margin-bottom: 10px;\r\n @media (max-width: 990px) {\r\n font-size: 26px;\r\n }\r\n @media (max-width: 767px) {\r\n font-size: 22px;\r\n margin-bottom: 10px;\r\n }\r\n }\r\n`;\r\n\r\nexport const AboutImage = styled.div`\r\n margin-bottom: 90px;\r\n @media (max-width: 990px) {\r\n margin-bottom: 60px;\r\n }\r\n @media (max-width: 767px) {\r\n margin-bottom: 40px;\r\n }\r\n`;\r\n\r\nexport const AboutDetails = styled.div`\r\n width: 870px;\r\n max-width: 100%;\r\n margin: 0 auto;\r\n\r\n h2 {\r\n font-size: 21px;\r\n font-weight: 500;\r\n color: ${themeGet('colors.textColor', '#292929')};\r\n margin-bottom: 40px;\r\n @media (max-width: 990px) {\r\n margin-bottom: 30px;\r\n }\r\n @media (max-width: 767px) {\r\n font-size: 18px;\r\n margin-bottom: 25px;\r\n }\r\n }\r\n`;\r\nexport const SocialProfiles = styled.div`\r\n margin-top: 60px;\r\n position: relative;\r\n @media (max-width: 767px) {\r\n margin-top: 40px;\r\n }\r\n\r\n &:before {\r\n content: '';\r\n width: 30px;\r\n height: 1px;\r\n background: #292929;\r\n display: block;\r\n margin-bottom: 60px;\r\n @media (max-width: 767px) {\r\n margin-bottom: 40px;\r\n }\r\n }\r\n`;\r\n","import * as React from 'react';\r\nimport { useStaticQuery, graphql } from 'gatsby';\r\nimport Image from 'gatsby-image';\r\nimport SocialProfile from '../../components/social-profile/social-profile';\r\nimport {\r\n IoLogoFacebook,\r\n IoLogoTwitter,\r\n IoLogoInstagram,\r\n IoLogoLinkedin,\r\n} from 'react-icons/io';\r\nimport { FaTelegramPlane } from 'react-icons/fa';\r\nimport {\r\n AboutWrapper,\r\n AboutImage,\r\n AboutPageTitle,\r\n AboutDetails,\r\n SocialProfiles,\r\n} from './style';\r\n\r\nconst SocialLinks = [\r\n {\r\n icon: ,\r\n url: 'https://www.facebook.com/webbrainsmedia',\r\n tooltip: 'Facebook',\r\n },\r\n {\r\n icon: ,\r\n url: 'https://www.instagram.com/webbrainsmedia/',\r\n tooltip: 'Instagram',\r\n },\r\n {\r\n icon: ,\r\n url: 'https://twitter.com/jainsahil846',\r\n tooltip: 'Twitter',\r\n },\r\n {\r\n icon: ,\r\n url: 'https://www.linkedin.com/in/sjcodebook/',\r\n tooltip: 'Linked In',\r\n },\r\n {\r\n icon: ,\r\n url: 'https://t.me/webbrainsmedia',\r\n tooltip: 'Telegram',\r\n },\r\n];\r\n\r\ninterface AboutProps {}\r\n\r\nconst About: React.FunctionComponent = () => {\r\n const Data = useStaticQuery(graphql`\r\n query {\r\n avatar: file(absolutePath: { regex: \"/about.jpg/\" }) {\r\n childImageSharp {\r\n fluid(maxWidth: 1770, quality: 90) {\r\n ...GatsbyImageSharpFluid\r\n }\r\n }\r\n }\r\n site {\r\n siteMetadata {\r\n author\r\n about\r\n }\r\n }\r\n }\r\n `);\r\n\r\n return (\r\n \r\n {/* \r\n

About WebBrainsMedia

\r\n */}\r\n\r\n {/* \r\n \"author\"\r\n */}\r\n\r\n \r\n

Hey there, what’s up?

\r\n

\r\n WebBrainsMedia is a tech blog created with the sole purpose of\r\n explaining complex tech in a simple and concise way thus creating\r\n value for budding developers out there.\r\n

\r\n

\r\n Here you will find blogs on the latest tech, tutorials on programming\r\n languages, explanations to data structure and algorithm concepts and\r\n questions, and much more... So stay tuned!!\r\n

\r\n\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default About;\r\n","import React from 'react'\r\nimport Layout from '../components/layout'\r\nimport SEO from '../components/seo'\r\nimport About from '../containers/about'\r\n\r\ntype AboutPageProps = {}\r\n\r\nconst AboutPage: React.FunctionComponent = () => {\r\n return (\r\n \r\n \r\n\r\n \r\n \r\n )\r\n}\r\n\r\nexport default AboutPage\r\n"],"names":["SocialProfileWrapper","styled","Tooltip","SocialProfileItem","themeGet","items","props","map","item","index","key","href","url","icon","tooltip","AboutWrapper","AboutDetails","SocialProfiles","SocialLinks","useStaticQuery","title","description"],"sourceRoot":""}