{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\user\\\\Desktop\\\\000newport\\\\src\\\\components\\\\pages\\\\home\\\\components\\\\03competance\\\\components\\\\savoir.js\",\n  _s = $RefreshSig$();\nimport React, { useEffect, useState } from \"react\";\nimport { gsap, Sine } from \"gsap\";\nimport TextTransition from 'react-text-transition';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst Savoir = () => {\n  _s();\n  useEffect(() => {\n    const trigger = document.querySelectorAll(\".mainBotao\");\n    const animateOver = function () {\n      const text = this.querySelectorAll(\".text\");\n      const image = this.querySelectorAll(\".image\");\n      const element = this.querySelectorAll(\".element\");\n      const imageBack = this.querySelectorAll(\".imageBack\");\n      gsap.to(element, {\n        duration: 1,\n        scale: 1.5,\n        x: 500\n      });\n      gsap.to(text, {\n        duration: 1,\n        ease: Sine.easeOut,\n        autoRound: false,\n        x: 100,\n        y: 40\n      });\n      gsap.to(image, {\n        duration: 1,\n        opacity: 1,\n        x: 0,\n        y: 0\n      });\n      gsap.to(imageBack, {\n        duration: 1,\n        opacity: 0\n      });\n    };\n    const animateOut = function () {\n      const element = this.querySelector(\".element\");\n      const text = this.querySelector(\".text\");\n      const image = this.querySelector(\".image\");\n      const imageBack = this.querySelector(\".imageBack\");\n      gsap.to(element, {\n        duration: 1,\n        scale: 1.2,\n        x: 0,\n        y: 0\n      });\n      gsap.to(text, {\n        duration: 1,\n        ease: Sine.easeOut,\n        autoRound: false,\n        x: -100,\n        y: -100\n      });\n      gsap.to(image, {\n        duration: 1,\n        opacity: 0,\n        x: -10,\n        y: -10\n      });\n      gsap.to(imageBack, {\n        duration: 1,\n        opacity: 1\n      });\n    };\n    trigger.forEach(el => {\n      el.addEventListener(\"mouseover\", animateOver, false);\n      el.addEventListener(\"touchstart\", animateOver, false);\n      el.addEventListener(\"mouseout\", animateOut, false);\n      el.addEventListener(\"touchend\", animateOut, false);\n    });\n    return () => {\n      // Clean up event listeners when the component unmounts\n      trigger.forEach(el => {\n        el.removeEventListener(\"mouseover\", animateOver, false);\n        el.removeEventListener(\"touchstart\", animateOver, false);\n        el.removeEventListener(\"mouseout\", animateOut, false);\n        el.removeEventListener(\"touchend\", animateOut, false);\n      });\n    };\n  }, []);\n  const texts = [' Portfolio ', 'en ligne de', 'Facundo Varas'];\n  const [index, setIndex] = useState(0);\n  useEffect(() => {\n    const intervalId = setInterval(() => {\n      setIndex(index => (index + 1) % texts.length);\n    }, 2000);\n    return () => clearInterval(intervalId);\n  }, []);\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"text_competence flex items-center justify-center  w-1/3\",\n    children: /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"  border  mainBotao rounded-3xl  w-full h-full overflow-hidden   bg-pink-200  \",\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: \" h-5/6  w-5/6  p-2 \",\n        children: /*#__PURE__*/_jsxDEV(\"p\", {\n          className: \"text-5xl  image  text-justify border opacity-0\",\n          style: {\n            fontFamily: \"Caveat, cursive\"\n          },\n          children: \"Artisant du web. je suis curieux et  passionn\\xE9.\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 127,\n          columnNumber: 17\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 125,\n        columnNumber: 13\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \" \",\n        children: /*#__PURE__*/_jsxDEV(\"p\", {\n          className: \"text-5xl  image  text-justify border opacity-0\",\n          style: {\n            fontFamily: \"Caveat, cursive\"\n          },\n          children: \"Un caf\\xE9 et au boulot !\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 132,\n          columnNumber: 17\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 131,\n        columnNumber: 11\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"imageBack h-1/6 flex items-end\",\n        children: /*#__PURE__*/_jsxDEV(\"h5\", {\n          className: \" self-end text-6xl \",\n          style: {\n            fontFamily: \"Caveat, cursive\"\n          },\n          children: \"Passion\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 141,\n          columnNumber: 13\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 139,\n        columnNumber: 13\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 123,\n      columnNumber: 13\n    }, this)\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 121,\n    columnNumber: 9\n  }, this);\n};\n_s(Savoir, \"He/A5TTt+wrefZ71bsnvd4fGLI0=\");\n_c = Savoir;\nexport default Savoir;\nvar _c;\n$RefreshReg$(_c, \"Savoir\");","map":{"version":3,"names":["React","useEffect","useState","gsap","Sine","TextTransition","jsxDEV","_jsxDEV","Savoir","_s","trigger","document","querySelectorAll","animateOver","text","image","element","imageBack","to","duration","scale","x","ease","easeOut","autoRound","y","opacity","animateOut","querySelector","forEach","el","addEventListener","removeEventListener","texts","index","setIndex","intervalId","setInterval","length","clearInterval","className","children","style","fontFamily","fileName","_jsxFileName","lineNumber","columnNumber","_c","$RefreshReg$"],"sources":["C:/Users/user/Desktop/000newport/src/components/pages/home/components/03competance/components/savoir.js"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\r\nimport { gsap,Sine } from \"gsap\"\r\n\r\nimport TextTransition from 'react-text-transition';\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\nconst Savoir=()=>{\r\n\r\n    useEffect(() => {\r\n      \r\n        const trigger = document.querySelectorAll(\".mainBotao\");\r\n    \r\n        const animateOver = function () {\r\n          const text = this.querySelectorAll(\".text\");\r\n          const image = this.querySelectorAll(\".image\");\r\n          const element = this.querySelectorAll(\".element\");\r\n          const imageBack = this.querySelectorAll(\".imageBack\");\r\n    \r\n          gsap.to(element, {\r\n            duration: 1,\r\n            scale: 1.5,\r\n            x: 500,\r\n          });\r\n    \r\n          gsap.to(text, {\r\n            duration: 1,\r\n            ease: Sine.easeOut,\r\n            autoRound: false,\r\n            x: 100,\r\n            y: 40,\r\n          });\r\n    \r\n          gsap.to(image, {\r\n            duration: 1,\r\n            opacity: 1,\r\n            x: 0,\r\n            y: 0,\r\n          });\r\n    \r\n          gsap.to(imageBack, {\r\n            duration: 1,\r\n            opacity: 0,\r\n          });\r\n        };\r\n    \r\n        const animateOut = function () {\r\n          const element = this.querySelector(\".element\");\r\n          const text = this.querySelector(\".text\");\r\n          const image = this.querySelector(\".image\");\r\n          const imageBack = this.querySelector(\".imageBack\");\r\n    \r\n          gsap.to(element, {\r\n            duration: 1,\r\n            scale: 1.2,\r\n            x: 0,\r\n            y:0\r\n          });\r\n    \r\n          gsap.to(text, {\r\n            duration: 1,\r\n            ease: Sine.easeOut,\r\n            autoRound: false,\r\n            x: -100,\r\n            y: -100,\r\n          });\r\n    \r\n          gsap.to(image, {\r\n            duration: 1,\r\n            opacity: 0,\r\n            x:-10,\r\n            y:-10,\r\n          });\r\n    \r\n          gsap.to(imageBack, {\r\n            duration: 1,\r\n            opacity: 1,\r\n          });\r\n        };\r\n    \r\n        trigger.forEach((el) => {\r\n          el.addEventListener(\"mouseover\", animateOver, false);\r\n          el.addEventListener(\"touchstart\", animateOver, false);\r\n          el.addEventListener(\"mouseout\", animateOut, false);\r\n          el.addEventListener(\"touchend\", animateOut, false);\r\n        });\r\n    \r\n        return () => {\r\n          // Clean up event listeners when the component unmounts\r\n          trigger.forEach((el) => {\r\n            el.removeEventListener(\"mouseover\", animateOver, false);\r\n            el.removeEventListener(\"touchstart\", animateOver, false);\r\n            el.removeEventListener(\"mouseout\", animateOut, false);\r\n            el.removeEventListener(\"touchend\", animateOut, false);\r\n          });\r\n        };\r\n\r\n      }, []);\r\n   \r\n      const texts = [  ' Portfolio ','en ligne de', 'Facundo Varas'];\r\n      const [index, setIndex] = useState(0);\r\n    \r\n      useEffect(() => {\r\n        const intervalId = setInterval(() => {\r\n          setIndex((index) => (index + 1) % texts.length);\r\n        }, 2000);\r\n    \r\n        return () => clearInterval(intervalId);\r\n      }, []);\r\n\r\n\r\n    return(\r\n\r\n        <div className=\"text_competence flex items-center justify-center  w-1/3\">\r\n\r\n            <div className=\"  border  mainBotao rounded-3xl  w-full h-full overflow-hidden   bg-pink-200  \">\r\n\r\n            <div className=\" h-5/6  w-5/6  p-2 \">\r\n               \r\n                <p className=\"text-5xl  image  text-justify border opacity-0\"  style={{fontFamily: \"Caveat, cursive\"}} >\r\n               Artisant du web. je suis curieux et  passionné. \r\n                </p>\r\n          </div>\r\n          <div className=\" \">\r\n                <p className=\"text-5xl  image  text-justify border opacity-0\"  style={{fontFamily: \"Caveat, cursive\"}} >\r\n                  Un café et au boulot !\r\n                </p>\r\n\r\n          </div>\r\n\r\n\r\n            <div className=\"imageBack h-1/6 flex items-end\">\r\n\r\n            <h5 className=\" self-end text-6xl \" style={{fontFamily: \"Caveat, cursive\"}}>Passion</h5>\r\n            </div>\r\n\r\n            </div>\r\n\r\n\r\n\r\n\r\n\r\n{/*             \r\n            <div className=\"2xl:w-2/3 xl:w-full\">\r\n            <p>Je suis <strong>intégrateur web/ dévéloppeur web front-end</strong> \r\n\r\n            </p>\r\n            <p>\r\n             Je travails essentiellement sur React et WordPress.\r\n\r\n            </p> */}\r\n\r\n            {/* </div> */}\r\n\r\n        </div>\r\n    )\r\n}\r\n\r\nexport default Savoir"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}