refactor: update ESLint configuration, improve ProjectsGallery compon…

…ent, 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
Rodriiandino · Sep 27, 2024 · d0e7c97 · d0e7c97
1 parent b317c0a
commit d0e7c97
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 74 deletions.
diff --git 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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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.`,