update

Gabriel372 · Apr 24, 2024 · af93909 · af93909
1 parent 656cc8c
commit af93909
Show file tree

Hide file tree

Showing 12 changed files with 202 additions and 98 deletions.
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-  output: "export",
+  // output: "export",
   reactStrictMode: true,
 };
 

diff --git a/src/components/AboutMe.tsx b/src/components/AboutMe.tsx
@@ -15,10 +15,10 @@ return ()=> clearInterval(Interval)
 },[])
 
 
-return (<section className=" flex w-full justify-evenly mb-7 mt-5 ">
+return (<section className=" flex w-full justify-evenly mb-7 mt-5 w-screen800:mb-0">
 
-<div className=" shadow-2xl rounded-tl-3xl rounded-br-3xl animate-float w-screen900:hidden"> 
-<div className="  overflow-hidden rounded-tl-3xl rounded-br-3xl max-h-[350px]">
+<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>
 </div>
@@ -36,9 +36,9 @@ return (<section className=" flex w-full justify-evenly mb-7 mt-5 ">
 </div>
 
 
-<div className=" shadow-2xl 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]">
-    <Image src={imgProfile} alt='image' height={500} className=""/>
+<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>
 </div>
 
@@ -51,7 +51,7 @@ Gosto de tecnologia e ver o resultado do meu trabalho gerar uma boa experiência
 
 {/* <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"> 
+<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' 
 href='https://www.linkedin.com/in/gabriel-brand%C3%A3o-42174223a/'>

diff --git a/src/components/CatalogProject.tsx b/src/components/CatalogProject.tsx
@@ -8,10 +8,10 @@ import { SiFirebase } from "react-icons/si";
 import Link from 'next/link';
 import { TbWorldWww } from "react-icons/tb";
 import { FaGithub } from "react-icons/fa";
+import { TstateModalProject } from '@/types/Types';
 
-
-function catalogProject() {
-const StyleForTechs = 'ml-2 bg-gray-200 pb-1 px-1 rounded-lg flex flex-row max-w-24 items-center'  
+function catalogProject({Modal,setModal}:TstateModalProject) {
+const StyleForTechs = 'bg-gray-200 pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
 
 
 
@@ -24,11 +24,11 @@ return (<li className=' max-w-[400px] bg-slate-100 rounded-2xl border-gray-200 b
 <div className=' mb-4 flex w-full justify-center max-h-96'>
 
 <div className=' flex max-w-[350px] w-screen400:max-w-[250px]'>
-<Image src={CatalogDesktopImg} alt='image' 
-className=" border-black rounded-xl border-8 inline max-h-40 "/>
+<Image src={CatalogDesktopImg} alt='image' onClick={()=> {setModal({IsOpen:true,img:CatalogDesktopImg} ) } }
+className=" border-black rounded-xl border-8 inline max-h-40 cursor-pointer"/>
 
-<Image src={CatalogMobileImg} alt='image' height={160} 
-className="border-black rounded-xl border-4 inline z-10 relative right-10 top-5 max-h-[150px]"/>
+<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"/>
 
 </div>
 
@@ -42,7 +42,7 @@ que são exibidos na página inicial. Eles também podem adicionar um título pa
 
 </div>
 
-<div className='mt-4 flex flex-wrap text-lg'><b className=''>Tecnologias utilizadas:</b>
+<div className='mt-4 flex flex-wrap text-lg gap-1'><b className=''>Tecnologias utilizadas:</b>
 <span className={`${StyleForTechs}`}><FaReact className=' mr-[2px]'/> React Js</span>
 <span className={`${StyleForTechs}`}><SiTypescript className=' mr-[2px]'/> Typescript</span>
 <span className={`${StyleForTechs}`}><SiTailwindcss className=' mr-[2px]'/> Tailwind</span>

diff --git a/src/components/MyProjects.tsx b/src/components/MyProjects.tsx
@@ -1,33 +1,35 @@
 import CatalogProject from './CatalogProject';
 import RegistMemberProject from './RegistMemberProject';
-
+import ModalProject from '@/modals/ModalProject';
+import { TmodalProject } from '@/types/Types';
+import { useState } from 'react';
 
 function MyProjects() {
-
-// SIMULAR COM IMG TELA DE DESKTOP E MOBILE
-
-//IMG:HOVER > CURSOR LUPA
-
-// AO CLICAR NESSA SIMULACAO ABRE UM MODAL PARA EXPANDIR IMG
-
+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=' flex flex-row justify-around w-screen850:flex-col'> */}
 <ul className=' grid grid-cols-2 w-screen850:grid-cols-1 justify-items-center gap-y-2'>
 
 
-<CatalogProject/>
-<RegistMemberProject/>
+<CatalogProject Modal={Modal} setModal={setModal} />
+<RegistMemberProject Modal={Modal} setModal={setModal}/>
 
 </ul>
 
+<ModalProject Modal={Modal} setModal={setModal}/>
+   {/* <ModalProject Modal={Modal} setModal={setModal}/> */}
 
+{/* <div className=' fixed w-full h-full top-0 flex justify-center items-center   left-0 bg-custom-black'>
+    <div className=' h-10 w-10 bg-green-500'></div>
+    
+    aaaaaaa</div> */}
 
 
+</section> 
 
-
-</section>)
+)
 
 }
 

