{"ast":null,"code":"import React from\"react\";import{gsap}from\"gsap\";import{useRef}from\"react\";import{useEffect}from\"react\";import{jsx as _jsx}from\"react/jsx-runtime\";import{jsxs as _jsxs}from\"react/jsx-runtime\";var Tekno=function Tekno(){var divRef=useRef(null);useEffect(function(){var container=divRef.current;var trigger=document.querySelectorAll('.technologie');// Fonction pour gérer l'effet de défilement\nvar handleScroll=function handleScroll(){var scrollPosition=container.scrollTop;var textElements=container.querySelectorAll(\".titre_scroll\");// Ajustez ces valeurs selon vos besoins\nvar maxScroll=container.scrollHeight-container.clientHeight;var maxSize=1.5;// Taille maximale du texte\nvar maxOpacity=1;// Opacité maximale\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// }\ntextElements.forEach(function(text){var offset=text.offsetTop-scrollPosition;var scale=1+(maxSize-1)*(1-offset/maxScroll*2);var opacity=maxOpacity*(1-offset/maxScroll*3);gsap.to(text,{duration:0.5,scale:scale,opacity:opacity});});};var animateOver=function animateOver(){var tekno=this.querySelectorAll('.tekno');var scrolly=this.querySelectorAll('.scrolly');gsap.to(tekno,{duration:1,opacity:0,display:'none'});gsap.to(scrolly,{duration:1,opacity:1});};var animateOut=function animateOut(){var tekno=this.querySelectorAll('.tekno');var scrolly=this.querySelectorAll('.scrolly');gsap.to(tekno,{duration:1,opacity:1,display:\"block\"});gsap.to(scrolly,{duration:1,opacity:0});};trigger.forEach(function(el){el.addEventListener(\"mouseover\",animateOver,false);el.addEventListener(\"touchstart\",animateOver,false);el.addEventListener(\"mouseout\",animateOut,false);el.addEventListener(\"touchend\",animateOut,false);});container.addEventListener(\"scroll\",handleScroll);return function(){container.removeEventListener(\"scroll\",handleScroll);trigger.forEach(function(el){el.removeEventListener(\"mouseover\",animateOver,false);el.removeEventListener(\"touchstart\",animateOver,false);el.removeEventListener(\"mouseout\",animateOut,false);el.removeEventListener(\"touchend\",animateOut,false);});};},[]);return/*#__PURE__*/_jsxs(\"div\",{className:\"text_competence technologie w-1/3  \",children:[/*#__PURE__*/_jsxs(\"div\",{className:\" max-md:hidden max-sm:hidden lg:block flex flex-col h-full bg-cyan-100 relative rounded-3xl \",style:{fontFamily:'Orbitron, sans-serif'},children:[/*#__PURE__*/_jsxs(\"div\",{className:\"h-96 w-full scrolly  overflow-auto custom-scrollbar opacity-0  \",ref:divRef,children:[/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-500\",children:\"React\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-cyan-400\",children:\"Javascript\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-500\",children:\"tailwind\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-cyan-600\",children:\"SCSS\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-700\",children:\"WordPress\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-blue-600\",children:\"Bootstrap\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-pink-500\",children:\"PHP\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-red-900\",children:\"Symfony\"})]}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/6 absolute bottom-0 left-0\",children:/*#__PURE__*/_jsx(\"h5\",{className:\" tekno text-6xl  \",style:{fontFamily:'Orbitron, sans-serif'},children:\"tekno :\"})})]}),/*#__PURE__*/_jsxs(\"div\",{className:\" max-sm:block  max-lg:hidden lg:hidden  h-full bg-cyan-100 mb-10 rounded-3xl \",style:{fontFamily:'Orbitron, sans-serif'},children:[/*#__PURE__*/_jsxs(\"div\",{className:\"h-96 w-full   overflow-auto custom-scrollbar  \",children:[/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-500\",children:\"React\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-cyan-400\",children:\"Javascript\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-500\",children:\"tailwind\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-cyan-600\",children:\"SCSS\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-yellow-700\",children:\"WordPress\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-blue-600\",children:\"Bootstrap\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-pink-500\",children:\"PHP\"}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/2 flex items-center justify-center titre_scroll text-4xl text-red-900\",children:\"Symfony\"})]}),/*#__PURE__*/_jsx(\"div\",{className:\"h-1/6 absolute bottom-0 left-0\"})]})]});};export default Tekno;","map":{"version":3,"names":["React","gsap","useRef","useEffect","jsx","_jsx","jsxs","_jsxs","Tekno","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"],"sources":["C:/Users/user/Desktop/06portreact/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=\" max-md:hidden max-sm:hidden lg:block 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-blue-600\">Bootstrap</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      <div className=\" max-sm:block  max-lg:hidden lg:hidden  h-full bg-cyan-100 mb-10 rounded-3xl \"style={{fontFamily: 'Orbitron, sans-serif'}} >\r\n        <div className=\"h-96 w-full   overflow-auto custom-scrollbar  \" >\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-blue-600\">Bootstrap</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     \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":[]}