Merge branch 'main' into dev

src/components/About.astro

@@ -22,7 +22,7 @@ const YEARS_OLD = new Date().getFullYear() - 2001;
     </div>
     <div class="image">
       <figure>
-        <img src="programming.jpg" alt="programming-image">
+        <img src="programming.webp" alt="programming-image">
       </figure>
     </div>
   </div>

src/components/Contact.astro

@@ -27,10 +27,10 @@ import {
       </div>
       <div class="buttons">
         <a href={`mailto:${EMAIL_URL}`} class="btn icon" aria-label="Send email">
-          <SendIcon width={28} height={28} />
+          <SendIcon width={26} height={26} />
         </a>
         <button class="btn icon copy" aria-label="Copy email">
-          <CopyIcon width={28} height={28} />
+          <CopyIcon width={26} height={26} />
         </button>
       </div>
     </div>
@@ -144,16 +144,23 @@ import {
   }
 
   .email-wrapper .email {
-    padding: 0.8rem 1.2rem;
+    padding: 9px 16px;
+    height: 44px;
     background-color: var(--bg-color-button);
     border-radius: 0.5rem;
     color: var(--font-color);
     border: 1px solid var(--border-color);
-    font-size: 22px;
+    font-size: 18px;
     font-weight: 500;
     width: 100%;
     overflow: hidden;
+  }
+
+  .email-wrapper .email span {
+    display: block;
+    overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .email-wrapper .buttons {
@@ -199,7 +206,7 @@ import {
     }
 
     .email-wrapper .email {
-      font-size: 18px;
+      font-size: 16px;
     }
   }
 </style>

src/components/Hero.astro

@@ -28,7 +28,7 @@ import { GITHUB_URL, LINKEDIN_URL } from '@constants/urls.ts';
     </div>
   </div>
   <figure>
-    <img src="me.jpg" alt="profile-image" class="profile">
+    <img src="me.webp" alt="profile-image" class="profile">
   </figure>
 </section>
 

src/components/Portfolio.astro

@@ -38,15 +38,15 @@ import projects from '@data/projects.json';
                 href={project.urlGithub}
                 aria-label="github-repository"
                 >
-                Código <GithubIcon width={28} height={28}/>
+                Código <GithubIcon width={26} height={26}/>
               </a>
               <a
                   class="btn icon"
                   target="_blank"
                   href={project.urlProduction}
                   aria-label="project-demo"
                 >
-                Demo <ExternalIcon width={28} height={28} />
+                Demo <ExternalIcon width={26} height={26} />
               </a>
             </div>
           </div>
@@ -158,6 +158,7 @@ import projects from '@data/projects.json';
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    gap: 1rem;
   }
 
   .description .links .btn {
@@ -168,9 +169,7 @@ import projects from '@data/projects.json';
     border-radius: 0.5rem;
     background-color: var(--bg-color-button-2);
     color: var(--bg-color);
-    font-size: 1.2rem;
     font-weight: 600;
-    margin-right: 1rem;
     transition: all 0.3s ease;
     gap: 0.5rem;
   }

src/data/projects.json

@@ -2,102 +2,102 @@
   {
     "name": "Cloud Box",
     "description": "This is a simple cloud storage service that allows users to upload and download files. Here you can also create folders and subfolders to organize your files",
-    "image": "https://res.cloudinary.com/dfeujtobk/image/upload/v1705527264/Portfolio/726shots_so_bjwehm.png",
+    "image": "images/portfolio/cloud-box.webp",
     "technologies": [
-      { "name": "Angular", "image": "angular.png" },
-      { "name": "NodeJs", "image": "nodejs.png" },
-      { "name": "MongoDB", "image": "mongo.png" },
-      { "name": "Docker", "image": "docker.png" }
+      { "name": "Angular", "image": "angular.webp" },
+      { "name": "NodeJs", "image": "nodejs.webp" },
+      { "name": "MongoDB", "image": "mongo.webp" },
+      { "name": "Docker", "image": "docker.webp" }
     ],
     "urlGithub": "https://github.com/marcode24/cloudbox-frontend",
     "urlProduction": "https://cloudbox-m.netlify.app/"
   },
   {
     "name": "InfoReader App",
     "description": "This is a web application that allows you to read technology news, using RSS feeds from different sources and saving them in a database. It also allows you to create a user account and save your favorite news.",
-    "image": "https://res.cloudinary.com/dfeujtobk/image/upload/v1705811570/Portfolio/504shots_so_imzfwr.png",
+    "image": "images/portfolio/inforeader.webp",
     "technologies": [
-      { "name": "Angular", "image": "angular.png" },
-      { "name": "NodeJs", "image": "nodejs.png" },
-      { "name": "MongoDB", "image": "mongo.png" },
-      { "name": "Docker", "image": "docker.png" }
+      { "name": "Angular", "image": "angular.webp" },
+      { "name": "NodeJs", "image": "nodejs.webp" },
+      { "name": "MongoDB", "image": "mongo.webp" },
+      { "name": "Docker", "image": "docker.webp" }
     ],
     "urlGithub": "https://github.com/marcode24/InfoReader-App",
     "urlProduction": "https://inforeader.netlify.app/"
   },
   {
     "name": "Smart Dental",
     "description": "This application allows you to manage a dental clinic, it allows you to guide a history of the patient, manage the appointments, inventory, employees and patients.",
-    "image": "https://res.cloudinary.com/dfeujtobk/image/upload/v1705811699/Portfolio/216shots_so_ixmmow.png",
+    "image": "images/portfolio/smart-dental.webp",
     "technologies": [
-      { "name": "Angular", "image": "angular.png" },
-      { "name": "NestJs", "image": "nestjs.png" },
-      { "name": "MySQL", "image": "mysql.png" },
-      { "name": "Docker", "image": "docker.png" }
+      { "name": "Angular", "image": "angular.webp" },
+      { "name": "NestJs", "image": "nestjs.webp" },
+      { "name": "MySQL", "image": "mysql.webp" },
+      { "name": "Docker", "image": "docker.webp" }
     ],
     "urlGithub": "https://github.com/marcode24/smart-dental-frontend",
-    "urlProduction": "https://smart-dental-a704f.web.app/"
+    "urlProduction": "https://smart-dental.netlify.app/"
   },
   {
     "name": "Bon Appetito App",
     "description": "Here you can buy or build your own pizza, choose the ingredients and the size of the pizza, and then you can order it.",
-    "image": "https://res.cloudinary.com/dfeujtobk/image/upload/v1705812238/Portfolio/768shots_so_eay7aj.png",
+    "image": "images/portfolio/bon-appetito.webp",
     "technologies": [
-      { "name": "Angular", "image": "angular.png" },
-      { "name": "TypeScript", "image": "ts.png" },
-      { "name": "SASS", "image": "sass.png" },
-      { "name": "HTML", "image": "html.png" }
+      { "name": "Angular", "image": "angular.webp" },
+      { "name": "TypeScript", "image": "ts.webp" },
+      { "name": "SASS", "image": "sass.webp" },
+      { "name": "HTML", "image": "html.webp" }
     ],
     "urlGithub": "https://github.com/marcode24/bon-appetito",
     "urlProduction": "https://bon-appetito.netlify.app/"
   },
   {
     "name": "Guess Word Game",
     "description": "This a game where you have to guess the answer to a question. Depending on the difficulty level, you will have a certain number of attempts to guess the answer. The game ends when you run out of attempts or you guess the answer correctly",
-    "image": "https://res.cloudinary.com/dfeujtobk/image/upload/v1705958849/Portfolio/qbvnsvant4lberbsvcob.png",
+    "image": "images/portfolio/guess-word.webp",
     "technologies": [
-      { "name": "Angular", "image": "angular.png" },
-      { "name": "NodeJs", "image": "nodejs.png" },
-      { "name": "SASS", "image": "sass.png" },
-      { "name": "MongoDB", "image": "mongo.png" }
+      { "name": "Angular", "image": "angular.webp" },
+      { "name": "NodeJs", "image": "nodejs.webp" },
+      { "name": "SASS", "image": "sass.webp" },
+      { "name": "MongoDB", "image": "mongo.webp" }
     ],
     "urlGithub": "https://github.com/marcode24/GuessWord-Game",
     "urlProduction": "https://wordguess-game.netlify.app/"
   },
   {
     "name": "Twitter Clone",
     "description": "This is a clone of the Twitter application, it allows you to create a user account, post tweets, follow other users, like tweets, etc.",
-    "image": "https://res.cloudinary.com/dfeujtobk/image/upload/v1705812645/Portfolio/236shots_so_dynxet.png",
+    "image": "images/portfolio/twitter-clone.webp",
     "technologies": [
-      { "name": "Angular", "image": "angular.png" },
-      { "name": "NodeJs", "image": "nodejs.png" },
-      { "name": "SASS", "image": "sass.png" },
-      { "name": "MongoDB", "image": "mongo.png" }
+      { "name": "Angular", "image": "angular.webp" },
+      { "name": "NodeJs", "image": "nodejs.webp" },
+      { "name": "SASS", "image": "sass.webp" },
+      { "name": "MongoDB", "image": "mongo.webp" }
     ],
     "urlGithub": "https://github.com/marcode24/twitter-clone",
     "urlProduction": "https://twitter-clone-challenge.netlify.app/"
   },
   {
     "name": "Memory Game",
     "description": "This is a memory game, you have to find the pairs of cards, you have 3 levels of difficulty, easy, medium and hard.",
-    "image": "https://res.cloudinary.com/dfeujtobk/image/upload/v1705812759/Portfolio/103shots_so_j62bcm.png",
+    "image": "images/portfolio/memory-game.webp",
     "technologies": [
-      { "name": "HTML", "image": "html.png" },
-      { "name": "CSS", "image": "css.png" },
-      { "name": "JavaScript", "image": "js.png" }
+      { "name": "HTML", "image": "html.webp" },
+      { "name": "CSS", "image": "css.webp" },
+      { "name": "JavaScript", "image": "js.webp" }
     ],
     "urlGithub": "https://github.com/marcode24/memory-game",
     "urlProduction": "https://marcode24.github.io/memory-game/"
   },
   {
     "name": "Unit Converter",
     "description": "This is a unit converter, you can convert from one unit to another, it has different categories, such as length, weight, volume, etc.",
-    "image": "https://res.cloudinary.com/dfeujtobk/image/upload/v1705813173/Portfolio/821shots_so_qhpsfq.png",
+    "image": "images/portfolio/unit-converter.webp",
     "technologies": [
-      { "name": "Angular", "image": "angular.png" },
-      { "name": "TypeScript", "image": "ts.png" },
-      { "name": "SASS", "image": "sass.png" },
-      { "name": "HTML", "image": "html.png" }
+      { "name": "Angular", "image": "angular.webp" },
+      { "name": "TypeScript", "image": "ts.webp" },
+      { "name": "SASS", "image": "sass.webp" },
+      { "name": "HTML", "image": "html.webp" }
     ],
     "urlGithub": "https://github.com/marcode24/Unit-Converter",
     "urlProduction": "https://unit-converter-site.netlify.app/"

src/data/skills.json

@@ -2,128 +2,128 @@
   "cardsDataFrontend": [
     {
       "name": "HTML",
-      "imagePath": "images/html.png",
+      "imagePath": "images/html.webp",
       "alt": "html"
     },
     {
       "name": "CSS 3",
-      "imagePath": "images/css.png",
+      "imagePath": "images/css.webp",
       "alt": "css"
     },
     {
       "name": "JavaScript",
-      "imagePath": "images/js.png",
+      "imagePath": "images/js.webp",
       "alt": "js"
     },
     {
       "name": "TypeScript",
-      "imagePath": "images/ts.png",
+      "imagePath": "images/ts.webp",
       "alt": "ts"
     },
     {
       "name": "Angular",
-      "imagePath": "images/angular.png",
+      "imagePath": "images/angular.webp",
       "alt": "angular"
     },
     {
       "name": "Astro",
-      "imagePath": "images/astro.png",
+      "imagePath": "images/astro.webp",
       "alt": "astro"
     },
     {
       "name": "Svelte",
-      "imagePath": "images/svelte.png",
+      "imagePath": "images/svelte.webp",
       "alt": "svelte"
     },
     {
       "name": "SASS",
-      "imagePath": "images/sass.png",
+      "imagePath": "images/sass.webp",
       "alt": "scss"
     },
     {
       "name": "Bootstrap",
-      "imagePath": "images/bootstrap.png",
+      "imagePath": "images/bootstrap.webp",
       "alt": "bootstrap"
     }
   ],
   "cardsDataBackend": [
     {
       "name": "Nodejs",
-      "imagePath": "images/nodejs.png",
+      "imagePath": "images/nodejs.webp",
       "alt": "nodejs"
     },
     {
       "name": "Nestjs",
-      "imagePath": "images/nestjs.png",
+      "imagePath": "images/nestjs.webp",
       "alt": "nestjs"
     },
     {
       "name": "MongoDB",
-      "imagePath": "images/mongo.png",
+      "imagePath": "images/mongo.webp",
       "alt": "mongodb"
     },
     {
       "name": "PostgreSql",
-      "imagePath": "images/postgresql.png",
+      "imagePath": "images/postgresql.webp",
       "alt": "postgresql"
     },
     {
       "name": "Sql Server",
-      "imagePath": "images/sqlserver.png",
+      "imagePath": "images/sqlserver.webp",
       "alt": "sqlserver"
     },
     {
       "name": "MySql",
-      "imagePath": "images/mysql.png",
+      "imagePath": "images/mysql.webp",
       "alt": "mysql"
     },
     {
       "name": "Docker",
-      "imagePath": "images/docker.png",
+      "imagePath": "images/docker.webp",
       "alt": "docker"
     }
   ],
   "cardsDataOthers": [
     {
       "name": "Git",
-      "imagePath": "images/git.png",
+      "imagePath": "images/git.webp",
       "alt": "git"
     },
     {
       "name": "Azure",
-      "imagePath": "images/azure.png",
+      "imagePath": "images/azure.webp",
       "alt": "azure"
     },
     {
       "name": "Figma",
-      "imagePath": "images/figma.png",
+      "imagePath": "images/figma.webp",
       "alt": "figma"
     },
     {
       "name": "Postman",
-      "imagePath": "images/postman.png",
+      "imagePath": "images/postman.webp",
       "alt": "postman"
     },
     {
       "name": "Jest",
-      "imagePath": "images/jest.png",
+      "imagePath": "images/jest.webp",
       "alt": "jest"
     },
     {
       "name": "Jasmine",
-      "imagePath": "images/jasmine.png",
+      "imagePath": "images/jasmine.webp",
       "alt": "jasmine"
     }
   ],
   "cardsDataLearning": [
     {
       "name": "Vue",
-      "imagePath": "images/vue.png",
+      "imagePath": "images/vue.webp",
       "alt": "vue"
     },
     {
       "name": "Tailwind",
-      "imagePath": "images/tailwind.png",
+      "imagePath": "images/tailwind.webp",
       "alt": "tailwind"
     }
   ]