-
+
+
+
+
);
}
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
index d40c656..0c89382 100644
--- a/src/components/Header/styles.ts
+++ b/src/components/Header/styles.ts
@@ -31,7 +31,7 @@ export const HeaderContainer = styled.div`
border-radius: 8px;
width: 100%;
height: 70px;
- background-color: ${props => props.theme["green-500"]};
+ background-color: ${props => props.theme["green-400"]};
color: ${props => props.theme.white};
nav {
diff --git a/src/components/MainContent/styles.ts b/src/components/MainContent/styles.ts
new file mode 100644
index 0000000..0e3a08a
--- /dev/null
+++ b/src/components/MainContent/styles.ts
@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const MainContainer = styled.div`
+ padding: 3rem;
+ margin: 3rem;
+ background-color: ${props => props.theme["gray-700"]};
+ border-radius: 8px;
+`
\ No newline at end of file
diff --git a/src/pages/about/index.tsx b/src/pages/about/index.tsx
index 6788dfe..80596df 100644
--- a/src/pages/about/index.tsx
+++ b/src/pages/about/index.tsx
@@ -1,16 +1,17 @@
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: ["This page is coming soon. Thanks for your patience :)"],
+ 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!"],
typeSpeed: 50,
backSpeed: 25,
- loop: false,
+ loop: true,
});
return () => {
@@ -19,11 +20,11 @@ export default function About() {
}, []);
return (
-
+
About Me
-
+
);
}
\ No newline at end of file
diff --git a/src/pages/contact/index.tsx b/src/pages/contact/index.tsx
index 7268d31..7a47d2e 100644
--- a/src/pages/contact/index.tsx
+++ b/src/pages/contact/index.tsx
@@ -1,13 +1,14 @@
import { useEffect, useRef } from 'react';
import Typed from 'typed.js';
-import { Paragraph } from './styles';
+import { Button, Paragraph, TextArea } from './styles';
+import { MainContainer } from '../../components/MainContent/styles';
export default function Contact() {
const typedElement = useRef(null);
useEffect(() => {
const typed = new Typed(typedElement.current, {
- strings: ["This page is coming soon. Thanks for your patience :)"],
+ strings: ["If you want to contact me, you can use the links on Main section, or say something in the field below!"],
typeSpeed: 50,
backSpeed: 25,
loop: false,
@@ -19,11 +20,13 @@ export default function Contact() {
}, []);
return (
-
+
Contact
-
+
+
+
);
}
\ No newline at end of file
diff --git a/src/pages/contact/styles.ts b/src/pages/contact/styles.ts
index 02555fa..22d43e1 100644
--- a/src/pages/contact/styles.ts
+++ b/src/pages/contact/styles.ts
@@ -3,4 +3,26 @@ import styled from 'styled-components';
export const Paragraph = styled.p`
padding-top: 1rem;
font-size: 1.25rem;
-`;
\ No newline at end of file
+`;
+
+export const TextArea = styled.textarea`
+ height: 10rem;
+ margin-top: 1rem;
+ width: 100%;
+ padding: 1rem;
+ border-radius: 8px;
+ background: ${props => props.theme["gray-100"]};
+`
+
+export const Button = styled.button`
+all: unset;
+display: block;
+margin-top: 1rem;
+padding: 1rem;
+border-radius: 8px;
+cursor: pointer;
+background-color: ${props => props.theme["green-400"]};
+&:hover{
+ background-color: ${props => props.theme["green-300"]};
+}
+`
\ No newline at end of file
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index a818ef9..8e0a53e 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -3,16 +3,17 @@ import { useEffect, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faTelegram, faGithub } from '@fortawesome/free-brands-svg-icons';
import { IconContainer, IconLink, HomeLabel } from './styles';
+import { MainContainer } from '../../components/MainContent/styles';
export default function Home() {
const typedElement = useRef(null);
useEffect(() => {
const typed = new Typed(typedElement.current, {
- strings: ["Hi, I'm Giv! Welcome to my website~", "I hope you enjoy checking out my projects!", "Giv-Fnz"],
+ strings: ["Hi, I'm Giv! Welcome to my website!", "You can navigate through this website by checking out the sections!"],
typeSpeed: 30,
backSpeed: 50,
- loop: false,
+ loop: true,
});
return () => {
@@ -21,12 +22,12 @@ export default function Home() {
}, []);
return (
-
+
- Check out some of my social links!
+ My social links
@@ -36,6 +37,6 @@ export default function Home() {
-
+
);
}
\ No newline at end of file
diff --git a/src/pages/projects/index.tsx b/src/pages/projects/index.tsx
index e55d9c8..4efa559 100644
--- a/src/pages/projects/index.tsx
+++ b/src/pages/projects/index.tsx
@@ -1,6 +1,5 @@
import { useEffect, useState } from 'react';
import {
- Container,
Title,
ProjectGrid,
ProjectCard,
@@ -10,6 +9,7 @@ import {
ProjectLanguage,
ProjectStars,
} from './styles';
+import { MainContainer } from '../../components/MainContent/styles';
interface Repo {
name: string;
@@ -33,7 +33,7 @@ export default function Projects() {
}, []);
return (
-
+ Projects
{projects.map((project) => (
@@ -47,6 +47,6 @@ export default function Projects() {
))}
-
+
);
}
\ No newline at end of file
diff --git a/src/pages/projects/styles.ts b/src/pages/projects/styles.ts
index 99c73b0..f076681 100644
--- a/src/pages/projects/styles.ts
+++ b/src/pages/projects/styles.ts
@@ -1,12 +1,5 @@
import styled from 'styled-components';
-export const Container = styled.div`
- padding: 2rem;
- background-color: ${props => props.theme.background};
- color: ${props => props.theme.text};
- width: 100%; /* Ensure the container takes up the full width */
-`;
-
export const Title = styled.h1`
font-size: 2.5rem;
margin-bottom: 2rem;
@@ -20,7 +13,7 @@ export const ProjectGrid = styled.div`
`;
export const ProjectCard = styled.a`
- background: ${props => props.theme.cardBackground};
+ background: ${props => props.theme["green-400"]};
padding: 1.5rem;
border-radius: 8px;
text-decoration: none;
diff --git a/src/styles/global.ts b/src/styles/global.ts
index 2cb6303..3153dfd 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -54,6 +54,5 @@ p {
.mc{
display: flex;
padding: 2rem;
- padding-top: 3rem;
}
`
\ No newline at end of file
diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts
index 51d4618..a90fa15 100644
--- a/src/styles/themes/default.ts
+++ b/src/styles/themes/default.ts
@@ -1,7 +1,6 @@
export const defaultTheme = {
white: '#FFF',
black: '#000',
- cardBackground: '#2C3534',
cardText: '#ffffff',
cardShadow: 'rgba(0, 0, 0, 0.5)',
highlight: '#ffcc00',