From 553027c665020d1f91a1f3caff2a95ccae47eedd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andres=20Felipe=20Londo=C3=B1o=20Campos?= Date: Mon, 25 Nov 2024 10:09:29 -0500 Subject: [PATCH 1/4] =?UTF-8?q?Se=20refactorizan=20funciones=20y=20se=20a?= =?UTF-8?q?=C3=B1aden=20tama=C3=B1os=20fijos=20para=20los=20proyectos.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.jsx | 6 +- src/components/common/BgAnimation.jsx | 6 +- src/components/common/Border.jsx | 6 +- src/components/common/NavOptions.jsx | 26 +++--- src/components/sections/AboutMeSection.jsx | 16 ++-- src/components/sections/ConnectMeSection.jsx | 24 +++--- src/components/sections/HelloSection.jsx | 6 +- src/components/sections/ProjectsSection.jsx | 30 +++---- src/components/sections/SkillsSection.jsx | 87 +++++++++----------- 9 files changed, 96 insertions(+), 111 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 0ac0ddc..ac6082d 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -12,7 +12,7 @@ import { NotificationProvider } from './components'; -function App() { +export default function App() { const { t, i18n } = useTranslation(); useEffect(() => { @@ -43,6 +43,4 @@ function App() { ); -} - -export default App; \ No newline at end of file +} \ No newline at end of file diff --git a/src/components/common/BgAnimation.jsx b/src/components/common/BgAnimation.jsx index 1006bcb..690f43c 100644 --- a/src/components/common/BgAnimation.jsx +++ b/src/components/common/BgAnimation.jsx @@ -1,11 +1,9 @@ import './BgAnimation.css'; -function BgAnimation() { +export default function BgAnimation() { return (
); -} - -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.jsx index 81ce47f..ec732d1 100644 --- a/src/components/common/Border.jsx +++ b/src/components/common/Border.jsx @@ -1,5 +1,3 @@ -function Border() { +export default function Border() { return
; -} - -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.jsx index 04d1ca1..a8cf56a 100644 --- a/src/components/common/NavOptions.jsx +++ b/src/components/common/NavOptions.jsx @@ -7,7 +7,7 @@ const goToScroll = (id, position = 'center') => { if (section) section.scrollIntoView({ block: position, behavior: 'smooth' }); } -function NavOptions() { +export default function NavOptions() { const { t, i18n } = useTranslation(); const { showNotification } = useNotification(); @@ -50,17 +50,13 @@ function NavOptions() { ); } -function OptionControl({ value, label, action, className }) { - return ( -
- - -
- ); -} - -export default NavOptions; \ No newline at end of file +const OptionControl = ({ value, label, action, className }) => ( +
+ + +
+); \ No newline at end of file diff --git a/src/components/sections/AboutMeSection.jsx b/src/components/sections/AboutMeSection.jsx index 20135e3..8d1eecb 100644 --- a/src/components/sections/AboutMeSection.jsx +++ b/src/components/sections/AboutMeSection.jsx @@ -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() {

+ {/* Parrafos */} {t('about-me-desc-1')} -

+
+
{t('about-me-desc-2')} -

+
+
{t('about-me-desc-3')} -

+
+
{t('about-me-desc-4')}

); -} - -export default AboutMeSection; +} \ No newline at end of file diff --git a/src/components/sections/ConnectMeSection.jsx b/src/components/sections/ConnectMeSection.jsx index d38b86b..0a7e209 100644 --- a/src/components/sections/ConnectMeSection.jsx +++ b/src/components/sections/ConnectMeSection.jsx @@ -3,26 +3,26 @@ import { gitHubImage, linkedImage, messageMeImage } from '../../assets'; const links = [ { - href: "https://github.com/ApidriuC", - alt: "Go to Andrés GitHub", + title: "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", + title: "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", + title: "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 ( @@ -52,6 +52,4 @@ function ConnectMeSection() { ); -} - -export default ConnectMeSection; +} \ No newline at end of file diff --git a/src/components/sections/HelloSection.jsx b/src/components/sections/HelloSection.jsx index 199e975..501e208 100644 --- a/src/components/sections/HelloSection.jsx +++ b/src/components/sections/HelloSection.jsx @@ -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() { ); -} - -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 index f1c6783..b15a02e 100644 --- a/src/components/sections/ProjectsSection.jsx +++ b/src/components/sections/ProjectsSection.jsx @@ -19,41 +19,53 @@ import { netFrameworkImage } from '../../assets'; -function ProjectsSection() { +export default function ProjectsSection() { const { t } = useTranslation(); const projects = [ { + width: 70, + height: 40, title: 'EDESK PRISMA', link: 'https://edeskprisma.syc.com.co/NoClient.html', image: edeskPrismaImage, tags: [cSharpImage, netFrameworkImage, javascriptImage, htmlImage, styleSheetImage, boostrapImage] }, { + width: 50, + height: 55, title: 'Stream For Labs', link: 'https://github.com/IngDeiver/streams-for-labs-web-client', image: streamLabsImage, tags: [nodeJsImage, reactImage, javascriptImage, tailwindcssImage, boostrapImage] }, { + width: 70, + height: 55, title: 'DDA Bookings', link: 'https://github.com/ApidriuC/DDA-BOOKINGS-Dispositivos-Moviles', image: bookingsImage, tags: [reactImage, javascriptImage] }, { + width: 80, + height: 45, title: 'Dispensador - Casa Libro Total', link: '', image: dispensadorImage, tags: [cSharpImage, netFrameworkImage, javascriptImage, htmlImage, styleSheetImage, boostrapImage] }, { + width: 50, + height: 45, title: t('bingo-project-label'), link: 'https://github.com/ApidriuC/Bingo_Alcaldia_Risaralda', image: bingoImage, tags: [javaImage] }, { + width: 75, + height: 55, title: 'Fox Game', link: 'https://github.com/ApidriuC/FoxGame---Construct3', image: foxGameImage, @@ -83,19 +95,11 @@ function ProjectsSection() { ); } -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; +const Cards = ({ title, width, height, link, image, tags }) => { return (
@@ -115,6 +119,4 @@ const Cards = ({ title, link, image, tags }) => {
); -}; - -export default ProjectsSection; \ No newline at end of file +}; \ No newline at end of file diff --git a/src/components/sections/SkillsSection.jsx b/src/components/sections/SkillsSection.jsx index 56cdecd..db2c487 100644 --- a/src/components/sections/SkillsSection.jsx +++ b/src/components/sections/SkillsSection.jsx @@ -47,14 +47,14 @@ const skillsFrames = [ { label: 'GIT', sourceImage: gitImage, sourceLink: 'https://git-scm.com/' } ]; -const containerSkillsOptns = [ +const ContainerSkillsOptns = [ { label: 'Front-End', items: skillsFrontEnd }, { label: 'Back-End', items: skillsBackEnd }, { label: 'Data Base', items: skillsDataBase }, - { label: 'Frameworks', items: skillsFrames }, + { label: 'Frameworks', items: skillsFrames } ]; -function SkillsSection() { +export default function SkillsSection() { const { t } = useTranslation(); const educationOptns = [ @@ -92,7 +92,7 @@ function SkillsSection() { {/* Skills */}
- {containerSkillsOptns.map((option, index) => ( + {ContainerSkillsOptns.map((option, index) => ( { const { t } = useTranslation(); const [showPopup, setShowPopup] = useState(false); const [shouldRenderPopup, setShouldRenderPopup] = useState(false); - const handleMouseEnter = () => { + const onMouseEnterHandler = () => { setShouldRenderPopup(true); setShowPopup(true); }; - const handleMouseLeave = () => { + const onMouseLeaveHandler = () => { setShowPopup(false); setTimeout(() => setShouldRenderPopup(false), 300); }; return (
{year} @@ -136,45 +137,41 @@ function EducationBox({ label, value, year, details }) { {value} - {/* Condicionamos la renderización del Popup */} - {shouldRenderPopup && ( -
-

- {t('education-details-title')} -

-

- {details} -

-
-
-
- )} + {/* Renderizar el Popup si es necesario */} + {shouldRenderPopup && }
); } -function ContainerSkill({ label, items = [] }) { - return ( -
-

{label}

-
- {items.map((item, index) => ( - - ))} -
+const Popup = ({ isVisible, title, textContent }) => ( +
+

{title}

+

{textContent}

+
+
+
+); + +const ContainerSkill = ({ label, items = [] }) => ( +
+

{label}

+
+ {items.map((item, index) => ( + + ))}
- ); -} +
+); -function SkillBox({ label, sourceImage, sourceLink }) { +const SkillBox = ({ label, sourceImage, sourceLink }) => { const goToPage = () => window.open(sourceLink, '_blank'); return ( @@ -186,6 +183,4 @@ function SkillBox({ label, sourceImage, sourceLink }) {
); -} - -export default SkillsSection; \ No newline at end of file +} \ No newline at end of file From 77c895e6d54b3342de97ceb00ab329ebba82ab79 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andres=20Felipe=20Londo=C3=B1o=20Campos?= Date: Mon, 25 Nov 2024 15:59:02 -0500 Subject: [PATCH 2/4] Se realizan ajustes de redundancias --- src/App.jsx | 4 ++ src/components/common/NavOptions.jsx | 14 ++---- src/components/sections/ConnectMeSection.jsx | 30 ++++++------ src/components/sections/ProjectsSection.jsx | 49 ++++++++++---------- src/components/sections/SkillsSection.jsx | 27 ++--------- src/main.jsx | 5 +- 6 files changed, 54 insertions(+), 75 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index ac6082d..476d538 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -24,17 +24,21 @@ export default function App() { <>
+ {/* Portada */} + {/* Sobre mí */} + {/* Conocimientos */} + {/* Proyectos */}
diff --git a/src/components/common/NavOptions.jsx b/src/components/common/NavOptions.jsx index a8cf56a..9394c3e 100644 --- a/src/components/common/NavOptions.jsx +++ b/src/components/common/NavOptions.jsx @@ -36,15 +36,7 @@ export default function NavOptions() { <>
- {options.map((option, index) => ( - - ))} + {options.map((option, index) => )}
); @@ -52,7 +44,9 @@ export default function NavOptions() { const OptionControl = ({ value, label, action, className }) => (
- +
); -} \ No newline at end of file +} + +const ImageReference = ({ key, alt, href, icon }) => ( +
  • + + {alt} + +
    • +); diff --git a/src/components/sections/ProjectsSection.jsx b/src/components/sections/ProjectsSection.jsx index b15a02e..dca4d40 100644 --- a/src/components/sections/ProjectsSection.jsx +++ b/src/components/sections/ProjectsSection.jsx @@ -88,35 +88,34 @@ export default function ProjectsSection() { {/* Projects */}
    - {projects.map((project, index) => ())} + {projects.map((project, index) => )}
    ); } -const Cards = ({ title, width, height, link, image, tags }) => { - - return ( - +); \ No newline at end of file diff --git a/src/components/sections/SkillsSection.jsx b/src/components/sections/SkillsSection.jsx index db2c487..9f55af1 100644 --- a/src/components/sections/SkillsSection.jsx +++ b/src/components/sections/SkillsSection.jsx @@ -79,26 +79,12 @@ export default function SkillsSection() { {/* Education */}
    - {educationOptns.map((option, index) => ( - - ))} + {educationOptns.map((option, index) => )}
    {/* Skills */}
    - {ContainerSkillsOptns.map((option, index) => ( - - ))} + {ContainerSkillsOptns.map((option, index) => )}
    @@ -159,14 +145,7 @@ const ContainerSkill = ({ label, items = [] }) => (

    {label}

    - {items.map((item, index) => ( - - ))} + {items.map((item, index) => )}
    ); diff --git a/src/main.jsx b/src/main.jsx index 8f5fb8b..899dcda 100644 --- a/src/main.jsx +++ b/src/main.jsx @@ -7,8 +7,9 @@ import App from './App.jsx' import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -createRoot(document.getElementById('root')).render( +const currentRoot = document.getElementById('root'); +createRoot(currentRoot).render( -) +); From c63b5dd519b1639a46bb8395a043ca2b15cb4faa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andres=20Felipe=20Londo=C3=B1o=20Campos?= Date: Tue, 26 Nov 2024 11:08:30 -0500 Subject: [PATCH 3/4] =?UTF-8?q?Se=20realiza=20actualizaci=C3=B3n=20de=20ar?= =?UTF-8?q?chivos=20JavaScript=20a=20TypeScript?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- custom.d.ts | 19 + index.html | 2 +- package-lock.json | 476 +++++++++++++++++- package.json | 12 +- src/{App.jsx => App.tsx} | 0 src/assets/{index.js => index.ts} | 0 .../{BgAnimation.jsx => BgAnimation.tsx} | 0 .../common/{Border.jsx => Border.tsx} | 0 .../common/{NavOptions.jsx => NavOptions.tsx} | 13 +- ...omponent.jsx => NotificationComponent.tsx} | 25 +- src/components/common/index.js | 6 - src/components/common/index.ts | 6 + src/components/{index.js => index.ts} | 0 ...{AboutMeSection.jsx => AboutMeSection.tsx} | 0 ...nectMeSection.jsx => ConnectMeSection.tsx} | 10 +- .../{HelloSection.jsx => HelloSection.tsx} | 0 ...rojectsSection.jsx => ProjectsSection.tsx} | 51 +- .../{SkillsSection.jsx => SkillsSection.tsx} | 123 ++--- .../sections/{index.js => index.ts} | 0 src/{main.jsx => main.tsx} | 15 +- src/types/general.ts | 1 + src/types/props.ts | 59 +++ tsconfig.json | 37 ++ 23 files changed, 737 insertions(+), 118 deletions(-) create mode 100644 custom.d.ts rename src/{App.jsx => App.tsx} (100%) rename src/assets/{index.js => index.ts} (100%) rename src/components/common/{BgAnimation.jsx => BgAnimation.tsx} (100%) rename src/components/common/{Border.jsx => Border.tsx} (100%) rename src/components/common/{NavOptions.jsx => NavOptions.tsx} (84%) rename src/components/common/{NotificationComponent.jsx => NotificationComponent.tsx} (53%) delete mode 100644 src/components/common/index.js create mode 100644 src/components/common/index.ts rename src/components/{index.js => index.ts} (100%) rename src/components/sections/{AboutMeSection.jsx => AboutMeSection.tsx} (100%) rename src/components/sections/{ConnectMeSection.jsx => ConnectMeSection.tsx} (89%) rename src/components/sections/{HelloSection.jsx => HelloSection.tsx} (100%) rename src/components/sections/{ProjectsSection.jsx => ProjectsSection.tsx} (66%) rename src/components/sections/{SkillsSection.jsx => SkillsSection.tsx} (52%) rename src/components/sections/{index.js => index.ts} (100%) rename src/{main.jsx => main.tsx} (56%) create mode 100644 src/types/general.ts create mode 100644 src/types/props.ts create mode 100644 tsconfig.json 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" /> - + 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 100% rename from src/App.jsx rename to src/App.tsx 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 100% rename from src/components/common/BgAnimation.jsx rename to src/components/common/BgAnimation.tsx diff --git a/src/components/common/Border.jsx b/src/components/common/Border.tsx similarity index 100% rename from src/components/common/Border.jsx rename to src/components/common/Border.tsx diff --git a/src/components/common/NavOptions.jsx b/src/components/common/NavOptions.tsx similarity index 84% rename from src/components/common/NavOptions.jsx rename to src/components/common/NavOptions.tsx index 9394c3e..9f2385f 100644 --- a/src/components/common/NavOptions.jsx +++ b/src/components/common/NavOptions.tsx @@ -1,8 +1,10 @@ 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' }); } @@ -12,7 +14,7 @@ export default function NavOptions() { 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 @@ export default 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') }, @@ -42,12 +44,13 @@ export default function NavOptions() { ); } -const OptionControl = ({ value, label, action, className }) => ( +const OptionControl: React.FC = ({ label, value, className, action }) => (
    ); } -const EducationBox = ({ label, value, year, details }) => { +const EducationBox: React.FC = ({ label, value, year, description }) => { const { t } = useTranslation(); const [showPopup, setShowPopup] = useState(false); const [shouldRenderPopup, setShouldRenderPopup] = useState(false); - const onMouseEnterHandler = () => { + const onMouseEnterHandler = useCallback(() => { setShouldRenderPopup(true); setShowPopup(true); - }; + }, []); - const onMouseLeaveHandler = () => { + const onMouseLeaveHandler = useCallback(() => { setShowPopup(false); setTimeout(() => setShouldRenderPopup(false), 300); - }; + }, []); return (
    { {/* Renderizar el Popup si es necesario */} - {shouldRenderPopup && } + {shouldRenderPopup && }
    ); } -const Popup = ({ isVisible, title, textContent }) => ( +const Popup: React.FC = ({ isVisible, title, textContent }) => (
    (
    ); -const ContainerSkill = ({ label, items = [] }) => ( -
    -

    {label}

    -
    - {items.map((item, index) => )} +const ContainerSkill = React.memo(({ label, skills }: ContainerSkillProps) => { + return ( +
    +

    {label}

    +
    + {skills.map((skill, index) => )} +
    -
    -); + ) +}); -const SkillBox = ({ label, sourceImage, sourceLink }) => { - const goToPage = () => window.open(sourceLink, '_blank'); +const goToPage = (sourceLink: string) => window.open(sourceLink, '_blank'); +const SkillBox = React.memo(({ label, sourceImage, sourceLink }: SkillBoxProps) => { return (
    goToPage(sourceLink)} > - skill + {`Icono
    ); -} \ No newline at end of file +}); \ 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.tsx similarity index 56% rename from src/main.jsx rename to src/main.tsx index 899dcda..77f4df5 100644 --- a/src/main.jsx +++ b/src/main.tsx @@ -7,9 +7,12 @@ import App from './App.jsx' import { StrictMode } from 'react' import { createRoot } from 'react-dom/client' -const currentRoot = document.getElementById('root'); -createRoot(currentRoot).render( - - - -); +const currentRoot = document.getElementById('root') as HTMLElement | null; + +if (currentRoot) { + createRoot(currentRoot).render( + + + + ); +} \ 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 From 63995b3417b4bb879a9d3e26b84671595720ed55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andres=20Felipe=20Londo=C3=B1o=20Campos?= Date: Tue, 26 Nov 2024 11:11:17 -0500 Subject: [PATCH 4/4] Se corrige archivo App.jsx por App.tsx --- src/main.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/main.tsx b/src/main.tsx index 77f4df5..cb30b04 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -3,7 +3,7 @@ import './styles/main.css' import './styles/tailwindInput.css' import './styles/tailwindOutput.css' -import App from './App.jsx' +import App from './App' import { StrictMode } from 'react' import { createRoot } from 'react-dom/client'