chore: change some styles and improve too much animation

.gitignore

@@ -28,4 +28,6 @@ bun.lockb
 
 # ts build info
 tsconfig.app.tsbuildinfo
-tsconfig.node.tsbuildinfo
+tsconfig.node.tsbuildinfo
+
+.env

package-lock.json

@@ -12,6 +12,7 @@
         "@fortawesome/free-brands-svg-icons": "^6.7.2",
         "@fortawesome/react-fontawesome": "^0.2.2",
         "@types/node": "^22.10.5",
+        "dotenv": "^16.4.7",
         "fs": "^0.0.1-security",
         "lucide-react": "^0.469.0",
         "path": "^0.12.7",
@@ -1846,6 +1847,17 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/dotenv": {
+      "version": "16.4.7",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
+      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.36",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.36.tgz",

package.json

@@ -14,6 +14,7 @@
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@types/node": "^22.10.5",
+    "dotenv": "^16.4.7",
     "fs": "^0.0.1-security",
     "lucide-react": "^0.469.0",
     "path": "^0.12.7",

src/pages/about/index.tsx

@@ -8,10 +8,10 @@ export default function About() {
 
   useEffect(() => {
     const typed = new Typed(typedElement.current, {
-      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!"],
+      strings: ["About me"],
       typeSpeed: 50,
       backSpeed: 25,
-      loop: true,
+      loop: false,
     });
 
     return () => {
@@ -21,9 +21,11 @@ export default function About() {
 
   return (
     <MainContainer>
-      <h1>About Me</h1>
-      <Paragraph>
+      <h1>
         <span ref={typedElement} />
+      </h1>
+      <Paragraph>
+      <span>Hi, I'm Giv, lemme tell you about me!, So, I'm currently a software engineering student, interning on a nice company located in Minas Gerais in Brazil, and that's it!</span>
       </Paragraph>
     </MainContainer>
   );

src/pages/contact/index.tsx

@@ -1,14 +1,21 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef, 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('');
+
+  function handleSubmit() {
+    const mailToTrigger = 'mailto:' + emailAddress + '&subject=I visited your website!&body=' + typedText;
+    window.location.href = mailToTrigger
+  }
 
   useEffect(() => {
     const typed = new Typed(typedElement.current, {
-      strings: ["If you want to contact me, you can use the links on Main section, or say something in the field below!"],
+      strings: ["Contact"],
       typeSpeed: 50,
       backSpeed: 25,
       loop: false,
@@ -21,12 +28,16 @@ export default function Contact() {
 
   return (
     <MainContainer>
-      <h1>Contact</h1>
-      <Paragraph>
+      <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>
       </Paragraph>
-      <TextArea />
-      <Button>Send</Button>
+      <form onSubmit={handleSubmit}>
+        <TextArea onChange={(e) => setTypedText(e.target.value)} />
+        <Button type='submit'>Send</Button>
+      </form>
     </MainContainer>
   );
 }

src/pages/contact/styles.ts

@@ -12,7 +12,7 @@ export const TextArea = styled.textarea`
   padding: 1rem;
   border-radius: 8px;
   background: ${props => props.theme["gray-100"]};
-`
+`;
 
 export const Button = styled.button`
 all: unset;

src/pages/home/index.tsx

@@ -10,10 +10,10 @@ export default function Home() {
 
   useEffect(() => {
     const typed = new Typed(typedElement.current, {
-      strings: ["Hi, I'm Giv! Welcome to my website!", "You can navigate through this website by checking out the sections!"],
+      strings: ["Hi, I'm Giv! Welcome to my website!"],
       typeSpeed: 30,
       backSpeed: 50,
-      loop: true,
+      loop: false,
     });
 
     return () => {
@@ -27,7 +27,7 @@ export default function Home() {
         <span ref={typedElement} />
       </h1>
       <HomeLabel>
-        My social links
+        Hey, check My social links!
       </HomeLabel>
       <IconContainer>
         <IconLink href="https://t.me/@givfnz2" target="_blank" rel="noopener noreferrer">