Showing source for: https://napsterdev.com/
Duration: 0.231808s
Server: Vercel

<!DOCTYPE html><html lang="es" class="inter_fe8b9d92-module__LINzvG__variable jetbrains_mono_7d65b77b-module__VxV-Ta__variable antialiased"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/70bc3e132a0a741e-s.p.3t6q91iet4nsy.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/logoNapster.jpg"/><link rel="preload" as="image" href="/new-profile.jpg"/><link rel="preload" as="image" href="/skill/claude-mascot.png"/><link rel="preload" as="image" href="/skill/gemini-1.png"/><link rel="preload" as="image" href="/skill/kiro.png"/><link rel="preload" as="image" href="/skill/windsurf.png"/><link rel="preload" as="image" href="/skill/antigravity-icon.png"/><link rel="preload" as="image" href="/skill/cursor.png"/><link rel="preload" as="image" href="/skill/js.png"/><link rel="preload" as="image" href="/skill/react.png"/><link rel="stylesheet" href="/_next/static/chunks/11cxxs8m-x7f1.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/3xocbmg7fr2yh.js"/><script src="/_next/static/chunks/27jktro2p5rq9.js" async=""></script><script src="/_next/static/chunks/2_tdduzgm68e2.js" async=""></script><script src="/_next/static/chunks/2afrx88ugqo46.js" async=""></script><script src="/_next/static/chunks/turbopack-1c9l7al_0f9iw.js" async=""></script><script src="/_next/static/chunks/3f-fem0rd0hs3.js" async=""></script><script src="/_next/static/chunks/14mrh2-p_w84d.js" async=""></script><script src="/_next/static/chunks/34zhdt435x37k.js" async=""></script><script src="/_next/static/chunks/3cxvlv844r8b7.js" async=""></script><script src="/_next/static/chunks/2ia14txjtgo42.js" async=""></script><script src="/_next/static/chunks/2dpzp81i5qnbm.js" async=""></script><link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-7X6SSM0PKB" as="script"/><link rel="preload" as="image" href="/skill/typescript.png"/><link rel="preload" as="image" href="/skill/react-native-1.png"/><link rel="preload" as="image" href="/skill/html.png"/><link rel="preload" as="image" href="/skill/css.png"/><link rel="preload" as="image" href="/skill/figma.png"/><link rel="preload" as="image" href="/skill/firebase.png"/><link rel="preload" as="image" href="/skill/aws.webp"/><link rel="preload" as="image" href="/skill/postman.webp"/><link rel="preload" as="image" href="/skill/github.png"/><link rel="preload" as="image" href="/skill/netlify.png"/><link rel="preload" as="image" href="/skill/notion.png"/><link rel="preload" as="image" href="/skill/trello.png"/><link rel="preload" as="image" href="/skill/slack.png"/><link rel="preload" as="image" href="/skill/jira.png"/><link rel="preload" as="image" href="/skill/workspace.png"/><link rel="preload" as="image" href="/skill/mt.png"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/71r-qZnW9FL._AC_SL1500_.jpg"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/71FeTOH71IL._AC_SL1500_.jpg"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/71sILgrZnNL._AC_SL1500_.jpg"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/715LggScjhL._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/61ni3t1ryQL._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/71bBCTIvIIL._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/71hNp8d9WvL._AC_.jpg"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/61MuErhykXL._AC_AIweblab1378949,T3_FMavif_SF480.0,480.0_PQ65_.jpg?aicid=productui-image-1"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/71KSGYZbdtL._AC_AIweblab1378949,T3_FMavif_SF480.0,480.0_PQ65_.jpg?aicid=productui-image-1"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/6112T6g2P-L._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1"/><link rel="preload" as="image" href="https://m.media-amazon.com/images/I/81VrmGXhZKL._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1"/><meta name="next-size-adjust" content=""/><title>NapsterDev - Desarrollo Web y Productividad</title><meta name="description" content="Contenido tecnológico enfocado en hacer la programación más accesible para todos. Tutoriales, recursos y artículos sobre desarrollo web, React, Next.js y más."/><link rel="author" href="https://napsterdev.com"/><meta name="author" content="NapsterDev"/><link rel="manifest" href="/manifest.json"/><meta name="keywords" content="desarrollo web,programación,React,Next.js,TypeScript,JavaScript,productividad,tutoriales"/><meta name="creator" content="NapsterDev"/><meta name="publisher" content="NapsterDev"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><meta name="google-site-verification" content="google-site-verification-code"/><meta property="og:title" content="NapsterDev - Desarrollo Web y Productividad"/><meta property="og:description" content="Contenido tecnológico enfocado en hacer la programación más accesible para todos"/><meta property="og:url" content="https://napsterdev-frontend-next-3y1sqa4a2-napsterhs-projects.vercel.app"/><meta property="og:site_name" content="NapsterDev"/><meta property="og:locale" content="es"/><meta property="og:image" content="https://napsterdev-frontend-next-3y1sqa4a2-napsterhs-projects.vercel.app/logoNapster.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="NapsterDev - Desarrollo Web y Productividad"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@napsterdev"/><meta name="twitter:title" content="NapsterDev - Desarrollo Web y Productividad"/><meta name="twitter:description" content="Contenido tecnológico enfocado en hacer la programación más accesible para todos"/><meta name="twitter:image" content="https://napsterdev-frontend-next-3y1sqa4a2-napsterhs-projects.vercel.app/logoNapster.jpg"/><link rel="shortcut icon" href="/favicon.ico"/><link rel="icon" href="/favicon.ico?favicon.3g537m-iafwfd.ico" sizes="48x48" type="image/x-icon"/><link rel="icon" href="/favicon.ico"/><link rel="apple-touch-icon" href="/logoNapster.jpg"/><script src="/_next/static/chunks/0cz1d0mv5g_q7.js" noModule=""></script></head><body class="min-h-screen bg-white dark:bg-gray-900"><div hidden=""><!--$--><!--/$--></div><script>((a,b,c,d,e,f,g,h)=>{let i=document.documentElement,j=["light","dark"];function k(b){var c;(Array.isArray(a)?a:[a]).forEach(a=>{let c="class"===a,d=c&&f?e.map(a=>f[a]||a):e;c?(i.classList.remove(...d),i.classList.add(f&&f[b]?f[b]:b)):i.setAttribute(a,b)}),c=b,h&&j.includes(c)&&(i.style.colorScheme=c)}if(d)k(d);else try{let a=localStorage.getItem(b)||c,d=g&&"system"===a?window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":a;k(d)}catch(a){}})("class","theme","system",null,["light","dark"],null,true,true)</script><nav class="fixed top-0 w-full bg-white/80 dark:bg-gray-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-700 z-50 overflow-x-hidden"><div class="container-max"><div class="flex items-center justify-between h-16 px-4 w-full max-w-full"><div class="flex-shrink-0"><img src="/logoNapster.jpg" alt="NapsterDev Logo" class="w-12 h-12 rounded-full"/></div><div class="hidden md:block"><div class="ml-10 flex items-baseline space-x-4 flex-shrink-0"><button class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 whitespace-nowrap">Inicio</button><button class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 whitespace-nowrap">Habilidades</button><button class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 whitespace-nowrap">Portafolio</button><button class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 whitespace-nowrap">Blog</button><button class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 whitespace-nowrap">Eventos</button><button class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 px-3 py-2 rounded-md text-sm font-medium transition-colors duration-200 whitespace-nowrap">Mi Setup</button><button class="bg-gradient-to-r from-blue-600 to-cyan-500 text-white px-4 py-2 rounded-lg text-sm font-bold hover:from-blue-700 hover:to-cyan-600 transition-all duration-200 shadow-lg hover:shadow-xl whitespace-nowrap">AI Dev Score 🤖</button></div></div><div class="flex items-center space-x-2"><div class="md:hidden flex-shrink-0"><button class="text-gray-700 dark:text-gray-300 hover:text-primary-600 dark:hover:text-primary-400 p-2 rounded-md"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu h-6 w-6" aria-hidden="true"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button></div><button class="relative p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200" aria-label="Switch to English"><div class="w-6 h-6 flex items-center justify-center text-lg leading-none">🇺🇸</div></button><button class="relative p-2 rounded-lg bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200" aria-label="Switch theme"><div class="relative w-6 h-6"></div></button></div></div></div></nav><section id="home" class="section-padding pt-20 md:pt-24 md:min-h-screen flex items-center"><div class="container-max"><div class="grid lg:grid-cols-2 gap-12 items-center"><div class="space-y-8" style="opacity:0;transform:translateX(-50px)"><div class="space-y-4"><h1 class="text-4xl md:text-6xl font-bold text-gray-900 dark:text-white mb-10 mt-10">Hola, soy<!-- --> <br/><span class="text-primary-600 dark:text-primary-400 mt-5"></span><span class="ml-0.5 inline-block w-0.5 h-8 md:h-10 align-middle bg-primary-600 dark:bg-primary-400 opacity-100"></span></h1><p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 font-medium">IA | Tecnología | Hacks &amp; Tips | Productividad</p><p class="text-lg text-gray-600 dark:text-gray-400 max-w-2xl">Ayudo a desarrolladores y entusiastas de la tecnología a crecer profesionalmente a través de contenido educativo tech, tips prácticos y herramientas de productividad.</p></div><div class="flex flex-wrap justify-center md:justify-start gap-3 sm:gap-4"><a href="https://www.youtube.com/@napsterDev" target="_blank" rel="noopener noreferrer" class="p-2.5 md:p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-red-500 dark:hover:text-red-500" aria-label="YouTube" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="w-5 h-5 md:w-6 md:h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg></a><a href="https://www.tiktok.com/@napster.dev" target="_blank" rel="noopener noreferrer" class="p-2.5 md:p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-cyan-500 dark:hover:text-cyan-500" aria-label="TikTok" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-5 h-5 md:w-6 md:h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"></path></svg></a><a href="https://www.instagram.com/napster.dev/" target="_blank" rel="noopener noreferrer" class="p-2.5 md:p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-pink-500 dark:hover:text-pink-500" aria-label="Instagram" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-5 h-5 md:w-6 md:h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a><a href="https://github.com/napsterh" target="_blank" rel="noopener noreferrer" class="p-2.5 md:p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-gray-900 dark:hover:text-white" aria-label="GitHub" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" class="w-5 h-5 md:w-6 md:h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.facebook.com/https://www.facebook.com/profile.php?id=100086274308478" target="_blank" rel="noopener noreferrer" class="p-2.5 md:p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-blue-500 dark:hover:text-blue-500" aria-label="Facebook" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="w-5 h-5 md:w-6 md:h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg></a><a href="https://www.linkedin.com/in/homer-lopez/" target="_blank" rel="noopener noreferrer" class="p-2.5 md:p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-400" aria-label="LinkedIn" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-5 h-5 md:w-6 md:h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a><a href="https://x.com/napster_lv" target="_blank" rel="noopener noreferrer" class="p-2.5 md:p-3 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-gray-900 dark:hover:text-white" aria-label="Twitter" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="w-5 h-5 md:w-6 md:h-6" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"></path></svg></a></div><div class="flex flex-col sm:flex-row gap-4"><button class="px-6 py-3 bg-green-300 dark:bg-green-300 dark:text-black rounded-lg font-medium hover:bg-green-400 transition-colors">Recursos Gratuitos</button><button class="px-6 py-3 bg-gradient-to-r from-blue-600 to-cyan-500 text-white rounded-lg font-bold hover:from-blue-700 hover:to-cyan-600 transition-all duration-200 shadow-lg hover:shadow-xl">AI Dev Score 🤖</button></div></div><div class="flex justify-center lg:justify-end" style="opacity:0;transform:translateX(50px)"><div class="relative"><div class="w-80 h-80 rounded-full bg-gradient-to-br from-primary-500 to-secondary-600 p-1"><div class="w-full h-full rounded-full overflow-hidden"><img src="/new-profile.jpg" alt="Homer López - Desarrollador Full Stack" class="w-full h-full object-cover filter brightness-100 contrast-100 saturate-100"/></div></div><div class="absolute -top-4 -right-4 bg-primary-500 text-white p-3 rounded-full"><span class="text-2xl">⚡</span></div><div class="absolute -bottom-4 -left-4 bg-primary-500 text-white p-3 rounded-full"><span class="text-2xl">🚀</span></div></div></div></div><div class="mt-20" style="opacity:0;transform:translateY(50px)"><div class="text-center mb-12"><h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">Mis 4 Pilares</h2><p class="text-base md:text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Todo mi contenido se basa en estos cuatro pilares fundamentales para el crecimiento profesional</p></div><div class="md:hidden"><div class="relative"><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 text-center" style="opacity:0;transform:translateX(50px)"><div class="text-6xl mb-4">🤖</div><h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">IA para Desarrolladores</h3><p class="text-gray-600 dark:text-gray-400">Cómo integrar la inteligencia artificial en tu flujo de trabajo como desarrollador.</p></div><div class="flex justify-center items-center gap-4 mt-6 md:hidden"><button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="Previous pillar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left w-5 h-5" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg></button><div class="flex gap-2"><button class="w-2 h-2 rounded-full transition-all bg-primary-600 w-6" aria-label="Go to pillar 1"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to pillar 2"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to pillar 3"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to pillar 4"></button></div><button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="Next pillar"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-5 h-5" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></button></div></div></div><div class="hidden md:grid md:grid-cols-4 gap-8"><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 text-center border border-gray-200 dark:border-gray-700" style="opacity:0;transform:translateY(30px)"><div class="text-6xl mb-4">🤖</div><h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">IA para Desarrolladores</h3><p class="text-gray-600 dark:text-gray-400">Cómo integrar la inteligencia artificial en tu flujo de trabajo como desarrollador.</p></div><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 text-center border border-gray-200 dark:border-gray-700" style="opacity:0;transform:translateY(30px)"><div class="text-6xl mb-4">🧠</div><h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Tecnología Explicada Fácil</h3><p class="text-gray-600 dark:text-gray-400">Conceptos complejos de programación y tecnología explicados de manera simple y práctica.</p></div><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 text-center border border-gray-200 dark:border-gray-700" style="opacity:0;transform:translateY(30px)"><div class="text-6xl mb-4">⚡</div><h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Hacks y Tips de Programación</h3><p class="text-gray-600 dark:text-gray-400">Trucos, atajos y técnicas que te harán más eficiente como desarrollador.</p></div><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg hover:shadow-xl transition-shadow duration-300 text-center border border-gray-200 dark:border-gray-700" style="opacity:0;transform:translateY(30px)"><div class="text-6xl mb-4">🚀</div><h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">Productividad para Devs</h3><p class="text-gray-600 dark:text-gray-400">Herramientas, metodologías y estrategias para maximizar tu productividad y optimizar tu CV.</p></div></div></div></div></section><section id="skills" class="section-padding bg-white dark:bg-gray-800"><div class="container-max"><div class="text-center mb-12" style="opacity:0;transform:translateY(30px)"><h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">Habilidades &amp; Tecnologías</h2><p class="text-base md:text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Mi stack tecnológico y las herramientas con las que trabajo a diario</p></div><div class="space-y-10"><div class="md:hidden"><div class="space-y-6" style="opacity:0;transform:translateX(50px)"><div class="text-center"><div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-yellow-500 to-yellow-600 text-white font-semibold text-lg shadow-lg">IA/Agentes</div></div><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border-yellow-200 dark:border-yellow-800 border-2"><div class="grid grid-cols-2 gap-6 justify-items-center"><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Claude Code" tabindex="0"><img src="/skill/claude-mascot.png" alt="Claude Code" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-100 translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Claude Code</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Gemini" tabindex="0"><img src="/skill/gemini-1.png" alt="Gemini" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-100 translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Gemini</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-kiro" tabindex="0"><img src="/skill/kiro.png" alt="Kiro" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-100 translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">kiro</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Windsurf" tabindex="0"><img src="/skill/windsurf.png" alt="Windsurf" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-100 translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Windsurf</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Antigravity" tabindex="0"><img src="/skill/antigravity-icon.png" alt="Antigravity" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-100 translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Antigravity</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Cursor IDE" tabindex="0"><img src="/skill/cursor.png" alt="Cursor" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-100 translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Cursor IDE</div></div></div></div></div></div><div class="flex justify-center items-center gap-4 mt-6 md:hidden"><button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="Previous category"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left w-5 h-5" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg></button><div class="flex gap-2"><button class="w-2 h-2 rounded-full transition-all bg-primary-600 w-6" aria-label="Go to category 1"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to category 2"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to category 3"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to category 4"></button></div><button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="Next category"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-5 h-5" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></button></div></div><div class="hidden md:block space-y-10"><div class="space-y-6" style="opacity:0;transform:translateY(30px)"><div class="text-center"><div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-yellow-500 to-yellow-600 text-white font-semibold text-lg shadow-lg">IA/Agentes</div></div><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border-yellow-200 dark:border-yellow-800 border-2"><div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6 justify-items-center"><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Claude Code" tabindex="0"><img src="/skill/claude-mascot.png" alt="Claude Code" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Claude Code</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Gemini" tabindex="0"><img src="/skill/gemini-1.png" alt="Gemini" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Gemini</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-kiro" tabindex="0"><img src="/skill/kiro.png" alt="Kiro" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">kiro</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Windsurf" tabindex="0"><img src="/skill/windsurf.png" alt="Windsurf" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Windsurf</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Antigravity" tabindex="0"><img src="/skill/antigravity-icon.png" alt="Antigravity" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Antigravity</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="IA/Agentes-Cursor IDE" tabindex="0"><img src="/skill/cursor.png" alt="Cursor" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Cursor IDE</div></div></div></div></div></div><div class="space-y-6" style="opacity:0;transform:translateY(30px)"><div class="text-center"><div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-blue-500 to-blue-600 text-white font-semibold text-lg shadow-lg">Lenguajes/Frameworks</div></div><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border-blue-200 dark:border-blue-800 border-2"><div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6 justify-items-center"><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Lenguajes/Frameworks-JavaScript" tabindex="0"><img src="/skill/js.png" alt="JavaScript" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">JavaScript</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Lenguajes/Frameworks-React JS" tabindex="0"><img src="/skill/react.png" alt="React" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">React JS</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Lenguajes/Frameworks-TypeScript" tabindex="0"><img src="/skill/typescript.png" alt="TypeScript" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">TypeScript</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Lenguajes/Frameworks-React Native" tabindex="0"><img src="/skill/react-native-1.png" alt="React Native" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">React Native</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Lenguajes/Frameworks-HTML5" tabindex="0"><img src="/skill/html.png" alt="HTML5" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">HTML5</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Lenguajes/Frameworks-CSS" tabindex="0"><img src="/skill/css.png" alt="CSS" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">CSS</div></div></div></div></div></div><div class="space-y-6" style="opacity:0;transform:translateY(30px)"><div class="text-center"><div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-orange-500 to-orange-600 text-white font-semibold text-lg shadow-lg">Herramientas/DevOps</div></div><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border-orange-200 dark:border-orange-800 border-2"><div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6 justify-items-center"><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Herramientas/DevOps-Figma" tabindex="0"><img src="/skill/figma.png" alt="Figma" width="30" height="30"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Figma</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Herramientas/DevOps-Firebase" tabindex="0"><img src="/skill/firebase.png" alt="Firebase" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Firebase</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Herramientas/DevOps-AWS" tabindex="0"><img src="/skill/aws.webp" alt="windsurf" width="60" height="60"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">AWS</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Herramientas/DevOps-Postman" tabindex="0"><img src="/skill/postman.webp" alt="postman" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Postman</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Herramientas/DevOps-GitHub" tabindex="0"><img src="/skill/github.png" alt="github" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">GitHub</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Herramientas/DevOps-Netlify" tabindex="0"><img src="/skill/netlify.png" alt="netlify" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Netlify</div></div></div></div></div></div><div class="space-y-6" style="opacity:0;transform:translateY(30px)"><div class="text-center"><div class="inline-flex items-center px-6 py-3 rounded-full bg-gradient-to-r from-green-500 to-green-600 text-white font-semibold text-lg shadow-lg">Productividad</div></div><div class="bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg border-green-200 dark:border-green-800 border-2"><div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-6 justify-items-center"><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Productividad-Notion" tabindex="0"><img src="/skill/notion.png" alt="notion" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Notion</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Productividad-Trello" tabindex="0"><img src="/skill/trello.png" alt="trello" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Trello</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Productividad-Slack" tabindex="0"><img src="/skill/slack.png" alt="slack" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Slack</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Productividad-Jira" tabindex="0"><img src="/skill/jira.png" alt="jira" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Jira</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Productividad-Workspace" tabindex="0"><img src="/skill/workspace.png" alt="workspace" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Workspace</div></div></div><div class="relative group" style="opacity:0;transform:scale(0.8)"><div class="w-16 h-16 flex items-center justify-center text-4xl bg-gray-50 dark:bg-gray-700 rounded-xl shadow-md hover:shadow-lg transition-all duration-300 cursor-pointer border-2 border-transparent hover:border-gray-300 dark:hover:border-gray-500" data-skill="Productividad-Teams" tabindex="0"><img src="/skill/mt.png" alt="microsoft teams" width="40" height="40"/></div><div class="mt-2 text-center transition-all duration-200 opacity-0 translate-y-1 sm:opacity-100 sm:translate-y-0"><div class="text-xs font-medium text-gray-700 dark:text-gray-300">Teams</div></div></div></div></div></div></div><div class="mt-16 text-center" style="opacity:0;transform:translateY(30px)"><div class="bg-gradient-to-r from-primary-50 to-secondary-50 dark:from-primary-900/20 dark:to-secondary-900/20 p-6 rounded-xl shadow-lg border border-primary-200 dark:border-primary-800"><div class="flex items-center justify-center gap-3 mb-3"><span class="text-2xl">📚</span><h3 class="text-xl font-bold text-primary-900 dark:text-primary-100">Siempre Aprendiendo</h3></div><p class="text-primary-700 dark:text-primary-300 font-medium">La tecnología evoluciona constantemente. Estas habilidades se actualizan regularmente con nuevas tecnologías y mejores prácticas del ecosistema de desarrollo.</p></div></div></div></div></section><section id="portfolio" class="section-padding bg-gray-50 dark:bg-gray-900"><div class="container-max"><div class="text-center mb-12" style="opacity:0;transform:translateY(30px)"><h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">Portafolio y Proyectos</h2><p class="text-base md:text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Proyectos que demuestran mis habilidades y contribuyen a la comunidad de desarrolladores</p></div><div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"><div class="flex items-center gap-3 mb-4 md:mb-0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 640 512" class="w-8 h-8 text-blue-600" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path></svg><h3 class="text-2xl font-bold text-gray-900 dark:text-white">Proyectos</h3></div><div class="flex flex-wrap gap-2" style="opacity:0;transform:translateX(20px)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-funnel w-5 h-5 text-gray-500 dark:text-gray-400 mr-2 mt-2" aria-hidden="true"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"></path></svg><button class="px-3 py-2 sm:px-4 sm:py-2 rounded-lg font-medium text-xs sm:text-sm transition-colors duration-200 bg-primary-600 text-white">Todos</button><button class="px-3 py-2 sm:px-4 sm:py-2 rounded-lg font-medium text-xs sm:text-sm transition-colors duration-200 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">JavaScript</button><button class="px-3 py-2 sm:px-4 sm:py-2 rounded-lg font-medium text-xs sm:text-sm transition-colors duration-200 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">React Native</button><button class="px-3 py-2 sm:px-4 sm:py-2 rounded-lg font-medium text-xs sm:text-sm transition-colors duration-200 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">React</button></div></div><div class="flex justify-center items-center py-12"><div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div></div></div></section><section id="blog" class="section-padding bg-white dark:bg-gray-900"><div class="container-max"><div class="text-center mb-12" style="opacity:0;transform:translateY(30px)"><h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">Blog y Contenido</h2><p class="text-base md:text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Artículos, tutoriales y reflexiones sobre desarrollo, tecnología y productividad</p></div><div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8"><div class="flex items-center gap-3"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="w-8 h-8 text-blue-600" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M552 64H112c-20.858 0-38.643 13.377-45.248 32H24c-13.255 0-24 10.745-24 24v272c0 30.928 25.072 56 56 56h496c13.255 0 24-10.745 24-24V88c0-13.255-10.745-24-24-24zM48 392V144h16v248c0 4.411-3.589 8-8 8s-8-3.589-8-8zm480 8H111.422c.374-2.614.578-5.283.578-8V112h416v288zM172 280h136c6.627 0 12-5.373 12-12v-96c0-6.627-5.373-12-12-12H172c-6.627 0-12 5.373-12 12v96c0 6.627 5.373 12 12 12zm28-80h80v40h-80v-40zm-40 140v-24c0-6.627 5.373-12 12-12h136c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H172c-6.627 0-12-5.373-12-12zm192 0v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0-144v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12zm0 72v-24c0-6.627 5.373-12 12-12h104c6.627 0 12 5.373 12 12v24c0 6.627-5.373 12-12 12H364c-6.627 0-12-5.373-12-12z"></path></svg><h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 md:mb-0">Artículos</h3></div><div class="flex flex-wrap gap-2" style="opacity:0;transform:translateX(20px)"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-funnel w-5 h-5 text-gray-500 dark:text-gray-400 mr-2 mt-2" aria-hidden="true"><path d="M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z"></path></svg><button class="px-3 py-2 sm:px-4 sm:py-2 rounded-lg font-medium text-xs sm:text-sm transition-colors duration-200 bg-primary-600 text-white">Todos</button><button class="px-3 py-2 sm:px-4 sm:py-2 rounded-lg font-medium text-xs sm:text-sm transition-colors duration-200 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Tecnología Fácil</button><button class="px-3 py-2 sm:px-4 sm:py-2 rounded-lg font-medium text-xs sm:text-sm transition-colors duration-200 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Hacks de Código</button><button class="px-3 py-2 sm:px-4 sm:py-2 rounded-lg font-medium text-xs sm:text-sm transition-colors duration-200 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Productividad</button><button class="px-3 py-2 sm:px-4 sm:py-2 rounded-lg font-medium text-xs sm:text-sm transition-colors duration-200 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600">Inteligencia Artificial</button></div></div><div class="flex justify-center items-center py-12"><div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div></div><div class="mb-12 mt-8"><div class="flex items-center gap-3 mb-6"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="w-8 h-8 text-red-600" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg><h3 class="text-2xl font-bold text-gray-900 dark:text-white">Videos de YouTube</h3></div><div class="flex justify-center items-center py-12"><div class="animate-spin rounded-full h-12 w-12 border-b-2 border-red-600"></div></div></div></div></section><section id="newsletter" class="section-padding bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20"><div class="container-max"><div class="text-center max-w-4xl mx-auto" style="opacity:0;transform:translateY(30px)"><h2 class="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">Únete a la Newsletter</h2><p class="text-lg text-gray-600 dark:text-gray-400 mb-8">Recibe contenido exclusivo, tips y recursos directamente en tu email</p><div class="grid md:grid-cols-3 gap-6 mb-8"><div class="text-center p-4" style="opacity:0;transform:translateY(20px)"><div class="flex justify-center mb-3 text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gift w-6 h-6" aria-hidden="true"><path d="M12 7v14"></path><path d="M20 11v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-8"></path><path d="M7.5 7a1 1 0 0 1 0-5A4.8 8 0 0 1 12 7a4.8 8 0 0 1 4.5-5 1 1 0 0 1 0 5"></path><rect x="3" y="7" width="18" height="4" rx="1"></rect></svg></div><h3 class="font-semibold text-gray-900 dark:text-white mb-2">Contenido Exclusivo</h3><p class="text-sm text-gray-600 dark:text-gray-400">Tutoriales y tips que no publico en ningún otro lugar</p></div><div class="text-center p-4" style="opacity:0;transform:translateY(20px)"><div class="flex justify-center mb-3 text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-zap w-6 h-6" aria-hidden="true"><path d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"></path></svg></div><h3 class="font-semibold text-gray-900 dark:text-white mb-2">Tips Semanales</h3><p class="text-sm text-gray-600 dark:text-gray-400">Cada semana un tip práctico para mejorar tu productividad</p></div><div class="text-center p-4" style="opacity:0;transform:translateY(20px)"><div class="flex justify-center mb-3 text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-book-open w-6 h-6" aria-hidden="true"><path d="M12 5v16"></path><path d="M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z"></path></svg></div><h3 class="font-semibold text-gray-900 dark:text-white mb-2">Recursos Gratis</h3><p class="text-sm text-gray-600 dark:text-gray-400">Acceso prioritario a nuevos cheatsheets y guías</p></div></div><form class="max-w-md mx-auto"><div class="flex flex-col sm:flex-row gap-3"><input type="email" placeholder="[email protected]" class="flex-1 px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-primary-500" required="" value=""/><button type="submit" class="px-6 py-3 bg-primary-600 text-white rounded-lg font-medium hover:bg-primary-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">Suscribirme</button></div></form></div></div></section><div class="min-h-screen flex items-center justify-center"><div class="animate-spin rounded-full h-12 w-12 border-b-2 border-primary-600"></div></div><section id="setup" class="section-padding bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-900/20 dark:to-pink-900/20"><div class="container-max"><div class="text-center mb-12" style="opacity:0;transform:translateY(30px)"><h2 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-4">🖥️ Mi Setup</h2><p class="text-base md:text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto">Las herramientas y equipos que uso a diario para programar, crear contenido y ser productivo.</p></div><div class="md:hidden"><div class="card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateX(50px)"><div class="w-full h-56 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/71r-qZnW9FL._AC_SL1500_.jpg" alt="Redragon Teclado mecánico inalámbrico K681 Pro" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1 text-lg">Redragon Teclado mecánico inalámbrico K681 Pro</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Teclado mecánico inalámbrico con switches blue RGB y batería de larga duración.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></div><div class="flex justify-center items-center gap-4 mt-6 md:hidden"><button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="Previous product"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-left w-5 h-5" aria-hidden="true"><path d="m15 18-6-6 6-6"></path></svg></button><div class="flex gap-2"><button class="w-2 h-2 rounded-full transition-all bg-primary-600 w-6" aria-label="Go to product 1"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 2"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 3"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 4"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 5"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 6"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 7"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 8"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 9"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 10"></button><button class="w-2 h-2 rounded-full transition-all bg-gray-300 dark:bg-gray-600" aria-label="Go to product 11"></button></div><button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors" aria-label="Next product"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-right w-5 h-5" aria-hidden="true"><path d="m9 18 6-6-6-6"></path></svg></button></div></div><div class="hidden sm:grid sm:grid-cols-2 lg:grid-cols-4 gap-4"><a href="https://amzn.to/4c7W6jx" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/71r-qZnW9FL._AC_SL1500_.jpg" alt="Redragon Teclado mecánico inalámbrico K681 Pro" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">Redragon Teclado mecánico inalámbrico K681 Pro</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Teclado mecánico inalámbrico con switches blue RGB y batería de larga duración.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/4zuUZEN" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/71FeTOH71IL._AC_SL1500_.jpg" alt="HyperX QuadCast Rouge" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">HyperX QuadCast Rouge</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Micrófono USB de alta calidad con patrón polarizable y tapa antipop.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/4gyo3SZ" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/71sILgrZnNL._AC_SL1500_.jpg" alt="DJI Osmo Pocket 3 Vlog Combo" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">DJI Osmo Pocket 3 Vlog Combo</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Cámara compacta 4K con estabilización avanzada para contenido profesional.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/4gZo8zi" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/715LggScjhL._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1" alt="Samsung Monitor curvo ViewFinity S65UC" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">Samsung Monitor curvo ViewFinity S65UC</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Monitor curvo 34&quot; 4K con conexión USB-C para productividad multitarea.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/4Ac1s7Q" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/61ni3t1ryQL._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1" alt="Logitech MX Master 3S" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">Logitech MX Master 3S</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Mouse ergonómico inalámbrico con seguimiento de 8000 DPI y rueda silenciosa.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/4rcRm2q" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/71bBCTIvIIL._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1" alt="SanDisk 1TB SSD portátil" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">SanDisk 1TB SSD portátil</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">SSD externo portátil con velocidad de transferencia de hasta 1050MB/s.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/46GNyND" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/71hNp8d9WvL._AC_.jpg" alt="Amazon Echo Dot" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">Amazon Echo Dot</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Smart speaker compacto con Alexa para control de hogar inteligente.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/4xVSCJT" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/61MuErhykXL._AC_AIweblab1378949,T3_FMavif_SF480.0,480.0_PQ65_.jpg?aicid=productui-image-1" alt="Govee Enchufe Inteligente" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">Govee Enchufe Inteligente</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Enchufe inteligente WiFi con control por voz y programación horaria.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/4AhB0tE" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/71KSGYZbdtL._AC_AIweblab1378949,T3_FMavif_SF480.0,480.0_PQ65_.jpg?aicid=productui-image-1" alt="Standing Desk de doble motor" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">Standing Desk de doble motor</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Escritorio ajustable en altura con doble motor y control de memoria.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/4inXZwx" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/6112T6g2P-L._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1" alt="MacBook Pro 2025 con chip M5" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">MacBook Pro 2025 con chip M5</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Laptop profesional con chip M5 para máximo rendimiento en desarrollo.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a><a href="https://amzn.to/46oTb2D" target="_blank" rel="noopener noreferrer sponsored" class="group card hover:shadow-lg transition-all duration-300 relative overflow-hidden" style="opacity:0;transform:translateY(20px)"><div class="w-full h-40 bg-gray-100 dark:bg-gray-700 rounded-lg mb-4 overflow-hidden flex items-center justify-center"><img src="https://m.media-amazon.com/images/I/81VrmGXhZKL._AC_AIweblab1378949,T3_FMavif_SF516.0,327.0_PQ65_.jpg?aicid=productui-image-1" alt="DJI Osmo Action 4 Essential Combo" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/></div><h4 class="font-bold text-gray-900 dark:text-white group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors mb-1">DJI Osmo Action 4 Essential Combo</h4><p class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2 mb-3">Cámara de acción 4K resistente al agua con estabilización horizonte.</p><div class="flex items-center gap-1 text-sm font-medium text-primary-600 dark:text-primary-400"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-shopping-bag w-3.5 h-3.5" aria-hidden="true"><path d="M16 10a4 4 0 0 1-8 0"></path><path d="M3.103 6.034h17.794"></path><path d="M3.4 5.467a2 2 0 0 0-.4 1.2V20a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6.667a2 2 0 0 0-.4-1.2l-2-2.667A2 2 0 0 0 17 2H7a2 2 0 0 0-1.6.8z"></path></svg><span>Ver en Amazon</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-external-link w-3 h-3 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" aria-hidden="true"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></div></a></div></div></section><footer class="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700"><div class="container-max"><div class="px-4 sm:px-6 md:px-12 py-8 sm:py-12"><div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8"><div class="lg:col-span-2 text-center md:text-left" style="opacity:0;transform:translateY(20px)"><h3 class="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">NapsterDev</h3><p class="text-gray-600 dark:text-gray-400 mb-4 md:mb-6 max-w-md text-base md:text-sm mx-auto md:mx-0">Creador de contenido tecnológico enfocado en hacer la programación más accesible y productiva para desarrolladores de todos los niveles.</p><div class="flex space-x-3 md:space-x-4 justify-center md:justify-start"><a href="https://www.youtube.com/@napsterDev" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-red-500 dark:hover:text-red-500" aria-label="YouTube" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 576 512" class="w-4 h-4 md:w-5 md:h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"></path></svg></a><a href="https://www.tiktok.com/@napster.dev" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-cyan-500 dark:hover:text-cyan-500" aria-label="TikTok" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-4 h-4 md:w-5 md:h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"></path></svg></a><a href="https://www.instagram.com/napster.dev/" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-pink-500 dark:hover:text-pink-500" aria-label="Instagram" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-4 h-4 md:w-5 md:h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path></svg></a><a href="https://github.com/napsterh" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-gray-900 dark:hover:text-white" aria-label="GitHub" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 496 512" class="w-4 h-4 md:w-5 md:h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a><a href="https://www.facebook.com/https://www.facebook.com/profile.php?id=100086274308478" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-blue-500 dark:hover:text-blue-500" aria-label="Facebook" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class="w-4 h-4 md:w-5 md:h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"></path></svg></a><a href="https://www.linkedin.com/in/homer-lopez/" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-blue-600 dark:hover:text-blue-400" aria-label="LinkedIn" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 448 512" class="w-4 h-4 md:w-5 md:h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a><a href="https://x.com/napster_lv" target="_blank" rel="noopener noreferrer" class="p-2 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 transition-colors duration-200 hover:text-gray-900 dark:hover:text-white" aria-label="Twitter" tabindex="0"><svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="w-4 h-4 md:w-5 md:h-5" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z"></path></svg></a></div></div><div class="text-center md:text-left" style="opacity:0;transform:translateY(20px)"><h4 class="font-bold text-gray-900 dark:text-white mb-3 md:mb-4 text-base md:text-base">Navegación</h4><ul class="space-y-2 md:space-y-2"><li><button class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 text-center md:text-left text-sm md:text-base w-full">Inicio</button></li><li><button class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 text-center md:text-left text-sm md:text-base w-full">Habilidades</button></li><li><button class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 text-center md:text-left text-sm md:text-base w-full">Portafolio</button></li><li><button class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 text-center md:text-left text-sm md:text-base w-full">Blog</button></li><li><button class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 text-center md:text-left text-sm md:text-base w-full">Eventos</button></li><li><button class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 text-center md:text-left text-sm md:text-base w-full">Mi Setup</button></li><li><button class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 text-center md:text-left text-sm md:text-base w-full">AI Dev Score 🤖</button></li></ul></div><div class="text-center md:text-left" style="opacity:0;transform:translateY(20px)"><h4 class="font-bold text-gray-900 dark:text-white mb-3 md:mb-4 text-base md:text-base">Herramientas</h4><ul class="space-y-2 md:space-y-2"><li><a href="/scoreAi" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 text-sm md:text-sm flex items-center gap-2 justify-center md:justify-start">🤖 <!-- -->AI Dev Score 🤖</a></li><li><a href="#setup" class="text-gray-600 dark:text-gray-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors duration-200 text-sm md:text-sm flex items-center gap-2 justify-center md:justify-start">🖥️ <!-- -->Mi Setup</a></li></ul></div></div></div><div class="border-t border-gray-200 dark:border-gray-700 py-4 md:py-6"><div class="flex flex-col md:flex-row justify-between items-center gap-3 md:gap-4 px-4 sm:px-6 md:px-12"><div class="flex items-center justify-center md:justify-start gap-2 text-gray-600 dark:text-gray-400 text-base md:text-sm"><span>© <!-- -->2026<!-- --> NapsterDev. <!-- -->Hecho con</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-heart w-4 h-4 text-red-500" aria-hidden="true"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path></svg><span>y</span><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-brain-circuit w-4 h-4 text-yellow-500" aria-hidden="true"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z"></path><path d="M9 13a4.5 4.5 0 0 0 3-4"></path><path d="M6.003 5.125A3 3 0 0 0 6.401 6.5"></path><path d="M3.477 10.896a4 4 0 0 1 .585-.396"></path><path d="M6 18a4 4 0 0 1-1.967-.516"></path><path d="M12 13h4"></path><path d="M12 18h6a2 2 0 0 1 2 2v1"></path><path d="M12 8h8"></path><path d="M16 8V5a2 2 0 0 1 2-2"></path><circle cx="16" cy="13" r=".5"></circle><circle cx="18" cy="3" r=".5"></circle><circle cx="20" cy="21" r=".5"></circle><circle cx="20" cy="8" r=".5"></circle></svg><span>y mucho ☕</span></div><div class="flex items-center justify-center md:justify-end gap-4 md:gap-6 text-base md:text-sm text-gray-600 dark:text-gray-400"><a href="/privacidad" class="hover:text-gray-900 dark:hover:text-white transition-colors">Privacidad</a><a href="/terminos" class="hover:text-gray-900 dark:hover:text-white transition-colors">Términos</a><span>Perú 🇵🇪</span></div></div></div></div></footer><!--$--><!--/$--><script src="/_next/static/chunks/3xocbmg7fr2yh.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[79520,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"\"]\n3:I[85728,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"LanguageProvider\"]\n4:I[80492,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"ThemeProvider\"]\n5:I[39756,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"default\"]\n6:I[37457,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"default\"]\n7:I[72776,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/34zhdt435x37k.js\",\"/_next/static/chunks/3cxvlv844r8b7.js\",\"/_next/static/chunks/2ia14txjtgo42.js\",\"/_next/static/chunks/2dpzp81i5qnbm.js\"],\"default\"]\n8:I[23538,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/34zhdt435x37k.js\",\"/_next/static/chunks/3cxvlv844r8b7.js\",\"/_next/static/chunks/2ia14txjtgo42.js\",\"/_next/static/chunks/2dpzp81i5qnbm.js\"],\"default\"]\n9:I[98072,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/34zhdt435x37k.js\",\"/_next/static/chunks/3cxvlv844r8b7.js\",\"/_next/static/chunks/2ia14txjtgo42.js\",\"/_next/static/chunks/2dpzp81i5qnbm.js\"],\"default\"]\na:I[90839,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/34zhdt435x37k.js\",\"/_next/static/chunks/3cxvlv844r8b7.js\",\"/_next/static/chunks/2ia14txjtgo42.js\",\"/_next/static/chunks/2dpzp81i5qnbm.js\"],\"default\"]\nb:I[53936,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/34zhdt435x37k.js\",\"/_next/static/chunks/3cxvlv844r8b7.js\",\"/_next/static/chunks/2ia14txjtgo42.js\",\"/_next/static/chunks/2dpzp81i5qnbm.js\"],\"default\"]\nc:I[77102,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/34zhdt435x37k.js\",\"/_next/static/chunks/3cxvlv844r8b7.js\",\"/_next/static/chunks/2ia14txjtgo42.js\",\"/_next/static/chunks/2dpzp81i5qnbm.js\"],\"default\"]\nd:I[70745,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/34zhdt435x37k.js\",\"/_next/static/chunks/3cxvlv844r8b7.js\",\"/_next/static/chunks/2ia14txjtgo42.js\",\"/_next/static/chunks/2dpzp81i5qnbm.js\"],\"default\"]\ne:I[82243,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/34zhdt435x37k.js\",\"/_next/static/chunks/3cxvlv844r8b7.js\",\"/_next/static/chunks/2ia14txjtgo42.js\",\"/_next/static/chunks/2dpzp81i5qnbm.js\"],\"default\"]\nf:I[56691,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\",\"/_next/static/chunks/34zhdt435x37k.js\",\"/_next/static/chunks/3cxvlv844r8b7.js\",\"/_next/static/chunks/2ia14txjtgo42.js\",\"/_next/static/chunks/2dpzp81i5qnbm.js\"],\"default\"]\n10:I[97367,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"OutletBoundary\"]\n11:\"$Sreact.suspense\"\n13:I[97367,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"ViewportBoundary\"]\n15:I[97367,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"MetadataBoundary\"]\n17:I[68027,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/11cxxs8m-x7f1.css\",\"style\"]\n:HL[\"/_next/static/media/70bc3e132a0a741e-s.p.3t6q91iet4nsy.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/83afe278b6a6bb3c-s.p.2bn3s6zvc0dyp.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/11cxxs8m-x7f1.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/14mrh2-p_w84d.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"suppressHydrationWarning\":true,\"lang\":\"es\",\"className\":\"inter_fe8b9d92-module__LINzvG__variable jetbrains_mono_7d65b77b-module__VxV-Ta__variable antialiased\",\"children\":[\"$\",\"body\",null,{\"suppressHydrationWarning\":true,\"className\":\"min-h-screen bg-white dark:bg-gray-900\",\"children\":[[[\"$\",\"$L2\",null,{\"src\":\"https://www.googletagmanager.com/gtag/js?id=G-7X6SSM0PKB\",\"strategy\":\"afterInteractive\"}],[\"$\",\"$L2\",null,{\"id\":\"google-analytics\",\"strategy\":\"afterInteractive\",\"children\":\"\\n                window.dataLayer = window.dataLayer || [];\\n                function gtag(){dataLayer.push(arguments);}\\n                gtag('js', new Date());\\n                gtag('config', 'G-7X6SSM0PKB');\\n              \"}]],[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"attribute\":\"class\",\"defaultTheme\":\"system\",\"enableSystem\":true,\"children\":[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{}],[\"$\",\"$L9\",null,{}],[\"$\",\"$La\",null,{}],[\"$\",\"$Lb\",null,{}],[\"$\",\"$Lc\",null,{}],[\"$\",\"$Ld\",null,{}],[\"$\",\"$Le\",null,{}],[\"$\",\"$Lf\",null,{}]],[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/34zhdt435x37k.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/3cxvlv844r8b7.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/2ia14txjtgo42.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/2dpzp81i5qnbm.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L10\",null,{\"children\":[\"$\",\"$11\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@12\"}]}]]}],{},null,false,null]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L13\",null,{\"children\":\"$L14\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L15\",null,{\"children\":[\"$\",\"$11\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L16\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$17\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/11cxxs8m-x7f1.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"yn-ZIUj6mM7CUMO7Lqxg7\"}\n"])</script><script>self.__next_f.push([1,"14:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"18:I[27201,[\"/_next/static/chunks/3f-fem0rd0hs3.js\",\"/_next/static/chunks/14mrh2-p_w84d.js\"],\"IconMark\"]\n12:null\n"])</script><script>self.__next_f.push([1,"16:[[\"$\",\"title\",\"0\",{\"children\":\"NapsterDev - Desarrollo Web y Productividad\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Contenido tecnológico enfocado en hacer la programación más accesible para todos. Tutoriales, recursos y artículos sobre desarrollo web, React, Next.js y más.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://napsterdev.com\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"NapsterDev\"}],[\"$\",\"link\",\"4\",{\"rel\":\"manifest\",\"href\":\"/manifest.json\",\"crossOrigin\":\"$undefined\"}],[\"$\",\"meta\",\"5\",{\"name\":\"keywords\",\"content\":\"desarrollo web,programación,React,Next.js,TypeScript,JavaScript,productividad,tutoriales\"}],[\"$\",\"meta\",\"6\",{\"name\":\"creator\",\"content\":\"NapsterDev\"}],[\"$\",\"meta\",\"7\",{\"name\":\"publisher\",\"content\":\"NapsterDev\"}],[\"$\",\"meta\",\"8\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"9\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"10\",{\"name\":\"google-site-verification\",\"content\":\"google-site-verification-code\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:title\",\"content\":\"NapsterDev - Desarrollo Web y Productividad\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:description\",\"content\":\"Contenido tecnológico enfocado en hacer la programación más accesible para todos\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:url\",\"content\":\"https://napsterdev-frontend-next-3y1sqa4a2-napsterhs-projects.vercel.app\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:site_name\",\"content\":\"NapsterDev\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:locale\",\"content\":\"es\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image\",\"content\":\"https://napsterdev-frontend-next-3y1sqa4a2-napsterhs-projects.vercel.app/logoNapster.jpg\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"19\",{\"property\":\"og:image:alt\",\"content\":\"NapsterDev - Desarrollo Web y Productividad\"}],[\"$\",\"meta\",\"20\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:creator\",\"content\":\"@napsterdev\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:title\",\"content\":\"NapsterDev - Desarrollo Web y Productividad\"}],[\"$\",\"meta\",\"24\",{\"name\":\"twitter:description\",\"content\":\"Contenido tecnológico enfocado en hacer la programación más accesible para todos\"}],[\"$\",\"meta\",\"25\",{\"name\":\"twitter:image\",\"content\":\"https://napsterdev-frontend-next-3y1sqa4a2-napsterhs-projects.vercel.app/logoNapster.jpg\"}],[\"$\",\"link\",\"26\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"27\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.3g537m-iafwfd.ico\",\"sizes\":\"48x48\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"28\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\"}],[\"$\",\"link\",\"29\",{\"rel\":\"apple-touch-icon\",\"href\":\"/logoNapster.jpg\"}],[\"$\",\"$L18\",\"30\",{}]]\n"])</script></body></html>

