Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gabriel372
Gabriel372 committed Apr 26, 2024
1 parent e712a5f commit b1c8e70
Show file tree
Hide file tree
Showing 8 changed files with 76 additions and 92 deletions.
1 change: 0 additions & 1 deletion src/components/AboutMe.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@ WhatsApp</Link>


</div>
<button onClick={()=>console.log(ThemeIsDark)}>teste 222</button>
</section>)
}

Expand Down
27 changes: 16 additions & 11 deletions src/components/CatalogProject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,19 @@ 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';
import { TstateModalProject,TstateTheme } from '@/types/Types';
import { useContext } from 'react';
import { MyContext } from '@/context/MyContext';

function catalogProject({Modal,setModal}:TstateModalProject) {
const StyleForTechs = 'bg-gray-200 pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'

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' ;


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 '>
return (<li className={`${ThemeForComponent} max-w-[400px] rounded-2xl border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>

<div>

Expand Down Expand Up @@ -43,20 +48,20 @@ 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 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>
<span className={`${StyleForTechs}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
<span className={`${StyleForTechs} ${TheForTech} `}><FaReact className=' mr-[2px]'/> React Js</span>
<span className={`${StyleForTechs} ${TheForTech}`}><SiTypescript className=' mr-[2px]'/> Typescript</span>
<span className={`${StyleForTechs} ${TheForTech}`}><SiTailwindcss className=' mr-[2px]'/> Tailwind</span>
<span className={`${StyleForTechs} ${TheForTech}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
</div>

<div className=' flex flex-row justify-around mt-4'>

<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'>
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'>
<TbWorldWww className=' mr-[2px] text-xl'/>Ver site</Link>

<Link href='https://github.com/Gabriel372/catalogo-de-produtos'
className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center max-w-36 w-full hover:bg-gray-700'>
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-h-11 border border-gray-700 max-w-40'>
<FaGithub className=' mr-[2px] text-xl'/>Ver repositório</Link>

</div>
Expand Down
8 changes: 0 additions & 8 deletions src/components/MyProjects.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,6 @@ return (<section className=' flex flex-col justify-around mb-8'>
</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>

)
Expand Down
23 changes: 10 additions & 13 deletions src/components/MyTechs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,24 +16,21 @@ import { TstateTheme } from '@/types/Types'

function MyTechs() {
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 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 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 border-b-gray-500' )
}
else {
return (tech === TechClicked ? '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) ||
Expand Down
67 changes: 27 additions & 40 deletions src/components/MyTechsForMobile.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { useState } from "react"
import { Ttech } from "@/types/Types"
import { useState,useContext } from "react"
import Image from 'next/image'
import ReactImg from '../images/react3d.webp'
import TypescriptImg from '../images/ts3d.webp'
Expand All @@ -12,30 +11,18 @@ import Htmlimg from '../images/html3d.png'
import GitImg from '../images/git3d.webp'
import FirebaseImg from '../images/firebaseLogo.png'
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 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`
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'
:'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 [TechClicked,setTechClicked] = useState<Ttech>({group1:'react',group2:'javascript'})

// 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) ||
Expand All @@ -47,78 +34,78 @@ function ReturnText() {
(TechClicked === 'html' && HtmlText) ||
(TechClicked === 'git' && GitText) ||
(TechClicked === 'firebase' && FirebaseText)
}
function CatchTechGiveStyle (tech:string ){
if (ThemeIsDark) {
return (tech === TechClicked ? 'bg-gray-700' : 'bg-gray-900 border-gray-500' )
}
else {
return (tech === TechClicked ? 'bg-white border-b-0 ' : 'bg-gray-200 border-b-gray-300' )
}
}


return (
<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 w-full justify-center flex-wrap gap-2'>
<ul className=' flex w-full justify-center flex-wrap gap-2 mb-2'>

<li className={`${StyleForLi} ${TechClicked === 'react' ? 'bg-white border-black ' : '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' className={`${StyleForImg}`}/>
</li>

<li className={`${StyleForLi} ${TechClicked === 'typescript' ? 'bg-white border-black ' : 'bg-gray-200 border-b-gray-300'}`}
<li className={`${StyleForLi} ${CatchTechGiveStyle('typescript')}`}
onClick={()=> setTechClicked('typescript') }><b>Typescript</b>
<Image src={TypescriptImg} alt='image' className={`${StyleForImg}`}/></li>

<li className={`${StyleForLi} ${TechClicked === 'next' ? 'bg-white border-black ': 'bg-gray-200 border-b-gray-300'}`}
<li className={`${StyleForLi} ${CatchTechGiveStyle('next')}`}
onClick={()=> setTechClicked('next') }><b>Next js</b>
<Image src={NextImg} alt='image' className={`${StyleForImg}`}/></li>

<li className={`${StyleForLi} ${TechClicked === 'tailwind' ? 'bg-white border-black ' : 'bg-gray-200 border-b-gray-300'}`}
<li className={`${StyleForLi} ${CatchTechGiveStyle('tailwind')}`}
onClick={()=> setTechClicked('tailwind') }><b>Tailwind</b>
<Image src={TailwindImg} alt='image' className={`${StyleForImg}`}/></li>

<li className={`${StyleForLi} ${TechClicked === 'bootstrap' ? 'bg-white border-black ' : 'bg-gray-200 border-b-gray-300'}`}
<li className={`${StyleForLi} ${CatchTechGiveStyle('bootstrap')}`}
onClick={()=> setTechClicked('bootstrap') }><b>Bootstrap</b>
<Image src={BootstrapImg} alt='image' className={`${StyleForImg}`}/></li>

<li className={`${StyleForLi} ${TechClicked === 'javascript' ? 'bg-white border-black ' : 'bg-gray-200 border-b-gray-300'} `}
<li className={`${StyleForLi} ${CatchTechGiveStyle('javascript')} `}
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} ${CatchTechGiveStyle('css')} `}
onClick={()=> setTechClicked('css') }><b>Css 3</b>
<Image src={CssImg} alt='image' className={`${StyleForImg}`}/></li>

<li className={`${StyleForLi} ${TechClicked === 'html' ? 'bg-white border-black ' : 'bg-gray-200 border-b-gray-300'}`}
<li className={`${StyleForLi} ${CatchTechGiveStyle('html')}`}
onClick={()=> setTechClicked('html') }><b>Html 5</b>
<Image src={Htmlimg} alt='image' className={`${StyleForImg}`}/></li>

<li className={`${StyleForLi} ${TechClicked === 'git' ? 'bg-white border-black ' : 'bg-gray-200 border-b-gray-300'}`}
<li className={`${StyleForLi} ${CatchTechGiveStyle('git')}`}
onClick={()=> setTechClicked('git') }><b>Git/Github</b>
<Image src={GitImg} alt='image' className={`${StyleForImg}`}/></li>

<li className={`${StyleForLi} ${TechClicked === 'firebase' ? 'bg-white border-black ' : 'bg-gray-200 border-b-gray-300'}`}
<li className={`${StyleForLi} ${CatchTechGiveStyle('firebase')}`}
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-gray-200 pt-2 min-h-[240px] mb-3 shadow-2xl mt-2'>
<p className={`${ThemeForComponent} border rounded-xl text-lg p-1 w-full 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'>



</ul>

{/* <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> */}


</div>

</section>
Expand Down
29 changes: 16 additions & 13 deletions src/components/RegistMemberProject.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,19 @@ 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';


import { TstateModalProject,TstateTheme } from '@/types/Types';
import { useContext } from 'react';
import { MyContext } from '@/context/MyContext';

function RegistMemberProject({Modal,setModal}:TstateModalProject) {
const StyleForTechs = ' bg-gray-200 pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'


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' ;

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 '>
return (<li className={`${ThemeForComponent} max-w-[400px] rounded-2xl border px-1 py-3 shadow-2xl transform transition-transform duration-200 hover:-translate-y-1`}>

<div>

Expand All @@ -45,20 +48,20 @@ return (<li className=' max-w-[400px] bg-slate-100 rounded-2xl border-gray-200
</div>

<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}`}><FaCss3Alt className=' mr-[2px]'/> Css</span>
<span className={`${StyleForTechs}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
<span className={`${StyleForTechs} ${TheForTech}`}><FaReact className=' mr-[2px]'/> React Js</span>
<span className={`${StyleForTechs} ${TheForTech}`}><SiTypescript className=' mr-[2px] '/> Typescript</span>
<span className={`${StyleForTechs} ${TheForTech}`}><FaCss3Alt className=' mr-[2px]'/> Css</span>
<span className={`${StyleForTechs} ${TheForTech}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
</div>

<div className=' mt-4 flex flex-row justify-around'>

<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'>
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'>
<TbWorldWww className=' mr-[2px] text-xl'/>Ver site</Link>

<Link href='https://github.com/Gabriel372/cadastro-de-membros'
className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2 justify-center max-w-36 w-full hover:bg-gray-700'>
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-h-11 border border-gray-700 max-w-40'>
<FaGithub className=' mr-[2px] text-xl'/>Ver repositório</Link>

</div>
Expand Down
7 changes: 6 additions & 1 deletion src/pages/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
import { useContext } from "react";
import { MyContext } from "@/context/MyContext";
import { TstateTheme } from "@/types/Types";

function Footer() {
const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500':'duration-500 bg-gradient-to-t from-gray-600 to-white'

return (<footer className="bg-gradient-to-t from-gray-600 to-white">
return (<footer className={`${ThemeForComponent} `}>
<nav className=" flex justify-around w-full h-16 items-center">
Gabriel Brandão 2024
</nav>
Expand Down
6 changes: 1 addition & 5 deletions src/pages/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,11 @@ import { TstateTheme } from "@/types/Types";

function Header() {
const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
const ThemeForComponent = ThemeIsDark ? 'text-white bg-neutral-800 duration-500':'duration-500 bg-gradient-to-b from-gray-600 to-white'


const ThemeForComponent = ThemeIsDark ? 'text-white bg-gray-800 duration-500 border-b-gray-600 border border-t-0':'duration-500 bg-gradient-to-b from-gray-600 to-white'

return (<header className={`${ThemeForComponent} dura`}>
<nav className=" flex justify-around w-full h-16 items-center ">
<BtnToggleMode/>
{/* <Link href="/" ><span className=" ">Home</span></Link>
<Link href="/Todo"><span className="">Todo</span></Link> */}
</nav>

</header>)
Expand Down

0 comments on commit b1c8e70

Please sign in to comment.