Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gabriel372
Gabriel372 committed Jan 5, 2025
1 parent e2ee5b2 commit e7c0024
Show file tree
Hide file tree
Showing 8 changed files with 401 additions and 246 deletions.
185 changes: 109 additions & 76 deletions src/components/AboutMe.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,116 @@
import Image from "next/image"
import imgProfile from '../images/imgProfile.jpeg'
import { useState ,useEffect,useContext } from "react"
import Link from "next/link"
import { FaLinkedin,FaGithub } from "react-icons/fa";
import Image from "next/image";
import imgProfile from "../images/imgProfile.jpeg";
import { useState, useEffect, useContext } from "react";
import Link from "next/link";
import { FaLinkedin, FaGithub } from "react-icons/fa";
import { IoLogoWhatsapp } from "react-icons/io";
import { motion } from 'framer-motion';
import { pageVariants,pageTransition } from "../components/AnimationMotion";
import { motion } from "framer-motion";
import { pageVariants, pageTransition } from "../components/AnimationMotion";
import { TstateTheme } from "@/types/Types";
import { MyContext } from "@/context/MyContext";

function AboutMe() {
const [CursorIsVisible,setCursorIsVisible] = useState(false)
const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
const ThemeForCursor = `${ThemeIsDark ? 'bg-gray-300' : 'bg-gray-600'}`

useEffect(()=>{
const Interval = setInterval(()=>setCursorIsVisible((prev)=>!prev),700);
return ()=> clearInterval(Interval)
},[])

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 ">
<Image src={imgProfile} alt='image' height={500} className=" "/>
</div>
</div>

<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] items-center`}>Front end
<span className={`${!CursorIsVisible && 'invisible'} ${ThemeForCursor} h-14 w-1 w-screen450:h-10`}></span>
</h2>

</div>

<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-[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 um Programador dedicado, meu foco está na criação/manutenção de interfaces eficientes e agradáveis que geram uma boa experiência ao usuário. Possuo habilidades sólidas em diversas tecnologias, incluindo <b>React Js, Javascript, Typescript, Html 5, Css 3, Tailwind, Next js e Bootstrap.</b> Estou constantemente aprendendo e adquirindo mais conhecimento para aprimorar as habilidades que possuo. Meu objetivo é causar um impacto positivo no mundo digital, criando soluções que atendam às necessidades dos usuários e superem suas expectativas.
</p>

<div className=' mt-3 '>

<b className=" text-xl">Links para contato:</b>

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

</div>

</div>

</div>

</section>
</motion.div>
)
const [CursorIsVisible, setCursorIsVisible] = useState(false);
const { ThemeIsDark } = useContext(MyContext) as TstateTheme;
const ThemeForCursor = `${ThemeIsDark ? "bg-gray-300" : "bg-gray-600"}`;

useEffect(() => {
const Interval = setInterval(
() => setCursorIsVisible((prev) => !prev),
700
);
return () => clearInterval(Interval);
}, []);

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 ">
<Image src={imgProfile} alt="image" height={500} className=" " />
</div>
</div>

<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] items-center`}
>
Full Stack
<span
className={`${
!CursorIsVisible && "invisible"
} ${ThemeForCursor} h-14 w-1 w-screen450:h-10`}
></span>
</h2>
</div>

<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-[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 um Programador dedicado,
meu foco está na criação/manutenção de interfaces eficientes e
agradáveis que geram uma boa experiência ao usuário. Possuo
habilidades sólidas em diversas tecnologias, incluindo{" "}
<b>
React Js, Javascript, Typescript, Html 5, Css 3, Tailwind, Next
js,Bootstrap e Express js
</b>{" "}
Estou constantemente aprendendo e adquirindo mais conhecimento para
aprimorar as habilidades que possuo. Meu objetivo é causar um
impacto positivo no mundo digital, criando soluções que atendam às
necessidades dos usuários e superem suas expectativas.
</p>

<div className=" mt-3 ">
<b className=" text-xl">Links para contato:</b>

<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 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 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 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>
</div>
</div>
</div>
</section>
</motion.div>
);
}

export default AboutMe

export default AboutMe;
137 changes: 103 additions & 34 deletions src/components/Functions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,110 @@

import { FaCss3Alt,FaReact } from "react-icons/fa";
import { SiTypescript,SiTailwindcss,SiFirebase,SiFramer,SiSwiper,SiNextdotjs } from "react-icons/si";
import { FaCss3Alt, FaReact, FaNodeJs } from "react-icons/fa";
import {
SiTypescript,
SiTailwindcss,
SiFirebase,
SiFramer,
SiSwiper,
SiNextdotjs,
SiMongodb,
SiSocketdotio,
} from "react-icons/si";
import { useContext } from "react";
import { MyContext } from "@/context/MyContext";
import { TstateTheme } from "@/types/Types";

