src/components/Avatar/avatar.ts

@@ -4,10 +4,6 @@ export const Avatar = styled.img`
 border-radius: 50%;
 width: 5rem;
 height: 5rem;
-@media(max-width: 480px){
-    width: 10rem;
-    height: 10rem;
-}
 `
 export const AvatarHeader = styled.img`
 border-radius: 50%;

src/components/Header/index.tsx

@@ -1,14 +1,8 @@
 import { HashRouter } from "react-router-dom";
-import { HeaderContainer, NavLink, HomeLink, LanguageSelector } from "./styles";
+import { HeaderContainer, NavLink, HomeLink } from "./styles";
 import { AvatarHeader } from "../Avatar/avatar";
-import i18n from "../../utils/i18n";
-import { t } from "i18next";
 
 export default function Header() {
-  const changeLanguage = (event: React.ChangeEvent<HTMLSelectElement>) => {
-    i18n.changeLanguage(event.target.value);
-    localStorage.setItem("language", event.target.value); // Salva escolha do usuário
-  };
   return (
     <HashRouter>
       <HeaderContainer>
@@ -17,17 +11,9 @@ export default function Header() {
           Giv's Website
         </HomeLink>
         <nav>
-          <NavLink href="#about">{t("about")}</NavLink>
+          <NavLink href="#about">About Me</NavLink>
-          <NavLink href="#contact">{t("contact")}</NavLink>
+          <NavLink href="#contact">Contact</NavLink>
-          <NavLink href="#projects">{t("projects")}</NavLink>
+          <NavLink href="#projects">Projects</NavLink>
-        <LanguageSelector onChange={changeLanguage}>
-          <option value="pt-br">
-            Português
-          </option>
-          <option value="en-us">
-            English
-          </option>
-        </LanguageSelector>
         </nav>
       </HeaderContainer>
     </HashRouter>

src/components/Header/styles.ts

@@ -43,14 +43,4 @@ export const HeaderContainer = styled.div`
     display: flex;
     gap: 1rem;
   }
-`;
+`;
-
-export const LanguageSelector = styled.select`
-  background-color: ${props => props.theme["gray-800"]};
-  color: ${props => props.theme.white};
-  border-radius: 8px;
-  padding: 5px;
-  border: 0;
-  align-items: center;
-  justify-content: center;
-`

src/locales/en-us.json

@@ -1,11 +1,3 @@
 {
-    "about": "About me",
+    "about": "I'm Giovani, a software engineering student, interning and studying in Minas Gerais, Brazil!"
-    "aboutText": "I'm Giovani, a software engineering student, interning and studying in Minas Gerais, Brazil!",
-    "contact": "Contact",
-    "contactInfo": "If you want to contact me, you can use the links above, or say put in the field below to send me an email!",
-    "checkSocialLinks": "Hey, check out my social links!",
-    "welcome": "Hi, I'm Giovani! Welcome to my website!",
-    "skills": "Skills",
-    "projects": "Projects",
-    "send": "Send"
 }

src/locales/pt-br.json

@@ -1,4 +1,3 @@
 {
-    "about": "Sobre mim",
+    "about": "Meu nome é Giovani, estudante de engenharia de software, estagiando e estudando em Minas Gerais, Brasil!"
-    "aboutText": "Meu nome é Giovani, estudante de engenharia de software, estagiando e estudando em Minas Gerais, Brasil!"
 }

src/pages/about/index.tsx

