From 9567384a3daf95400140fcf759a3f6185c5ac932 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andres=20Felipe=20Londo=C3=B1o=20Campos?=
 <alondono@syc.com.co>
Date: Thu, 21 Nov 2024 15:10:18 -0500
Subject: [PATCH] =?UTF-8?q?Se=20realiza=20atomizaci=C3=B3n=20de=20c=C3=B3d?=
 =?UTF-8?q?igo=20en=20secciones=20repetitivas.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                 |  13 +-
 src/components/common/NavOptions.jsx        |  17 +-
 src/components/contact/ConnectMeSection.jsx |  61 ++++---
 src/components/projects/ProjectsSection.jsx | 187 ++++++++------------
 src/styles/main.css                         |  12 +-
 5 files changed, 135 insertions(+), 155 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 8955cb3..3dfe4a3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,11 +24,14 @@ function App() {
                     <BgAnimation />
                     <NavOptions />
                     <HelloSection />
-                    <div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />
+                    <BorderSection />
+
                     <AboutMeSection />
-                    <div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />
+                    <BorderSection />
+
                     <SkillsSection />
-                    <div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />
+                    <BorderSection />
+
                     <ProjectsSection />
                 </main>
                 <footer className='w-full'>
@@ -39,4 +42,8 @@ function App() {
     );
 }
 
+function BorderSection() {
+    return <div className='border-t border-gray-600 w-[90%] ml-[5%] mr-[5%]' />;
+}
+
 export default App;
\ No newline at end of file
diff --git a/src/components/common/NavOptions.jsx b/src/components/common/NavOptions.jsx
index 43dd26e..a86e158 100644
--- a/src/components/common/NavOptions.jsx
+++ b/src/components/common/NavOptions.jsx
@@ -13,20 +13,13 @@ function NavOptions() {
     };
 
     const changeTheme = () => {
-        const classNameDark = 'dark-theme';
-        document.body.classList.toggle(classNameDark);
+        document.body.classList.toggle('dark-theme');
         showNotification(t('notification-theme-change'));
     }
 
     const goToScroll = (id, position = 'center') => {
         const section = document.getElementById(id);
-        if (section) {
-            section.scrollIntoView(
-                {
-                    block: position,
-                    behavior: 'smooth'
-                });
-        }
+        if (section) section.scrollIntoView({ block: position, behavior: 'smooth' });
     }
 
     const options = [
@@ -61,7 +54,11 @@ function OptionControl({ value, label, action, className }) {
     return (
         <div className='option-navBar'>
             <label className='option md:text-base xs:text-xs'>{label}</label>
-            <button className={`${className} h-[5.5vh] w-[5.5vh] md:h-[5.5vh] md:w-[5vh] xs:h-[4.5vh] xs:w-[4.5vh]`} onClick={action}>{value}</button>
+            <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>
     );
 }
diff --git a/src/components/contact/ConnectMeSection.jsx b/src/components/contact/ConnectMeSection.jsx
index fac392e..570ead5 100644
--- a/src/components/contact/ConnectMeSection.jsx
+++ b/src/components/contact/ConnectMeSection.jsx
@@ -6,32 +6,49 @@ import messageMeIcon from '../../assets/message-me-icon.svg';
 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'>
-                <h2 className='w-full text-7xl font-bold md:text-5xl xs:text-4xl'>
+        <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">
+                <h2 className="w-full text-7xl font-bold md:text-5xl xs:text-4xl">
                     {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">
-                    <li className="transform scale-90 hover:scale-100 duration-200">
-                        <a href="https://github.com/ApidriuC" target="_blank" rel="noopener noreferrer" title="Go to Andrés GitHub" tabIndex="0">
-                            <img className='h-12' alt='source-image' src={gitHubIcon} />
-                        </a>
-                    </li>
-
-                    <li className="transform scale-90 hover:scale-100 duration-200">
-                        <a href="https://www.linkedin.com/in/andr%C3%A9s-felipe-londo%C3%B1o-campos-b03741222/" target="_blank" rel="noopener noreferrer" title="Connect with Juan Cruz on LinkedIn" tabIndex="0">
-                            <img className='h-12' alt='source-image' src={linkedIcon} />
-                        </a>
-                    </li>
-
-                    <li className="transform scale-90 hover:scale-100 duration-200">
-                        <a href="mailto:andresfloncam@gmail.com" target="_blank" rel="noopener noreferrer" title="Send Andrés Felipe Londoño an email" tabIndex="0">
-                            <img className='h-14' alt='source-image' src={messageMeIcon} />
-                        </a>
-                    </li>
+                    {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>
+                    ))}
                 </ul>
