Add icons

index.html

@@ -9,6 +9,10 @@
   <link rel="stylesheet" href="style.css" />
   <link rel="stylesheet" href="mediaqueries.css" />
   <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
+
+
 
 </head>
 

projects.csv

@@ -1,14 +1,14 @@
 Title;Description;GithubLink;LiveDemoLink;Image
-Burger Planet - Frontend;A burger shop made in React for the project of "Ingenieria de aplicaciones web" from UNS;https://github.com/matichewer/IoT-Impact-js/;https://iot-impact-js.vercel.app/;assets/IoT-Impact-js-2.png
-Castle Defense;A Tower Defense video game written in Java, developed as a project for the "Tecnología de programación" subject at Universidad Nacional del Sur (UNS).;https://github.com/matichewer/Castle-Defense;;assets/Castle-Defense.png
-Burger Planet - Backend;An admin panel and API for a burger shop made with Laravel for the project of "Ingenieria de aplicaciones web" from UNS;https://github.com/matichewer/IoT-Impact-laravel/;;assets/IoT-Impact-laravel.png
+Burger Planet - Frontend;A burger shop made in React for the project of 'Ingenieria de aplicaciones web' from UNS;https://github.com/matichewer/IoT-Impact-js/;https://iot-impact-js.vercel.app/;assets/IoT-Impact-js-2.png
+Castle Defense;A Tower Defense video game written in Java, developed as a project for the 'Tecnología de programación' subject at Universidad Nacional del Sur (UNS);https://github.com/matichewer/Castle-Defense;;assets/Castle-Defense.png
+Burger Planet - Backend;An admin panel and API for a burger shop made with Laravel for the project of 'Ingenieria de aplicaciones web' from UNS;https://github.com/matichewer/IoT-Impact-laravel/;;assets/IoT-Impact-laravel.png
+Burger Planet - API;An alternative API for a burger shop made with NodeJS for the project of 'Ingenieria de aplicaciones web' from UNS;https://github.com/matichewer/IoT-Impact-nodejs;;
 PDF Password Remover;La mejor herramienta;https://github.com/matichewer/PDF-Password-Remover;;
-Burger Planet - API;An alternative API for a burger shop made with NodeJS for the project of "Ingenieria de aplicaciones web" from UNS;https://github.com/matichewer/IoT-Impact-nodejs;;
-Portfolio;This website to show my university and personal projects;https://github.com/matichewer/portfolio;https://portfolio.chewer.net/;assets/portfolio-preview.png
-Flick Color;A video game for the project of the 'Lógica para Ciencias de la Computacion' from UNS. The backend was made in Prolog, and frontend in React.;https://github.com/matichewer/flick-color;https://flickcolor.chewer.net/;assets/flick-color.png
+Portfolio;This website to show my university and personal projects;https://github.com/matichewer/portfolio;https://portfolio.chewer.net/;
+Flick Color;A video game for the project of the 'Lógica para Ciencias de la Computacion' from UNS. The backend was made in Prolog, and frontend in React;https://github.com/matichewer/flick-color;https://flickcolor.chewer.net/;assets/flick-color.png
 Udemy Python Course;A repository with all the practice and projects from the Python course I took on Udemy;https://github.com/matichewer/Udemy-Python-Course;;
-Tateti;A Tic Tac Toe game made in C for the project of the 'Organizacion de computadoras' from UNS.;https://github.com/matichewer/Tateti-proyecto-orga;;
+Tic Tac Toe;A Tic Tac Toe game made in C for the project of the 'Organizacion de computadoras' from UNS;https://github.com/matichewer/Tateti-proyecto-orga;;
 Sigma Geek Challege;A challenge to find specfici numbers in Pi;https://github.com/matichewer/SigmaGeek_pi_challenge;;
-Ports at UNS;Discover which ports are open from UNS;https://github.com/matichewer/test-all-ports-connection;;
-Github Actions Course;A course from EATI;https://github.com/matichewer/eati2023-ci-cd-first-steps;;assets/eati2023-ci-cd-first-steps.png
-Host my own server;I use my raspi to deploy my projects;;;
+Discover Blocked Ports;Bash scripts to identify blocked network ports on my university network;https://github.com/matichewer/DiscoverBlockedPorts;;
+GitHub Actions Course;A course from EATI;https://github.com/matichewer/eati2023-ci-cd-first-steps;;assets/eati2023-ci-cd-first-steps.png
+Host my own server;I use my Raspberry Pi to deploy my projects, utilizing technologies like Nginx, Docker, and more;;;

