More updatings

vinimrs · Mar 7, 2022 · 6483a91 · 6483a91
1 parent 7e9fb93
commit 6483a91
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 52 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -20,6 +20,7 @@
     "styled-normalize": "^8.0.7"
   },
   "devDependencies": {
+    "@types/gsap": "^3.0.0",
     "@types/node": "^17.0.21",
     "@types/react": "^17.0.39",
     "@types/styled-components": "^5.1.24",

diff --git a/src/components/Footer/FooterStyles.ts b/src/components/Footer/FooterStyles.ts
@@ -35,7 +35,7 @@ export const LinkItem = styled.a`
 	}
 
 	@media ${props => props.theme.breakpoints.sm} {
-		font-size: 8px;
+		font-size: 10px;
 		line-height: 14px;
 		margin-bottom: 8px;
 		display: flex;

diff --git a/src/components/Hero/Hero.tsx b/src/components/Hero/Hero.tsx
@@ -1,13 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import {
     Section,
     SectionTitle,
     SectionText,
     ButtonBack,
+    loadScrollTrigger,
 } from '../../styles/GlobalComponents';
 import { LeftSection } from './HeroStyles';
 
 const Hero: React.FC = () => {
+
+    useEffect(() => {
+        loadScrollTrigger();
+    })
+
     return (
         <>
             <Section row nopadding>
@@ -18,10 +24,10 @@ const Hero: React.FC = () => {
                         meu Portfolio
                     </SectionTitle>
                     <SectionText>
-                        Sou Vinícius, e aqui você irá encontrar meus projetos
+                        Meu nome é Vinícius, sou Desenvolvedor Web,  e aqui você irá encontrar meus projetos
                         mais relevantes e um pouco sobre minha história!
                     </SectionText>
-                    <ButtonBack >Leia Mais</ButtonBack>
+                    <ButtonBack>Leia Mais</ButtonBack>
                 </LeftSection>
             </Section>
         </>

diff --git a/src/components/Projects/Card/Card.tsx b/src/components/Projects/Card/Card.tsx
@@ -31,7 +31,7 @@ const Card: React.FC<CardProps> = ({
     const [openVideo, setOpenVideo] = useState(false);
 
     return (
-        <S.CardDiv key={id} target="_blank">
+        <S.CardDiv  key={id} >
             <S.Card2>
                 <S.CardImage
                     src={image}
@@ -40,25 +40,18 @@ const Card: React.FC<CardProps> = ({
                         setOpenVideo(true);
                     }}
                     onMouseLeave={() => {
-
                         setOpenVideo(false);
                     }}
                 >
-                    <span>Hover to preview</span>
+                    <span onClick={() => setOpenVideo(!openVideo)}>Hover to preview</span>
                     {openVideo && (
-                        <video
-                            src={preview}
-                            className='video'
-                            autoPlay
-                            muted
-                        />
-                    )}
+                        <video src={preview} className="video" autoPlay muted loop />
+                    )} 
                 </S.CardImage>
                 <div style={{ width: '100%', padding: '24px 18px' }}>
                     <S.CardTitle>{title}</S.CardTitle>
                     <S.Text>{description}</S.Text>
-                    <S.LinksDiv
-                    >
+                    <S.LinksDiv>
                         <S.RepoLink href={source} target="_blank">
                             <AiFillGithub size="3rem" />
                             <span>Visualize o código</span>

diff --git a/src/components/Projects/Card/CardStyles.ts b/src/components/Projects/Card/CardStyles.ts
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const CardDiv = styled.a`
+export const CardDiv = styled.div`
     max-width: 550px;
     background-image: ${props => props.theme.gradients.secondary1};
     border-radius: 20px;
@@ -75,43 +75,41 @@ export const CardImage = styled.div<{ src: string }>`
     }
 
     &:hover {
-        span {
-            opacity: 0;
-        }
+    span {
+        opacity: 0;
     }
+}
 
