diff --git a/custom.d.ts b/custom.d.ts
new file mode 100644
index 0000000..1bd2843
--- /dev/null
+++ b/custom.d.ts
@@ -0,0 +1,19 @@
+declare module '*.svg' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.png' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.jpg' {
+    const content: string;
+    export default content;
+}
+
+declare module '*.jpeg' {
+    const content: string;
+    export default content;
+}
diff --git a/index.html b/index.html
index 7862f92..95e293d 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@
         content="https://github.com/user-attachments/assets/95132c51-0f61-47df-9a26-17f8fa9d3a2a" />
 
     <!-- Scripts -->
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
 
     <!-- Links -->
     <link rel="icon" type="image/png" href="/src/assets/icon-portfolio.png" />
diff --git a/package-lock.json b/package-lock.json
index dba9595..50f6ccf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,12 +11,13 @@
         "i18next": "^23.15.0",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "react-i18next": "^15.0.1"
+        "react-i18next": "^15.0.1",
+        "typescript": "^5.7.2"
       },
       "devDependencies": {
         "@eslint/js": "^9.9.0",
-        "@types/react": "^18.3.3",
-        "@types/react-dom": "^18.3.0",
+        "@types/react": "^18.3.12",
+        "@types/react-dom": "^18.3.1",
         "@vitejs/plugin-react": "^4.3.1",
         "autoprefixer": "^10.4.20",
         "eslint": "^9.9.0",
@@ -28,7 +29,8 @@
         "postcss": "^8.4.45",
         "sass-embedded": "^1.78.0",
         "tailwindcss": "^3.4.10",
-        "vite": "^5.4.1"
+        "vite": "^5.4.1",
+        "vite-plugin-svgr": "^4.3.0"
       }
     },
     "node_modules/@alloc/quick-lru": {
@@ -1010,6 +1012,42 @@
         "node": ">=14"
       }
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.3.tgz",
+      "integrity": "sha512-Pnsb6f32CD2W3uCaLZIzDmeFyQ2b8UWMFI7xtwUezpcGBDVDW6y9XgAWIlARiGAo6eNF5FK5aQTr0LFyNyqq5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^4.0.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0||^4.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@rollup/pluginutils/node_modules/picomatch": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/@rollup/rollup-android-arm-eabi": {
       "version": "4.21.2",
       "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.21.2.tgz",
@@ -1218,6 +1256,231 @@
         "win32"
       ]
     },
+    "node_modules/@svgr/babel-plugin-add-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-attribute": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz",
+      "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz",
+      "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz",
+      "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-dynamic-title": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz",
+      "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-svg-em-dimensions": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz",
+      "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-react-native-svg": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz",
+      "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-plugin-transform-svg-component": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz",
+      "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/babel-preset": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz",
+      "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@svgr/babel-plugin-add-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0",
+        "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0",
+        "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0",
+        "@svgr/babel-plugin-svg-dynamic-title": "8.0.0",
+        "@svgr/babel-plugin-svg-em-dimensions": "8.0.0",
+        "@svgr/babel-plugin-transform-react-native-svg": "8.1.0",
+        "@svgr/babel-plugin-transform-svg-component": "8.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
+    "node_modules/@svgr/core": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz",
+      "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "camelcase": "^6.2.0",
+        "cosmiconfig": "^8.1.3",
+        "snake-case": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/hast-util-to-babel-ast": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz",
+      "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/types": "^7.21.3",
+        "entities": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      }
+    },
+    "node_modules/@svgr/plugin-jsx": {
+      "version": "8.1.0",
+      "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz",
+      "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.21.3",
+        "@svgr/babel-preset": "8.1.0",
+        "@svgr/hast-util-to-babel-ast": "8.0.0",
+        "svg-parser": "^2.0.4"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/gregberge"
+      },
+      "peerDependencies": {
+        "@svgr/core": "*"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1272,20 +1535,22 @@
       "dev": true
     },
     "node_modules/@types/react": {
-      "version": "18.3.5",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.5.tgz",
-      "integrity": "sha512-WeqMfGJLGuLCqHGYRGHxnKrXcTitc6L/nBUWfWPcTarG3t9PsquqUMuVeXZeca+mglY4Vo5GZjCi0A3Or2lnxA==",
+      "version": "18.3.12",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
+      "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.0",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.0.tgz",
-      "integrity": "sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@types/react": "*"
       }
@@ -1713,6 +1978,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+      "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1834,6 +2112,33 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/cosmiconfig": {
+      "version": "8.3.6",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+      "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "import-fresh": "^3.3.0",
+        "js-yaml": "^4.1.0",
+        "parse-json": "^5.2.0",
+        "path-type": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/d-fischer"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.9.5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1998,6 +2303,17 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/dot-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
+      "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "no-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -2022,6 +2338,29 @@
       "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
       "dev": true
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-abstract": {
       "version": "1.23.3",
       "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.3.tgz",
@@ -2508,6 +2847,13 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3195,6 +3541,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/is-async-function": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.0.0.tgz",
@@ -3633,6 +3986,13 @@
       "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
       "dev": true
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3753,6 +4113,16 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lower-case": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
+      "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3861,6 +4231,17 @@
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
       "dev": true
     },
+    "node_modules/no-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz",
+      "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "lower-case": "^2.0.2",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
@@ -4074,6 +4455,25 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -4129,6 +4529,16 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true
     },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
@@ -5228,6 +5638,17 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/snake-case": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz",
+      "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "dot-case": "^3.0.4",
+        "tslib": "^2.0.3"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -5482,6 +5903,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svg-parser": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz",
+      "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
@@ -5693,6 +6121,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.2.tgz",
+      "integrity": "sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
@@ -5827,6 +6268,21 @@
         }
       }
     },
+    "node_modules/vite-plugin-svgr": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz",
+      "integrity": "sha512-Jy9qLB2/PyWklpYy0xk0UU3TlU0t2UMpJXZvf+hWII1lAmRHrOUKi11Uw8N3rxoNk7atZNYO3pR3vI1f7oi+6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@rollup/pluginutils": "^5.1.3",
+        "@svgr/core": "^8.1.0",
+        "@svgr/plugin-jsx": "^8.1.0"
+      },
+      "peerDependencies": {
+        "vite": ">=2.6.0"
+      }
+    },
     "node_modules/void-elements": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
diff --git a/package.json b/package.json
index 41395f7..4e11c60 100644
--- a/package.json
+++ b/package.json
@@ -16,12 +16,13 @@
     "i18next": "^23.15.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^15.0.1"
