{"version":3,"sources":["components/GlobalStyles.js","components/ToggleMode.js","components/Header.js","components/DisplayLottie.js","components/Shapes.js","icons/mail.svg","components/SocialMedia.js","components/Hero.js","App.js","index.js"],"names":["GlobalStyles","createGlobalStyle","ToggleModeStyled","styled","div","ToggleMode","useState","mode","setMode","useEffect","document","body","classList","add","remove","type","value","onChange","id","htmlFor","className","HeaderStyle","header","Header","to","DisplayLottie","defaultOptions","loop","autoplay","animationData","onClick","options","ShapesStyled","Shapes","SocialMediaStyled","SocialMedia","href","rel","target","src","mail","alt","HeroStyled","section","Hero","Coding","App","top","duration","distance","exact","path","ReactDOM","render","StrictMode","getElementById"],"mappings":"yMA+CeA,EA7CMC,YAAH,+vB,gCC+BZC,EAAmBC,IAAOC,IAAV,+8DA0GPC,EAxII,WAAO,IAAD,EACAC,oBAAS,GADT,mBACjBC,EADiB,KACXC,EADW,KAWxB,OARAC,qBAAU,YACI,IAATF,EACHG,SAASC,KAAKC,UAAUC,IAAI,cAE5BH,SAASC,KAAKC,UAAUE,OAAO,gBAE9B,CAACP,IAGH,eAACL,EAAD,WACC,uBAAOa,KAAK,WAAWC,MAAOT,EAAMU,SAAU,kBAAMT,GAASD,IAAOW,GAAG,oBAEvE,wBAAOC,QAAQ,kBAAf,UACC,sBAAKD,GAAG,OAAR,UACC,qBAAKE,UAAU,OAAOF,GAAG,SAAzB,oBAGA,qBAAKE,UAAU,OAAOF,GAAG,SAAzB,uBAID,qBAAKA,GAAG,gBCTNG,EAAclB,IAAOmB,OAAV,keA0BFC,EAvCA,WACd,OACC,cAACF,EAAD,UACC,qBAAKD,UAAU,YAAf,SACC,sBAAKA,UAAU,iBAAf,UACC,cAAC,IAAD,CAAMI,GAAG,IAAT,4BACA,cAAC,EAAD,Y,iBCSUC,EAjBO,SAAC,GAAuB,IACvCC,EAAiB,CACtBC,MAAM,EACNC,UAAU,EACVC,cAJ2C,EAApBA,eAOxB,OACC,cAAC,WAAD,UAEC,qBAAKC,QAAS,kBAAM,MAApB,SACC,cAAC,IAAD,CAAQC,QAASL,SCKfM,EAAe7B,IAAOC,IAAV,swCA+DH6B,EA/EA,WACd,OACC,eAACD,EAAD,WACC,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,yBACA,6B,QCdY,MAA0B,iCCmBnCE,EAAoB/B,IAAOC,IAAV,kuCAyDR+B,EAxEK,WACnB,OACC,eAACD,EAAD,WACC,8CACA,6BACC,6BACC,mBAAGE,KAAK,sBAAsBC,IAAI,aAAaC,OAAO,SAAtD,SACC,qBAAKC,IAAKC,EAAMC,IAAI,mBCiBpBC,EAAavC,IAAOwC,QAAV,04BA8CDC,EAnEF,WACZ,OACC,eAACF,EAAD,CAAYtB,UAAU,eAAtB,UACC,cAAC,EAAD,IACA,qBAAKA,UAAU,YAAf,SACC,sBAAKA,UAAU,YAAf,UACC,sBAAKA,UAAU,YAAf,UACC,8CACA,gDACA,gEACA,cAAC,EAAD,OAED,qBAAKA,UAAU,aAAf,SACC,cAAC,EAAD,CAAeS,cAAegB,eCIrBC,EAlBH,WACX,OACC,cAAC,IAAD,UACC,sBAAK1B,UAAU,MAAf,UACC,cAAC,EAAD,IACA,cAAC,IAAD,CAAM2B,KAAG,EAACC,SAAU,IAAMC,SAAS,OAAnC,SACC,eAAC,IAAD,CAAOC,OAAK,EAACC,KAAK,IAAlB,UACC,qBAAK/B,UAAU,YAAf,SACC,cAAC,EAAD,MAED,cAAC,EAAD,eCZNgC,IAASC,OACR,cAAC,IAAMC,WAAP,UACC,cAAC,EAAD,MAED5C,SAAS6C,eAAe,U","file":"static/js/main.9da5fca9.chunk.js","sourcesContent":["import { createGlobalStyle } from 'styled-components';\n\nconst GlobalStyles = createGlobalStyle`\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n margin: 0;\n font-family: \"Poppins\", sans-serif;\n font-size: 1rem;\n font-weight: 400;\n line-height: 1.5;\n color: #525f7f;\n text-align: left;\n background-color: #fff;\n }\n\n .hero-section {\n transition: all 0.8s ease-in-out;\n }\n\n body.dark__mode .hero-section {\n background: linear-gradient(35deg,#100f0f,#131b22) !important;\n }\n\n ul li {\n list-style: none;\n }\n\n a {\n text-decoration: none;\n }\n\n .container {\n width: 1040px;\n max-width: 95%;\n margin: auto;\n }\n\n\n\n`;\n\nexport default GlobalStyles;\n","import React, { useState, useEffect } from 'react';\nimport styled from 'styled-components';\n\nconst ToggleMode = () => {\n\tconst [mode, setMode] = useState(false);\n\n\tuseEffect(() => {\n\t\tif (mode === true) {\n\t\t\tdocument.body.classList.add('dark__mode');\n\t\t} else {\n\t\t\tdocument.body.classList.remove('dark__mode');\n\t\t}\n\t}, [mode]);\n\n\treturn (\n\t\t\n\t\t\t setMode(!mode)} id=\"toggle_checkbox\" />\n\n\t\t\t\n\t\t\n\t);\n};\n\nconst ToggleModeStyled = styled.div`\n\tposition: relative;\n\t#toggle_checkbox {\n\t\tdisplay: none;\n\t}\n\n\tlabel {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tdisplay: block;\n\t\twidth: 66px;\n\t\theight: 37px;\n\t\tbackground-color: #2196f3;\n\t\tborder-radius: 56px;\n\t\ttransform: translateY(-50%);\n\t\tcursor: pointer;\n\t\ttransition: 0.3s ease background-color;\n\t\toverflow: hidden;\n\t}\n\n\t@media screen and (max-width: 1024px) {\n\t\tmargin-top: 30px;\n\t\tlabel {\n\t\t\tposition: initial;\n\t\t}\n\t}\n\n\t#star {\n\t\tposition: absolute;\n\t\ttop: 13px;\n\t\tleft: 13px;\n\t\twidth: 10px;\n\t\theight: 10px;\n\t\tbackground-color: #fafd0f;\n\t\ttransform: scale(1);\n\t\tborder-radius: 50%;\n\t\ttransition: 0.3s ease top, 0.3s ease left, 0.3s ease transform, 0.3s ease background-color;\n\t\tz-index: 1;\n\t}\n\n\t#star-1 {\n\t\tposition: relative;\n\t}\n\n\t#star-2 {\n\t\tposition: absolute;\n\t\ttransform: rotateZ(36deg);\n\t}\n\n\t.star {\n\t\ttop: 0;\n\t\tleft: -7px;\n\t\tfont-size: 34px;\n\t\tline-height: 12px;\n\t\tcolor: #fafd0f;\n\t\ttransition: 0.3s ease color;\n\t}\n\n\t#moon {\n\t\tposition: absolute;\n\t\tbottom: -52px;\n\t\tright: 7px;\n\t\twidth: 27px;\n\t\theight: 27px;\n\t\tbackground-color: #fff;\n\t\tborder-radius: 50%;\n\t\ttransition: 0.3s ease bottom;\n\t}\n\n\t#moon:before {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: -12px;\n\t\tleft: -17px;\n\t\twidth: 40px;\n\t\theight: 40px;\n\t\tbackground-color: #03a9f4;\n\t\tborder-radius: 50%;\n\t\ttransition: 0.3s ease background-color;\n\t}\n\n\t#toggle_checkbox:checked + label {\n\t\tbackground-color: #000;\n\t}\n\n\t#toggle_checkbox:checked + label #star {\n\t\ttop: 6px;\n\t\tleft: 41px;\n\t\ttransform: scale(0.3);\n\t\tbackground-color: yellow;\n\t}\n\n\t#toggle_checkbox:checked + label .star {\n\t\tcolor: yellow;\n\t}\n\n\t#toggle_checkbox:checked + label #moon {\n\t\tbottom: 8px;\n\t}\n\n\t#toggle_checkbox:checked + label #moon:before {\n\t\tbackground-color: #000;\n\t}\n`;\n\nexport default ToggleMode;\n","import React from 'react';\nimport styled from 'styled-components';\nimport { Link } from 'react-router-dom';\nimport ToggleMode from './ToggleMode';\n\nconst Header = () => {\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\tSagar Dobariya\n\t\t\t\t\t\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t);\n};\n\nconst HeaderStyle = styled.header`\n\twidth: 100%;\n\tleft: 0;\n\tposition: absolute;\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tpadding: 30px 0;\n\tz-index: 2;\n\n\t.header-content {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t}\n\n\ta {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tfont-family: 'Marck Script', cursive;\n\t\ttext-transform: capitalize;\n\t\tfont-size: 25px;\n\t\tcolor: white;\n\t}\n`;\n\nexport default Header;\n","import React, { Suspense } from 'react';\nimport Lottie from 'react-lottie';\n\nconst DisplayLottie = ({ animationData }) => {\n\tconst defaultOptions = {\n\t\tloop: true,\n\t\tautoplay: true,\n\t\tanimationData: animationData,\n\t};\n\n\treturn (\n\t\t\n\t\t\t{/* To override default onClick pause by Lottie */}\n\t\t\t
null}>\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n};\n\nexport default DisplayLottie;\n","import React from 'react';\nimport styled from 'styled-components';\n\nconst Shapes = () => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\t\n\t\t\n\t);\n};\n\nconst ShapesStyled = styled.div`\n\tposition: absolute;\n\ttop: 0;\n\tz-index: -1;\n\twidth: 100%;\n\theight: 100%;\n\tspan {\n\t\tposition: absolute;\n\t\theight: 120px;\n\t\twidth: 120px;\n\t\tborder-radius: 50%;\n\t\t&:first-child {\n\t\t\tleft: -4%;\n\t\t\tbottom: auto;\n\t\t\tbackground: hsla(0, 0%, 100%, 0.1);\n\t\t}\n\t\t&:nth-child(2) {\n\t\t\tright: 4%;\n\t\t\ttop: 10%;\n\t\t\tbackground: hsla(0, 0%, 100%, 0.1);\n\t\t}\n\t\t&:nth-child(3) {\n\t\t\ttop: 280px;\n\t\t\tright: 5.66666%;\n\t\t\tbackground: hsla(0, 0%, 100%, 0.3);\n\t\t}\n\t\t&:nth-child(4) {\n\t\t\ttop: 320px;\n\t\t\tright: 7%;\n\t\t\tbackground: hsla(0, 0%, 100%, 0.15);\n\t\t}\n\t\t&:nth-child(5) {\n\t\t\ttop: 38%;\n\t\t\tleft: 1%;\n\t\t\tright: auto;\n\t\t\tbackground: hsla(0, 0%, 100%, 0.05);\n\t\t}\n\t\t:nth-child(6) {\n\t\t\twidth: 200px;\n\t\t\theight: 200px;\n\t\t\ttop: 44%;\n\t\t\tleft: 10%;\n\t\t\tright: auto;\n\t\t\tbackground: hsla(0, 0%, 100%, 0.15);\n\t\t}\n\t\t&:nth-child(7) {\n\t\t\tbottom: 50%;\n\t\t\tright: 36%;\n\t\t\tbackground: hsla(0, 0%, 100%, 0.04);\n\t\t}\n\t\t&:nth-child(8) {\n\t\t\tbottom: 70px;\n\t\t\tright: 2%;\n\t\t\tbackground: hsla(0, 0%, 100%, 0.2);\n\t\t}\n\t\t&:nth-child(9) {\n\t\t\tbottom: 1%;\n\t\t\tright: 2%;\n\t\t\tbackground: hsla(0, 0%, 100%, 0.1);\n\t\t}\n\t}\n`;\n\nexport default Shapes;\n","export default __webpack_public_path__ + \"static/media/mail.3db5473a.svg\";","import React from 'react';\nimport styled from 'styled-components';\nimport mail from '../icons/mail.svg';\n\nconst SocialMedia = () => {\n\treturn (\n\t\t\n\t\t\tFind Me on\n\t\t\t\n\t\t\n\t);\n};\n\nconst SocialMediaStyled = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tmargin-top: 40px;\n\tspan {\n\t\tdisplay: block;\n\t\tfont-size: 30px;\n\t\tcolor: white;\n\t\tfont-weight: 200;\n\t\tmargin-bottom: 17px;\n\t}\n\tul {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tli {\n\t\t\tmargin-right: 10px;\n\t\t\ttransition: all 0.5s;\n\t\t\tborder-radius: 50%;\n\n\t\t\ta {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\twidth: 2.375rem;\n\t\t\t\theight: 2.375rem;\n\t\t\t\tpadding: 0;\n\t\t\t\tbox-shadow: 0 4px 6px rgb(50 50 93 / 11%), 0 1px 3px rgb(0 0 0 / 8%);\n\t\t\t\tborder-radius: 50%;\n\t\t\t}\n\t\t\t&:first-child {\n\t\t\t\ta {\n\t\t\t\t\tcolor: #fff;\n\t\t\t\t\tbackground-color: #000;\n\t\t\t\t\tborder-color: #000;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:nth-of-type(2) {\n\t\t\t\ta {\n\t\t\t\t\tbackground-color: #3b5999;\n\t\t\t\t\tborder-color: #3b5999;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:nth-of-type(3) {\n\t\t\t\ta {\n\t\t\t\t\tbackground-color: #222;\n\t\t\t\t\tborder-color: #222;\n\t\t\t\t}\n\t\t\t}\n\t\t\t&:hover {\n\t\t\t\tbox-shadow: 0 7px 14px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%);\n\t\t\t\ttransform: translateY(-1px);\n\t\t\t}\n\t\t}\n\t}\n`;\n\nexport default SocialMedia;\n","import React from 'react';\nimport styled from 'styled-components';\nimport DisplayLottie from './DisplayLottie';\nimport Shapes from './Shapes';\nimport Coding from '../lottie/coding.json';\nimport SocialMedia from './SocialMedia';\n\nconst Hero = () => {\n\treturn (\n\t\t\n\t\t\t\n\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t

