From d0e7c971d6e3b0c1ab1cdc46273d7ba60b6a43d9 Mon Sep 17 00:00:00 2001
From: RodriiAndino <andinorodrigo03@gmail.com>
Date: Fri, 27 Sep 2024 11:48:21 -0300
Subject: [PATCH] refactor: update ESLint configuration, improve
 ProjectsGallery component, and enhance styles

- Changed module.exports to export const in .eslintrc.js
- Updated ProjectsGallery to use dataset for technology filtering
- Improved SVG favicon design
- Adjusted CSS styles for better layout and animations
- Modified project features in JSON files for clarity
- Refined UI text for better readability
---
 .eslintrc.js                                  | 84 +++++++++----------
 public/favicon.svg                            | 21 ++++-
 src/components/Projects/ProjectsGallery.jsx   |  6 +-
 .../Projects/styles/projects-gallery-card.css | 45 +++++-----
 .../Projects/styles/projects-gallery.css      |  6 +-
 src/data/projects_en.json                     |  2 +-
 src/data/projects_es.json                     |  2 +-
 src/i18n/ui.js                                |  6 +-
 8 files changed, 98 insertions(+), 74 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index fe69def..b158ef3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,45 +1,43 @@
-module.exports = {
-  overrides: [
-    {
-      extends: [
-        'eslint:recommended',
-        'plugin:prettier/recommended',
-        'plugin:astro/recommended'
-      ],
-      files: ['*.astro'],
-      plugins: ['astro'],
-      env: {
-        node: true,
-        'astro/astro': true,
-        es2020: true
-      },
-      parser: 'astro-eslint-parser',
-      parserOptions: {
-        parser: '@typescript-eslint/parser',
-        extraFileExtensions: ['.astro'],
-        sourceType: 'module'
-      },
-      rules: {
-        'astro/no-conflict-set-directives': 'error',
-        'astro/no-unused-define-vars-in-style': 'error'
-      }
+export const overrides = [
+  {
+    extends: [
+      'eslint:recommended',
+      'plugin:prettier/recommended',
+      'plugin:astro/recommended'
+    ],
+    files: ['*.astro'],
+    plugins: ['astro'],
+    env: {
+      node: true,
+      'astro/astro': true,
+      es2020: true
     },
-    {
-      files: ['**/*.astro/*.js', '*.astro/*.js'],
-      env: {
-        browser: true,
-        es2020: true
-      },
-      parserOptions: {
-        sourceType: 'module'
-      },
-      rules: {
-        'prettier/prettier': 'error',
-        'astro/known-attributes': 'warn',
-        'astro/no-raw-text': 'warn',
-        'astro/require-lang': 'warn',
-        'astro/sort-attributes': 'warn'
-      }
+    parser: 'astro-eslint-parser',
+    parserOptions: {
+      parser: '@typescript-eslint/parser',
+      extraFileExtensions: ['.astro'],
+      sourceType: 'module'
+    },
+    rules: {
+      'astro/no-conflict-set-directives': 'error',
+      'astro/no-unused-define-vars-in-style': 'error'
+    }
+  },
+  {
+    files: ['**/*.astro/*.js', '*.astro/*.js'],
+    env: {
+      browser: true,
+      es2020: true
+    },
+    parserOptions: {
+      sourceType: 'module'
+    },
+    rules: {
+      'prettier/prettier': 'error',
+      'astro/known-attributes': 'warn',
+      'astro/no-raw-text': 'warn',
+      'astro/require-lang': 'warn',
+      'astro/sort-attributes': 'warn'
     }
-  ]
-}
+  }
+]
diff --git a/public/favicon.svg b/public/favicon.svg
index f157bd1..2bc8909 100644
--- a/public/favicon.svg
+++ b/public/favicon.svg
@@ -1,9 +1,24 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 128 128">
-    <path d="M50.4 78.5a75.1 75.1 0 0 0-28.5 6.9l24.2-65.7c.7-2 1.9-3.2 3.4-3.2h29c1.5 0 2.7 1.2 3.4 3.2l24.2 65.7s-11.6-7-28.5-7L67 45.5c-.4-1.7-1.6-2.8-2.9-2.8-1.3 0-2.5 1.1-2.9 2.7L50.4 78.5Zm-1.1 28.2Zm-4.2-20.2c-2 6.6-.6 15.8 4.2 20.2a17.5 17.5 0 0 1 .2-.7 5.5 5.5 0 0 1 5.7-4.5c2.8.1 4.3 1.5 4.7 4.7.2 1.1.2 2.3.2 3.5v.4c0 2.7.7 5.2 2.2 7.4a13 13 0 0 0 5.7 4.9v-.3l-.2-.3c-1.8-5.6-.5-9.5 4.4-12.8l1.5-1a73 73 0 0 0 3.2-2.2 16 16 0 0 0 6.8-11.4c.3-2 .1-4-.6-6l-.8.6-1.6 1a37 37 0 0 1-22.4 2.7c-5-.7-9.7-2-13.2-6.2Z" />
+<svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 40 40'
+    fill='none'
+>
+    <path
+    d='M21.6666 25.6667C21.6666 22.21 21.6666 20.4817 22.765 19.4067C23.8633 18.3333 25.6316 18.3333 29.1666 18.3333C32.7016 18.3333 34.47 18.3333 35.5683 19.4067C36.6666 20.4833 36.6666 22.21 36.6666 25.6667V29.3333C36.6666 32.79 36.6666 34.5183 35.5683 35.5933C34.47 36.6667 32.7016 36.6667 29.1666 36.6667C25.6316 36.6667 23.8633 36.6667 22.765 35.5933C21.6666 34.5167 21.6666 32.79 21.6666 29.3333V25.6667Z'
+    fill='#F3F4F6'
+    />
+    <path
+    d='M3.33337 14.3333C3.33337 17.79 3.33337 19.5183 4.43171 20.5933C5.53004 21.6667 7.29837 21.6667 10.8334 21.6667C14.3684 21.6667 16.1367 21.6667 17.235 20.5933C18.3334 19.5167 18.3334 17.79 18.3334 14.3333V10.6667C18.3334 7.21001 18.3334 5.48168 17.235 4.40668C16.1367 3.33334 14.3684 3.33334 10.8334 3.33334C7.29837 3.33334 5.53004 3.33334 4.43171 4.40668C3.33337 5.48334 3.33337 7.21001 3.33337 10.6667V14.3333ZM21.6667 9.16668C21.6667 7.35501 21.6667 6.45001 21.9517 5.73334C22.3229 4.79092 23.053 4.0344 23.9817 3.63001C24.67 3.33334 25.545 3.33334 27.2917 3.33334H31.0417C32.7884 3.33334 33.6634 3.33334 34.3517 3.63001C35.27 4.02334 36.0017 4.78001 36.3817 5.73334C36.6667 6.45001 36.6667 7.35501 36.6667 9.16668C36.6667 10.9783 36.6667 11.8833 36.3817 12.6C36.0105 13.5424 35.2804 14.299 34.3517 14.7033C33.6634 15 32.7884 15 31.0417 15H27.2917C25.545 15 24.67 15 23.9817 14.7033C23.053 14.299 22.3229 13.5424 21.9517 12.6C21.6667 11.8833 21.6667 10.9783 21.6667 9.16668Z'
+    fill='#C7EEFF'
+    />
+    <path
+    d='M3.33337 30.8333C3.33337 32.645 3.33337 33.55 3.61837 34.2667C3.98957 35.2091 4.71971 35.9656 5.64837 36.37C6.33671 36.6667 7.21171 36.6667 8.95837 36.6667H12.7084C14.455 36.6667 15.33 36.6667 16.0184 36.37C16.9367 35.9767 17.6684 35.22 18.0484 34.2667C18.3334 33.55 18.3334 32.645 18.3334 30.8333C18.3334 29.0217 18.3334 28.1167 18.0484 27.4C17.6772 26.4576 16.947 25.7011 16.0184 25.2967C15.33 25 14.455 25 12.7084 25H8.95837C7.21171 25 6.33671 25 5.64837 25.2967C4.73004 25.69 3.99837 26.4467 3.61837 27.4C3.33337 28.1167 3.33337 29.0217 3.33337 30.8333Z'
+    fill='#F3F4F6'
+    />
     <style>
         path { fill: #000; }
         @media (prefers-color-scheme: dark) {
             path { fill: #FFF; }
         }
     </style>
-</svg>
+</svg>
\ No newline at end of file
diff --git a/src/components/Projects/ProjectsGallery.jsx b/src/components/Projects/ProjectsGallery.jsx
index 3bf0a57..38db483 100644
--- a/src/components/Projects/ProjectsGallery.jsx
+++ b/src/components/Projects/ProjectsGallery.jsx
@@ -35,7 +35,8 @@ export default function ProjectsGallery({ projects, locale }) {
   }
 
   const handleFilterClick = event => {
-    const technology = event.target.textContent
+    const technology = event.currentTarget.dataset.technology
+
     handleFilter(technology)
     handleShowFilter()
   }
@@ -88,11 +89,14 @@ export default function ProjectsGallery({ projects, locale }) {
             <button
               className='projects__filter-list-item'
               onClick={handleFilterClick}
+              data-technology='All'
             >
               All
             </button>
             {uniqueTechnologies.map(technology => (
               <button
+                key={technology}
+                data-technology={technology}
                 className='projects__filter-list-item'
                 onClick={handleFilterClick}
               >
diff --git a/src/components/Projects/styles/projects-gallery-card.css b/src/components/Projects/styles/projects-gallery-card.css
index ccb3e16..6629bd5 100644
--- a/src/components/Projects/styles/projects-gallery-card.css
+++ b/src/components/Projects/styles/projects-gallery-card.css
@@ -7,22 +7,29 @@
 }
 
 @keyframes revele {
-	entry 0%  {
-		opacity: 0; transform: translateY(100px); scale: 0.8;
-	}
-	entry 100%  {
-		opacity: 1; transform: translateY(0); scale: 1;
-	}
-
-	exit 0% {
-		opacity: 1; transform: translateY(0); scale: 1;
-	}
-	exit 100% {
-		opacity: 0; transform: translateY(100px); scale: 0.8;
-	}
+  entry 0% {
+    opacity: 0;
+    transform: translateY(100px);
+    scale: 0.8;
+  }
+  entry 100% {
+    opacity: 1;
+    transform: translateY(0);
+    scale: 1;
+  }
+
+  exit 0% {
+    opacity: 1;
+    transform: translateY(0);
+    scale: 1;
+  }
+  exit 100% {
+    opacity: 0;
+    transform: translateY(100px);
+    scale: 0.8;
+  }
 }
 
-
 .gallery__img {
   border-radius: var(--border-radius);
   margin-bottom: 20px;
@@ -38,12 +45,12 @@
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding: 1.5rem;
+  padding: 1rem;
   border-radius: var(--border-radius);
   background: linear-gradient(
     180deg,
     var(--black-transparent-02) 20%,
-    var(--black-transparent-08) 75%
+    var(--black-transparent-08) 60%
   );
   transition: all 0.3s ease-in-out;
   overflow: hidden;
@@ -56,7 +63,7 @@
 }
 
 .item__title {
-  font-size: var(--step-1);
+  font-size: var(--step-0);
   font-weight: 700;
 }
 
@@ -80,7 +87,7 @@
 }
 
 .item__description {
-  font-size: var(--step-0);
+  font-size: var(--step--1);
   font-weight: 500;
   line-height: 1.2;
   color: var(--white);
@@ -96,7 +103,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 0.5rem;
+  margin-top: 0.3rem;
   padding: 0;
 }
 
diff --git a/src/components/Projects/styles/projects-gallery.css b/src/components/Projects/styles/projects-gallery.css
index 5051f2b..e948de2 100644
--- a/src/components/Projects/styles/projects-gallery.css
+++ b/src/components/Projects/styles/projects-gallery.css
@@ -79,6 +79,8 @@
   z-index: 1;
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
   width: 250px;
   filter: opacity(0.9);
   animation: slideIn 0.3s ease-in-out;
@@ -98,12 +100,12 @@
 
 .projects__filter-list button {
   display: block;
+  width: 50%;
   background: none;
   border: none;
-  padding: 0.5rem 1rem;
+  padding: 0.5rem 0.8rem;
   margin: 0;
   cursor: pointer;
-  text-align: left;
   font-size: var(--step--1);
   font-weight: 700;
   color: var(--dark-background);
diff --git a/src/data/projects_en.json b/src/data/projects_en.json
index a95215f..435b09d 100644
--- a/src/data/projects_en.json
+++ b/src/data/projects_en.json
@@ -12,7 +12,7 @@
       "Migration control with Flyway",
       "Sending emails with JavaMailSender"
     ],
-    "features": "Personal Project",
+    "features": "Learning",
     "date": "2024",
     "technologies": [
       "Java",
diff --git a/src/data/projects_es.json b/src/data/projects_es.json
index 72f04a1..349a08f 100644
--- a/src/data/projects_es.json
+++ b/src/data/projects_es.json
@@ -12,7 +12,7 @@
       "Control de migraciones con Flyway",
       "Envío de correos electrónicos con JavaMailSender"
     ],
-    "features": "Proyecto Personal",
+    "features": "Aprendizaje",
     "date": "2024",
     "technologies": [
       "Java",
diff --git a/src/i18n/ui.js b/src/i18n/ui.js
index 33b6c49..7400354 100644
--- a/src/i18n/ui.js
+++ b/src/i18n/ui.js
@@ -40,8 +40,7 @@ export const ui = {
     'skills.backend': 'Back-end',
     'skills.database': 'Base de datos',
     'skills.other': 'Otras',
-    'contact.paragraph.1': `Hey, soy un estudiante en licenciatura de informática
-    en la universidad siglo 21, quien disfruta del desarrollo de software
+    'contact.paragraph.1': `Hey, soy un estudiante en licenciatura de informática, quien disfruta del desarrollo de software
     y de las actividades físicas llevando una vida saludable.`,
     'contact.paragraph.2': `Me considero una persona tranquila que disfruta de la vida y de seguir
     aprendiendo cada día. Para mí, la programación es una herramienta
@@ -92,8 +91,7 @@ export const ui = {
     'skills.backend': 'Back-end',
     'skills.database': 'Database',
     'skills.other': 'Other',
-    'contact.paragraph.1': `Hey, I'm a student in computer science degree at the
-    university siglo 21, who enjoys software development and physical activities leading a healthy life.`,
+    'contact.paragraph.1': `Hey, I'm a student in computer science degree, who enjoys software development and physical activities leading a healthy life.`,
     'contact.paragraph.2': `I consider myself a calm person who enjoys life and continues to
     learning every day. For me, programming is a powerful tool to create solutions that improve people's lives and I am always willing to take on new challenges and projects.`,
     'contact.paragraph.3': `If you have any questions or want to work with me, do not hesitate to contact me.`,