diff --git a/arles.html b/arles.html
index b6c8270..95c32c9 100644
--- a/arles.html
+++ b/arles.html
@@ -1,14 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene tres obras pintadas por el autor en 1888 en Arles
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal que consiste en tres imágenes que al hacer click el usuario puede acceder a más información
-  -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -25,10 +17,6 @@
     <title>Vincent's Art - Arles</title>
   </head>
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -69,12 +57,7 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Contenedor con cada sección posicionada de tal manera que tenga el resultado final en pantalla
-      -Secciones ocultas que saldrán cuando el usuario haga click en una de las tres imágenes
-    -->
     <main class="Main">
-      <!-- Contenedor principal que el usuario ve cuando entra en la galería -->
       <div class="Grid-container">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Location">
@@ -90,7 +73,6 @@ <h1 class="Main-h1">vincent's art</h1>
         <div class="Down-container">
           <img class="Grid-image" src="./assets/vincentsart/cafe-vincentvangogh.webp" alt="the Night Café by Vincent Van Gogh" loading="lazy" >
         </div>
-        <!-- El usuario podrá ir hacia la siguiente sección de la galería -->
         <a class="Forward" href="provence.html" rel="noreferrer" aria-label="See more paintings">
           <div class="Forward-btn" aria-label="Go to next year">
             <svg class="Forward-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -98,7 +80,6 @@ <h1 class="Main-h1">vincent's art</h1>
             </svg>
           </div>
         </a>
-        <!-- El usuario podrá ir hacia la sección anterior de la galería -->
         <a class="Backwards" href="paris.html" rel="noreferrer" aria-label="See more paintings">
           <div class="Backwards-btn" aria-label="Go to previous year">
             <svg class="Backwards-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -107,7 +88,6 @@ <h1 class="Main-h1">vincent's art</h1>
           </div>
         </a>
       </div>
-      <!-- Contenido que el usuario podrá ver cuando haga click en una de las imágenes, la estructura es exactamente la misma en los tres casos pero el conteniedo es diferent -->
       <div class="Image-container isHidden" id="Portrait">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Image-info">
@@ -126,7 +106,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/roulin-vincentvangogh.webp" alt="Portrait of Joseph Roulin by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -157,7 +136,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/rhone-vincentvangogh.webp" alt="Starry Night over the Rhône by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -191,7 +169,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/cafe-vincentvangogh.webp" alt="The Night Café by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
diff --git a/auvers.html b/auvers.html
index 6563881..41b0b07 100644
--- a/auvers.html
+++ b/auvers.html
@@ -1,13 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene tres obras pintadas por el autor en 1890 en Aurvers-Sur-Oise
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal que consiste en tres imágenes que al hacer click el usuario puede acceder a más información
-  --><!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -24,10 +17,6 @@
     <title>Vincent's Art - Auvers-sur-Oise</title>
   </head>
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -68,12 +57,7 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Contenedor con cada sección posicionada de tal manera que tenga el resultado final en pantalla
-      -Secciones ocultas que saldrán cuando el usuario haga click en una de las tres imágenes
-    -->
     <main class="Main">
-      <!-- Contenedor principal que el usuario ve cuando entra en la galería -->
       <div class="Grid-container">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Location">
@@ -89,7 +73,6 @@ <h1 class="Main-h1">vincent's art</h1>
         <div class="Down-container">
           <img class="Grid-image" src="./assets/vincentsart/gachet-vincentvangogh.webp" alt="Portrait of Dr.Gachet by Vincent Van Gogh" loading="lazy" >
         </div>
-        <!-- El usuario podrá ir hacia la sección anterior de la galería -->
         <a class="Backwards" href="provence.html" rel="noreferrer" aria-label="See more paintings">
           <div class="Backwards-btn" aria-label="Go to previous year">
             <svg class="Backwards-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -98,7 +81,6 @@ <h1 class="Main-h1">vincent's art</h1>
           </div>
         </a>
       </div>
-      <!-- Contenido que el usuario podrá ver cuando haga click en una de las imágenes, la estructura es exactamente la misma en los tres casos pero el conteniedo es diferent -->
       <div class="Image-container isHidden" id="Church">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Image-info">
@@ -117,7 +99,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/church-vincentvangogh.webp" alt="The Church in Auvers-sur-Oise by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -148,7 +129,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/crows-vincentvangogh.webp" alt="Wheatfield with Crows by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -179,7 +159,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/gachet-vincentvangogh.webp" alt="Portrait of Dr.Gachet by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
diff --git a/contact.html b/contact.html
index 64c4be0..b3684e0 100644
--- a/contact.html
+++ b/contact.html
@@ -1,14 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene un formulario para que el usuario pueda contactar conmigo para futuras colaboraciones o para consultar mis redes
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal
-  -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -20,15 +12,11 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/contact.css" />
-    <script src="./js/contact.js" defer></script>
+    <script src="./js/index.js" defer></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" />
     <title>Discover Van Gogh - Contact</title>
   </head>
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -69,14 +57,8 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Contenedor una breve conclusión después de hacer la página web
-      -Formulario
-      -Lista con las redes sociales
-    -->
     <main class="Main">
       <div class="Main-container">
-        <!-- Contenedor una breve conclusión después de hacer la página web -->
         <h1 class="Container-h1">contact me</h1>
         <div class="Container-text">
           <p class="Container-p">
@@ -86,11 +68,9 @@ <h1 class="Container-h1">contact me</h1>
           <p class="Container-p">Thank you for visiting my page & for sharing my love for Van Gogh and art! Check other of my works or contact me if you’d like to create art together.</p>
         </div>
         <div class="Bottom-content">
-          <!-- Contenido inferior con la imagen, formulario y redes sociales -->
           <div class="Irises-container">
             <img src="./assets/contact/lirios.png" alt="Irises image done with Illustrator" class="Irises-image" />
           </div>
-          <!-- Formulario -->
           <form class="Form">
             <input class="Form-name" type="text" name="yourname" placeholder="Name" required />
             <input class="Form-email" type="email" name="youremail" placeholder="Email" required />
@@ -104,7 +84,6 @@ <h1 class="Container-h1">contact me</h1>
               <input class="Form-send" type="submit" value="Let's Talk!" />
             </div>
           </form>
-          <!-- Redes sociales -->
           <div class="Rrss">
             <span class="Rrss-span">Check out my art</span>
             <ul class="Rrss-ul">