diff --git a/src/components/MyTechsForMobile.tsx b/src/components/MyTechsForMobile.tsx
@@ -14,92 +14,108 @@ 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-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 w-screen550:text-sm w-screen550:ml-1 w-screen450:text-[11px] w-screen550:px-[2px]' 
+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 StyleForImg = 'max-w-14 w-screen500:max-w-10'
-    const [TechClicked,setTechClicked] = useState<Ttech>({group1:'react',group2:'javascript'})
+const [TechClicked,setTechClicked] = useState<string>('react')
 
-function ReturnTextForGroup1() {
-return (TechClicked.group1 === 'react' && ReactText) ||
-(TechClicked.group1 === 'typescript' && TypescriptText) ||
-(TechClicked.group1 === 'next' && NextText) ||
- (TechClicked.group1 === 'tailwind' && TailwindText) ||
-(TechClicked.group1 === 'bootstrap' && BoostrapText)
-}
+// const [TechClicked,setTechClicked] = useState<Ttech>({group1:'react',group2:'javascript'})
 
-function ReturnTextForGroup2() {
-    return (TechClicked.group2 === 'javascript' && JavascriptText) ||
-    (TechClicked.group2 === 'css' && CssText) ||
-    (TechClicked.group2 === 'html' && HtmlText) ||
-     (TechClicked.group2 === 'git' && GitText) ||
-    (TechClicked.group2 === 'firebase' && FirebaseText)
-}
+// function ReturnTextForGroup1() {
+// return (TechClicked.group1 === 'react' && ReactText) ||
+// (TechClicked.group1 === 'typescript' && TypescriptText) ||
+// (TechClicked.group1 === 'next' && NextText) ||
+//  (TechClicked.group1 === 'tailwind' && TailwindText) ||
+// (TechClicked.group1 === 'bootstrap' && BoostrapText)
+// }
 
