Merge branch 'main' into patch-1

Nheil3Dev · Jul 13, 2023 · cc73ebc · cc73ebc
2 parents 98a5b57 + 95a365b
commit cc73ebc
Show file tree

Hide file tree

Showing 9 changed files with 46 additions and 26 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+**/node_modules
diff --git a/pruebas/01-reading-list/README.md b/pruebas/01-reading-list/README.md
@@ -1,12 +1,13 @@
 # 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).
 
-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.
+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.
 
-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 título-2023-03-24-0943 (1)](https://github.com/midudev/pruebas-tecnicas/assets/1561955/a829323d-07e6-4937-91c6-5498481148c5)
+- [¿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**
 
+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.
+![Sin título-2023-03-24-0943 (1)](https://github.com/midudev/pruebas-tecnicas/assets/1561955/a829323d-07e6-4937-91c6-5498481148c5)
 
 ## Contexto
 

diff --git 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": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1337345848i/1453612.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",
@@ -111,7 +111,7 @@
       "title": "La Guía del Autoestopista Galáctico",
       "pages": 216,
       "genre": "Ciencia ficción",
-      "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1298807921i/8645930.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": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1327269970i/9623430.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",
@@ -165,7 +165,7 @@
         "title": "El resplandor",
         "pages": 688,
         "genre": "Terror",
-        "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1281058680i/3389955.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",
@@ -201,7 +201,7 @@
         "title": "Frankenstein",
         "pages": 280,
         "genre": "Terror",
-        "cover": "https://images-na.ssl-images-amazon.com/images/S/compressed.photo.goodreads.com/books/1631088473i/35031085.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",

diff --git 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>
+  ¡Abierto hasta el 27 de julio!
+</span>
diff --git 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
@@ -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
@@ -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>
diff --git 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
@@ -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>