Merge feature_dev into pruebas

ApidriuC · Nov 22, 2024 · 3a6d8dc · 3a6d8dc
2 parents de7b2cc + bb0451f
commit 3a6d8dc
Show file tree

Hide file tree

Showing 17 changed files with 209 additions and 134 deletions.
diff --git a/index.html b/index.html
@@ -2,15 +2,41 @@
 <html lang="es">
 
 <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/png" href="/src/assets/icon-portfolio.png" />
+    <!-- Basic meta -->
+    <meta charSet="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="robots" content="index, follow" />
     <title>My Portfolio</title>
+
+    <!-- Meta description for SEO -->
+    <meta name="description"
+        content="Portfolio web de Andrés Felipe Londoño, donde muestro mis proyectos, habilidades en desarrollo de software y tecnologías utilizadas. Soy un desarrollador Full-Stack con experiencia en JavaScript, React, .NET, C# y más." />
+
+    <!-- Open Graph to social media -->
+    <meta property="og:title" content="Portafolio de Andrés Felipe Londoño" />
+    <meta property="og:description"
+        content="Muestra tus habilidades como desarrollador Full-Stack y los proyectos más destacados de tu carrera." />
+    <meta property="og:image"
+        content="https://github.com/user-attachments/assets/95132c51-0f61-47df-9a26-17f8fa9d3a2a" />
+    <meta property="og:url" content="https://apidriuc.github.io/Developer-Portfolio/" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Portafolio de Andrés Felipe Londoño" />
+    <meta name="twitter:description"
+        content="Muestra tus habilidades como desarrollador Full-Stack y los proyectos más destacados de tu carrera." />
+    <meta name="twitter:image"
+        content="https://github.com/user-attachments/assets/95132c51-0f61-47df-9a26-17f8fa9d3a2a" />
+
+    <!-- Scripts -->
+    <script type="module" src="/src/main.jsx"></script>
+
+    <!-- Links -->
+    <link rel="icon" type="image/png" href="/src/assets/icon-portfolio.png" />
 </head>
 
 <body class="dark-theme">
     <div id="root" class="w-full max-w-full h-full"></div>
-    <script type="module" src="/src/main.jsx"></script>
 </body>
 
 </html>
diff --git a/src/App.jsx b/src/App.jsx
@@ -1,13 +1,16 @@
 import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import BgAnimation from './components/utils/BgAnimation.jsx';