+    "react-i18next": "^15.0.1",
+    "typescript": "^5.7.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.9.0",
@@ -33,6 +34,7 @@
     "postcss": "^8.4.45",
     "sass-embedded": "^1.78.0",
     "tailwindcss": "^3.4.10",
-    "vite": "^5.4.1"
+    "vite": "^5.4.1",
+    "vite-plugin-svgr": "^4.3.0"
   }
-}
\ No newline at end of file
+}
diff --git a/src/App.jsx b/src/App.tsx
similarity index 85%
rename from src/App.jsx
rename to src/App.tsx
index 0ac0ddc..476d538 100644
--- a/src/App.jsx
+++ b/src/App.tsx
@@ -12,7 +12,7 @@ import {
     NotificationProvider
 } from './components';
 
-function App() {
+export default function App() {
     const { t, i18n } = useTranslation();
 
     useEffect(() => {
@@ -24,17 +24,21 @@ function App() {
         <>
             <NotificationProvider>
                 <main className='w-full h-full'>
+                    {/* Portada */}
                     <BgAnimation />
                     <NavOptions />
                     <HelloSection />
                     <Border />
 
+                    {/* Sobre mí */}
                     <AboutMeSection />
                     <Border />
 
+                    {/* Conocimientos */}
                     <SkillsSection />
                     <Border />
 
+                    {/* Proyectos */}
                     <ProjectsSection />
                 </main>
                 <footer className='w-full'>
@@ -43,6 +47,4 @@ function App() {
             </NotificationProvider>
         </>
     );
-}
-
-export default App;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/assets/index.js b/src/assets/index.ts
similarity index 100%
rename from src/assets/index.js
rename to src/assets/index.ts
diff --git a/src/components/common/BgAnimation.jsx b/src/components/common/BgAnimation.tsx
similarity index 71%
rename from src/components/common/BgAnimation.jsx
rename to src/components/common/BgAnimation.tsx
index 1006bcb..690f43c 100644
--- a/src/components/common/BgAnimation.jsx
+++ b/src/components/common/BgAnimation.tsx
@@ -1,11 +1,9 @@
 import './BgAnimation.css';
 
-function BgAnimation() {
+export default function BgAnimation() {
     return (
         <div className="bg-animation">
             <div id="stars"></div>
         </div>
     );
-}
-
-export default BgAnimation;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/common/Border.jsx b/src/components/common/Border.tsx
similarity index 64%
rename from src/components/common/Border.jsx
rename to src/components/common/Border.tsx
index 81ce47f..ec732d1 100644
--- a/src/components/common/Border.jsx
+++ b/src/components/common/Border.tsx
@@ -1,5 +1,3 @@
-function Border() {
+export default function Border() {
     return <div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />;
-}
-
-export default Border;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/common/NavOptions.jsx b/src/components/common/NavOptions.tsx
similarity index 61%
rename from src/components/common/NavOptions.jsx
rename to src/components/common/NavOptions.tsx
index 04d1ca1..9f2385f 100644
--- a/src/components/common/NavOptions.jsx
+++ b/src/components/common/NavOptions.tsx
@@ -1,18 +1,20 @@
 import './NavOptions.css';
-import { useTranslation } from 'react-i18next';
+import { BaseProps } from 'types/props';
+import { Language } from 'types/general';
 import { useNotification } from '../common';
+import { useTranslation } from 'react-i18next';
 
-const goToScroll = (id, position = 'center') => {
+const goToScroll = (id: string, position: ScrollLogicalPosition = 'center') => {
     const section = document.getElementById(id);
     if (section) section.scrollIntoView({ block: position, behavior: 'smooth' });
 }
 
-function NavOptions() {
+export default function NavOptions() {
     const { t, i18n } = useTranslation();
     const { showNotification } = useNotification();
 
     const changeLanguage = () => {
-        const newLang = i18n.language === 'es' ? 'en' : 'es';
+        const newLang: Language = i18n.language === 'es' ? 'en' : 'es';
         i18n.changeLanguage(newLang);
         showNotification(t('notification-lng-change'));
     };
@@ -22,7 +24,7 @@ function NavOptions() {
         showNotification(t('notification-theme-change'));
     }
 
-    const options = [
+    const options: BaseProps[] = [
         { className: 'icon-character', label: t('option-home-label'), action: () => goToScroll('intro') },
         { className: 'icon-person', label: t('option-about-me-label'), action: () => goToScroll('about-me') },
         { className: 'icon-code', label: t('option-skills-label'), action: () => goToScroll('skills-me', 'start') },
@@ -36,31 +38,22 @@ function NavOptions() {
         <>
             <div className='navBar-bg' />
             <div className='navBar-float shadow-lg'>
-                {options.map((option, index) => (
-                    <OptionControl
-                        key={index}
-                        label={option.label}
-                        value={option.value}
-                        action={option.action}
-                        className={option.className}
-                    />
-                ))}
+                {options.map((option, index) => <OptionControl key={index} {...option} />)}
             </div>
         </>
     );
 }
 
-function OptionControl({ value, label, action, className }) {
-    return (
-        <div className='option-navBar'>
-            <label className='option md:text-base xs:text-xs'>{label}</label>
-            <button
-                onClick={action}
-                className={`${className} h-[5.5vh] w-[5.5vh] md:h-[5.5vh] md:w-[5vh] xs:h-[4.5vh] xs:w-[4.5vh]`}>
-                {value}
-            </button>
-        </div>
-    );
-}
-
-export default NavOptions;
\ No newline at end of file
+const OptionControl: React.FC<BaseProps> = ({ label, value, className, action }) => (
+    <div className='option-navBar'>
+        <label className='option md:text-base xs:text-xs'>
+            {label}
+        </label>
+        <button
+            title={label}
+            onClick={action}
+            className={`${className} h-[5.5vh] w-[5.5vh] md:h-[5.5vh] md:w-[5vh] xs:h-[4.5vh] xs:w-[4.5vh]`}>
+            {value}
+        </button>
+    </div>
+);
\ No newline at end of file
diff --git a/src/components/common/NotificationComponent.jsx b/src/components/common/NotificationComponent.tsx
similarity index 53%
rename from src/components/common/NotificationComponent.jsx
rename to src/components/common/NotificationComponent.tsx
index cdf39ae..47a1818 100644
--- a/src/components/common/NotificationComponent.jsx
+++ b/src/components/common/NotificationComponent.tsx
@@ -1,15 +1,28 @@
 import ReactDOM from 'react-dom';
+import { NotificationProviderProps, Notification } from 'types/props';
 import React, { createContext, useContext, useState, useRef } from 'react';
 
-const NotificationContext = createContext();
+interface NotificationContextProps {
+    showNotification: (message: string, duration?: number) => void;
+}
 
-export const useNotification = () => useContext(NotificationContext);
+const NotificationContext = createContext<NotificationContextProps | null>(null);
 
-export const NotificationProvider = ({ children }) => {
-    const timeoutRef = useRef(null);
-    const [notification, setNotification] = useState(null);
+export const useNotification = (): NotificationContextProps => {
+    const currentContext = useContext(NotificationContext);
 
-    const showNotification = (message, duration = 2000) => {
+    if (!currentContext) {
+        throw new Error('Error: useNotification debe ser usado dentro de un NotificationProvider');
+    }
+
+    return currentContext;
+}
+
+export const NotificationProvider: React.FC<NotificationProviderProps> = ({ children }) => {
+    const timeoutRef = useRef<number | null>(null);
+    const [notification, setNotification] = useState<Notification | null>(null);
+
+    const showNotification = (message: string, duration: number = 2000) => {
         if (timeoutRef.current) {
             clearTimeout(timeoutRef.current);
         }
diff --git a/src/components/common/index.js b/src/components/common/index.js
deleted file mode 100644
index 0928685..0000000
--- a/src/components/common/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export { default as Border } from './Border.jsx';
-export { default as NavOptions } from './NavOptions.jsx';
-export { default as BgAnimation } from './BgAnimation.jsx';
-
-// Hook and component
-export { NotificationProvider, useNotification } from './NotificationComponent.jsx'; 
\ No newline at end of file
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
new file mode 100644
index 0000000..a4b8d80
--- /dev/null
+++ b/src/components/common/index.ts
@@ -0,0 +1,6 @@
+export { default as Border } from './Border';
+export { default as NavOptions } from './NavOptions';
+export { default as BgAnimation } from './BgAnimation';
+
+// Hook and component
+export { NotificationProvider, useNotification } from './NotificationComponent'; 
\ No newline at end of file
diff --git a/src/components/index.js b/src/components/index.ts
similarity index 100%
rename from src/components/index.js
rename to src/components/index.ts
diff --git a/src/components/sections/AboutMeSection.jsx b/src/components/sections/AboutMeSection.tsx
similarity index 82%
rename from src/components/sections/AboutMeSection.jsx
rename to src/components/sections/AboutMeSection.tsx
index 20135e3..8d1eecb 100644
--- a/src/components/sections/AboutMeSection.jsx
+++ b/src/components/sections/AboutMeSection.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { MeImage } from '../../assets';
 
-function AboutMeSection() {
+export default function AboutMeSection() {
     const { t } = useTranslation();
 
     return (
@@ -22,18 +22,20 @@ function AboutMeSection() {
                 </h2>
                 <div className='text-justify'>
                     <p className='text-base text-justify md:text-sm xs:text-xs'>
+                        {/* Parrafos */}
                         {t('about-me-desc-1')}
-                        <br /><br />
+                        <br />
+                        <br />
                         {t('about-me-desc-2')}
-                        <br /><br />
+                        <br />
+                        <br />
                         {t('about-me-desc-3')}
-                        <br /><br />
+                        <br />
+                        <br />
                         {t('about-me-desc-4')}
                     </p>
                 </div>
             </div>
         </section>
     );
-}
-
-export default AboutMeSection;
+}
\ No newline at end of file
diff --git a/src/components/sections/ConnectMeSection.jsx b/src/components/sections/ConnectMeSection.tsx
similarity index 56%
rename from src/components/sections/ConnectMeSection.jsx
rename to src/components/sections/ConnectMeSection.tsx
index d38b86b..42df2e3 100644
--- a/src/components/sections/ConnectMeSection.jsx
+++ b/src/components/sections/ConnectMeSection.tsx
@@ -1,28 +1,26 @@
 import { useTranslation } from 'react-i18next';
+import { ImageReferenceProps } from 'types/props';
 import { gitHubImage, linkedImage, messageMeImage } from '../../assets';
 
-const links = [
+const links: ImageReferenceProps[] = [
     {
-        href: "https://github.com/ApidriuC",
-        alt: "Go to Andrés GitHub",
         icon: gitHubImage,
-        title: "GitHub"
+        alt: "Go to Andrés GitHub",
+        href: "https://github.com/ApidriuC"
     },
     {
-        href: "https://www.linkedin.com/in/andr%C3%A9s-felipe-londo%C3%B1o-campos-b03741222/",
-        alt: "Connect with Andrés on LinkedIn",
         icon: linkedImage,
-        title: "LinkedIn"
+        alt: "Connect with Andrés on LinkedIn",
+        href: "https://www.linkedin.com/in/andr%C3%A9s-felipe-londo%C3%B1o-campos-b03741222/"
     },
     {
-        href: "mailto:andresfloncam@gmail.com",
-        alt: "Send Andrés an email",
         icon: messageMeImage,
-        title: "Email"
+        alt: "Send Andrés an email",
+        href: "mailto:andresfloncam@gmail.com"
     }
 ];
 
-function ConnectMeSection() {
+export default function ConnectMeSection() {
     const { t } = useTranslation();
 
     return (
@@ -32,19 +30,7 @@ function ConnectMeSection() {
                     {t('connect-me-title')}
                 </h2>
                 <ul className="w-auto footer-links flex justify-center align-center list-none items-center text-center text-3xl gap-4 p-5 rounded-lg">
-                    {links.map((link, index) => (
-                        <li key={index} className="transform scale-90 hover:scale-100 duration-200">
-                            <a
-                                href={link.href}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                title={link.alt}
-                                tabIndex="0"
-                            >
-                                <img className="h-12" alt={link.alt} src={link.icon} />
-                            </a>
-                        </li>
-                    ))}
+                    {links.map((link, index) => <ImageReference key={index} {...link} />)}
                 </ul>
                 <p className="w-full">
                     &copy; {t('copyright-text')}
@@ -54,4 +40,16 @@ function ConnectMeSection() {
     );
 }
 
-export default ConnectMeSection;
+const ImageReference: React.FC<ImageReferenceProps> = ({ key, alt, href, icon }) => (
+    <li key={key} className="transform scale-90 hover:scale-100 duration-200">
+        <a
+            title={alt}
+            href={href}
+            tabIndex={0}
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            <img className="h-12" alt={alt} src={icon} />
+        </a>
+    </li>
+);
diff --git a/src/components/sections/HelloSection.jsx b/src/components/sections/HelloSection.tsx
similarity index 92%
rename from src/components/sections/HelloSection.jsx
rename to src/components/sections/HelloSection.tsx
index 199e975..501e208 100644
--- a/src/components/sections/HelloSection.jsx
+++ b/src/components/sections/HelloSection.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
 
-function HelloSection() {
+export default function HelloSection() {
     const { t } = useTranslation();
 
     return (
@@ -23,6 +23,4 @@ function HelloSection() {
             </div>
         </section>
     );
-}
-
-export default HelloSection;
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/components/sections/ProjectsSection.jsx b/src/components/sections/ProjectsSection.jsx
deleted file mode 100644
index f1c6783..0000000
--- a/src/components/sections/ProjectsSection.jsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useTranslation } from 'react-i18next';
-import {
-    htmlImage,
-    javaImage,
-    bingoImage,
-    reactImage,
-    nodeJsImage,
-    cSharpImage,
-    foxGameImage,
-    boostrapImage,
-    bookingsImage,
-    construct3Image,
-    streamLabsImage,
-    javascriptImage,
-    styleSheetImage,
-    edeskPrismaImage,
-    tailwindcssImage,
-    dispensadorImage,
-    netFrameworkImage
-} from '../../assets';
-
-function ProjectsSection() {
-    const { t } = useTranslation();
-
-    const projects = [
-        {
-            title: 'EDESK PRISMA',
-            link: 'https://edeskprisma.syc.com.co/NoClient.html',
-            image: edeskPrismaImage,
-            tags: [cSharpImage, netFrameworkImage, javascriptImage, htmlImage, styleSheetImage, boostrapImage]
-        },
-        {
-            title: 'Stream For Labs',
-            link: 'https://github.com/IngDeiver/streams-for-labs-web-client',
-            image: streamLabsImage,
-            tags: [nodeJsImage, reactImage, javascriptImage, tailwindcssImage, boostrapImage]
-        },
-        {
-            title: 'DDA Bookings',
-            link: 'https://github.com/ApidriuC/DDA-BOOKINGS-Dispositivos-Moviles',
-            image: bookingsImage,
-            tags: [reactImage, javascriptImage]
-        },
-        {
-            title: 'Dispensador - Casa Libro Total',
-            link: '',
-            image: dispensadorImage,
-            tags: [cSharpImage, netFrameworkImage, javascriptImage, htmlImage, styleSheetImage, boostrapImage]
-        },
-        {
-            title: t('bingo-project-label'),
-            link: 'https://github.com/ApidriuC/Bingo_Alcaldia_Risaralda',
-            image: bingoImage,
-            tags: [javaImage]
-        },
-        {
-            title: 'Fox Game',
-            link: 'https://github.com/ApidriuC/FoxGame---Construct3',
-            image: foxGameImage,
-            tags: [construct3Image]
-        }
-    ];
-
-    return (
-        <section id='projects-me' className='h-auto p-20'>
-            <div className='h-full w-full flex justify-center items-start flex-wrap'>
-                {/* Título */}
-                <div className='w-full mb-5'>
-                    <h2 className='text-left text-5xl md:text-5xl xs:text-4xl border-b-2 border-purple-400 mb-2 pl-3 pr-3 w-max'>
-                        {t('projects-title')}
-                    </h2>
-                    <p className='text-left pt-2 pb-5 w-3/4 md:text-lg xs:text-sm xs:w-full xs:pb-0'>
-                        {t('projects-desc')} 📚
-                    </p>
-                </div>
-
-                {/* Projects */}
-                <div className='container-projects m-12 w-full flex items-center justify-center flex-wrap md:gap-20 xs:gap-5 xs:m-0'>
-                    {projects.map((project, index) => (<Cards key={index} {...project} />))}
-                </div>
-            </div>
-        </section>
-    );
-}
-
-const Cards = ({ title, link, image, tags }) => {
-    // Generar un número aleatorio entre 56 y 80 para el width
-    const widthRandom = Math.floor(Math.random() * (80 - 56 + 1)) + 56;
-
-    // Generar un número aleatorio entre 40 y 60 para el height
-    const heightRandom = Math.floor(Math.random() * (60 - 35 + 1)) + 35;
-
-    return (
-        <article
-            style={{
-                width: `${widthRandom}vh`,
-                height: `${heightRandom}vh`,
-            }}
-            className={`relative xs:w-[40vh] xs:h-[30vh] rounded-lg hover:rounded-3xl overflow-hidden duration-[350ms] transition-all ease-expo group shadow-2xl`}
-        >
-            <a className='block w-full h-full z-10' href={link} target='_blank' rel='noreferrer'>
-                <div className='relative w-full h-full'>
-                    <img
-                        className='w-full h-full object-contain object-center scale-90 duration-[350ms] transition-all ease-expo group-hover:scale-95'
-                        src={image}
-                        alt={`${title}_img`}
-                    />
-                </div>
-
-                {/* Etiquetas */}
-                <div className='overlay cursor-pointer absolute p-4 flex justify-start items-baseline content-end flex-wrap xs:opacity-100 md:opacity-0 group-hover:opacity-100 h-full w-full top-0 left-0 gap-3'>
-                    <h2 className='text-white w-full text-left text-4xl md:text-4xl xs:text-2xl'>{title}</h2>
-                    {tags.map((tag, index) => (<img key={index} className='object-center h-7' src={tag} alt={`tag_${index}`} />))}
-                </div>
-            </a>
-        </article>
-    );
-};
-
-export default ProjectsSection;
\ No newline at end of file
diff --git a/src/components/sections/ProjectsSection.tsx b/src/components/sections/ProjectsSection.tsx
new file mode 100644
index 0000000..2453f90
--- /dev/null
+++ b/src/components/sections/ProjectsSection.tsx
@@ -0,0 +1,142 @@
+import { useTranslation } from 'react-i18next';
+import { CardProps } from 'types/props';
+import {
+    htmlImage,
+    javaImage,
+    bingoImage,
+    reactImage,
+    nodeJsImage,
+    cSharpImage,
+    foxGameImage,
+    boostrapImage,
+    bookingsImage,
+    construct3Image,
+    streamLabsImage,
+    javascriptImage,
+    styleSheetImage,
+    edeskPrismaImage,
+    tailwindcssImage,
+    dispensadorImage,
+    netFrameworkImage
+} from '../../assets';
+
+export default function ProjectsSection() {
+    const { t } = useTranslation();
+
+    const projects: CardProps[] = [
+        {
+            width: 70,
+            height: 40,
+            title: 'EDESK PRISMA',
+            link: 'https://edeskprisma.syc.com.co/NoClient.html',
+            image: edeskPrismaImage,
+            tags: [
+                { image: cSharpImage, alt: 'C#' },
+                { image: netFrameworkImage, alt: '.NET Framework' },
+                { image: javascriptImage, alt: 'JavaScript' },
+                { image: htmlImage, alt: 'HTML' },
+                { image: styleSheetImage, alt: 'CSS' },
+                { image: boostrapImage, alt: 'Bootstrap' }
+            ]
+        },
+        {
+            width: 50,
+            height: 55,
+            title: 'Stream For Labs',
+            link: 'https://github.com/IngDeiver/streams-for-labs-web-client',
+            image: streamLabsImage,
+            tags: [
+                { image: nodeJsImage, alt: 'Node.js' },
+                { image: reactImage, alt: 'React' },
+                { image: javascriptImage, alt: 'JavaScript' },
+                { image: tailwindcssImage, alt: 'Tailwind CSS' },
+                { image: boostrapImage, alt: 'Bootstrap' }
+            ]
+        },
+        {
+            width: 70,
+            height: 55,
+            title: 'DDA Bookings',
+            link: 'https://github.com/ApidriuC/DDA-BOOKINGS-Dispositivos-Moviles',
+            image: bookingsImage,
+            tags: [
+                { image: reactImage, alt: 'React' },
+                { image: javascriptImage, alt: 'JavaScript' }
+            ]
+        },
+        {
+            width: 80,
+            height: 45,
+            title: 'Dispensador - Casa Libro Total',
+            image: dispensadorImage,
+            tags: [
+                { image: cSharpImage, alt: 'C#' },
+                { image: netFrameworkImage, alt: '.NET Framework' },
+                { image: javascriptImage, alt: 'JavaScript' },
+                { image: htmlImage, alt: 'HTML' },
+                { image: styleSheetImage, alt: 'CSS' },
+                { image: boostrapImage, alt: 'Bootstrap' }
+            ]
+        },
+        {
+            width: 50,
+            height: 45,
+            title: t('bingo-project-label'),
+            link: 'https://github.com/ApidriuC/Bingo_Alcaldia_Risaralda',
+            image: bingoImage,
+            tags: [{ image: javaImage, alt: 'Java' }]
+        },
+        {
+            width: 75,
+            height: 55,
+            title: 'Fox Game',
+            link: 'https://github.com/ApidriuC/FoxGame---Construct3',
+            image: foxGameImage,
+            tags: [{ image: construct3Image, alt: 'Construct 3' }]
+        }
+    ];
+
+    return (
+        <section id='projects-me' className='h-auto p-20'>
+            <div className='h-full w-full flex justify-center items-start flex-wrap'>
+                {/* Título */}
+                <div className='w-full mb-5'>
+                    <h2 className='text-left text-5xl md:text-5xl xs:text-4xl border-b-2 border-purple-400 mb-2 pl-3 pr-3 w-max'>
+                        {t('projects-title')}
+                    </h2>
+                    <p className='text-left pt-2 pb-5 w-3/4 md:text-lg xs:text-sm xs:w-full xs:pb-0'>
+                        {t('projects-desc')} 📚
+                    </p>
+                </div>
+
+                {/* Projects */}
+                <div className='container-projects m-12 w-full flex items-center justify-center flex-wrap md:gap-20 xs:gap-5 xs:m-0'>
+                    {projects.map((project, index) => <Cards key={index} {...project} />)}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+const Cards: React.FC<CardProps> = ({ title, width, height, link, image, tags }) => (
+    <article
+        style={{ width: `${width}vh`, height: `${height}vh` }}
+        className={`relative xs:w-[40vh] xs:h-[30vh] rounded-lg hover:rounded-3xl overflow-hidden duration-[350ms] transition-all ease-expo group shadow-2xl`}>
+        <a className='block w-full h-full z-10' href={link || '#'} target='_blank' rel='noreferrer'>
+            <div className='relative w-full h-full'>
+                <img
+                    className='w-full h-full object-contain object-center scale-90 duration-[350ms] transition-all ease-expo group-hover:scale-95'
+                    src={image}
+                    alt={`${title}_img`}
+                />
+            </div>
+
+            {/* Etiquetas */}
+            <div className='overlay cursor-pointer absolute p-4 flex justify-start items-baseline content-end flex-wrap 
+                xs:opacity-100 md:opacity-0 group-hover:opacity-100 h-full w-full top-0 left-0 gap-3'>
+                <h2 className='text-white w-full text-left text-4xl md:text-4xl xs:text-2xl'>{title}</h2>
+                {tags.map((tag, index) => <img key={index} src={tag.image} alt={tag.alt} className='object-center h-7' />)}
+            </div>
+        </a>
+    </article>
+);
\ No newline at end of file
diff --git a/src/components/sections/SkillsSection.jsx b/src/components/sections/SkillsSection.jsx
deleted file mode 100644
index 56cdecd..0000000
--- a/src/components/sections/SkillsSection.jsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-    sqlImage,
-    gitImage,
-    htmlImage,
-    javaImage,
-    reactImage,
-    visualImage,
-    cSharpImage,
-    pythonImage,
-    oracleImage,
-    vsCodeImage,
-    nodeJsImage,
-    boostrapImage,
-    javascriptImage,
-    styleSheetImage,
-    typeScriptImage,
-    tailwindcssImage
-} from '../../assets';
-
-const skillsFrontEnd = [
-    { label: 'HTML', sourceImage: htmlImage, sourceLink: 'https://developer.mozilla.org/es/docs/Web/HTML' },
-    { label: 'CSS', sourceImage: styleSheetImage, sourceLink: 'https://developer.mozilla.org/es/docs/Web/CSS' },
-    { label: 'Boostrap', sourceImage: boostrapImage, sourceLink: 'https://getbootstrap.com/' },
-    { label: 'Tailwind', sourceImage: tailwindcssImage, sourceLink: 'https://tailwindcss.com/' },
-    { label: 'React', sourceImage: reactImage, sourceLink: 'https://es.react.dev/' },
-    { label: 'JavaScript', sourceImage: javascriptImage, sourceLink: 'https://developer.mozilla.org/es/docs/Web/JavaScript' },
-    { label: 'TypeScript', sourceImage: typeScriptImage, sourceLink: 'https://www.typescriptlang.org/' },
-];
-
-const skillsBackEnd = [
-    { label: 'NodeJs', sourceImage: nodeJsImage, sourceLink: 'https://nodejs.org/en' },
-    { label: 'C#', sourceImage: cSharpImage, sourceLink: 'https://learn.microsoft.com/es-es/dotnet/csharp/' },
-    { label: 'Java', sourceImage: javaImage, sourceLink: 'https://www.java.com/es/' },
-    { label: 'Python', sourceImage: pythonImage, sourceLink: 'https://www.python.org/' }
-];
-
-const skillsDataBase = [
-    { label: 'SQL Server', sourceImage: sqlImage, sourceLink: 'https://www.microsoft.com/es-co/sql-server/sql-server-downloads' },
-    { label: 'Oracle', sourceImage: oracleImage, sourceLink: 'https://www.oracle.com/co/' }
-];
-
-const skillsFrames = [
-    { label: 'Visual Studio Code', sourceImage: vsCodeImage, sourceLink: 'https://code.visualstudio.com/' },
-    { label: 'Visual Studio 2022', sourceImage: visualImage, sourceLink: 'https://visualstudio.microsoft.com/es/vs/' },
-    { label: 'GIT', sourceImage: gitImage, sourceLink: 'https://git-scm.com/' }
-];
-
-const containerSkillsOptns = [
-    { label: 'Front-End', items: skillsFrontEnd },
-    { label: 'Back-End', items: skillsBackEnd },
-    { label: 'Data Base', items: skillsDataBase },
-    { label: 'Frameworks', items: skillsFrames },
-];
-
-function SkillsSection() {
-    const { t } = useTranslation();
-
-    const educationOptns = [
-        { year: '2023', label: t('education-title-1'), value: t('education-place-1'), details: t('education-details-1') },
-        { year: '2023', label: t('education-title-2'), value: t('education-place-2'), details: t('education-details-2') },
-        { year: '2022', label: t('education-title-3'), value: t('education-place-3'), details: t('education-details-3') },
-        { year: '2021', label: t('education-title-4'), value: t('education-place-4'), details: t('education-details-4') }
-    ];
-
-    return (
-        <section id='skills-me' className='h-auto p-20'>
-            <div className='h-full w-full flex justify-center items-start flex-wrap'>
-                {/* Titulo */}
-                <div className='w-full mb-5'>
-                    <h2 className='text-left text-5xl md:text-5xl xs:text-4xl border-b-2 border-purple-400 mb-2 pl-2 pr-2 w-max'>
-                        {t('education-skills')}
-                    </h2>
-                    <p className='text-left pt-2 pb-5 md:text-lg xs:text-sm'>
-                        {t('education-skills-desc')}
-                    </p>
-                </div>
-
-                {/* Education */}
-                <div className='w-full md:w-1/3 h-full pr-10 flex justify-center items-center content-center flex-wrap gap-4 xs:pt-[0px] xs:pr-[15px] xs:pl-[15px] md:pr-10 relative z-[1]'>
-                    {educationOptns.map((option, index) => (
-                        <EducationBox
-                            key={index}
-                            year={option.year}
-                            label={option.label}
-                            value={option.value}
-                            details={option.details}
-                        />
-                    ))}
-                </div>
-
-                {/* Skills */}
-                <div className='w-full md:w-2/3 pl-20 flex justify-center items-center content-center flex-wrap xs:pr-0 xs:pt-5 xs:pl-0 md:pt-0'>
-                    {containerSkillsOptns.map((option, index) => (
-                        <ContainerSkill
-                            key={index}
-                            label={option.label}
-                            items={option.items}
-                        />
-                    ))}
-                </div>
-            </div>
-        </section>
-    );
-}
-
-function EducationBox({ label, value, year, details }) {
-    const { t } = useTranslation();
-    const [showPopup, setShowPopup] = useState(false);
-    const [shouldRenderPopup, setShouldRenderPopup] = useState(false);
-
-    const handleMouseEnter = () => {
-        setShouldRenderPopup(true);
-        setShowPopup(true);
-    };
-
-    const handleMouseLeave = () => {
-        setShowPopup(false);
-        setTimeout(() => setShouldRenderPopup(false), 300);
-    };
-
-    return (
-        <div
-            className='box-education relative z-[1] p-4 rounded-lg border w-full h-[150px] max-w-[500px] xs:max-w-none xs:h-[120px] md:h-[150px] flex justify-center items-center content-center flex-wrap shadow-lg'
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-        >
-            <div className='label-rectangle absolute top-[10px] left-[-30px] text-white font-bold xs:text-xs'>
-                {year}
-            </div>
-            <p className='text-left w-full text-2xl leading-6 pt-3 xs:text-lg xs:leading-5'>
-                {label}
-            </p>
-            <span className='text-left w-full text-base pt-1 italic xs:text-sm'>
-                {value}
-            </span>
-
-            {/* Condicionamos la renderización del Popup */}
-            {shouldRenderPopup && (
-                <div
-                    className={`popup absolute md:top-1/2 md:right-[-575px] transform md:-translate-y-1/2 w-[500px] p-4 shadow-2xl rounded-lg z-[999] transition-opacity duration-300 ease-in-out xs:hidden md:block
-                        ${showPopup ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
-                >
-                    <h3 className='font-bold text-white'>
-                        {t('education-details-title')}
-                    </h3>
-                    <p className='text-sm text-justify'>
-                        {details}
-                    </p>
-                    <div className='com-circule first-circule absolute shadow-lg' />
-                    <div className='com-circule second-circule absolute shadow-lg' />
-                </div>
-            )}
-        </div>
-    );
-}
-
-function ContainerSkill({ label, items = [] }) {
-    return (
-        <div className='skill-container border-l border-gray-500 w-full h-auto pl-5 pr-5 pb-3 mb-5 xs:p-[0] xs:pl-3 md:pl-5'>
-            <h3 className='text-left w-full mb-3 text-xl'>{label}</h3>
-            <div className='items flex flex-wrap gap-4'>
-                {items.map((item, index) => (
-                    <SkillBox
-                        key={index}
-                        label={item.label}
-                        sourceImage={item.sourceImage}
-                        sourceLink={item.sourceLink}
-                    />
-                ))}
-            </div>
-        </div>
-    );
-}
-
-function SkillBox({ label, sourceImage, sourceLink }) {
-    const goToPage = () => window.open(sourceLink, '_blank');
-
-    return (
-        <div className='skill-box w-[180px] rounded-xl border flex justify-center items-center flex-col p-5 gap-2 cursor-pointer shadow-lg relative xs:w-[95px] md:w-[180px]'
-            onClick={goToPage}
-        >
-            <a className='absolute rounded-full border border-gray-500 h-8 w-8 top-1 right-1 transition-all ease-in shadow-lg' />
-            <img src={sourceImage} alt="skill" className='w-[55px] h-[55px] rounded-full shadow-lg xs:w-[30px] xs:h-[30px] md:w-[55px] md:h-[55px]' />
-            <label className='w-full h-auto font-bold text-base cursor-pointer xs:text-xs md:text-base'>{label}</label>
-        </div>
-    );
-}
-
-export default SkillsSection;
\ No newline at end of file
diff --git a/src/components/sections/SkillsSection.tsx b/src/components/sections/SkillsSection.tsx
new file mode 100644
index 0000000..ca729be
--- /dev/null
+++ b/src/components/sections/SkillsSection.tsx
@@ -0,0 +1,172 @@
+import React, { useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { EducationBoxProps, PopupProps, SkillBoxProps, ContainerSkillProps } from 'types/props';
+import {
+    sqlImage,
+    gitImage,
+    htmlImage,
+    javaImage,
+    reactImage,
+    visualImage,
+    cSharpImage,
+    pythonImage,
+    oracleImage,
+    vsCodeImage,
+    nodeJsImage,
+    boostrapImage,
+    javascriptImage,
+    styleSheetImage,
+    typeScriptImage,
+    tailwindcssImage
+} from '../../assets';
+
+const containersSkills: ContainerSkillProps[] = [
+    {
+        label: 'Front-End',
+        skills: [
+            { label: 'HTML', sourceImage: htmlImage, sourceLink: 'https://developer.mozilla.org/es/docs/Web/HTML' },
+            { label: 'CSS', sourceImage: styleSheetImage, sourceLink: 'https://developer.mozilla.org/es/docs/Web/CSS' },
+            { label: 'Boostrap', sourceImage: boostrapImage, sourceLink: 'https://getbootstrap.com/' },
+            { label: 'Tailwind', sourceImage: tailwindcssImage, sourceLink: 'https://tailwindcss.com/' },
+            { label: 'React', sourceImage: reactImage, sourceLink: 'https://es.react.dev/' },
+            { label: 'JavaScript', sourceImage: javascriptImage, sourceLink: 'https://developer.mozilla.org/es/docs/Web/JavaScript' },
+            { label: 'TypeScript', sourceImage: typeScriptImage, sourceLink: 'https://www.typescriptlang.org/' },
+        ]
+    },
+    {
+        label: 'Back-End',
+        skills: [
+            { label: 'NodeJs', sourceImage: nodeJsImage, sourceLink: 'https://nodejs.org/en' },
+            { label: 'C#', sourceImage: cSharpImage, sourceLink: 'https://learn.microsoft.com/es-es/dotnet/csharp/' },
+            { label: 'Java', sourceImage: javaImage, sourceLink: 'https://www.java.com/es/' },
+            { label: 'Python', sourceImage: pythonImage, sourceLink: 'https://www.python.org/' }
+        ]
+    },
+    {
+        label: 'Data Base',
+        skills: [
+            { label: 'SQL Server', sourceImage: sqlImage, sourceLink: 'https://www.microsoft.com/es-co/sql-server/sql-server-downloads' },
+            { label: 'Oracle', sourceImage: oracleImage, sourceLink: 'https://www.oracle.com/co/' }
+        ]
+    },
+    {
+        label: 'Frameworks',
+        skills: [
+            { label: 'Visual Studio Code', sourceImage: vsCodeImage, sourceLink: 'https://code.visualstudio.com/' },
+            { label: 'Visual Studio 2022', sourceImage: visualImage, sourceLink: 'https://visualstudio.microsoft.com/es/vs/' },
+            { label: 'GIT', sourceImage: gitImage, sourceLink: 'https://git-scm.com/' }
+        ]
+    }
+];
+
+export default function SkillsSection() {
+    const { t } = useTranslation();
+
+    const educationOptns = [
+        { year: '2023', label: t('education-title-1'), value: t('education-place-1'), description: t('education-details-1') },
+        { year: '2023', label: t('education-title-2'), value: t('education-place-2'), description: t('education-details-2') },
+        { year: '2022', label: t('education-title-3'), value: t('education-place-3'), description: t('education-details-3') },
+        { year: '2021', label: t('education-title-4'), value: t('education-place-4'), description: t('education-details-4') }
+    ];
+
+    return (
+        <section id='skills-me' className='h-auto p-20'>
+            <div className='h-full w-full flex justify-center items-start flex-wrap'>
+                {/* Titulo */}
+                <div className='w-full mb-5'>
+                    <h2 className='text-left text-5xl md:text-5xl xs:text-4xl border-b-2 border-purple-400 mb-2 pl-2 pr-2 w-max'>
+                        {t('education-skills')}
+                    </h2>
+                    <p className='text-left pt-2 pb-5 md:text-lg xs:text-sm'>
+                        {t('education-skills-desc')}
+                    </p>
+                </div>
+
+                {/* Education */}
+                <div className='w-full md:w-1/3 h-full pr-10 flex justify-center items-center content-center flex-wrap gap-4 xs:pt-[0px] xs:pr-[15px] xs:pl-[15px] md:pr-10 relative z-[1]'>
+                    {educationOptns.map((option, index) => <EducationBox key={index} {...option} />)}
+                </div>
+
+                {/* Skills */}
+                <div className='w-full md:w-2/3 pl-20 flex justify-center items-center content-center flex-wrap xs:pr-0 xs:pt-5 xs:pl-0 md:pt-0'>
+                    {containersSkills.map((option, index) => <ContainerSkill key={index} {...option} />)}
+                </div>
+            </div>
+        </section>
+    );
+}
+
+const EducationBox: React.FC<EducationBoxProps> = ({ label, value, year, description }) => {
+    const { t } = useTranslation();
+    const [showPopup, setShowPopup] = useState(false);
+    const [shouldRenderPopup, setShouldRenderPopup] = useState(false);
+
+    const onMouseEnterHandler = useCallback(() => {
+        setShouldRenderPopup(true);
+        setShowPopup(true);
+    }, []);
+
+    const onMouseLeaveHandler = useCallback(() => {
+        setShowPopup(false);
+        setTimeout(() => setShouldRenderPopup(false), 300);
+    }, []);
+
+    return (
+        <div
+            className='box-education relative z-[1] p-4 rounded-lg border w-full h-[150px] max-w-[500px] xs:max-w-none xs:h-[120px] md:h-[150px] 
+                flex justify-center items-center content-center flex-wrap shadow-lg'
+            onMouseEnter={onMouseEnterHandler}
+            onMouseLeave={onMouseLeaveHandler}
+        >
+            <div className='label-rectangle absolute top-[10px] left-[-30px] text-white font-bold xs:text-xs'>
+                {year}
+            </div>
+            <p className='text-left w-full text-2xl leading-6 pt-3 xs:text-lg xs:leading-5'>
+                {label}
+            </p>
+            <span className='text-left w-full text-base pt-1 italic xs:text-sm'>
+                {value}
+            </span>
+
+            {/* Renderizar el Popup si es necesario */}
+            {shouldRenderPopup && <Popup isVisible={showPopup} textContent={description} title={t('education-details-title')} />}
+        </div>
+    );
+}
+
+const Popup: React.FC<PopupProps> = ({ isVisible, title, textContent }) => (
+    <div
+        className={`popup absolute md:top-1/2 md:right-[-575px] transform md:-translate-y-1/2 w-[500px] p-4 shadow-2xl rounded-lg z-[999] transition-opacity duration-300 ease-in-out 
+            xs:hidden md:block ${isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}
+    >
+        <h3 className='font-bold text-white'>{title}</h3>
+        <p className='text-sm text-justify'>{textContent}</p>
+        <div className='com-circule first-circule absolute shadow-lg' />
+        <div className='com-circule second-circule absolute shadow-lg' />
+    </div>
+);
+
+const ContainerSkill = React.memo(({ label, skills }: ContainerSkillProps) => {
+    return (
+        <div className='skill-container border-l border-gray-500 w-full h-auto pl-5 pr-5 pb-3 mb-5 xs:p-[0] xs:pl-3 md:pl-5'>
+            <h3 className='text-left w-full mb-3 text-xl'>{label}</h3>
+            <div className='items flex flex-wrap gap-4'>
+                {skills.map((skill, index) => <SkillBox key={index} {...skill} />)}
+            </div>
+        </div>
+    )
+});
+
+const goToPage = (sourceLink: string) => window.open(sourceLink, '_blank');
+
+const SkillBox = React.memo(({ label, sourceImage, sourceLink }: SkillBoxProps) => {
+    return (
+        <div className='skill-box w-[180px] rounded-xl border flex justify-center items-center flex-col p-5 gap-2 cursor-pointer shadow-lg relative xs:w-[95px] md:w-[180px]'
+            onClick={() => goToPage(sourceLink)}
+        >
+            <a className='absolute rounded-full border border-gray-500 h-8 w-8 top-1 right-1 transition-all ease-in shadow-lg' />
+            <img src={sourceImage} alt={`Icono de ${label}`} className='w-[55px] h-[55px] rounded-full shadow-lg xs:w-[30px] xs:h-[30px] md:w-[55px] md:h-[55px]' />
+            <label className='w-full h-auto font-bold text-base cursor-pointer xs:text-xs md:text-base'>{label}</label>
+        </div>
+    );
+});
\ No newline at end of file
diff --git a/src/components/sections/index.js b/src/components/sections/index.ts
similarity index 100%
rename from src/components/sections/index.js
rename to src/components/sections/index.ts
diff --git a/src/main.jsx b/src/main.jsx
deleted file mode 100644
index 8f5fb8b..0000000
--- a/src/main.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import './locales/i18n'
-import './styles/main.css'
-import './styles/tailwindInput.css'
-import './styles/tailwindOutput.css'
-
-import App from './App.jsx'
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-)
diff --git a/src/main.tsx b/src/main.tsx
new file mode 100644
index 0000000..cb30b04
--- /dev/null
+++ b/src/main.tsx
@@ -0,0 +1,18 @@
+import './locales/i18n'
+import './styles/main.css'
+import './styles/tailwindInput.css'
+import './styles/tailwindOutput.css'
+
+import App from './App'
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+const currentRoot = document.getElementById('root') as HTMLElement | null;
+
+if (currentRoot) {
+  createRoot(currentRoot).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  );
+}
\ No newline at end of file
diff --git a/src/types/general.ts b/src/types/general.ts
new file mode 100644
index 0000000..d7399da
--- /dev/null
+++ b/src/types/general.ts
@@ -0,0 +1 @@
+export type Language = 'es' | 'en';
\ No newline at end of file
diff --git a/src/types/props.ts b/src/types/props.ts
new file mode 100644
index 0000000..aa7b3e4
--- /dev/null
+++ b/src/types/props.ts
@@ -0,0 +1,59 @@
+import { ReactNode } from "react"
+
+export interface NotificationProviderProps {
+    children: ReactNode
+}
+
+export interface Notification {
+    message: string
+}
+
+export interface BaseProps {
+    label?: string,
+    value?: string,
+    className?: string,
+    action?: () => void
+}
+
+export interface ImageReferenceProps {
+    key?: number,
+    alt: string,
+    href: string,
+    icon: string
+}
+
+export interface CardProps {
+    title: string,
+    width: number,
+    height: number,
+    link?: string,
+    image: string,
+    tags: TagProps[]
+}
+
+export interface TagProps {
+    alt: string,
+    image: string
+}
+
+export interface SkillBoxProps {
+    label: string,
+    sourceLink: string,
+    sourceImage: string
+}
+
+export interface ContainerSkillProps {
+    label: string,
+    skills: SkillBoxProps[]
+}
+
+export interface PopupProps {
+    isVisible: boolean,
+    title: string,
+    textContent: string
+}
+
+export interface EducationBoxProps extends BaseProps {
+    year: string,
+    description: string
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..98ed73d
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,37 @@
+{
+    "compilerOptions": {
+        "target": "ESNext", // Especifica la versión de JS que generará el compilador.
+        "lib": [
+            "DOM",
+            "DOM.Iterable",
+            "ESNext"
+        ], // Bibliotecas a incluir (DOM para navegadores).
+        "allowJs": true, // Permite usar archivos JS junto a TS.
+        "skipLibCheck": true, // Omite la verificación de tipos en los archivos .d.ts.
+        "esModuleInterop": true, // Facilita la interoperabilidad con módulos CommonJS.
+        "strict": true, // Habilita todas las verificaciones estrictas.
+        "forceConsistentCasingInFileNames": true, // Asegura consistencia en nombres de archivos.
+        "module": "ESNext", // Usa el sistema de módulos ES6.
+        "moduleResolution": "Node", // Resuelve módulos al estilo Node.js.
+        "resolveJsonModule": true, // Permite importar archivos JSON.
+        "isolatedModules": true, // Verifica que cada archivo tenga su propio contexto.
+        "noEmit": true, // No genera archivos JS al compilar.
+        "jsx": "react-jsx", // Usa la nueva transformada de JSX de React (React 17+).
+        "allowSyntheticDefaultImports": true,
+        "allowImportingTsExtensions": true,
+        "baseUrl": "./src",
+        "paths": {
+            "@assets/*": [
+                "assets/*"
+            ]
+        }
+    },
+    "include": [
+        "src",
+        "custom.d.ts" // Incluir tipados personalizados.
+    ],
+    "exclude": [
+        "node_modules",
+        "build"
+    ]
+}
\ No newline at end of file