update

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^11.1.7",
     "next": "14.2.2",
     "react": "^18",
     "react-dom": "^18",

src/components/AboutMe.tsx

@@ -20,7 +20,7 @@ return ()=> clearInterval(Interval)
 return (<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-[350px] shadow-2xl ">
+<div className="  overflow-hidden rounded-tl-3xl rounded-br-3xl max-h-[23rem] shadow-2xl ">
     <Image src={imgProfile} alt='image' height={500} className=" "/>
 </div>
 </div>
@@ -39,13 +39,19 @@ return (<section className=" flex w-full justify-evenly mb-7 mt-5 w-screen800:mb
 
 
 <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-[310px] shadow-2xl">
-    <Image src={imgProfile} alt='image'  height={500} className=" "/>
+<div className="  overflow-hidden rounded-tl-3xl rounded-br-3xl max-h-[20rem] shadow-2xl">
+    <Image src={imgProfile} alt='image' height={500}   className=""/>
 </div>
 </div>
 
-<p className=" text-xl text-center mt-6">Oi meu nome é <b>Gabriel Brandão</b> 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>
+<p className=" text-xl text-center mt-6">
+Apaixonado por tecnologia e impulsionado pelo desejo de criar experiências digitais excelentes, sou <b>Gabriel Brandão</b> , programador front-end com foco em React.js.
+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 '>
 

src/components/BtnToggleMode.tsx

@@ -4,15 +4,12 @@ import {useContext, useEffect} from "react";
 import { TstateTheme } from "@/types/Types";
 import { MyContext } from "@/context/MyContext";
 
-
 function BtnToggleMode() {
 const {ThemeIsDark,setThemeIsDark} = useContext(MyContext) as TstateTheme ;
-// const ActualThemeIsDark =  JSON.parse(localStorage.getItem('ActualThemeIsDark') || 'null')
 const ActualThemeIsDark = typeof window !== 'undefined' ? JSON.parse(localStorage.getItem('ActualThemeIsDark') || 'null') : null;
-
+const ThemeForBtn = ThemeIsDark ? 'text-white duration-1000 ': 'text-black duration-1000 '  
 
 useEffect(()=>{
-// CheckUserModeTheme() 
 setThemeIsDark(ActualThemeIsDark);
 })
 
@@ -21,30 +18,11 @@ localStorage.setItem('ActualThemeIsDark',`${!ThemeIsDark}`);
 setThemeIsDark(!ThemeIsDark) ;
 }
 
-// function CheckUserModeTheme() {
-// if (typeof window !== "undefined") {
-//     const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-
-// if (isDarkMode) {
-// localStorage.setItem('ActualThemeIsDark',`${true}`);
-// setThemeIsDark(true)
-// } else {
-//  localStorage.setItem('ActualThemeIsDark',`${false}`);
-//  setThemeIsDark(false)
-// }
-//   }    
-// }
-
-
-
-return (<button onClick={ToggleTheme} >
-
+return ( <button onClick={ToggleTheme} className={`${ThemeForBtn }`}>
  {ThemeIsDark ?
-<IoIosSunny className=" text-[2.2rem]"/> : <FaMoon className=" text-[1.5rem]"/>
-}
-
-
-</button>)
+<IoIosSunny className=" text-[2.2rem]"/> : <FaMoon className=" text-[1.5rem]"/> }
+</button> 
+)
 
 }
 

src/components/CatalogProject.tsx

