PageSourceSearch

https://www.pavloh.com/

html pavloh.com collected 2026-10-09 22:06:24 UTC 326,568 bytes, 513 lines download raw bytes

1<!DOCTYPE html><html lang="es" class="scroll-smooth"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Pavloh | Desarrollador Fullstack</title><meta name="description" content="Pablo Casado Rodríguez (Pavloh), desarrollador Fullstack. Proyectos de desarrollo web, videojuegos y trabajo técnico con resultados."><meta name="author" content="Pablo Casado Rodríguez · Pavloh"><meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"><link rel="canonical" href="https://www.pavloh.com/"><link rel="alternate" hreflang="es" href="https://www.pavloh.com/"><link rel="alternate" hreflang="en" href="https://www.pavloh.com/en/"><link rel="alternate" hreflang="x-default" href="https://www.pavloh.com/"><link rel="icon" href="/favicon.ico"><link rel="manifest" href="/manifest.json"><link rel="sitemap" type="application/xml" href="/sitemap.xml"><meta name="theme-color" content="#18181b"><meta property="og:type" content="website"><meta property="og:image:alt" content="Pavloh | Desarrollador Fullstack"><meta property="og:url" content="https://www.pavloh.com/"><meta property="og:title" content="Pavloh | Desarrollador Fullstack"><meta property="og:description" content="Pablo Casado Rodríguez (Pavloh), desarrollador Fullstack. Proyectos de desarrollo web, videojuegos y trabajo técnico con resultados."><meta property="og:image" content="https://www.pavloh.com/og-default.jpg"><meta property="og:image:secure_url" content="https://www.pavloh.com/og-default.jpg"><meta property="og:image:width" content="1920"><meta property="og:image:height" content="1080"><meta property="og:locale" content="es_ES"><meta property="og:site_name" content="Pavloh"><meta name="twitter:card" content="summary_large_image"><meta name="twitter:creator" content="@impavloh"><meta name="twitter:title" content="Pavloh | Desarrollador Fullstack"><meta name="twitter:description" content="Pablo Casado Rodríguez (Pavloh), desarrollador Fullstack. Proyectos de desarrollo web, videojuegos y trabajo técnico con resultados."><meta name="twitter:image" content="https://www.pavloh.com/og-default.jpg"><meta name="twitter:image:alt" content="Pavloh | Desarrollador Fullstack">
1<script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@type":"Person","@id":"https://www.pavloh.com/#person","name":"Pablo Casado Rodríguez","alternateName":["Pavloh","ImPavloh"],"url":"https://www.pavloh.com/","image":"https://www.pavloh.com/pavloh.webp","jobTitle":"Desarrollador Fullstack","sameAs":["https://github.com/impavloh","https://www.linkedin.com/in/impavloh/","https://x.com/impavloh"]},{"@type":"WebSite","@id":"https://www.pavloh.com/#website","name":"Pavloh","alternateName":"Portfolio de Pablo Casado Rodríguez","url":"https://www.pavloh.com/","inLanguage":["es","en"],"publisher":{"@id":"https://www.pavloh.com/#person"}},{"@type":"ProfilePage","@id":"https://www.pavloh.com/#webpage","url":"https://www.pavloh.com/","name":"Pavloh | Desarrollador Fullstack","description":"Pablo Casado Rodríguez (Pavloh), desarrollador Fullstack. Proyectos de desarrollo web, videojuegos y trabajo técnico con resultados.","inLanguage":"es","isPartOf":{"@id":"https://www.pavloh.com/#website"},"about":{"@id":"https://www.pavloh.com/#person"},"primaryImageOfPage":{"@type":"ImageObject","url":"https://www.pavloh.com/og-default.jpg"},"mainEntity":{"@id":"https://www.pavloh.com/#person"}}]}</script>
1<link rel="stylesheet" href="/_astro/compiler.B-Gi1RSq.css"><link rel="stylesheet" href="/_astro/education.BVcN-9rJ.css"><style>@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(15deg)}50%{transform:rotate(-10deg)}75%{transform:rotate(15deg)}}.animate-wave{animation:2s ease-in-out infinite wave}#moreContent{transition:max-height .5s cubic-bezier(.4,0,.2,1)}#toggleIcon{transition:transform .3s cubic-bezier(.4,0,.2,1)}.group:hover img{filter:brightness(110%)saturate(120%)contrast(105%)}.border-gradient-to-r{background:linear-gradient(to right, var(--tw-gradient-stops));border-radius:1.5rem}@media (prefers-reduced-motion:reduce){.animate-wave{animation:none}.transition-all,.transition-transform,.transition-opacity{transition:none}}@media (width<=1024px){.grid-cols-2.lg\:grid-cols-1{grid-template-columns:repeat(2,minmax(0,1fr))}}
2.bottom-nav-link[data-astro-cid-dzfpik25]{touch-action:manipulation;transition:transform .15s;position:relative}.bottom-nav-link[data-astro-cid-dzfpik25] span[data-astro-cid-dzfpik25]{font-size:.65rem}.bottom-nav-link[data-astro-cid-dzfpik25]:active{transform:scale(.95)}.bottom-nav-link[data-astro-cid-dzfpik25].text-blue-600:after,.bottom-nav-link[data-astro-cid-dzfpik25].dark\:text-blue-400:after{content:"";background-color:currentColor;border-radius:50%;width:4px;height:4px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}.nav-link[data-astro-cid-dzfpik25].text-blue-600,.nav-link[data-astro-cid-dzfpik25].dark\:text-blue-400{font-weight:500;position:relative}.nav-link[data-astro-cid-dzfpik25].text-blue-600:after,.nav-link[data-astro-cid-dzfpik25].dark\:text-blue-400:after{content:"";background-color:currentColor;border-radius:1px;width:100%;height:2px;position:absolute;bottom:-6px;left:0}@media (width<=340px){.bottom-nav-link[data-astro-cid-dzfpik25] span[data-astro-cid-dzfpik25]{font-size:.6rem}}@media (prefers-reduced-motion:reduce){.bottom-nav-link[data-astro-cid-dzfpik25]:active,.bottom-nav-link[data-astro-cid-dzfpik25]{transition:none!important;transform:none!important}a[data-astro-cid-dzfpik25]{scroll-behavior:auto!important}}#scroll-to-top{transition:opacity .3s,visibility .3s,transform .3s}#scroll-to-top.visible{opacity:.8;visibility:visible}#scroll-to-top:hover{transform:translateY(-2px)}
3</style></head><body class="font-inter text-zinc-900 transition-colors bg-white dark:bg-zinc-900 dark:text-zinc-100 pb-[60px] md:pb-0"><header class="sticky top-0 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-md border-b border-zinc-200 dark:border-zinc-800 z-50" data-history-path="/" data-astro-cid-dzfpik25><nav class="container mx-auto px-4 py-3 flex items-center justify-between" aria-label="Navegación principal" data-astro-cid-dzfpik25><a id="logo-link" href="#" class="flex items-center gap-2" aria-label="Ir al inicio" data-astro-cid-dzfpik25><img src="/favicon.webp" alt="Logo de Pavloh" loading="eager" data-astro-cid-dzfpik25="true" decoding="async" width="48" height="48"><span class="text-xl font-semibold text-zinc-800 dark:text-zinc-200" data-astro-cid-dzfpik25>Pavloh</span></a><!-- Enlaces de navegación para desktop --><div class="flex items-center gap-6" data-astro-cid-dzfpik25><ul class="hidden md:flex items-center gap-6" data-astro-cid-dzfpik25><li data-astro-cid-dzfpik25><a href="#proyectos" class="nav-link text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" aria-label="Ir a la sección de proyectos" data-astro-cid-dzfpik25>Proyectos</a></li><li data-astro-cid-dzfpik25><a href="#experiencia" class="nav-link text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" aria-label="Ir a la sección de experiencia" data-astro-cid-dzfpik25>Experiencia</a></li><li data-astro-cid-dzfpik25><a href="#formacion" class="nav-link text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" aria-label="Ir a la sección de formación" data-astro-cid-dzfpik25>Formación</a></li><li data-astro-cid-dzfpik25><a href="#tecnologias" class="nav-link text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dar
3k:hover:text-blue-400 transition-colors" aria-label="Ir a la sección de tecnologías" data-astro-cid-dzfpik25>Tecnologías</a></li><li data-astro-cid-dzfpik25><a href="#medios" class="nav-link text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" aria-label="Ir a la sección de noticias" data-astro-cid-dzfpik25>Noticias</a></li><li data-astro-cid-dzfpik25><a href="#contacto" class="nav-link text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors" aria-label="Ir a la sección de contacto" data-astro-cid-dzfpik25>Contacto</a></li></ul><div class="flex items-center gap-3 sm:gap-4" data-astro-cid-dzfpik25><a href="/en" class="px-3 py-1 rounded-full border border-zinc-300 dark:border-zinc-600 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors" aria-label="Ver sitio en inglés" data-astro-cid-dzfpik25>EN</a><a href="https://github.com/impavloh" target="_blank" rel="noopener noreferrer" class="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors" aria-label="Perfil de GitHub" data-astro-cid-dzfpik25><svg width="1em" height="1em" class="h-6 w-6 text-zinc-700 dark:text-zinc-300" aria-hidden="true" data-astro-cid-dzfpik25="true" data-icon="mdi:github"><symbol id="ai:mdi:github" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/></symbol><use href="#ai:mdi:github"></use></svg></a><button id="theme-toggle" type="button" class="p-2 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-lg transition-colors" aria-label="Cambiar tema"><svg width="1em" height="1em" class="w-6 h-6 text-zinc-800 dark:text-zinc-200 hidden dark:block" aria-hidden="true" data-icon="mdi:weather-sunny"><symbol id="ai:mdi:weather-sunny" viewBox="0 0 24 24"><path fill="currentColor" d="M12 7a5 5 0 0 1 5 5a5 5 0 0 1-5 5a5 5 0 0 1-5-5a5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0-7l2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10l1.76-3.77a7.13 7.13 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10l-4.14.36c.59-.51 1.12-1.14 1.54-1.86c.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44c.82 0 1.63-.17 2.37-.44z"/></symbol><use href="#ai:mdi:weather-sunny"></use></svg><svg width="1em" height="1em" class="w-6 h-6 text-zinc-800 dark:text-zinc-200 block dark:hidden" aria-hidden="true" data-icon="mdi:weather-night"><symbol id="ai:mdi:weather-night" viewBox="0 0 24 24"><path fill="currentColor" d="m17.75 4.09l-2.53 1.94l.91 3.06l-2.63-1.81l-2.63 1.81l.91-3.06l-2.53-1.94L12.44 4l1.06-3l1.06 3zm3.5 6.91l-1.64 1.25l.59 1.98l-1.7-1.17l-1.7 1.17l.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85c-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14c.4-.4.82-.76 1.27-1.08c.75-.53 1.93.36 1.85 1.19c-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82c-2.81 3.14-2.7 7.96.31 10.98c3.02 3.01 7.84 3.12 10.98.31"/></symbol><use href="#ai:mdi:weather-night"></use></svg></button>
3<script>
4  ;(() => {
5    const getTheme = () => {
6      if (typeof localStorage !== 'undefined' && localStorage.theme) {
7        return localStorage.theme
8      }
9      return 'dark'
10    }
11
12    const setTheme = (theme) => {
13      document.documentElement.classList.toggle('dark', theme === 'dark')
14      localStorage.theme = theme
15    }
16
17    const toggleTheme = () => {
18      setTheme(getTheme() === 'dark' ? 'light' : 'dark')
19    }
20
21    document
22      .getElementById('theme-toggle')
23      ?.addEventListener('click', toggleTheme)
24    setTheme(getTheme())
25  })()
26</script>
26</div></div></nav><!-- para móviles solo mostrar el logo y los iconos de acción --></header><div id="top" data-astro-cid-dzfpik25></div><!-- Barra de navegación rápida fija en la parte inferior para móviles --><div id="bottom-nav" class="md:hidden fixed bottom-0 left-0 right-0 bg-white/90 dark:bg-zinc-900/90 backdrop-blur-md border-t border-zinc-200 dark:border-zinc-800 z-40 px-2 py-2" data-astro-cid-dzfpik25><div class="flex items-center" data-astro-cid-dzfpik25><a href="#proyectos" class="bottom-nav-link flex flex-col items-center justify-center flex-1 min-w-0 py-1 text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400" aria-label="Ir a proyectos" data-astro-cid-dzfpik25><svg width="1em" height="1em" class="h-5 w-5 shrink-0" data-astro-cid-dzfpik25="true" data-icon="mdi:folder-outline"><symbol id="ai:mdi:folder-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M20 18H4V8h16m0-2h-8l-2-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"/></symbol><use href="#ai:mdi:folder-outline"></use></svg><span class="mt-1 max-w-full truncate leading-tight" data-astro-cid-dzfpik25>Proyectos</span></a><a href="#experiencia" class="bottom-nav-link flex flex-col items-center justify-center flex-1 min-w-0 py-1 text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400" aria-label="Ir a experiencia" data-astro-cid-dzfpik25><svg width="1em" height="1em" class="h-5 w-5 shrink-0" data-astro-cid-dzfpik25="true" data-icon="mdi:briefcase-outline"><symbol id="ai:mdi:briefcase-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M20 6c.58 0 1.05.2 1.42.59c.38.41.58.86.58 1.41v11c0 .55-.2 1-.58 1.41c-.37.39-.84.59-1.42.59H4c-.58 0-1.05-.2-1.42-.59C2.2 20 2 19.55 2 19V8c0-.55.2-1 .58-1.41C2.95 6.2 3.42 6 4 6h4V4c0-.58.2-1.05.58-1.42C8.95 2.2 9.42 2 10 2h4c.58 0 1.05.2 1.42.58c.38.37.58.84.58 1.42v2zM4 8v11h16V8zm10-2V4h-4v2z"/></symbol><use href="#ai:mdi:briefcase-outline"></use></svg><span class="mt-1 max-w-full truncate leading-tight" data-astro-cid-dzfpik25>Experiencia</span></a><a href="#formacion" class="bottom-nav-link flex flex-col items-center justify-center flex-1 min-w-0 py-1 text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400" aria-label="Ir a formación" data-astro-cid-dzfpik25><svg width="1em" height="1em" class="h-5 w-5 shrink-0" data-astro-cid-dzfpik25="true" data-icon="mdi:school-outline"><symbol id="ai:mdi:school-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3L1 9l4 2.18v6L12 21l7-3.82v-6l2-1.09V17h2V9zm6.82 6L12 12.72L5.18 9L12 5.28zM17 16l-5 2.72L7 16v-3.73L12 15l5-2.73z"/></symbol><use href="#ai:mdi:school-outline"></use></svg><span class="mt-1 max-w-full truncate leading-tight" data-astro-cid-dzfpik25>Formación</span></a><a href="#tecnologias" class="bottom-nav-link flex flex-col items-center justify-center flex-1 min-w-0 py-1 text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400" aria-label="Ir a tecnologías" data-astro-cid-dzfpik25><svg width="1em" height="1em" class="h-5 w-5 shrink-0" data-astro-cid-dzfpik25="true" data-icon="mdi:code-tags"><symbol id="ai:mdi:code-tags" viewBox="0 0 24 24"><path fill="currentColor" d="m14.6 16.6l4.6-4.6l-4.6-4.6L16 6l6 6l-6 6zm-5.2 0L4.8 12l4.6-4.6L8 6l-6 6l6 6z"/></symbol><use href="#ai:mdi:code-tags"></use></svg><span class="mt-1 max-w-full truncate leading-tight" data-astro-cid-dzfpik25>Tecnologías</span></a><a href="#medios" class="bottom-nav-link flex flex-col items-center justify-center flex-1 min-w-0 py-1 text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dark:hover:text-blue-400" aria-label="Ir a noticias" data-astro-cid-dzfpik25><svg width="1em" height="1em" class="h-5 w-5 shrink-0" data-astro-cid-dzfpik25="true" data-icon="mdi:newspaper"><symbol id="ai:mdi:newspaper" viewBox="0 0 24 24"><path fill="currentColor" d="M20 11H4V8h16m0 7h-7v-2h7m0 6h-7v-2h7m-9 2H4v-6h7m9.33-8.33L18.67 3L17 4.67L15.33 3l-1.66 1.67L12 3l-1.67 1.67L8.67 3L7 4.67L5.33 3L3.67 4.67L2 3v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V3z"/></symbol><use href="#ai:mdi:newspaper"></use></svg><span class="mt-1 max-w-full truncate leading-tight" data-astro-cid-dzfpik25>Noticias</span></a><a href="#contacto" class="bottom-nav-link flex flex-col items-center justify-center flex-1 min-w-0 py-1 text-zinc-700 dark:text-zinc-300 hover:text-blue-600 dar
26k:hover:text-blue-400" aria-label="Ir a contacto" data-astro-cid-dzfpik25><svg width="1em" height="1em" class="h-5 w-5 shrink-0" data-astro-cid-dzfpik25="true" data-icon="mdi:email-outline"><symbol id="ai:mdi:email-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2zm-2 0l-8 5l-8-5zm0 12H4V8l8 5l8-5z"/></symbol><use href="#ai:mdi:email-outline"></use></svg><span class="mt-1 max-w-full truncate leading-tight" data-astro-cid-dzfpik25>Contacto</span></a></div></div>
26<script type="module">document.addEventListener(`DOMContentLoaded`,()=>{let e=document.querySelector(`header`)?.dataset.historyPath||`/`,t=document.querySelectorAll(`.nav-link`),n=document.querySelectorAll(`.bottom-nav-link`),r=document.getElementById(`logo-link`),i=document.querySelectorAll(`section[id]`),a=()=>{let e=window.scrollY+500,r=!1;i.forEach(i=>{let a=i.getAttribute(`id`),o=i.offsetTop,s=i.offsetHeight;if(e>=o&&e<o+s){r=!0;let e=e=>{let t=e.getAttribute(`href`)===`#${a}`;e.classList.toggle(`text-blue-600`,t),e.classList.toggle(`dark:text-blue-400`,t),e.classList.toggle(`text-zinc-700`,!t),e.classList.toggle(`dark:text-zinc-300`,!t)};n.forEach(e),t.forEach(e)}}),r||(n.forEach(e=>{e.classList.remove(`text-blue-600`,`dark:text-blue-400`),e.classList.add(`text-zinc-700`,`dark:text-zinc-300`)}),t.forEach(e=>{e.classList.remove(`text-blue-600`,`dark:text-blue-400`),e.classList.add(`text-zinc-700`,`dark:text-zinc-300`)}))},o=(t,n)=>{let r=n.getAttribute(`href`);if(r&&r.startsWith(`#`)){if(t.preventDefault(),r===`#`)window.scrollTo({top:0,behavior:`smooth`}),history.pushState(null,``,e);else{let t=r.substring(1),n=document.getElementById(t);if(n){let e=(document.querySelector(`header`)?.offsetHeight||0)+20,t=n.getBoundingClientRect().top+window.scrollY-e;window.scrollTo({top:t,behavior:`smooth`})}history.pushState(null,``,e+r)}}};
26[...Array.from(t),...Array.from(n)].forEach(e=>{e.addEventListener(`click`,t=>{o(t,e)})}),r&&r.addEventListener(`click`,e=>{o(e,r)}),a();let s=!1;window.addEventListener(`scroll`,()=>{s||(s=!0,window.requestAnimationFrame(()=>{a(),s=!1}))},{passive:!0})});</script>
26<main><div class="container mx-auto px-4 sm:px-6 space-y-6 sm:space-y-8 py-6 sm:py-8"><!-- Sección de inicio (siempre visible) --><div id="inicio" class="w-full md:flex md:items-center gap-8 md:gap-16 mb-6 md:mb-10"><div class="flex flex-col md:flex-row gap-8 md:gap-16 items-center md:items-start justify-center"><div class="text-pretty leading-9 max-w-2xl flex-1 z-10"><h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 text-purple-600 dark:text-purple-200 text-center lg:text-left">¡Hola!<svg width="1em" height="1em" class="inline-block h-10 w-10 lg:h-12 lg:w-12 dark:text-amber-400 text-amber-600 animate-wave mb-2" data-icon="mdi:hand-wave"><symbol id="ai:mdi:hand-wave" viewBox="0 0 24 24"><path fill="currentColor" d="M23 17c0 3.31-2.69 6-6 6v-1.5c2.5 0 4.5-2 4.5-4.5zM1 7c0-3.31 2.69-6 6-6v1.5c-2.5 0-4.5 2-4.5 4.5zm7-2.68l-4.59 4.6c-3.22 3.22-3.22 8.45 0 11.67s8.45 3.22 11.67 0l7.07-7.09c.49-.47.49-1.26 0-1.75a1.25 1.25 0 0 0-1.77 0l-4.42 4.42l-.71-.71l6.54-6.54c.49-.49.49-1.28 0-1.77s-1.29-.49-1.79 0L14.19 13l-.69-.73l6.87-6.89c.49-.49.49-1.28 0-1.77s-1.28-.49-1.77 0l-6.89 6.89l-.71-.7l5.5-5.48c.5-.49.5-1.28 0-1.77s-1.28-.49-1.77 0l-7.62 7.62a4 4 0 0 1-.33 5.28l-.71-.71a3 3 0 0 0 0-4.24l-.35-.35l4.07-4.07c.49-.49.49-1.28 0-1.77c-.5-.48-1.29-.48-1.79.01"/></symbol><use href="#ai:mdi:hand-wave"></use></svg></h1><h2 class="text-2xl md:text-3xl lg:text-4xl font-bold py-2 bg-gradient-to-r dark:from-gray-100 dark:to-gray-300 from-gray-700 to-gray-900 bg-clip-text text-transparent text-center lg:text-left">Soy <span class="relative inline-block"><span class="text-3xl md:text-4xl lg:text-5xl text-amber-500 font-extrabold">Pablo</span><div class="absolute left-0 bottom-0 w-full h-1 bg-gradient-to-r from-red-500/20 to-amber-500/80 rounded-full animate-pulse"></div></span> Casado Rodríguez</h2><h3 class="text-xl md:text-2xl lg:text-3xl font-bold bg-gradient-to-r from-amber-500 to-red-500 bg-clip-text text-transparent flex items-center justify-center lg:justify-start mt-4"><svg width="1em" height="1em" viewBox="0 0 24 24" class="inline-block h-6 w-6 lg:h-8 lg:w-8 mr-3 dark:text-amber-400 text-amber-600 animate-wave" data-icon="mdi:code-tags"><use href="#ai:mdi:code-tags"></use></svg>Desarrollador Fullstack</h3><div class="text-base md:text-lg lg:text-xl text-zinc-600 dark:text-zinc-300 leading-relaxed text-pretty px-4 lg:px-0 mt-4"><!-- Primeros dos párrafos visibles siempre --><p class="mb-4">Apasionado por crear <strong class="text-purple-600 dark:text-purple-400">experiencias web modernas</strong> e interactivas. Especializado en <strong class="dark:text-yellow-300 text-yellow-600">JavaScript/TypeScript</strong>, desarrollo aplicaciones <strong class="dark:text-blue-300 text-blue-600">escalables y mantenibles</strong>.</p><p class="mb-4">También trabajo en proyectos de <strong class="dark:text-green-300 text-green-600">Deep Learning</strong>, aplicaciones web <strong class="dark:text-red-300 text-red-500">Fullstack</strong> y <strong class="dark:text-orange-300 text-orange-500">extensiones de navegador</strong>, con un enfoque especial en el diseño y desarrollo de interfaces <strong class="dark:text-pink-300 text-pink-600">frontend</strong>.</p><!-- Contenido adicional oculto (solo en móviles para evitar mucha cantidad) --><div id="moreContent" class="lg:block overflow-hidden transition-all duration-500 ease-in-out max-h-0 lg:max-h-none"><p class="mb-4">Recientemente <strong class="dark:text-yellow-200 text-yellow-600">graduado en DAM</strong> con un 9 de media y 3 matrículas de honor. Actualmente trabajo como desarrollador en <strong class="dark:text-orange-200 text-orange-500">Ioonic Sistemas</strong> y de forma autodidacta continúo ampliando mis conocimientos.</p><p class="mb-4 font-semibold">Mi objetivo es seguir creciendo como profesional, creando soluciones <strong class="dark:text-cyan-200 text-cyan-600">innovadoras y accesibles</strong> mientras continúo con mi formación en el mundo del desarrollo y la tecnología.</p></div><!-- Botón móvil --><div class="lg:hidden mt-4"><button id="toggleButton" class="group flex items-center justify-center bg-purple-600/30 dark:bg-purple-500/20 backdrop-blur-sm rounded-full px-6 py-2 text-sm font-semibold text-gray-800 dark:text-white shadow-lg hover:shadow-xl hover:from-purple-500/30 hover:to-blue-500/30 dark:hover:from-purple-400/30 dark:hover:to-blue-400/30 transition-all duration-300 w-full border border-purple-200/50 dark:border-purple-400/30"><span class="text-base">Leer más</span><svg width="1em" height="1em" class="h-5 w-5 ml-2 transition-transform duration-300" id="toggleIcon" data-icon="mdi:chevron-down">
26<symbol id="ai:mdi:chevron-down" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z"/></symbol><use href="#ai:mdi:chevron-down"></use></svg></button></div></div></div><!-- Imagen y datos (solo pc) --><div class="relative group md:flex flex-col items-center md:items-start flex-shrink-0 hidden"><div class="relative group/image mb-8"><img src="/pavloh.webp" alt="Pablo Casado Rodríguez - Desarrollador Fullstack" loading="eager" sizes="(max-width: 768px) 80vw, 320px" decoding="async" width="320" height="320" class="rounded-3xl shadow-2xl transform rotate-2 group-hover/image:rotate-0 group-hover/image:scale-105 transition-all duration-500 ease-out mx-auto w-72 lg:w-80 border-4 border-white/50 dark:border-gray-800/50"><div class="absolute inset-0 border-3 border-gradient-to-r from-purple-400/60 to-blue-400/60 rounded-3xl -rotate-2 group-hover/image:rotate-2 transition-all duration-500 ease-out -z-10" aria-hidden="true"></div><div class="absolute inset-0 bg-gradient-to-r from-purple-500/20 via-blue-500/20 to-cyan-500/20 opacity-0 group-hover/image:opacity-30 transition-all duration-500 rounded-3xl -z-10" aria-hidden="true"></div><!-- Indicador de disponibilidad --><button id="availabilityButton" class="absolute -top-2 -right-2 w-6 h-6 bg-green-500 rounded-full border-4 border-white dark:border-gray-800 shadow-lg animate-pulse hover:scale-110 transition-transform duration-200 cursor-pointer focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2" aria-label="Disponible para trabajar - Click para contactar"><span class="sr-only">Disponible para trabajar</span></button><!-- Tooltip --><div id="availabilityTooltip" class="absolute -top-3 right-8 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 px-3 py-2 rounded-lg text-sm font-medium whitespace-nowrap opacity-0 pointer-events-none transition-all duration-200 transform scale-95 z-50 shadow-lg">Disponible para trabajar</div></div><div class="grid grid-cols-2 lg:grid-cols-1 gap-3 w-full max-w-sm lg:max-w-xs"><div class="flex items-center justify-center backdrop-blur-md bg-green-500/20 dark:bg-green-400/20 rounded-2xl px-4 py-3 text-sm font-semibold text-gray-800 dark:text-white shadow-lg hover:shadow-xl hover:bg-green-500/30 dark:hover:bg-green-400/30 transition-all duration-300 border border-green-200/50 dark:border-green-400/30 group/card"><svg width="1em" height="1em" class="h-5 w-5 mr-2 group-hover/card:scale-110 transition-transform duration-300" data-icon="mdi:account"><symbol id="ai:mdi:account" viewBox="0 0 24 24"><path fill="currentColor" d="M12 4a4 4 0 0 1 4 4a4 4 0 0 1-4 4a4 4 0 0 1-4-4a4 4 0 0 1 4-4m0 10c4.42 0 8 1.79 8 4v2H4v-2c0-2.21 3.58-4 8-4"/></symbol><use href="#ai:mdi:account"></use></svg><span>Pavloh</span></div><div class="flex items-center justify-center backdrop-blur-md bg-amber-500/20 dark:bg-amber-400/20 rounded-2xl px-4 py-3 text-sm font-semibold text-gray-800 dark:text-white shadow-lg hover:shadow-xl hover:bg-amber-500/30 dark:hover:bg-amber-400/30 transition-all duration-300 border border-amber-200/50 dark:border-amber-400/30 group/card"><svg width="1em" height="1em" class="h-5 w-5 mr-2 group-hover/card:scale-110 transition-transform duration-300" data-icon="mdi:calendar"><symbol id="ai:mdi:calendar" viewBox="0 0 24 24"><path fill="currentColor" d="M19 19H5V8h14m-3-7v2H8V1H6v2H5c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-1V1m-1 11h-5v5h5z"/></symbol><use href="#ai:mdi:calendar"></use></svg><span id="age">22 años</span></div><div class="flex items-center justify-center backdrop-blur-md bg-blue-500/20 dark:bg-blue-400/20 rounded-2xl px-4 py-3 text-sm font-semibold text-gray-800 dark:text-white shadow-lg hover:shadow-xl hover:bg-blue-500/30 dark:hover:bg-blue-400/30 transition-all duration-300 border border-blue-200/50 dark:border-blue-400/30 group/card col-span-2 lg:col-span-1"><svg width="1em" height="1em" class="h-5 w-5 mr-2 group-hover/card:scale-110 transition-transform duration-300" data-icon="mdi:map-marker"><symbol id="ai:mdi:map-marker" viewBox="0 0 24 24">
26<path fill="currentColor" d="M12 11.5A2.5 2.5 0 0 1 9.5 9A2.5 2.5 0 0 1 12 6.5A2.5 2.5 0 0 1 14.5 9a2.5 2.5 0 0 1-2.5 2.5M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7"/></symbol><use href="#ai:mdi:map-marker"></use></svg><span>Madrid, España</span></div><div class="flex items-center justify-center backdrop-blur-md bg-purple-500/20 dark:bg-purple-400/20 rounded-2xl px-4 py-3 text-sm font-semibold text-gray-800 dark:text-white shadow-lg hover:shadow-xl hover:bg-purple-500/30 dark:hover:bg-purple-400/30 transition-all duration-300 border border-purple-200/50 dark:border-purple-400/30 group/card col-span-2 lg:col-span-1"><svg width="1em" height="1em" class="h-5 w-5 mr-2 group-hover/card:scale-110 transition-transform duration-300" data-icon="mdi:code-braces"><symbol id="ai:mdi:code-braces" viewBox="0 0 24 24"><path fill="currentColor" d="M8 3a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2H3v2h1a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h2v-2H8v-5a2 2 0 0 0-2-2a2 2 0 0 0 2-2V5h2V3m6 0a2 2 0 0 1 2 2v4a2 2 0 0 0 2 2h1v2h-1a2 2 0 0 0-2 2v4a2 2 0 0 1-2 2h-2v-2h2v-5a2 2 0 0 1 2-2a2 2 0 0 1-2-2V5h-2V3z"/></symbol><use href="#ai:mdi:code-braces"></use></svg><span>Desarrollador</span></div></div></div></div><!-- Notificación emergente --><div id="availabilityNotification" class="fixed top-4 right-4 bg-green-500 text-white px-6 py-4 rounded-lg shadow-xl transform translate-x-full opacity-0 transition-all duration-300 z-50 max-w-sm"><div class="flex items-center space-x-3"><div class="w-3 h-3 bg-green-300 rounded-full animate-pulse"></div><div><p class="font-semibold">¡Disponible para trabajar!</p><p class="text-sm text-green-100">Vamos a la sección de contacto</p></div></div></div>
26<script>
27  document.addEventListener('DOMContentLoaded', function () {
28    // Cálculo de edad (para tener que estar cambiandolo todos los años, aunque seguramente lo haga igualmente para evitar "cambio del layout")
29    const birthDate = new Date('2004-05-19')
30    const today = new Date()
31    let age = today.getFullYear() - birthDate.getFullYear()
32    const monthDifference = today.getMonth() - birthDate.getMonth()
33    if (
34      monthDifference < 0 ||
35      (monthDifference === 0 && today.getDate() < birthDate.getDate())
36    ) {
37      age--
38    }
39    const ageElement = document.getElementById('age')
40    if (ageElement) {
41      ageElement.textContent = `${age} años`
42    }
43
44    // Toggle para mostrar/ocultar contenido (solo en moviles)
45    const toggleButton = document.getElementById('toggleButton')
46    const moreContent = document.getElementById('moreContent')
47    const toggleIcon = document.getElementById('toggleIcon')
48
49    if (toggleButton && moreContent && toggleIcon) {
50      let isExpanded = false
51      
52      toggleButton.addEventListener('click', () => {
53        isExpanded = !isExpanded
54        
55        if (isExpanded) {
56          moreContent.style.maxHeight = moreContent.scrollHeight + 'px'
57          toggleButton.querySelector('span').textContent = 'Mostrar menos'
58          toggleIcon.style.transform = 'rotate(180deg)'
59        } else {
60          moreContent.style.maxHeight = '0'
61          toggleButton.querySelector('span').textContent = 'Leer más'
62          toggleIcon.style.transform = 'rotate(0deg)'
63        }
64      })
65    }
66
67    const availabilityButton = document.getElementById('availabilityButton')
68    const availabilityTooltip = document.getElementById('availabilityTooltip')
69    const availabilityNotification = document.getElementById('availabilityNotification')
70
71    if (availabilityButton && availabilityTooltip) {
72      availabilityButton.addEventListener('mouseenter', () => {
73        availabilityTooltip.classList.remove('opacity-0', 'scale-95')
74        availabilityTooltip.classList.add('opacity-100', 'scale-100')
75      })
76
77      availabilityButton.addEventListener('mouseleave', () => {
78        availabilityTooltip.classList.remove('opacity-100', 'scale-100')
79        availabilityTooltip.classList.add('opacity-0', 'scale-95')
80      })
81
82      availabilityButton.addEventListener('click', () => {
83        if (availabilityNotification) {
84          availabilityNotification.classList.remove('translate-x-full', 'opacity-0')
85          availabilityNotification.classList.add('translate-x-0', 'opacity-100')
86          
87          setTimeout(() => {
88            availabilityNotification.classList.remove('translate-x-0', 'opacity-100')
89            availabilityNotification.classList.add('translate-x-full', 'opacity-0')
90          }, 3000)
91        }
92
93        setTimeout(() => {
94          const contactSection = document.getElementById('contacto') || document.getElementById('contact') || document.querySelector('[id*="contact"]')
95          if (contactSection) {
96            contactSection.scrollIntoView({ 
97              behavior: 'smooth',
98              block: 'start'
99            })
100          } else {
101            window.scrollTo({
102              top: document.body.scrollHeight,
103              behavior: 'smooth'
104            })
105          }
106        }, 1500)
107      })
108    }
109  })
110</script>
110</div><!-- Sección de proyectos (colapsable, abierto por defecto) --><section id="proyectos" class="collapsible-section space-y-3 sm:space-y-4 border-b border-gray-200 dark:border-gray-800 pb-4" data-astro-cid-uevlgqxv><div class="flex justify-between items-center cursor-pointer py-3 sm:py-4 select-none group/header" data-astro-cid-uevlgqxv><h2 class="ml-2 sm:ml-8 text-2xl sm:text-3xl font-bold transition-colors duration-300 group-hover/header:text-blue-500 text-center w-full" data-astro-cid-uevlgqxv>Proyectos</h2><button class="toggle-btn flex justify-center items-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-blue-500 border-2 border-blue-500 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-transform duration-300 hover:scale-110 relative aspect-square" aria-label="Mostrar/ocultar proyectos" aria-expanded="true" aria-controls="proyectos-content" data-state="expanded" data-astro-cid-uevlgqxv><svg width="18" height="18" class="icon-collapse absolute transition-all duration-300" data-astro-cid-uevlgqxv="true" data-icon="mdi:minus"><symbol id="ai:mdi:minus" viewBox="0 0 24 24"><path fill="currentColor" d="M19 13H5v-2h14z"/></symbol><use href="#ai:mdi:minus"></use></svg><svg width="18" height="18" class="icon-expand absolute transition-all duration-300" data-astro-cid-uevlgqxv="true" data-icon="mdi:plus"><symbol id="ai:mdi:plus" viewBox="0 0 24 24"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/></symbol><use href="#ai:mdi:plus"></use></svg></button></div><div id="proyectos-content" class="section-content is-open overflow-visible" data-astro-cid-uevlgqxv><div class="section-inner pb-4 sm:pb-6 px-2 sm:px-0" data-astro-cid-uevlgqxv><div class="grid gap-6 md:grid-cols-2 lg:gap-8 xl:gap-10" id="projectsGrid" data-astro-cid-pf5okai3><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-cyan-50/70 to-cyan-100/50 dark:from-cyan-900/20 dark:to-cyan-950/10 border-cyan-200/50 dark:border-cyan-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] " style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><link rel="preload" as="image" href="/unanswered/background.webp" media="(min-width: 768px)"><link rel="preload" as="image" href="/unanswered/cap1.webp" media="(min-width: 768px)"><link rel="preload" as="image" href="/unanswered/cap2.webp" media="(min-width: 768px)"><link rel="preload" as="image" href="/unanswered/cap3.webp" media="(min-width: 768px)"><link rel="preload" as="image" href="/unanswered/cap4.webp" media="(min-width: 768px)"><link rel="preload" as="image" href="/unanswered/cap5.webp" media="(min-width: 768px)"><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://unanswered.whiteroot.studio" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de Unanswered (se abre en nueva pestaña)" data-astro-cid-pf5okai3>Unanswered<svg width="1em" height="1em" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><symbol id="ai:mdi:open-in-new" viewBox="0 0 24 24"><path fill="currentColor" d="M14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z"/></symbol><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2026" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2026</time></div></div><figure class="relative mb-6" role="group" aria-label="Galería de Unanswered" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-0" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para Unanswered" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/unanswered/background.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/unanswered/background.webp" alt="Vista previa 1 de Unanswered" sizes="(max-width: 768px) 100vw, 446px" loading="eager" decoding="async" fetchpriority="high" onclick="openModal('/unanswered/background.webp', 0)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/unanswered/cap1.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/unanswered/cap1.webp" alt="Vista previa 2 de Unanswered" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/unanswered/cap1.webp', 0)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/unanswered/cap2.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/unanswered/cap2.webp" alt="Vista previa 3 de Unanswered" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/unanswered/cap2.webp', 0)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/unanswered/cap3.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/unanswered/cap3.webp" alt="Vista previa 4 de Unanswered" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/unanswered/cap3.webp', 0)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/unanswered/cap4.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/unanswered/cap4.webp" alt="Vista previa 5 de Unanswered" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/unanswered/cap4.webp', 0)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/unanswered/cap5.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/unanswered/cap5.webp" alt="Vista previa 6 de Unanswered" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/unanswered/cap5.webp', 0)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(0, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><symbol id="ai:mdi:chevron-left" viewBox="0 0 24 24">
110<path fill="currentColor" d="M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6l6 6z"/></symbol><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(0, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><symbol id="ai:mdi:chevron-right" viewBox="0 0 24 24"><path fill="currentColor" d="M8.59 16.58L13.17 12L8.59 7.41L10 6l6 6l-6 6z"/></symbol><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(0, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(0, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(0, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(0, 3)" aria-label="Ir a la imagen 4" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(0, 4)" aria-label="Ir a la imagen 5" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(0, 5)" aria-label="Ir a la imagen 6" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/unity.svg" alt="Logo de Unity" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/astro.svg" alt="Logo de Astro" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Mi primer juego indie: una experiencia de terror psicológico en primera persona donde la línea entre la realidad y la pesadilla se difumina.</p><div class="flex flex-wrap gap-2 mt-1" data-astro-cid-pf5okai3><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-blue-100/70 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 border border-blue-200/60 dark:border-blue-700/40" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-3.5 h-3.5 shrink-0" data-astro-cid-pf5okai3="true" data-icon="mdi:steam"><symbol id="ai:mdi:steam" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10c-4.6 0-8.45-3.08-9.64-7.27l3.83 1.58a2.84 2.84 0 0 0 2.78 2.27c1.56 0 2.83-1.27 2.83-2.83v-.13l3.4-2.43h.08c2.08 0 3.77-1.69 3.77-3.77s-1.69-3.77-3.77-3.77s-3.78 1.69-3.78 3.77v.05l-2.37 3.46l-.16-.01c-.59 0-1.14.18-1.59.49L2 11.2C2.43 6.05 6.73 2 12 2M8.28 17.17c.8.33 1.72-.04 2.05-.84s-.05-1.71-.83-2.04l-1.28-.53c.49-.18 1.04-.19 1.56.03c.53.21.94.62 1.15 1.15c.22.52.22 1.1 0 1.62c-.43 1.08-1.7 1.6-2.78 1.15c-.5-.21-.88-.59-1.09-1.04zm9.52-7.75c0 1.39-1.13 2.52-2.52 2.52a2.52 2.52 0 0 1-2.51-2.52a2.5 2.5 0 0 1 2.51-2.51a2.52 2.52 0 0 1 2.52 2.51m-4.4 0c0 1.04.84 1.89 1.89 1.89c1.04 0 1.88-.85 1.88-1.89s-.84-1.89-1.88-1.89c-1.05 0-1.89.85-1.89 1.89"/></symbol><use href="#ai:mdi:steam"></use></svg>+45.000 licencias en Steam</span><span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold bg-blue-100/70 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300 border border-blue-200/60 dark:border-blue-700/40" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-3.5 h-3.5 shrink-0" data-astro-cid-pf5okai3="true" data-icon="mdi:star"><symbol id="ai:mdi:star" viewBox="0 0 24 24">
110<path fill="currentColor" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2L9.19 8.62L2 9.24l5.45 4.73L5.82 21z"/></symbol><use href="#ai:mdi:star"></use></svg>+90 reseñas “Muy Positivas”</span></div><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://store.steampowered.com/app/4539950" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Jugar gratis en Steam" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:steam"><use href="#ai:mdi:steam"></use></svg>Jugar gratis en Steam</a><a href="https://unanswered.whiteroot.studio" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><symbol id="ai:mdi:web" viewBox="0 0 24 24"><path fill="currentColor" d="M16.36 14c.08-.66.14-1.32.14-2s-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2m-5.15 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56M14.34 14H9.66c-.1-.66-.16-1.32-.16-2s.06-1.35.16-2h4.68c.09.65.16 1.32.16 2s-.07 1.34-.16 2M12 19.96c-.83-1.2-1.5-2.53-1.91-3.96h3.82c-.41 1.43-1.08 2.76-1.91 3.96M8 8H5.08A7.92 7.92 0 0 1 9.4 4.44C8.8 5.55 8.35 6.75 8 8m-2.92 8H8c.35 1.25.8 2.45 1.4 3.56A8 8 0 0 1 5.08 16m-.82-2C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2s.06 1.34.14 2M12 4.03c.83 1.2 1.5 2.54 1.91 3.97h-3.82c.41-1.43 1.08-2.77 1.91-3.97M18.92 8h-2.95a15.7 15.7 0 0 0-1.38-3.56c1.84.63 3.37 1.9 4.33 3.56M12 2C6.47 2 2 6.5 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2"/></symbol><use href="#ai:mdi:web"></use></svg>Web</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-blue-50/70 to-blue-100/50 dark:from-blue-900/20 dark:to-blue-950/10 border-blue-200/50 dark:border-blue-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] " style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><link rel="preload" as="image" href="/croquetaclicker/main.webp" media="(min-width: 768px)"><link rel="preload" as="image" href="/croquetaclicker/phones.webp" media="(min-width: 768px)"><link rel="preload" as="image" href="/croquetaclicker/banner.webp" media="(min-width: 768px)"><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://croquetaclicker.whiteroot.studio" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de Croqueta Clicker (se abre en nueva pestaña)" data-astro-cid-pf5okai3>Croqueta Clicker<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2025" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2025</time><span class="text-xs font-medium text-green-600 dark:text-green-400 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:leaf"><symbol id="ai:mdi:leaf" viewBox="0 0 24 24">
110<path fill="currentColor" d="M17 8C8 10 5.9 16.17 3.82 21.34l1.89.66l.95-2.3c.48.17.98.3 1.34.3C19 20 22 3 22 3c-1 2-8 2.25-13 3.25S2 11.5 2 13.5s1.75 3.75 1.75 3.75C7 8 17 8 17 8"/></symbol><use href="#ai:mdi:leaf"></use></svg> Open Source</span></div></div><figure class="relative mb-6" role="group" aria-label="Galería de Croqueta Clicker" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-1" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para Croqueta Clicker" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/croquetaclicker/main.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/croquetaclicker/main.webp" alt="Vista previa 1 de Croqueta Clicker" sizes="(max-width: 768px) 100vw, 446px" loading="eager" decoding="async" fetchpriority="high" onclick="openModal('/croquetaclicker/main.webp', 1)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/croquetaclicker/phones.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/croquetaclicker/phones.webp" alt="Vista previa 2 de Croqueta Clicker" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/croquetaclicker/phones.webp', 1)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/croquetaclicker/banner.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/croquetaclicker/banner.webp" alt="Vista previa 3 de Croqueta Clicker" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/croquetaclicker/banner.webp', 1)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(1, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(1, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(1, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(1, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(1, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/angular.svg" alt="Logo de Angular" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/tailwindcss.svg" alt="Logo de Tailwind CSS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/supabase.svg" alt="Logo de Supabase" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Proyecto en Angular. Juego incremental de croquetas. Haz clicks en croquetas, desbloquea mejoras, compra productores automáticos y personaliza tu experiencia con skins exclusivas.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://play.google.com/store/apps/details?id=com.whiterootstudios.croquetaclicker" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Google Play" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:google-play">
110<symbol id="ai:mdi:google-play" viewBox="0 0 24 24"><path fill="currentColor" d="M3 20.5v-17c0-.59.34-1.11.84-1.35L13.69 12l-9.85 9.85c-.5-.25-.84-.76-.84-1.35m13.81-5.38L6.05 21.34l8.49-8.49zm3.35-4.31c.34.27.59.69.59 1.19s-.22.9-.57 1.18l-2.29 1.32l-2.5-2.5l2.5-2.5zM6.05 2.66l10.76 6.22l-2.27 2.27z"/></symbol><use href="#ai:mdi:google-play"></use></svg>Google Play</a><a href="https://croquetaclicker.whiteroot.studio" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web</a><a href="https://github.com/ImPavloh/croqueta-clicker" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Repositorio" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg>Repositorio</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-indigo-50/70 to-indigo-100/50 dark:from-indigo-900/20 dark:to-indigo-950/10 border-indigo-200/50 dark:border-indigo-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] " style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://cori-coffee-dev.vercel.app" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de CoriCoffee (se abre en nueva pestaña)" data-astro-cid-pf5okai3>CoriCoffee<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2025" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2025</time></div></div><figure class="relative mb-6" role="group" aria-label="Galería de CoriCoffee" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-2" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para CoriCoffee" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/coricoffee/mobile.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/coricoffee/mobile.webp" alt="Vista previa 1 de CoriCoffee" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/coricoffee/mobile.webp', 2)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/coricoffee/main.webp" type="image/webp" data-astro-cid-pf5okai3>
110<img src="/coricoffee/main.webp" alt="Vista previa 2 de CoriCoffee" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/coricoffee/main.webp', 2)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/coricoffee/packs.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/coricoffee/packs.webp" alt="Vista previa 3 de CoriCoffee" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/coricoffee/packs.webp', 2)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/coricoffee/team.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/coricoffee/team.webp" alt="Vista previa 4 de CoriCoffee" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/coricoffee/team.webp', 2)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/coricoffee/pack.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/coricoffee/pack.webp" alt="Vista previa 5 de CoriCoffee" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/coricoffee/pack.webp', 2)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(2, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(2, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(2, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(2, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(2, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(2, 3)" aria-label="Ir a la imagen 4" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(2, 4)" aria-label="Ir a la imagen 5" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/nextjs.svg" alt="Logo de NextJS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/tailwindcss.svg" alt="Logo de Tailwind CSS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/shopify.svg" alt="Logo de Shopify" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Ecommerce de CoriCoffee, la marca de Rioboo que quiere revolucionar el café frío con una experiencia 3D inmersiva, integración con Shopify, recetario y historia del proyecto. Disponible en español e inglés.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://cori-coffee-dev.vercel.app" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web demo" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web demo</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-sky-50/70 to-sky-100/50 dark:from-sky-900/20 dark:to-sky-950/10 border-sky-200/50 dark:border-sky-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] " style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dar
110k:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://21dias.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de 21 Días (se abre en nueva pestaña)" data-astro-cid-pf5okai3>21 Días<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2025" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2025</time></div></div><figure class="relative mb-6" role="group" aria-label="Galería de 21 Días" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-3" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para 21 Días" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/21dias/home.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/21dias/home.webp" alt="Vista previa 1 de 21 Días" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/21dias/home.webp', 3)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/21dias/home4.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/21dias/home4.webp" alt="Vista previa 2 de 21 Días" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/21dias/home4.webp', 3)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/21dias/phones.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/21dias/phones.webp" alt="Vista previa 3 de 21 Días" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/21dias/phones.webp', 3)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/21dias/phones4.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/21dias/phones4.webp" alt="Vista previa 4 de 21 Días" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/21dias/phones4.webp', 3)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/21dias/milfshakes.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/21dias/milfshakes.webp" alt="Vista previa 5 de 21 Días" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/21dias/milfshakes.webp', 3)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/21dias/episodes.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/21dias/episodes.webp" alt="Vista previa 6 de 21 Días" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/21dias/episodes.webp', 3)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(3, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(3, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(3, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(3, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(3, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(3, 3)" aria-label="Ir a la imagen 4" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(3, 4)" aria-label="Ir a la imagen 5" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(3, 5)" aria-label="Ir a la imagen 6" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/astro.svg" alt="Logo de Astro" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Proyecto inspirado en la serie 21 días de Nil Ojeda, que incluye las temporadas 3 y 4 de la serie con trailers, sección de la tienda M*
110**Shakes, mapas interactivos, información de las temporadas, el equipo, las reglas y más.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://21dias.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-cyan-50/70 to-cyan-100/50 dark:from-cyan-900/20 dark:to-cyan-950/10 border-cyan-200/50 dark:border-cyan-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://recycledj.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de Recycled J (se abre en nueva pestaña)" data-astro-cid-pf5okai3>Recycled J<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2025" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2025</time></div></div><figure class="relative mb-6" role="group" aria-label="Galería de Recycled J" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-4" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para Recycled J" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/recycledj/recycledj.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/recycledj/recycledj.webp" alt="Vista previa 1 de Recycled J" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/recycledj/recycledj.webp', 4)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/recycledj/moviles.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/recycledj/moviles.webp" alt="Vista previa 2 de Recycled J" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/recycledj/moviles.webp', 4)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/recycledj/previews.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/recycledj/previews.webp" alt="Vista previa 3 de Recycled J" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/recycledj/previews.webp', 4)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/recycledj/musicaConciertos.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/recycledj/musicaConciertos.webp" alt="Vista previa 4 de Recycled J" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/recycledj/musicaConciertos.webp', 4)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(4, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(4, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(4, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(4, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(4, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(4, 3)" aria-label="Ir a la imagen 4" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/nextjs.svg" alt="Logo de NextJS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/tailwindcss.svg" alt="Logo de Tailwind CSS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/spotify.svg" alt="Logo de Spotify" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Sitio no oficial de Recycled J que reúne su discografía completa, información sobre conciertos, merchandising y una galería de imágenes y videos oficiales.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://recycledj.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-blue-50/70 to-blue-100/50 dark:from-blue-900/20 dark:to-blue-950/10 border-blue-200/50 dark:border-blue-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dar
110k:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://spooklens.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de SpookLens (se abre en nueva pestaña)" data-astro-cid-pf5okai3>SpookLens<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2024" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2024</time><span class="text-xs font-medium text-green-600 dark:text-green-400 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:leaf"><use href="#ai:mdi:leaf"></use></svg> Open Source</span></div></div><figure class="relative mb-6" role="group" aria-label="Galería de SpookLens" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-5" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para SpookLens" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/spooklens/preview.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/spooklens/preview.webp" alt="Vista previa 1 de SpookLens" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/spooklens/preview.webp', 5)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/spooklens/modals.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/spooklens/modals.webp" alt="Vista previa 2 de SpookLens" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/spooklens/modals.webp', 5)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/spooklens/socialhub.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/spooklens/socialhub.webp" alt="Vista previa 3 de SpookLens" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/spooklens/socialhub.webp', 5)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/spooklens/store.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/spooklens/store.webp" alt="Vista previa 4 de SpookLens" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/spooklens/store.webp', 5)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/spooklens/uploader.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/spooklens/uploader.webp" alt="Vista previa 5 de SpookLens" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/spooklens/uploader.webp', 5)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(5, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(5, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(5, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(5, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(5, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(5, 3)" aria-label="Ir a la imagen 4" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(5, 4)" aria-label="Ir a la imagen 5" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/nextjs.svg" alt="Logo de NextJS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/tailwindcss.svg" alt="Logo de Tailwind CSS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/cloudinary.svg" alt="Logo de Cloudinary" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/firebase.svg" alt="Logo de Firebase" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Finalista Hackathon Cloudinary x MiduDev. Red social con temática de Halloween.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://spooklens.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web</a><a href="https://github.com/ImPavloh/spooklens" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Repositorio" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg>Repositorio</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-indigo-50/70 to-indigo-100/50 dark:from-indigo-900/20 dark:to-indigo-950/10 border-indigo-200/50 dark:border-indigo-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dar
110k:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://arcanetflix.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de ArcaNETFLIX (se abre en nueva pestaña)" data-astro-cid-pf5okai3>ArcaNETFLIX<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2024" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2024</time><span class="text-xs font-medium text-green-600 dark:text-green-400 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:leaf"><use href="#ai:mdi:leaf"></use></svg> Open Source</span></div></div><figure class="relative mb-6" role="group" aria-label="Galería de ArcaNETFLIX" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-6" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para ArcaNETFLIX" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/arcanetflix/arcanemain.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/arcanetflix/arcanemain.webp" alt="Vista previa 1 de ArcaNETFLIX" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/arcanetflix/arcanemain.webp', 6)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/arcanetflix/arcanemobile.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/arcanetflix/arcanemobile.webp" alt="Vista previa 2 de ArcaNETFLIX" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/arcanetflix/arcanemobile.webp', 6)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/arcanetflix/arcanecapturas.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/arcanetflix/arcanecapturas.webp" alt="Vista previa 3 de ArcaNETFLIX" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/arcanetflix/arcanecapturas.webp', 6)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(6, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(6, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(6, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(6, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(6, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/nextjs.svg" alt="Logo de NextJS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/tailwindcss.svg" alt="Logo de Tailwind CSS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Una web inspirada en la serie Arcane de Riot Games y Netflix. Incluye playlist oficial, selección de merch oficial, clips y capturas de la serie.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://arcanetflix.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web</a><a href="https://github.com/impavloh/arcanetflix" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Repositorio" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg>Repositorio</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-sky-50/70 to-sky-100/50 dark:from-sky-900/20 dark:to-sky-950/10 border-sky-200/50 dark:border-sky-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dar
110k:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://cli.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de Portfolio en terminal (se abre en nueva pestaña)" data-astro-cid-pf5okai3>Portfolio en terminal<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2025" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2025</time><span class="text-xs font-medium text-green-600 dark:text-green-400 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:leaf"><use href="#ai:mdi:leaf"></use></svg> Open Source</span></div></div><figure class="relative mb-6" role="group" aria-label="Galería de Portfolio en terminal" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-7" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para Portfolio en terminal" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/cliportfolio/cli-preview.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/cliportfolio/cli-preview.webp" alt="Vista previa 1 de Portfolio en terminal" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/cliportfolio/cli-preview.webp', 7)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/cliportfolio/web-preview.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/cliportfolio/web-preview.webp" alt="Vista previa 2 de Portfolio en terminal" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/cliportfolio/web-preview.webp', 7)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(7, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(7, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(7, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(7, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/astro.svg" alt="Logo de Astro" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/javascript.svg" alt="Logo de JavaScript" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Mi portfolio personal accesible desde la terminal, con un diseño minimalista y una experiencia de usuario al estilo CLI. Accesible tanto desde el navegador web como desde la terminal mediante curl.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://cli.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web</a><a href="https://github.com/impavloh/terminal-portfolio" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Repositorio" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg>Repositorio</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-cyan-50/70 to-cyan-100/50 dark:from-cyan-900/20 dark:to-cyan-950/10 border-cyan-200/50 dark:border-cyan-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dar
110k:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://chirptts.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de ChirpTTS (se abre en nueva pestaña)" data-astro-cid-pf5okai3>ChirpTTS<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2024" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2024</time></div></div><figure class="relative mb-6" role="group" aria-label="Galería de ChirpTTS" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-8" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para ChirpTTS" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/chirptts/chirptts.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/chirptts/chirptts.webp" alt="Vista previa 1 de ChirpTTS" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/chirptts/chirptts.webp', 8)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/chirptts/chatgpt.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/chirptts/chatgpt.webp" alt="Vista previa 2 de ChirpTTS" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/chirptts/chatgpt.webp', 8)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="/chirptts/wikipedia.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/chirptts/wikipedia.webp" alt="Vista previa 3 de ChirpTTS" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/chirptts/wikipedia.webp', 8)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(8, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(8, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(8, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(8, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(8, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/javascript.svg" alt="Logo de JavaScript" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/tailwindcss.svg" alt="Logo de Tailwind CSS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Una extensión de navegador gratuita que convierte tu texto en encantadores sonidos al estilo Animal Crossing. Perfecta para lecturas atractivas en sitios como ChatGPT y W
110ikipedia.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://chirptts.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-blue-50/70 to-blue-100/50 dark:from-blue-900/20 dark:to-blue-950/10 border-blue-200/50 dark:border-blue-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://old.pavloh.com/voiceme" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de VoiceMe! (se abre en nueva pestaña)" data-astro-cid-pf5okai3>VoiceMe!<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2023" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2023</time></div></div><figure class="relative mb-6" role="group" aria-label="Galería de VoiceMe!" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-9" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para VoiceMe!" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/NcMIajh.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/NcMIajh.png" alt="Vista previa 1 de VoiceMe!" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/NcMIajh.png', 9)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/tensorflow.svg" alt="Logo de Tensorflow" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/python.svg" alt="Logo de Python" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/discord.svg" alt="Logo de Discord API" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Bot TTS de Discord verificado con IA para usar voces personalizadas como Ibai, Homer Simpson, Ed Sheeran, Elon Musk y muchos más. El bot se encuentra offline actualmente.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://github.com/ImPavloh/rvc-tts-discord-bot" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Repositorio" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg>Repositorio</a><a href="https://old.pavloh.com/voiceme" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web</a><a href="https://discord.com/discovery/applications/909811449499631646" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Añadir a Discord" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:discord">
110<symbol id="ai:mdi:discord" viewBox="0 0 24 24"><path fill="currentColor" d="m22 24l-5.25-5l.63 2H4.5A2.5 2.5 0 0 1 2 18.5v-15A2.5 2.5 0 0 1 4.5 1h15A2.5 2.5 0 0 1 22 3.5V24M12 6.8c-2.68 0-4.56 1.15-4.56 1.15c1.03-.92 2.83-1.45 2.83-1.45l-.17-.17c-1.69.03-3.22 1.2-3.22 1.2c-1.72 3.59-1.61 6.69-1.61 6.69c1.4 1.81 3.48 1.68 3.48 1.68l.71-.9c-1.25-.27-2.04-1.38-2.04-1.38S9.3 14.9 12 14.9s4.58-1.28 4.58-1.28s-.79 1.11-2.04 1.38l.71.9s2.08.13 3.48-1.68c0 0 .11-3.1-1.61-6.69c0 0-1.53-1.17-3.22-1.2l-.17.17s1.8.53 2.83 1.45c0 0-1.88-1.15-4.56-1.15m-2.07 3.79c.65 0 1.18.57 1.17 1.27c0 .69-.52 1.27-1.17 1.27c-.64 0-1.16-.58-1.16-1.27c0-.7.51-1.27 1.16-1.27m4.17 0c.65 0 1.17.57 1.17 1.27c0 .69-.52 1.27-1.17 1.27c-.64 0-1.16-.58-1.16-1.27c0-.7.51-1.27 1.16-1.27Z"/></symbol><use href="#ai:mdi:discord"></use></svg>Añadir a Discord</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-indigo-50/70 to-indigo-100/50 dark:from-indigo-900/20 dark:to-indigo-950/10 border-indigo-200/50 dark:border-indigo-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://showdownclash.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de Showdown Clash (se abre en nueva pestaña)" data-astro-cid-pf5okai3>Showdown Clash<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2023" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2023</time><span class="text-xs font-medium text-green-600 dark:text-green-400 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:leaf"><use href="#ai:mdi:leaf"></use></svg> Open Source</span></div></div><figure class="relative mb-6" role="group" aria-label="Galería de Showdown Clash" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-10" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para Showdown Clash" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/fhBJdTx.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/fhBJdTx.png" alt="Vista previa 1 de Showdown Clash" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/fhBJdTx.png', 10)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/xikn4Uw.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/xikn4Uw.png" alt="Vista previa 2 de Showdown Clash" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/xikn4Uw.png', 10)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/DWHPglO.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/DWHPglO.png" alt="Vista previa 3 de Showdown Clash" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/DWHPglO.png', 10)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/DbNZj1J.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/DbNZj1J.png" alt="Vista previa 4 de Showdown Clash" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/DbNZj1J.png', 10)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/LT6CZo9.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/LT6CZo9.png" alt="Vista previa 5 de Showdown Clash" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/LT6CZo9.png', 10)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(10, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(10, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(10, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(10, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(10, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(10, 3)" aria-label="Ir a la imagen 4" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(10, 4)" aria-label="Ir a la imagen 5" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/html.svg" alt="Logo de HTML5" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/css.svg" alt="Logo de CSS3" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Página web de Showdown Clash: juego multijugador inspirado en New Super Mario Bros creado con Unity</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://showdownclash.pavloh.com" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Web" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Web</a><a href="https://github.com/ImPavloh/showdownclash" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Repositorio" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg>Repositorio</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-sky-50/70 to-sky-100/50 dark:from-sky-900/20 dark:to-sky-950/10 border-sky-200/50 dark:border-sky-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dar
110k:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://old.pavloh.com/voiceit" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de VoiceIt! (se abre en nueva pestaña)" data-astro-cid-pf5okai3>VoiceIt!<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2023" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2023</time><span class="text-xs font-medium text-green-600 dark:text-green-400 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:leaf"><use href="#ai:mdi:leaf"></use></svg> Open Source</span></div></div><figure class="relative mb-6" role="group" aria-label="Galería de VoiceIt!" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-11" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para VoiceIt!" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/PzENOsA.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/PzENOsA.png" alt="Vista previa 1 de VoiceIt!" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/PzENOsA.png', 11)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/tensorflow.svg" alt="Logo de Tensorflow" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/python.svg" alt="Logo de Python" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/huggingface.svg" alt="Logo de Hugging Face" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Plataforma interactiva donde puedes subir un audio, seleccionar el modelo de voz del streamer que hay y, con un solo clic, transformar la voz original en la que elijas. ¡Obtén tu nuevo audio personalizado al instante!</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://github.com/ImPavloh/VoiceIt" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Repositorio" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg>Repositorio</a><a href="https://old.pavloh.com/voiceit" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Demo" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:web"><use href="#ai:mdi:web"></use></svg>Demo</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-cyan-50/70 to-cyan-100/50 dark:from-cyan-900/20 dark:to-cyan-950/10 border-cyan-200/50 dark:border-cyan-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dar
110k:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><span data-astro-cid-pf5okai3>WhiTTsper The Lora</span></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2023" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2023</time><span class="text-xs font-medium text-green-600 dark:text-green-400 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:leaf"><use href="#ai:mdi:leaf"></use></svg> Open Source</span></div></div><figure class="relative mb-6" role="group" aria-label="Galería de WhiTTsper The Lora" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-12" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para WhiTTsper The Lora" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/whittsperthelora/demo.png" type="image/webp" data-astro-cid-pf5okai3><img src="/whittsperthelora/demo.png" alt="Vista previa 1 de WhiTTsper The Lora" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/whittsperthelora/demo.png', 12)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/python.svg" alt="Logo de Python" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/colab.svg" alt="Logo de Colab" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Demo que combina Whisper para reconocimiento de voz y Google TTS para síntesis de voz para interactuar con el LLM Alpaca-LoRA.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://github.com/ImPavloh/WhiTTsper-The-Lora" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Repositorio" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg>Repositorio</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-blue-50/70 to-blue-100/50 dark:from-blue-900/20 dark:to-blue-950/10 border-blue-200/50 dark:border-blue-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dar
110k:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><a href="https://www.spigotmc.org/resources/playertimelimit.109315/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2" aria-label="Visitar demo de Player Time Limit (se abre en nueva pestaña)" data-astro-cid-pf5okai3>Player Time Limit<svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5 opacity-80 group-hover:rotate-12 transition-transform duration-300" data-astro-cid-pf5okai3="true" data-icon="mdi:open-in-new"><use href="#ai:mdi:open-in-new"></use></svg></a></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2023" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2023</time><span class="text-xs font-medium text-green-600 dark:text-green-400 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:leaf"><use href="#ai:mdi:leaf"></use></svg> Open Source</span></div></div><figure class="relative mb-6" role="group" aria-label="Galería de Player Time Limit" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-13" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para Player Time Limit" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/izhsbRQ.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/izhsbRQ.png" alt="Vista previa 1 de Player Time Limit" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/izhsbRQ.png', 13)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/java.svg" alt="Logo de Java" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/spigot.svg" alt="Logo de Spigot" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Plugin de Minecraft Spigot 1.19+ que limita el tiempo de juego del jugador.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://github.com/ImPavloh/PlayerTimeLimit" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-blue-700 text-white hover:bg-blue-800 hover:shadow-lg" aria-label="Repositorio" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg>Repositorio</a><a href="https://www.spigotmc.org/resources/playertimelimit.109315/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="Spigot" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="simple-icons:spigotmc"><symbol id="ai:simple-icons:spigotmc" viewBox="0 0 24 24">
110<path fill="currentColor" d="M12.644 2.44a1.4 1.4 0 0 0-.603.331c-.245.2-.588.232-2.023.133l-1.713-.116l.049.713l.049.713h.652c.36-.016 1.207-.05 1.876-.083l1.224-.083v3.317l-.44.05c-.425.05-.457.1-.457.862c0 .713-.05.813-.36.863c-.26.033-.39.182-.44.464c-.016.232-.114.448-.18.497c-.08.05-.228.597-.326 1.211c-.228 1.526-.375 1.708-1.37 1.84c-1.436.167-2.056.134-2.056-.148c0-.2-.244-.25-1.158-.25c-1.012 0-1.158-.032-1.24-.33c-.065-.25-.228-.333-.62-.333s-.555.083-.62.332c-.082.299-.228.332-1.224.332c-1.011 0-1.158.033-1.256.332c-.049.182-.18.331-.26.331c-.082 0-.148.863-.148 1.99c0 1.609.05 1.99.229 1.99c.13 0 .293.15.342.332c.082.282.245.332 1.175.332c.914 0 1.077.05 1.142.331c.13.465 1.11.465 1.24 0c.065-.282.228-.331 1.158-.331c.849 0 1.077-.05 1.077-.25c0-.397 2.121-.33 3.426.117c1.583.53 5.14.53 6.82 0c.653-.199 1.256-.332 1.338-.282c.359.232.163.896-.343 1.178c-.587.298-.587.563 0 1.956l.343.797l1.599-.067c1.73-.083 2.822-.48 3.915-1.41l.539-.464l-.31-.912c-.327-.962-.734-1.327-1.518-1.327c-.342 0-.473-.149-.766-.796c-.506-1.144-1.224-1.758-2.758-2.355c-.799-.315-1.582-.746-1.99-1.127c-.604-.548-.685-.73-.832-1.775c-.098-.63-.245-1.194-.326-1.244c-.066-.05-.164-.265-.18-.497c-.049-.282-.18-.431-.424-.464c-.326-.05-.375-.15-.375-.863c0-.763-.033-.812-.44-.862c-.458-.05-.458-.05-.507-1.526c-.032-.929.017-1.542.13-1.658c.115-.116.93-.183 2.09-.183h1.908l.05-.564c.032-.298-.017-.63-.099-.713c-.098-.1-.816-.083-1.909.05c-1.256.15-1.778.15-1.86.017c-.146-.25-.848-.481-1.24-.398"/></symbol><use href="#ai:simple-icons:spigotmc"></use></svg>Spigot</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-indigo-50/70 to-indigo-100/50 dark:from-indigo-900/20 dark:to-indigo-950/10 border-indigo-200/50 dark:border-indigo-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><span data-astro-cid-pf5okai3>CurseForge Minecraft Mods</span></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3></div></div><figure class="relative mb-6" role="group" aria-label="Galería de CurseForge Minecraft Mods" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-14" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para CurseForge Minecraft Mods" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/HhrO9BP.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/HhrO9BP.png" alt="Vista previa 1 de CurseForge Minecraft Mods" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/HhrO9BP.png', 14)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/50613ZY.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/50613ZY.png" alt="Vista previa 2 de CurseForge Minecraft Mods" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/50613ZY.png', 14)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture><picture data-astro-cid-pf5okai3><source srcset="https://i.imgur.com/1EzzWoO.png" type="image/webp" data-astro-cid-pf5okai3><img src="https://i.imgur.com/1EzzWoO.png" alt="Vista previa 3 de CurseForge Minecraft Mods" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('https://i.imgur.com/1EzzWoO.png', 14)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div><button class="absolute left-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(14, -1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-white/80 dark:bg-zinc-900/80 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-zinc-900 transition-all duration-300 focus-visible:ring-2 focus-visible:ring-blue-500 md:opacity-0 md:group-hover/image:opacity-100" onclick="scrollCarousel(14, 1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-zinc-800 dark:text-zinc-200" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button><div class="absolute bottom-2 left-1/2 transform -translate-x-1/2 flex gap-4" role="tablist" aria-label="Navegación del carrusel" data-astro-cid-pf5okai3><button class="w-4 h-4 rounded-full transition-all duration-300 bg-blue-500 scale-125" onclick="goToSlide(14, 0)" aria-label="Ir a la imagen 1" role="tab" aria-selected="true" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(14, 1)" aria-label="Ir a la imagen 2" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button><button class="w-4 h-4 rounded-full transition-all duration-300 bg-gray-300 dark:bg-zinc-600" onclick="goToSlide(14, 2)" aria-label="Ir a la imagen 3" role="tab" aria-selected="false" data-astro-cid-pf5okai3></button></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/java.svg" alt="Logo de Java" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/curseforge.svg" alt="Logo de CurseForge" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Mods de Minecraft que he creado y están disponibles en CurseForge.</p><div class="flex flex-wrap gap-3 mt-4" data-astro-cid-pf5okai3><a href="https://legacy.curseforge.com/members/pavloh/projects" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 px-4 py-2 rounded-full text-sm font-medium transition-all duration-300 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-zinc-900 bg-gray-200 dark:bg-zinc-800 text-gray-900 dark:text-zinc-100 hover:bg-gray-300 dark:hover:bg-zinc-700" aria-label="CurseForge" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="simple-icons:condaforge"><symbol id="ai:simple-icons:condaforge" viewBox="0 0 24 24">
110<path fill="currentColor" d="m8.206 5.866l.005.396H6.754l.006.655v.005l-6.758.002v.211L0 7.973l.02.041c.212.467.663.901 1.257 1.313s1.335.796 2.145 1.13c1.62.664 3.502 1.12 5.006 1.1c.746-.01 1.265.228 1.62.672c.341.426.51 1.092.524 1.92l-2.632 2.09l.008 1.896H20.29l-.004-1.76l-2.63-2.22c.055-2.013.708-3.443 1.777-4.405c1.087-.979 2.61-1.49 4.37-1.616l.195-.015L24 5.872zm.425.422l14.946.006l-.004 1.457c-1.737.155-3.29.666-4.424 1.685c-.912.822-1.433 2.062-1.691 3.534l-1.617.004l.002.422l1.535-.004c-.027.226-.113.4-.123.64l-.893-.003l-.002.422l.995.004l2.138 1.802l-2.941.002c-.724-.675-1.552-1.116-2.416-1.158c-.817-.04-1.638.324-2.387 1.04l-2.978-.024l2.248-1.781v-.102c.002-.943-.2-1.72-.64-2.269c-.396-.496-1.007-.749-1.741-.79l-.008-4.49h.008zm-1.45.396h1.026l.008 4.404c-1.387-.02-3.125-.404-4.631-1.023c-.787-.324-1.507-.698-2.066-1.086C.968 8.6.587 8.203.424 7.86v-.514l6.336-.002v2.16h.422v-2.16h.004l-.004-.435zm6.935 8.839c.75.037 1.503.436 2.18 1.078l-.002 1.112h-4.345l-.006-1.2c.706-.717 1.443-1.026 2.173-.99M8.36 16.537l3.16.023l.006 1.153h-3.16zm11.5.142l.002 1.034h-3.148V16.68z"/></symbol><use href="#ai:simple-icons:condaforge"></use></svg>CurseForge</a></div></div></div></article><article class="group relative flex flex-col rounded-2xl md:p-5 shadow-md transition-all duration-300 overflow-hidden animate-fadeIn border bg-gradient-to-br from-sky-50/70 to-sky-100/50 dark:from-sky-900/20 dark:to-sky-950/10 border-sky-200/50 dark:border-sky-800/30 hover:shadow-[0_10px_15px_rgba(147,197,253,0.2)] dark:hover:shadow-[0_10px_15px_rgba(147,197,253,0.1)] hidden opacity-0 more-project" style="will-change: transform, opacity;" itemscope itemtype="https://schema.org/CreativeWork" role="article" data-astro-cid-pf5okai3><div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-0 bg-[radial-gradient(circle_at_center,rgba(147,197,253,0.15)_0%,transparent_70%)]" data-astro-cid-pf5okai3></div><div class="relative z-10 flex flex-col h-full" data-astro-cid-pf5okai3><div class="flex flex-col md:flex-row justify-between items-start mb-6" data-astro-cid-pf5okai3><h3 class="text-xl font-bold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3><span data-astro-cid-pf5okai3>Mi web portfolio</span></h3><div class="flex flex-wrap gap-2 mt-2 md:mt-0" data-astro-cid-pf5okai3><time datetime="2025" class="text-xs font-medium text-gray-700 dark:text-zinc-300 flex items-center gap-1" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-pf5okai3="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg> 2025</time></div></div><figure class="relative mb-6" role="group" aria-label="Galería de Mi web portfolio" data-astro-cid-pf5okai3><div class="relative rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 aspect-video group/image" data-astro-cid-pf5okai3><div class="grid auto-cols-[100%] grid-flow-col overflow-x-auto snap-x snap-mandatory scroll-smooth" id="carousel-15" tabindex="0" role="region" aria-roledescription="carrusel" aria-label="Carrusel de imágenes para Mi web portfolio" data-astro-cid-pf5okai3><picture data-astro-cid-pf5okai3><source srcset="/portfolio/portfolio-preview.webp" type="image/webp" data-astro-cid-pf5okai3><img src="/portfolio/portfolio-preview.webp" alt="Vista previa 1 de Mi web portfolio" sizes="(max-width: 768px) 100vw, 446px" loading="lazy" decoding="async" fetchpriority="auto" onclick="openModal('/portfolio/portfolio-preview.webp', 15)" draggable="false" data-astro-cid-pf5okai3="true" width="446" height="250" class="aspect-video object-cover snap-start cursor-pointer transition-opacity duration-300 hover:opacity-90"></picture></div></div></figure><div class="flex flex-col flex-1 gap-4" data-astro-cid-pf5okai3><div class="flex flex-wrap gap-1 md:gap-3 items-center" aria-label="Tecnologías utilizadas" data-astro-cid-pf5okai3><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/astro.svg" alt="Logo de Astro" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div><div class="relative group/tech" data-astro-cid-pf5okai3><img src="/badges/tailwindcss.svg" alt="Logo de Tailwind CSS" class="h-6 md:h-7 w-auto object-contain rounded-md md:rounded-lg" loading="lazy" width="100" height="28" data-astro-cid-pf5okai3></div></div><p class="text-gray-700 dark:text-zinc-300 text-sm md:text-base leading-relaxed group-hover:text-blue-900 dark:group-hover:text-blue-200 transition-colors duration-300" data-astro-cid-pf5okai3>Mi portfolio profesional en el que te encuentras actualmente, desarrollado con Astro y Tailwind CSS para un rendimiento óptimo en una sola página para lectura rápida. Actualizado constantemente con mis últimos proyectos, noticias y tecnologías.</p></div></div></article></div><noscript><style>.more-project { display: flex !important; opacity: 1 !important; } #showMoreButton { display: none !important; }</style></noscript><div class="flex justify-center mt-8" data-astro-cid-pf5okai3><button id="showMoreButton" onclick="showMoreProjects()" class="px-6 py-3 bg-blue-700 hover:bg-blue-800 text-white rounded-full font-medium transition-all duration-300 focus:ring-2 focus:ring-blue-300 dark:focus:ring-blue-600 flex items-center gap-2" aria-label="Mostrar más proyectos" data-astro-cid-pf5okai3><span data-astro-cid-pf5okai3>Mostrar más proyectos</span><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-5 h-5" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-down">
110<use href="#ai:mdi:chevron-down"></use></svg></button></div><div id="imageModal" class="fixed inset-0 hidden z-50 bg-black/90 backdrop-blur-sm" role="dialog" aria-modal="true" aria-label="Vista ampliada de imagen" tabindex="-1" data-astro-cid-pf5okai3><div class="flex flex-col h-full w-full" data-astro-cid-pf5okai3><div class="flex justify-between items-center p-4 text-white" data-astro-cid-pf5okai3><h3 id="modalTitle" class="text-xl font-semibold truncate" data-astro-cid-pf5okai3></h3><div class="flex gap-2" data-astro-cid-pf5okai3><span id="imageCounter" class="text-sm bg-black/50 px-3 py-1 rounded-full" data-astro-cid-pf5okai3></span><button id="enterFullscreenButton" class="bg-black/30 hover:bg-black/50 p-2 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white/50" aria-label="Entrar en pantalla completa" style="display: block;" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-5 h-5" data-astro-cid-pf5okai3="true" data-icon="mdi:fullscreen"><symbol id="ai:mdi:fullscreen" viewBox="0 0 24 24"><path fill="currentColor" d="M5 5h5v2H7v3H5zm9 0h5v5h-2V7h-3zm3 9h2v5h-5v-2h3zm-7 3v2H5v-5h2v3z"/></symbol><use href="#ai:mdi:fullscreen"></use></svg></button><button id="exitFullscreenButton" class="bg-black/30 hover:bg-black/50 p-2 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white/50" aria-label="Salir de pantalla completa" style="display: none;" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-5 h-5" data-astro-cid-pf5okai3="true" data-icon="mdi:fullscreen-exit"><symbol id="ai:mdi:fullscreen-exit" viewBox="0 0 24 24"><path fill="currentColor" d="M14 14h5v2h-3v3h-2zm-9 0h5v5H8v-3H5zm3-9h2v5H5V8h3zm11 3v2h-5V5h2v3z"/></symbol><use href="#ai:mdi:fullscreen-exit"></use></svg></button><button class="bg-black/30 hover:bg-black/50 p-2 rounded-full transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-white/50" onclick="closeModal()" aria-label="Cerrar modal" data-astro-cid-pf5okai3><svg width="1em" height="1em" class="w-5 h-5" data-astro-cid-pf5okai3="true" data-icon="mdi:close"><symbol id="ai:mdi:close" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></symbol><use href="#ai:mdi:close"></use></svg></button></div></div><!-- Modal Body --><div class="flex-1 flex items-center justify-center relative" data-astro-cid-pf5okai3><div class="w-full h-full flex items-center justify-center" data-astro-cid-pf5okai3><div id="modalImageContainer" class="relative w-full h-full flex items-center justify-center px-4" data-astro-cid-pf5okai3><img id="modalImage" class="max-w-full max-h-[80vh] object-contain rounded-lg animate-zoomIn" alt="Imagen ampliada" loading="lazy" data-astro-cid-pf5okai3><div id="loadingPlaceholder" class="absolute inset-0 flex items-center justify-center" data-astro-cid-pf5okai3><div class="flex flex-col items-center gap-2" data-astro-cid-pf5okai3><div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500" data-astro-cid-pf5okai3></div><span class="text-white text-sm" data-astro-cid-pf5okai3>Cargando imagen...</span></div></div></div></div><!-- Navigation Controls --><div id="modalNavigation" class="absolute inset-0 flex items-center justify-between p-4 pointer-events-none" data-astro-cid-pf5okai3><button id="prevButton" class="bg-black/40 hover:bg-black/60 p-3 rounded-full backdrop-blur-sm transition-all duration-300 hover:scale-110 focus:ring-2 focus:ring-white/50 pointer-events-auto" onclick="navigateModal(-1)" aria-label="Imagen anterior" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-white" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-left"><use href="#ai:mdi:chevron-left"></use></svg></button><button id="nextButton" class="bg-black/40 hover:bg-black/60 p-3 rounded-full backdrop-blur-sm transition-all duration-300 hover:scale-110 focus:ring-2 focus:ring-white/50 pointer-events-auto" onclick="navigateModal(1)" aria-label="Siguiente imagen" data-astro-cid-pf5okai3><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-6 h-6 text-white" data-astro-cid-pf5okai3="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></button></div></div><div class="p-4" data-astro-cid-pf5okai3><div id="modalThumbnails" class="flex gap-2 justify-center overflow-x-auto py-2 px-4" data-astro-cid-pf5okai3></div></div></div></div>
110<script>
111  const moreProjects = document.querySelectorAll('.more-project')
112  let shownCount = 0
113
114  const observer = new IntersectionObserver(
115    (entries) => {
116      entries.forEach((entry) => {
117        if (entry.isIntersecting) {
118          entry.target.classList.remove('hidden')
119          void entry.target.offsetWidth
120          entry.target.classList.remove('opacity-0')
121          entry.target.classList.add('animate-fadeIn')
122          observer.unobserve(entry.target)
123
124          shownCount++
125          if (shownCount >= moreProjects.length) {
126            observer.disconnect()
127          }
128        }
129      })
130    },
131    { rootMargin: '0px 0px 100px 0px', threshold: 0.1 },
132  )
133
134  moreProjects.forEach((project) => {
135    observer.observe(project)
136  })
137
138  window.addEventListener('pagehide', () => observer.disconnect())
139
140  function showMoreProjects() {
141    const moreProjects = document.querySelectorAll('.more-project')
142    const button = document.getElementById('showMoreButton')
143
144    button.classList.add('scale-0', 'opacity-0')
145    button.classList.add('hidden')
146
147    moreProjects.forEach((el) => {
148      el.classList.remove('hidden')
149      el.classList.remove('opacity-0')
150      el.classList.add('animate-fadeIn')
151    })
152
153    if (window.projectObserver) {
154      window.projectObserver.disconnect()
155    }
156  }
157
158  function updatePagination(index) {
159    const carousel = document.getElementById(`carousel-${index}`)
160    const currentSlide = Math.round(carousel.scrollLeft / carousel.offsetWidth)
161    carousel.parentElement
162      .querySelectorAll('[role="tab"]')
163      .forEach((button, i) => {
164        button.classList.toggle('bg-blue-500', i === currentSlide)
165        button.classList.toggle('scale-125', i === currentSlide)
166        button.classList.toggle('bg-gray-300', i !== currentSlide)
167        button.classList.toggle('dark:bg-zinc-600', i !== currentSlide)
168        button.setAttribute(
169          'aria-selected',
170          i === currentSlide ? 'true' : 'false',
171        )
172      })
173  }
174
175  document.querySelectorAll('[role="region"]').forEach((carousel) => {
176    carousel.addEventListener('scroll', () =>
177      updatePagination(carousel.id.split('-')[1]),
178    )
179  })
180
181  function goToSlide(index, slideIndex) {
182    const carousel = document.getElementById(`carousel-${index}`)
183    const slideWidth = carousel.offsetWidth
184    carousel.scrollTo({ left: slideWidth * slideIndex, behavior: 'smooth' })
185  }
186
187  function scrollCarousel(index, direction) {
188    const carousel = document.getElementById(`carousel-${index}`)
189    const slideWidth = carousel.offsetWidth
190    const totalSlides = carousel.querySelectorAll('img').length
191    const currentSlide = Math.round(carousel.scrollLeft / slideWidth)
192    const newSlide = (currentSlide + direction + totalSlides) % totalSlides
193    carousel.scrollTo({ left: slideWidth * newSlide, behavior: 'smooth' })
194  }
195
196  let currentImageIndex = 0
197  let currentProjectName = ''
198  let currentImages = []
199  let isFullscreen = false
200
201  function openModal(imageSrc, index) {
202    const modal = document.getElementById('imageModal')
203    const modalImage = document.getElementById('modalImage')
204    const loadingPlaceholder = document.getElementById('loadingPlaceholder')
205    const modalTitle = document.getElementById('modalTitle')
206    const modalThumbnails = document.getElementById('modalThumbnails')
207    const navigationButtons = document.getElementById('modalNavigation')
208
209    modalImage.style.display = 'none'
210    loadingPlaceholder.style.display = 'flex'
211    modalThumbnails.innerHTML = ''
212
213    const carousel = document.getElementById(`carousel-${index}`)
214    const projectElement = carousel.closest('article')
215    currentProjectName = projectElement.querySelector('h3').textContent.trim()
216    modalTitle.textContent = currentProjectName
217
218    const imageElements = Array.from(carousel.querySelectorAll('img'))
219    currentImages = imageElements.map((img) => ({
220      src: img.src,
221      alt: img.alt,
222    }))
223
224    currentImageIndex = currentImages.findIndex(
225      (img) =>
226        img.src === imageSrc || img.src.replace('.webp', '.jpg') === imageSrc,
227    )
228
229    if (currentImageIndex === -1) currentImageIndex = 0
230
231    updateImageCounter()
232
233    if (currentImages.length > 1) {
234      currentImages.forEach((img, idx) => {
235        const thumbnail = document.createElement('button')
236        thumbnail.className = `w-16 h-16 rounded overflow-hidden flex-shrink-0 transition-all duration-300 focus:ring-2 focus:ring-blue-500 ${idx === currentImageIndex ? 'ring-2 ring-blue-500 scale-110' : 'opacity-70 hover:opacity-100'}`
237        thumbnail.setAttribute('aria-label', `Ver imagen ${idx + 1}`)
238        thumbnail.onclick = () => showImage(idx)
239
240        const thumbImg = document.createElement('img')
241        thumbImg.src = img.src
242        thumbImg.alt = `Miniatura ${idx + 1}`
243        thumbImg.className = 'w-full h-full object-cover'
244
245        thumbnail.appendChild(thumbImg)
246        modalThumbnails.appendChild(thumbnail)
247      })
248    }
249
250    navigationButtons.style.display =
251      currentImages.length <= 1 ? 'none' : 'flex'
252
253    modal.classList.remove('hidden')
254    modal.classList.add('flex')
255    document.body.classList.add('overflow-hidden')
256
257    isFullscreen = false
258    handleFullscreenChange()
259
260    setTimeout(() => {
261      loadImage(currentImages[currentImageIndex].src)
262    }, 100)
263
264    modal.focus()
265  }
266
267  function loadImage(src) {
268    const modalImage = document.getElementById('modalImage')
269    const loadingPlaceholder = document.getElementById('loadingPlaceholder')
270
271    modalImage.style.display = 'none'
272    loadingPlaceholder.style.display = 'flex'
273
274    const img = new Image()
275    img.onload = function () {
276      modalImage.src = src
277      modalImage.alt =
278        currentImages[currentImageIndex].alt ||
279        `Imagen ${currentImageIndex + 1} de ${currentProjectName}`
280      modalImage.style.display = 'block'
281      loadingPlaceholder.style.display = 'none'
282
283      preloadAdjacentImages()
284    }
285    img.onerror = function () {
286      console.error('Error loading image:', src)
287      loadingPlaceholder.innerHTML = `
288        <div class="flex flex-col items-center gap-2">
289          <svg class="w-12 h-12 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
290            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 12 10 12 10-4.48 10-12S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
291          </svg>
292          <span class="text-white text-sm">Error al cargar la imagen</span>
293        </div>
294      `
295    }
296    img.src = src
297  }
298
299  function updateImageCounter() {
300    const imageCounter = document.getElementById('imageCounter')
301    imageCounter.textContent = `${currentImageIndex + 1} / ${currentImages.length}`
302  }
303
304  function showImage(index) {
305    if (index < 0 || index >= currentImages.length) return
306
307    currentImageIndex = index
308    loadImage(currentImages[index].src)
309
310    const thumbnails = document.querySelectorAll('#modalThumbnails button')
311    thumbnails.forEach((thumb, idx) => {
312      if (idx === index) {
313        thumb.classList.add('ring-2', 'ring-blue-500', 'scale-110')
314        thumb.classList.remove('opacity-70')
315      } else {
316        thumb.classList.remove('ring-2', 'ring-blue-500', 'scale-110')
317        thumb.classList.add('opacity-70')
318      }
319    })
320
321    updateImageCounter()
322  }
323
324  function navigateModal(direction) {
325    const newIndex =
326      (currentImageIndex + direction + currentImages.length) %
327      currentImages.length
328    showImage(newIndex)
329  }
330
331  function closeModal() {
332    const modal = document.getElementById('imageModal')
333    modal.classList.add('hidden')
334    modal.classList.remove('flex')
335    document.body.classList.remove('overflow-hidden')
336
337    if (isFullscreen && document.exitFullscreen) {
338      document.exitFullscreen()
339    }
340  }
341
342  function toggleFullscreen() {
343    const modalContainer = document.getElementById('imageModal')
344    if (!isFullscreen) {
345      modalContainer.requestFullscreen?.()
346    } else {
347      document.exitFullscreen?.()
348    }
349  }
350
351  function handleFullscreenChange() {
352    const enterButton = document.getElementById('enterFullscreenButton')
353    const exitButton = document.getElementById('exitFullscreenButton')
354    isFullscreen = !!document.fullscreenElement
355
356    if (isFullscreen) {
357      enterButton.style.display = 'none'
358      exitButton.style.display = 'block'
359    } else {
360      enterButton.style.display = 'block'
361      exitButton.style.display = 'none'
362    }
363  }
364
365  document.getElementById('enterFullscreenButton').onclick = toggleFullscreen
366  document.getElementById('exitFullscreenButton').onclick = toggleFullscreen
367
368  document.addEventListener('fullscreenchange', handleFullscreenChange)
369  document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
370  document.addEventListener('mozfullscreenchange', handleFullscreenChange)
371  document.addEventListener('MSFullscreenChange', handleFullscreenChange)
372
373  document.addEventListener('keydown', (e) => {
374    const modal = document.getElementById('imageModal')
375    if (modal.classList.contains('hidden')) return
376
377    switch (e.key) {
378      case 'Escape':
379        closeModal()
380        break
381      case 'ArrowLeft':
382        navigateModal(-1)
383        break
384      case 'ArrowRight':
385        navigateModal(1)
386        break
387      case 'Home':
388        showImage(0)
389        break
390      case 'End':
391        showImage(currentImages.length - 1)
392        break
393      case 'f':
394        toggleFullscreen()
395        break
396    }
397  })
398
399  let touchStartX = 0
400  let touchEndX = 0
401
402  document
403    .getElementById('modalImageContainer')
404    .addEventListener('touchstart', (e) => {
405      touchStartX = e.changedTouches[0].screenX
406    })
407
408  document
409    .getElementById('modalImageContainer')
410    .addEventListener('touchend', (e) => {
411      touchEndX = e.changedTouches[0].screenX
412      handleSwipe()
413    })
414
415  function handleSwipe() {
416    const swipeThreshold = 50
417
418    if (touchEndX < touchStartX - swipeThreshold) {
419      navigateModal(1)
420    } else if (touchEndX > touchStartX + swipeThreshold) {
421      navigateModal(-1)
422    }
423  }
424
425  function preloadAdjacentImages() {
426    if (currentImages.length <= 1) return
427
428    const nextIndex = (currentImageIndex + 1) % currentImages.length
429    const prevIndex =
430      (currentImageIndex - 1 + currentImages.length) % currentImages.length
431
432    new Image().src = currentImages[nextIndex].src
433    new Image().src = currentImages[prevIndex].src
434  }
435
436  Object.assign(window, {
437    showMoreProjects,
438    goToSlide,
439    scrollCarousel,
440    openModal,
441    showImage,
442    navigateModal,
443    closeModal,
444    toggleFullscreen
445  });
446</script>
446</div></div></section><noscript><style>.section-content { grid-template-rows: 1fr !important; } .toggle-btn { display: none !important; }</style></noscript>
446<script type="module">document.addEventListener(`DOMContentLoaded`,()=>{let e=document.querySelectorAll(`.collapsible-section`);if(!e.length)return;e.forEach(e=>{let n=e.querySelector(`div:first-child`),r=e.querySelector(`.toggle-btn`),i=e.querySelector(`.section-content`);if(r&&n&&i){let a=()=>{t(e,r,i)};r.addEventListener(`click`,e=>{e.stopPropagation(),a()}),n.addEventListener(`click`,e=>{e.target!==r&&!r.contains(e.target)&&a()})}});function t(e,t,n){if(t.dataset.state===`expanded`)n.classList.remove(`overflow-visible`),n.offsetHeight,n.classList.remove(`is-open`),n.classList.add(`is-closed`),t.dataset.state=`collapsed`,t.setAttribute(`aria-expanded`,`false`);else{n.classList.remove(`is-closed`),n.classList.add(`is-open`),t.dataset.state=`expanded`,t.setAttribute(`aria-expanded`,`true`);let r=e=>{e.propertyName===`grid-template-rows`&&t.dataset.state===`expanded`&&n.classList.add(`overflow-visible`),n.removeEventListener(`transitionend`,r)};n.addEventListener(`transitionend`,r),e.getBoundingClientRect().top<0&&e.scrollIntoView({behavior:`smooth`,block:`start`})}}let n=()=>{let e=window.location.hash;if(!e)return;let n=document.querySelector(e);if(n&&n.classList.contains(`collapsible-section`)){let e=n.querySelector(`.toggle-btn`),r=n.querySelector(`.section-content`);e&&r&&e.dataset.state===`collapsed`&&t(n,e,r)}};window.addEventListener(`hashchange`,n),n()});</script>
446<!-- Sección de experiencia laboral (colapsable) --><section id="experiencia" class="collapsible-section space-y-3 sm:space-y-4 border-b border-gray-200 dark:border-gray-800 pb-4" data-astro-cid-uevlgqxv><div class="flex justify-between items-center cursor-pointer py-3 sm:py-4 select-none group/header" data-astro-cid-uevlgqxv><h2 class="ml-2 sm:ml-8 text-2xl sm:text-3xl font-bold transition-colors duration-300 group-hover/header:text-blue-500 text-center w-full" data-astro-cid-uevlgqxv>Experiencia laboral</h2><button class="toggle-btn flex justify-center items-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-blue-500 border-2 border-blue-500 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-transform duration-300 hover:scale-110 relative aspect-square" aria-label="Mostrar/ocultar experiencia" aria-expanded="false" aria-controls="experiencia-content" data-state="collapsed" data-astro-cid-uevlgqxv><svg width="18" height="18" viewBox="0 0 24 24" class="icon-collapse absolute transition-all duration-300" data-astro-cid-uevlgqxv="true" data-icon="mdi:minus"><use href="#ai:mdi:minus"></use></svg><svg width="18" height="18" viewBox="0 0 24 24" class="icon-expand absolute transition-all duration-300" data-astro-cid-uevlgqxv="true" data-icon="mdi:plus"><use href="#ai:mdi:plus"></use></svg></button></div><div id="experiencia-content" class="section-content is-closed" data-astro-cid-uevlgqxv><div class="section-inner pb-4 sm:pb-6 px-2 sm:px-0" data-astro-cid-uevlgqxv><div class="mt-8 flex flex-col gap-8" data-astro-cid-bl6cniha><div class="relative flex flex-col md:flex-row gap-4 rounded-lg p-4 sm:p-6 transition-all duration-300 
447          bg-gradient-to-r from-blue-50/60 to-indigo-50/30 dark:from-blue-950/20 dark:to-indigo-950/10 shadow-md hover:shadow-lg border border-zinc-200 dark:border-zinc-700/40 border-l-4 border-l-blue-500" data-astro-cid-bl6cniha><div class="absolute left-6 md:left-[3.25rem] top-20 bottom-[-2rem] w-0.5 bg-gradient-to-b from-blue-500 to-transparent hidden md:block z-0" data-astro-cid-bl6cniha></div><div class="flex gap-3 md:hidden items-center mb-3 relative z-10" data-astro-cid-bl6cniha><div class="w-12 h-12 flex-shrink-0 bg-gradient-to-br from-blue-500 to-indigo-500 p-3 rounded-full text-white flex items-center justify-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" class="h-6 w-6" data-astro-cid-bl6cniha="true" data-icon="mdi:briefcase"><symbol id="ai:mdi:briefcase" viewBox="0 0 24 24"><path fill="currentColor" d="M10 2h4a2 2 0 0 1 2 2v2h4a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8c0-1.11.89-2 2-2h4V4c0-1.11.89-2 2-2m4 4V4h-4v2z"/></symbol><use href="#ai:mdi:briefcase"></use></svg></div><div class="flex-1" data-astro-cid-bl6cniha><h3 class="text-lg sm:text-xl font-bold text-zinc-800 dark:text-zinc-100 line-clamp-2" data-astro-cid-bl6cniha>PROGRAMADOR FULL STACK</h3><p class="text-base sm:text-lg font-medium text-blue-500 dark:text-blue-400 line-clamp-1" data-astro-cid-bl6cniha>Ioonic Sistemas</p></div></div><div class="flex-shrink-0 mb-4 md:mb-0 self-start hidden md:block relative z-10" data-astro-cid-bl6cniha><div class="w-14 h-14 flex-shrink-0 bg-gradient-to-br from-blue-500 to-indigo-500 p-3 rounded-full text-white flex items-center justify-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-7 w-7" data-astro-cid-bl6cniha="true" data-icon="mdi:briefcase"><use href="#ai:mdi:briefcase"></use></svg></div></div><div class="flex-1" data-astro-cid-bl6cniha><div class="hidden md:flex flex-wrap justify-between items-start gap-2" data-astro-cid-bl6cniha><div data-astro-cid-bl6cniha><h3 class="text-xl font-bold text-zinc-800 dark:text-zinc-100 transition-colors" data-astro-cid-bl6cniha>PROGRAMADOR FULL STACK</h3><p class="text-sm italic text-zinc-600 dark:text-zinc-400 mb-1" data-astro-cid-bl6cniha>Programador Full Stack</p><div class="flex flex-wrap items-center gap-2" data-astro-cid-bl6cniha><a href="https://www.ioonic.es" target="_blank" rel="noopener noreferrer" class="text-lg font-medium text-blue-500 dark:text-blue-400 hover:text-blue-600 dar
447k:hover:text-blue-300 transition-colors" data-astro-cid-bl6cniha>Ioonic Sistemas<svg width="1em" height="1em" class="inline-block ml-1 w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:external-link"><symbol id="ai:mdi:external-link" viewBox="0 0 24 24"><path fill="currentColor" d="M14 3v2h3.59l-9.83 9.83l1.41 1.41L19 6.41V10h2V3m-2 16H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2z"/></symbol><use href="#ai:mdi:external-link"></use></svg></a><span class="text-zinc-400" data-astro-cid-bl6cniha>•</span><span class="text-zinc-600 dark:text-zinc-400 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Híbrido (Móstoles, Madrid)</span></div></div><div class="px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-sm font-medium text-blue-700 dark:text-blue-300 flex items-center backdrop-blur-sm" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>03/2026 - Presente</div></div><div class="md:hidden flex flex-wrap gap-2 mb-3" data-astro-cid-bl6cniha><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:account"><use href="#ai:mdi:account"></use></svg>Programador Full Stack</div><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Híbrido (Móstoles, Madrid)</div><div class="px-2 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs font-medium text-blue-700 dark:text-blue-300 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>03/2026 - Presente</div></div><div class="mt-2 md:mt-4 text-zinc-600 dark:text-zinc-300" data-astro-cid-bl6cniha><ul class="list-none space-y-2" data-astro-cid-bl6cniha><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Desarrollo y mantenimiento de aplicaciones web Full Stack tras un exitoso periodo de prácticas profesionales.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Implementación de soluciones escalables y mantenibles en entornos de producción.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Colaboración activa con el equipo de desarrollo en la mejora continua de los productos de la empresa.</span></li></ul></div><div class="mt-3 md:mt-4 flex flex-wrap gap-1 sm:gap-2" data-astro-cid-bl6cniha><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Full Stack</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Web Development</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>TypeScript</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Angular</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>NestJS</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>MongoDB</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>PostgreSQL</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Git</span></div><div class="mt-3 md:hidden" data-astro-cid-bl6cniha><a href="https://www.ioonic.es" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-sm text-blue-500 dark:text-blue-400 hover:text-blue-600 dar
447k:hover:text-blue-300 transition-colors" aria-label="Visitar Ioonic Sistemas" data-astro-cid-bl6cniha>Visitar Ioonic Sistemas<svg width="1em" height="1em" viewBox="0 0 24 24" class="ml-1 w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:external-link"><use href="#ai:mdi:external-link"></use></svg></a></div></div></div><div class="relative flex flex-col md:flex-row gap-4 rounded-lg p-4 sm:p-6 transition-all duration-300 
448          bg-zinc-50 dark:bg-zinc-800/80 hover:shadow-md border border-zinc-200 dark:border-zinc-700/40" data-astro-cid-bl6cniha><div class="absolute left-6 md:left-[3.25rem] top-20 bottom-[-2rem] w-0.5 bg-gradient-to-b from-blue-500 to-transparent hidden md:block z-0" data-astro-cid-bl6cniha></div><div class="flex gap-3 md:hidden items-center mb-3 relative z-10" data-astro-cid-bl6cniha><div class="w-12 h-12 rounded-full p-0.5 bg-gradient-to-br from-blue-500 to-indigo-500 flex items-center justify-center overflow-hidden flex-shrink-0" data-astro-cid-bl6cniha><img src="/empresas/etsii-urjc.webp" alt="ETSII - Universidad Rey Juan Carlos logo" class="w-full h-full object-cover rounded-full bg-white dark:bg-zinc-900 p-1" loading="lazy" data-astro-cid-bl6cniha></div><div class="flex-1" data-astro-cid-bl6cniha><h3 class="text-lg sm:text-xl font-bold text-zinc-800 dark:text-zinc-100 line-clamp-2" data-astro-cid-bl6cniha>ADMINISTRADOR DE SISTEMAS Y PROGRAMADOR EN PRÁCTICAS</h3><p class="text-base sm:text-lg font-medium text-blue-500 dark:text-blue-400 line-clamp-1" data-astro-cid-bl6cniha>ETSII - Universidad Rey Juan Carlos</p></div></div><div class="flex-shrink-0 mb-4 md:mb-0 self-start hidden md:block relative z-10" data-astro-cid-bl6cniha><div class="w-14 h-14 rounded-full p-0.5 bg-gradient-to-br from-blue-500 to-indigo-500 flex items-center justify-center overflow-hidden" data-astro-cid-bl6cniha><img src="/empresas/etsii-urjc.webp" alt="ETSII - Universidad Rey Juan Carlos logo" class="w-full h-full object-cover rounded-full bg-white dark:bg-zinc-900 p-1" loading="lazy" data-astro-cid-bl6cniha></div></div><div class="flex-1" data-astro-cid-bl6cniha><div class="hidden md:flex flex-wrap justify-between items-start gap-2" data-astro-cid-bl6cniha><div data-astro-cid-bl6cniha><h3 class="text-xl font-bold text-zinc-800 dark:text-zinc-100 transition-colors" data-astro-cid-bl6cniha>ADMINISTRADOR DE SISTEMAS Y PROGRAMADOR EN PRÁCTICAS</h3><p class="text-sm italic text-zinc-600 dark:text-zinc-400 mb-1" data-astro-cid-bl6cniha>Administrador de Sistemas y Desarrollador Web</p><div class="flex flex-wrap items-center gap-2" data-astro-cid-bl6cniha><a href="https://www.urjc.es/etsii" target="_blank" rel="noopener noreferrer" class="text-lg font-medium text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors" data-astro-cid-bl6cniha>ETSII - Universidad Rey Juan Carlos<svg width="1em" height="1em" viewBox="0 0 24 24" class="inline-block ml-1 w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:external-link"><use href="#ai:mdi:external-link"></use></svg></a><span class="text-zinc-400" data-astro-cid-bl6cniha>•</span><span class="text-zinc-600 dark:text-zinc-400 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Móstoles (Madrid, España)</span></div></div><div class="px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-sm font-medium text-blue-700 dark:text-blue-300 flex items-center backdrop-blur-sm" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>03/24 - 06/24</div></div><div class="md:hidden flex flex-wrap gap-2 mb-3" data-astro-cid-bl6cniha><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:account"><use href="#ai:mdi:account"></use></svg>Administrador de Sistemas y Desarrollador Web</div><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Móstoles (Madrid, España)</div><div class="px-2 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs font-medium text-blue-700 dark:text-blue-300 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>03/24 - 06/24</div></div><div class="mt-2 md:mt-4 text-zinc-600 dark:text-zinc-300" data-astro-cid-bl6cniha><ul class="list-none space-y-2" data-astro-cid-bl6cniha><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Administré servidores Ubuntu, optimizando su rendimiento y seguridad para garantizar un tiempo de actividad del 99.9%.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Configuré y controlé conexiones remotas mediante SSH, RDP y VNC desde Windows, facilitando el trabajo a distancia del equipo.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Desarrollé scripts en Bash y Batch, automatizando tareas y reduciendo el tiempo de mantenimiento en un 40%.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Gestioné bases de datos MySQL y MongoDB, implementando esquemas eficientes y optimizando consultas.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Edición y desarrollo de sitios web utilizando HTML5, PHP, Node.js y Java, mejorando la experiencia de usuario y tiempos de carga.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Utilicé Git para control de versiones y colaboración en proyectos, facilitando el trabajo en equipo y gestionando merges y pull requests.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Implementé y administré sitios web en WordPress, mejorando su funcionalidad y diseño según las necesidades de los departamentos.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Elaboré documentación técnica detallada para soporte y formación interna, acelerando la incorporación de nuevos miembros al equipo.</span></li></ul></div><div class="mt-3 md:mt-4 flex flex-wrap gap-1 sm:gap-2" data-astro-cid-bl6cniha><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Ubuntu</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>MySQL</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>MongoDB</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Git</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>HTML5</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>PHP</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Node.js</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Java</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>WordPress</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Seguridad Informática</span></div><div class="mt-2 flex flex-wrap gap-1 sm:gap-2" data-astro-cid-bl6cniha><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><symbol id="ai:mdi:tools" viewBox="0 0 24 24">
448<path fill="currentColor" d="m21.71 20.29l-1.42 1.42a1 1 0 0 1-1.41 0L7 9.85A3.8 3.8 0 0 1 6 10a4 4 0 0 1-3.78-5.3l2.54 2.54l.53-.53l1.42-1.42l.53-.53L4.7 2.22A4 4 0 0 1 10 6a3.8 3.8 0 0 1-.15 1l11.86 11.88a1 1 0 0 1 0 1.41M2.29 18.88a1 1 0 0 0 0 1.41l1.42 1.42a1 1 0 0 0 1.41 0l5.47-5.46l-2.83-2.83M20 2l-4 2v2l-2.17 2.17l2 2L18 8h2l2-4Z"/></symbol><use href="#ai:mdi:tools"></use></svg>VSCode</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>GitLab</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Docker</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Jenkins</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Nginx</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Apache</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>PuTTY</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>WinSCP</span></div><div class="mt-3 md:hidden" data-astro-cid-bl6cniha><a href="https://www.urjc.es/etsii" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-sm text-blue-500 dark:text-blue-400 hover:text-blue-600 dark:hover:text-blue-300 transition-colors" aria-label="Visitar ETSII - Universidad Rey Juan Carlos" data-astro-cid-bl6cniha>Visitar ETSII - Universidad Rey Juan Carlos<svg width="1em" height="1em" viewBox="0 0 24 24" class="ml-1 w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:external-link"><use href="#ai:mdi:external-link"></use></svg></a></div></div></div>
448<div class="relative flex flex-col md:flex-row gap-4 rounded-lg p-4 sm:p-6 transition-all duration-300 
449          bg-zinc-50 dark:bg-zinc-800/80 hover:shadow-md border border-zinc-200 dark:border-zinc-700/40" data-astro-cid-bl6cniha><div class="absolute left-6 md:left-[3.25rem] top-20 bottom-[-2rem] w-0.5 bg-gradient-to-b from-blue-500 to-transparent hidden md:block z-0" data-astro-cid-bl6cniha></div><div class="flex gap-3 md:hidden items-center mb-3 relative z-10" data-astro-cid-bl6cniha><div class="w-12 h-12 rounded-full p-0.5 bg-gradient-to-br from-blue-500 to-indigo-500 flex items-center justify-center overflow-hidden flex-shrink-0" data-astro-cid-bl6cniha><img src="/empresas/dbkcode.webp" alt="DBKCode - Club eSports logo" class="w-full h-full object-cover rounded-full bg-white dark:bg-zinc-900 p-1" loading="lazy" data-astro-cid-bl6cniha></div><div class="flex-1" data-astro-cid-bl6cniha><h3 class="text-lg sm:text-xl font-bold text-zinc-800 dark:text-zinc-100 line-clamp-2" data-astro-cid-bl6cniha>GESTOR DE REDES SOCIALES</h3><p class="text-base sm:text-lg font-medium text-blue-500 dark:text-blue-400 line-clamp-1" data-astro-cid-bl6cniha>DBKCode - Club eSports</p></div></div><div class="flex-shrink-0 mb-4 md:mb-0 self-start hidden md:block relative z-10" data-astro-cid-bl6cniha><div class="w-14 h-14 rounded-full p-0.5 bg-gradient-to-br from-blue-500 to-indigo-500 flex items-center justify-center overflow-hidden" data-astro-cid-bl6cniha><img src="/empresas/dbkcode.webp" alt="DBKCode - Club eSports logo" class="w-full h-full object-cover rounded-full bg-white dark:bg-zinc-900 p-1" loading="lazy" data-astro-cid-bl6cniha></div></div><div class="flex-1" data-astro-cid-bl6cniha><div class="hidden md:flex flex-wrap justify-between items-start gap-2" data-astro-cid-bl6cniha><div data-astro-cid-bl6cniha><h3 class="text-xl font-bold text-zinc-800 dark:text-zinc-100 transition-colors" data-astro-cid-bl6cniha>GESTOR DE REDES SOCIALES</h3><p class="text-sm italic text-zinc-600 dark:text-zinc-400 mb-1" data-astro-cid-bl6cniha>Social Media Manager</p><div class="flex flex-wrap items-center gap-2" data-astro-cid-bl6cniha><p class="text-lg font-medium text-blue-500 dark:text-blue-400" data-astro-cid-bl6cniha>DBKCode - Club eSports</p><span class="text-zinc-400" data-astro-cid-bl6cniha>•</span><span class="text-zinc-600 dark:text-zinc-400 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Remoto</span><span class="text-zinc-400" data-astro-cid-bl6cniha>•</span><span class="text-zinc-600 dark:text-zinc-400 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" class="w-4 h-4 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:account-group"><symbol id="ai:mdi:account-group" viewBox="0 0 24 24"><path fill="currentColor" d="M12 5.5A3.5 3.5 0 0 1 15.5 9a3.5 3.5 0 0 1-3.5 3.5A3.5 3.5 0 0 1 8.5 9A3.5 3.5 0 0 1 12 5.5M5 8c.56 0 1.08.15 1.53.42c-.15 1.43.27 2.85 1.13 3.96C7.16 13.34 6.16 14 5 14a3 3 0 0 1-3-3a3 3 0 0 1 3-3m14 0a3 3 0 0 1 3 3a3 3 0 0 1-3 3c-1.16 0-2.16-.66-2.66-1.62a5.54 5.54 0 0 0 1.13-3.96c.45-.27.97-.42 1.53-.42M5.5 18.25c0-2.07 2.91-3.75 6.5-3.75s6.5 1.68 6.5 3.75V20h-13zM0 20v-1.5c0-1.39 1.89-2.56 4.45-2.9c-.59.68-.95 1.62-.95 2.65V20zm24 0h-3.5v-1.75c0-1.03-.36-1.97-.95-2.65c2.56.34 4.45 1.51 4.45 2.9z"/></symbol><use href="#ai:mdi:account-group"></use></svg>8 miembros</span></div></div><div class="px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-sm font-medium text-blue-700 dark:text-blue-300 flex items-center backdrop-blur-sm" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>2021 - 2023</div></div><div class="md:hidden flex flex-wrap gap-2 mb-3" data-astro-cid-bl6cniha><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:account"><use href="#ai:mdi:account"></use></svg>Social Media Manager</div><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Remoto</div><div class="px-2 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs font-medium text-blue-700 dark:text-blue-300 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>2021 - 2023</div><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:account-group"><use href="#ai:mdi:account-group"></use></svg>8 miembros</div></div><div class="mt-2 md:mt-4 text-zinc-600 dark:text-zinc-300" data-astro-cid-bl6cniha><ul class="list-none space-y-2" data-astro-cid-bl6cniha><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Administré y gestioné plataformas de redes sociales, incrementando la visibilidad de la marca en un 30% mediante estrategias de contenido relevantes.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Implementé estrategias de marketing digital para aumentar la visibilidad del club y el engagement, logrando un crecimiento de seguidores del 45% en 18 meses.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Diseñé campañas específicas para eventos y torneos, aumentando la participación en un 25% respecto a eventos anteriores.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>
449Analicé métricas y datos para evaluar la eficacia de las campañas, adaptando la estrategia para maximizar el impacto y ROI.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Colaboré con streamers y creadores de contenido para amplificar el alcance de la marca mediante colaboraciones estratégicas.</span></li></ul></div><div class="mt-3 md:mt-4 flex flex-wrap gap-1 sm:gap-2" data-astro-cid-bl6cniha><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Social Media</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Marketing Digital</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Análisis de datos</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Estrategia de contenido</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Community management</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Gestión de campañas</span></div><div class="mt-2 flex flex-wrap gap-1 sm:gap-2" data-astro-cid-bl6cniha><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Adobe Photoshop</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Canva</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Discord</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Twitter</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>OBS Studio</span></div></div></div>
449<div class="relative flex flex-col md:flex-row gap-4 rounded-lg p-4 sm:p-6 transition-all duration-300 
450          bg-zinc-50 dark:bg-zinc-800/80 hover:shadow-md border border-zinc-200 dark:border-zinc-700/40" data-astro-cid-bl6cniha><div class="flex gap-3 md:hidden items-center mb-3 relative z-10" data-astro-cid-bl6cniha><div class="w-12 h-12 flex-shrink-0 bg-gradient-to-br from-blue-500 to-indigo-500 p-3 rounded-full text-white flex items-center justify-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-6 w-6" data-astro-cid-bl6cniha="true" data-icon="mdi:briefcase"><use href="#ai:mdi:briefcase"></use></svg></div><div class="flex-1" data-astro-cid-bl6cniha><h3 class="text-lg sm:text-xl font-bold text-zinc-800 dark:text-zinc-100 line-clamp-2" data-astro-cid-bl6cniha>DESARROLLADOR WEB</h3><p class="text-base sm:text-lg font-medium text-blue-500 dark:text-blue-400 line-clamp-1" data-astro-cid-bl6cniha>Proyectos independientes</p></div></div><div class="flex-shrink-0 mb-4 md:mb-0 self-start hidden md:block relative z-10" data-astro-cid-bl6cniha><div class="w-14 h-14 flex-shrink-0 bg-gradient-to-br from-blue-500 to-indigo-500 p-3 rounded-full text-white flex items-center justify-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-7 w-7" data-astro-cid-bl6cniha="true" data-icon="mdi:briefcase"><use href="#ai:mdi:briefcase"></use></svg></div></div><div class="flex-1" data-astro-cid-bl6cniha><div class="hidden md:flex flex-wrap justify-between items-start gap-2" data-astro-cid-bl6cniha><div data-astro-cid-bl6cniha><h3 class="text-xl font-bold text-zinc-800 dark:text-zinc-100 transition-colors" data-astro-cid-bl6cniha>DESARROLLADOR WEB</h3><p class="text-sm italic text-zinc-600 dark:text-zinc-400 mb-1" data-astro-cid-bl6cniha>Full Stack Developer</p><div class="flex flex-wrap items-center gap-2" data-astro-cid-bl6cniha><p class="text-lg font-medium text-blue-500 dark:text-blue-400" data-astro-cid-bl6cniha>Proyectos independientes</p><span class="text-zinc-400" data-astro-cid-bl6cniha>•</span><span class="text-zinc-600 dark:text-zinc-400 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Remoto</span></div></div><div class="px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-sm font-medium text-blue-700 dark:text-blue-300 flex items-center backdrop-blur-sm" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>2022 - Presente</div></div><div class="md:hidden flex flex-wrap gap-2 mb-3" data-astro-cid-bl6cniha><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:account"><use href="#ai:mdi:account"></use></svg>Full Stack Developer</div><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Remoto</div><div class="px-2 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs font-medium text-blue-700 dark:text-blue-300 flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>2022 - Presente</div></div><div class="mt-2 md:mt-4 text-zinc-600 dark:text-zinc-300" data-astro-cid-bl6cniha><ul class="list-none space-y-2" data-astro-cid-bl6cniha><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Diseño y desarrollo de sitios web responsivos para pequeñas empresas, mejorando su presencia digital y experiencia de usuario.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Implementación de soluciones e-commerce con WordPress y Shopify, aumentando las ventas online de los clientes.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Optimización SEO y mejora de rendimiento web, consiguiendo mejoras de hasta un 40% en velocidad de carga.</span></li><li class="flex items-start group" data-astro-cid-bl6cniha><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-bl6cniha="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-bl6cniha>Mantenimiento y actualización de sitios existentes, garantizando su seguridad y funcionamiento óptimo.</span></li></ul></div><div class="mt-3 md:mt-4 flex flex-wrap gap-1 sm:gap-2" data-astro-cid-bl6cniha><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>HTML5</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>CSS3</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>JavaScript</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>React</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>WordPress</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Shopify</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>SEO</span><span class="px-2 sm:px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-blue-500/20 dark:hover:bg-blue-500/30 transition-colors cursor-default" data-astro-cid-bl6cniha>Responsive Design</span></div><div class="mt-2 flex flex-wrap gap-1 sm:gap-2" data-astro-cid-bl6cniha><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>GitHub</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>WordPress</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Google Lighthouse</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>Webpack</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default flex items-center" data-astro-cid-bl6cniha><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-bl6cniha="true" data-icon="mdi:tools"><use href="#ai:mdi:tools"></use></svg>SASS</span></div></div></div></div>
450<script type="module">document.addEventListener(`DOMContentLoaded`,()=>{let e=document.querySelectorAll(`.mt-8 > div`);e.forEach(e=>{e.classList.add(`group`)});let t=new IntersectionObserver(e=>{e.forEach((e,n)=>{if(e.isIntersecting){let r=window.innerWidth<768?100:150;setTimeout(()=>{e.target.classList.add(`animate-fadeIn`)},n*r),t.unobserve(e.target)}})},{threshold:.1,rootMargin:`0px 0px -50px 0px`});e.forEach(e=>{t.observe(e),e.classList.add(`opacity-0`)})});</script>
450</div></div></section><noscript><style>.section-content { grid-template-rows: 1fr !important; } .toggle-btn { display: none !important; }</style></noscript><!-- Sección de formacion (colapsable) --><section id="formacion" class="collapsible-section space-y-3 sm:space-y-4 border-b border-gray-200 dark:border-gray-800 pb-4" data-astro-cid-uevlgqxv><div class="flex justify-between items-center cursor-pointer py-3 sm:py-4 select-none group/header" data-astro-cid-uevlgqxv><h2 class="ml-2 sm:ml-8 text-2xl sm:text-3xl font-bold transition-colors duration-300 group-hover/header:text-blue-500 text-center w-full" data-astro-cid-uevlgqxv>Formación académica</h2><button class="toggle-btn flex justify-center items-center w-8 h-8 sm:w-10 sm:h-10 rounded-full text-blue-500 border-2 border-blue-500 bg-transparent hover:bg-blue-50 dark:hover:bg-blue-900/30 transition-transform duration-300 hover:scale-110 relative aspect-square" aria-label="Mostrar/ocultar formación" aria-expanded="false" aria-controls="formacion-content" data-state="collapsed" data-astro-cid-uevlgqxv><svg width="18" height="18" viewBox="0 0 24 24" class="icon-collapse absolute transition-all duration-300" data-astro-cid-uevlgqxv="true" data-icon="mdi:minus"><use href="#ai:mdi:minus"></use></svg><svg width="18" height="18" viewBox="0 0 24 24" class="icon-expand absolute transition-all duration-300" data-astro-cid-uevlgqxv="true" data-icon="mdi:plus"><use href="#ai:mdi:plus"></use></svg></button></div><div id="formacion-content" class="section-content is-closed" data-astro-cid-uevlgqxv><div class="section-inner pb-4 sm:pb-6 px-2 sm:px-0" data-astro-cid-uevlgqxv><div class="mt-8 flex flex-col gap-8" data-astro-cid-ew4vagfh><div class="relative flex flex-col md:flex-row gap-4 rounded-lg p-4 sm:p-6 transition-all duration-300 
451          bg-gradient-to-r from-blue-50/60 to-cyan-50/30 dark:from-blue-950/20 dark:to-cyan-950/10 shadow-md hover:shadow-lg border border-zinc-200 dark:border-zinc-700/40 border-l-4 border-l-blue-500" data-astro-cid-ew4vagfh><div class="absolute left-6 md:left-[3.25rem] top-20 bottom-[-2rem] w-0.5 bg-gradient-to-b from-blue-500 to-transparent hidden md:block z-0" data-astro-cid-ew4vagfh></div><div class="flex gap-3 md:hidden items-center mb-3 relative z-10" data-astro-cid-ew4vagfh><div class="w-12 h-12 flex-shrink-0 bg-gradient-to-br from-blue-500 to-cyan-500 p-3 rounded-full text-white flex items-center justify-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" class="h-6 w-6" data-astro-cid-ew4vagfh="true" data-icon="mdi:school"><symbol id="ai:mdi:school" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3L1 9l11 6l9-4.91V17h2V9M5 13.18v4L12 21l7-3.82v-4L12 17z"/></symbol><use href="#ai:mdi:school"></use></svg></div><div class="flex-1" data-astro-cid-ew4vagfh><h3 class="text-lg sm:text-xl font-bold text-zinc-800 dark:text-zinc-100 line-clamp-2" data-astro-cid-ew4vagfh>DESARROLLO DE APLICACIONES MULTIPLATAFORMA</h3><p class="text-base sm:text-lg font-medium text-blue-500 dark:text-blue-400 line-clamp-1" data-astro-cid-ew4vagfh>IES El Cañaveral</p></div></div><div class="flex-shrink-0 mb-4 md:mb-0 self-start hidden md:block relative z-10" data-astro-cid-ew4vagfh><div class="w-14 h-14 flex-shrink-0 bg-gradient-to-br from-blue-500 to-cyan-500 p-3 rounded-full text-white flex items-center justify-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-7 w-7" data-astro-cid-ew4vagfh="true" data-icon="mdi:school"><use href="#ai:mdi:school"></use></svg></div></div><div class="flex-1" data-astro-cid-ew4vagfh><div class="hidden md:flex flex-wrap justify-between items-start gap-2" data-astro-cid-ew4vagfh><div data-astro-cid-ew4vagfh><h3 class="text-xl font-bold text-zinc-800 dark:text-zinc-100 transition-colors" data-astro-cid-ew4vagfh>DESARROLLO DE APLICACIONES MULTIPLATAFORMA</h3><div class="flex flex-wrap items-center gap-2" data-astro-cid-ew4vagfh><p class="text-lg font-medium text-blue-500 dark:text-blue-400" data-astro-cid-ew4vagfh>IES El Cañaveral</p><span class="text-zinc-400" data-astro-cid-ew4vagfh>•</span><span class="text-zinc-600 dark:text-zinc-400 flex items-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Madrid</span></div></div><div class="px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-sm font-medium text-blue-700 dark:text-blue-300 flex items-center backdrop-blur-sm" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>2024 - 2026</div><div class="px-3 py-1 bg-cyan-500/10 dark:bg-cyan-500/20 rounded-full text-sm font-medium text-cyan-700 dark:text-cyan-300 flex items-center backdrop-blur-sm" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:star"><use href="#ai:mdi:star"></use></svg>Nota media: 9 (3 Matrículas de Honor)</div></div><div class="md:hidden flex flex-wrap gap-2 mb-3" data-astro-cid-ew4vagfh><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Madrid</div><div class="px-2 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs font-medium text-blue-700 dark:text-blue-300 flex items-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>2024 - 2026</div><div class="px-2 py-1 bg-cyan-500/10 dark:bg-cyan-500/20 rounded-full text-xs font-medium text-cyan-700 dark:text-cyan-300 flex items-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:star"><use href="#ai:mdi:star"></use></svg>Nota media: 9 (3 Matrículas de Honor)</div></div><div class="mt-2 md:mt-4 text-zinc-600 dark:text-zinc-300" data-astro-cid-ew4vagfh><ul class="list-none space-y-2" data-astro-cid-ew4vagfh><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>Gestión de bases de datos, asegurando su integridad, consistencia y seguridad.</span></li><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>Desarrollo de aplicaciones multiplataforma con acceso a bases de datos.
451</span></li><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>Integración de contenidos gráficos y multimedia en aplicaciones multiplataforma.</span></li><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>Desarrollo de interfaces gráficas de usuario interactivas y usables.</span></li><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>Creación de aplicaciones para dispositivos móviles.</span></li><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>Desarrollo de aplicaciones multiproceso y multihilo.</span></li></ul></div><div class="mt-3 md:mt-4 text-zinc-600 dark:text-zinc-300" data-astro-cid-ew4vagfh><ul class="list-none space-y-1.5" data-astro-cid-ew4vagfh><li class="flex items-start" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-0.5" data-astro-cid-ew4vagfh><svg width="1em" height="1em" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:trophy"><symbol id="ai:mdi:trophy" viewBox="0 0 24 24"><path fill="currentColor" d="M18 2c-.9 0-2 1-2 2H8c0-1-1.1-2-2-2H2v9c0 1 1 2 2 2h2.2c.4 2 1.7 3.7 4.8 4v2.08C8 19.54 8 22 8 22h8s0-2.46-3-2.92V17c3.1-.3 4.4-2 4.8-4H20c1 0 2-1 2-2V2zM6 11H4V4h2zm14 0h-2V4h2z"/></symbol><use href="#ai:mdi:trophy"></use></svg></span><span class="text-sm sm:text-base font-medium" data-astro-cid-ew4vagfh>Matrícula de Honor en TFG (UNANSWERED)</span></li></ul></div><div class="mt-3 md:mt-4 flex flex-wrap gap-1 sm:gap-2" data-astro-cid-ew4vagfh><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>Java</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>SQL</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>Frontend</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>UI/UX</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>Mobile</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>Git</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>GitHub</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>C#</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>Python</span></div></div></div>
451<div class="relative flex flex-col md:flex-row gap-4 rounded-lg p-4 sm:p-6 transition-all duration-300 
452          bg-zinc-50 dark:bg-zinc-800/80 hover:shadow-md border border-zinc-200 dark:border-zinc-700/40" data-astro-cid-ew4vagfh><div class="flex gap-3 md:hidden items-center mb-3 relative z-10" data-astro-cid-ew4vagfh><div class="w-12 h-12 flex-shrink-0 bg-gradient-to-br from-blue-500 to-cyan-500 p-3 rounded-full text-white flex items-center justify-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-6 w-6" data-astro-cid-ew4vagfh="true" data-icon="mdi:school"><use href="#ai:mdi:school"></use></svg></div><div class="flex-1" data-astro-cid-ew4vagfh><h3 class="text-lg sm:text-xl font-bold text-zinc-800 dark:text-zinc-100 line-clamp-2" data-astro-cid-ew4vagfh>SISTEMAS MICROINFORMÁTICOS Y REDES</h3><p class="text-base sm:text-lg font-medium text-blue-500 dark:text-blue-400 line-clamp-1" data-astro-cid-ew4vagfh>IES El Cañaveral</p></div></div><div class="flex-shrink-0 mb-4 md:mb-0 self-start hidden md:block relative z-10" data-astro-cid-ew4vagfh><div class="w-14 h-14 flex-shrink-0 bg-gradient-to-br from-blue-500 to-cyan-500 p-3 rounded-full text-white flex items-center justify-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-7 w-7" data-astro-cid-ew4vagfh="true" data-icon="mdi:school"><use href="#ai:mdi:school"></use></svg></div></div><div class="flex-1" data-astro-cid-ew4vagfh><div class="hidden md:flex flex-wrap justify-between items-start gap-2" data-astro-cid-ew4vagfh><div data-astro-cid-ew4vagfh><h3 class="text-xl font-bold text-zinc-800 dark:text-zinc-100 transition-colors" data-astro-cid-ew4vagfh>SISTEMAS MICROINFORMÁTICOS Y REDES</h3><div class="flex flex-wrap items-center gap-2" data-astro-cid-ew4vagfh><p class="text-lg font-medium text-blue-500 dark:text-blue-400" data-astro-cid-ew4vagfh>IES El Cañaveral</p><span class="text-zinc-400" data-astro-cid-ew4vagfh>•</span><span class="text-zinc-600 dark:text-zinc-400 flex items-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Madrid</span></div></div><div class="px-3 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-sm font-medium text-blue-700 dark:text-blue-300 flex items-center backdrop-blur-sm" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>2022 - 2024</div></div><div class="md:hidden flex flex-wrap gap-2 mb-3" data-astro-cid-ew4vagfh><div class="px-2 py-1 bg-zinc-200/80 dark:bg-zinc-700/80 rounded-full text-xs font-medium text-zinc-800 dark:text-zinc-200 flex items-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:map-marker"><use href="#ai:mdi:map-marker"></use></svg>Madrid</div><div class="px-2 py-1 bg-blue-500/10 dark:bg-blue-500/20 rounded-full text-xs font-medium text-blue-700 dark:text-blue-300 flex items-center" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-3 h-3 mr-1" data-astro-cid-ew4vagfh="true" data-icon="mdi:calendar"><use href="#ai:mdi:calendar"></use></svg>2022 - 2024</div></div><div class="mt-2 md:mt-4 text-zinc-600 dark:text-zinc-300" data-astro-cid-ew4vagfh><ul class="list-none space-y-2" data-astro-cid-ew4vagfh><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>Adquisición de habilidades técnicas para la instalación, configuración y mantenimiento de sistemas microinformáticos y redes.</span></li><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>
452Competencia en el montaje y configuración de ordenadores y periféricos, así como en la realización de diagnósticos y resolución de problemas.</span></li><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>Preparación de documentación técnica y administrativa del sistema, con capacidad para brindar asesoramiento al cliente.</span></li><li class="flex items-start group" data-astro-cid-ew4vagfh><span class="text-blue-500 mr-2 mt-1 transition-colors" data-astro-cid-ew4vagfh><svg width="1em" height="1em" viewBox="0 0 24 24" class="w-4 h-4" data-astro-cid-ew4vagfh="true" data-icon="mdi:chevron-right"><use href="#ai:mdi:chevron-right"></use></svg></span><span class="text-sm sm:text-base transition-colors" data-astro-cid-ew4vagfh>Experiencia en desarrollo frontend, con dominio de HTML, CSS y JavaScript para la creación de sitios web.</span></li></ul></div><div class="mt-3 md:mt-4 flex flex-wrap gap-1 sm:gap-2" data-astro-cid-ew4vagfh><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>Redes</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>Administración de Sistemas</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>Hardware</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>HTML/CSS</span><span class="px-2 sm:px-3 py-1 bg-indigo-500/10 dark:bg-indigo-500/20 rounded-full text-xs sm:text-sm font-medium text-zinc-800 dark:text-zinc-100 hover:bg-indigo-500/20 dark:hover:bg-indigo-500/30 transition-colors cursor-default" data-astro-cid-ew4vagfh>JavaScript</span></div></div></div></div>
452<script type="module">document.addEventListener(`DOMContentLoaded`,()=>{let e=document.querySelectorAll(`.mt-8 > div`);e.forEach(e=>{e.classList.add(`group`)});let t=new IntersectionObserver(e=>{e.forEach((e,n)=>{if(e.isIntersecting){let r=window.innerWidth<768?100:150;setTimeout(()=>{e.target.classList.add(`animate-fadeIn`)},n*r),t.unobserve(e.target)}})},{threshold:.1,rootMargin:`0px 0px -50px 0px`});e.forEach(e=>{t.observe(e),e.classList.add(`opacity-0`)})});</script>
452</div></div></section><noscript><style>.section-content { grid-template-rows: 1fr !important; } .toggle-btn { display: none !important; }</style></noscript><!-- Sección de tecnologías (siempre visible) --><section id="tecnologias" class="space-y-3 sm:space-y-4 border-b border-gray-200 dark:border-gray-800 pb-6 sm:pb-8 mb-4"><h2 class="text-center text-2xl sm:text-3xl font-bold py-3 sm:py-4">Tecnologías principales</h2><div class="px-2 sm:px-0"><div class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-8 xl:grid-cols-10 gap-4" role="list"><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de HTML5" data-icon="vscode-icons:file-type-html"><symbol id="ai:vscode-icons:file-type-html" viewBox="0 0 32 32"><path fill="#e44f26" d="M5.902 27.201L3.655 2h24.69l-2.25 25.197L15.985 30z"/><path fill="#f1662a" d="m16 27.858l8.17-2.265l1.922-21.532H16z"/><path fill="#ebebeb" d="M16 13.407h-4.09l-.282-3.165H16V7.151H8.25l.074.83l.759 8.517H16zm0 8.027l-.014.004l-3.442-.929l-.22-2.465H9.221l.433 4.852l6.332 1.758l.014-.004z"/><path fill="#fff" d="M15.989 13.407v3.091h3.806l-.358 4.009l-3.448.93v3.216l6.337-1.757l.046-.522l.726-8.137l.076-.83zm0-6.256v3.091h7.466l.062-.694l.141-1.567l.074-.83z"/></symbol><use href="#ai:vscode-icons:file-type-html"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">HTML5</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Frontend</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="0.95em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Angular" data-icon="logos:angular-icon"><symbol id="ai:logos:angular-icon" viewBox="0 0 256 271"><defs><linearGradient id="logosAngularIcon0" x1="25.071%" x2="96.132%" y1="90.929%" y2="55.184%"><stop offset="0%" stop-color="#E40035"/><stop offset="24%" stop-color="#F60A48"/><stop offset="35.2%" stop-color="#F20755"/><stop offset="49.4%" stop-color="#DC087D"/><stop offset="74.5%" stop-color="#9717E7"/><stop offset="100%" stop-color="#6C00F5"/></linearGradient><linearGradient id="logosAngularIcon1" x1="21.863%" x2="68.367%" y1="12.058%" y2="68.21%"><stop offset="0%" stop-color="#FF31D9"/><stop offset="100%" stop-color="#FF5BE1" stop-opacity="0"/></linearGradient></defs><path fill="url(#logosAngularIcon0)" d="m256 45.179l-9.244 145.158L158.373 0zm-61.217 187.697l-66.782 38.105l-66.784-38.105L74.8 199.958h106.4zM128.001 72.249l34.994 85.076h-69.99zM9.149 190.337L0 45.179L97.627 0z"/><path fill="url(#logosAngularIcon1)" d="m256 45.179l-9.244 145.158L158.373 0zm-61.217 187.697l-66.782 38.105l-66.784-38.105L74.8 199.958h106.4zM128.001 72.249l34.994 85.076h-69.99zM9.149 190.337L0 45.179L97.627 0z"/></symbol><use href="#ai:logos:angular-icon"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Angular</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Frontend</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de React" data-icon="mdi:react"><symbol id="ai:mdi:react" viewBox="0 0 24 24">
452<path fill="currentColor" d="M12 10.11c1.03 0 1.87.84 1.87 1.89c0 1-.84 1.85-1.87 1.85S10.13 13 10.13 12c0-1.05.84-1.89 1.87-1.89M7.37 20c.63.38 2.01-.2 3.6-1.7c-.52-.59-1.03-1.23-1.51-1.9a23 23 0 0 1-2.4-.36c-.51 2.14-.32 3.61.31 3.96m.71-5.74l-.29-.51c-.11.29-.22.58-.29.86c.27.06.57.11.88.16zm6.54-.76l.81-1.5l-.81-1.5c-.3-.53-.62-1-.91-1.47C13.17 9 12.6 9 12 9s-1.17 0-1.71.03c-.29.47-.61.94-.91 1.47L8.57 12l.81 1.5c.3.53.62 1 .91 1.47c.54.03 1.11.03 1.71.03s1.17 0 1.71-.03c.29-.47.61-.94.91-1.47M12 6.78c-.19.22-.39.45-.59.72h1.18c-.2-.27-.4-.5-.59-.72m0 10.44c.19-.22.39-.45.59-.72h-1.18c.2.27.4.5.59.72M16.62 4c-.62-.38-2 .2-3.59 1.7c.52.59 1.03 1.23 1.51 1.9c.82.08 1.63.2 2.4.36c.51-2.14.32-3.61-.32-3.96m-.7 5.74l.29.51c.11-.29.22-.58.29-.86c-.27-.06-.57-.11-.88-.16zm1.45-7.05c1.47.84 1.63 3.05 1.01 5.63c2.54.75 4.37 1.99 4.37 3.68s-1.83 2.93-4.37 3.68c.62 2.58.46 4.79-1.01 5.63c-1.46.84-3.45-.12-5.37-1.95c-1.92 1.83-3.91 2.79-5.38 1.95c-1.46-.84-1.62-3.05-1-5.63c-2.54-.75-4.37-1.99-4.37-3.68s1.83-2.93 4.37-3.68c-.62-2.58-.46-4.79 1-5.63c1.47-.84 3.46.12 5.38 1.95c1.92-1.83 3.91-2.79 5.37-1.95M17.08 12c.34.75.64 1.5.89 2.26c2.1-.63 3.28-1.53 3.28-2.26s-1.18-1.63-3.28-2.26c-.25.76-.55 1.51-.89 2.26M6.92 12c-.34-.75-.64-1.5-.89-2.26c-2.1.63-3.28 1.53-3.28 2.26s1.18 1.63 3.28 2.26c.25-.76.55-1.51.89-2.26m9 2.26l-.3.51c.31-.05.61-.1.88-.16c-.07-.28-.18-.57-.29-.86zm-2.89 4.04c1.59 1.5 2.97 2.08 3.59 1.7c.64-.35.83-1.82.32-3.96c-.77.16-1.58.28-2.4.36c-.48.67-.99 1.31-1.51 1.9M8.08 9.74l.3-.51c-.31.05-.61.1-.88.16c.07.28.18.57.29.86zm2.89-4.04C9.38 4.2 8 3.62 7.37 4c-.63.35-.82 1.82-.31 3.96a23 23 0 0 1 2.4-.36c.48-.67.99-1.31 1.51-1.9"/></symbol><use href="#ai:mdi:react"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">React</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Frontend</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Next.js" data-icon="teenyicons:nextjs-solid"><symbol id="ai:teenyicons:nextjs-solid" viewBox="0 0 15 15"><path fill="currentColor" fill-rule="evenodd" d="M0 7.5a7.5 7.5 0 1 1 11.698 6.216L4.906 4.21A.5.5 0 0 0 4 4.5V12h1V6.06l5.83 8.162A7.5 7.5 0 0 1 0 7.5M10 10V4h1v6z" clip-rule="evenodd"/></symbol><use href="#ai:teenyicons:nextjs-solid"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Next.js</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Frontend</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Tailwind CSS" data-icon="mdi:tailwind"><symbol id="ai:mdi:tailwind" viewBox="0 0 24 24"><path fill="currentColor" d="M12 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.31.74 1.91 1.35c.98 1 2.09 2.15 4.59 2.15c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C15.61 7.15 14.5 6 12 6m-5 6c-2.67 0-4.33 1.33-5 4c1-1.33 2.17-1.83 3.5-1.5c.76.19 1.3.74 1.91 1.35C8.39 16.85 9.5 18 12 18c2.67 0 4.33-1.33 5-4c-1 1.33-2.17 1.83-3.5 1.5c-.76-.19-1.3-.74-1.91-1.35C10.61 13.15 9.5 12 7 12"/></symbol><use href="#ai:mdi:tailwind"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Tailwind CSS</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Frontend</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="0.97em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de PostgreSQL" data-icon="logos:postgresql"><symbol id="ai:logos:postgresql" viewBox="0 0 256 264"><path d="M255.008 158.086c-1.535-4.649-5.556-7.887-10.756-8.664c-2.452-.366-5.26-.21-8.583.475c-5.792 1.195-10.089 1.65-13.225 1.738c11.837-19.985 21.462-42.775 27.003-64.228c8.96-34.689 4.172-50.492-1.423-57.64C233.217 10.847 211.614.683 185.552.372c-13.903-.17-26.108 2.575-32.475 4.549c-5.928-1.046-12.302-1.63-18.99-1.738c-12.537-.2-23.614 2.533-33.079 8.15c-5.24-1.772-13.65-4.27-23.362-5.864c-22.842-3.75-41.252-.828-54.718 8.685C6.622 25.672-.937 45.684.461 73.634c.444 8.874 5.408 35.874 13.224 61.48c4.492 14.718 9.282 26.94 14.237 36.33c7.027 13.315 14.546 21.156 22.987 23.972c4.731 1.576 13.327 2.68 22.368-4.85c1.146 1.388 2.675 2.767 4.704 4.048c2.577 1.625 5.728 2.953 8.875 3.74c11.341 2.835 21.964 2.126 31.027-1.848c.056 1.612.099 3.152.135 4.482c.06 2.157.12 4.272.199 6.25c.537 13.374 1.447 23.773 4.143 31.049c.148.4.347 1.01.557 1.657c1.345 4.118 3.594 11.012 9.316 16.411c5.925 5.593 13.092 7.308 19.656 7.308c3.292 0 6.433-.432 9.188-1.022c9.82-2.105 20.973-5.311 29.041-16.799c7.628-10.86 11.336-27.217 12.007-52.99q.13-1.094.244-2.088l.16-1.362l1.797.158l.463.031c10.002.456 22.232-1.665 29.743-5.154c5.935-2.754 24.954-12.795 20.476-26.351"/><path fill="#336791" d="M237.906 160.722c-29.74 6.135-31.785-3.934-31.785-3.934c31.4-46.593 44.527-105.736 33.2-120.211c-30.904-39.485-84.399-20.811-85.292-20.327l-.287.052c-5.876-1.22-12.451-1.946-19.842-2.067c-13.456-.22-23.664 3.528-31.41 9.402c0 0-95.43-39.314-90.991 49.444c.944 18.882 27.064 142.873 58.218 105.422c11.387-13.695 22.39-25.274 22.39-25.274c5.464 3.63 12.006 5.482 18.864 4.817l.533-.452c-.166 1.7-.09 3.363.213 5.332c-8.026 8.967-5.667 10.541-21.711 13.844c-16.235 3.346-6.698 9.302-.471 10.86c7.549 1.887 25.013 4.561 36.813-11.958l-.47 1.885c3.144 2.519 5.352 16.383 4.982 28.952c-.37 12.568-.617 21.197 1.86 27.937c2.479 6.74 4.948 21.905 26.04 17.386c17.623-3.777 26.756-13.564 28.027-29.89c.901-11.606 2.942-9.89 3.07-20.267l1.637-4.912c1.887-15.733.3-20.809 11.157-18.448l2.64.232c7.99.363 18.45-1.286 24.589-4.139c13.218-6.134 21.058-16.377 8.024-13.686z"/><path fill="#FFF" d="M108.076 81.525c-2.68-.373-5.107-.028-6.335.902c-.69.523-.904 1.129-.962 1.546c-.
452154 1.105.62 2.327 1.096 2.957c1.346 1.784 3.312 3.01 5.258 3.28q.423.059.842.058c3.245 0 6.196-2.527 6.456-4.392c.325-2.336-3.066-3.893-6.355-4.35m88.784.073c-.256-1.831-3.514-2.353-6.606-1.923c-3.088.43-6.082 1.824-5.832 3.659c.2 1.427 2.777 3.863 5.827 3.863q.387 0 .78-.054c2.036-.282 3.53-1.575 4.24-2.32c1.08-1.136 1.706-2.402 1.591-3.225"/><path fill="#FFF" d="M247.802 160.025c-1.134-3.429-4.784-4.532-10.848-3.28c-18.005 3.716-24.453 1.142-26.57-.417c13.995-21.32 25.508-47.092 31.719-71.137c2.942-11.39 4.567-21.968 4.7-30.59c.147-9.463-1.465-16.417-4.789-20.665c-13.402-17.125-33.072-26.311-56.882-26.563c-16.369-.184-30.199 4.005-32.88 5.183c-5.646-1.404-11.801-2.266-18.502-2.376c-12.288-.199-22.91 2.743-31.704 8.74c-3.82-1.422-13.692-4.811-25.765-6.756c-20.872-3.36-37.458-.814-49.294 7.571c-14.123 10.006-20.643 27.892-19.38 53.16c.425 8.501 5.269 34.653 12.913 59.698c10.062 32.964 21 51.625 32.508 55.464c1.347.449 2.9.763 4.613.763c4.198 0 9.345-1.892 14.7-8.33a530 530 0 0 1 20.261-22.926c4.524 2.428 9.494 3.784 14.577 3.92q.016.2.035.398a118 118 0 0 0-2.57 3.175c-3.522 4.471-4.255 5.402-15.592 7.736c-3.225.666-11.79 2.431-11.916 8.435c-.136 6.56 10.125 9.315 11.294 9.607c4.074 1.02 7.999 1.523 11.742 1.523c9.103 0 17.114-2.992 23.516-8.781c-.197 23.386.778 46.43 3.586 53.451c2.3 5.748 7.918 19.795 25.664 19.794c2.604 0 5.47-.303 8.623-.979c18.521-3.97 26.564-12.156 29.675-30.203c1.665-9.645 4.522-32.676 5.866-45.03c2.836.885 6.487 1.29 10.434 1.289c8.232 0 17.731-1.749 23.688-4.514c6.692-3.108 18.768-10.734 16.578-17.36m-44.106-83.48c-.061 3.647-.563 6.958-1.095 10.414c-.573 3.717-1.165 7.56-1.314 12.225c-.147 4.54.42 9.26.968 13.825c1.108 9.22 2.245 18.712-2.156 28.078a37 37 0 0 1-1.95-4.009c-.547-1.326-1.735-3.456-3.38-6.404c-6.399-11.476-21.384-38.35-13.713-49.316c2.285-3.264 8.084-6.62 22.64-4.813m-17.644-61.787c21.334.471 38.21 8.452 50.158 23.72c9.164 11.711-.927 64.998-30.14 110.969a171 171 0 0 0-.886-1.117l-.37-.462c7.549-12.467 6.073-24.802 4.759-35.738c-.54-4.488-1.05-8.727-.92-12.709c.134-4.22.692-7.84 1.232-11.34c.663-4.313 1.338-8.776 1.152-14.037c.139-.552.195-1.204.122-1.978c-.475-5.045-6.235-20.144-17.975-33.81c-6.422-7.475-15.787-15.84-28.574-21.482c5.5-1.14 13.021-2.203 21.442-2.016M66.674 175.778c-5.9 7.094-9.974 5.734-11.314 5.288c-8.73-2.912-18.86-21.364-27.791-50.624c-7.728-25.318-12.244-50.777-12.602-57.916c-1.128-22.578 4.345-38.313 16.268-46.769c19.404-13.76 51.306-5.524 64.125-1.347c-.184.182-.376.352-.558.537c-21.036 21.244-20.537 57.54-20.485 59.759c-.002.856.07 2.068.168 3.735c.362 6.105 1.036 17.467-.764 30.334c-1.672 11.957 2.014 23.66 10.111 32.109a36 36 0 0 0 2.617 2.468c-3.604 3.86-11.437 12.396-19.775 22.426m22.479-29.993c-6.526-6.81-9.49-16.282-8.133-25.99c1.9-13.592 1.199-25.43.822-31.79c-.053-.89-.1-1.67-.127-2.285c3.073-2.725 17.314-10.355 27.47-8.028c4.634 1.061 7.458 4.217 8.632 9.645c6.076 28.103.804 39.816-3.432 49.229c-.873 1.939-1.698 3.772-2.402 5.668l-.546 1.466c-1.382 3.706-2.668 7.152-3.465 10.424c-6.938-.02-13.687-2.984-18.819-8.34m1.065 37.9c-2.026-.506-3.848-1.385-4.917-2.114c.893-.42 2.482-.992 5.238-1.56c13.337-2.745 15.397-4.683 19.895-10.394c1.031-1.31 2.2-2.794 3.819-4.602l.002-.002c2.411-2.7 3.514-2.242 5.514-1.412c1.621.67 3.2 2.702 3.84 4.938c.303 1.056.643 3.06-.47 4.62c-9.396 13.156-23.088 12.987-32.921 10.526m69.799 64.952c-16.316 3.496-22.093-4.829-25.9-14.346c-2.457-6.144-3.665-33.85-2.808-64.447c.011-.407-.047-.8-.159-1.17a15.4 15.4 0 0 0-.456-2.162c-1.274-4.452-4.379-8.176-8.104-9.72c-1.48-.613-4.196-1.738-7.46-.903c.696-2.868 1.903-6.107 3.212-9.614l.549-1.475c.618-1.663 1.394-3.386 2.214-5.21c4.433-9.848 10.504-23.337 3.915-53.81c-2.468-11.414-10.71-16.988-23.204-15.693c-7.49.775-14.343 3.797-17.761 5.53c-.735.372-1.407.732-2.035 1.082c.954-11.5 4.558-32.992 18.04-46.59c8.489-8.56 19.794-12.788 33.568-12.56c27.14.444 44.544 14.372 54.366 25.979c8.464 10.001 13.047 20.076 14.876 25.51c-13.755-1.399-23.11 1.316-27.852 8.096c-10.317 14.748 5.644 43.372 13.315 57.129c1.407 2.521 2.621 4.7 3.003 5.626c2.498 6.054 5.732 10.096 8.093 13.046c.724.904 1.426 1.781 1.96 2.547c-4.166 1.201-11.649 3.976-10.967 17.847c-.55 6.96-4.461 39.546-6.448 51.059c-2.623 15.21-8.22 20.875-23.957 24.25m68.104-77.936c-4.26 1.977-11.389 3.46-18.161 3.779c-7.48.35-11.288-.838-12.184-1.569c-.42-8.644 2.797-9.547 6.202-10.503c.535-.15 1.057-.297 1.561-.473q.469.383 1.032.756c6.012 3.968 16.735 4.396 31.874 1.271l.166-.033c-2.042 1.909-5.536 4.471-10.49 6.772"/></symbol><use href="#ai:logos:postgresql"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">PostgreSQL</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">
452Backend</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de SQL" data-icon="vscode-icons:file-type-sql"><symbol id="ai:vscode-icons:file-type-sql" viewBox="0 0 32 32"><path fill="#ffda44" d="M8.562 15.256A21.2 21.2 0 0 0 16 16.449a21.2 21.2 0 0 0 7.438-1.194c1.864-.727 2.525-1.535 2.525-2V9.7a10.4 10.4 0 0 1-2.084 1.076A22.3 22.3 0 0 1 16 12.078a22.4 22.4 0 0 1-7.879-1.3A10.3 10.3 0 0 1 6.037 9.7v3.55c0 .474.663 1.278 2.525 2.006m0 6.705a15.6 15.6 0 0 0 2.6.741a25 25 0 0 0 4.838.453a25 25 0 0 0 4.838-.452a15.6 15.6 0 0 0 2.6-.741c1.864-.727 2.525-1.535 2.525-2v-3.39a10.7 10.7 0 0 1-1.692.825A23.5 23.5 0 0 1 16 18.74a23.5 23.5 0 0 1-8.271-1.348a11 11 0 0 1-1.692-.825v3.393c0 .466.663 1.271 2.525 2.001M16 30c5.5 0 9.963-1.744 9.963-3.894v-2.837a10.5 10.5 0 0 1-1.535.762l-.157.063A23.5 23.5 0 0 1 16 25.445a23.4 23.4 0 0 1-8.271-1.351l-.157-.063a10.5 10.5 0 0 1-1.535-.762v2.837C6.037 28.256 10.5 30 16 30"/><ellipse cx="16" cy="5.894" fill="#ffda44" rx="9.963" ry="3.894"/></symbol><use href="#ai:vscode-icons:file-type-sql"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">SQL</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Backend</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="0.73em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Firebase" data-icon="logos:firebase"><symbol id="ai:logos:firebase" viewBox="0 0 256 351"><defs><filter id="logosFirebase0" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="17.5"/><feOffset in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/></filter><filter id="logosFirebase1" width="200%" height="200%" x="-50%" y="-50%" filterUnits="objectBoundingBox"><feGaussianBlur in="SourceAlpha" result="shadowBlurInner1" stdDeviation="3.5"/><feOffset dx="1" dy="-9" in="shadowBlurInner1" result="shadowOffsetInner1"/><feComposite in="shadowOffsetInner1" in2="SourceAlpha" k2="-1" k3="1" operator="arithmetic" result="shadowInnerInner1"/><feColorMatrix in="shadowInnerInner1" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.09 0"/></filter><path id="logosFirebase2" d="m1.253 280.732l1.605-3.131l99.353-188.518l-44.15-83.475C54.392-1.283 45.074.474 43.87 8.188z"/><path id="logosFirebase3" d="m134.417 148.974l32.039-32.812l-32.039-61.007c-3.042-5.791-10.433-6.398-13.443-.59l-17.705 34.109l-.53 1.744z"/></defs><path fill="#FFC24A" d="m0 282.998l2.123-2.972L102.527 89.512l.212-2.017L58.48 4.358C54.77-2.606 44.33-.845 43.114 6.951z"/><use fill="#FFA712" fill-rule="evenodd" href="#logosFirebase2"/><use filter="url(#logosFirebase0)" href="#logosFirebase2"/><path fill="#F4BD62" d="m135.005 150.38l32.955-33.75l-32.965-62.93c-3.129-5.957-11.866-5.975-14.962 0L102.42 87.287v2.86z"/><use fill="#FFA50E" fill-rule="evenodd" href="#logosFirebase3"/>
452<use filter="url(#logosFirebase1)" href="#logosFirebase3"/><path fill="#F6820C" d="m0 282.998l.962-.968l3.496-1.42l128.477-128l1.628-4.431l-32.05-61.074z"/><path fill="#FDE068" d="m139.121 347.551l116.275-64.847l-33.204-204.495c-1.039-6.398-8.888-8.927-13.468-4.34L0 282.998l115.608 64.548a24.13 24.13 0 0 0 23.513.005"/><path fill="#FCCA3F" d="M254.354 282.16L221.402 79.218c-1.03-6.35-7.558-8.977-12.103-4.424L1.29 282.6l114.339 63.908a23.94 23.94 0 0 0 23.334.006z"/><path fill="#EEAB37" d="M139.12 345.64a24.13 24.13 0 0 1-23.512-.005L.931 282.015l-.93.983l115.607 64.548a24.13 24.13 0 0 0 23.513.005l116.275-64.847l-.285-1.752z"/></symbol><use href="#ai:logos:firebase"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Firebase</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Backend</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Rust" data-icon="simple-icons:rust"><symbol id="ai:simple-icons:rust" viewBox="0 0 24 24"><path fill="currentColor" d="m23.835 11.703l-1.008-.623l-.028-.294l.866-.807a.348.348 0 0 0-.116-.578l-1.106-.414a9 9 0 0 0-.087-.285l.69-.96a.346.346 0 0 0-.226-.544l-1.166-.19a9 9 0 0 0-.14-.261l.49-1.076a.34.34 0 0 0-.028-.336a.35.35 0 0 0-.3-.154l-1.185.041a7 7 0 0 0-.188-.227l.273-1.153a.347.347 0 0 0-.417-.417l-1.153.273l-.228-.188l.041-1.184a.344.344 0 0 0-.49-.328l-1.076.49l-.262-.14l-.19-1.167a.348.348 0 0 0-.545-.226l-.96.69a9 9 0 0 0-.285-.086L14.597.453a.348.348 0 0 0-.578-.116l-.807.867a9 9 0 0 0-.294-.028L12.295.168a.346.346 0 0 0-.59 0l-.623 1.008l-.294.028L9.98.337a.346.346 0 0 0-.578.116l-.414 1.106l-.285.086l-.959-.69a.348.348 0 0 0-.545.226l-.19 1.167a9 9 0 0 0-.262.14l-1.076-.49a.346.346 0 0 0-.49.328l.041 1.184a8 8 0 0 0-.228.187l-1.153-.272a.347.347 0 0 0-.417.417l.271 1.153l-.186.227l-1.184-.042a.346.346 0 0 0-.328.49l.49 1.077a9 9 0 0 0-.14.262l-1.166.19a.348.348 0 0 0-.226.544l.69.958l-.087.286l-1.106.414a.348.348 0 0 0-.116.578l.866.807a9 9 0 0 0-.028.294l-1.008.623a.344.344 0 0 0 0 .59l1.008.623q.012.147.028.294l-.866.807a.346.346 0 0 0 .116.578l1.106.415q.042.144.087.285l-.69.959a.345.345 0 0 0 .227.544l1.166.19q.069.132.14.262l-.49 1.076a.346.346 0 0 0 .328.49l1.183-.041q.093.115.187.227l-.27 1.154a.346.346 0 0 0 .416.417l1.153-.272q.113.096.228.187l-.041 1.184a.344.344 0 0 0 .49.327l1.076-.49q.13.073.262.14l.19 1.167a.348.348 0 0 0 .545.227l.959-.69a9 9 0 0 0 .285.086l.414 1.107a.345.345 0 0 0 .578.115l.808-.865l.294.03l.623 1.006a.347.347 0 0 0 .59 0l.623-1.007q.148-.013.294-.03l.807.866a.348.348 0 0 0 .578-.115l.414-1.107a9 9 0 0 0 .285-.087l.959.69a.345.345 0 0 0 .545-.226l.19-1.166l.262-.14l1.076.49a.347.347 0 0 0 .49-.328l-.041-1.184a7 7 0 0 0 .227-.187l1.153.272a.347.347 0 0 0 .417-.416l-.272-1.155q.095-.112.187-.227l1.184.041a.344.344 0 0 0 .328-.49l-.49-1.076q.072-.13.141-.262l1.166-.19a.348.348 0 0 0 .226-.544l-.69-.959l.087-.285l1.106-.414a.346.346 0 0 0 .116-.579l-.866-.807q.016-.147.028-.294l1.008-.624a.344.344 0 0 0 0-.589zm-6.742 8.355a.714.714 0 0 1 .299-1.396a.714.714 0 1 1-.3 1.396zm-.342-2.314a.65.65 0 0 0-.771.5l-.358 1.669a8.7 8.7 0 0 1-3.619.78a8.7 8.7 0 0 1-3.695-.815L7.95 18.21a.65.65 0 0 0-.772-.5l-1.473.317a9 9 0 0 1-.761-.898h7.167c.081 0 .136-.014.136-.088v-2.536c0-.074-.054-.088-.136-.088h-2.096v-1.608h2.268c.206 0 1.106.059 1.393 1.209c.09.353.288 1.504.424 1.873c.134.413.683 1.238 1.268 1.238h3.572a1 1 0 0 0 .13-.013a9 9 0 0 1-.813.952zm-9.914 2.28a.714.714 0 1 1-.3-1.396a.714.714 0 0 1 .3 1.396M4.117 8.997a.714.714 0 1 1-1.303.58a.714.714 0 0 1 1.304-.58m-.834 1.981l1.534-.682a.65.65 0 0 0 .33-.858l-.316-.715h1.244v5.602H3.567a8.8 8.8 0 0 1-.284-3.348zm6.734-.543V8.784h2.96c.153 
4520 1.08.177 1.08.87c0 .574-.712.78-1.296.78zm10.757 1.486q0 .329-.024.651h-.9c-.09 0-.127.059-.127.148v.413c0 .973-.548 1.184-1.03 1.238c-.457.052-.964-.191-1.027-.472c-.27-1.518-.72-1.843-1.43-2.403c.882-.56 1.799-1.386 1.799-2.492c0-1.193-.82-1.945-1.377-2.315c-.783-.516-1.65-.62-1.883-.62H5.468a8.77 8.77 0 0 1 4.907-2.77l1.098 1.152a.65.65 0 0 0 .918.02l1.227-1.173a8.78 8.78 0 0 1 6.004 4.276l-.84 1.898a.65.65 0 0 0 .33.859l1.618.718q.042.43.042.872zm-9.3-9.6a.713.713 0 1 1 .984 1.032a.714.714 0 0 1-.984-1.031m8.339 6.71a.71.71 0 0 1 .939-.362a.714.714 0 1 1-.94.364z"/></symbol><use href="#ai:simple-icons:rust"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Rust</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Backend</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Git" data-icon="mdi:git"><symbol id="ai:mdi:git" viewBox="0 0 24 24"><path fill="currentColor" d="M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82"/></symbol><use href="#ai:mdi:git"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Git</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Herramienta</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de GitHub" data-icon="mdi:github"><use href="#ai:mdi:github"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">GitHub</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Herramienta</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de VS Code" data-icon="vscode-icons:file-type-vscode"><symbol id="ai:vscode-icons:file-type-vscode" viewBox="0 0 32 32">
452<path fill="#0065a9" d="m29.01 5.03l-5.766-2.776a1.74 1.74 0 0 0-1.989.338L2.38 19.8a1.166 1.166 0 0 0-.08 1.647q.037.04.077.077l1.541 1.4a1.165 1.165 0 0 0 1.489.066L28.142 5.75A1.158 1.158 0 0 1 30 6.672v-.067a1.75 1.75 0 0 0-.99-1.575"/><path fill="#007acc" d="m29.01 26.97l-5.766 2.777a1.745 1.745 0 0 1-1.989-.338L2.38 12.2a1.166 1.166 0 0 1-.08-1.647q.037-.04.077-.077l1.541-1.4A1.165 1.165 0 0 1 5.41 9.01l22.732 17.24A1.158 1.158 0 0 0 30 25.328v.072a1.75 1.75 0 0 1-.99 1.57"/><path fill="#1f9cf0" d="M23.244 29.747a1.745 1.745 0 0 1-1.989-.338A1.025 1.025 0 0 0 23 28.684V3.316a1.024 1.024 0 0 0-1.749-.724a1.74 1.74 0 0 1 1.989-.339l5.765 2.772A1.75 1.75 0 0 1 30 6.6v18.8a1.75 1.75 0 0 1-.991 1.576Z"/></symbol><use href="#ai:vscode-icons:file-type-vscode"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">VS Code</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Herramienta</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de NPM/PNPM" data-icon="mdi:npm"><symbol id="ai:mdi:npm" viewBox="0 0 24 24"><path fill="currentColor" d="M4 10v4h2v-3h1v3h1v-4zm5 0v5h2v-1h2v-4zm3 1v2h-1v-2zm2-1v4h2v-3h1v3h1v-3h1v3h1v-4zM3 9h18v6h-9v1H8v-1H3z"/></symbol><use href="#ai:mdi:npm"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">NPM/PNPM</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Herramienta</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Bun" data-icon="simple-icons:bun"><symbol id="ai:simple-icons:bun" viewBox="0 0 24 24"><path fill="currentColor" d="M12 22.596c6.628 0 12-4.338 12-9.688c0-3.318-2.057-6.248-5.219-7.986c-1.286-.715-2.297-1.357-3.139-1.89C14.058 2.025 13.08 1.404 12 1.404c-1.097 0-2.334.785-3.966 1.821a50 50 0 0 1-2.816 1.697C2.057 6.66 0 9.59 0 12.908c0 5.35 5.372 9.687 12 9.687zM10.599 4.715c.334-.759.503-1.58.498-2.409c0-.145.202-.187.23-.029c.658 2.783-.902 4.162-2.057 4.624c-.124.048-.199-.121-.103-.209a5.8 5.8 0 0 0 1.432-1.977m2.058-.102a5.8 5.8 0 0 0-.782-2.306v-.016c-.069-.123.086-.263.185-.172c1.962 2.111 1.307 4.067.556 5.051c-.082.103-.23-.003-.189-.126a5.85 5.85 0 0 0 .23-2.431m1.776-.561a5.7 5.7 0 0 0-1.612-1.806v-.014c-.112-.085-.024-.274.114-.218c2.595 1.087 2.774 3.18 2.459 4.407a.12.12 0 0 1-.049.071a.11.11 0 0 1-.153-.026a.12.12 0 0 1-.022-.083a5.9 5.9 0 0 0-.737-2.331m-5.087.561c-.617.546-1.282.76-2.063 1c-.117 0-.195-.078-.156-.181c1.752-.909 2.376-1.649 2.999-2.778c0 0 .155-.118.188.085c0 .304-.349 1.329-.968 1.874m4.945 11.237a2.96 2.96 0 0 1-.937 1.553c-.346.346-.8.565-1.286.62a2.18 2.18 0 0 1-1.327-.62a2.96 2.96 0 0 1-.925-1.553a.24.24 0 0 1 .064-.198a.23.23 0 0 1 .193-.069h3.965a.23.23 0 0 1 .19.07c.05.053.073.125.063.197m-5.458-2.176a1.86 1.86 0 0 1-2.384-.245a1.98 1.98 0 0 1-.233-2.447c.207-.319.503-.566.848-.713a1.84 1.84 0 0 1 1.092-.11c.366.075.703.261.967.531a1.98 1.98 0 0 1 .408 2.114a1.93 1.93 0 0 1-.698.869zm8.495.005a1.86 1.86 0 0 1-2.381-.253a1.96 1.96 0 0 1-.547-1.366c0-.384.11-.76.32-1.079c.207-.319.503-.567.849-.713a1.84 1.84 0 0 1 1.093-.108c.367.076.704.262.968.534a1.98 1.98 0 0 1 .4 2.117a1.93 1.93 0 0 1-.702.868"/></symbol><use href="#ai:simple-icons:bun"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Bun</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Herramienta</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Vercel" data-icon="mdi:cloud">
452<symbol id="ai:mdi:cloud" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 20q-2.28 0-3.89-1.57Q1 16.85 1 14.58q0-1.95 1.17-3.48q1.18-1.53 3.08-1.95q.63-2.3 2.5-3.72Q9.63 4 12 4q2.93 0 4.96 2.04Q19 8.07 19 11q1.73.2 2.86 1.5q1.14 1.28 1.14 3q0 1.88-1.31 3.19T18.5 20Z"/></symbol><use href="#ai:mdi:cloud"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Vercel</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Plataforma</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Cloudflare" data-icon="simple-icons:cloudflare"><symbol id="ai:simple-icons:cloudflare" viewBox="0 0 24 24"><path fill="currentColor" d="M16.509 16.845c.147-.507.09-.971-.155-1.316c-.225-.316-.605-.499-1.062-.52l-8.66-.113a.16.16 0 0 1-.133-.07a.2.2 0 0 1-.02-.156a.24.24 0 0 1 .203-.156l8.736-.113c1.035-.049 2.16-.886 2.554-1.913l.499-1.302a.27.27 0 0 0 .014-.168a5.689 5.689 0 0 0-10.937-.584a2.58 2.58 0 0 0-1.794-.498a2.56 2.56 0 0 0-2.223 3.18A3.634 3.634 0 0 0 0 16.751q.002.264.035.527a.174.174 0 0 0 .17.148h15.98a.22.22 0 0 0 .204-.155zm2.757-5.564c-.077 0-.161 0-.239.011c-.056 0-.105.042-.127.098l-.337 1.174c-.148.507-.092.971.154 1.317c.225.316.605.498 1.062.52l1.844.113c.056 0 .105.026.133.07a.2.2 0 0 1 .021.156a.24.24 0 0 1-.204.156l-1.92.112c-1.042.049-2.159.887-2.553 1.914l-.141.358c-.028.072.021.142.099.142h6.597a.174.174 0 0 0 .17-.126a5 5 0 0 0 .175-1.28a4.74 4.74 0 0 0-4.734-4.727"/></symbol><use href="#ai:simple-icons:cloudflare"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Cloudflare</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Plataforma</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Electron" data-icon="mdi:computer"><symbol id="ai:mdi:computer" viewBox="0 0 24 24"><path fill="currentColor" d="M4 6h16v10H4m16 2a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4c-1.11 0-2 .89-2 2v10a2 2 0 0 0 2 2H0v2h24v-2z"/></symbol><use href="#ai:mdi:computer"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Electron</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Herramienta</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de WordPress" data-icon="mdi:wordpress">
452<symbol id="ai:mdi:wordpress" viewBox="0 0 24 24"><path fill="currentColor" d="M3.42 12c0-1.24.27-2.42.74-3.5l4.1 11.22A8.56 8.56 0 0 1 3.42 12m14.37-.43c0 .73-.29 1.58-.65 2.77l-.86 2.86l-3.1-9.2l.98-.1c.47-.06.41-.74-.05-.71c0 0-1.39.11-2.29.11l-2.26-.11c-.46-.03-.51.68-.06.71l.91.1l1.34 3.64l-1.88 5.63L6.74 8l.99-.1c.46-.06.4-.74-.06-.71c0 0-1.39.11-2.29.11l-.55-.01C6.37 4.96 9 3.42 12 3.42c2.23 0 4.27.86 5.79 2.25h-.11c-.84 0-1.44.73-1.44 1.52c0 .71.41 1.31.84 2.01c.33.57.71 1.3.71 2.37m-5.64 1.18l2.64 7.22l.06.12c-.89.32-1.85.49-2.85.49c-.84 0-1.65-.12-2.42-.35zm7.38-4.87A8.55 8.55 0 0 1 20.58 12c0 3.16-1.72 5.93-4.27 7.41l2.62-7.57c.49-1.22.66-2.2.66-3.07zM12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10A10 10 0 0 1 2 12A10 10 0 0 1 12 2m0 19.54c5.26 0 9.54-4.28 9.54-9.54S17.26 2.46 12 2.46S2.46 6.74 2.46 12s4.28 9.54 9.54 9.54"/></symbol><use href="#ai:mdi:wordpress"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">WordPress</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Plataforma</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Shopify" data-icon="mdi:shopify"><symbol id="ai:mdi:shopify" viewBox="0 0 24 24"><path d="M18.61 5.89c-.01-.1-.11-.16-.17-.16c-.07-.01-1.61-.12-1.61-.12s-1.07-1.06-1.18-1.18c-.12-.12-.35-.08-.44-.06c-.01 0-.21.07-.6.18c-.36-1.05-.99-1.97-2.18-1.97c-.32-.4-.71-.58-1.05-.58c-2.58 0-3.81 3.22-4.2 4.86l-1.81.56c-.55.18-.57.2-.64.72c-.06.4-1.52 11.72-1.52 11.72L14.61 22l6.18-1.34S18.62 6 18.61 5.89M14 4.76c-.31.09-.63.19-1 .3v-.21c0-.64-.07-1.15-.21-1.56c.56.07.94.71 1.21 1.47m-1.92-1.34c.16.4.26.97.26 1.74v.11c-.63.19-1.31.41-1.99.62c.38-1.49 1.1-2.2 1.73-2.47m-.77-.73c.11 0 .22.04.33.11c-.83.39-1.71 1.37-2.09 3.32c-.55.18-1.08.34-1.55.5c.42-1.5 1.46-3.93 3.31-3.93m1.19 6.46l-.74 2.27s-.67-.36-1.49-.36c-1.2 0-1.27.75-1.27.94c0 1.04 2.71 1.43 2.71 3.86c0 1.91-1.21 3.14-2.84 3.14c-1.96 0-2.96-1.22-2.96-1.22l.52-1.73s1.03.88 1.9.88c.57 0 .8-.43.8-.77c0-1.35-2.21-1.41-2.21-3.63c0-1.87 1.34-3.68 4.05-3.68c1.03 0 1.53.3 1.53.3m2.93-3.86l1.32 1.31l.96.08c.34 2.32 1.48 10.05 1.95 13.2l-5 1.09l.77-15.68z" fill="currentColor"/></symbol><use href="#ai:mdi:shopify"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Shopify</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Plataforma</span></div><div class="relative flex flex-col items-center justify-center p-4 border border-zinc-200 dark:border-zinc-800 rounded-xl bg-white dark:bg-zinc-900 shadow-sm hover:shadow-lg transition-all duration-300 group cursor-default" role="listitem"><svg width="1em" height="1em" class="h-9 w-9 mb-2 transition-all duration-300 text-zinc-700 dark:text-zinc-300 grayscale group-hover:grayscale-0 group-hover:text-yellow-500 dark:group-hover:text-yellow-300 group-hover:scale-110" aria-label="Icono de Trello" data-icon="mdi:trello"><symbol id="ai:mdi:trello" viewBox="0 0 24 24"><path fill="currentColor" d="M19.5 2h-15A2.5 2.5 0 0 0 2 4.5v15A2.5 2.5 0 0 0 4.5 22h15a2.5 2.5 0 0 0 2.5-2.5v-15A2.5 2.5 0 0 0 19.5 2m-8.8 15.2a1.2 1.2 0 0 1-1.2 1.2H5.8c-.66 0-1.2-.54-1.2-1.2V5.8a1.2 1.2 0 0 1 1.2-1.2h3.7c.66 0 1.2.54 1.2 1.2zm8.7-5c0 .66-.54 1.2-1.2 1.2h-3.7c-.66 0-1.2-.54-1.2-1.2V5.8c0-.66.54-1.2 1.2-1.2h3.7c.66 0 1.2.54 1.2 1.2z"/></symbol><use href="#ai:mdi:trello"></use></svg><h3 class="text-sm font-semibold text-center text-zinc-700 dark:text-zinc-300 group-hover:text-black dark:group-hover:text-white transition-colors duration-300 text-nowrap">Trello</h3><span class="absolute -top-8 left-1/2 -translate-x-1/2 bg-zinc-800 text-white text-xs px-2 py-1 rounded-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none whitespace-nowrap">Herramienta</span></div></div></div></section><!-- Sección de medios (siempre visible) --><section id="medios" class="space-y-3 sm:space-y-4 border-b border-gray-200 dark:border-gray-800 pb-6 sm:pb-8 mb-4"><h2 class="text-center text-2xl sm:text-3xl font-bold py-3 sm:py-4">En los medios</h2><div class="px-2 sm:px-0"><div class="grid gap-6 md:grid-cols-2 lg:grid-cols-2" data-astro-cid-rqg5okp4><a href="https://www.msn.com/en-gb/news/insight/steam-horror-game-unanswered-launches-free-with-rave-reviews/gm-GM20F8359E" target="_blank" rel="noopener noreferrer" class="block group transform transition-all duration-300 hover:-translate-y-1" data-astro-cid-rqg5okp4><article class="h-full p-6 bg-white dark:bg-zinc-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-200 border border-zinc-100 dark:border-zinc-700/50" data-astro-cid-rqg5okp4><h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100 group-hover:text-blue-500 transition-colors line-clamp-2" data-astro-cid-rqg5okp4>UNANSWERED, el juego de terror gratis en Steam que arrasa con reseñas muy positivas</h3><div class="flex items-center gap-2 mt-3" data-astro-cid-rqg5okp4><svg width="1em" height="1em" class="h-5 w-5 text-zinc-500 group-hover:text-blue-500 dark:text-zinc-400 dark:group-hover:text-blue-400 transition-colors" aria-hidden="true" data-astro-cid-rqg5okp4="true" data-icon="mdi:newspaper-variant-outline"><symbol id="ai:mdi:newspaper-variant-outline" viewBox="0 0 24 24">
452<path fill="currentColor" d="M20 5v14H4V5zm0-2H4c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2m-2 12H6v2h12zm-8-8H6v6h4zm2 2h6V7h-6zm6 2h-6v2h6z"/></symbol><use href="#ai:mdi:newspaper-variant-outline"></use></svg><p class="text-sm text-zinc-400 group-hover:text-zinc-500 dark:group-hover:text-zinc-300 transition-colors" data-astro-cid-rqg5okp4>MSN</p></div></article></a><a href="https://www.gamingbible.com/news/steam-drops-free-horror-game-with-major-resident-evil-vibes" target="_blank" rel="noopener noreferrer" class="block group transform transition-all duration-300 hover:-translate-y-1" data-astro-cid-rqg5okp4><article class="h-full p-6 bg-white dark:bg-zinc-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-200 border border-zinc-100 dark:border-zinc-700/50" data-astro-cid-rqg5okp4><h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100 group-hover:text-blue-500 transition-colors line-clamp-2" data-astro-cid-rqg5okp4>Steam lanza UNANSWERED, un juego de terror gratuito con grandes vibras a Resident Evil</h3><div class="flex items-center gap-2 mt-3" data-astro-cid-rqg5okp4><svg width="1em" height="1em" class="h-5 w-5 text-zinc-500 group-hover:text-blue-500 dark:text-zinc-400 dark:group-hover:text-blue-400 transition-colors" aria-hidden="true" data-astro-cid-rqg5okp4="true" data-icon="mdi:gamepad-variant-outline"><symbol id="ai:mdi:gamepad-variant-outline" viewBox="0 0 24 24"><path fill="currentColor" d="M6 9h2v2h2v2H8v2H6v-2H4v-2h2zm12.5 0a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5a1.5 1.5 0 0 1-1.5-1.5A1.5 1.5 0 0 1 18.5 9m-3 3a1.5 1.5 0 0 1 1.5 1.5a1.5 1.5 0 0 1-1.5 1.5a1.5 1.5 0 0 1-1.5-1.5a1.5 1.5 0 0 1 1.5-1.5M17 5a7 7 0 0 1 7 7a7 7 0 0 1-7 7c-1.96 0-3.73-.8-5-2.1A6.96 6.96 0 0 1 7 19a7 7 0 0 1-7-7a7 7 0 0 1 7-7zM7 7a5 5 0 0 0-5 5a5 5 0 0 0 5 5c1.64 0 3.09-.79 4-2h2c.91 1.21 2.36 2 4 2a5 5 0 0 0 5-5a5 5 0 0 0-5-5z"/></symbol><use href="#ai:mdi:gamepad-variant-outline"></use></svg><p class="text-sm text-zinc-400 group-hover:text-zinc-500 dark:group-hover:text-zinc-300 transition-colors" data-astro-cid-rqg5okp4>GAMINGbible</p></div></article></a><a href="https://www.beahero.gg/el-rubius-habla-sobre-la-posibilidad-de-cantar-minero-remix-con-ibai-llanos-en-la-velada-4/" target="_blank" rel="noopener noreferrer" class="block group transform transition-all duration-300 hover:-translate-y-1" data-astro-cid-rqg5okp4><article class="h-full p-6 bg-white dark:bg-zinc-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-200 border border-zinc-100 dark:border-zinc-700/50" data-astro-cid-rqg5okp4><h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100 group-hover:text-blue-500 transition-colors line-clamp-2" data-astro-cid-rqg5okp4>El Rubius hablo sobre un posible remix de &quot;Minero&quot; con Ibai Llanos en La Velada, destacando esta IA</h3><div class="flex items-center gap-2 mt-3" data-astro-cid-rqg5okp4><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-5 w-5 text-zinc-500 group-hover:text-blue-500 dark:text-zinc-400 dark:group-hover:text-blue-400 transition-colors" aria-hidden="true" data-astro-cid-rqg5okp4="true" data-icon="mdi:newspaper-variant-outline"><use href="#ai:mdi:newspaper-variant-outline"></use></svg><p class="text-sm text-zinc-400 group-hover:text-zinc-500 dark:group-hover:text-zinc-300 transition-colors" data-astro-cid-rqg5okp4>Hero Network</p></div></article></a><a href="https://as.com/meristation/betech/asi-es-la-ia-que-transcribe-audios-con-la-voz-de-messi-o-ibai-como-illojuan-en-bellum-n/" target="_blank" rel="noopener noreferrer" class="block group transform transition-all duration-300 hover:-translate-y-1" data-astro-cid-rqg5okp4><article class="h-full p-6 bg-white dark:bg-zinc-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-200 border border-zinc-100 dark:border-zinc-700/50" data-astro-cid-rqg5okp4><h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100 group-hover:text-blue-500 transition-colors line-clamp-2" data-astro-cid-rqg5okp4>Pavloh presenta su innovadora IA que transcribe audios con voces de famosos como Messi e Ibai Llanos</h3><div class="flex items-center gap-2 mt-3" data-astro-cid-rqg5okp4><svg width="1em" height="1em" class="h-5 w-5 text-zinc-500 group-hover:text-blue-500 dark:text-zinc-400 dark:group-hover:text-blue-400 transition-colors" aria-hidden="true" data-astro-cid-rqg5okp4="true" data-icon="mdi:post-outline"><symbol id="ai:mdi:post-outline" viewBox="0 0 24 24">
452<path fill="currentColor" d="M19 5v14H5V5zm2-2H3v18h18zm-4 14H7v-1h10zm0-2H7v-1h10zm0-3H7V7h10z"/></symbol><use href="#ai:mdi:post-outline"></use></svg><p class="text-sm text-zinc-400 group-hover:text-zinc-500 dark:group-hover:text-zinc-300 transition-colors" data-astro-cid-rqg5okp4>MeriStation</p></div></article></a><a href="https://www.eluniversal.com.mx/tendencias/llego-demasiado-lejos-influencer-bromea-con-ia-que-es-capaz-de-replicar-la-voz-de-famosos/" target="_blank" rel="noopener noreferrer" class="block group transform transition-all duration-300 hover:-translate-y-1" data-astro-cid-rqg5okp4><article class="h-full p-6 bg-white dark:bg-zinc-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-200 border border-zinc-100 dark:border-zinc-700/50" data-astro-cid-rqg5okp4><h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100 group-hover:text-blue-500 transition-colors line-clamp-2" data-astro-cid-rqg5okp4>La Inteligencia Artificial que permite a influencers imitar voces de famosos como Ibai Llanos y Messi</h3><div class="flex items-center gap-2 mt-3" data-astro-cid-rqg5okp4><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-5 w-5 text-zinc-500 group-hover:text-blue-500 dark:text-zinc-400 dark:group-hover:text-blue-400 transition-colors" aria-hidden="true" data-astro-cid-rqg5okp4="true" data-icon="mdi:newspaper-variant-outline"><use href="#ai:mdi:newspaper-variant-outline"></use></svg><p class="text-sm text-zinc-400 group-hover:text-zinc-500 dark:group-hover:text-zinc-300 transition-colors" data-astro-cid-rqg5okp4>El Universal</p></div></article></a><a href="https://esports.as.com/bonus/influencers/IA-Ibai-Llanos-Rubius-Minero_0_1678932093.html" target="_blank" rel="noopener noreferrer" class="block group transform transition-all duration-300 hover:-translate-y-1" data-astro-cid-rqg5okp4><article class="h-full p-6 bg-white dark:bg-zinc-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-200 border border-zinc-100 dark:border-zinc-700/50" data-astro-cid-rqg5okp4><h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100 group-hover:text-blue-500 transition-colors line-clamp-2" data-astro-cid-rqg5okp4>La IA de Pavloh permite a Ibai Llanos versionar &quot;Soy Minero&quot; de El Rubius</h3><div class="flex items-center gap-2 mt-3" data-astro-cid-rqg5okp4><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-5 w-5 text-zinc-500 group-hover:text-blue-500 dark:text-zinc-400 dark:group-hover:text-blue-400 transition-colors" aria-hidden="true" data-astro-cid-rqg5okp4="true" data-icon="mdi:post-outline"><use href="#ai:mdi:post-outline"></use></svg><p class="text-sm text-zinc-400 group-hover:text-zinc-500 dark:group-hover:text-zinc-300 transition-colors" data-astro-cid-rqg5okp4>Movistar eSports</p></div></article></a><a href="https://www.telediario.mx/tendencias/illojuan-se-hace-pasar-por-ibai-llanos-y-messi-con-ia" target="_blank" rel="noopener noreferrer" class="block group transform transition-all duration-300 hover:-translate-y-1" data-astro-cid-rqg5okp4><article class="h-full p-6 bg-white dark:bg-zinc-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-200 border border-zinc-100 dark:border-zinc-700/50" data-astro-cid-rqg5okp4><h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100 group-hover:text-blue-500 transition-colors line-clamp-2" data-astro-cid-rqg5okp4>IlloJuan utiliza la IA de Pavloh para imitar las voces de Ibai Llanos y Messi</h3><div class="flex items-center gap-2 mt-3" data-astro-cid-rqg5okp4><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-5 w-5 text-zinc-500 group-hover:text-blue-500 dark:text-zinc-400 dark:group-hover:text-blue-400 transition-colors" aria-hidden="true" data-astro-cid-rqg5okp4="true" data-icon="mdi:newspaper-variant-outline"><use href="#ai:mdi:newspaper-variant-outline"></use></svg><p class="text-sm text-zinc-400 group-hover:text-zinc-500 dark:group-hover:text-zinc-300 transition-colors" data-astro-cid-rqg5okp4>TeleDiario</p></div></article></a><a href="https://es-us.vida-estilo.yahoo.com/influencer-pasar-ibai-llanos-messi-002801434.html" target="_blank" rel="noopener noreferrer" class="block group transform transition-all duration-300 hover:-translate-y-1" data-astro-cid-rqg5okp4><article class="h-full p-6 bg-white dark:bg-zinc-800 rounded-xl shadow-md hover:shadow-xl transition-all duration-200 border border-zinc-100 dark:border-zinc-700/50" data-astro-cid-rqg5okp4><h3 class="text-lg font-semibold text-zinc-800 dark:text-zinc-100 group-hover:text-blue-500 transition-colors line-clamp-2" data-astro-cid-rqg5okp4>La tecnología detrás de la imitación de voces de Ibai Llanos y Messi por influencers</h3><div class="flex items-center gap-2 mt-3" data-astro-cid-rqg5okp4><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-5 w-5 text-zinc-500 group-hover:text-blue-500 dark:text-zinc-400 dark:group-hover:text-blue-400 transition-colors" aria-hidden="true" data-astro-cid-rqg5okp4="true" data-icon="mdi:post-outline"><use href="#ai:mdi:post-outline"></use></svg><p class="text-sm text-zinc-400 group-hover:text-zinc-500 dark:group-hover:text-zinc-300 transition-colors" data-astro-cid-rqg5okp4>Yahoo! Noticias</p></div></article></a></div></div></section><!-- Sección de contacto (siempre visible) --><section id="contacto" class="space-y-3 sm:space-y-4 border-b border-gray-200 dark:border-gray-800 pb-6 sm:pb-8 mb-4"><h2 class="text-center text-2xl sm:text-3xl font-bold py-3 sm:py-4">Contacto</h2><div class="px-2 sm:px-0"><div class="grid gap-4 grid-cols-1 md:grid-cols-3 justify-items-center"><!-- Redes en móvil (todas en una fila) --><div class="grid md:hidden grid-cols-2 gap-4 w-full"><a id="GitHub" href="https://github.com/impavloh" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center gap-3 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Visitar GitHub en https://github.com/impavloh"><svg width="1em" height="1em" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="simple-icons:github"><symbol id="ai:simple-icons:github" viewBox="0 0 24 24">
452<path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></symbol><use href="#ai:simple-icons:github"></use></svg><span class="font-medium">GitHub</span></a><a id="LinkedIn" href="https://linkedin.com/in/impavloh" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center gap-3 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Visitar LinkedIn en https://linkedin.com/in/impavloh"><svg width="1em" height="1em" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="simple-icons:linkedin"><symbol id="ai:simple-icons:linkedin" viewBox="0 0 24 24"><path fill="currentColor" d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"/></symbol><use href="#ai:simple-icons:linkedin"></use></svg><span class="font-medium">LinkedIn</span></a></div><!-- Emails en móvil --><div class="grid md:hidden grid-cols-1 gap-4 w-full"><button type="button" class="email-copy-btn flex items-center justify-center gap-3 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Copiar correo [email protected]" data-email="[email protected]" data-copied-message="¡Correo copiado!" data-copy-error="Error copiando el correo:"><svg width="1em" height="1em" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="simple-icons:gmail"><symbol id="ai:simple-icons:gmail" viewBox="0 0 24 24"><path fill="currentColor" d="M24 5.457v13.909c0 .904-.732 1.636-1.636 1.636h-3.819V11.73L12 16.64l-6.545-4.91v9.273H1.636A1.636 1.636 0 0 1 0 19.366V5.457c0-2.023 2.309-3.178 3.927-1.964L5.455 4.64L12 9.548l6.545-4.91l1.528-1.145C21.69 2.28 24 3.434 24 5.457"/></symbol><use href="#ai:simple-icons:gmail"></use></svg><span class="email-display font-medium">[email protected]</span></button><button type="button" class="email-copy-btn flex items-center justify-center gap-3 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Copiar correo [email protected]" data-email="[email protected]" data-copied-message="¡Correo copiado!" data-copy-error="Error copiando el correo:"><svg width="1em" height="1em" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="mdi:email"><symbol id="ai:mdi:email" viewBox="0 0 24 24"><path fill="currentColor" d="m20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2"/></symbol><use href="#ai:mdi:email"></use></svg><span class="email-display font-medium">[email protected]</span></button></div><!-- Twitter y CV en móvil --><div class="grid md:hidden grid-cols-2 gap-4 w-full"><a href="https://x.com/impavloh" target="_blank" rel="noopener noreferrer" class="flex items-center justify-center gap-3 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Visitar Twitter en https://x.com/impavloh"><svg width="1em" height="1em" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="simple-icons:x"><symbol id="ai:simple-icons:x" viewBox="0 0 24 24">
452<path fill="currentColor" d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584l-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/></symbol><use href="#ai:simple-icons:x"></use></svg><span class="font-medium">Twitter</span></a><a href="/cv-pablo-casado-rodriguez.pdf" download class="flex items-center justify-center gap-3 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Descargar currículum vitae"><svg width="1em" height="1em" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="mdi:file-download"><symbol id="ai:mdi:file-download" viewBox="0 0 24 24"><path fill="currentColor" d="M14 2H6c-1.11 0-2 .89-2 2v16c0 1.11.89 2 2 2h12c1.11 0 2-.89 2-2V8zm-2 17l-4-4h2.5v-3h3v3H16zm1-10V3.5L18.5 9z"/></symbol><use href="#ai:mdi:file-download"></use></svg><span class="font-medium">Descargar CV</span></a></div><!-- ===== DESKTOP LAYOUT (3 columnas) ===== --><!-- Columna izquierda: GitHub y LinkedIn --><div class="hidden md:grid md:grid-cols-1 gap-4 md:w-full"><a id="GitHub-desktop" href="https://github.com/impavloh" target="_blank" rel="noopener noreferrer" class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Visitar GitHub en https://github.com/impavloh"><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="simple-icons:github"><use href="#ai:simple-icons:github"></use></svg><span class="font-medium">GitHub</span></a><a id="LinkedIn-desktop" href="https://linkedin.com/in/impavloh" target="_blank" rel="noopener noreferrer" class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Visitar LinkedIn en https://linkedin.com/in/impavloh"><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="simple-icons:linkedin"><use href="#ai:simple-icons:linkedin"></use></svg><span class="font-medium">LinkedIn</span></a></div><!-- Columna central: Emails (uno encima de otro) --><div class="hidden md:grid gap-4 w-full"><button type="button" class="email-copy-btn flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Copiar correo [email protected]" data-email="[email protected]" data-copied-message="¡Correo copiado!" data-copy-error="Error copiando el correo:"><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="simple-icons:gmail"><use href="#ai:simple-icons:gmail"></use></svg><span class="email-display font-medium">[email protected]</span></button><button type="button" class="email-copy-btn flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Copiar correo [email protected]" data-email="[email protected]" data-copied-message="¡Correo copiado!" data-copy-error="Error copiando el correo:"><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="mdi:email"><use href="#ai:mdi:email"></use></svg><span class="email-display font-medium">[email protected]</span></button></div><!-- Columna derecha: Twitter y Descargar CV --><div class="hidden md:grid md:grid-cols-1 gap-4 md:w-full max-w-xs"><a href="https://x.com/impavloh" target="_blank" rel="noopener noreferrer" class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Visitar Twitter en https://x.com/impavloh"><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="simple-icons:x"><use href="#ai:simple-icons:x"></use></svg><span class="font-medium">Twitter</span></a><a href="/cv-pablo-casado-rodriguez.pdf" download class="flex items-center gap-4 p-4 bg-zinc-50 dark:bg-zinc-800 rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-700 transition-colors group" aria-label="Descargar currículum vitae"><svg width="1em" height="1em" viewBox="0 0 24 24" class="h-6 w-6 text-zinc-500 group-hover:text-blue-500 transition-colors" aria-hidden="true" data-icon="mdi:file-download"><use href="#ai:mdi:file-download"></use></svg><span class="font-medium">Descargar CV</span></a></div></div><!-- Nota adicional --><p class="text-sm text-zinc-500 dark:text-zinc-400 mt-6 text-center max-w-2xl mx-auto">Por razones de privacidad, no comparto mi número. Si lo necesitas, contáctame en privado.</p>
452<script>
453  document.querySelectorAll('.email-copy-btn').forEach((btn) => {
454    const emailDisplay = btn.querySelector('.email-display')
455    if (!btn || !emailDisplay) return
456
457    const originalEmail = btn.getAttribute('data-email') || ''
458    const copiedMessage =
459      btn.getAttribute('data-copied-message') || '¡Correo copiado!'
460    const copyErrorMessage =
461      btn.getAttribute('data-copy-error') || 'Error copiando el correo:'
462
463    btn.addEventListener('click', () => {
464      navigator.clipboard
465        .writeText(originalEmail)
466        .then(() => {
467          emailDisplay.textContent = copiedMessage
468          setTimeout(() => {
469            emailDisplay.textContent = originalEmail
470          }, 2000)
471        })
472        .catch((err) => {
473          console.error(copyErrorMessage, err)
474        })
475    })
476  })
477</script>
477</div></section><!-- Sección terminal --><section class="terminal-cli w-full bg-black/15 dark:bg-white/5 rounded-lg p-5 my-6 text-center shadow-sm hover:shadow-md transition-all duration-300"><div class="flex flex-col sm:flex-row items-center justify-center gap-3 font-mono"><div class="flex items-center gap-2"><svg width="22" height="22" class="text-blue-500" data-icon="mdi:console"><symbol id="ai:mdi:console" viewBox="0 0 24 24"><path fill="currentColor" d="M20 19V7H4v12zm0-16a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm-7 14v-2h5v2zm-3.42-4L5.57 9H8.4l3.3 3.3c.39.39.39 1.03 0 1.42L8.42 17H5.59z"/></symbol><use href="#ai:mdi:console"></use></svg><span class="text-sm sm:text-base">Versión CLI de mi portfolio:</span></div><div class="relative group w-full sm:w-auto"><code class="bg-black/25 dark:bg-white/10 px-4 py-2 rounded-md select-all text-sm sm:text-base flex items-center justify-between gap-2"><span class="terminal-command">curl https://sh.pavloh.com</span><button class="copy-btn text-blue-500 hover:text-blue-400 transition-colors" aria-label="Copiar al portapapeles" title="Copiar al portapapeles"><svg width="18" height="18" data-icon="mdi:content-copy"><symbol id="ai:mdi:content-copy" viewBox="0 0 24 24"><path fill="currentColor" d="M19 21H8V7h11m0-2H8a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2m-3-4H4a2 2 0 0 0-2 2v14h2V3h12z"/></symbol><use href="#ai:mdi:content-copy"></use></svg></button></code><span class="copy-message absolute -top-8 left-1/2 -translate-x-1/2 bg-blue-500 text-white px-2 py-1 rounded text-xs opacity-0 transition-opacity duration-300">¡Copiado!</span></div></div></section>
477<script type="module">document.querySelectorAll(`.terminal-cli`).forEach(e=>{let t=e.querySelector(`.copy-btn`),n=e.querySelector(`.copy-message`),r=e.querySelector(`.terminal-command`)?.textContent;!t||!n||!r||t.addEventListener(`click`,async()=>{try{await navigator.clipboard.writeText(r.trim()),n.classList.add(`opacity-100`),setTimeout(()=>n.classList.remove(`opacity-100`),2e3)}catch(e){console.error(`Error copying:`,e)}})});</script>
477</div></main><button id="scroll-to-top" class="fixed bottom-24 md:bottom-8 right-8 md:right-8 p-2 md:p-3 bg-zinc-800/30 dark:bg-zinc-100/30 md:bg-zinc-800/70 md:dark:bg-zinc-100/70 backdrop-blur-sm rounded-full shadow-lg hover:bg-zinc-900 dark:hover:bg-zinc-200 transition-all duration-300 opacity-0 invisible" aria-label="Volver al principio"><svg width="1em" height="1em" class="w-6 h-6 text-white dark:text-zinc-900" data-icon="mdi:chevron-up"><symbol id="ai:mdi:chevron-up" viewBox="0 0 24 24"><path fill="currentColor" d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6l-6 6z"/></symbol><use href="#ai:mdi:chevron-up"></use></svg></button>
477<script>
478  const scrollToTopButton = document.getElementById('scroll-to-top')
479
480  if (scrollToTopButton) {
481    const mobileQuery = window.matchMedia('(max-width: 768px)')
482    let scrollTicking = false
483
484    const updateVisibility = () => {
485      const scrollThreshold = mobileQuery.matches ? 600 : 300
486      scrollToTopButton.classList.toggle(
487        'visible',
488        window.scrollY > scrollThreshold,
489      )
490    }
491
492    window.addEventListener(
493      'scroll',
494      () => {
495        if (!scrollTicking) {
496          scrollTicking = true
497          window.requestAnimationFrame(() => {
498            updateVisibility()
499            scrollTicking = false
500          })
501        }
502      },
503      { passive: true },
504    )
505
506    scrollToTopButton.addEventListener('click', () => {
507      window.scrollTo({
508        top: 0,
509        behavior: 'smooth',
510      })
511    })
512  }
513</script>
513</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.