From a4cc55807041bf10ba383195cf3b9525f3351fc0 Mon Sep 17 00:00:00 2001
From: Felix Icaza <fx.joliett17@gmail.com>
Date: Thu, 13 Jul 2023 11:09:20 -0600
Subject: [PATCH 1/6] fix mobile ui

---
 web/src/components/DarkModeToggle.astro   | 10 ++++++++++
 web/src/components/Header.astro           |  4 ++--
 web/src/components/HeaderSocialLink.astro |  2 +-
 web/src/components/Nav.astro              |  1 -
 web/src/components/Projects.astro         | 15 +++++++--------
 5 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/web/src/components/DarkModeToggle.astro b/web/src/components/DarkModeToggle.astro
index 1d5e30107..42941ff2b 100644
--- a/web/src/components/DarkModeToggle.astro
+++ b/web/src/components/DarkModeToggle.astro
@@ -19,6 +19,16 @@
   </button>
 </mode-toggle>
 
+<style>
+  @media (max-width: 767.98px) {
+    mode-toggle {
+      grid-row: 1/1;
+      grid-column: 1/4;
+      justify-self: end;
+    }
+  }
+</style>
+
 <script>
   function updateHTMLTheme(mode: "light" | "dark") {
     const themeColorMetaTag = document.head.querySelector(
diff --git a/web/src/components/Header.astro b/web/src/components/Header.astro
index 3d81579a0..9327d5b4b 100644
--- a/web/src/components/Header.astro
+++ b/web/src/components/Header.astro
@@ -3,7 +3,7 @@ import HeaderSocialLink from "./HeaderSocialLink.astro";
 import DarkModeToggle from "./DarkModeToggle.astro";
 ---
 
-<header class="">
+<header class="pt-2 md:pt-0 gap-y-2">
   <a
     class="unset absolute z-10 left-[50%] -top-[100rem] translate-x-[-50%] bg-white text-black px-8 py-2 focus:top-[initial]"
     href="#main"
@@ -12,7 +12,7 @@ import DarkModeToggle from "./DarkModeToggle.astro";
   </a>
 
   <div
-    class="justify-self-center py-2 gap-x-2 flex items-center content-center text-text-bold"
+    class="justify-self-center py-2 gap-x-2 md:gap-x-6 flex items-center content-center text-text-bold"
   >
   <HeaderSocialLink
     class="dark:hover:text-purple-400"
diff --git a/web/src/components/HeaderSocialLink.astro b/web/src/components/HeaderSocialLink.astro
index 666e1528d..894f8a139 100644
--- a/web/src/components/HeaderSocialLink.astro
+++ b/web/src/components/HeaderSocialLink.astro
@@ -9,7 +9,7 @@ const { href, class: className, ...props } = Astro.props;
   rel="noopener noreferrer"
   class:list={[
     className,
-    "unset ml-4 rounded-sm ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] border-b-2 border-transparent to-primary-yellow dark:hover:text-purple-400 hover:border-current transition",
+    "unset rounded-sm ease-in-out bg-left-bottom bg-[length:0%_55%] hover:bg-[length:100%_55%] border-b-2 border-transparent to-primary-yellow dark:hover:text-purple-400 hover:border-current transition text-center",
   ]}
   {...props}
 ><slot /></a>
\ No newline at end of file
diff --git a/web/src/components/Nav.astro b/web/src/components/Nav.astro
index 0c04e2bb6..886d6fce9 100644
--- a/web/src/components/Nav.astro
+++ b/web/src/components/Nav.astro
@@ -3,7 +3,6 @@ import HeaderLink from "./HeaderLink.astro";
 ---
 
 <Fragment>
-  
   <nav class="md:hidden">
     <button id="mobile-menu-open">
       <i class="fa-solid fa-bars" aria-hidden="true" title="Open mobile menu"
diff --git a/web/src/components/Projects.astro b/web/src/components/Projects.astro
index e0f44c7d8..59da54c38 100644
--- a/web/src/components/Projects.astro
+++ b/web/src/components/Projects.astro
@@ -3,14 +3,13 @@ import Badge from './Badge.astro'
 ---
 
 <article>
-  <a class="unset relative flex gap-x-8 w-full group no-underline hover:bg-black/20 rounded p-4 transition" href='https://github.com/midudev/pruebas-tecnicas/tree/main/pruebas/01-reading-list'>
-  <div class="flex justify-center items-center relative">
-    <img src="/images/1.webp" alt="Una persona en una escalera rodeado de libros" class="w-48 h-48 rounded overflow-hidden shadow-lg transform group-hover:scale-105 transition" />
-    <span class="absolute group-hover:opacity-100 group-hover:scale-125 transition block text-5xl text-white opacity-90 -rotate-6 left-2 top-2">#01</span>
-  </div>
-  <div class="flex-1">
-    <Badge />
-    
+  <a class="unset relative flex flex-col gap-8 md:flex-row w-full group no-underline hover:bg-black/20 rounded p-4 transition border border-black/20" href='https://github.com/midudev/pruebas-tecnicas/tree/main/pruebas/01-reading-list'>
+    <div class="flex justify-center items-center relative">
+      <img src="/images/1.webp" alt="Una persona en una escalera rodeado de libros" class="w-48 h-48 rounded overflow-hidden shadow-lg transform group-hover:scale-105 transition" />
+      <span class="absolute group-hover:opacity-100 group-hover:scale-125 transition block text-5xl text-white opacity-90 -rotate-6 left-2 top-2">#01</span>
+    </div>
+    <div class="flex-1">
+      <Badge />
       <h2 class="text-3xl dark:text-yellow-300 text-yellow-950">
         Lista de lectura
       </h2>

From ab3869395a9bd3e30decc8e38d54d20a46edd1f2 Mon Sep 17 00:00:00 2001
From: Yang Enmanuel Calzadilla Tejeda <enmanuelcalzat@gmail.com>
Date: Thu, 13 Jul 2023 14:10:06 -0300
Subject: [PATCH 2/6] Actualizado README.md
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Para evitar redundancia y evitar confusiones en que herramientas usar, he dejado el mensaje mas abierto dejando en claro que solo necesita ser una aplicación web. Las herramientas, frameworks o lenguajes que use el participante son arbitrarias
---
 pruebas/01-reading-list/README.md | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/pruebas/01-reading-list/README.md b/pruebas/01-reading-list/README.md
index cb6d16b92..92a50af6e 100644
--- a/pruebas/01-reading-list/README.md
+++ b/pruebas/01-reading-list/README.md
@@ -1,10 +1,8 @@
 # 01 - Desarrollo de una Aplicación de Lista de Libros
 
-El objetivo de esta prueba es diseñar e implementar una pequeña aplicación de lista de libros utilizando el framework de frontend de tu elección (React, Angular, Vue, Svelte, Qwik, etc). O, si lo prefieres, sin framework (VanillaJS).
+El objetivo de esta prueba es diseñar e implementar una pequeña aplicación web de lista de libros utilizando las herramientas de tu elección.
 
 Este proyecto busca probar tus habilidades en el manejo de interacciones con el usuario, gestión del estado, filtrado de datos y la estructuración del código.
-
-Te dejo un mockup de referencia, que no hace falta que sigas, pero para que te sirva de referencia de lo que se busca:
 ![Sin título-2023-03-24-0943 (1)](https://github.com/midudev/pruebas-tecnicas/assets/1561955/a829323d-07e6-4937-91c6-5498481148c5)
 
 

From 99faacd4296fdc3f774f0fd509dc7ff5aa2da622 Mon Sep 17 00:00:00 2001
From: eavelasquez <eavc.30@gmail.com>
Date: Thu, 13 Jul 2023 12:15:14 -0500
Subject: [PATCH 3/6] feat: update url of the covers of each book

---
 pruebas/01-reading-list/books.json | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/pruebas/01-reading-list/books.json b/pruebas/01-reading-list/books.json
index 0990fb73f..a0e261c24 100644
--- a/pruebas/01-reading-list/books.json
+++ b/pruebas/01-reading-list/books.json
@@ -23,7 +23,7 @@
             "title": "Juego de Tronos",
             "pages": 694,
             "genre": "Fantasía",
-            "cover": "http://ficticio.com/portada2.jpg",
+            "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1273763400i/8189620.jpg",
             "synopsis": "En un reino donde las estaciones duran años, una batalla épica por el trono se desarrolla.",
             "year": 1996,
             "ISBN": "978-0553103540",
@@ -42,7 +42,7 @@
           "title": "Harry Potter y la piedra filosofal",
           "pages": 223,
           "genre": "Fantasía",
-          "cover": "http://ficticio.com/portada3.jpg",
+          "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1550337333i/15868.jpg",
           "synopsis": "Un niño descubre que es un mago y comienza una aventura en una escuela de magia.",
           "year": 1997,
           "ISBN": "978-0747532699",
@@ -61,7 +61,7 @@
         "title": "1984",
         "pages": 328,
         "genre": "Ciencia ficción",
-        "cover": "http://ficticio.com/portada4.jpg",
+        "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1657781256i/61439040.jpg",
         "synopsis": "Una inquietante visión de un futuro distópico y totalitario.",
         "year": 1949,
         "ISBN": "978-0451524935",
@@ -78,7 +78,7 @@
         "title": "Apocalipsis Zombie",
         "pages": 444,
         "genre": "Zombies",
-        "cover": "http://ficticio.com/portada3.jpg",
+        "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1568875835l/50906368.jpg",
         "synopsis": "Un gallego se queda en casa en pleno apocalipsis zombie y acaba casi salvando el mundo",
         "year": 2001,
         "ISBN": "978-4444532611",
@@ -93,7 +93,7 @@
       "title": "Dune",
       "pages": 412,
       "genre": "Ciencia ficción",
-      "cover": "http://ficticio.com/portada5.jpg",
+      "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1555447414i/44767458.jpg",
       "synopsis": "En el inhóspito planeta desértico de Arrakis, una gran intriga política y familiar se desarrolla.",
       "year": 1965,
       "ISBN": "978-0441172719",
@@ -111,7 +111,7 @@
       "title": "La Guía del Autoestopista Galáctico",
       "pages": 216,
       "genre": "Ciencia ficción",
-      "cover": "http://ficticio.com/portada6.jpg",
+      "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1653311117i/6691227.jpg",
       "synopsis": "Un viaje absurdo y cómico por el espacio, con toallas.",
       "year": 1979,
       "ISBN": "978-0345391803",
@@ -129,7 +129,7 @@
       "title": "Neuromante",
       "pages": 271,
       "genre": "Ciencia ficción",
-      "cover": "http://ficticio.com/portada7.jpg",
+      "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1554437249i/6088007.jpg",
       "synopsis": "Una visión profética de la ciber-realidad y la inteligencia artificial.",
       "year": 1984,
       "ISBN": "978-0441569595",
@@ -147,7 +147,7 @@
       "title": "Fahrenheit 451",
       "pages": 249,
       "genre": "Ciencia ficción",
-      "cover": "http://ficticio.com/portada8.jpg",
+      "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1383718290i/13079982.jpg",
       "synopsis": "Una sociedad futura donde los libros están prohibidos y 'bomberos' queman cualquier libro que encuentren.",
       "year": 1953,
       "ISBN": "978-1451673319",
@@ -165,7 +165,7 @@
         "title": "El resplandor",
         "pages": 688,
         "genre": "Terror",
-        "cover": "http://ficticio.com/portada9.jpg",
+        "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1641398308i/60038757.jpg",
         "synopsis": "Una familia se muda a un hotel aislado para el invierno donde una presencia siniestra influye en el padre hacia la violencia.",
         "year": 1977,
         "ISBN": "978-0307743657",
@@ -183,7 +183,7 @@
         "title": "Drácula",
         "pages": 418,
         "genre": "Terror",
-        "cover": "http://ficticio.com/portada10.jpg",
+        "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1387151694i/17245.jpg",
         "synopsis": "La historia del infame conde Drácula y su intento de mudarse de Transilvania a Inglaterra.",
         "year": 1897,
         "ISBN": "978-0486411095",
@@ -201,7 +201,7 @@
         "title": "Frankenstein",
         "pages": 280,
         "genre": "Terror",
-        "cover": "http://ficticio.com/portada11.jpg",
+        "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1669159060i/63631742.jpg",
         "synopsis": "Un científico obsesionado crea una criatura viva a partir de partes de cuerpos robadas, con consecuencias desastrosas.",
         "year": 1818,
         "ISBN": "978-0486282114",
@@ -219,7 +219,7 @@
       "title": "La llamada de Cthulhu",
       "pages": 43,
       "genre": "Terror",
-      "cover": "http://ficticio.com/portada12.jpg",
+      "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1485924654i/34094154.jpg",
       "synopsis": "La historia de un monstruo ancestral que amenaza con revivir y dominar el mundo.",
       "year": 1928,
       "ISBN": "978-1542461690",

From fda5e51cd775c19b9e569d0cd2dee1c38e5948bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel=20Dur=C3=A1n?= <miduga@gmail.com>
Date: Thu, 13 Jul 2023 19:17:09 +0200
Subject: [PATCH 4/6] Update README.md

---
 pruebas/01-reading-list/README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/pruebas/01-reading-list/README.md b/pruebas/01-reading-list/README.md
index cb6d16b92..dea9a70b5 100644
--- a/pruebas/01-reading-list/README.md
+++ b/pruebas/01-reading-list/README.md
@@ -1,5 +1,8 @@
 # 01 - Desarrollo de una Aplicación de Lista de Libros
 
+- [¿Cómo puedo participar?](https://github.com/midudev/pruebas-tecnicas#c%C3%B3mo-participar)
+- **La prueba está abierta a revisión hasta el 27 de julio de 2023**
+
 El objetivo de esta prueba es diseñar e implementar una pequeña aplicación de lista de libros utilizando el framework de frontend de tu elección (React, Angular, Vue, Svelte, Qwik, etc). O, si lo prefieres, sin framework (VanillaJS).
 
 Este proyecto busca probar tus habilidades en el manejo de interacciones con el usuario, gestión del estado, filtrado de datos y la estructuración del código.

From f8d69574bfc9e32c0529ab485306ab31c759b787 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel=20Dur=C3=A1n?= <miduga@gmail.com>
Date: Thu, 13 Jul 2023 19:17:56 +0200
Subject: [PATCH 5/6] Add gitignore and change Badge component

---
 .gitignore                     |  1 +
 web/src/components/Badge.astro | 20 +++++++++++++++-----
 2 files changed, 16 insertions(+), 5 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..30bc16279
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+/node_modules
\ No newline at end of file
diff --git a/web/src/components/Badge.astro b/web/src/components/Badge.astro
index 4eded4eda..b660bb29d 100644
--- a/web/src/components/Badge.astro
+++ b/web/src/components/Badge.astro
@@ -1,6 +1,16 @@
-<span class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-green-700 dark:text-white border border-green-500">
-  <svg class="w-2.5 h-2.5 mr-1.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-    <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"/>
+<span
+  class="bg-green-100 text-green-800 text-xs font-medium inline-flex items-center px-2.5 py-0.5 rounded mr-2 dark:bg-green-700 dark:text-white border border-green-500"
+>
+  <svg
+    class="w-2.5 h-2.5 mr-1.5"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    viewBox="0 0 20 20"
+  >
+    <path
+      d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z"
+    ></path>
   </svg>
-  ¡Abierto!
-</span>
\ No newline at end of file
+  ¡Abierto hasta el 27 de julio!
+</span>

From 3b254caf4e5d3ba39f0789c86893a5798fe71751 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel=20Dur=C3=A1n?= <miduga@gmail.com>
Date: Thu, 13 Jul 2023 19:18:12 +0200
Subject: [PATCH 6/6] Correctly avoid node_modules folder

---
 .gitignore | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 30bc16279..600e365ec 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1 @@
-/node_modules
\ No newline at end of file
+**/node_modules
\ No newline at end of file