Improve web

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "pruebas-tecnicas",
+  "version": "1.0.0",
+  "description": "Pruebas técnicas de programación para desarrolladores frontend y backend.",
+  "main": "index.js",
+  "scripts": {
+    "build": "cd web && npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/midudev/pruebas-tecnicas.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/midudev/pruebas-tecnicas/issues"
+  },
+  "homepage": "https://github.com/midudev/pruebas-tecnicas#readme"
+}

web/src/components/Badge.astro

@@ -0,0 +1,6 @@
+<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"/>
+  </svg>
+  ¡Abierto!
+</span>

web/src/components/HeaderSocialLink.astro

@@ -5,6 +5,8 @@ const { href, class: className, ...props } = Astro.props;
 ---
 <a
   href={href}
+  target="_blank"
+  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",

web/src/components/Intro.astro

@@ -1,4 +1,5 @@
 ---
+import Projects from "./Projects.astro";
 ---
 
 <section class="mb-8">
@@ -23,3 +24,5 @@
     </p>
   </footer>
 </section>
+
+<Projects />

web/src/components/Projects.astro

@@ -0,0 +1,20 @@
+---
+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 />
+    
+      <h2 class="text-3xl dark:text-yellow-300 text-yellow-950">
+        Lista de lectura
+      </h2>
+      <p>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).</p>
+    </div>
+  </a>
+</article>

web/src/layouts/Favicon.astro

@@ -4,8 +4,4 @@
 */
 ---
 <meta name="theme-color" content="#ffffff" />
-<!-- 
-  This is an example. 
-  Use https://realfavicongenerator.net to generate the icons and manifest. 
--->
 <link href="/favicon.ico" rel="shortcut icon" />