Implementações no Portfólio

src/components/Banner.jsx

@@ -4,7 +4,7 @@ import "./css/Banner.css";
 function Banner() {
   return (
     <section className="section-banner">
-      <h1>Olá, me chamo Elithon e boas vindas ao meu portfólio.</h1>
+      <h1>Olá, eu sou o Elithon.</h1>
     </section>
   );
 }

src/components/GridProjects.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import "./css/GridProjects.css";
+
+function GridProjects() {
+  return (
+    <div className="grid-container">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
+}
+
+export default GridProjects;

src/components/Header.jsx

@@ -8,7 +8,7 @@ function Header() {
         <h1 className="header-title">ES</h1>
       </a>
       <nav className="header-menu">
-        <a href="projetos">Projetos</a>
+        <a href="projects">Projetos</a>
         <a href="contato">Contato</a>
         <a href="sobre">Sobre</a>
       </nav>

src/components/Switcher.jsx

@@ -3,12 +3,14 @@ import { Route, Switch } from "react-router-dom";
 import Home from "../pages/Home";
 import NotFoundPage from "../pages/NotFoundPage";
 import LoadingPage from "../pages/LoadingPage";
+import Projects from "../pages/Projects";
 
 function Switcher() {
   return (
     <Switch>
-      <Route exact path="/home" component={Home} />
-      <Route exact path="/" component={LoadingPage} />
+      <Route path="/projects" component={Projects} />
+      <Route exact path="/loading" component={LoadingPage} />
+      <Route exact path="/" component={Home} />
       <Route exact patch="" component={NotFoundPage} />
     </Switch>
   );

src/components/css/GridProjects.css

@@ -0,0 +1,14 @@
+.grid-container {
+  display: grid;
+  width: 100vw;
+  height: 90vh;
+
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr 1fr 1fr 1fr;
+
+  grid-gap: 5px;
+}
+
+.grid-container div {
+  border: solid 1px green;
+}

src/pages/Projects.js

@@ -0,0 +1,14 @@
+import React from "react";
+import Header from "../components/Header";
+import GridProjects from "../components/GridProjects";
+
+function Projects() {
+  return (
+    <>
+      <Header />
+      <GridProjects />
+    </>
+  )
+}
+
+export default Projects;