{"version":3,"sources":["webpack:///./src/pages/projects/animations.js","webpack:///./src/components/Projects/Card.js","webpack:///./src/components/Projects/CardWrapper.js"],"names":["Projects","render","animations","this","props","data","Fragment","Consumer","theme","projects","React","Component","ProjectQuery","Card","className","style","order","src","live_demo","loading","textAlign","marginTop","fontFamily","heading","description1","description2","description3","href","target","view_source","Project","edges","map","item","i","key","node","frontmatter"],"mappings":"mQAMqBA,E,kGACnBC,OAAA,WAAU,IAEEC,EACNC,KAAKC,MADPC,KAAQH,WAEV,OACE,kBAAC,IAAMI,SAAP,KACE,kBAAC,eAAaC,SAAd,MACG,SAAAC,GAAK,OAAI,kBAAC,IAAD,CAASC,SAAUP,EAAYM,MAAOA,OAElD,kBAAC,IAAD,Q,GAV8BE,IAAMC,WAgB/BC,EAAY,a,2GC4IVC,EA7JF,SAAAT,GACX,OACE,yBAAKU,UAAU,gBACb,yBACEC,MAAO,CACLC,MAAOZ,EAAMY,OAEfF,UAAU,gBAEV,4BAAQG,IAAKb,EAAMc,UAAWC,QAAQ,OAAOL,UAAU,YAEzD,yBAAKA,UAAU,cACb,wBAAIC,MAAO,CAAEC,MAAO,IAAKI,UAAW,SAAUC,UAAW,OAAQC,WAAY,YAC1ElB,EAAMmB,SAET,2BAAInB,EAAMoB,cACV,2BAAIpB,EAAMqB,cACV,2BAAIrB,EAAMsB,cACV,yBAAKZ,UAAU,gBACb,kBAAC,IAAD,MACA,kBAAC,IAAD,MACA,kBAAC,IAAD,OAEF,yBAAKA,UAAU,cACb,uBAAGa,KAAMvB,EAAMc,UAAWU,OAAO,UAAjC,aAGA,uBAAGD,KAAMvB,EAAMyB,YAAaD,OAAO,UAAnC,iBAMJ,+qHCnCS,SAASE,EAAQ1B,GAAQ,IAC9BK,EAAoBL,EAApBK,SAAUD,EAAUJ,EAAVI,MAElB,OACE,oCACGC,EAASsB,MAAMC,KAAI,SAACC,EAAMC,GAAP,OAClB,kBAAC,EAAD,CACEC,IAAKD,EACLX,QAASU,EAAKG,KAAKC,YAAYd,QAC/BC,aAAcS,EAAKG,KAAKC,YAAYb,aACpCC,aAAcQ,EAAKG,KAAKC,YAAYZ,aACpCC,aAAcO,EAAKG,KAAKC,YAAYX,aACpCR,UAAWe,EAAKG,KAAKC,YAAYnB,UACjCW,YAAaI,EAAKG,KAAKC,YAAYR,YACnCb,MAAOkB,EAAI,GAAK,EAAI,GAAK,EACzB1B,MAAOA","file":"component---src-pages-projects-animations-js-023b9830a59cabf7a5eb.js","sourcesContent":["import React from \"react\";\nimport { graphql } from \"gatsby\";\nimport { ThemeContext } from \"../../layouts\";\nimport Seo from \"../../components/Seo\";\nimport Project from \"../../components/Projects/CardWrapper\";\n\nexport default class Projects extends React.Component {\n  render() {\n    const {\n      data: { animations }\n    } = this.props;\n    return (\n      <React.Fragment>\n        <ThemeContext.Consumer>\n          {theme => <Project projects={animations} theme={theme} />}\n        </ThemeContext.Consumer>\n        <Seo />\n      </React.Fragment>\n    );\n  }\n}\n\nexport const ProjectQuery = graphql`\n  query animationQuery {\n    animations: allMarkdownRemark(\n      filter: { fileAbsolutePath: { regex: \"//content/projects/animations/\" } }\n      sort: { fields: fields___slug, order: DESC }\n    ) {\n      edges {\n        node {\n          frontmatter {\n            heading\n            description1\n            description2\n            description3\n            live_demo\n            view_source\n          }\n        }\n      }\n    }\n  }\n`;\n","import React from \"react\";\nimport { FaJsSquare } from \"react-icons/fa/\";\nimport { FaHtml5 } from \"react-icons/fa/\";\nimport { FaCss3 } from \"react-icons/fa/\";\n\nconst Card = props => {\n  return (\n    <div className=\"card_wrapper\">\n      <div\n        style={{\n          order: props.order\n        }}\n        className=\"windowheight\"\n      >\n        <iframe src={props.live_demo} loading=\"lazy\" className=\"iframe\" />\n      </div>\n      <div className=\"textheight\">\n        <h3 style={{ order: \"1\", textAlign: \"center\", marginTop: \"19px\", fontFamily: \"cursive\" }}>\n          {props.heading}\n        </h3>\n        <p>{props.description1}</p>\n        <p>{props.description2}</p>\n        <p>{props.description3}</p>\n        <div className=\"font_awesome\">\n          <FaHtml5 />\n          <FaCss3 />\n          <FaJsSquare />\n        </div>\n        <div className=\"rect_style\">\n          <a href={props.live_demo} target=\"_blank\">\n            Live Demo\n          </a>\n          <a href={props.view_source} target=\"_blank\">\n            View Source\n          </a>\n        </div>\n      </div>\n\n      <style>{`\n            .card_wrapper{\n                display: flex;\n                justify-content: space-around;\n                height: 80vh;\n              }\n              .textheight{\n                width:37%;\n                order:0;\n                border-radius:2%;\n              }\n              .windowheight{\n                height:80%;\n                width:57%;\n                order:1;\n                overflow:hidden;\n                border-radius:20px;\n              }\n              .iframe{\n                height:104%;\n                width:103%;\n                border:none;\n              }\n              .rect_style a{\n                text-decoration: none;\n              }\n              @media only screen and (max-width: 1113px ){\n                .textheight p{\n                  font-size: 10px;\n                  text-align: left;\n                  margin-buttom: 15px;\n                }\n              }\n              @media only screen and (max-width: 900px ){\n                .card_wrapper{\n                  display: contents;\n                }\n                .windowheight{\n                  margin-left: 4%;\n                  height: 351px;\n                  width: 95%;\n                }\n                .textheight{\n                  height: 400px;\n                  width: 100%;\n                }\n              }\n              \n              .textheight h3{\n                background: -webkit-linear-gradient(#fc466b, #3f5efb);\n                -webkit-background-clip: text;\n                -webkit-text-fill-color: transparent;\n                font-size: 33px;\n              }\n              .textheight p{\n                margin-right: 30px;;\n                margin-left: 30px;;\n                max-width: none;\n                padding: 5px;\n                text-align: justify;\n                font-size: 17px;\n                font-family: cursive;\n              }\n              .rect_style{\n                display: flex;\n                justify-content: space-around;\n                width: 87%;\n                height: 45px;\n                margin-top: 1.7rem;\n                margin-left: 1.7rem;\n                font-size: 1.3rem;\n                padding: 5px;\n                border-radius: 10px;\n                border-width: 1.7px;\n                border-style: solid;\n                border-color: rgb(167, 123, 233);\n                border-image: initial;\n              }\n              .rect_style a{\n                cursor: pointer;\n                color: blue;\n              }\n\n              .rect_style a:hover{\n                transform: scale(1.03);\n                color: red;\n              }\n              \n              /*****font awesome****/\n              .font_awesome{\n                  font-size: 32px;\n                  color: rgb(68, 38, 187);\n                display: flex;\n                width: 70%;\n                justify-content: space-around;\n                margin-left: 20px;\n                margin-top: 9px;\n              }\n              @media only screen and (max-width: 533px ){\n                .windowheight{\n                  height: 317px;\n                  width: 91%;\n                  margin-buttom: 13%;\n                }\n                .textheight p, h3{\n                  font-family: 'Open Sans', Arial;\n                }\n                .textheight{\n                  margin-bottom: 9vh;\n                }\n                .textheight h3{\n                  font-size:1.5rem;\n                }\n                .iframe{\n                  height:100%;\n                  width:100%;\n                }\n              }\n  \n            `}</style>\n    </div>\n  );\n};\n\nexport default Card;\n","import React from \"react\";\nimport Card from \"./Card\";\n\nexport default function Project(props) {\n  const { projects, theme } = props;\n\n  return (\n    <>\n      {projects.edges.map((item, i) => (\n        <Card\n          key={i}\n          heading={item.node.frontmatter.heading}\n          description1={item.node.frontmatter.description1}\n          description2={item.node.frontmatter.description2}\n          description3={item.node.frontmatter.description3}\n          live_demo={item.node.frontmatter.live_demo}\n          view_source={item.node.frontmatter.view_source}\n          order={i % 2 == 0 ? 1 : -1}\n          theme={theme}\n        />\n      ))}\n    </>\n  );\n}\n"],"sourceRoot":""}