Latest requests

# Url Url Source Date
1 https://napsterdev.com/ 2026-10-15 10:43:08
2 https://www.thebolditalic.com/?gi=… 2026-10-15 10:43:07
3 https://auth.mediacorp.sg/u/login?… 2026-10-15 10:43:07
4 https://auth.acog.org/OAuth/SignIn… 2026-10-15 10:43:07
5 https://auth.acog.org/OAuth/SignIn… 2026-10-15 10:43:05
6 https://www.thebolditalic.com/?gi=… 2026-10-15 10:43:05
7 https://www.thebolditalic.com/?gi=… 2026-10-15 10:43:05
8 https://www.texarkanatwins.com/%25… 2026-10-15 10:43:02
9 https://www.thebolditalic.com/?gi=… 2026-10-15 10:43:02
10 https://www.texarkanatwins.com/%25… 2026-10-15 10:43:01
11 https://www.texarkanatwins.com/%25… 2026-10-15 10:43:00
12 https://auth.acog.org/OAuth/SignIn… 2026-10-15 10:42:59
13 https://auth.mediacorp.sg/u/login?… 2026-10-15 10:42:58
14 https://www.thebolditalic.com/?gi=… 2026-10-15 10:42:56
15 https://www.texarkanatwins.com/%25… 2026-10-15 10:42:55
16 https://www.karumanta.com/ 2026-10-15 10:42:53
17 https://www.thebolditalic.com/?gi=… 2026-10-15 10:42:51
18 https://www.texarkanatwins.com/%25… 2026-10-15 10:42:49
19 https://www.texarkanatwins.com/%25… 2026-10-15 10:42:48
20 https://www.texarkanatwins.com/%25… 2026-10-15 10:42:42