update

package.json

@@ -13,7 +13,8 @@
     "next": "14.2.2",
     "react": "^18",
     "react-dom": "^18",
-    "react-icons": "^5.1.0"
+    "react-icons": "^5.1.0",
+    "react-intersection-observer": "^9.10.1"
   },
   "devDependencies": {
     "@types/node": "^20",

src/components/AboutMe.tsx

@@ -1,25 +1,20 @@
 import Image from "next/image"
 import imgProfile from '../images/imgProfile.jpeg'
-import { useState ,useEffect,useContext } from "react"
+import { useState ,useEffect } from "react"
 import Link from "next/link"
 import { FaLinkedin,FaGithub } from "react-icons/fa";
 import { IoLogoWhatsapp } from "react-icons/io";
-import { MyContext } from "@/context/MyContext";
-import { TstateTheme } from "@/types/Types";
 import { motion } from 'framer-motion';
 import { pageVariants,pageTransition } from "../components/AnimationMotion";
 
-
 function AboutMe() {
 const [CursorIsVisible,setCursorIsVisible] = useState(false)
-const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
 
 useEffect(()=>{
 const Interval =  setInterval(()=>setCursorIsVisible((prev)=>!prev),700);  
 return ()=> clearInterval(Interval)
 },[])
 
-
 return (<motion.div initial="initial" animate="in" exit="out" variants={pageVariants} transition={pageTransition}>
 <section className=" flex w-full justify-evenly mb-7 mt-5 w-screen800:mb-0">
 
@@ -29,7 +24,6 @@ return (<motion.div initial="initial" animate="in" exit="out" variants={pageVari
 </div>
 </div>
 
-
 <div className=' flex justify-center flex-col max-w-[660px] w-full mx-1'>
 
 <div className="  mb-2 w-screen900:mb-0">
@@ -41,7 +35,6 @@ return (<motion.div initial="initial" animate="in" exit="out" variants={pageVari
 
 </div>
 
-
 <div className="  rounded-tl-3xl rounded-br-3xl animate-float hidden w-screen900:flex justify-center"> 
 <div className="  overflow-hidden rounded-tl-3xl rounded-br-3xl max-h-[20rem] shadow-2xl">
     <Image src={imgProfile} alt='image' height={500}   className=""/>
@@ -53,13 +46,11 @@ Apaixonado por tecnologia e impulsionado pelo desejo de criar experiências digi
 Minha missão é transformar ideias em interfaces eficientes e agradáveis que facilitem a vida das pessoas e gerem um impacto positivo no mundo digital.
 Com entusiasmo e dedicação, busco aprimorar minhas habilidades continuamente, explorando as últimas tendências e tecnologias para oferecer soluções inovadoras e personalizadas.
 Acredito no poder da tecnologia para resolver problemas e aproximar pessoas.
-{/* sou programador Front end React js
-Gosto de tecnologia e ver o resultado do meu trabalho gerar uma boa experiência a cada usuário e facilitando sua vida. */}
 </p>
 
 <div className=' mt-3 '>
 
-<b className="">Link para meus contatos:</b>
+<b className=" text-xl">Links para contato:</b>
 
 <div className="flex mt-2 flex-wrap gap-1 justify-center w-screen500:justify-start"> 
 
@@ -80,13 +71,10 @@ WhatsApp</Link>
 
 </div>
 
-
 </div>
 
 </section>
 </motion.div>
-
-
 )    
 }
 

src/components/AnimationMotion.tsx

@@ -61,26 +61,13 @@ export const pageVariants = {
       }
     }
   }
- export const CardProject = {
-    offscreen: {
-      y: 90
-    },
-    onscreen: {
-      y: 0,
-      rotate: 0,
-      transition: {
-        type: "spring",
-        bounce: 0.4,
-        duration: 0.05
-      }
-    }
-  };
-
-
 
+export  const ScrollVariants = {
+    visible: { opacity: 1, y: 0 },
+    hidden: { opacity: 0, y: 100 },
+  };
 
-  // export const modalVariants = {
-  //   hidden: { opacity: 0, y: "-100vh" },
-  //   visible: { opacity: 1, y: "0" },
-  //   exit: { opacity: 0, y: "100vh" }
-  // };  
+  export const ScrollTransition  = {
+    duration: 0.5,
+    damping: 1,
+  };

src/components/CatalogProject.tsx

@@ -9,27 +9,32 @@ import Link from 'next/link';
 import { TbWorldWww } from "react-icons/tb";
 import { FaGithub } from "react-icons/fa";
 import { TstateModalProject,TstateTheme } from '@/types/Types';
-import { useContext } from 'react';
+import { useContext,useRef } from 'react';
 import { MyContext } from '@/context/MyContext';
 import { motion } from 'framer-motion';
-import { CardProject } from './AnimationMotion';
+import { ScrollVariants,ScrollTransition } from './AnimationMotion';
+import { useInView } from 'react-intersection-observer';
 
-
-function CatalogProject({Modal,setModal}:TstateModalProject) {
+function CatalogProject({setModal}:TstateModalProject) {
 const StyleForTechs = ' pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
 const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
 const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500  border-gray-700 '
 :'duration-500 bg-white  from-gray-600 to-white bg-slate-100 border-gray-100 ' ;   
 const TheForTech = ThemeIsDark ? 'bg-slate-900':
 'bg-gray-200' ;
+const [ref, inView] = useInView();
+const containerRef = useRef(null);
 
+return (<li ref={containerRef}>
 
-return (<motion.li variants={CardProject}
-className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>
+<div ref={ref}>
 
-<div>
-
-</div>
+<motion.div  
+  initial="hidden"
+  animate={inView ? "visible" : "hidden"}
+  variants={ScrollVariants}
+  transition={ScrollTransition}
+className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>
 
 <div className=' mb-4 flex w-full justify-center max-h-96'>
 
@@ -73,7 +78,11 @@ className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2
 
 </div>
 
-</motion.li>
+</motion.div>
+
+</div>
+
+</li>
 ) 
 
 }

src/components/Content.tsx

@@ -19,10 +19,3 @@ export  const FirebaseText = 'O Firebase Database, também conhecido como Realti
 export  const BoostrapText = 'O Bootstrap é um framework de front-end desenvolvido pelo Twitter que ajuda os desenvolvedores a criar interfaces web responsivas e consistentes de forma mais rápida e fácil. Ele fornece um conjunto de componentes predefinidos, como botões, formulários, barras de navegação, entre outros, bem como um sistema de grid responsivo que facilita o desenvolvimento de layouts flexíveis e adaptáveis a diferentes tamanhos de tela.';
 
 export  const JavascriptText = 'JavaScript é uma linguagem de programação amplamente utilizada no desenvolvimento web para tornar as páginas da web interativas e dinâmicas. Ela permite aos desenvolvedores criar funcionalidades como validação de formulários, animações, manipulação do conteúdo da página em tempo real e interações com o usuário, como pop-ups e menus de navegação.'; 
-
-
-
-
-
-
-

src/components/MyProjects.tsx

@@ -3,16 +3,14 @@ import RegistMemberProject from './RegistMemberProject';
 import ModalProject from '@/modals/ModalProject';
 import { TmodalProject } from '@/types/Types';
 import { useState } from 'react';
-import { motion } from "framer-motion";
-
 
 function MyProjects() {
 const [Modal,setModal] = useState<TmodalProject>({IsOpen:false,img:''})
 
-return ( <motion.section initial="offscreen" whileInView="onscreen" viewport={{ once: true, amount: 0.5 }}
-className=' flex flex-col justify-around mb-8'>
+return ( <section className=' flex flex-col justify-around mb-8' >
 
     <h4 className=' text-3xl text-center mb-6'>Meus projetos</h4>
+
 <ul className='flex flex-wrap  w-screen850:justify-center justify-around gap-6'>
 
 <CatalogProject Modal={Modal} setModal={setModal} />
@@ -22,7 +20,7 @@ className=' flex flex-col justify-around mb-8'>
 
 <ModalProject Modal={Modal} setModal={setModal}/>
 
-</motion.section> 
+</section> 
 
 )
 

src/components/MyTechs.tsx

@@ -9,10 +9,13 @@ import CssImg from '../images/css3d.png'
 import Htmlimg from '../images/html3d.png'
 import GitImg from '../images/git3d.webp'
 import FirebaseImg from '../images/firebaseLogo.webp'
-import { useState,useContext  } from "react"
+import { useState,useContext,useRef  } from "react"
 import { ReactText,TypescriptText,NextText,TailwindText,CssText,HtmlText,GitText,GithubText,FirebaseText,BoostrapText,JavascriptText } from './Content'
 import { MyContext } from '@/context/MyContext'
 import { TstateTheme } from '@/types/Types'
+import { motion } from 'framer-motion';
+import { ScrollVariants,ScrollTransition } from './AnimationMotion';
+import { useInView } from 'react-intersection-observer';
 
 function MyTechs() {
     const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
@@ -21,6 +24,8 @@ const [TechClicked,setTechClicked] = useState<string>('react') ;
 const StyleForLi = 'cursor-pointer flex flex-col rounded-t-xl px-2 pb-1  shadow-2xl border ml-3 '
 const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500  border-x-gray-500  border-b-gray-700 shadow-xl shadow-gray-800'
 :'duration-500 bg-white  from-gray-600 to-white bg-gray-200 border-x-gray-300 border-t-gray-300 border-b-gray-300'
+const [ref, inView] = useInView();
+const containerRef = useRef(null);
 
 function CatchTechGiveStyle (tech:string ){
     if (ThemeIsDark) {
@@ -29,8 +34,7 @@ function CatchTechGiveStyle (tech:string ){
     else {
     return (tech === TechClicked ? 'bg-white border-b-0 border-x-gray-300 border-t-gray-500' : 'bg-gray-200  border-b-gray-300 hover:bg-white' ) 
     }
-    }
-
+}
 
 function ReturnText() {
 return (TechClicked === 'react' && ReactText) ||
@@ -48,8 +52,13 @@ return (TechClicked === 'react' && ReactText) ||
 return (
 <section className=' mt-4 mb-10 w-screen1050:hidden'>
 <h3 className=' text-3xl text-center mb-6'>Tecnologias que utilizo</h3>
+<div ref={containerRef}>
 
-<div className=' flex flex-col w-full items-center'>
+<motion.div   initial="hidden" ref={ref}
+  animate={inView ? "visible" : "hidden"}
+  variants={ScrollVariants}
+  transition={ScrollTransition}
+className=' flex flex-col w-full items-center'>
 
 <ul className=' flex  flex-row '>
 
@@ -100,10 +109,11 @@ onClick={()=>setTechClicked('firebase')}><b>Firebase</b>
  {TechClicked === 'git' && <p>{GithubText}</p> } 
 </p>
 
+</motion.div>
+
 </div>
 
 </section>
-
 )    
 }