💫 Melhorias e reajustes nas animações

leksansilva · Oct 5, 2022 · 899367d · 899367d · vercel · Oct 5, 2022
1 parent 285327d
commit 899367d
Show file tree

Hide file tree

Showing 20 changed files with 324 additions and 111 deletions.
diff --git a/.expo/README.md b/.expo/README.md
@@ -0,0 +1,15 @@
+> Why do I have a folder named ".expo" in my project?
+
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+
+> What do the files contain?
+
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "packager-info.json": contains port numbers and process PIDs that are used to serve the application to the mobile device/simulator.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+
+> Should I commit the ".expo" folder?
+
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.
diff --git a/.expo/settings.json b/.expo/settings.json
@@ -0,0 +1,8 @@
+{
+  "hostType": "lan",
+  "lanType": "ip",
+  "dev": true,
+  "minify": false,
+  "urlRandomness": null,
+  "https": false
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "react-icons": "^4.3.1",
     "react-scripts": "5.0.0",
     "styled-components": "^5.3.3",
+    "typewriter-effect": "^2.19.0",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -2,23 +2,48 @@
 <html lang="pt-br">
   <head>
     <meta charset="utf-8" />
-    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png">
-    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png">
-    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png">
-    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png">
-    <link rel="apple-touch-icon" sizes="114x114" href="/apple-icon-114x114.png">
-    <link rel="apple-touch-icon" sizes="120x120" href="/apple-icon-120x120.png">
-    <link rel="apple-touch-icon" sizes="144x144" href="/apple-icon-144x144.png">
-    <link rel="apple-touch-icon" sizes="152x152" href="/apple-icon-152x152.png">
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-icon-180x180.png">
-    <link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-    <link rel="manifest" href="/manifest.json">
-    <meta name="msapplication-TileColor" content="#ffffff">
-    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
-    <meta name="theme-color" content="#ffffff">
+    <link rel="apple-touch-icon" sizes="57x57" href="/apple-icon-57x57.png" />
+    <link rel="apple-touch-icon" sizes="60x60" href="/apple-icon-60x60.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="/apple-icon-72x72.png" />
+    <link rel="apple-touch-icon" sizes="76x76" href="/apple-icon-76x76.png" />
+    <link
+      rel="apple-touch-icon"
+      sizes="114x114"
+      href="/apple-icon-114x114.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="120x120"
+      href="/apple-icon-120x120.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="144x144"
+      href="/apple-icon-144x144.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="152x152"
+      href="/apple-icon-152x152.png"
+    />
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/apple-icon-180x180.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="192x192"
+      href="/android-icon-192x192.png"
+    />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+    <link rel="manifest" href="/manifest.json" />
+    <meta name="msapplication-TileColor" content="#ffffff" />
+    <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
+    <meta name="theme-color" content="#ffffff" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Sempre trazendo soluções inovadoras" />
@@ -28,21 +53,7 @@
       href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
       rel="stylesheet"
     />
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        font-family: "Montserrat", sans-serif;
-        scroll-snap-type: y mandatory;
-        scroll-behavior: smooth;
-        user-select: none;  
-
-      }
 
-      ::-webkit-scrollbar {
-        display: none;
-      }
-    </style>
     <title>EverNever</title>
   </head>
   <body>

diff --git a/src/App.jsx b/src/App.jsx
@@ -29,41 +29,79 @@ const Shape = css`
 const IntroShape = styled.div`
   ${Shape}
   clip-path: polygon(70% 0, 100% 0, 100% 100%, 48% 100%);
+  z-index: 0;
+  transition: clip-path 2s ease-in-out;
+  ${({ showMore }) =>
+    showMore &&
+    css`
+      clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+    `}
   background-color: ${({ theme }) => theme.color.shadow.secondary};
 `;
 
+const IntroShapeContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  height: 100%;
+  padding: 20px;
+  font-size: 24px;
+  width: 50%;
+  gap: 10px;
+  .quote {
+    margin-top: 20px;
+    font-style: italic;
+    font-weight: 300;
+  }
+  .click-me {
+    margin-top: 20px;
+    span {
+      border: solid 1px white;
+      padding: 10px 15px;
+      background-color: #4da6ff;
+      font-weight: bold;
+      border-radius: 10px;
+      color: white;
+    }
+  }
+  flex-direction: column;
+  color: white;
+`;
+
 const AboutShape = styled.div`
   ${Shape}
   clip-path: polygon(0 0, 48% 0, 30% 100%, 0 100%);
   background-color: ${({ theme }) => theme.color.main};
 `;
+
 const ServiceShape = styled.div`
   ${Shape}
   clip-path: polygon(0 0, 30% 0, 30% 100%, 0 100%);
   background-color: ${({ theme }) => theme.color.monochrome.primary};
 `;
+
 const PortfolioShape = styled.div`
   ${Shape}
   clip-path: polygon(0 0, 30% 0, 10% 100%, 0 100%);
   background-color: ${({ theme }) => theme.color.monochrome.quaternary};
 `;