@@ -7,9 +7,9 @@ export default function About() {
   const { t } = useTranslation();
   return (
     <MainContainer>
-      <h1>{t("about")}</h1>
+      <h1>About Me</h1>
       <Paragraph>
-      <span>{t("aboutText")}</span>
+      <span>{t("about")}</span>
       </Paragraph>
     </MainContainer>
   );

src/pages/contact/index.tsx

@@ -3,7 +3,6 @@ import { Button, TextArea } from './styles';
 import { MainContainer } from '../../components/MainContent/styles';
 import { Send } from 'lucide-react';
 import { Paragraph } from '../../components/Paragraph/styles';
-import { t } from 'i18next';
 
 export default function Contact() {
   const emailAddress = import.meta.env.VITE_GIV_EMAIL;
@@ -16,16 +15,16 @@ export default function Contact() {
 
   return (
     <MainContainer>
-      <h1>{t("contact")}</h1>
+      <h1>Contact</h1>
       <Paragraph>
-        <span>{t("contactInfo")}</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)}
           className="bgb"  
         />
-        <Button type='submit'><Send className="ico" />{t("send")}</Button>
+        <Button type='submit'><Send className="ico" />Send</Button>
       </form>
     </MainContainer>
   );

src/pages/home/index.tsx

@@ -5,14 +5,13 @@ import { faTelegram, faGithub } from '@fortawesome/free-brands-svg-icons';
 import { IconContainer, IconLink, HomeLabel, TopSection } from './styles';
 import { MainContainer } from '../../components/MainContent/styles';
 import { Avatar } from '../../components/Avatar/avatar';
-import { t } from 'i18next';
 
 export default function Home() {
   const typedElement = useRef(null);
 
   useEffect(() => {
     const typed = new Typed(typedElement.current, {
-      strings: [t("welcome")],
+      strings: ["Hi, I'm Giovani! Welcome to my website!"],
       typeSpeed: 70,
       backSpeed: 50,
       loop: false,
@@ -32,7 +31,7 @@ export default function Home() {
         </strong>
       </TopSection>
       <HomeLabel>
-        {t("checkSocialLinks")}
+        Hey, check out my social links!
       </HomeLabel>
       <IconContainer>
         <IconLink href="https://t.me/@givfnz2" target="_blank" rel="noopener noreferrer">

src/pages/home/styles.ts

@@ -26,8 +26,4 @@ gap: 1rem;
 span{
   font-size: 2.3rem;
 }
-@media (max-width: 448px) {
-  display: block;
-  font-size: 1rem;
-}
 `

src/pages/projects/index.tsx

@@ -10,7 +10,6 @@ import {
   ProjectStars,
 } from './styles';
 import { MainContainer } from '../../components/MainContent/styles';
-import { t } from 'i18next';
 
 interface Repo {
   name: string;
@@ -35,7 +34,7 @@ export default function Projects() {
 
   return (
     <MainContainer>
-      <Title>{t("projects")}</Title>
+      <Title>Projects</Title>
       <ProjectGrid>
         {projects.map((project) => (
           <ProjectCard key={project.name} href={project.url} target="_blank" rel="noopener noreferrer">

src/pages/projects/styles.ts

@@ -10,9 +10,6 @@ export const ProjectGrid = styled.div`
   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
   gap: 2rem;
   width: 100%;
-  @media(max-width: 512px){
-    display: block;
-  }
 `;
 
 export const ProjectCard = styled.a`
@@ -28,18 +25,11 @@ export const ProjectCard = styled.a`
   &:hover {
     transform: translateY(-5px);
   }
-  @media(max-width: 512px){
-    display: block;
-    margin-bottom: 1rem;
-  }
 `;
 
 export const ProjectName = styled.h2`
   font-size: 1.5rem;
   margin-bottom: 0.5rem;
-  @media(max-width: 512px){
-    font-size: 1.3rem;
-  }
 `;
 
 export const ProjectDescription = styled.p`

src/pages/skills/index.tsx

@@ -2,12 +2,11 @@ import { MainContainer } from "../../components/MainContent/styles";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faAndroid, faAngular, faGit, faLinux, faNode, faReact, faWindows } from '@fortawesome/free-brands-svg-icons'
 import { SkillsContainer } from "./styles";
-import { t } from "i18next";
 
 export default function Skills() {
     return (
         <MainContainer>
-            <h1>{t("skills")}</h1>
+            <h1>Skills</h1>
             <SkillsContainer>
                 <FontAwesomeIcon size="2x" style={{ color: '#fff' }} icon={faAndroid} />
                 <p>Android</p>

src/pages/skills/styles.ts

@@ -2,17 +2,9 @@ import styled from "styled-components";
 
 export const SkillsContainer = styled.div`
 display: flex;
-flex-direction: row;
 margin-top: 1rem;
-align-items: center;
 p {
     margin-left: 0.3rem;
     margin-right: 2.5rem;
 }
-@media(max-width: 1090px){
-    flex-direction: column;
-    p{
-        margin: 0 0 1rem 0;
-    }
-}
 `