script.js

@@ -37,11 +37,9 @@ function parseCSV(csv) {
 
 
 function createProjectElement(project) {
-  // Crear el contenedor principal para cada proyecto
   const cardContainer = document.createElement("div");
   cardContainer.className = "project-card";
 
-  // Crear el contenedor de la imagen
   if (project.Image) {
     const imgContainer = document.createElement("div");
     const img = document.createElement("img");
@@ -56,40 +54,46 @@ function createProjectElement(project) {
   cardRest.className = "card-rest"; 
   cardContainer.appendChild(cardRest);
 
-  // Crear el título del proyecto
   const title = document.createElement("h2");
   title.className = "card-title";
   title.textContent = project.Title;
   cardRest.appendChild(title);
 
-  // Crear la descripción del proyecto con la clase de margen
   const description = document.createElement("p");
   description.textContent = project.Description;
   description.className = "card-description"; 
   cardRest.appendChild(description);
 
-  // Crear el contenedor de botones
   const btnContainer = document.createElement("div");
   btnContainer.className = "btn-container";
   cardRest.appendChild(btnContainer);
 
-  // Crear el botón de Github
   if (project.GithubLink) {
-    const githubBtn = document.createElement("button");
+    const githubBtn = document.createElement("a");
     githubBtn.className = "btn";
-    githubBtn.textContent = "Github";
-    githubBtn.onclick = () => window.open(project.GithubLink, '_blank');
-    btnContainer.appendChild(githubBtn);  
+    githubBtn.href = project.GithubLink;
+    githubBtn.target = "_blank";
+    githubBtn.rel = "noopener noreferrer";
+    githubBtn.innerHTML = '<i class="fab fa-github icon-spacing"></i> GitHub';
+    btnContainer.appendChild(githubBtn);    
   }
 
-  // Crear el botón de Live Demo solo si el proyecto tiene un enlace de demostración
   if (project.LiveDemoLink) {
-    const liveDemoBtn = document.createElement("button");
+    const liveDemoBtn = document.createElement("a");
     liveDemoBtn.className = "btn";
-    liveDemoBtn.textContent = "Live Demo";
-    liveDemoBtn.onclick = () => window.open(project.LiveDemoLink, '_blank');
+    liveDemoBtn.href = project.LiveDemoLink;
+    liveDemoBtn.target = "_blank"; // Abre en nueva pestaña
+    liveDemoBtn.rel = "noopener noreferrer"; // Seguridad
+
+    // Opción 1: Icono de monitor
+    // liveDemoBtn.innerHTML = '<i class="fas fa-desktop icon-spacing"></i> Live Demo';
+
+    // Opción 2: Icono de "play"
+    liveDemoBtn.innerHTML = '<i class="fas fa-play icon-spacing"></i> Live Demo';
+
     btnContainer.appendChild(liveDemoBtn);
-  }  
+  } 
 
-  return cardContainer; // Devolver el contenedor principal del proyecto
+  return cardContainer;
 }
+

style.css

@@ -40,9 +40,27 @@ a {
 
 a:hover {
   color: grey;
-  text-decoration: underline;
-  text-underline-offset: 1rem;
-  text-decoration-color: rgb(181, 181, 181);
+}
+
+a.btn {
+  display: flex; /* Cambia de inline-block a flex */
+  align-items: center; /* Alinea los elementos hijos verticalmente */
+  justify-content: center; /* Alinea los elementos hijos horizontalmente */  
+  padding: 0.65rem;
+  width: 8rem;
+  font-size: 1rem; 
+  border-radius: 1.5rem;
+  cursor: pointer;
+  border: 0.13rem solid rgb(83, 83, 83); 
+  background: rgb(240, 240, 240);
+  color: rgb(32, 32, 32); /* Color del texto */
+  text-align: center; /* Centrar texto */
+  white-space: nowrap;
+}
+
+a.btn:hover {
+  background: rgb(83, 83, 83);
+  color: white;
 }
 
 .logo {
@@ -180,7 +198,7 @@ section {
 }
 
 .project-card {
-  background: white;
+  background: rgb(245, 245, 245);
   border-radius: 2rem;
   box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.6); /* Sombra */
   border: 0px solid rgba(0, 0, 0, 0.1); /* Borde más suave */
@@ -314,4 +332,8 @@ footer {
       opacity: 0;
       transform: rotate(45deg) translate(20px, 20px);
   }
-}
+}
+
+.icon-spacing {
+  margin-right: 5px; /* Ajusta este valor según sea necesario */
+}