+
 const ContactShape = styled.div`
   ${Shape}
-  clip-path: polygon(0 0, 30% 0, 30% 100%, 0 100%);
+  clip-path: polygon(0 0, 10% 0, 50% 100%, 0 100%);
   background-color: ${({ theme }) => theme.color.monochrome.primary};
 `;
 
 const App = () => {
   const [visible, setVisible] = useState(false);
   const [activeMenuItem, setActiveMenuItem] = useState("");
+  const [showMore, SetShowMore] = useState(false);
 
-  const toggleVisible = () => {
+  const toggleVisible = (ev) => {
     if (window.scrollY > 600) {
       setVisible(true);
     } else if (window.scrollY <= 600) {
       setVisible(false);
     }
-    console.log(window.on());
   };
 
   const scrollToTop = () => {
@@ -75,15 +113,37 @@ const App = () => {
     element.scrollIntoView();
     setActiveMenuItem(id);
   };
+  const yearsOld = () => {
+    return (
+      new Date().getFullYear() - new Date("2000-06-15T03:24:00").getFullYear()
+    );
+  };
 
   window.addEventListener("scroll", toggleVisible);
 
   return (
     <ThemeProvider theme={theme}>
       <Container id="intro">
-        <Navbar navigateTo={navigateTo} />
-        <Intro navigateTo={navigateTo} />
-        <IntroShape />
+        <Navbar
+          navigateTo={navigateTo}
+          showMore={showMore}
+          setShowMore={SetShowMore}
+        />
+        <Intro navigateTo={navigateTo} showMore={showMore} />
+        <IntroShape showMore={showMore}>
+          <IntroShapeContainer>
+            <h1>Alex Santos da Silva, {yearsOld()} anos </h1>
+            <p>Salvador-BA</p>
+            <div className="quote">
+              "Pensamentos levam a sentimentos, sentimentos levam a ações e
+              ações levam a resultados"
+              <sub> - T. Harv Eker</sub>
+            </div>
+            <div className="click-me">
+              Clique no botão e saiba <span>MAIS SOBRE MIM</span>
+            </div>
+          </IntroShapeContainer>
+        </IntroShape>
       </Container>
       <Container id="about">
         <About state={visible} />

diff --git a/src/assets/img/Alex2.jpg b/src/assets/img/Alex2.jpg
diff --git a/src/assets/sets.js b/src/assets/sets.js
@@ -4,5 +4,20 @@ export const Figma =
 export const ReactJs =
   "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg";
 
-export const NextJs =
-  "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg";
+export const Nodejs =
+  "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nodejs/nodejs-original.svg";
+
+export const miniCards = [
+  {
+    img: Figma,
+    text: "  Prototipação e direção de design de Sites e App com Figma",
+  },
+  {
+    img: ReactJs,
+    text: "Interface de WebSites, WebApps, Aplicativos Mobile com React e React Native",
+  },
+  {
+    img: Nodejs,
+    text: "Api, integração com outras plataformas e banco de dados com o NodeJs",
+  },
+];
diff --git a/src/components/About.jsx b/src/components/About.jsx
@@ -1,5 +1,6 @@
-import React, { useState } from "react";
+import React from "react";
 import styled from "styled-components";
+import Typewriter from "typewriter-effect";
 import Ideia from "../assets/img/Ideia.png";
 
 const Container = styled.div`
@@ -36,7 +37,7 @@ const SubTitle = styled.p`
   margin-top: 40px;
   font-size: 40px;
   width: 80%;
-  #typedText {
+  .Typewriter {
     color: ${({ theme }) => theme.color.main};
   }
 `;
@@ -60,33 +61,12 @@ const Description = styled.p`
   color: ${({ theme }) => theme.color.text.tertiary};
 `;
 
-const LearnMore = styled.a`
-  text-align: right;
-  color: ${({ theme }) => theme.color.text.tertiary};
-`;
-
 const textArray = [
   "<strong>soluções</strong>",
   "<strong>inovações</strong>",
   "<strong>valores</strong>",
 ];
 const About = () => {
-  const [invoke, setInvoke] = useState(true);
-
-  const text = async () => {
-    await textArray.forEach((text, index) => {
-      setTimeout(() => {
-        document.getElementById("typedText").innerHTML = text;
-      }, 1000 * index);
-    });
-    setTimeout(text, 4000);
-  };
-
-  if (invoke) {
-    setInvoke(false);
-    text();
-  }
-
   return (
     <Container>
       <Left>
@@ -97,7 +77,11 @@ const About = () => {
           Ever<span>Never</span>
         </Title>
         <SubTitle>
-          Desenvolvendo <span id="typedText"></span>
+          Desenvolvendo&nbsp;
+          <Typewriter
+            component={"span"}
+            options={{ loop: true, strings: textArray, autoStart: true }}
+          />
         </SubTitle>
         <CardDescription>
           <Description>
@@ -108,7 +92,6 @@ const About = () => {
             forma, destacando o "Ever" que traduzindo de forma literal significa
             sempre
           </Description>
-          <LearnMore href="">Saiba Mais</LearnMore>
         </CardDescription>
       </Right>
     </Container>

diff --git a/src/components/Carroussel.jsx b/src/components/Carroussel.jsx
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+import TabBar from "./TabBar";
+
+const Container = styled.div``;
+
+const Carroussel = () => {
+  return (
+    <Container>
+      <TabBar />
+    </Container>
+  );
+};
+
+export default Carroussel;