diff --git a/package-lock.json b/package-lock.json index 876559c..51380e8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,7 +12,8 @@ "next": "14.2.2", "react": "^18", "react-dom": "^18", - "react-icons": "^5.1.0" + "react-icons": "^5.1.0", + "react-intersection-observer": "^9.10.1" }, "devDependencies": { "@types/node": "^20", @@ -4054,6 +4055,20 @@ "react": "*" } }, + "node_modules/react-intersection-observer": { + "version": "9.10.1", + "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.10.1.tgz", + "integrity": "sha512-ZseerLEOaZ2FFMtkjNd0RGzxKTiiIBGaXcR5buh3GSgtoInNCztHvCzgu5Gg2I2vUhF/EX1XJn95inZkp/K6xQ==", + "peerDependencies": { + "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", + "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index a7677fa..ae61bc8 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "next": "14.2.2", "react": "^18", "react-dom": "^18", - "react-icons": "^5.1.0" + "react-icons": "^5.1.0", + "react-intersection-observer": "^9.10.1" }, "devDependencies": { "@types/node": "^20", diff --git a/public/favicon.ico b/public/favicon.ico index 718d6fe..4a3192b 100644 Binary files a/public/favicon.ico and b/public/favicon.ico differ diff --git a/public/favicon3.ico b/public/favicon3.ico new file mode 100644 index 0000000..b77b85d Binary files /dev/null and b/public/favicon3.ico differ diff --git a/src/components/AboutMe.tsx b/src/components/AboutMe.tsx index 0800d65..1a6fedd 100644 --- a/src/components/AboutMe.tsx +++ b/src/components/AboutMe.tsx @@ -1,25 +1,20 @@ import Image from "next/image" import imgProfile from '../images/imgProfile.jpeg' -import { useState ,useEffect,useContext } from "react" +import { useState ,useEffect } from "react" import Link from "next/link" import { FaLinkedin,FaGithub } from "react-icons/fa"; import { IoLogoWhatsapp } from "react-icons/io"; -import { MyContext } from "@/context/MyContext"; -import { TstateTheme } from "@/types/Types"; import { motion } from 'framer-motion'; import { pageVariants,pageTransition } from "../components/AnimationMotion"; - function AboutMe() { const [CursorIsVisible,setCursorIsVisible] = useState(false) -const {ThemeIsDark} = useContext(MyContext) as TstateTheme ; useEffect(()=>{ const Interval = setInterval(()=>setCursorIsVisible((prev)=>!prev),700); return ()=> clearInterval(Interval) },[]) - return (
@@ -29,7 +24,6 @@ return ( -
@@ -41,7 +35,6 @@ return ( -
image @@ -53,13 +46,11 @@ Apaixonado por tecnologia e impulsionado pelo desejo de criar experiências digi 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. */}

-Link para meus contatos: +Links para contato:
@@ -80,13 +71,10 @@ WhatsApp
-
- - ) } diff --git a/src/components/AboutMeForTablet.tsx b/src/components/AboutMeForTablet.tsx deleted file mode 100644 index ad0ecbb..0000000 --- a/src/components/AboutMeForTablet.tsx +++ /dev/null @@ -1,72 +0,0 @@ -import Image from "next/image" -import imgProfile from '../images/imgProfile.jpeg' -import { useState ,useEffect } from "react" -import Link from "next/link" -import { FaLinkedin } from "react-icons/fa"; -import { FaGithub } from "react-icons/fa"; -import { IoLogoWhatsapp } from "react-icons/io"; - -function AboutMeForTablet() { - const [CursorIsVisible,setCursorIsVisible] = useState(false) - - useEffect(()=>{ - const Interval = setInterval(()=>setCursorIsVisible((prev)=>!prev),700); - return ()=> clearInterval(Interval) - },[]) - - - return (
- - - - -
- -
-

Programador

- -

Front end - -

- -
- - -
-
- image -
-
- -

Oi meu nome é Gabriel Brandão 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.

- -
- - Link para meus contatos: - -
- - Linkedin - - - Github - - - - WhatsApp - -
- -
- - -
- -
) -} - -export default AboutMeForTablet diff --git a/src/components/AnimationMotion.tsx b/src/components/AnimationMotion.tsx index b66b824..d196822 100644 --- a/src/components/AnimationMotion.tsx +++ b/src/components/AnimationMotion.tsx @@ -61,26 +61,13 @@ export const pageVariants = { } } } - export const CardProject = { - offscreen: { - y: 90 - }, - onscreen: { - y: 0, - rotate: 0, - transition: { - type: "spring", - bounce: 0.4, - duration: 0.05 - } - } - }; - - +export const ScrollVariants = { + visible: { opacity: 1, y: 0 }, + hidden: { opacity: 0, y: 100 }, + }; - // export const modalVariants = { - // hidden: { opacity: 0, y: "-100vh" }, - // visible: { opacity: 1, y: "0" }, - // exit: { opacity: 0, y: "100vh" } - // }; \ No newline at end of file + export const ScrollTransition = { + duration: 0.5, + damping: 1, + }; diff --git a/src/components/CatalogProject.tsx b/src/components/CatalogProject.tsx index 80089a6..6a7f218 100644 --- a/src/components/CatalogProject.tsx +++ b/src/components/CatalogProject.tsx @@ -9,27 +9,32 @@ import Link from 'next/link'; import { TbWorldWww } from "react-icons/tb"; import { FaGithub } from "react-icons/fa"; import { TstateModalProject,TstateTheme } from '@/types/Types'; -import { useContext } from 'react'; +import { useContext,useRef } from 'react'; import { MyContext } from '@/context/MyContext'; import { motion } from 'framer-motion'; -import { CardProject } from './AnimationMotion'; +import { ScrollVariants,ScrollTransition } from './AnimationMotion'; +import { useInView } from 'react-intersection-observer'; - -function CatalogProject({Modal,setModal}:TstateModalProject) { +function CatalogProject({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 ' :'duration-500 bg-white from-gray-600 to-white bg-slate-100 border-gray-100 ' ; const TheForTech = ThemeIsDark ? 'bg-slate-900': 'bg-gray-200' ; +const [ref, inView] = useInView(); +const containerRef = useRef(null); +return (
  • -return ( +
    -
    - -
    +
    @@ -73,7 +78,11 @@ className=' bg-black text-white rounded-lg px-2 flex flex-row items-center py-2
    - +     + +
    + +
    • ) } diff --git a/src/components/Content.tsx b/src/components/Content.tsx index 5aa1e90..2fe4c4e 100644 --- a/src/components/Content.tsx +++ b/src/components/Content.tsx @@ -19,10 +19,3 @@ export const FirebaseText = 'O Firebase Database, também conhecido como Realti export const BoostrapText = 'O Bootstrap é um framework de front-end desenvolvido pelo Twitter que ajuda os desenvolvedores a criar interfaces web responsivas e consistentes de forma mais rápida e fácil. Ele fornece um conjunto de componentes predefinidos, como botões, formulários, barras de navegação, entre outros, bem como um sistema de grid responsivo que facilita o desenvolvimento de layouts flexíveis e adaptáveis a diferentes tamanhos de tela.'; export const JavascriptText = 'JavaScript é uma linguagem de programação amplamente utilizada no desenvolvimento web para tornar as páginas da web interativas e dinâmicas. Ela permite aos desenvolvedores criar funcionalidades como validação de formulários, animações, manipulação do conteúdo da página em tempo real e interações com o usuário, como pop-ups e menus de navegação.'; - - - - - - - diff --git a/src/components/MyProjects.tsx b/src/components/MyProjects.tsx index 08c559f..19f2509 100644 --- a/src/components/MyProjects.tsx +++ b/src/components/MyProjects.tsx @@ -3,16 +3,14 @@ import RegistMemberProject from './RegistMemberProject'; import ModalProject from '@/modals/ModalProject'; import { TmodalProject } from '@/types/Types'; import { useState } from 'react'; -import { motion } from "framer-motion"; - function MyProjects() { const [Modal,setModal] = useState({IsOpen:false,img:''}) -return ( +return (

    Meus projetos

    +
      @@ -22,7 +20,7 @@ className=' flex flex-col justify-around mb-8'> - +
    ) diff --git a/src/components/MyTechs.tsx b/src/components/MyTechs.tsx index 056b0fb..fec05dd 100644 --- a/src/components/MyTechs.tsx +++ b/src/components/MyTechs.tsx @@ -9,10 +9,13 @@ import CssImg from '../images/css3d.png' import Htmlimg from '../images/html3d.png' import GitImg from '../images/git3d.webp' import FirebaseImg from '../images/firebaseLogo.webp' -import { useState,useContext } from "react" +import { useState,useContext,useRef } 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' +import { motion } from 'framer-motion'; +import { ScrollVariants,ScrollTransition } from './AnimationMotion'; +import { useInView } from 'react-intersection-observer'; function MyTechs() { const {ThemeIsDark} = useContext(MyContext) as TstateTheme ; @@ -21,6 +24,8 @@ const [TechClicked,setTechClicked] = useState('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 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' +const [ref, inView] = useInView(); +const containerRef = useRef(null); function CatchTechGiveStyle (tech:string ){ if (ThemeIsDark) { @@ -29,8 +34,7 @@ function CatchTechGiveStyle (tech:string ){ else { return (tech === TechClicked ? 'bg-white border-b-0 border-x-gray-300 border-t-gray-500' : 'bg-gray-200 border-b-gray-300 hover:bg-white' ) } - } - +} function ReturnText() { return (TechClicked === 'react' && ReactText) || @@ -48,8 +52,13 @@ return (TechClicked === 'react' && ReactText) || return (

    Tecnologias que utilizo

    +
    -
    +
      @@ -100,10 +109,11 @@ onClick={()=>setTechClicked('firebase')}>Firebase {TechClicked === 'git' &&

      {GithubText}

      }

      + +
    - ) } diff --git a/src/components/MyTechsForMobile.tsx b/src/components/MyTechsForMobile.tsx index 8994e79..ad63d78 100644 --- a/src/components/MyTechsForMobile.tsx +++ b/src/components/MyTechsForMobile.tsx @@ -1,4 +1,4 @@ -import { useState,useContext } from "react" +import { useState,useContext,useRef } from "react" import Image from 'next/image' import ReactImg from '../images/react3d.webp' import TypescriptImg from '../images/ts3d.webp' @@ -13,6 +13,9 @@ import FirebaseImg from '../images/firebaseLogo.webp' import { ReactText,TypescriptText,NextText,TailwindText,CssText,HtmlText,GitText,GithubText,FirebaseText,BoostrapText,JavascriptText } from './Content' import { MyContext } from "@/context/MyContext" import { TstateTheme } from "@/types/Types" +import { motion } from 'framer-motion'; +import { ScrollVariants,ScrollTransition } from './AnimationMotion'; +import { useInView } from 'react-intersection-observer'; function MyTechsForMobile() { const StyleForLi = `cursor-pointer flex flex-col rounded-xl px-2 pb-1 shadow-2xl border @@ -22,6 +25,8 @@ const [TechClicked,setTechClicked] = useState('react') const {ThemeIsDark} = useContext(MyContext) as TstateTheme ; 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' ; +const [ref, inView] = useInView(); +const containerRef = useRef(null); function ReturnText() { return (TechClicked === 'react' && ReactText) || @@ -42,13 +47,19 @@ function CatchTechGiveStyle (tech:string ){ else { return (tech === TechClicked ? 'bg-white border-gray-400' : 'bg-gray-200 border-b-gray-300 hover:bg-white' ) } - } +} return (

    Tecnologias que utilizo

    - -
    + +
    + +
      @@ -102,11 +113,12 @@ onClick={()=> setTechClicked('firebase') }>Firebase

      + +
    - +
    - - ) + ) } export default MyTechsForMobile diff --git a/src/components/RegistMemberProject.tsx b/src/components/RegistMemberProject.tsx index 221c829..c1f2875 100644 --- a/src/components/RegistMemberProject.tsx +++ b/src/components/RegistMemberProject.tsx @@ -10,27 +10,30 @@ import { TbWorldWww } from "react-icons/tb"; import { FaGithub } from "react-icons/fa"; import { FaCss3Alt } from "react-icons/fa"; import { TstateModalProject,TstateTheme } from '@/types/Types'; -import { useContext } from 'react'; +import { useContext,useRef } from 'react'; import { MyContext } from '@/context/MyContext'; import { motion } from 'framer-motion'; -import { CardProject } from './AnimationMotion'; +import { useInView } from 'react-intersection-observer'; +import { ScrollVariants,ScrollTransition } from './AnimationMotion'; - -function RegistMemberProject({Modal,setModal}:TstateModalProject) { +function RegistMemberProject({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' :'duration-500 bg-white from-gray-600 to-white bg-slate-100 border-gray-100 ' ; const TheForTech = ThemeIsDark ? 'bg-slate-900': 'bg-gray-200' ; + const [ref, inView] = useInView(); + const containerRef = useRef(null); - return ( +
    + -
    - -
    -
    @@ -43,18 +46,6 @@ w-screen400:max-h-[5.7rem] w-screen400:rounded-md w-screen400:border-[3px] w-scr
    - - - {/*
    - image {setModal({IsOpen:true,img:RegistDesktopImg} ) } } - className=" border-black rounded-xl inline max-h-40 cursor-pointer w-screen400:border-[0.4rem] border-[0.5rem]"/> - - image setModal({IsOpen:true,img:RegistMobileImg})} -className={` border-black rounded-xl border-4 inline z-10 relative right-10 top-8 max-h-[8.6rem] cursor-pointer -w-screen400:max-h-[5.6rem] w-screen400:rounded-md w-screen400:border-[3px] w-screen400:top-14 w-screen300:top-11`}/> - -
    */} -
    @@ -82,12 +73,13 @@ w-screen400:max-h-[5.6rem] w-screen400:rounded-md w-screen400:border-[3px] w-scr Ver repositório
    + +     +
    -     + ) } -export default RegistMemberProject - - +export default RegistMemberProject \ No newline at end of file diff --git a/src/modals/ModalProject.module.css b/src/modals/ModalProject.module.css index cb019ff..a1d9494 100644 --- a/src/modals/ModalProject.module.css +++ b/src/modals/ModalProject.module.css @@ -58,9 +58,4 @@ color: white; justify-content: center; align-items: center; } - - - -} - - +} \ No newline at end of file diff --git a/src/modals/ModalProject.tsx b/src/modals/ModalProject.tsx index 060d5e6..f859a40 100644 --- a/src/modals/ModalProject.tsx +++ b/src/modals/ModalProject.tsx @@ -3,11 +3,10 @@ import style from './ModalProject.module.css' import Image from "next/image" import { IoClose } from "react-icons/io5"; import { motion } from 'framer-motion'; -import { pageVariantsModal,pageTransitionModal,modal } from "@/components/AnimationMotion"; +import { modal } from "@/components/AnimationMotion"; function ModalProject({Modal,setModal}:TstateModalProject) { - return (<> { Modal.IsOpen && setModal({IsOpen:false,img:''})} className={`${style.containerMod} `} diff --git a/src/styles/globals.css b/src/styles/globals.css index ae0751e..415894f 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -7,35 +7,3 @@ font-family: 'Open Sans', sans-serif; font-family: 'Press Start 2P', cursive; } - - - -/* :root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - } -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -@layer utilities { - .text-balance { - text-wrap: balance; - } -} */