Namaste. I'm

\n\t\t\t\t\t\t

Sagar Dobariya

\n\t\t\t\t\t\t

I'm a Full Stack Web Developer.

\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\n\t\t\n\t);\n};\n\nconst HeroStyled = styled.section`\n\tposition: relative;\n\theight: 100vh;\n\tdisplay: flex;\n\talign-items: center;\n\tbackground: linear-gradient(35deg, #11cdef, #1171ef) !important;\n\tz-index: 1;\n\t.hero-text {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tjustify-content: space-between;\n\t\talign-items: center;\n\n\t\t.left-side {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\th4,\n\t\t\tp {\n\t\t\t\tfont-size: 30px;\n\t\t\t\tcolor: white;\n\t\t\t\tfont-weight: 200;\n\t\t\t}\n\t\t\th1 {\n\t\t\t\tfont-size: 50px;\n\t\t\t\tcolor: white;\n\t\t\t\tmargin-bottom: 10px;\n\t\t\t}\n\t\t}\n\n\t\t.right-side {\n\t\t\twidth: 500px;\n\t\t\tmax-width: 95%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n\t@media screen and (max-width: 768px) {\n\t\theight: initial;\n\t\tpadding-bottom: 70px;\n\t\tpadding-top: 160px;\n\t\t.hero-text {\n\t\t\tflex-direction: column;\n\t\t}\n\t}\n`;\n\nexport default Hero;\n","import { BrowserRouter as Router, Route } from 'react-router-dom';\nimport GlobalStyles from './components/GlobalStyles';\nimport Fade from 'react-reveal/Fade';\nimport Header from './components/Header';\nimport Hero from './components/Hero';\n\nconst App = () => {\n\treturn (\n\t\t\n\t\t\t
\n\t\t\t\t\n\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\n\t\t\t
\n\t\t\n\t);\n};\n\nexport default App;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\n\t\n\t\t\n\t,\n\tdocument.getElementById('root')\n);\n"],"sourceRoot":""}