-                <p className='w-full'>
+                <p className="w-full">
                     &copy; {t('copyright-text')}
                 </p>
             </div>
@@ -39,4 +56,4 @@ function ConnectMeSection() {
     );
 }
 
-export default ConnectMeSection;
\ No newline at end of file
+export default ConnectMeSection;
diff --git a/src/components/projects/ProjectsSection.jsx b/src/components/projects/ProjectsSection.jsx
index 7cd6a8e..eae62af 100644
--- a/src/components/projects/ProjectsSection.jsx
+++ b/src/components/projects/ProjectsSection.jsx
@@ -20,10 +20,49 @@ import javaImage from '../../assets/Java-Logo.png'
 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]
+        },
+        {
+            title: 'Stream For Labs',
+            link: 'https://github.com/IngDeiver/streams-for-labs-web-client',
+            image: streamLabs,
+            tags: [nodeImage, reactImage, jsImage, tailwindcss, boostrapImage]
+        },
+        {
+            title: 'DDA Bookings',
+            link: 'https://github.com/ApidriuC/DDA-BOOKINGS-Dispositivos-Moviles',
+            image: bookings,
+            tags: [reactImage, jsImage]
+        },
+        {
+            title: 'Dispensador - Casa Libro Total',
+            link: '',
+            image: dispensadorR,
+            tags: [cImage, netImage, jsImage, htmlImage, cssImage, boostrapImage]
+        },
+        {
+            title: t('bingo-project-label'),
+            link: 'https://github.com/ApidriuC/Bingo_Alcaldia_Risaralda',
+            image: bingo,
+            tags: [javaImage]
+        },
+        {
+            title: 'Fox Game',
+            link: 'https://github.com/ApidriuC/FoxGame---Construct3',
+            image: foxGame,
+            tags: [construct3]
+        }
+    ];
+
     return (
         <section id='projects-me' className='h-auto p-20'>
             <div className='h-full w-full flex justify-center items-start flex-wrap'>
-                {/* Titulo */}
+                {/* 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')}
@@ -34,125 +73,45 @@ function ProjectsSection() {
                 </div>
 
                 {/* Projects */}
-                <div className='container-projects m-12 w-full flex items-center justify-center flex-wrap md:gap-40 xs:gap-5 xs:m-0'>
-                    <article className='w-[80vh] h-[75vh] relative rounded-lg hover:rounded-3xl overflow-hidden  duration-[350ms] transition-all ease-expo group 
-                        shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[80vh] md:h-[75vh]'>
-                        <a className='block w-full h-full z-10:' href='https://edeskprisma.syc.com.co/santander' target='_blank'>
-                            <div className='bg-container-1 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={edeskPrisma} alt='source_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-4x1 xs:text-2xl'>EDESK PRISMA</h2>
-                                <img className='object-center h-7' src={cImage} alt='source_img' />
-                                <img className='object-center h-7' src={netImage} alt='source_img' />
-                                <img className='object-center h-7' src={jsImage} alt='source_img' />
-                                <img className='object-center h-7' src={htmlImage} alt='source_img' />
-                                <img className='object-center h-7' src={cssImage} alt='source_img' />
-                                <img className='object-center h-7' src={boostrapImage} alt='source_img' />
-                            </div>
-                        </a>
-                    </article>
-
-                    <article className='w-[60vh] h-[50vh] relative rounded-lg hover:rounded-3xl overflow-hidden  duration-[350ms] transition-all ease-expo group 
-                        shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[60vh] md:h-[50vh]'>
-                        <a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:' href='https://github.com/IngDeiver/streams-for-labs-web-client' target='_blank'>
-                            <div className='bg-container-2 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={streamLabs} alt='source_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-4x1 xs:text-2xl'>Stream For Labs</h2>
-                                <img className='object-center h-7' src={nodeImage} alt='source_img' />
-                                <img className='object-center h-7' src={reactImage} alt='source_img' />
-                                <img className='object-center h-7' src={jsImage} alt='source_img' />
-                                <img className='object-center h-7' src={tailwindcss} alt='source_img' />
-                                <img className='object-center h-7' src={boostrapImage} alt='source_img' />
-                            </div>
-                        </a>
-                    </article>
+                <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>
+    );
+}
 
