chore: minor grammar fixes, reduce motion (remove typing from some content sections), styling improvements, add font

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fontsource-variable/red-hat-display": "^5.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",

src/App.tsx

@@ -7,6 +7,7 @@ import About from './pages/about';
 import Contact from './pages/contact';
 import Projects from './pages/projects';
 import { HashRouter } from 'react-router-dom';
+import '@fontsource-variable/red-hat-display';
 
 function App() {
   return (
@@ -14,7 +15,10 @@ function App() {
       <GlobalStyle />
       <Header />
       <HashRouter>
-        <section id="home">
+        <section
+          id="home"
+          className="firstSection"
+        >
           <Home />
         </section>
         <section id="about">

src/pages/about/index.tsx

@@ -1,31 +1,12 @@
-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: ["About me"],
-      typeSpeed: 50,
-      backSpeed: 25,
-      loop: false,
-    });
-
-    return () => {
-      typed.destroy();
-    };
-  }, []);
-
   return (
     <MainContainer>
-      <h1>
+      <h1>About Me</h1>
-        <span ref={typedElement} />
-      </h1>
       <Paragraph>
-      <span>Hi, I'm Giv, a software engineering student, interning on a nice company located in Minas Gerais in Brazil!</span>
+      <span>I'm Giv, a software engineering student interning at a nice company located in Minas Gerais, Brazil!</span>
       </Paragraph>
     </MainContainer>
   );

src/pages/contact/index.tsx

@@ -1,10 +1,8 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
-import Typed from 'typed.js';
 import { Button, Paragraph, TextArea } from './styles';
 import { MainContainer } from '../../components/MainContent/styles';
 
 export default function Contact() {
-  const typedElement = useRef(null);
   const emailAddress = import.meta.env.VITE_GIV_EMAIL;
   const [typedText, setTypedText] = useState('');
 
@@ -13,26 +11,11 @@ export default function Contact() {
     window.location.href = mailToTrigger
   }
 
-  useEffect(() => {
-    const typed = new Typed(typedElement.current, {
-      strings: ["Contact"],
-      typeSpeed: 50,
-      backSpeed: 25,
-      loop: false,
-    });
-
-    return () => {
-      typed.destroy();
-    };
-  }, []);
-
   return (
     <MainContainer>
-      <h1>
+      <h1>Contact</h1>
-        <span ref={typedElement} />
-      </h1>
       <Paragraph>
-        <span>If you want to contact me, you can use the links on the Main section, or say something in the field below! (It will open your email client btw)</span>
+        <span>If you want to contact me, you can use the links above, or say put in the field below to send me an email!</span>
       </Paragraph>
       <form onSubmit={handleSubmit}>
         <TextArea onChange={(e) => setTypedText(e.target.value)} />

src/pages/home/index.tsx

@@ -12,7 +12,7 @@ export default function Home() {
   useEffect(() => {
     const typed = new Typed(typedElement.current, {
       strings: ["Hi, I'm Giv! Welcome to my website!"],
-      typeSpeed: 30,
+      typeSpeed: 70,
       backSpeed: 50,
       loop: false,
     });
@@ -31,7 +31,7 @@ export default function Home() {
         </strong>
       </TopSection>
       <HomeLabel>
-        Hey, check My social links!
+        Hey, check out my social links!
       </HomeLabel>
       <IconContainer>
         <IconLink href="https://t.me/@givfnz2" target="_blank" rel="noopener noreferrer">

src/pages/home/styles.ts

@@ -16,7 +16,7 @@ export const IconLink = styled.a`
 `;
 
 export const HomeLabel = styled.p`
-  margin-top: 1rem;
+  margin-top: 1.5rem;
 `;
 
 export const TopSection = styled.div`

src/styles/global.ts

@@ -20,7 +20,7 @@ body{
 }
 
 body, input, textarea, button {
-  font: 400 1.25rem Roboto, sans-serif;
+  font-family: 'Red Hat Display Variable', sans-serif;
 }
 
 h1 {
@@ -55,4 +55,8 @@ p {
   display: flex;
   padding: 2rem;
 }
+
+.firstSection {
+  padding-top: 3.75rem;
+}
 `