Atualizações do Scroll

.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = crlf
+charset = utf-8
+trim_trailing_whitespace = false
+insert_final_newline = false

src/App.js → src/App.jsx

@@ -1,11 +1,14 @@
+import { useState } from "react";
 import styled, { css, ThemeProvider } from "styled-components";
+
+import theme from "./styles/theme";
+
 import Navbar from "./components/Navbar";
 import Intro from "./components/Intro";
 import About from "./components/About";
-import { MdKeyboardArrowUp } from "react-icons/md";
-import { useState } from "react";
-import theme from "./styles/theme";
 import Service from "./components/Service";
+import TopButton from "./components/TopButton";
+import Portfolio from "./components/Portfolio";
 
 const Container = styled.div`
   height: 100vh;
@@ -14,13 +17,6 @@ const Container = styled.div`
   position: relative;
 `;
 
-const Credits = styled.a`
-  margin-left: 150px;
-  color: rgba(128, 128, 128, 0.5);
-  z-index: 1;
-  position: absolute;
-`;
-
 const Shape = css`
   width: 100%;
   height: 100%;
@@ -36,21 +32,6 @@ const IntroShape = styled.div`
   background-color: ${({ theme }) => theme.color.shadow.secondary};
 `;
 
-const TopButton = styled.button`
-  position: fixed;
-  bottom: 50px;
-  right: 50px;
-  z-index: 2;
-  padding: 5px 10px;
-  border-radius: 5px;
-  border: 2px solid ${({theme})=>theme.color.text.secondary};
-  background-color: ${({ theme }) => theme.color.main};
-  color: white;
-  cursor: pointer;
-  font-size: 25px;
-  display: ${({ visible }) => (visible ? "inline" : "none")};
-`;
-
 const AboutShape = styled.div`
   ${Shape}
   clip-path: polygon(0 0, 48% 0, 30% 100%, 0 100%);
@@ -61,50 +42,70 @@ const ServiceShape = styled.div`
   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%);
+  background-color: ${({ theme }) => theme.color.monochrome.primary};
+`;
 
 const App = () => {
   const [visible, setVisible] = useState(false);
+  const [activeMenuItem, setActiveMenuItem] = useState("");
 
   const toggleVisible = () => {
-    const scrolled = document.documentElement.scrollTop;
-    if (scrolled > 600) {
+    if (window.scrollY > 600) {
       setVisible(true);
-    } else if (scrolled <= 600) {
+    } else if (window.scrollY <= 600) {
       setVisible(false);
     }
+    console.log(window.on());
   };
 
-  const scrollToBottom = () => {
+  const scrollToTop = () => {
     window.scrollTo(0, 0);
   };
 
+  const navigateTo = (id) => {
+    const element = document.getElementById(id);
+    element.scrollIntoView();
+    setActiveMenuItem(id);
+  };
+
   window.addEventListener("scroll", toggleVisible);
 
   return (
     <ThemeProvider theme={theme}>
-      <Container>
-        <Navbar />
-        <Intro />
+      <Container id="intro">
+        <Navbar navigateTo={navigateTo} />
+        <Intro navigateTo={navigateTo} />
         <IntroShape />
       </Container>
-      <Container>
+      <Container id="about">
         <About state={visible} />
         <AboutShape />
-        <Credits
-          target="_blank"
-          rel="noreferrer"
-          href="https://storyset.com/work"
-        >
-          art credits for storyset
-        </Credits>
       </Container>
-      <Container>
+      <Container id="services">
         <Service />
         <ServiceShape />
       </Container>
-      <TopButton visible={visible} onClick={scrollToBottom}>
-        <MdKeyboardArrowUp />
-      </TopButton>
+      <Container id="portfolio">
+        <Portfolio />
+        <PortfolioShape />
+      </Container>
+      <Container id="contact">
+        <ContactShape />
+      </Container>
+      <TopButton
+        visible={visible}
+        onClick={scrollToTop}
+        navigateTo={navigateTo}
+        activeMenuItem={activeMenuItem}
+      />
     </ThemeProvider>
   );
 };

src/assets/sets.js

@@ -0,0 +1,8 @@
+export const Figma =
+  "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg";
+
+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";

src/components/About.js → src/components/About.jsx

@@ -104,7 +104,7 @@ const About = () => {
             "EverNever" vem de uma expressão em inglês que na forma correta é
             escrito "Never Ever", que é utilizado quando queremos enfatizar o
             sentido de nunca. Eu utilizo como lema de vida enfatizando a ideia
-            de sempre evoluir e nunca regridir. Por isso está escrito dessa
+            de sempre evoluir e nunca regredir. Por isso está escrito dessa
             forma, destacando o "Ever" que traduzindo de forma literal significa
             sempre
           </Description>

src/components/Intro.js → src/components/Intro.jsx

@@ -42,7 +42,7 @@ const Description = styled.p`
   font-weight: 400;
   color: ${({ theme }) => theme.color.text.tertiary};
   a {
-   color: ${({ theme }) => theme.color.text.tertiary};;
+    color: ${({ theme }) => theme.color.text.tertiary};
   }
 `;
 
@@ -72,7 +72,7 @@ const Image = styled.img`
   width: 100%;
 `;
 
-const Intro = () => {
+const Intro = ({ navigateTo }) => {
   return (
     <Container>
       <Left>
@@ -98,7 +98,9 @@ const Intro = () => {
           que facilita a criação de várias páginas e a navegação no React.
         </Description>
         <Info>
-          <Button>OUTROS PROJETOS</Button>
+          <Button onClick={() => navigateTo("portfolio")}>
+            OUTROS PROJETOS
+          </Button>
         </Info>
       </Left>
       <Right>

src/components/Navbar.js → src/components/Navbar.jsx

@@ -20,7 +20,7 @@ const Left = styled.div`
 
 const Logo = styled.h1`
   font-weight: 800;
-  color: #0059B3;
+  color: #0059b3;
   span {
     color: black;
   }
@@ -39,24 +39,32 @@ const MenuItem = styled.li`
   position: relative;
   top: 0;
   cursor: pointer;
