Merge pull request #2 from ihatenodejs/main

Styling and grammar changes

package.json

@@ -10,32 +10,33 @@
     "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",
-    "@types/node": "^22.10.5",
+    "@types/node": "^22.13.0",
     "dotenv": "^16.4.7",
     "fs": "^0.0.1-security",
-    "lucide-react": "^0.469.0",
+    "lucide-react": "^0.474.0",
     "path": "^0.12.7",
-    "pnpm": "^9.15.3",
+    "pnpm": "^9.15.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^7.1.1",
+    "react-router-dom": "^7.1.5",
     "react-typed": "^2.0.12",
     "styled-components": "^6.1.14"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
-    "@types/react": "^18.3.10",
-    "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react": "^4.3.2",
-    "eslint": "^9.11.1",
-    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "globals": "^15.9.0",
-    "typescript": "^5.5.3",
-    "typescript-eslint": "^8.7.0",
-    "vite": "^5.4.8"
+    "@eslint/js": "^9.19.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "eslint": "^9.19.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.18",
+    "globals": "^15.14.0",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^5.4.14"
   }
 }

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>
-        <span ref={typedElement} />
-      </h1>
+      <h1>About Me</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,9 @@
-import { useEffect, useRef, useState } from 'react';
-import Typed from 'typed.js';
+import { useState } from 'react';
 import { Button, Paragraph, TextArea } from './styles';
 import { MainContainer } from '../../components/MainContent/styles';
+import { Send } from 'lucide-react';
 
 export default function Contact() {
-  const typedElement = useRef(null);
   const emailAddress = import.meta.env.VITE_GIV_EMAIL;
   const [typedText, setTypedText] = useState('');
 
@@ -13,30 +12,18 @@ 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>
-        <span ref={typedElement} />
-      </h1>
+      <h1>Contact</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)} />
-        <Button type='submit'>Send</Button>
+        <TextArea
+          onChange={(e) => setTypedText(e.target.value)}
+          className="bgb"  
+        />
+        <Button type='submit'><Send className="ico" />Send</Button>
       </form>
     </MainContainer>
   );

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

@@ -19,8 +19,8 @@ body{
   padding: 1rem;
 }
 
-body, input, textarea, button{
-  font: 400 1.25rem Roboto, sans-serif;
+body, input, textarea, button {
+  font-family: 'Red Hat Display Variable', sans-serif;
 }
 
 h1 {
@@ -51,8 +51,27 @@ p {
   font-size: 1.25rem;
 }
 
-.mc{
+.mc {
   display: flex;
   padding: 2rem;
 }
+
+.firstSection {
+  padding-top: 3.75rem;
+}
+
+.ico {
+  margin-right: 0.5rem;
+  height: 0.85rem;
+  width: 0.85rem;
+}
+
+.bgb {
+  background-color: ${props => props.theme["dark-cream"]};
+  color: ${props => props.theme.white};
+  border: none;
+  &:focus {
+    box-shadow: none;
+  }
+};
 `

src/styles/themes/default.ts

@@ -23,4 +23,5 @@ export const defaultTheme = {
 
   'cream': '#D4D4A1',
   'light-cream': '#F5F5DC',
+  'dark-cream': '#636342',
 }