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 "Minero" 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 "Soy Minero" 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.