update

Gabriel372 · May 1, 2024 · b6108f0 · b6108f0
1 parent 49c974e
commit b6108f0
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 23 deletions.
diff --git a/src/components/AboutMe.tsx b/src/components/AboutMe.tsx
@@ -6,6 +6,9 @@ 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)
@@ -17,7 +20,8 @@ return ()=> clearInterval(Interval)
 },[])
 
 
-return (<section className=" flex w-full justify-evenly mb-7 mt-5 w-screen800:mb-0">
+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">
 
 <div className="rounded-tl-3xl rounded-br-3xl animate-float w-screen900:hidden mr-2"> 
 <div className="  overflow-hidden rounded-tl-3xl rounded-br-3xl max-h-[23rem] shadow-2xl ">
@@ -78,7 +82,12 @@ WhatsApp</Link>
 
 
 </div>
-</section>)    
+
+</section>
+</motion.div>
+
+
+)    
 }
 
 export default AboutMe

diff --git a/src/components/AnimationMotion.tsx b/src/components/AnimationMotion.tsx
@@ -0,0 +1,52 @@
+export const pageVariants = {
+    initial: {
+      opacity: 0,
+      x: "-100vw",
+      scale: 0.8
+    },
+    in: {
+      opacity: 1,
+      x: 0,
+      scale: 1
+    },
+    out: {
+      opacity: 0,
+      x: "100vw",
+      scale: 1.2
+    }
+  };
+
+  export const pageVariantsModal = {
+    initial: {
+      opacity: 0,
+      y: "100vh",
+    },
+    in: {
+      opacity: 1,
+      y: 0,  
+    },
+    out: {
+      opacity: 0,
+      y: "-100vh", 
+    },
+  };
+  export const pageTransitionModal = {
+    type: "tween",
+    ease: "anticipate",
+    duration: 0.5
+  };
+
+  export const pageTransition = {
+    type: "tween",
+    ease: "anticipate",
+    duration: 0.7
+  };
+
+
+
+
+  // export const modalVariants = {
+  //   hidden: { opacity: 0, y: "-100vh" },
+  //   visible: { opacity: 1, y: "0" },
+  //   exit: { opacity: 0, y: "100vh" }
+  // };  
diff --git a/src/components/CatalogProject.tsx b/src/components/CatalogProject.tsx
@@ -11,6 +11,7 @@ import { FaGithub } from "react-icons/fa";
 import { TstateModalProject,TstateTheme } from '@/types/Types';
 import { useContext } from 'react';
 import { MyContext } from '@/context/MyContext';