-  :hover{
-    color: #0059B3;
-   
+  :hover {
+    color: #0059b3;
+
     top: -2px;
   }
 `;
 
 const Button = styled.button`
   border: solid 1px white;
   padding: 10px 15px;
-  background-color: #4DA6FF;
-  font-weight:bold;
+  background-color: #4da6ff;
+  font-weight: bold;
   border-radius: 10px;
   cursor: pointer;
   color: white;
 `;
 
-const Navbar = () => {
+export const valuesMenu = [
+  { id: "intro", title: "Início" },
+  { id: "about", title: "Sobre" },
+  { id: "services", title: "Serviços" },
+  { id: "portfolio", title: "Portfólio" },
+  { id: "contact", title: "Contato" },
+];
+
+const Navbar = ({ navigateTo }) => {
   return (
     <Container>
       <Wrapper>
@@ -65,12 +73,11 @@ const Navbar = () => {
             Ever<span>Never</span>
           </Logo>
           <Menu>
-            <MenuItem >Início</MenuItem>
-            <MenuItem>Sobre</MenuItem>
-            <MenuItem>Serviços</MenuItem>
-            <MenuItem>Projetos</MenuItem>
-            <MenuItem>Portfólio</MenuItem>
-            <MenuItem>Contato</MenuItem>
+            {valuesMenu.map((item) => (
+              <MenuItem key={item.id} onClick={() => navigateTo(item.id)}>
+                {item.title}
+              </MenuItem>
+            ))}
           </Menu>
         </Left>
 

src/components/Portfolio.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import styled from "styled-components";
+
+import Coding from "../assets/img/Coding.png";
+
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+const Left = styled.div`
+  width: 50%;
+`;
+
+const Image = styled.img`
+  width: 70%;
+  margin-top: 35%;
+`;
+
+const Right = styled.div`
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const Portfolio = () => {
+  return (
+    <Container>
+      <Left>
+        <Image src={Coding} />
+      </Left>
+      <Right></Right>
+    </Container>
+  );
+};
+
+export default Portfolio;

src/components/Service.js → src/components/Service.jsx

@@ -1,10 +1,12 @@
 import React from "react";
 import styled from "styled-components";
 import Dev from "../assets/img/Dev.png";
+import { Figma, NextJs, ReactJs } from "../assets/sets";
 import MiniCard from "./MiniCard";
 
 const Container = styled.div`
   display: flex;
+  height: 100%;
 `;
 
 const Left = styled.div`
@@ -14,7 +16,8 @@ const Right = styled.div`
   width: 50%;
 `;
 const Image = styled.img`
-  height: 40%;
+  height: 85%;
+  margin-top: 17%;
 `;
 
 const Wrapper = styled.div`
@@ -37,14 +40,6 @@ const CardContainer = styled.div`
   justify-content: space-around;
 `;
 
-const Figma =
-  "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/figma/figma-original.svg";
-
-const ReactJs =
-  "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/react/react-original.svg";
-
-const NextJs =
-  "https://cdn.jsdelivr.net/gh/devicons/devicon/icons/nextjs/nextjs-original.svg";
 const Service = () => {
   return (
     <Container>
@@ -53,7 +48,7 @@ const Service = () => {
       </Left>
       <Right>
         <Wrapper>
-          <Title>Alta perfomance e ótimo design</Title>
+          <Title>Alta performance e ótimo design</Title>
           <Description>
             O desenvolvimento do WebSite, App ou WebApp é feito buscando
             representar da melhor forma o negócio e a marca do cliente, com