style: Create MainContainer for all sections and change some other styles

package-lock.json

@@ -8,11 +8,18 @@
       "name": "givs-website-react",
       "version": "0.0.0",
       "dependencies": {
+        "@fortawesome/fontawesome-svg-core": "^6.7.2",
+        "@fortawesome/free-brands-svg-icons": "^6.7.2",
+        "@fortawesome/react-fontawesome": "^0.2.2",
+        "@types/node": "^22.10.5",
+        "fs": "^0.0.1-security",
         "lucide-react": "^0.469.0",
+        "path": "^0.12.7",
         "pnpm": "^9.15.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-router-dom": "^7.1.1",
+        "react-typed": "^2.0.12",
         "styled-components": "^6.1.14"
       },
       "devDependencies": {
@@ -846,6 +853,48 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.2.tgz",
+      "integrity": "sha512-Zs+YeHUC5fkt7Mg1l6XTniei3k4bwG/yo3iFUtZWd/pMx9g3fdvkSK9E0FOC+++phXOka78uJcYb8JaFkW52Xg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.2.tgz",
+      "integrity": "sha512-yxtOBWDrdi5DD5o1pmVdq3WMCvnobT0LU6R8RyyVXPvFRd2o79/0NCuQoCjNTeZz9EzA9xS3JxNWfv54RIHFEA==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-brands-svg-icons": {
+      "version": "6.7.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.2.tgz",
+      "integrity": "sha512-zu0evbcRTgjKfrr77/2XX+bU+kuGfjm0LbajJHVIgBWNIDzrhpRxiCPNT8DW5AdmSsq7Mcf9D1bH0aSeSUSM+Q==",
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.7.2"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz",
+      "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanfs/core": {
       "version": "0.19.0",
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.0.tgz",
@@ -1244,6 +1293,14 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "22.10.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.10.5.tgz",
+      "integrity": "sha512-F8Q+SeGimwOo86fiovQh8qiXfFEh2/ocYv7tU5pJ3EXMSSxk1Joj5wefpFK2fHTf/N6HKGSxIDBT9f3gCxXPkQ==",
+      "dependencies": {
+        "undici-types": "~6.20.0"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
@@ -2215,6 +2272,11 @@
       "integrity": "sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==",
       "dev": true
     },
+    "node_modules/fs": {
+      "version": "0.0.1-security",
+      "resolved": "https://registry.npmjs.org/fs/-/fs-0.0.1-security.tgz",
+      "integrity": "sha512-3XY9e1pP0CVEUCdj5BmfIZxRBTSDycnbqhIOGec9QYtmVH2fbLpj86CFWkrNOkt/Fvty4KZG5lTglL9j/gJ87w=="
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -2311,6 +2373,11 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw=="
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2547,6 +2614,14 @@
       "integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
       "dev": true
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -2606,6 +2681,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/path": {
+      "version": "0.12.7",
+      "resolved": "https://registry.npmjs.org/path/-/path-0.12.7.tgz",
+      "integrity": "sha512-aXXC6s+1w7otVF9UletFkFcDsJeO7lSZBPUQhtb5O0xJe8LtYhj/GxldoL09bBj9+ZmE2hNoHqQSFMN5fikh4Q==",
+      "dependencies": {
+        "process": "^0.11.1",
+        "util": "^0.10.3"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -2699,6 +2783,24 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2751,6 +2853,11 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -2800,6 +2907,17 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-typed": {
+      "version": "2.0.12",
+      "resolved": "https://registry.npmjs.org/react-typed/-/react-typed-2.0.12.tgz",
+      "integrity": "sha512-sn59lrb4NKgvQLDGBRWM4wRNEz5Fp37F0BrLA2cKUmDqPSyQJOOiFigz+6wJof0o99QoE16nVCa3B3ID34ejsg==",
+      "dependencies": {
+        "typed.js": "^2.1.0"
+      },
+      "peerDependencies": {
+        "react": ">16.8.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -3084,6 +3202,11 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/typed.js": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/typed.js/-/typed.js-2.1.0.tgz",
+      "integrity": "sha512-bDuXEf7YcaKN4g08NMTUM6G90XU25CK3bh6U0THC/Mod/QPKlEt9g/EjvbYB8x2Qwr2p6J6I3NrsoYaVnY6wsQ=="
+    },
     "node_modules/typescript": {
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
@@ -3120,6 +3243,11 @@
         }
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.20.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.20.0.tgz",
+      "integrity": "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -3159,6 +3287,14 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/util": {
+      "version": "0.10.4",
+      "resolved": "https://registry.npmjs.org/util/-/util-0.10.4.tgz",
+      "integrity": "sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==",
+      "dependencies": {
+        "inherits": "2.0.3"
+      }
+    },
     "node_modules/vite": {
       "version": "5.4.8",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.8.tgz",

src/App.tsx

@@ -1,5 +1,4 @@
 import { ThemeProvider } from 'styled-components';
-import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import Header from './components/Header';
 import { defaultTheme } from './styles/themes/default';
 import { GlobalStyle } from './styles/global';
@@ -12,17 +11,11 @@ function App() {
   return (
     <ThemeProvider theme={defaultTheme}>
       <GlobalStyle />
-      <Router>
         <Header />
-        <div className="mc">
+          <Home />
-          <Routes>
+          <About />
-            <Route path="/" element={<Home />} />
+          <Contact />
-            <Route path="/about" element={<About />} />
+          <Projects />
-            <Route path="/contact" element={<Contact />} />
-            <Route path="/projects" element={<Projects />} />
-          </Routes>
-        </div>
-      </Router>
     </ThemeProvider>
   );
 }

src/components/Header/styles.ts

@@ -31,7 +31,7 @@ export const HeaderContainer = styled.div`
   border-radius: 8px;
   width: 100%;
   height: 70px;
-  background-color: ${props => props.theme["green-500"]};
+  background-color: ${props => props.theme["green-400"]};
   color: ${props => props.theme.white};
 
   nav {

src/components/MainContent/styles.ts

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+    padding: 3rem;
+    margin: 3rem;
+    background-color: ${props => props.theme["gray-700"]};
+    border-radius: 8px;
+`

src/pages/about/index.tsx

@@ -1,16 +1,17 @@
 import { useEffect, useRef } from 'react';
 import Typed from 'typed.js';
 import { Paragraph } from './styles';
+import { MainContainer } from '../../components/MainContent/styles';
 
 export default function About() {
   const typedElement = useRef(null);
 
   useEffect(() => {
     const typed = new Typed(typedElement.current, {
-      strings: ["This page is coming soon. Thanks for your patience :)"],
+      strings: ["Hi, I'm Giv, lemme tell you about me!", "So, I'm currently a software engineering student", "I'm also interning on a nice company located in Minas Gerais in Brazil", "And that's it!"],
       typeSpeed: 50,
       backSpeed: 25,
-      loop: false,
+      loop: true,
     });
 
     return () => {
@@ -19,11 +20,11 @@ export default function About() {
   }, []);
 
   return (
-    <div>
+    <MainContainer>
       <h1>About Me</h1>
       <Paragraph>
         <span ref={typedElement} />
       </Paragraph>
-    </div>
+    </MainContainer>
   );
 }

src/pages/contact/index.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useRef } from 'react';
 import Typed from 'typed.js';
-import { Paragraph } from './styles';
+import { Button, Paragraph, TextArea } from './styles';
+import { MainContainer } from '../../components/MainContent/styles';
 
 export default function Contact() {
   const typedElement = useRef(null);
 
   useEffect(() => {
     const typed = new Typed(typedElement.current, {
-      strings: ["This page is coming soon. Thanks for your patience :)"],
+      strings: ["If you want to contact me, you can use the links on Main section, or say something in the field below!"],
       typeSpeed: 50,
       backSpeed: 25,
       loop: false,
@@ -19,11 +20,13 @@ export default function Contact() {
   }, []);
 
   return (
-    <div>
+    <MainContainer>
       <h1>Contact</h1>
       <Paragraph>
         <span ref={typedElement} />
       </Paragraph>
-    </div>
+      <TextArea />
+      <Button>Send</Button>
+    </MainContainer>
   );
 }

src/pages/contact/styles.ts

@@ -3,4 +3,26 @@ import styled from 'styled-components';
 export const Paragraph = styled.p`
   padding-top: 1rem;
   font-size: 1.25rem;
-`;
+`;
+
+export const TextArea = styled.textarea`
+  height: 10rem;
+  margin-top: 1rem;
+  width: 100%;
+  padding: 1rem;
+  border-radius: 8px;
+  background: ${props => props.theme["gray-100"]};
+`
+
+export const Button = styled.button`
+all: unset;
+display: block;
+margin-top: 1rem;
+padding: 1rem;
+border-radius: 8px;
+cursor: pointer;
+background-color: ${props => props.theme["green-400"]};
+&:hover{
+  background-color: ${props => props.theme["green-300"]};
+}
+`

src/pages/home/index.tsx

@@ -3,16 +3,17 @@ import { useEffect, useRef } from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTelegram, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { IconContainer, IconLink, HomeLabel } from './styles';
+import { MainContainer } from '../../components/MainContent/styles';
 
 export default function Home() {
   const typedElement = useRef(null);
 
   useEffect(() => {
     const typed = new Typed(typedElement.current, {
-      strings: ["Hi, I'm Giv! Welcome to my website~", "I hope you enjoy checking out my projects!", "Giv-Fnz"],
+      strings: ["Hi, I'm Giv! Welcome to my website!", "You can navigate through this website by checking out the sections!"],
       typeSpeed: 30,
       backSpeed: 50,
-      loop: false,
+      loop: true,
     });
 
     return () => {
@@ -21,12 +22,12 @@ export default function Home() {
   }, []);
 
   return (
-    <div>
+    <MainContainer>
       <h1>
         <span ref={typedElement} />
       </h1>
       <HomeLabel>
-        Check out some of my social links!
+        My social links
       </HomeLabel>
       <IconContainer>
         <IconLink href="https://t.me/@givfnz2" target="_blank" rel="noopener noreferrer">
@@ -36,6 +37,6 @@ export default function Home() {
           <FontAwesomeIcon icon={faGithub} size="3x" />
         </IconLink>
       </IconContainer>
-    </div>
+    </MainContainer>
   );
 }

src/pages/projects/index.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from 'react';
 import {
-  Container,
   Title,
   ProjectGrid,
   ProjectCard,
@@ -10,6 +9,7 @@ import {
   ProjectLanguage,
   ProjectStars,
 } from './styles';
+import { MainContainer } from '../../components/MainContent/styles';
 
 interface Repo {
   name: string;
@@ -33,7 +33,7 @@ export default function Projects() {
   }, []);
 
   return (
-    <Container>
+    <MainContainer>
       <Title>Projects</Title>
       <ProjectGrid>
         {projects.map((project) => (
@@ -47,6 +47,6 @@ export default function Projects() {
           </ProjectCard>
         ))}
       </ProjectGrid>
-    </Container>
+    </MainContainer>
   );
 }

src/pages/projects/styles.ts

@@ -1,12 +1,5 @@
 import styled from 'styled-components';
 
-export const Container = styled.div`
-  padding: 2rem;
-  background-color: ${props => props.theme.background};
-  color: ${props => props.theme.text};
-  width: 100%; /* Ensure the container takes up the full width */
-`;
-
 export const Title = styled.h1`
   font-size: 2.5rem;
   margin-bottom: 2rem;
@@ -20,7 +13,7 @@ export const ProjectGrid = styled.div`
 `;
 
 export const ProjectCard = styled.a`
-  background: ${props => props.theme.cardBackground};
+  background: ${props => props.theme["green-400"]};
   padding: 1.5rem;
   border-radius: 8px;
   text-decoration: none;

src/styles/global.ts

@@ -54,6 +54,5 @@ p {
 .mc{
   display: flex;
   padding: 2rem;
-  padding-top: 3rem;
 }
 `

src/styles/themes/default.ts

@@ -1,7 +1,6 @@
 export const defaultTheme = {
   white: '#FFF',
   black: '#000',
-  cardBackground: '#2C3534',
   cardText: '#ffffff',
   cardShadow: 'rgba(0, 0, 0, 0.5)',
   highlight: '#ffcc00',