{"ast":null,"code":"import _slicedToArray from\"C:/Users/user/Desktop/04portreact/node_modules/@babel/runtime/helpers/esm/slicedToArray.js\";import React,{useEffect,useState}from\"react\";import{gsap,Sine}from\"gsap\";import TextTransition from'react-text-transition';import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var Savoir=function Savoir(){useEffect(function(){var trigger=document.querySelectorAll(\".mainBotao\");var animateOver=function animateOver(){var text=this.querySelectorAll(\".text\");var image=this.querySelectorAll(\".image\");var element=this.querySelectorAll(\".element\");var imageBack=this.querySelectorAll(\".imageBack\");gsap.to(element,{duration:1,scale:1.5,x:500});gsap.to(text,{duration:1,opacity:1,x:0,y:0});gsap.to(image,{duration:1,opacity:1,x:0,y:0});gsap.to(imageBack,{duration:1,opacity:0});};var animateOut=function animateOut(){var element=this.querySelector(\".element\");var text=this.querySelector(\".text\");var image=this.querySelectorAll(\".image\");var imageBack=this.querySelector(\".imageBack\");gsap.to(element,{duration:1,scale:1.2,x:0,y:0});gsap.to(text,{duration:1,x:0,y:0,opacity:0});gsap.to(image,{duration:1,opacity:0,x:0,y:0});gsap.to(imageBack,{duration:1,opacity:1});};trigger.forEach(function(el){el.addEventListener(\"mouseover\",animateOver,false);el.addEventListener(\"touchstart\",animateOver,false);el.addEventListener(\"mouseout\",animateOut,false);el.addEventListener(\"touchend\",animateOut,false);});return function(){// Clean up event listeners when the component unmounts\ntrigger.forEach(function(el){el.removeEventListener(\"mouseover\",animateOver,false);el.removeEventListener(\"touchstart\",animateOver,false);el.removeEventListener(\"mouseout\",animateOut,false);el.removeEventListener(\"touchend\",animateOut,false);});};},[]);var texts=[' Portfolio ','en ligne de','Facundo Varas'];var _useState=useState(0),_useState2=_slicedToArray(_useState,2),index=_useState2[0],setIndex=_useState2[1];useEffect(function(){var intervalId=setInterval(function(){setIndex(function(index){return(index+1)%texts.length;});},2000);return function(){return clearInterval(intervalId);};},[]);return/*#__PURE__*/_jsxs(\"div\",{className:\"text_competence flex items-center justify-center  w-1/3\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\" max-lg:hidden   mainBotao rounded-3xl   w-full h-full overflow-hidden   bg-pink-200  \",children:[/*#__PURE__*/_jsxs(\"div\",{className:\" h-5/6  w-full  p-2  flex flex-col items-center justify-center \",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-5xl  image  text-justify opacity-0 max-sm:block max-sm:opacity-1 \",style:{fontFamily:\"Caveat, cursive\"},children:\"Artisant du web. je suis curieux et  passionn\\xE9.\"}),/*#__PURE__*/_jsx(\"div\",{className:\" \",children:/*#__PURE__*/_jsx(\"p\",{className:\"text-5xl  text  text-justify  opacity-0 max-sm:opacity-1\",style:{fontFamily:\"Caveat, cursive\"},children:\"Un caf\\xE9 et au boulot !\"})})]}),/*#__PURE__*/_jsx(\"div\",{className:\"imageBack h-1/6 flex items-end\",children:/*#__PURE__*/_jsx(\"h5\",{className:\" text-6xl self-start \",style:{fontFamily:\"Caveat, cursive\"},children:\"Passion :\"})})]}),/*#__PURE__*/_jsxs(\"div\",{className:\" max-sm:block lg:hidden    rounded-3xl mb-5  w-full h-full overflow-hidden   bg-pink-200  \",children:[/*#__PURE__*/_jsxs(\"div\",{className:\" h-5/6  w-full  p-2  flex flex-col items-center justify-center \",children:[/*#__PURE__*/_jsx(\"p\",{className:\"text-5xl  image  text-justify max-sm:block p-2 \",style:{fontFamily:\"Caveat, cursive\"},children:\"Artisant du web. je suis curieux et  passionn\\xE9.\"}),/*#__PURE__*/_jsx(\"div\",{className:\" \",children:/*#__PURE__*/_jsx(\"p\",{className:\"text-5xl  text  text-justify  \",style:{fontFamily:\"Caveat, cursive\"},children:\"Un caf\\xE9 et au boulot !\"})})]}),/*#__PURE__*/_jsx(\"div\",{className:\"imageBack h-1/6 flex items-end\",children:/*#__PURE__*/_jsx(\"h5\",{className:\" text-6xl self-start max-sm:hidden\",style:{fontFamily:\"Caveat, cursive\"},children:\"Passion :\"})})]})]});};export default Savoir;","map":{"version":3,"names":["React","useEffect","useState","gsap","Sine","TextTransition","jsx","_jsx","jsxs","_jsxs","Savoir","trigger","document","querySelectorAll","animateOver","text","image","element","imageBack","to","duration","scale","x","opacity","y","animateOut","querySelector","forEach","el","addEventListener","removeEventListener","texts","_useState","_useState2","_slicedToArray","index","setIndex","intervalId","setInterval","length","clearInterval","className","children","style","fontFamily"],"sources":["C:/Users/user/Desktop/04portreact/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\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           \r\n            opacity:1,\r\n       \r\n            x: 0,\r\n            y: 0,\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.querySelectorAll(\".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        \r\n   \r\n            x: 0,\r\n            y: 0,\r\n            opacity:0\r\n          });\r\n    \r\n          gsap.to(image, {\r\n            duration: 1,\r\n            opacity: 0,\r\n            x:0,\r\n            y:0,\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=\" max-lg:hidden   mainBotao rounded-3xl   w-full h-full overflow-hidden   bg-pink-200  \">\r\n\r\n            <div className=\" h-5/6  w-full  p-2  flex flex-col items-center justify-center \">\r\n            \r\n\r\n                <p className=\"text-5xl  image  text-justify opacity-0 max-sm:block max-sm:opacity-1 \"  style={{fontFamily: \"Caveat, cursive\"}} >\r\n               Artisant du web. je suis curieux et  passionné. \r\n                </p>\r\n          <div className=\" \">\r\n                <p className=\"text-5xl  text  text-justify  opacity-0 max-sm:opacity-1\"  style={{fontFamily: \"Caveat, cursive\"}} >\r\n                  Un café et au boulot !\r\n                </p>\r\n\r\n              \r\n\r\n          </div>\r\n          </div>\r\n\r\n\r\n            <div className=\"imageBack h-1/6 flex items-end\">\r\n\r\n            <h5 className=\" text-6xl self-start \" style={{fontFamily: \"Caveat, cursive\"}}>Passion :</h5>\r\n            </div>\r\n\r\n            </div>\r\n            <div className=\" max-sm:block lg:hidden    rounded-3xl mb-5  w-full h-full overflow-hidden   bg-pink-200  \">\r\n\r\n            <div className=\" h-5/6  w-full  p-2  flex flex-col items-center justify-center \">\r\n            \r\n\r\n                <p className=\"text-5xl  image  text-justify max-sm:block p-2 \"  style={{fontFamily: \"Caveat, cursive\"}} >\r\n               Artisant du web. je suis curieux et  passionné. \r\n                </p>\r\n          <div className=\" \">\r\n                <p className=\"text-5xl  text  text-justify  \"  style={{fontFamily: \"Caveat, cursive\"}} >\r\n                  Un café et au boulot !\r\n                </p>\r\n\r\n              \r\n\r\n          </div>\r\n          </div>\r\n\r\n\r\n            <div className=\"imageBack h-1/6 flex items-end\">\r\n\r\n            <h5 className=\" text-6xl self-start max-sm:hidden\" 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":[]}