-                <div className='container-projects m-12 w-full flex items-center justify-center flex-wrap md:gap-40 xs:gap-5 xs:m-5'>
-                    <article className='w-[55vh] h-[55vh] relative rounded-lg hover:rounded-3xl overflow-hidden  duration-[350ms] transition-all ease-expo group 
-                        shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[55vh] md:h-[55vh]'>
-                        <a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:' href='https://github.com/ApidriuC/DDA-BOOKINGS-Dispositivos-Moviles' target='_blank'>
-                            <div className='bg-container-3 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={bookings} alt='source_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-4x1 xs:text-2xl'>DDA Bookings</h2>
-                                <img className='object-center h-7' src={reactImage} alt='source_img' />
-                                <img className='object-center h-7' src={jsImage} alt='source_img' />
-                            </div>
-                        </a>
-                    </article>
-
-                    <article className='w-[95vh] h-[80vh] relative rounded-lg hover:rounded-3xl overflow-hidden  duration-[350ms] transition-all ease-expo group 
-                        shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[95vh] md:h-[80vh]'>
-                        <a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:'>
-                            <div className='bg-container-4 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={dispensadorR} alt='source_img' />
-                            </div>
+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;
 
-                            {/* 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-4x1 xs:text-2xl'>Dispensador - Casa Libro Total</h2>
-                                <img className='object-center h-7' src={cImage} alt='source_img' />
-                                <img className='object-center h-7' src={netImage} alt='source_img' />
-                                <img className='object-center h-7' src={jsImage} alt='source_img' />
-                                <img className='object-center h-7' src={htmlImage} alt='source_img' />
-                                <img className='object-center h-7' src={cssImage} alt='source_img' />
-                                <img className='object-center h-7' src={boostrapImage} alt='source_img' />
-                            </div>
-                        </a>
-                    </article>
+    // 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>
 
-                <div className='container-projects m-12 w-full flex items-center justify-center flex-wrap md:gap-40 xs:gap-5 xs:m-5'>
-                    <article className='w-[95vh] h-[80vh] relative rounded-lg hover:rounded-3xl overflow-hidden  duration-[350ms] transition-all ease-expo group 
-                        shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[95vh] md:h-[80vh]'>
-                        <a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:' href='https://github.com/ApidriuC/Bingo_Alcaldia_Risaralda' target='_blank'>
-                            <div className='bg-container-5 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={bingo} alt='source_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-4x1 xs:text-2xl'>{t('bingo-project-label')}</h2>
-                                <img className='object-center h-7' src={javaImage} alt='source_img' />
-                            </div>
-                        </a>
-                    </article>
-
-                    <article className='w-[55vh] h-[55vh] relative rounded-lg hover:rounded-3xl overflow-hidden  duration-[350ms] transition-all ease-expo group 
-                        shadow-2xl xs:w-[40vh] xs:h-[30vh] md:w-[55vh] md:h-[55vh]'>
-                        <a className='block w-full h-full z-10 rounded-lg group-hover:rounded-3xl:' href='https://github.com/ApidriuC/FoxGame---Construct3' target='_blank'>
-                            <div className='bg-container-6 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={foxGame} alt='source_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'>Fox Game</h2>
-                                <img className='object-center h-7' src={construct3} alt='source_img' />
-                            </div>
-                        </a>
-                    </article>
+                {/* 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>
-            </div>
-        </section>
+            </a>
+        </article>
     );
-}
+};
 
 export default ProjectsSection;
\ No newline at end of file
diff --git a/src/styles/main.css b/src/styles/main.css
index 9e13728..47a76f0 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -219,27 +219,27 @@ body.dark-theme .skill-box:hover a {
     background: linear-gradient(to bottom, #0000000d, #000c 95%);
 }
 
-#projects-me .bg-container-1 {
+#projects-me .container-projects article:nth-child(1) {
     background-image: linear-gradient(to right, rgb(168, 202, 186) 0%, rgb(93, 65, 87));
 }
 
-#projects-me .bg-container-2 {
+#projects-me .container-projects article:nth-child(2) {
     background-image: linear-gradient(60deg, rgb(100, 179, 244) 0%, rgb(194, 229, 156) 100%);
 }
 
-#projects-me .bg-container-3 {
+#projects-me .container-projects article:nth-child(3) {
     background-image: linear-gradient(45deg, rgb(135, 77, 162) 0%, rgb(196, 58, 48) 100%);
 }
 
-#projects-me .bg-container-4 {
+#projects-me .container-projects article:nth-child(4) {
     background-image: linear-gradient(15deg, rgb(19, 84, 122) 0%, rgb(128, 208, 199) 100%);
 }
 
-#projects-me .bg-container-5 {
+#projects-me .container-projects article:nth-child(5) {
     background-image: linear-gradient(to right, rgb(58, 181, 176) 0%, rgb(61, 153, 190) 31%, rgb(86, 49, 122) 100%);
 }
 
-#projects-me .bg-container-6 {
+#projects-me .container-projects article:nth-child(6) {
     background-image: linear-gradient(45deg, rgb(147, 165, 207) 0%, rgb(228, 239, 233) 100%);
 }