+import { motion } from 'framer-motion';
 
 function CatalogProject({Modal,setModal}:TstateModalProject) {
 const StyleForTechs = ' pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
@@ -28,12 +29,13 @@ return (<li className={`${ThemeForComponent} max-w-[400px]  rounded-2xl  border
 
 <div className=' mb-4 flex w-full justify-center max-h-96'>
 
-<div className=' flex max-w-[350px] w-screen400:max-w-[250px]'>
+<div className=' flex max-w-[21rem] w-screen300:mx-1 w-screen400:max-w-[17rem] '>
 <Image src={CatalogDesktopImg} alt='image' onClick={()=> {setModal({IsOpen:true,img:CatalogDesktopImg} ) } }
-className=" border-black rounded-xl border-8 inline max-h-40 cursor-pointer"/>
+className={` border-black rounded-xl  inline max-h-40 cursor-pointer w-screen400:border-[0.4rem] border-[0.5rem] `}/>
 
-<Image src={CatalogMobileImg} alt='image' height={160} onClick={()=> setModal({IsOpen:true,img:CatalogMobileImg})}
-className="border-black rounded-xl border-4 inline z-10 relative right-10 top-5 max-h-[150px] cursor-pointer"/>
+<Image src={CatalogMobileImg} alt='image'  onClick={()=> setModal({IsOpen:true,img:CatalogMobileImg})}
+className={` border-black rounded-xl border-4 inline z-10 relative right-10 top-8 max-h-[8.6rem] cursor-pointer 
+w-screen400:max-h-[5.7rem] w-screen400:rounded-md w-screen400:border-[3px] w-screen400:top-[3.7rem]`}/>
 
 </div>
 
@@ -54,10 +56,11 @@ que são exibidos na página inicial. Eles também podem adicionar um título pa
 <span className={`${StyleForTechs} ${TheForTech}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
 </div>
 
-<div className=' flex flex-row justify-around mt-4'>
+<div className=' flex justify-around mt-4 flex-wrap gap-1 w-screen350:gap-2'>
 
 <Link href='https://gabriel372.github.io/catalogo-de-produtos/'
-className=' bg-black text-white rounded-lg px-2 flex flex-row items-center max-w-36 py-2 justify-center w-full hover:bg-gray-700 border border-gray-700'>
+className={`bg-black text-white rounded-lg px-2 flex flex-row items-center max-w-36 py-2 justify-center w-full
+ hover:bg-gray-700 border border-gray-700 w-screen350:max-w-[10rem]`}>
 <TbWorldWww className=' mr-[2px] text-xl'/>Ver site</Link>
 
 <Link href='https://github.com/Gabriel372/catalogo-de-produtos'

diff --git a/src/components/RegistMemberProject.tsx b/src/components/RegistMemberProject.tsx
@@ -28,15 +28,28 @@ function RegistMemberProject({Modal,setModal}:TstateModalProject) {
     </div>
 
     <div className=' mb-4 flex w-full justify-center max-h-96'>
-
-    <div className=' flex max-w-[350px] w-screen400:max-w-[250px]'>
+
+    <div className=' flex max-w-[21rem] w-screen300:mx-1 w-screen400:max-w-[17rem] '>
+<Image src={RegistDesktopImg} alt='image' onClick={()=> {setModal({IsOpen:true,img:RegistDesktopImg} ) } }
+className={` border-black rounded-xl  inline max-h-40 cursor-pointer w-screen400:border-[0.4rem] border-[0.5rem] `}/>
+
+<Image src={RegistMobileImg} alt='image'  onClick={()=> setModal({IsOpen:true,img:RegistMobileImg})}
+className={` border-black rounded-xl border-4 inline z-10 relative right-10 top-8 max-h-[8.6rem] cursor-pointer 
+w-screen400:max-h-[5.7rem] w-screen400:rounded-md w-screen400:border-[3px] w-screen400:top-[3.7rem]`} />
+
+</div>
+
+
+
+    {/* <div className=' flex max-w-[21rem] w-screen300:mx-1 w-screen400:max-w-[17rem] '>
     <Image src={RegistDesktopImg} alt='image' height={150} onClick={()=> {setModal({IsOpen:true,img:RegistDesktopImg} ) } }
-    className=" border-black rounded-xl border-8 inline max-h-40 cursor-pointer"/>
+    className=" border-black rounded-xl  inline max-h-40 cursor-pointer w-screen400:border-[0.4rem] border-[0.5rem]"/>
     
     <Image src={RegistMobileImg} alt='image' height={160} onClick={()=> setModal({IsOpen:true,img:RegistMobileImg})}
-    className="border-black rounded-xl border-4 inline z-10 relative right-10 top-5 max-h-[150px] cursor-pointer"/>
+className={` border-black rounded-xl border-4 inline z-10 relative right-10 top-8 max-h-[8.6rem] cursor-pointer 
+w-screen400:max-h-[5.6rem] w-screen400:rounded-md w-screen400:border-[3px] w-screen400:top-14 w-screen300:top-11`}/>
     
-    </div>
+    </div> */}
 
     </div>
 
@@ -54,10 +67,10 @@ function RegistMemberProject({Modal,setModal}:TstateModalProject) {
     <span className={`${StyleForTechs} ${TheForTech}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
     </div>
 
-    <div className=' mt-4 flex flex-row justify-around'>
+    <div className=' flex justify-around mt-4 flex-wrap gap-1 w-screen350:gap-2'>
 
     <Link href='https://gabriel372.github.io/cadastro-de-membros/'
-    className=' bg-black text-white rounded-lg px-2 flex flex-row items-center max-w-36 py-2 justify-center w-full hover:bg-gray-700 border border-gray-700'>
+    className=' bg-black text-white rounded-lg px-2 flex flex-row items-center max-w-36 py-2 justify-center w-full hover:bg-gray-700 border border-gray-700 w-screen350:max-w-[10rem]'>
     <TbWorldWww className=' mr-[2px] text-xl'/>Ver site</Link>
 
     <Link href='https://github.com/Gabriel372/cadastro-de-membros'

diff --git a/src/modals/ModalProject.tsx b/src/modals/ModalProject.tsx
@@ -2,31 +2,35 @@ import { TstateModalProject } from "@/types/Types"
 import style from './ModalProject.module.css'
 import Image from "next/image"
 import { IoClose } from "react-icons/io5";
+import { motion } from 'framer-motion';
+import { pageVariantsModal,pageTransitionModal } from "@/components/AnimationMotion";
+
 
 function ModalProject({Modal,setModal}:TstateModalProject) {
 
 return (<>
-{ Modal.IsOpen && <div onClick={()=>setModal({IsOpen:false,img:''})}
-   className={`${style.containerMod} `} >
+{ Modal.IsOpen && <motion.div onClick={()=>setModal({IsOpen:false,img:''})}
+   className={`${style.containerMod} `} 
+    animate="in" 
+   exit="out" 
+   variants={pageVariantsModal} 
+   transition={pageTransitionModal} >
 
 <div className={`${style.divScroll}`}>
 
-<div className={`${style.dadSquare}`}>
+   <div className={`${style.dadSquare}`}    >
 <p className={`${style.btnCloseMod}`}> <IoClose/></p>
 <Image onClick={(e)=> e.stopPropagation()} src={Modal.img} alt="imagem"
 className={`${style.squareMod }`}/>
-
-</div>
-
 </div>
 
 </div>
-
+</motion.div>
 }
-
 </>
 
 )    
+
 }
 
 export default ModalProject