chore: package upgrade & migration fixes

package.json

@@ -12,24 +12,25 @@
   },
   "dependencies": {
     "@gsap/react": "^2.1.0",
-    "i18next": "^23.4.6",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-i18next": "^13.2.1",
-    "react-icons": "^4.12.0",
+    "gsap": "^3.14.2",
+    "i18next": "^25.8.17",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-i18next": "^16.5.7",
+    "react-icons": "^5.6.0",
     "styled-components": "^6.0.7"
   },
   "devDependencies": {
-    "@types/react": "^18.2.15",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.0.0",
-    "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react": "^4.0.3",
-    "eslint": "^8.45.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
+    "@vitejs/plugin-react": "^5.1.4",
+    "eslint": "^10.0.3",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
     "sass": "^1.66.1",
     "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "vite": "^7.3.1"
   }
 }

src/components/Navbar.tsx

@@ -1,6 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { StyledLangButton, StyledNavbar, StyledNavBrand, StyledNavlinksWrapper } from './styles/Navbar.styled';
 import { FaBookOpen, FaUser } from 'react-icons/fa';
+import { JSX } from 'react';
 
 interface NavLink {
   title: string;

src/components/TechScroller.tsx

@@ -1,5 +1,5 @@
 import { FaHtml5, FaCss3Alt, FaJs, FaVuejs, FaReact } from 'react-icons/fa';
-import { SiNestjs, SiNuxtdotjs, SiPrisma, SiTypescript, SiPostgresql } from 'react-icons/si';
+import { SiNestjs, SiNuxt, SiPrisma, SiTypescript, SiPostgresql } from 'react-icons/si';
 import { styled } from 'styled-components';
 
 // Styled
@@ -17,7 +17,7 @@ const StyledTechScroller = styled.ul`
 `;
 
 // Component
-const techs = [FaHtml5, FaCss3Alt, FaJs, FaVuejs, FaReact, SiNestjs, SiNuxtdotjs, SiPrisma, SiTypescript, SiPostgresql];
+const techs = [FaHtml5, FaCss3Alt, FaJs, FaVuejs, FaReact, SiNestjs, SiNuxt, SiPrisma, SiTypescript, SiPostgresql];
 
 function TechScroller() {
   return (

src/components/styles/About.styled.ts

@@ -14,7 +14,7 @@ export const StyledAbout = styled.section`
     .about-content {
       h2 {
         font-size: 1.5em;
-        color: ${({ theme }) => theme.colors['200']};
+        color: ${({ theme }) => theme.colors};
       }
 
       p {

src/styled.d.ts

@@ -0,0 +1,20 @@
+import "styled-components";
+
+declare module "styled-components" {
+  export interface DefaultTheme {
+    colors: {
+      200: string;
+      300: string;
+      400: string;
+      500: string;
+      600: string;
+      bg: string;
+      accent: string;
+    };
+
+    fonts: {
+      primary: string;
+      monospace: string;
+    };
+  }
+}

src/theme.ts

@@ -1,4 +1,6 @@
-export const theme = {
+import { DefaultTheme } from "styled-components";
+
+export const theme: DefaultTheme = {
   colors: {
     200: '#e0e1dd',
     300: '#bbc1c9',