diff --git a/css/arles.css b/css/arles.css
index 00c366e..ebdc492 100644
--- a/css/arles.css
+++ b/css/arles.css
@@ -1,4 +1,3 @@
-
 /* RESET */
 * {
   margin: 0;
diff --git a/css/index.css b/css/index.css
index 95b7d2f..3139285 100644
--- a/css/index.css
+++ b/css/index.css
@@ -11,6 +11,19 @@
 /* ---- RESET empieza aquí ---- */
 /* Descripción: Estilos de reseteo para la normalización de estilos predeterminados del navegador. */
 /* Reset general para todos los elementos */
+
+/* Estructura RESET */
+/* 
+-Global
+-Elementos multimedia
+-Enlaces y enlaces dentro de párrafos
+-Listas
+-Elementos de texto
+-Formularios
+-Svg
+-Html (oculto en este caso para que no sobresalga contenido)
+-Body
+ */
 * {
   margin: 0;
   padding: 0;
@@ -101,6 +114,27 @@ body {
 /* Descripción: Estilos para el encabezado del sitio web. */
 
 /* Estilos para el contenedor del encabezado */
+/* Estructura HEADER - igual para todas las páginas que tengas la barra de navegación
+-Header
+-Header-left
+-Header-img
+-Header-signature
+-Header-ul
+-Header-ul.isActive
+-Header-li
+-Nav-link
+-Header-li:hover .Nav-link
+-Nav-img
+-Header-li:hover .Nav-img
+-Nav-link.notActive:not(:hover)
+-Hamburger
+-Circle
+-Circle.isActive
+-Bar
+-Hamburger.isActive .Bar:nth-child(2)
+-Hamburger.isActive .Bar:nth-child(3)
+-Hamburger.isActive .Bar:nth-child(4)
+ */
 .Header {
   max-width: 95%;
   margin: auto;
@@ -266,6 +300,32 @@ body {
 
 /* MAIN */
 /* Estilos para el contenedor principal */
+/* Estructura MAIN
+-Main
+-Grid-container
+-Container
+-Image
+-Frame
+-Starry-night
+-Starry-h1
+-Almond-blossom
+-Almond-h2
+-Cypresses
+-Portrait
+-Quote
+-Quote-p
+-Quote-author
+-Quote-p,
+-Quote-author
+-Quote .Frame
+-Sunflowers
+-Introduction
+-Introduction-p
+-Introduction .Frame,
+-Quote .Frame
+-Postman
+-Introduction .Frame
+ */
 .Main {
   margin: 0.7rem;
   height: 87vh;
@@ -766,4 +826,4 @@ body {
   .Header-li:hover .Nav-link{
     animation: none;
   }
-}
+}
\ No newline at end of file
diff --git a/css/vicentslife.css b/css/vicentslife.css
index 9faa67d..8d7e785 100644
--- a/css/vicentslife.css
+++ b/css/vicentslife.css
@@ -598,7 +598,7 @@ body {
     border-color: #ffd147;
   }
   .Main{
-    height: 75vh;
+    height: 80vh;
   }
 }
 /* ---- Fin de las Media Queries ---- */
diff --git a/discover.html b/discover.html
index 04f74e9..de7b07e 100644
--- a/discover.html
+++ b/discover.html
@@ -1,14 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene una breve introducción al legado de Van Gogh y enlaces a experiencias que los usuarios pueden realizar para conocer más en profundidad al artista
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal el cual consta de dos seccions: loving Vincent y immersive experience
-  -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -20,16 +12,12 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/discover.css" media="screen" />
-    <script src="./js/discover.js" defer async></script>
+    <script src="./js/index.js" defer async></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" media="screen" />
     <title>Discover Van Gogh - Discover</title>
   </head>
   
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -70,9 +58,6 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Grid con la introducción y dos contenedores con los eventos mencionados anteriormente
-    -->
     <main class="Main">
       <div class="Grid-container">
         <div class="Text-container">
@@ -86,7 +71,6 @@ <h1 class="Column-h1">discover</h1>
             <h2 class="Column-h2">loving <br />vincent</h2>
           </div>
         </a>
-        <!-- Enlance a sección sobre la visita -->
         <a class="Immersive" href="immersive.html" rel="noreferrer">
           <img class="Column-img" src="./assets/discover/vangogh-immersivexperience.webp" alt="Van Gogh Immersive Experience" loading="lazy" />
           <div class="Column-frame">
diff --git a/immersive.html b/immersive.html
index 182c3e5..227332d 100644
--- a/immersive.html
+++ b/immersive.html
@@ -1,14 +1,6 @@
-<!--
-  Descripción: Este archivo HTML contiene una breve introducción a una experiencia única en la que los usuarios puedes pasearse por los cuadros del artista
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal el cual consta de dos seccions: contenedor con texto e imagen con enlace a página web sobre la experiencia
-  -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -20,16 +12,12 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/immersive.css" media="screen" />
-    <script src="./js/immersive.js" defer async></script>
+    <script src="./js/index.js" defer async></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" media="screen" />
     <title>Discover Van Gogh - Immersive Experience</title>
   </head>
 
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -70,13 +58,8 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal:
-      -Introducción
-      -Imagen con enlace a experiencia
-    -->
     <main class="Main">
       <div class="Grid-container">
-        <!-- Introducción -->
         <div class="Immersive-container">
           <h1 class="Immersive-h1">Immersive Experience</h1>
           <p class="Immersive-p">
@@ -87,7 +70,6 @@ <h1 class="Immersive-h1">Immersive Experience</h1>
           </p>
         </div>
         <div class="Image-container">
-          <!-- El usuario podrá volver hacia atrás en la para ver otras experiencias -->
           <a class="Close-container" href="discover.html" rel="noreferrer" aria-label="Go back to Discover Page">
             <div class="Close-btn" aria-label="Close button">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
diff --git a/index.html b/index.html
index 81919c6..3a3fd23 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
 Estructure general:
 -Encabezado
 -Barra de navegación
--Contenido principal
+-Contenido principal: una grid a modo de galería con algunas obras del autor e introducción al usuario
   -->
 <!DOCTYPE html>
 <html lang="en">
@@ -16,6 +16,7 @@
       name="description"
       content="Embark on a journey through the colorful and emotional world of Van Gogh's art. Explore his life story, his techniques, and the inspiration behind his masterpieces. Discover the passion, the pain, and the creativity behind his art."
     />
+    <!-- Metadata para redes sociales como WhatsApp, Linkedin, Github o Telegram, se ha comprobado que funcionen en un card simulator -->
     <meta property="og:url" content="https://opentechne.github.io/Discover-Vincent-VanGogh/" />
     <meta property="og:type" content="website" />
     <meta property="og:title" content="This is Van Gogh's World: A Journey Through Art and Emotion" />
@@ -23,6 +24,7 @@
       property="og:description"
       content="Embark on a journey through the colorful and emotional world of Van Gogh's art. Explore his life story, his techniques, and the inspiration behind his masterpieces. Discover the passion, the pain, and the creativity behind his art."
     />
+    <!-- Metadata para Twitter ya que leí en la documentación oficial había que hacerla específicamente para Twitter -->
     <meta property="og:image" content="https://opentechne.github.io/Discover-Vincent-VanGogh/assets/homepage/og-image.webp" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta property="twitter:domain" content="https://opentechne.github.io/Discover-Vincent-VanGogh/" />
@@ -43,41 +45,51 @@
   </head>
   <body>
     <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
+    -Icono del artista a la izquierda que lleva a la página principal en todo momento durante el flujo de la página web
+    -Imagen central de la firma de Van Gogh a modo de decoración
+    -Menú hamburguesa a la derecha que lleva a las otras páginas:
+      Menú, info sobre la vida del artista, una galería con sus obras más importantes, info sobre eventos relacionados con el artista y un formulario de contacto -->
     <header class="Header">
+      <!-- Icono del artista a la izquierda que nos conduce a la página principal -->
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
-          <img class="Header-img" src="./assets/homepage/favicon-vincentvangogh.webp" alt="Self-portrait by Van Gogh used as the logo" loading="lazy" />
+          <img class="Header-img" src="./assets/homepage/favicon-vincentvangogh.webp" alt="Self-portrait by Van Gogh used as the logo" loading="lazy" >
         </a>
       </div>
+      <!-- Imagen central a modo de decoración -->
       <div class="Header-center">
-        <img class="Header-signature" src="./assets/homepage/vincentvangogh-signature.webp" alt="Van Gogh's signature" loading="lazy" />
+        <img class="Header-signature" src="./assets/homepage/vincentvangogh-signature.webp" alt="Van Gogh's signature" loading="lazy" >
       </div>
+      <!-- Barra navegación que nos conduce a todas las secciones de la página -->
       <nav class="Header-nav">
         <ul class="Header-ul">
+          <!-- Opción que nos lleva a la homepage -->
           <li class="Header-li">
             <a class="Nav-link" href="index.html" rel="noreferrer">home</a>
             <img class="Nav-img" src="./assets/homepage/starrynight-vincentvangogh-menu.webp" alt="Starry Night by Vincent Van Gogh" loading="lazy" >
           </li>
+          <!-- Opción que nos lleva a las diferentes etapas de la vida del artista -->
           <li class="Header-li">
             <a class="Nav-link" href="vincentslife.html" rel="noreferrer">vincent's life</a>
             <img class="Nav-img" src=".\assets\homepage\bedroominarles-vincentvangogh-menu.webp" alt="Bedroom in Arles by Vincent Van Gogh" loading="lazy" >
           </li>
+          <!-- Opción que nos lleva a una especie de galería con sus obras más importantes -->
           <li class="Header-li">
             <a class="Nav-link" href="vincentsart.html" rel="noreferrer">vincent's art</a>
             <img class="Nav-img" src="./assets/homepage/almondblossom-vincentvangogh-menu.webp" alt="Almond Blossom by Vincent Van Gogh" loading="lazy" >
           </li>
+          <!-- Opción que nos lleva a dos subcategorías para descubrir novedades relacionadas con el artista: la película Loving Vincent y la exposición immersiva de Van Gogh -->
           <li class="Header-li">
             <a class="Nav-link" href="discover.html" rel="noreferrer">discover</a>
             <img class="Nav-img" src="./assets/homepage/wheatfieldwithcypresses-vincentvangogh-menu.webp" alt="Wheatfield with Cypresses by Vincent Van Gogh" loading="lazy" >
           </li>
+          <!-- Acceso a un formulario para contactar conmigo en caso que el usuario así lo desee -->
           <li class="Header-li">
             <a class="Nav-link" href="contact.html" rel="noreferrer">contact</a>
             <img class="Nav-img" src="./assets/homepage/letterbyvincentvangogh-menu.webp" alt="Letters by Vincent Van Gogh" loading="lazy" >
           </li>
         </ul>
+        <!-- Contenedor para hacer el menú hamburguesa que con el css animé -->
         <div class="Hamburger">
           <span class="Circle"></span>
           <span class="Bar"></span>
@@ -87,59 +99,87 @@
       </nav>
     </header>
     <!-- Contenido principal: 
-      -Grid con una galería con imágenes del artista que introducen a qué podrá encontrar el usuario en esta página web -->
+      -Grid con una galería con imágenes del artista que introducen a qué podrá encontrar el usuario en esta página web
+      -Todos comparten la misma clase .Container pero para la especificación de cada uno creé otra clase conforme la imagen que contiene el contenedor
+    -->
     <main class="Main">
+      <!-- Grid de 4 columnas y 3 fileras para crear la galería -->
       <div class="Grid-container">
+        <!-- Contenedor de cada sección de la galería, esta es la imagen princial -->
         <div class="Container Starry-night">
-          <img class="Image" src="./assets/homepage/starrynight-vincentvangogh-menu.webp" alt="Starry Night by Vincent Van Gogh" />
+          <!-- Imagen que se incluye dentro del contenedor y que coloqué con css -->
+          <img class="Image" src="./assets/homepage/starrynight-vincentvangogh-menu.webp" alt="Starry Night by Vincent Van Gogh" >
+          <!-- Elemento que contiene toda la informaciónde dentro del contenedor -->
           <div class="Frame-container">
             <h1 class="Starry-h1">the artistic brilliance of</h1>
+            <!-- Elemento meramente decorativo -->
             <span class="Frame"></span>
           </div>
         </div>
+        <!-- Contenedor con otra imagen -->
         <div class="Container Almond-blossom">
-          <img class="Image" src="./assets/homepage/almondblossom-vincentvangogh-menu.webp" alt="Almond Blossom by Vincent Van Gogh" loading="lazy" />
+          <!-- Imagen que se incluye dentro del contenedor y que coloqué con css -->
+          <img class="Image" src="./assets/homepage/almondblossom-vincentvangogh-menu.webp" alt="Almond Blossom by Vincent Van Gogh" loading="lazy" >
           <div class="Frame-container">
             <h2 class="Almond-h2">vincent<br />van gogh</h2>
+            <!-- Elemento meramente decorativo -->
             <span class="Frame"></span>
           </div>
         </div>
+        <!-- Contenedor con otra imagen -->
         <div class="Container Cypresses">
-          <img class="Image" src="./assets/homepage/wheatfieldwithcypresses-vincentvangogh-menu.webp" alt="Wheatfield with Cypresses by Vincent Van Gogh" loading="lazy" />
+          <!-- Imagen que se incluye dentro del contenedor y que coloqué con css -->
+          <img class="Image" src="./assets/homepage/wheatfieldwithcypresses-vincentvangogh-menu.webp" alt="Wheatfield with Cypresses by Vincent Van Gogh" loading="lazy" >
           <div class="Frame-container">
+            <!-- Elemento meramente decorativo -->
             <span class="Frame"></span>
           </div>
         </div>
+        <!-- Contenedor con otra imagen -->
         <div class="Container Portrait">
-          <img class="Image" src="./assets/homepage/self-portrait-vincentvangogh.webp" alt="Self-portrait by Vincent Van Gogh" loading="lazy" />
+          <!-- Imagen que se incluye dentro del contenedor y que coloqué con css -->
+          <img class="Image" src="./assets/homepage/self-portrait-vincentvangogh.webp" alt="Self-portrait by Vincent Van Gogh" loading="lazy" >
           <div class="Frame-container">
+            <!-- Elemento meramente decorativo -->
             <span class="Frame"></span>
           </div>
         </div>
+        <!-- Contenedor con una citación del artista -->
         <div class="Container Quote">
           <div class="Frame-container">
+            <!-- Texto de dentro del contenedor -->
             <p class="Quote-p">
               <i>"Normality is a paved road: it's comfortable to walk, but no flowers grow on it."</i>
             </p>
             <span class="Quote-author">Vincent Van Gogh</span>
+            <!-- Elemento meramente decorativo -->
             <span class="Frame"></span>
           </div>
         </div>
+        <!-- Contenedor con otra imagen -->
         <div class="Container Sunflowers">
+          <!-- Imagen que se incluye dentro del contenedor y que coloqué con css -->
           <img class="Image" src="./assets/homepage/sunflowers-vincentvangogh.webp" alt="Sunflowers by Vincent Van gogh" loading="lazy" />
           <div class="Frame-container">
+            <!-- Elemento meramente decorativo -->
             <span class="Frame"></span>
           </div>
         </div>
+        <!-- Contenedor con una breve introducción de lo que se encontrará el usuario en ésta página -->
         <div class="Container Introduction">
+          <!-- Contenedor con el texto -->
           <div class="Frame-container">
             <p class="Introduction-p">Explore Van Gogh's passion and creativity - a groundbreaking artist who inspired generations.</p>
+            <!-- Elemento meramente decorativo -->
             <span class="Frame"></span>
           </div>
         </div>
+        <!-- Contenedor con otra imagen -->
         <div class="Container Postman">
-          <img class="Image" src="./assets/homepage/roulin-vincentvangogh.webp" alt="Portrait of Joseph Roulin by Vincent Van Gogh" loading="lazy" />
+          <!-- Imagen que se incluye dentro del contenedor y que coloqué con css -->
+          <img class="Image" src="./assets/homepage/roulin-vincentvangogh.webp" alt="Portrait of Joseph Roulin by Vincent Van Gogh" loading="lazy" >
           <div class="Frame-container">
+            <!-- Elemento meramente decorativo -->
             <span class="Frame"></span>
           </div>
         </div>
diff --git a/js/arles.js b/js/arles.js
index b69eb35..3b14c95 100644
--- a/js/arles.js
+++ b/js/arles.js
@@ -1,4 +1,3 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
 const hamburger = document.querySelector(".Hamburger");
 const headerUl = document.querySelector(".Header-ul");
 const circle = document.querySelector(".Circle");
@@ -9,38 +8,12 @@ const navLink = document.querySelectorAll(".Nav-link");
 //se le AÑADE a .Hamburger la clase .isActive
 //se le AÑADE a .Circle la clase .isActive
 
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
 hamburger.addEventListener("click", () => {
   headerUl.classList.toggle("isActive");
   hamburger.classList.toggle("isActive");
   circle.classList.toggle("isActive");
 });
 
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */ 
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
-
-// MAIN - Images
-/* Este código es para crear y manejar la funcionalidad de una galería de imágenes. */
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase o IDs y los asigno a variables. */
 const leftContainer = document.querySelector(".Left-container");
 const upContainer = document.querySelector(".Up-container");
 const downContainer = document.querySelector(".Down-container");
@@ -57,8 +30,6 @@ const cafe = document.getElementById("Cafe");
 //a portrait se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-
-/* Agrego un addEventListener al elemento con el nombre de clase "Left-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 leftContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   portrait.classList.remove("isHidden");
@@ -73,7 +44,6 @@ leftContainer.addEventListener("click", () => {
 //a rhone se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Up-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 upContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   rhone.classList.remove("isHidden");
@@ -88,7 +58,6 @@ upContainer.addEventListener("click", () => {
 //a cafe se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Down-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 downContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   cafe.classList.remove("isHidden");
@@ -102,7 +71,6 @@ downContainer.addEventListener("click", () => {
 //a portrait se le AÑADE la clase .isHidden,
 //a .Grid-container se le QUITA la clase .isHidden,
 
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Close-container". Cuando cualquiera de estos elementos es clickeado, el código ejecutará las siguientes acciones: */
 closeContainer.forEach((eachClose, i) => {
   closeContainer[i].addEventListener("click", () => {
     portrait.classList.add("isHidden");
diff --git a/js/auvers.js b/js/auvers.js
index 194cab6..25038f4 100644
--- a/js/auvers.js
+++ b/js/auvers.js
@@ -1,4 +1,3 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
 const hamburger = document.querySelector(".Hamburger");
 const headerUl = document.querySelector(".Header-ul");
 const circle = document.querySelector(".Circle");
@@ -9,38 +8,13 @@ const navLink = document.querySelectorAll(".Nav-link");
 //se le AÑADE a .Hamburger la clase .isActive
 //se le AÑADE a .Circle la clase .isActive
 
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
 hamburger.addEventListener("click", () => {
   headerUl.classList.toggle("isActive");
   hamburger.classList.toggle("isActive");
   circle.classList.toggle("isActive");
 });
 
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */ 
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
-
 // MAIN - Images
-/* Este código es para crear y manejar la funcionalidad de una galería de imágenes. */
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase o IDs y los asigno a variables. */
 const leftContainer = document.querySelector(".Left-container");
 const upContainer = document.querySelector(".Up-container");
 const downContainer = document.querySelector(".Down-container");
@@ -58,7 +32,6 @@ const gachet = document.getElementById("Gachet");
 //a church se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Left-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 leftContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   church.classList.remove("isHidden");
@@ -73,7 +46,6 @@ leftContainer.addEventListener("click", () => {
 //a crows se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Up-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 upContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   crows.classList.remove("isHidden");
@@ -88,7 +60,6 @@ upContainer.addEventListener("click", () => {
 //a gachet se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Down-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 downContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   gachet.classList.remove("isHidden");
@@ -102,7 +73,6 @@ downContainer.addEventListener("click", () => {
 //a portrait se le AÑADE la clase .isHidden,
 //a .Grid-container se le QUITA la clase .isHidden,
 
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Close-container". Cuando cualquiera de estos elementos es clickeado, el código ejecutará las siguientes acciones: */
 closeContainer.forEach((eachClose, i) => {
   closeContainer[i].addEventListener("click", () => {
     church.classList.add("isHidden");
diff --git a/js/contact.js b/js/contact.js
deleted file mode 100644
index 5d317e2..0000000
--- a/js/contact.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
-const hamburger = document.querySelector(".Hamburger");
-const headerUl = document.querySelector(".Header-ul");
-const circle = document.querySelector(".Circle");
-const navLink = document.querySelectorAll(".Nav-link");
-
-//Cuando hago CLICK en .Hamburger
-//se le AÑADE a .Header-ul la clase .isActive
-//se le AÑADE a .Hamburger la clase .isActive
-//se le AÑADE a .Circle la clase .isActive
-
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
-hamburger.addEventListener("click", () => {
-  headerUl.classList.toggle("isActive");
-  hamburger.classList.toggle("isActive");
-  circle.classList.toggle("isActive");
-});
-
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
\ No newline at end of file
diff --git a/js/discover.js b/js/discover.js
deleted file mode 100644
index 5d317e2..0000000
--- a/js/discover.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
-const hamburger = document.querySelector(".Hamburger");
-const headerUl = document.querySelector(".Header-ul");
-const circle = document.querySelector(".Circle");
-const navLink = document.querySelectorAll(".Nav-link");
-
-//Cuando hago CLICK en .Hamburger
-//se le AÑADE a .Header-ul la clase .isActive
-//se le AÑADE a .Hamburger la clase .isActive
-//se le AÑADE a .Circle la clase .isActive
-
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
-hamburger.addEventListener("click", () => {
-  headerUl.classList.toggle("isActive");
-  hamburger.classList.toggle("isActive");
-  circle.classList.toggle("isActive");
-});
-
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
\ No newline at end of file
diff --git a/js/immersive.js b/js/immersive.js
deleted file mode 100644
index 5d317e2..0000000
--- a/js/immersive.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
-const hamburger = document.querySelector(".Hamburger");
-const headerUl = document.querySelector(".Header-ul");
-const circle = document.querySelector(".Circle");
-const navLink = document.querySelectorAll(".Nav-link");
-
-//Cuando hago CLICK en .Hamburger
-//se le AÑADE a .Header-ul la clase .isActive
-//se le AÑADE a .Hamburger la clase .isActive
-//se le AÑADE a .Circle la clase .isActive
-
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
-hamburger.addEventListener("click", () => {
-  headerUl.classList.toggle("isActive");
-  hamburger.classList.toggle("isActive");
-  circle.classList.toggle("isActive");
-});
-
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 99d8bf1..beb6bed 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,39 +1,28 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
+//index.js se ha vinculado a las siguientes páginas ya que compartían exactamente el mismo código y he decidido hacerlo así para optimizar muchas líneas de código: vincent's art, discover (loving e immersive), contact
+
+//Primero de todo selecciono los elementos del documento HTML utilizando sus nombres de clase y los asigno a las siguiente variables variables. */
+//Selecciono el elemento hamburger (será el menú de la página web)
 const hamburger = document.querySelector(".Hamburger");
+//Selecciono el elemento headerUl (será el fondo que aparecerá cuando esté activo)
 const headerUl = document.querySelector(".Header-ul");
+//Selecciono el elemento circle (será el círculo de alrededor del las tres barras que formarán el menú hamburguesa)
 const circle = document.querySelector(".Circle");
+//Selecciono el elemento navLink (es la lista de items de dentro de mi ul)
 const navLink = document.querySelectorAll(".Nav-link");
 
+//Mi intención es que pase lo siguiente cuando hago click en el menú hamburguesa en cualquier página de la web
 //Cuando hago CLICK en .Hamburger
 //se le AÑADE a .Header-ul la clase .isActive
 //se le AÑADE a .Hamburger la clase .isActive
 //se le AÑADE a .Circle la clase .isActive
 
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
+/* Para ello agrego un addEventListener al elemento con la clase "hamburger". 
+Cuando le hago click, como el evento está escuchando, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
 hamburger.addEventListener("click", () => {
+  //Cuando el evento esucha el 'click, esta línea de código agrega/quita la clase "isActive" del elemento con la clase "Header-ul". Si tiene la clase "isActive", la clase será removida; si no la tiene, la clase será añadida.
   headerUl.classList.toggle("isActive");
+  //Agrega o quita la clase "isActive" del propio elemento "hamburger". Si el elemento tiene la clase "isActive", la clase será removida; si no la tiene, la clase será añadida.
   hamburger.classList.toggle("isActive");
+  //Como ha pasado en las dos veces anteriores si el elemento tiene la clase "isActive", la clase será removida; si no la tiene, la clase será añadida.
   circle.classList.toggle("isActive");
-});
-
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */ 
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
 });
\ No newline at end of file
diff --git a/js/loving.js b/js/loving.js
deleted file mode 100644
index 5d317e2..0000000
--- a/js/loving.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
-const hamburger = document.querySelector(".Hamburger");
-const headerUl = document.querySelector(".Header-ul");
-const circle = document.querySelector(".Circle");
-const navLink = document.querySelectorAll(".Nav-link");
-
-//Cuando hago CLICK en .Hamburger
-//se le AÑADE a .Header-ul la clase .isActive
-//se le AÑADE a .Hamburger la clase .isActive
-//se le AÑADE a .Circle la clase .isActive
-
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
-hamburger.addEventListener("click", () => {
-  headerUl.classList.toggle("isActive");
-  hamburger.classList.toggle("isActive");
-  circle.classList.toggle("isActive");
-});
-
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
\ No newline at end of file
diff --git a/js/paris.js b/js/paris.js
index 75a1800..c22ed93 100644
--- a/js/paris.js
+++ b/js/paris.js
@@ -1,4 +1,3 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
 const hamburger = document.querySelector(".Hamburger");
 const headerUl = document.querySelector(".Header-ul");
 const circle = document.querySelector(".Circle");
@@ -9,38 +8,12 @@ const navLink = document.querySelectorAll(".Nav-link");
 //se le AÑADE a .Hamburger la clase .isActive
 //se le AÑADE a .Circle la clase .isActive
 
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
 hamburger.addEventListener("click", () => {
   headerUl.classList.toggle("isActive");
   hamburger.classList.toggle("isActive");
   circle.classList.toggle("isActive");
 });
 
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
-
-// MAIN - Images
-/* Este código es para crear y manejar la funcionalidad de una galería de imágenes. */
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase o IDs y los asigno a variables. */
 const leftContainer = document.querySelector(".Left-container");
 const upContainer = document.querySelector(".Up-container");
 const downContainer = document.querySelector(".Down-container");
@@ -57,7 +30,6 @@ const bridge = document.getElementById("Bridge");
 //a selfPortrait se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Left-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 leftContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   selfPortrait.classList.remove("isHidden");
@@ -73,8 +45,6 @@ leftContainer.addEventListener("click", () => {
 //a drinkers se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Up-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
-
 upContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   drinkers.classList.remove("isHidden");
@@ -89,7 +59,6 @@ upContainer.addEventListener("click", () => {
 //a drinkers se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Down-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 downContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   bridge.classList.remove("isHidden");
@@ -103,7 +72,6 @@ downContainer.addEventListener("click", () => {
 //a selfPortrait se le AÑADE la clase .isHidden,
 //a .Grid-container se le QUITA la clase .isHidden,
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Down-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 closeContainer.forEach((eachClose, i) => {
   closeContainer[i].addEventListener("click", () => {
     selfPortrait.classList.add("isHidden");
diff --git a/js/provence.js b/js/provence.js
index d00694c..78446c2 100644
--- a/js/provence.js
+++ b/js/provence.js
@@ -1,4 +1,3 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
 const hamburger = document.querySelector(".Hamburger");
 const headerUl = document.querySelector(".Header-ul");
 const circle = document.querySelector(".Circle");
@@ -9,38 +8,12 @@ const navLink = document.querySelectorAll(".Nav-link");
 //se le AÑADE a .Hamburger la clase .isActive
 //se le AÑADE a .Circle la clase .isActive
 
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
 hamburger.addEventListener("click", () => {
   headerUl.classList.toggle("isActive");
   hamburger.classList.toggle("isActive");
   circle.classList.toggle("isActive");
 });
 
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
-
-// MAIN - Images
-/* Este código es para crear y manejar la funcionalidad de una galería de imágenes. */
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase o IDs y los asigno a variables. */
 const leftContainer = document.querySelector(".Left-container");
 const upContainer = document.querySelector(".Up-container");
 const downContainer = document.querySelector(".Down-container");
@@ -57,7 +30,6 @@ const starry = document.getElementById("Starry");
 //a cypresses se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Left-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 leftContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   cypresses.classList.remove("isHidden");
@@ -72,7 +44,6 @@ leftContainer.addEventListener("click", () => {
 //a olive se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Up-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 upContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   olive.classList.remove("isHidden");
@@ -87,7 +58,6 @@ upContainer.addEventListener("click", () => {
 //a starry se le QUITA la clase .isHidden,
 //a TODOS .Close-container se le QUITA la clase .isHidden.
 
-/* Agrego un addEventListener al elemento con el nombre de clase "Down-container". Cuando este elemento es clickeado, el código ejecutará las siguientes acciones: */
 downContainer.addEventListener("click", () => {
   gridContainer.classList.add("isHidden");
   starry.classList.remove("isHidden");
@@ -101,7 +71,6 @@ downContainer.addEventListener("click", () => {
 //a portrait se le AÑADE la clase .isHidden,
 //a .Grid-container se le QUITA la clase .isHidden,
 
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Close-container". Cuando cualquiera de estos elementos es clickeado, el código ejecutará las siguientes acciones: */
 closeContainer.forEach((eachClose, i) => {
   closeContainer[i].addEventListener("click", () => {
     cypresses.classList.add("isHidden");
diff --git a/js/vincentsart.js b/js/vincentsart.js
deleted file mode 100644
index d62b02f..0000000
--- a/js/vincentsart.js
+++ /dev/null
@@ -1,36 +0,0 @@
-//When I CLICK on .Hamburger
-//it ADDS the class .isActive to the .Hamburger
-//it ADDS the class .isActive to the .Header-ul
-//it ADDS the class .isActive to the .Circle
-
-const hamburger = document.querySelector(".Hamburger");
-const headerUl = document.querySelector(".Header-ul");
-const circle = document.querySelector(".Circle");
-const navLink = document.querySelectorAll(".Nav-link");
-
-hamburger.addEventListener("click", () => {
-  headerUl.classList.toggle("isActive");
-  hamburger.classList.toggle("isActive");
-  circle.classList.toggle("isActive");
-});
-
-//When I do MOUSEOVER on .navLink,
-//I ADD the class .notActive to ALL .Header-li
-
-//When I do MOUSEOVER on .navLink,
-//I REMOVE the class .notActive to ALL .Header-li
-
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("notActive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("notActive");
-    });
-  });
-});
diff --git a/js/vincentslife.js b/js/vincentslife.js
index 244c3e9..853b502 100644
--- a/js/vincentslife.js
+++ b/js/vincentslife.js
@@ -1,4 +1,4 @@
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y asignándolos a variables. */
+// Almaceno mis elementos en variables
 const hamburger = document.querySelector(".Hamburger");
 const headerUl = document.querySelector(".Header-ul");
 const circle = document.querySelector(".Circle");
@@ -9,36 +9,12 @@ const navLink = document.querySelectorAll(".Nav-link");
 //se le AÑADE a .Hamburger la clase .isActive
 //se le AÑADE a .Circle la clase .isActive
 
-/* Agrego un addEventListener al elemento con la clase "hamburger". Cuando lo clickeo, el código alternará la clase "isActive" en los elementos con las clases "Header-ul", "hamburger" y "Circle". */
 hamburger.addEventListener("click", () => {
   headerUl.classList.toggle("isActive");
   hamburger.classList.toggle("isActive");
   circle.classList.toggle("isActive");
 });
 
-//Cuando hago MOUSEOVER sobre .navLink,
-//a TODOS .Header-li les AÑADO la clase .isInactive,
-
-//Cuando hago MOUSEOUT sobre .navLink,
-//a TODOS .Header-li les QUITO la clase .isInactive,
-
-/* Agrego un addEventListener a cada elemento con el nombre de clase "Nav-link". */
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseover", () => {
-    navLink.forEach((eachHeader, j) => {
-      navLink[j].classList.add("isInactive");
-    });
-  });
-});
-navLink.forEach((eachHeader, i) => {
-  navLink[i].addEventListener("mouseout", () => {
-    navLink.forEach((eachHeader, k) => {
-      navLink[k].classList.remove("isInactive");
-    });
-  });
-});
-
-/* Selecciono elementos del documento HTML utilizando sus nombres de clase y los asigno a variables. */
 const nextBtn = document.querySelector(".Next-container");
 nextBtn.classList.add("isActive");
 const prevBtn = document.querySelector(".Prev-container");
@@ -53,8 +29,9 @@ const columnImages = document.querySelectorAll(".Column-images");
 // RESTO 1 a COUNTER
 // RESTO 2 a COUNTER
 
-/* El fragmento de código está agregando un addEventListener al último elemento hijo del elemento nextBtn.
-Cuando se hace click en este elemento, la variable counter se incrementa en 1. */
+//El fragmento de código está agregando un addEventListener al último elemento hijo del elemento nextBtn.
+//Cuando se hace click en este elemento, la variable counter se incrementa en 1.
+//El objetivo es consegui que cada vez que se hace 'click' en siguiente se avance a la siguiente imagen hasta alcanzar el máximo número en el array (counter+2) y se muestres tres columnas a la vez
 let counter = 0;
 nextBtn.lastElementChild.addEventListener("click", () => {
   counter++;
@@ -74,26 +51,25 @@ nextBtn.lastElementChild.addEventListener("click", () => {
   }
 });
 
-/* Agrego un addEventListener al último elemento hijo del elemento prevBtn. 
-Cuando se hace click en este elemento, la variable counter se decrementa en 1. 
-Si counter se vuelve menor que 0, se restablece a 0. 
-De lo contrario, se agrega la clase "isActive" al elemento nextBtn. 
-La clase "isHidden" se agrega a todos los elementos con la clase "Column-images". 
-Luego, se elimina la clase "isHidden" de los elementos columnImages[counter], columnImages[counter + 1] y columnImages[counter + 2]. 
-Finalmente, si counter es igual a 0, se elimina la clase "isActive" del elemento prevBtn. */
+// Agrego un addEventListener al último elemento hijo del elemento prevBtn.
 prevBtn.lastElementChild.addEventListener("click", () => {
+  //Cuando se hace click, la variable counter se decrementa en 1.
   counter--;
+  //Si counter se es menor que 0, se restablece a 0.
   if (counter < 0) {
     counter = 0;
+    //De lo contrario, se agrega la clase "isActive" a nextBtn.
   } else {
     nextBtn.classList.add("isActive");
     columnImages.forEach((eachColumn, i) => {
       columnImages[i].classList.add("isHidden");
     });
+    //Elimino la clase "isHidden" de los elementos columnImages[counter], columnImages[counter + 1] y columnImages[counter + 2].
     columnImages[counter].classList.remove("isHidden");
     columnImages[counter + 1].classList.remove("isHidden");
     columnImages[counter + 2].classList.remove("isHidden");
   }
+  //Si counter es igual a 0, se elimina la clase "isActive" del elemento prevBtn
   if (counter === 0) {
     prevBtn.classList.remove("isActive");
   }
@@ -103,9 +79,13 @@ prevBtn.lastElementChild.addEventListener("click", () => {
 //AGREGAR la clase .isHidden a TODAS LAS COLUMNAS, si coincide
 //AGREGAR la clase .isHidden a los DOS ÚLTIMOS ELEMENTOS, si es más ancho
 
-/*La siguiente función esconde o muestra las imágenes dependiendo del ancho de la pantalla*/
+//Muestro/oculto columnas de imágenes en función del tamaño de la ventana del navegador.
+//Si el ancho de la ventana es mayor que 1200px, se muestran tres columnas de imágenes a la vez, y los botones de "siguiente" y "anterior" están activados o desactivados según la posición actual de las imágenes. Si el ancho de la ventana es igual o menor que 1200 píxeles, se muestran todas las columnas de imágenes y se desactivan ambos botones (esto sirve para la versión móbil).
+
 function toggleHidden() {
+  //Se aplicará a dispositivos con un ancho máximo de 1200 px
   const mediaQuery = window.matchMedia("(max-width:1200px)");
+  //Esta condición se cumplirá cuando el ancho de la ventana sea mayor que 1200 px
   if (!mediaQuery.matches) {
     columnImages.forEach((eachColumn, i) => {
       columnImages[i].classList.add("isHidden");
@@ -114,17 +94,22 @@ function toggleHidden() {
       columnImages[i].classList.remove("isHidden");
     }
     nextBtn.classList.add("isActive");
+    //Activa el botón de "anterior" solo cuando counter no es igual a cero.
     if (counter != 0) {
       prevBtn.classList.add("isActive");
     }
+    //Ancho de la ventana es igual o menor que 1200 px
   } else {
     columnImages.forEach((eachColumn, i) => {
       columnImages[i].classList.add("isHidden");
     });
+    //Recorre todos los elementos del array
     for (let i = 0; i < columnImages.length; i++) {
       columnImages[i].classList.remove("isHidden");
     }
+    //Desactiva el botón siguiente
     nextBtn.classList.remove("isActive");
+    //Desactiva el botón anterior
     prevBtn.classList.remove("isActive");
   }
 }
diff --git a/loving.html b/loving.html
index 10d7e5c..b9121a9 100644
--- a/loving.html
+++ b/loving.html
@@ -1,14 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene una breve introducción a una película que se realizó en commomeración a Van Gogh
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal el cual consta de dos seccions: contenedor con texto e imagen con enlace a página web sobre la película
-  -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -20,16 +12,12 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/loving.css" media="screen" />
-    <script src="./js/loving.js" defer async></script>
+    <script src="./js/index.js" defer async></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" media="screen" />
     <title>Discover Van Gogh - Loving Vincent</title>
   </head>
 
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -70,13 +58,8 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Introducción
-      -Imagen con enlace a película
-    -->
     <main class="Main">
       <div class="Grid-container">
-        <!-- Introducción -->
         <div class="Loving-container">
           <img class="Loving-img" src="./assets/discover/lovingvincent.webp" alt="Loving Vincent Image" loading="lazy">
           <p class="Loving-p">
@@ -87,7 +70,6 @@
           </p>
         </div>
         <div class="Image-container">
-          <!-- El usuario podrá volver hacia atrás en la para ver otras experiencias -->
           <a class="Close-container" href="discover.html" rel="noreferrer" aria-label="Go back to Discover Page">
             <div class="Close-btn" aria-label="Close button">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
diff --git a/paris.html b/paris.html
index b714407..8b5fb6c 100644
--- a/paris.html
+++ b/paris.html
@@ -1,13 +1,5 @@
-<!-- 
-  Descripción: Este archivo HTML contiene tres obras pintadas por el autor en 1887 en París
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal que consiste en tres imágenes que al hacer click el usuario puede acceder a más información
-  -->
 <!DOCTYPE html>
 <html lang="en">
-  <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -25,10 +17,6 @@
     <title>Vincent's Art - Paris</title>
   </head>
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -69,12 +57,7 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Contenedor con cada sección posicionada de tal manera que tenga el resultado final en pantalla
-      -Secciones ocultas que saldrán cuando el usuario haga click en una de las tres imágenes
-    -->
     <main class="Main">
-      <!-- Contenedor principal que el usuario ve cuando entra en la galería -->
       <div class="Grid-container">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Location">
@@ -90,7 +73,6 @@ <h1 class="Main-h1">vincent's art</h1>
         <div class="Down-container">
           <img class="Grid-image" src="./assets/vincentsart/bridge-vincentvangogh.webp" alt="The Bridge at Courbevoice by Vincent Van Gogh" loading="lazy" >
         </div>
-        <!-- El usuario podrá ir hacia la siguiente sección de la galeria -->
         <a class="Forward" href="arles.html" rel="noreferrer" aria-label="See more paintings">
           <div class="Forward-btn" aria-label="Go to next year">
             <svg class="Forward-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -99,7 +81,6 @@ <h1 class="Main-h1">vincent's art</h1>
           </div>
         </a>
       </div>
-      <!-- Contenido que el usuario podrá ver cuando haga click en una de las imágenes, la estructura es exactamente la misma en los tres casos pero el conteniedo es diferent -->
       <div class="Image-container isHidden" id="Self-Portrait">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Image-info">
@@ -118,7 +99,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/self-portrait-vincentvangogh.webp" alt="Self-Portrait with Felt Hat by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -149,7 +129,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/cypresses-vincentvangogh.webp" alt="The Drinkers by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -181,7 +160,6 @@ <h1 class="Main-h1">vincent's art</h1>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/bridge-vincentvangogh.webp" alt="The Bridge at Courbevoice by Vincent Van Gogh" loading="lazy" >
           <div class="Close-container isHidden">
-            <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
                 <path
diff --git a/provence.html b/provence.html
index d5ce918..c82bd79 100644
--- a/provence.html
+++ b/provence.html
@@ -1,14 +1,6 @@
-<!-- 
-  Descripción: Este archivo HTML contiene tres obras pintadas por el autor en 1889 en Saint-Rémy-De-Provence
-Estructure general:
--Encabezado
--Barra de navegación
--Contenido principal que consiste en tres imágenes que al hacer click el usuario puede acceder a más información
-  -->
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Metadata con la descripción de la página incluida para redes sociales teniendo en cuenta el SEO -->
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -25,10 +17,6 @@
     <title>Vincent's Art - Saint-Rémy-de-Provence</title>
   </head>
   <body>
-    <!-- Sección de barra de navegación:
-    -Icono a la izquierda que lleva a la página principal durante el flujo de la página web
-    -Imagen central a modo de decoración
-    -Menú hamburguesa a la derecha que lleva a las otras páginas: menú, la vida de Vicent, el arte de Vincent, eventos relacionados con el autor y un formulario para contactar conmigo -->
     <header class="Header">
       <div class="Header-left">
         <a class="Header-link" href="index.html" rel="noreferrer">
@@ -69,12 +57,7 @@
         </div>
       </nav>
     </header>
-    <!-- Contenido principal: 
-      -Contenedor con cada sección posicionada de tal manera que tenga el resultado final en pantalla
-      -Secciones ocultas que saldrán cuando el usuario haga click en una de las tres imágenes
-    -->
     <main class="Main">
-      <!-- Contenedor principal que el usuario ve cuando entra en la galería -->
       <div class="Grid-container">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Location">
@@ -90,7 +73,6 @@ <h1 class="Main-h1">vincent's art</h1>
         <div class="Down-container">
           <img class="Grid-image" src="./assets/vincentsart/starryart-vincentvangogh.webp" alt="Starry Night by Vincent Van Gogh" loading="lazy" >
         </div>
-        <!-- El usuario podrá ir hacia la siguiente sección de la galeria -->
         <a class="Forward" href="auvers.html" rel="noreferrer" aria-label="See more paintings">
           <div class="Forward-btn" aria-label="Go to next year">
             <svg class="Forward-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -98,7 +80,6 @@ <h1 class="Main-h1">vincent's art</h1>
             </svg>
           </div>
         </a>
-        <!-- El usuario podrá ir hacia la sección anterior de la galería -->
         <a class="Backwards" href="arles.html" rel="noreferrer" aria-label="See more paintings">
           <div class="Backwards-btn" aria-label="Go to previous year">
             <svg class="Backwards-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -107,7 +88,6 @@ <h1 class="Main-h1">vincent's art</h1>
           </div>
         </a>
       </div>
-      <!-- Contenido que el usuario podrá ver cuando haga click en una de las imágenes, la estructura es exactamente la misma en los tres casos pero el conteniedo es diferent -->
       <div class="Image-container isHidden" id="Cypresses">
         <h1 class="Main-h1">vincent's art</h1>
         <div class="Image-info">
@@ -127,7 +107,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/cypresses-vincentvangogh.webp" alt="Cypresses by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -158,7 +137,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/olive-vincentvangogh.webp" alt="Olive Trees by Vincent Van Gogh" loading="lazy" >
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
@@ -189,7 +167,6 @@ <h1 class="Main-h1">vincent's art</h1>
         </div>
         <div class="Right-container">
           <img class="Grid-image" src="./assets/vincentsart/starryart-vincentvangogh.webp" alt="Starry Night by Vincent Van Gogh" loading="lazy">
-          <!-- El usuario podrá volver hacia atrás en la galería para continuar explorando las otras imágenes -->
           <div class="Close-container isHidden">
             <button class="Close-btn">
               <svg class="Close-svg" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16">
diff --git a/vincentsart.html b/vincentsart.html
index d211882..c24d3e3 100644
--- a/vincentsart.html
+++ b/vincentsart.html
@@ -20,7 +20,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;800;900&display=swap" rel="stylesheet" />
     <link rel="stylesheet" href="./css/vincentsart.css" />
-    <script src="./js/vincentsart.js" defer></script>
+    <script src="./js/index.js" defer></script>
     <link rel="icon" type="image/x-icon" href="./assets/homepage/favicon-vincentvangogh.webp" />
     <title>Discover Van Gogh - Vincent's Art</title>
   </head>
