From ed36bf7c62a74a4e51db155ff924b6e0ce71beb5 Mon Sep 17 00:00:00 2001
From: AntonioMrtz <antoniomartinezfernandez17@gmail.com>
Date: Wed, 8 Nov 2023 21:17:48 +0100
Subject: [PATCH] feat : add Spotify Electron web

---
 index.html | 98 +++++++++++++++++++++++++++++++++---------------------
 1 file changed, 61 insertions(+), 37 deletions(-)

diff --git a/index.html b/index.html
index f6b9147..9e68573 100644
--- a/index.html
+++ b/index.html
@@ -249,7 +249,7 @@ <h5>Mongo DB</h5>
                     <h4>Otras tecnologías</h4>
                     <span>
                       <img src="assets/icons/electronjs.png" alt="electronjs-icon" />
-                      <h5>Electron JS</h5>
+                      <h5>Electron Js</h5>
                     </span>
                     <span>
                       <img src="assets/icons/github_actions.png" alt="github-actions-icon" />
@@ -269,7 +269,7 @@ <h5>Markdown</h5>
                     </span>
                     <span>
                       <img src="assets/icons/astro.png" alt="astrojs-icon" />
-                      <h5>Astro JS</h5>
+                      <h5>Astro Js</h5>
                     </span>
                     <span>
                       <img src="assets/icons/figma.png" alt="figma-icon" />
@@ -353,10 +353,12 @@ <h6>Constantemente realizando proyectos personales con distintas tecnologías co
           <div class="container-fluid d-flex flex-column">
             <div class="container-fluid d-flex flex-column p-0">
               <h3>Proyectos</h3>
+
+              <!-- Spotify Electron -->
               <div class="container d-flex flex-row container-proyecto reveal">
                 <div class="container d-flex container-img justify-content-center">
                   <img src="assets/images/thumbnails/SpotifyElectronLogo.webp" class="img-fluid img-resize rounded-4"
-                    alt="advent of code 2020" />
+                    alt="Spotify Electron" />
                 </div>
 
                 <div class="container-fluid container-text">
@@ -393,11 +395,12 @@ <h6>
                 </div>
               </div>
 
+              <!-- B-Baka Bot Discord -->
               <div class="container d-flex flex-row container-proyecto reveal left-proyecto">
                 <div class="container container-text">
                   <h4>B-Baka Bot Discord</h4>
                   <div class="d-flex flex-row tech-wrapper mb-4 mt-2 mb-2">
-                    <img src="assets/icons/javascript.png" alt=javascript"" />
+                    <img src="assets/icons/javascript.png" alt="javascript" />
                     <img src="assets/icons/mongodb.png" alt="mongodb" />
                   </div>
                   <h5>
@@ -422,10 +425,11 @@ <h6>
                 </div>
                 <div class="container container-img img-resize d-flex justify-content-center">
                   <img src="assets/images/thumbnails/baka_bot_profile_img.webp" class="rounded-4 img-resize"
-                    alt="advent of code 2020" />
+                    alt="B-Baka bot Discord" />
                 </div>
               </div>
 
+              <!-- Advent of code 2020 -->
               <div class="container d-flex flex-row container-proyecto reveal">
                 <div class="container d-flex container-img justify-content-center">
                   <a href="https://adventofcode.com/2020">
@@ -453,6 +457,7 @@ <h5>
                 </div>
               </div>
 
+              <!-- Mayor Óptica Web -->
               <div class="container d-flex flex-row container-proyecto reveal">
                 <div class="container container-text">
                   <h4>Web Mayor Óptica</h4>
@@ -485,10 +490,12 @@ <h6>
                 </div>
                 <div class="container container-img img-resize d-flex justify-content-center">
                   <img src="assets/images/thumbnails/mayorOptica.webp" class="img-fluid rounded-4 img-resize"
-                    alt="advent of code 2020" />
+                    alt="Mayor óptica" />
                 </div>
               </div>
 
+
+              <!-- Advent of code 2021 -->
               <div class="container d-flex flex-row container-proyecto reveal left-proyecto">
                 <div class="container d-flex container-img justify-content-center">
                   <a href="https://adventofcode.com/2021">
@@ -518,38 +525,41 @@ <h5>
 
               </div>
 
-              <div class="container d-flex flex-row container-proyecto reveal">
-
+              <!-- Spotify Electron Web -->
+              <div class="container d-flex flex-row container-proyecto reveal left-proyecto">
                 <div class="container container-text">
-                  <h4>Image To PDF</h4>
+                  <h4>Spotify Electron Web</h4>
                   <div class="d-flex flex-row tech-wrapper mb-4 mt-2 mb-2">