export function ReturnIconsTech(projectName:string) {
const StyleForTechs = ' pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center'
const {ThemeIsDark} = useContext(MyContext) as TstateTheme ;
const ThemeForTech = ThemeIsDark ? 'bg-slate-900':'bg-gray-200' ;
export function ReturnIconsTech(projectName: string) {
const StyleForTechs =
" pb-1 px-1 rounded-lg flex flex-row max-w-26 items-center";
const { ThemeIsDark } = useContext(MyContext) as TstateTheme;
const ThemeForTech = ThemeIsDark ? "bg-slate-900" : "bg-gray-200";

if (projectName === 'Catálogo de produtos' ) {
return <div className='mt-4 flex flex-wrap text-lg gap-1'><b className=''>Tecnologias utilizadas:</b>
<span className={`${StyleForTechs} ${ThemeForTech} `}><FaReact className=' mr-[2px]'/> React Js</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiTypescript className=' mr-[2px]'/> Typescript</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiTailwindcss className=' mr-[2px]'/> Tailwind</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiFramer className=' mr-[2px] '/> Framer motion</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
</div>
}
else if (projectName === 'Cadastrador de membros' ) {
return <div className='mt-4 flex flex-wrap text-lg gap-1'><b className=''>Tecnologias utilizadas:</b>
<span className={`${StyleForTechs} ${ThemeForTech}`}><FaReact className=' mr-[2px]'/> React Js</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiTypescript className=' mr-[2px] '/> Typescript</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><FaCss3Alt className=' mr-[2px]'/> Css</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiFirebase className=' mr-[2px]'/> Firebase</span>
if (projectName === "Catálogo de produtos") {
return (
<div className="mt-4 flex flex-wrap text-lg gap-1">
<b className="">Tecnologias utilizadas:</b>
<span className={`${StyleForTechs} ${ThemeForTech} `}>
<FaReact className=" mr-[2px]" /> React Js
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiTypescript className=" mr-[2px]" /> Typescript
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiTailwindcss className=" mr-[2px]" /> Tailwind
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiFramer className=" mr-[2px] " /> Framer motion
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiFirebase className=" mr-[2px]" /> Firebase
</span>
</div>
);
} else if (projectName === "FalaTú") {
return (
<div className="mt-4 flex flex-wrap text-lg gap-1">
<b className="">Tecnologias utilizadas:</b>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<FaReact className=" mr-[2px]" />
Next Js
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiTypescript className=" mr-[2px] " /> Typescript
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiTailwindcss className=" mr-[2px]" /> Tailwind
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<FaNodeJs className=" mr-[2px]" /> Express js
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiMongodb className=" mr-[2px]" /> Mongo Db
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiSocketdotio className=" mr-[2px]" /> Socket io
</span>
</div>
);
} else if (projectName === "Cadastrador de membros") {
return (
<div className="mt-4 flex flex-wrap text-lg gap-1">
<b className="">Tecnologias utilizadas:</b>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<FaReact className=" mr-[2px]" /> React Js
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiTypescript className=" mr-[2px] " /> Typescript
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<FaCss3Alt className=" mr-[2px]" /> Css
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiFirebase className=" mr-[2px]" /> Firebase
</span>
</div>
}
else if (projectName === 'Best car' ) {
return <div className='mt-4 flex flex-wrap text-lg gap-1'><b className=''>Tecnologias utilizadas:</b>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiNextdotjs className=' mr-[2px]'/> Next Js</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiTypescript className=' mr-[2px] '/> Typescript</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiTailwindcss className=' mr-[2px]'/> Tailwind</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiFramer className=' mr-[2px] '/> Framer motion</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}><SiSwiper className=' mr-[2px] '/>Swiper</span>
);
} else if (projectName === "Best car") {
return (
<div className="mt-4 flex flex-wrap text-lg gap-1">
<b className="">Tecnologias utilizadas:</b>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiNextdotjs className=" mr-[2px]" /> Next Js
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiTypescript className=" mr-[2px] " /> Typescript
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiTailwindcss className=" mr-[2px]" /> Tailwind
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiFramer className=" mr-[2px] " /> Framer motion
</span>
<span className={`${StyleForTechs} ${ThemeForTech}`}>
<SiSwiper className=" mr-[2px] " />
Swiper
</span>
</div>
}
return ''
}
);
}
return "";
}
Loading

0 comments on commit e7c0024

Please sign in to comment.