From 0393d2c3b2a148a9991a701914c12a42012fa07f Mon Sep 17 00:00:00 2001
From: GiovaniFZ <giovanifinazzi@gmail.com>
Date: Mon, 20 Jan 2025 21:56:43 -0300
Subject: [PATCH] chore: change some styles and improve too much animation

---
 .gitignore                  |  4 +++-
 package-lock.json           | 12 ++++++++++++
 package.json                |  1 +
 src/pages/about/index.tsx   | 10 ++++++----
 src/pages/contact/index.tsx | 23 +++++++++++++++++------
 src/pages/contact/styles.ts |  2 +-
 src/pages/home/index.tsx    |  6 +++---
 7 files changed, 43 insertions(+), 15 deletions(-)

diff --git a/.gitignore b/.gitignore
index 99d75ef..a985733 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,4 +28,6 @@ bun.lockb
 
 # ts build info
 tsconfig.app.tsbuildinfo
-tsconfig.node.tsbuildinfo
\ No newline at end of file
+tsconfig.node.tsbuildinfo
+
+.env
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index f57d648..e2dcb34 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index e43b534..cd0b4a6 100644
--- a/package.json
+++ b/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",
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index 80596df..f8151cd 100644
--- a/src/pages/about/index.tsx
+++ b/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>
   );
diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx
index 7a47d2e..0d27190 100644
--- a/src/pages/contact/index.tsx
+++ b/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>
   );
 }
\ No newline at end of file
diff --git a/src/pages/contact/styles.ts b/src/pages/contact/styles.ts
index 22d43e1..e9e6273 100644
--- a/src/pages/contact/styles.ts
+++ b/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;
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 8e0a53e..cf4fea0 100644
--- a/src/pages/home/index.tsx
+++ b/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">