-import NavOptions from './components/common/NavOptions.jsx';
-import HelloSection from './components/home/HelloSection.jsx';
-import SkillsSection from './components/skills/SkillsSection.jsx';
-import AboutMeSection from './components/resume/AboutMeSection.jsx';
-import ProjectsSection from './components/projects/ProjectsSection.jsx';
-import ConnectMeSection from './components/contact/ConnectMeSection.jsx';
-import { NotificationProvider } from './components/common/NotificationComponent.jsx';
+import {
+    Border,
+    NavOptions,
+    BgAnimation,
+    HelloSection,
+    SkillsSection,
+    AboutMeSection,
+    ProjectsSection,
+    ConnectMeSection,
+    NotificationProvider
+} from './components';
 
 function App() {
     const { t, i18n } = useTranslation();
@@ -24,13 +27,13 @@ function App() {
                     <BgAnimation />
                     <NavOptions />
                     <HelloSection />
-                    <BorderSection />
+                    <Border />
 
                     <AboutMeSection />
-                    <BorderSection />
+                    <Border />
 
                     <SkillsSection />
-                    <BorderSection />
+                    <Border />
 
                     <ProjectsSection />
                 </main>
@@ -42,8 +45,4 @@ function App() {
     );
 }
 
-function BorderSection() {
-    return <div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />;
-}
-
 export default App;
diff --git a/src/assets/index.js b/src/assets/index.js
@@ -0,0 +1,28 @@
+export { default as cSharpImage } from '../assets/logo-c.svg';
+export { default as netFrameworkImage } from '../assets/net-frame.png';
+export { default as reactImage } from '../assets/react-logo.png';
+export { default as streamLabsImage } from '../assets/stream-labs.png';
+export { default as nodeJsImage } from '../assets/nodejs-white.png';
+export { default as javascriptImage } from '../assets/logo-javascript.png';
+export { default as htmlImage } from '../assets/icon-html.jpg';
+export { default as styleSheetImage } from '../assets/logo-css.png';
+export { default as boostrapImage } from '../assets/logo-boostrap.svg';
+export { default as edeskPrismaImage } from '../assets/edesk-prisma.png';
+export { default as foxGameImage } from '../assets/FOXGAME.png';
+export { default as construct3Image } from '../assets/construct3.jpg';
+export { default as bookingsImage } from '../assets/DDABOOKING.png';
+export { default as tailwindcssImage } from '../assets/logo-tailwind.png';
+export { default as dispensadorImage } from '../assets/dispensador-registro.png';
+export { default as bingoImage } from '../assets/bingoResultado.png';
+export { default as javaImage } from '../assets/Java-Logo.png';
+export { default as vsCodeImage } from '../assets/vsco-logo.jpg';
+export { default as typeScriptImage } from '../assets/logo-typescript.png';
+export { default as pythonImage } from '../assets/python-logo.png';
+export { default as sqlImage } from '../assets/sql-logo.png';
+export { default as oracleImage } from '../assets/oracle-logo.svg';
+export { default as visualImage } from '../assets/visual-logo.png';
+export { default as gitImage } from '../assets/git-logo.png';
+export { default as gitHubImage } from '../assets/github-icon.svg';
+export { default as linkedImage } from '../assets/linkedln-icon.svg';
+export { default as messageMeImage } from '../assets/message-me-icon.svg';
+export { default as MeImage } from '../assets/me-image-profile.jpeg';
diff --git a/src/styles/components/BgAnimation.css → src/components/common/BgAnimation.css b/src/styles/components/BgAnimation.css → src/components/common/BgAnimation.css
diff --git a/src/components/utils/BgAnimation.jsx → src/components/common/BgAnimation.jsx b/src/components/utils/BgAnimation.jsx → src/components/common/BgAnimation.jsx
@@ -1,4 +1,4 @@
-import '../../styles/components/BgAnimation.css';
+import './BgAnimation.css';
 
 function BgAnimation() {
     return (

diff --git a/src/components/common/Border.jsx b/src/components/common/Border.jsx
@@ -0,0 +1,5 @@
+function Border() {
+    return <div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />;
+}
+
+export default Border;
diff --git a/src/styles/components/NavOptions.css → src/components/common/NavOptions.css b/src/styles/components/NavOptions.css → src/components/common/NavOptions.css
diff --git a/src/components/common/NavOptions.jsx b/src/components/common/NavOptions.jsx
@@ -1,6 +1,11 @@
-import '../../styles/components/NavOptions.css';
+import './NavOptions.css';
 import { useTranslation } from 'react-i18next';
-import { useNotification } from './NotificationComponent.jsx';
+import { useNotification } from '../common';
+
+const goToScroll = (id, position = 'center') => {
+    const section = document.getElementById(id);
+    if (section) section.scrollIntoView({ block: position, behavior: 'smooth' });
+}
 
 function NavOptions() {
     const { t, i18n } = useTranslation();
@@ -17,11 +22,6 @@ function NavOptions() {
         showNotification(t('notification-theme-change'));
     }
 
-    const goToScroll = (id, position = 'center') => {
-        const section = document.getElementById(id);
-        if (section) section.scrollIntoView({ block: position, behavior: 'smooth' });
-    }
-
     const options = [
         { className: 'icon-character', label: t('option-home-label'), action: () => goToScroll('intro') },
         { className: 'icon-person', label: t('option-about-me-label'), action: () => goToScroll('about-me') },

diff --git a/src/components/common/index.js b/src/components/common/index.js
@@ -0,0 +1,6 @@
+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'; 
diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1,2 @@
+export * from './common';
+export * from './sections';
diff --git a/src/components/resume/AboutMeSection.jsx → src/components/sections/AboutMeSection.jsx b/src/components/resume/AboutMeSection.jsx → src/components/sections/AboutMeSection.jsx
@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import MeImage from '../../assets/me-image-profile.jpeg';
+import { MeImage } from '../../assets';
 
 function AboutMeSection() {
     const { t } = useTranslation();

diff --git a/src/components/contact/ConnectMeSection.jsx → src/components/sections/ConnectMeSection.jsx b/src/components/contact/ConnectMeSection.jsx → src/components/sections/ConnectMeSection.jsx
@@ -1,32 +1,30 @@
 import { useTranslation } from 'react-i18next';
-import gitHubIcon from '../../assets/github-icon.svg';
-import linkedIcon from '../../assets/linkedln-icon.svg';
-import messageMeIcon from '../../assets/message-me-icon.svg';
+import { gitHubImage, linkedImage, messageMeImage } from '../../assets';
+
+const links = [
+    {
+        href: "https://github.com/ApidriuC",
+        alt: "Go to Andrés GitHub",
+        icon: gitHubImage,
+        title: "GitHub"
+    },
+    {
+        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"
+    },
+    {
+        href: "mailto:andresfloncam@gmail.com",
+        alt: "Send Andrés an email",
+        icon: messageMeImage,
+        title: "Email"
+    }
+];
 
 function ConnectMeSection() {
     const { t } = useTranslation();
 
-    const links = [
-        {
-            href: "https://github.com/ApidriuC",
-            alt: "Go to Andrés GitHub",
-            icon: gitHubIcon,
-            title: "GitHub"
-        },
-        {
-            href: "https://www.linkedin.com/in/andr%C3%A9s-felipe-londo%C3%B1o-campos-b03741222/",
-            alt: "Connect with Andrés on LinkedIn",
-            icon: linkedIcon,
-            title: "LinkedIn"
-        },
-        {
-            href: "mailto:andresfloncam@gmail.com",
-            alt: "Send Andrés an email",
-            icon: messageMeIcon,
-            title: "Email"
-        }
-    ];
-
     return (
         <section id="contact-me" className="w-full h-[100vh] rounded-t-3xl">
             <div className="h-full w-full p-40 flex justify-center content-center items-center flex-wrap gap-5 xs:p-5">

diff --git a/src/components/home/HelloSection.jsx → src/components/sections/HelloSection.jsx b/src/components/home/HelloSection.jsx → src/components/sections/HelloSection.jsx
diff --git a/src/components/projects/ProjectsSection.jsx → src/components/sections/ProjectsSection.jsx b/src/components/projects/ProjectsSection.jsx → src/components/sections/ProjectsSection.jsx
@@ -1,61 +1,63 @@
 import { useTranslation } from 'react-i18next';
-import cImage from '../../assets/logo-c.svg'
-import netImage from '../../assets/net-frame.png';
-import reactImage from '../../assets/react-logo.png';
-import streamLabs from '../../assets/stream-labs.png';
-import nodeImage from '../../assets/nodejs-white.png';
-import jsImage from '../../assets/logo-javascript.png';
-import htmlImage from '../../assets/icon-html.jpg'
-import cssImage from '../../assets/logo-css.png'
-import boostrapImage from '../../assets/logo-boostrap.svg'
-import edeskPrisma from '../../assets/edesk-prisma.png'
-import foxGame from '../../assets/FOXGAME.png'
-import construct3 from '../../assets/construct3.jpg'
-import bookings from '../../assets/DDABOOKING.png'
-import tailwindcss from '../../assets/logo-tailwind.png'
-import dispensadorR from '../../assets/dispensador-registro.png'
-import bingo from '../../assets/bingoResultado.png'
-import javaImage from '../../assets/Java-Logo.png'
+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/santander',
-            image: edeskPrisma,
-            tags: [cImage, netImage, jsImage, htmlImage, cssImage, boostrapImage]
+            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: streamLabs,
-            tags: [nodeImage, reactImage, jsImage, tailwindcss, boostrapImage]
+            image: streamLabsImage,
+            tags: [nodeJsImage, reactImage, javascriptImage, tailwindcssImage, boostrapImage]
         },
         {
             title: 'DDA Bookings',
             link: 'https://github.com/ApidriuC/DDA-BOOKINGS-Dispositivos-Moviles',
-            image: bookings,
-            tags: [reactImage, jsImage]
+            image: bookingsImage,
+            tags: [reactImage, javascriptImage]
         },
         {
             title: 'Dispensador - Casa Libro Total',
             link: '',
-            image: dispensadorR,
-            tags: [cImage, netImage, jsImage, htmlImage, cssImage, boostrapImage]
+            image: dispensadorImage,
+            tags: [cSharpImage, netFrameworkImage, javascriptImage, htmlImage, styleSheetImage, boostrapImage]
         },
         {
             title: t('bingo-project-label'),
             link: 'https://github.com/ApidriuC/Bingo_Alcaldia_Risaralda',
-            image: bingo,
+            image: bingoImage,
             tags: [javaImage]
         },
         {
             title: 'Fox Game',
             link: 'https://github.com/ApidriuC/FoxGame---Construct3',
-            image: foxGame,
-            tags: [construct3]
+            image: foxGameImage,
+            tags: [construct3Image]
         }
     ];
 
@@ -87,6 +89,7 @@ const Cards = ({ title, link, image, tags }) => {
 
     // 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={{
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './common';
		export * from './sections';