⚡ Optimize images

Author: marcode24

public/images/angular.png

@@ -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>

public/images/angular.webp

@@ -26,7 +26,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>
 

public/images/astro.png

@@ -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/"

public/images/astro.webp

@@ -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"
     }
   ]