{"ast":null,"code":"var _jsxFileName = \"C:\\\\Users\\\\user\\\\Desktop\\\\000newport\\\\src\\\\components\\\\pages\\\\home\\\\components\\\\03competance\\\\components\\\\tekno.js\",\n  _s = $RefreshSig$();\nimport React from \"react\";\nimport { gsap } from \"gsap\";\nimport { useRef } from \"react\";\nimport { useEffect } from \"react\";\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst Tekno = () => {\n  _s();\n  const divRef = useRef(null);\n  useEffect(() => {\n    const container = divRef.current;\n    const trigger = document.querySelectorAll('.technologie');\n    // Fonction pour gérer l'effet de défilement\n    const handleScroll = () => {\n      const scrollPosition = container.scrollTop;\n      const textElements = container.querySelectorAll(\".titre_scroll\");\n\n      // Ajustez ces valeurs selon vos besoins\n      const maxScroll = container.scrollHeight - container.clientHeight;\n      const maxSize = 1.5; // Taille maximale du texte\n      const maxOpacity = 1; // Opacité maximale\n\n      // Si on atteint le bas de la zone de défilement, réinitialiser la position de défilement\n      // if (scrollPosition >= maxScroll) {\n      //   container.scrollTop = 0;\n      // }\n\n      textElements.forEach(text => {\n        const offset = text.offsetTop - scrollPosition;\n        const scale = 1 + (maxSize - 1) * (1 - offset / maxScroll * 2);\n        const opacity = maxOpacity * (1 - offset / maxScroll * 3);\n        gsap.to(text, {\n          duration: 0.5,\n          scale,\n          opacity\n        });\n      });\n    };\n    const animateOver = function () {\n      const tekno = this.querySelectorAll('.tekno');\n      const scrolly = this.querySelectorAll('.scrolly');\n      gsap.to(tekno, {\n        duration: 1,\n        opacity: 0,\n        display: 'none'\n      });\n      gsap.to(scrolly, {\n        duration: 1,\n        opacity: 1\n      });\n    };\n    const animateOut = function () {\n      const tekno = this.querySelectorAll('.tekno');\n      const scrolly = this.querySelectorAll('.scrolly');\n      gsap.to(tekno, {\n        duration: 1,\n        opacity: 1,\n        display: \"block\"\n      });\n      gsap.to(scrolly, {\n        duration: 1,\n        opacity: 0\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    container.addEventListener(\"scroll\", handleScroll);\n    return () => {\n      container.removeEventListener(\"scroll\", handleScroll);\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  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: \"text_competence technologie w-1/3  \",\n    children: /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \" flex flex-col h-full bg-cyan-100 relative rounded-3xl \",\n      style: {\n        fontFamily: 'Orbitron, sans-serif'\n      },\n      children: [/*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"h-96 w-full scrolly  overflow-auto custom-scrollbar opacity-0  \",\n        ref: divRef,\n        children: [/*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-500\",\n          children: \"React\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 97,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl text-cyan-400\",\n          children: \"Javascript\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 98,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-500\",\n          children: \"tailwind\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 99,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl text-cyan-600\",\n          children: \"SCSS\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 100,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-700\",\n          children: \"WordPress\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 101,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl text-pink-500\",\n          children: \"PHP\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 102,\n          columnNumber: 11\n        }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n          className: \"h-1/2 flex items-center justify-center titre_scroll text-4xl text-red-900\",\n          children: \"Symfony\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 103,\n          columnNumber: 11\n        }, this)]\n      }, void 0, true, {\n        fileName: _jsxFileName,\n        lineNumber: 96,\n        columnNumber: 9\n      }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"h-1/6 absolute bottom-0 left-0\",\n        children: /*#__PURE__*/_jsxDEV(\"h5\", {\n          className: \" tekno text-6xl  \",\n          style: {\n            fontFamily: 'Orbitron, sans-serif'\n          },\n          children: \"tekno\"\n        }, void 0, false, {\n          fileName: _jsxFileName,\n          lineNumber: 107,\n          columnNumber: 9\n        }, this)\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 105,\n        columnNumber: 10\n      }, this)]\n    }, void 0, true, {\n      fileName: _jsxFileName,\n      lineNumber: 95,\n      columnNumber: 7\n    }, this)\n  }, void 0, false, {\n    fileName: _jsxFileName,\n    lineNumber: 94,\n    columnNumber: 5\n  }, this);\n};\n_s(Tekno, \"yu+j3H3uMpPkc7UDcPsbvSQj1vE=\");\n_c = Tekno;\nexport default Tekno;\nvar _c;\n$RefreshReg$(_c, \"Tekno\");","map":{"version":3,"names":["React","gsap","useRef","useEffect","jsxDEV","_jsxDEV","Tekno","_s","divRef","container","current","trigger","document","querySelectorAll","handleScroll","scrollPosition","scrollTop","textElements","maxScroll","scrollHeight","clientHeight","maxSize","maxOpacity","forEach","text","offset","offsetTop","scale","opacity","to","duration","animateOver","tekno","scrolly","display","animateOut","el","addEventListener","removeEventListener","className","children","style","fontFamily","ref","fileName","_jsxFileName","lineNumber","columnNumber","_c","$RefreshReg$"],"sources":["C:/Users/user/Desktop/000newport/src/components/pages/home/components/03competance/components/tekno.js"],"sourcesContent":["import React from \"react\";\r\nimport { gsap } from \"gsap\";\r\nimport { useRef } from \"react\";\r\nimport { useEffect } from \"react\";\r\n\r\nconst Tekno = () => {\r\n\r\n  \r\n        const divRef = useRef(null);\r\n      \r\n        useEffect(() => {\r\n          const container = divRef.current;\r\n          const trigger=document.querySelectorAll('.technologie')\r\n          // Fonction pour gérer l'effet de défilement\r\n          const handleScroll = () => {\r\n            const scrollPosition = container.scrollTop;\r\n            const textElements = container.querySelectorAll(\".titre_scroll\");\r\n      \r\n            // Ajustez ces valeurs selon vos besoins\r\n            const maxScroll = container.scrollHeight - container.clientHeight;\r\n            const maxSize = 1.5; // Taille maximale du texte\r\n            const maxOpacity = 1; // Opacité maximale\r\n\r\n              // Si on atteint le bas de la zone de défilement, réinitialiser la position de défilement\r\n      // if (scrollPosition >= maxScroll) {\r\n      //   container.scrollTop = 0;\r\n      // }\r\n      \r\n            textElements.forEach((text) => {\r\n              const offset = text.offsetTop - scrollPosition;\r\n              const scale = 1 + (maxSize - 1) * (1 - offset / maxScroll*2);\r\n              const opacity = maxOpacity * (1 - offset / maxScroll*3);\r\n      \r\n              gsap.to(text, {\r\n                duration: 0.5,\r\n                scale,\r\n                opacity,\r\n              });\r\n            });\r\n             \r\n        };\r\n        const animateOver=function(){\r\n            const tekno =this.querySelectorAll('.tekno')\r\n            const scrolly =this.querySelectorAll('.scrolly')\r\n            gsap.to(tekno,{\r\n                duration:1,\r\n                opacity:0,\r\n                display:'none'\r\n            })\r\n            gsap.to(scrolly,{\r\n                duration:1,\r\n                opacity:1\r\n            })\r\n        }\r\n\r\n        const animateOut=function(){\r\n\r\n            const tekno =this.querySelectorAll('.tekno')\r\n            const scrolly =this.querySelectorAll('.scrolly')\r\n            gsap.to(tekno,{\r\n                duration:1,\r\n                opacity:1,\r\n                display:\"block\"\r\n            })\r\n            gsap.to(scrolly,{\r\n                duration:1,\r\n                opacity:0\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          container.addEventListener(\"scroll\", handleScroll);\r\n      \r\n          return () => {\r\n            container.removeEventListener(\"scroll\", handleScroll);\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\r\n  return (\r\n    <div className=\"text_competence technologie w-1/3  \">\r\n      <div className=\" flex flex-col h-full bg-cyan-100 relative rounded-3xl \"style={{fontFamily: 'Orbitron, sans-serif'}} >\r\n        <div className=\"h-96 w-full scrolly  overflow-auto custom-scrollbar opacity-0  \" ref={divRef}>\r\n          <div className=\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-500\">React</div>\r\n          <div className=\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-cyan-400\">Javascript</div>\r\n          <div className=\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-500\">tailwind</div>\r\n          <div className=\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-cyan-600\">SCSS</div>\r\n          <div className=\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-700\">WordPress</div>\r\n          <div className=\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-pink-500\">PHP</div>\r\n          <div className=\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-red-900\">Symfony</div>\r\n        </div>\r\n         <div className=\"h-1/6 absolute bottom-0 left-0\">\r\n\r\n        <h5 className=\" tekno text-6xl  \" style={{fontFamily: 'Orbitron, sans-serif'}}>tekno</h5>\r\n         </div>\r\n      </div>\r\n      {/* \r\n             <div className=\"2xl:w-2/3 xl:w-full\">\r\n\r\n            <p>Les technos que j'utilise la plupart du temps sont : \r\n            </p>\r\n            <ul>\r\n                <li>Javascript</li>\r\n                <li>taiwlind</li>\r\n                <li>php</li>\r\n                <li>twig</li>\r\n            </ul>\r\n\r\n             </div> */}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default Tekno;\r\n"],"mappings":"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"},"metadata":{},"sourceType":"module","externalDependencies":[]}