-    @media ${props=> props.theme.breakpoints.lg} {
-        height: 300px;
 
+    @media ${props=> props.theme.breakpoints.lg} {
+        height: 350px;
     }
 
     @media ${props=> props.theme.breakpoints.md} {
-        height: 250px;
-        span {
-            opacity: 0;
-            visibility: hidden;
-        }
+        height: 300px;
     }
 
     @media ${props=> props.theme.breakpoints.sm} {
         height: 250px;
+        span {
+            z-index: 99999;
+        }
 
+        &:hover {
+        span {
+            opacity: 1;
+        }
+    }
     }
 `;
 
 export const CardTitle = styled.h3`
     color: ${props => props.theme.colors.primary};
     font-size: ${props => props.theme.fonts.size['1xl']};
-    
-    /* @media ${props=> props.theme.breakpoints.lg} {
-        font-size: ${props => props.theme.fonts.size.lg};
-
-    } */
 
     @media ${props=> props.theme.breakpoints.md} {
         font-size: ${props => props.theme.fonts.size.lg};
     }
-
 `;
 
 export const Text = styled.p`

diff --git a/src/components/Projects/Projects.tsx b/src/components/Projects/Projects.tsx
@@ -12,7 +12,7 @@ import Card from './Card/Card';
 const Projects: React.FC = () => {
     return (
         <Section nopadding id="projects">
-            <SectionDivider />
+            <SectionDivider divider />
             <SectionTitle main>Projetos</SectionTitle>
             <CardWrapper>
                 {projects.map(proj => (

diff --git a/src/components/Technologies/Technologies.tsx b/src/components/Technologies/Technologies.tsx
@@ -1,23 +1,26 @@
 import React from 'react';
 import { DiFirebase, DiReact, DiZend } from 'react-icons/di';
-import { Section, SectionDivider, SectionText, SectionTitle } from '../../styles/GlobalComponents';
+import {  Section, SectionDivider, SectionText, SectionTitle } from '../../styles/GlobalComponents';
 import { List, ListContainer, ListItem, ListParagraph, ListTitle } from './TechnologiesStyles';
 
-const Technologies: React.FC = () =>  (
+const Technologies: React.FC = () => {
+
+
+    return (
   <Section id="tech">
     <SectionDivider divider />
-    <SectionTitle>Tecnologias</SectionTitle>
+    <SectionTitle >Tecnologias</SectionTitle>
     <SectionText>
       Atualmente, acumulo conhecimentos do Front-End, UI/UX e o básico de Banco de Dados. 
     </SectionText>
     <List>
       <ListItem>
         <picture>
-          <DiReact size="3rem" />
+          <DiReact size="3rem" id='gs_reveal' />
         </picture>
-        <ListContainer>
-          <ListTitle>Front-End</ListTitle>
-          <ListParagraph>
+        <ListContainer id='gs_reveal' >
+          <ListTitle id='gs_reveal'>Front-End</ListTitle>
+          <ListParagraph id='gs_reveal'>
             Experiência com <br />
             React.js, Next.js, <br/>
             Typescript...
@@ -26,23 +29,23 @@ const Technologies: React.FC = () =>  (
       </ListItem>
       <ListItem>
         <picture>
-          <DiFirebase size="3rem" />
+          <DiFirebase size="3rem" id='gs_reveal' />
         </picture>
-        <ListContainer>
-          <ListTitle>Back-End</ListTitle>
-          <ListParagraph>
+        <ListContainer id='gs_reveal'>
+          <ListTitle id='gs_reveal'>Back-End</ListTitle>
+          <ListParagraph id='gs_reveal'>
             Experiência com <br />
             PostgresSQL
           </ListParagraph>
         </ListContainer>
       </ListItem>
       <ListItem>
         <picture>
-          <DiZend size="3rem" />
+          <DiZend size="3rem" id='gs_reveal' />
         </picture>
-        <ListContainer>
-          <ListTitle>UI/UX</ListTitle>
-          <ListParagraph>
+        <ListContainer id='gs_reveal'>
+          <ListTitle id='gs_reveal'>UI/UX</ListTitle>
+          <ListParagraph id='gs_reveal'>
             Experiência com <br />
             ferramentas como Figma
           </ListParagraph>
@@ -52,5 +55,6 @@ const Technologies: React.FC = () =>  (
     <SectionDivider colorAlt />
   </Section>
 );
+ }
 
 export default Technologies;
diff --git a/src/components/TimeLine/TimeLine.tsx b/src/components/TimeLine/TimeLine.tsx
@@ -11,6 +11,7 @@ const Timeline: React.FC = () => {
   const carouselRef = useRef<HTMLUListElement>();
 
   const scroll = (node: HTMLElement, left: number) => {
+      if(!node) return;
     return node.scrollTo({ left, behavior: 'smooth' });
   }
 
@@ -49,7 +50,7 @@ const Timeline: React.FC = () => {
       <SectionText>
       Posso falar que sou a pessoa mais curiosa que conheço, desde que conheci esse mundo a cada dia fico mais apaixonado e motivado a aprender mais! Meu maior objetivo é aplicar meus conhecimentos em projetos práticos, igual esse aqui.
       </SectionText>
-      <CarouselContainer ref={carouselRef} onScroll={handleScroll}>
+      <CarouselContainer id='gs_reveal' ref={carouselRef} onScroll={handleScroll}>
         <>
           {TimeLineData.map((item, index) => (
             <CarouselMobileScrollNode
@@ -99,7 +100,7 @@ const Timeline: React.FC = () => {
           ))}
         </>
       </CarouselContainer>
-      <CarouselButtons>
+      <CarouselButtons >
         {TimeLineData.map((item, index) => {
           return (
             <CarouselButton

diff --git a/src/styles/GlobalComponents/index.ts b/src/styles/GlobalComponents/index.ts
@@ -1,3 +1,5 @@
+import gsap from 'gsap';
+import ScrollTrigger from 'gsap/dist/ScrollTrigger';
 import styled from 'styled-components';
 
 interface SectionProps {
@@ -20,6 +22,57 @@ interface ButtonProps {
     alt?: boolean;
 }
 
+export function loadScrollTrigger() {
+    gsap.registerPlugin(ScrollTrigger);
+
+    gsap.utils.toArray('#gs_reveal').forEach(function (elem: HTMLElement) {
+        hide(elem); // assure that the element is hidden when scrolled into view
+        console.log(elem);
+        ScrollTrigger.create({
+            trigger: elem,
+            onEnter: function () {
+                animateFrom(elem);
+            },
+            onEnterBack: function () {
+                animateFrom(elem, -1);
+            },
+            onLeave: function () {
+                hide(elem);
+            }, // assure that the element is hidden when scrolled into view
+        });
+    });
+}
+
+export function animateFrom(elem: HTMLElement, direction = 1) {
+    let x = 0;
+    let y = direction * 100;
+    if (elem.classList.contains('gs_reveal_fromLeft')) {
+        x = -100;
+        y = 0;
+    } else if (elem.classList.contains('gs_reveal_fromRight')) {
+        x = 100;
+        y = 0;
+    }
+    elem.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+    elem.style.opacity = '0';
+    gsap.fromTo(
+        elem,
+        { x: x, y: y, autoAlpha: 0 },
+        {
+            duration: 1,
+            x: 0,
+            y: 0,
+            autoAlpha: 1,
+            ease: 'expo',
+            overwrite: 'auto',
+        }
+    );
+}
+
+export function hide(elem: HTMLElement) {
+    gsap.set(elem, { autoAlpha: 0 });
+}
+
 export const Section = styled.section<SectionProps>`
     display: ${props => (props.grid ? 'grid' : 'flex')};
     flex-direction: ${props => (props.row ? 'row' : 'column')};
@@ -37,7 +90,7 @@ export const Section = styled.section<SectionProps>`
     }
 
     @media ${props => props.theme.breakpoints.sm} {
-        padding: ${props => (props.nopadding ? '0' : '16px 16px 0')};
+        padding: ${props => (props.nopadding ? '10px 20px' : '16px 16px 0')};
         width: 100vw;
         flex-direction: column;
     }