update

Gabriel372 · Apr 26, 2024 · e712a5f · e712a5f
1 parent 8d8378e
commit e712a5f
Show file tree

Hide file tree

Showing 17 changed files with 176 additions and 106 deletions.
diff --git a/src/components/AboutMe.tsx b/src/components/AboutMe.tsx
@@ -1,13 +1,15 @@
 import Image from "next/image"
 import imgProfile from '../images/imgProfile.jpeg'
-import { useState ,useEffect } from "react"
+import { useState ,useEffect,useContext } from "react"
 import Link from "next/link"
-import { FaLinkedin } from "react-icons/fa";
-import { FaGithub } from "react-icons/fa";
+import { FaLinkedin,FaGithub } from "react-icons/fa";
 import { IoLogoWhatsapp } from "react-icons/io";
+import { MyContext } from "@/context/MyContext";
+import { TstateTheme } from "@/types/Types";
 
 function AboutMe() {
 const [CursorIsVisible,setCursorIsVisible] = useState(false)
+const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
 
 useEffect(()=>{
 const Interval =  setInterval(()=>setCursorIsVisible((prev)=>!prev),700);  
@@ -17,20 +19,20 @@ 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"> 
-<div className="  overflow-hidden rounded-tl-3xl rounded-br-3xl max-h-[350px] shadow-2xl">
-    <Image src={imgProfile} alt='image' height={500} className=""/>
+<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 ">
+    <Image src={imgProfile} alt='image' height={500} className=" "/>
 </div>
 </div>
 
 
-<div className=' flex justify-center flex-col max-w-[660px] w-full'>
+<div className=' flex justify-center flex-col max-w-[660px] w-full mx-1'>
 
 <div className="  mb-2 w-screen900:mb-0">
 <h2 className={`fontGameRetro  text-[40px] mb-2 w-screen800:text-[35px] w-screen450:text-[6vw] `}>Programador</h2>
 
-<h2 className={`fontGameRetro text-end text-[45px] flex justify-end w-screen800:text-[40px] w-screen450:text-[7vw] `}>Front end
-<span className={`${!CursorIsVisible && 'invisible'} bg-gray-600 h-14 w-1 inline`}></span>
+<h2 className={`fontGameRetro text-end text-[45px] flex justify-end w-screen800:text-[40px] w-screen450:text-[7vw] items-center`}>Front end
+<span className={`${!CursorIsVisible && 'invisible'} bg-gray-600 h-14 w-1 w-screen450:h-10`}></span>
 </h2>
 
 </div>
@@ -49,19 +51,17 @@ Gosto de tecnologia e ver o resultado do meu trabalho gerar uma boa experiência
 
 <b className="">Link para meus contatos:</b>
 
-{/* <div className="flex flex-row justify-around mt-2"> */}
-{/* <div className="grid mt-2 grid-cols-3 gap-x-1"> */}
 <div className="flex mt-2 flex-wrap gap-1 justify-center w-screen500:justify-start"> 
 
-<Link className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center w-full hover:bg-gray-700 max-w-[150px] max-h-10' 
+<Link className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center w-full hover:bg-gray-700 max-w-[150px] max-h-10 border-gray-500 border' 
 href='https://www.linkedin.com/in/gabriel-brand%C3%A3o-42174223a/'>
 <FaLinkedin className=' mr-[2px] text-xl'/>Linkedin</Link>
 
-<Link className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center w-full hover:bg-gray-700 max-w-[150px] max-h-10' 
+<Link className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center w-full hover:bg-gray-700 max-w-[150px] max-h-10 border-gray-500 border' 
 href='https://github.com/Gabriel372'>
 <FaGithub className=' mr-[2px] text-xl'/>Github</Link>
 
-<Link className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center w-full hover:bg-gray-700 max-w-[150px] max-h-10' 
+<Link className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center w-full hover:bg-gray-700 max-w-[150px] max-h-10 border-gray-500 border' 
  href='https://whatsa.me/5521973766911/?t=Ol%C3%A1,%20vim%20atrav%C3%A9s%20do%20seu%20portfolio!'>
 <IoLogoWhatsapp className=' mr-[2px] text-xl'/>
 WhatsApp</Link>
@@ -72,7 +72,7 @@ WhatsApp</Link>
 
 
 </div>
-
+<button onClick={()=>console.log(ThemeIsDark)}>teste 222</button>
 </section>)    
 }
 

diff --git a/src/components/BtnToggleMode.tsx b/src/components/BtnToggleMode.tsx
@@ -1,24 +1,46 @@
-function BtnToggleMode() {
+import { IoIosSunny } from "react-icons/io";
+import { FaMoon } from "react-icons/fa";
+import {useContext, useEffect} from "react";
+import { TstateTheme } from "@/types/Types";
+import { MyContext } from "@/context/MyContext";
+
 
-//CRIAR CONTEXTO 
+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;
 
-//CRIAR STATE MODETHEME
 
-//CRIAR ALTERNACAO PARA STATE E LS
+useEffect(()=>{
+// CheckUserModeTheme() 
+setThemeIsDark(ActualThemeIsDark);
+},[])
 
-//VERIFICAR SE O USUARIO PREFERE TEMA ESCURO OU CLARO P/ APLICAR NO STATE
+function ToggleTheme() {
+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) {
-//       console.log("O usuário prefere o tema escuro");
-//     } else {
-//       console.log("O usuário prefere o tema claro");
-//     }
-//   }
-
-return (<button onClick={()=> console.log('ok')}>BtnToggleMode</button>)
+// if (isDarkMode) {
+// localStorage.setItem('ActualThemeIsDark',`${true}`);
+// setThemeIsDark(true)
+// } else {
+//  localStorage.setItem('ActualThemeIsDark',`${false}`);
+//  setThemeIsDark(false)
+// }
+//   }    
+// }
+
+
+
+return (<button onClick={ToggleTheme}>
+ {ThemeIsDark ? <IoIosSunny className=" text-2xl"/> : <FaMoon />} 
+
+</button>)
 
 }
 

diff --git a/src/components/CatalogProject.tsx b/src/components/CatalogProject.tsx
@@ -15,7 +15,7 @@ const StyleForTechs = 'bg-gray-200 pb-1 px-1 rounded-lg flex flex-row max-w-26 i
 
 
 
-return (<li className=' max-w-[400px] bg-slate-100 rounded-2xl border-gray-200 border px-1 py-3 shadow-3xl transform transition-transform duration-200 hover:-translate-y-1 '>
+return (<li className=' max-w-[400px] bg-slate-100 rounded-2xl border-gray-200 border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1 '>
 
 <div>
 
@@ -35,7 +35,7 @@ className="border-black rounded-xl border-4 inline z-10 relative right-10 top-5
 </div>
 
 <div>
-<h4  className=" text-2xl">Catálogo de produtos</h4>
+<h4  className=" text-2xl mb-2">Catálogo de produtos</h4>
 
 <p className=' text-lg'>catálogo online personalizável.Usuários cadastrados podem gerenciar produtos, 
 que são exibidos na página inicial. Eles também podem adicionar um título para exibição.</p>

diff --git a/src/components/MyTechs.tsx b/src/components/MyTechs.tsx
@@ -9,12 +9,31 @@ import CssImg from '../images/css3d.png'
 import Htmlimg from '../images/html3d.png'
 import GitImg from '../images/git3d.webp'
 import FirebaseImg from '../images/firebaseLogo.png'
-import { useState  } from "react"
+import { useState,useContext  } 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'
 
 function MyTechs() {
-const StyleForLi = 'cursor-pointer flex flex-col rounded-t-xl px-2 pb-1  shadow-3xl border ml-3 bg-gray-200 border-x-gray-300 border-t-gray-300 border-b-gray-300'
-const [TechClicked,setTechClicked] = useState<string>('react')
+    const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
+const StyleForLi = 'cursor-pointer flex flex-col rounded-t-xl px-2 pb-1  shadow-2xl border ml-3 '
+const [TechClicked,setTechClicked] = useState<string>('react') ;
+const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500 bg-gray-500 border-x-gray-500  border-b-gray-700'
+:'duration-500 bg-white  from-gray-600 to-white bg-gray-200 border-x-gray-300 border-t-gray-300 border-b-gray-300'
+//<p className={`max-w-[1020px]  shadow-2xl border ml-3 rounded-b-xl text-lg p-1 w-full border-x-gray-300 border-b-gray-300 border-t-0 pt-2 min-h-[150px]`}>
+
+
+const StyleLigth = TechClicked === 'react' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'
+const StyleDark = TechClicked === 'react' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'
+
+function CatchTechGiveStyle(tech:string) {
+if (ThemeIsDark) {
+return (tech === TechClicked ? 'bg-gray-800 border-b-0 ' : 'bg-gray-900  border-gray-500' ) 
+}
+else {
+return (tech === TechClicked ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300' ) 
+}
+}
 
 function ReturnText() {
 return (TechClicked === 'react' && ReactText) ||
@@ -37,48 +56,49 @@ return (
 
 <ul className=' flex  flex-row '>
 
-<li className={`${StyleForLi} ${TechClicked === 'react' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('react')}`} 
 onClick={()=>setTechClicked('react')}><b className=''
 >React js</b>
 <Image src={ReactImg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'typescript' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'} `} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('typescript')} `} 
 onClick={()=>setTechClicked('typescript')}><b>Typescript</b>
 <Image src={TypescriptImg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'next' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`}
+<li className={`${StyleForLi} ${CatchTechGiveStyle('next')}`}
  onClick={()=>setTechClicked('next')}><b>Next js</b>
 <Image src={NextImg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'tailwind' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('tailwind')}`} 
 onClick={()=>setTechClicked('tailwind')}><b>Tailwind</b>
 <Image src={TailwindImg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'bootstrap' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('bootstrap')}`} 
 onClick={()=>setTechClicked('bootstrap')}><b>Bootstrap</b>
 <Image src={BootstrapImg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'javascript' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('javascript')}`} 
 onClick={()=>setTechClicked('javascript')}><b>Javascript</b>
 <Image src={JavascriptImg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'css' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('css')}`} 
 onClick={()=>setTechClicked('css')}><b>Css 3</b>
 <Image src={CssImg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'html' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} onClick={()=>setTechClicked('html')}><b>Html 5</b>
+<li className={`${StyleForLi} ${CatchTechGiveStyle('html')}`}
+ onClick={()=>setTechClicked('html')}><b>Html 5</b>
 <Image src={Htmlimg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'git' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('git')}`} 
 onClick={()=>setTechClicked('git')}><b>Git/Github</b>
 <Image src={GitImg} alt='image' height={70}  className=" "/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'firebase' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${CatchTechGiveStyle('firebase')}`} 
 onClick={()=>setTechClicked('firebase')}><b>Firebase</b>
 <Image src={FirebaseImg} alt='image' height={70}  className=" "/></li>
 </ul>
 
-<p className='max-w-[1020px]  bg-white shadow-3xl border ml-3 rounded-b-xl text-lg p-1 w-full border-x-gray-300 border-b-gray-300 border-t-0 pt-2 min-h-[150px]'>
+<p className={`${ThemeForComponent} duration-500 max-w-[1020px]  shadow-2xl border ml-3 rounded-b-xl text-lg p-1 w-full border-x-gray-300 border-b-gray-300 border-t-0 pt-2 min-h-[150px]`}>
 {`${ReturnText()}`}   
  {TechClicked === 'git' && <p>{GithubText}</p> } 
 </p>

diff --git a/src/components/MyTechsForMobile.tsx b/src/components/MyTechsForMobile.tsx
@@ -14,8 +14,8 @@ import FirebaseImg from '../images/firebaseLogo.png'
 import { ReactText,TypescriptText,NextText,TailwindText,CssText,HtmlText,GitText,GithubText,FirebaseText,BoostrapText,JavascriptText } from './Content'
 
 function MyTechsForMobile() {
-const StyleForLi = `cursor-pointer flex flex-col rounded-xl px-2 pb-1  shadow-2xl border 
-w-screen550:text-sm w-screen550:ml-1 w-screen450:text-[11px] w-screen550:px-[2px] w-screen550:rounded-md justify-center items-center` 
+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` 
 const StyleForImg = 'max-w-14 w-screen500:max-w-10'
 const [TechClicked,setTechClicked] = useState<string>('react')
 
@@ -56,7 +56,7 @@ return (
 
 <div className=' flex flex-col w-full items-center'>
 
-<ul className=' flex  w-full justify-end flex-wrap gap-2'>
+<ul className=' flex  w-full justify-center flex-wrap gap-2'>
 
 <li className={`${StyleForLi} ${TechClicked === 'react' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
 onClick={()=> setTechClicked('react') }><b className=''
@@ -84,7 +84,7 @@ onClick={()=> setTechClicked('bootstrap') }><b>Bootstrap</b>
 onClick={()=> setTechClicked('javascript') }><b>Javascript</b>
  <Image src={JavascriptImg} alt='image'   className={`${StyleForImg}`}/></li>
 
-<li className={`${StyleForLi} ${TechClicked === 'css' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+<li className={`${StyleForLi} ${TechClicked === 'css' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'} `} 
 onClick={()=> setTechClicked('css') }><b>Css 3</b>
 <Image src={CssImg} alt='image'  className={`${StyleForImg}`}/></li>
 
@@ -102,8 +102,10 @@ onClick={()=> setTechClicked('firebase') }><b>Firebase</b>
 
 </ul>
 
-<p className='  bg-white border rounded-xl text-lg p-1 w-full border-x-gray-300 border-b-gray-300 border-t-0 pt-2 min-h-[240px] mb-3 shadow-2xl mt-2'>
+<p className='  bg-white border rounded-xl text-lg p-1 w-full border-gray-200 pt-2 min-h-[240px] mb-3 shadow-2xl mt-2'>
  {`${ReturnText()}`}   
+ {TechClicked === 'git' && <p>{GithubText}</p> } 
+
 </p>
 
 <ul className=' flex  flex-row max-w-[500px] w-full justify-end'>

diff --git a/src/components/RegistMemberProject.tsx b/src/components/RegistMemberProject.tsx
@@ -18,7 +18,7 @@ function RegistMemberProject({Modal,setModal}:TstateModalProject) {
 
 
 
-return (<li className='  max-w-[400px] bg-slate-100 rounded-2xl border-gray-200 border px-1 py-3 shadow-3xl transform transition-transform duration-200 hover:-translate-y-1 '>
+return (<li className='  max-w-[400px] bg-slate-100 rounded-2xl border-gray-200 border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1 '>
 
     <div>
 
@@ -38,7 +38,7 @@ return (<li className='  max-w-[400px] bg-slate-100 rounded-2xl border-gray-200
     </div>
 
     <div>
-    <h4  className=" text-2xl">Cadastrador de membros</h4>
+    <h4  className=" text-2xl mb-2">Cadastrador de membros</h4>
 
     <p className=' text-xl'>É um cadastrador onde o usuário se cadastra para gerenciar os membros registrados, incluindo a capacidade de adicionar fotos aos seus perfis.</p>
 

diff --git a/src/context/MyContext.tsx b/src/context/MyContext.tsx
@@ -0,0 +1,17 @@
+import {  createContext,useState } from "react";
+import { Props } from "@/types/Types";
+export const MyContext = createContext({});
+
+
+export function MyContextProvider({children}:Props) {  
+const [ThemeIsDark,setThemeIsDark] = useState<boolean>(false);
+
+
+
+return ( <MyContext.Provider value={{ThemeIsDark,setThemeIsDark}}>
+      {children}
+    </MyContext.Provider>
+  )
+
+}
+
diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
@@ -1,11 +1,16 @@
 import Footer from "@/pages/Footer";
 import Header from "../pages/Header";
+import { useContext } from "react";
+import { TstateTheme } from "@/types/Types";
+import { MyContext } from "@/context/MyContext";
 
 function Layout({ children }:any) {
+  const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
+  const Theme = ThemeIsDark ? ' bg-black text-white duration-700' : 'bg-white text-black duration-700'
 
 return (
 <>
-<main>
+<main className={`${Theme} `}>
 <Header/>
 {children}
 <Footer/>

diff --git a/src/modals/ModalProject.module.css b/src/modals/ModalProject.module.css
@@ -1,13 +1,11 @@
 .squareMod{
     border: 1px solid gray;   
     border-radius: 5px;
-    /* height: 110px;
-    width: 100px; */
     padding: 0 10px 10px 10px;
     display: flex;
     flex-direction: column;
     justify-content: space-around;
-
+    border: none;
   }
 .bgBlack{
 background-color: black;
@@ -18,17 +16,30 @@ background-color: black;
 
 }
 .btnCloseMod{
-/* display: block; */
 display: flex;
 justify-content: end;
 width: 100%;
 text-align: right;
-/* margin-left: auto; */
   padding:0 5px 5px 0;
 font-size: 2rem;
 cursor: pointer;
 color: white;
 }
+.themeDark{
+  background-color: black;
+  color: white; 
+ }
+
 
+@media only screen and (max-height: 500px) {
+  .dadSquare {
+      overflow-y: scroll;
+      height: 100%;
+}
+.squareMod{
+  max-height: 130vh;
+
+}
+}