Merge pull request #11 from marcode24/dev

⚡ 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

@@ -27,10 +27,10 @@ import {
       </div>
       <div class="buttons">
         <a href={`mailto:${EMAIL_URL}`} class="btn icon">
-          <SendIcon width={28} height={28} />
+          <SendIcon width={26} height={26} />
         </a>
         <button class="btn icon copy">
-          <CopyIcon width={28} height={28} />
+          <CopyIcon width={26} height={26} />
         </button>
       </div>
     </div>
@@ -142,16 +142,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 {
@@ -197,7 +204,7 @@ import {
     }
 
     .email-wrapper .email {
-      font-size: 18px;
+      font-size: 16px;
     }
   }
 </style>

public/images/astro.png

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

@@ -33,10 +33,10 @@ import projects from '@data/projects.json';
             </div>
             <div class="links">
               <a class="btn icon" target="_blank" href={project.urlGithub}>
-                Código <GithubIcon width={28} height={28}/>
+                Código <GithubIcon width={26} height={26}/>
               </a>
               <a class="btn icon" target="_blank" href={project.urlProduction}>
-                Demo <ExternalIcon width={28} height={28} />
+                Demo <ExternalIcon width={26} height={26} />
               </a>
             </div>
           </div>
@@ -46,7 +46,9 @@ import projects from '@data/projects.json';
   </div>
 
   <div class="more">
-    <a href="https://github.com/marcode24?tab=overview" target="_blank" class="btn">Show more...</a>
+    <a href="https://github.com/marcode24?tab=repositories" target="_blank" class="btn">
+      Show more...
+    </a>
   </div>
 </section>
 
@@ -141,6 +143,7 @@ import projects from '@data/projects.json';
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
+    gap: 1rem;
   }
 
   .description .links .btn {
@@ -151,9 +154,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;
   }

public/images/azure.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/"