diff --git a/package.json b/package.json
index cd0b4a6..31c8d7f 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/App.tsx b/src/App.tsx
index 6a2b7bf..f723431 100644
--- a/src/App.tsx
+++ b/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() {
-
+
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index eb6808a..e3df736 100644
--- a/src/pages/about/index.tsx
+++ b/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 (
-
-
-
+ About Me
- Hi, I'm Giv, a software engineering student, interning on a nice company located in Minas Gerais in Brazil!
+ I'm Giv, a software engineering student interning at a nice company located in Minas Gerais, Brazil!
);
diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx
index 0d27190..0e683dd 100644
--- a/src/pages/contact/index.tsx
+++ b/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 (
-
-
-
+ Contact
- 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)
+ If you want to contact me, you can use the links above, or say put in the field below to send me an email!
);
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index 55c8587..df2a6a9 100644
--- a/src/pages/home/index.tsx
+++ b/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() {
- Hey, check My social links!
+ Hey, check out my social links!
diff --git a/src/pages/home/styles.ts b/src/pages/home/styles.ts
index c8496d5..be2f958 100644
--- a/src/pages/home/styles.ts
+++ b/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`
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 3153dfd..0478a5f 100644
--- a/src/styles/global.ts
+++ b/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;
+ }
+};
`
\ No newline at end of file
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index a90fa15..83b3c41 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -23,4 +23,5 @@ export const defaultTheme = {
'cream': '#D4D4A1',
'light-cream': '#F5F5DC',
+ 'dark-cream': '#636342',
}
\ No newline at end of file