@@ -15,7 +15,7 @@ import { MyContext } from '@/context/MyContext';
 function CatalogProject({Modal,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'
+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' ;

src/components/MyProjects.tsx

@@ -10,8 +10,7 @@ const [Modal,setModal] = useState<TmodalProject>({IsOpen:false,img:''})
 return (<section className=' flex flex-col justify-around mb-8'>
 
     <h4 className=' text-3xl text-center mb-6'>Meus projetos</h4>
-<ul className=' grid grid-cols-2 w-screen850:grid-cols-1 justify-items-center gap-y-2'>
-
+<ul className='flex flex-wrap  w-screen850:justify-center justify-around gap-6'>
 
 <CatalogProject Modal={Modal} setModal={setModal} />
 <RegistMemberProject Modal={Modal} setModal={setModal}/>

src/components/MyTechs.tsx

@@ -19,7 +19,7 @@ function MyTechs() {
 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'
+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'
 
 function CatchTechGiveStyle (tech:string ){
@@ -53,7 +53,7 @@ return (
 
 <ul className=' flex  flex-row '>
 
-<li className={`${StyleForLi} ${CatchTechGiveStyle('react')}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('react')} `} 
 onClick={()=>setTechClicked('react')}><b className=''
 >React js</b>
 <Image src={ReactImg} alt='image' height={70}  className=" "/></li>

src/components/MyTechsForMobile.tsx

@@ -16,11 +16,11 @@ import { TstateTheme } from "@/types/Types"
 
 function MyTechsForMobile() {
 const StyleForLi = `cursor-pointer flex flex-col rounded-xl px-2 pb-1  shadow-2xl border   
-w-screen550:text-sm  w-screen450:text-[11px] w-screen550:px-1 w-screen550:rounded-md justify-center items-center` 
+w-screen550:text-sm  w-screen450:text-[0.7rem] w-screen550:px-1 w-screen550:rounded-md justify-center items-center` 
 const StyleForImg = 'max-w-14 w-screen500:max-w-10'
 const [TechClicked,setTechClicked] = useState<string>('react')
 const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
-const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500  border-gray-700'
+const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500  border-gray-700 shadow-xl shadow-gray-800'
 :'duration-500 bg-white  from-gray-600 to-white bg-gray-200 border-gray-300' ;
 
 function ReturnText() {
@@ -37,7 +37,7 @@ function ReturnText() {
 }
 function CatchTechGiveStyle (tech:string ){
     if (ThemeIsDark) {
-    return (tech === TechClicked ? 'bg-gray-700' : 'bg-gray-900  border-gray-500 hover:bg-gray-700' ) 
+    return (tech === TechClicked ? 'bg-gray-700 ' : 'bg-gray-900  border-gray-500 hover:bg-gray-700 ' ) 
     }
     else {
     return (tech === TechClicked ? 'bg-white border-gray-400' : 'bg-gray-200  border-b-gray-300 hover:bg-white' ) 
@@ -96,15 +96,11 @@ onClick={()=> setTechClicked('firebase') }><b>Firebase</b>
 
 </ul>
 
-<p className={`${ThemeForComponent}   border rounded-xl text-lg p-1 w-full pt-2 min-h-[240px] mb-3 shadow-2xl mt-2'`}>
+<p className={`${ThemeForComponent} border rounded-xl text-lg  w-full px-1 py-2  mb-3 shadow-2xl mt-2 w-screen500:min-h-[23rem] w-screen800:min-h-[12.5rem]  min-h-[9rem]`}>
  {`${ReturnText()}`}   
  {TechClicked === 'git' && <p>{GithubText}</p> } 
 
 </p>
-
-<ul className=' flex  flex-row max-w-[500px] w-full justify-end'>
-
-</ul>
 
 </div>
 

src/modals/ModalProject.module.css

@@ -9,7 +9,6 @@ justify-content: center;
 align-items: center;
 background-color: rgb(0, 0,0,0.5);
 padding: 0.5rem 0 0.5rem 0;
-
 }
 
 .squareMod{
@@ -20,6 +19,7 @@ padding: 0.5rem 0 0.5rem 0;
     flex-direction: column;
     justify-content: space-around;
     border: none;
+    max-height: 90vh;
   }
 .bgBlack{
 background-color: black;
@@ -43,6 +43,13 @@ color: white;
   background-color: black;
   color: white; 
  }
+@media only screen and (max-height: 500px) {
+  .dadSquare {
+      height: 100%;
+}
+.squareMod{
+  max-height: 150vh;
+}
  .divScroll{
   height: 100%;
   width: 100%;
@@ -53,13 +60,7 @@ color: white;
  }
 
 
-@media only screen and (max-height: 500px) {
-  .dadSquare {
-      height: 100%;
-}
-.squareMod{
-  max-height: 150vh;
-}
+
 }
 
 

src/modals/ModalProject.tsx

@@ -3,7 +3,6 @@ import style from './ModalProject.module.css'
 import Image from "next/image"
 import { IoClose } from "react-icons/io5";
 
-
 function ModalProject({Modal,setModal}:TstateModalProject) {
 
 return (<>

src/pages/Footer.tsx

@@ -4,7 +4,7 @@ import { TstateTheme } from "@/types/Types";
 
 function Footer() {
     const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
-    const ThemeForComponent = ThemeIsDark ? 'bg-gradient-to-b from-black to-gray-500 text-white duration-500 border-t-gray-800 ':'duration-500 bg-gradient-to-t from-gray-600 to-white border-t-0'
+    const ThemeForComponent = ThemeIsDark ? 'bg-gradient-to-b from-black to-gray-600 text-white duration-500 border-t-gray-800 ':'duration-500 bg-gradient-to-t from-gray-600 to-white border-t-0'
 //const ThemeForComponent = ThemeIsDark ? 'text-white bg-gradient-to-t from-black to-gray-400 duration-700 border-b-gray-800 border border-t-0 border-x-0':'duration-800 bg-gradient-to-b from-gray-600 to-white'
 
 

src/pages/Header.tsx

@@ -7,10 +7,11 @@ import { TstateTheme } from "@/types/Types";
 
 function Header() {
 const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
-const ThemeForComponent = ThemeIsDark ? 'text-white bg-gradient-to-t from-black to-gray-400 duration-700 border-b-gray-800 border border-t-0 border-x-0':'duration-800 bg-gradient-to-b from-gray-600 to-white'
+const ThemeForComponent = ThemeIsDark ? 'text-white bg-gradient-to-t from-black to-gray-400 duration-1000 border-b-gray-800 border border-t-0 border-x-0':
+'duration-1000 bg-gradient-to-b from-gray-600 to-white'
 
-return (<header className={`${ThemeForComponent} `}>
-<nav className=" flex justify-around w-full h-16 items-center ">
+return (<header className={`${ThemeForComponent} transition `}>
+<nav className=" flex justify-around w-full h-16 items-center">
     <BtnToggleMode/>
     </nav>