+// function ReturnTextForGroup2() {
+//     return (TechClicked.group2 === 'javascript' && JavascriptText) ||
+//     (TechClicked.group2 === 'css' && CssText) ||
+//     (TechClicked.group2 === 'html' && HtmlText) ||
+//      (TechClicked.group2 === 'git' && GitText) ||
+//     (TechClicked.group2 === 'firebase' && FirebaseText)
+// }
+function ReturnText() {
+    return (TechClicked === 'react' && ReactText) ||
+        (TechClicked === 'typescript' && TypescriptText) ||
+        (TechClicked === 'next' && NextText) ||
+        (TechClicked === 'tailwind' && TailwindText) ||
+        (TechClicked === 'bootstrap' && BoostrapText) ||
+        (TechClicked === 'javascript' && JavascriptText) ||
+        (TechClicked === 'css' && CssText) ||
+        (TechClicked === 'html' && HtmlText) ||
+        (TechClicked === 'git' && GitText) ||
+        (TechClicked === 'firebase' && FirebaseText)
+    }
 
 
 return (
-<section className=' mt-4 mb-10 hidden w-screen1050:flex flex-col'>
+<section className=' mt-4 hidden w-screen1050:flex flex-col mb-2'>
  <h3 className=' text-3xl text-center mb-6'>Tecnologias que utilizo</h3>
 
 <div className=' flex flex-col w-full items-center'>
 
-<ul className=' flex  flex-row'>
+<ul className=' flex  w-full justify-end flex-wrap gap-2'>
 
-<li className={`${StyleForLi} ${TechClicked.group1 === 'react' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'} `} 
-onClick={()=> setTechClicked((prev)=>({...prev,group1:'react'})) }><b className=''
+<li className={`${StyleForLi} ${TechClicked === 'react' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+onClick={()=> setTechClicked('react') }><b className=''
  >React js</b>
 <Image src={ReactImg} alt='image'   className={`${StyleForImg}`}/>
 </li>
 
- <li className={`${StyleForLi} ${TechClicked.group1 === 'typescript' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
-onClick={()=> setTechClicked((prev)=>({...prev,group1:'typescript'})) }><b>Typescript</b>
+ <li className={`${StyleForLi} ${TechClicked === 'typescript' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+onClick={()=> setTechClicked('typescript') }><b>Typescript</b>
 <Image src={TypescriptImg} alt='image'  className={`${StyleForImg}`}/></li>
 
-<li className={`${StyleForLi} ${TechClicked.group1 === 'next' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`}
-onClick={()=> setTechClicked((prev)=>({...prev,group1:'next'})) }><b>Next js</b>
+<li className={`${StyleForLi} ${TechClicked === 'next' ? 'bg-white border-black ': 'bg-gray-200  border-b-gray-300'}`}
+onClick={()=> setTechClicked('next') }><b>Next js</b>
   <Image src={NextImg} alt='image'  className={`${StyleForImg}`}/></li>
 
-   <li className={`${StyleForLi} ${TechClicked.group1 === 'tailwind' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
-onClick={()=> setTechClicked((prev)=>({...prev,group1:'tailwind'})) }><b>Tailwind</b>
+   <li className={`${StyleForLi} ${TechClicked === 'tailwind' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+onClick={()=> setTechClicked('tailwind') }><b>Tailwind</b>
 <Image src={TailwindImg} alt='image'   className={`${StyleForImg}`}/></li>
 
-<li className={`${StyleForLi} ${TechClicked.group1 === 'bootstrap' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
-onClick={()=> setTechClicked((prev)=>({...prev,group1:'bootstrap'})) }><b>Bootstrap</b>
+<li className={`${StyleForLi} ${TechClicked === 'bootstrap' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+onClick={()=> setTechClicked('bootstrap') }><b>Bootstrap</b>
 <Image src={BootstrapImg} alt='image' className={`${StyleForImg}`}/></li>
-
-</ul>
 
-<p className='max-w-[500px]  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-[240px] mb-3'>
- {`${ReturnTextForGroup1()}`}   
-</p>
-
-<ul className=' flex  flex-row'>
-
-<li className={`${StyleForLi} ${TechClicked.group2 === 'javascript' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
-onClick={()=> setTechClicked((prev)=>({...prev,group2:'javascript'})) }><b>Javascript</b>
+<li className={`${StyleForLi} ${TechClicked === 'javascript' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'} `} 
+onClick={()=> setTechClicked('javascript') }><b>Javascript</b>
  <Image src={JavascriptImg} alt='image'   className={`${StyleForImg}`}/></li>
 
-<li className={`${StyleForLi} ${TechClicked.group2 === 'css' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
-onClick={()=> setTechClicked((prev)=>({...prev,group2:'css'})) }><b>Css 3</b>
+<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>
 
- <li className={`${StyleForLi} ${TechClicked.group2 === 'html' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
-onClick={()=> setTechClicked((prev)=>({...prev,group2:'html'})) } ><b>Html 5</b>
+ <li className={`${StyleForLi} ${TechClicked === 'html' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+onClick={()=> setTechClicked('html') }><b>Html 5</b>
  <Image src={Htmlimg} alt='image' className={`${StyleForImg}`}/></li>
 
-<li className={`${StyleForLi} ${TechClicked.group2 === 'git' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
-onClick={()=> setTechClicked((prev)=>({...prev,group2:'git'})) } ><b>Git/Github</b>
+<li className={`${StyleForLi} ${TechClicked === 'git' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+onClick={()=> setTechClicked('git') }><b>Git/Github</b>
 <Image src={GitImg} alt='image' className={`${StyleForImg}`}/></li>
 
- <li className={`${StyleForLi} ${TechClicked.group2 === 'firebase' ? 'bg-white border-b-0 ' : 'bg-gray-200  border-b-gray-300'}`} 
-onClick={()=> setTechClicked((prev)=>({...prev,group2:'firebase'})) } ><b>Firebase</b>
- <Image src={FirebaseImg} alt='image' className={`${StyleForImg}`}/></li>
+ <li className={`${StyleForLi} ${TechClicked === 'firebase' ? 'bg-white border-black ' : 'bg-gray-200  border-b-gray-300'}`} 
+onClick={()=> setTechClicked('firebase') }><b>Firebase</b>
+ <Image src={FirebaseImg} alt='image' className={`${StyleForImg}`}/></li>       
+
+</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'>
+ {`${ReturnText()}`}   
+</p>
+
+<ul className=' flex  flex-row max-w-[500px] w-full justify-end'>
+
+
 
 </ul>
 
- <p className='max-w-[500px]  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-[240px]'>
+ {/* <p className='max-w-[500px]  bg-white shadow-3xl border rounded-b-xl text-lg p-1 w-full border-x-gray-300 border-b-gray-300 border-t-0 pt-2 min-h-[240px] shadow-2xl'>
  {`${ReturnTextForGroup2()}`}   
 {TechClicked.group2 === 'git' && <p>{GithubText}</p> } 
-</p>
+</p> */}
 
 </div>
 

diff --git a/src/components/RegistMemberProject.tsx b/src/components/RegistMemberProject.tsx
@@ -9,11 +9,12 @@ import Link from 'next/link';
 import { TbWorldWww } from "react-icons/tb";
 import { FaGithub } from "react-icons/fa";
 import { FaCss3Alt } from "react-icons/fa";
+import { TstateModalProject } from '@/types/Types';
 
 
 
-function RegistMemberProject() {
-    const StyleForTechs = 'ml-2 bg-gray-200 pb-1 px-1 rounded-lg flex flex-row max-w-24 items-center'  
+function RegistMemberProject({Modal,setModal}:TstateModalProject) {
+    const StyleForTechs = ' bg-gray-200 pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'  
 
 
 
@@ -26,11 +27,11 @@ return (<li className='  max-w-[400px] bg-slate-100 rounded-2xl border-gray-200
     <div className=' mb-4 flex w-full justify-center max-h-96'>
 
     <div className=' flex max-w-[350px] w-screen400:max-w-[250px]'>
-    <Image src={RegistDesktopImg} alt='image' height={150} 
-    className=" border-black rounded-xl border-8 inline max-h-40 "/>
+    <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"/>
 
-    <Image src={RegistMobileImg} alt='image' height={160} 
-    className="border-black rounded-xl border-4 inline z-10 relative right-10 top-5 max-h-[150px]"/>
+    <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"/>
 
     </div>
 
@@ -43,9 +44,9 @@ return (<li className='  max-w-[400px] bg-slate-100 rounded-2xl border-gray-200
 
     </div>
 
-    <div className='mt-4 flex flex-wrap text-lg'><b className=''>Tecnologias utilizadas:</b>
+    <div className='mt-4 flex flex-wrap text-lg gap-1'><b className=''>Tecnologias utilizadas:</b>
     <span className={`${StyleForTechs}`}><FaReact className=' mr-[2px]'/> React Js</span>
-    <span className={`${StyleForTechs}`}><SiTypescript className=' mr-[2px]'/> Typescript</span>
+    <span className={`${StyleForTechs}`}><SiTypescript className=' mr-[2px] '/> Typescript</span>
     <span className={`${StyleForTechs}`}><FaCss3Alt className=' mr-[2px]'/> Css</span>
     <span className={`${StyleForTechs}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
     </div>

diff --git a/src/modals/ModalProject.module.css b/src/modals/ModalProject.module.css
@@ -0,0 +1,34 @@
+.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;
+
+  }
+.bgBlack{
+background-color: black;
+
+}
+.bgWhite{
+  background-color: white;
+
+}
+.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;
+}
+
+
+