-                    <img src="assets/icons/python.png" alt="" />
+                    <img src="assets/icons/astro.png" alt="astro" />
+                    <img src="assets/icons/html.png" alt="html" />
+                    <img src="assets/icons/javascript.png" alt="javascript" />
+                    <img src="assets/icons/css.png" alt="css" />
+
                   </div>
                   <h5>
-                    Aplicación desarrollada en
-                    Python con la ayuda de SimpleGui
-                    que permite agrupar diferentes
-                    fotografías con una jerarquía
-                    directamente en un documento
-                    PDF.
+                    Página web desarrollada usando el framework Astro para la aplicación Spotify Electron.
                   </h5>
                   <h6>
-                    Es de gran utilidad a la
-                    hora de juntar apuntes, libros o
-                    cualquier otro elemento separado
-                    en fotografías individuales.
+                    Enfocada en ofrecer visualmente al usuario el aspecto e información de la aplicación Spotify
+                    Electron
+                    de manera organizada y siguiendo un esquema de diseño del tipo "landing page".
                   </h6>
+
                   <div class="d-flex align-items-center justify-content-start container-button">
-                    <a class="btn btn-primary" href="https://github.com/AntonioMrtz/ImageToPdf" target="_blank"
+                    <a class="btn btn-primary" href="https://github.com/AntonioMrtz/SpotifyElectron_Web" target="_blank"
                       role="button">Repositorio
                       <i class="fa-brands fa-github"></i></a>
+                    <a class="btn btn-primary" href="https://antoniomrtz.github.io/SpotifyElectron_Web/" target="_blank"
+                      role="button">Ir a la página web <i class="fa-solid fa-chevron-right"></i></a>
                   </div>
                 </div>
-                <div class="container container-img d-flex justify-content-center img-resize">
-                  <img src="assets/images/thumbnails/logoImageToPdf.webp" class="img-fluid rounded-4 img-resize"
-                    alt="advent of code 2020" />
+                <div class="container container-img img-resize d-flex justify-content-center">
+                  <img src="assets/images/thumbnails/SpotifyElectronLogo.webp" class="rounded-4 img-resize"
+                    alt="Spotify Electron Web" />
                 </div>
               </div>
+
+              <!-- Advent Js 2021 -->
               <div class="container d-flex flex-row container-proyecto reveal left-proyecto">
                 <div class="container d-flex container-img justify-content-center">
                   <a href="https://adventjs.dev/es">
@@ -570,26 +580,40 @@ <h5>25 retos de programación usando el lenguaje JavasScript</h5>
                   </div>
                 </div>
               </div>
-              <!-- <div class="container d-flex flex-row container-proyecto reveal left-proyecto">
-                <div class="container d-flex container-img justify-content-center">
-                  <a href="https://adventjs.dev/es">
-                    <img src="assets/images/thumbnails/adventJs.webp" class="img-fluid rounded-4"
-                      alt="advent of code 2020" />
-                  </a>
-                </div>
-                <div class="container d-flex flex-column container-text">
-                  <h4>Advent Js 2021</h4>
+
+              <!-- Image to PDF -->
+              <div class="container d-flex flex-row container-proyecto reveal">
+
+                <div class="container container-text">
+                  <h4>Image To PDF</h4>
                   <div class="d-flex flex-row tech-wrapper mb-4 mt-2 mb-2">
-                    <img src="assets/icons/javascript.png" alt="javascript" />
+                    <img src="assets/icons/python.png" alt="" />
                   </div>
-                  <h5>25 retos de programación usando el lenguaje JavasScript</h5>
+                  <h5>
+                    Aplicación desarrollada en
+                    Python con la ayuda de SimpleGui
+                    que permite agrupar diferentes
+                    fotografías con una jerarquía
+                    directamente en un documento
+                    PDF.
+                  </h5>
+                  <h6>
+                    Es de gran utilidad a la
+                    hora de juntar apuntes, libros o
+                    cualquier otro elemento separado
+                    en fotografías individuales.
+                  </h6>
                   <div class="d-flex align-items-center justify-content-start container-button">
-                    <a class="btn btn-primary" target="_blank" href="https://github.com/AntonioMrtz/adventJs_2021"
+                    <a class="btn btn-primary" href="https://github.com/AntonioMrtz/ImageToPdf" target="_blank"
                       role="button">Repositorio
                       <i class="fa-brands fa-github"></i></a>
                   </div>
                 </div>
-              </div> -->
+                <div class="container container-img d-flex justify-content-center img-resize">
+                  <img src="assets/images/thumbnails/logoImageToPdf.webp" class="img-fluid rounded-4 img-resize"
+                    alt="Image to PDF" />
+                </div>
+              </div>
             </div>
           </div>
         </div>