itziarZG
eba8a36efa
- Add project-4 (Posidonia) and project-5 (Cases Tancades) cards and modals in all 3 locales (ES/CA/EN) - Reorder Block A: Operativo projects first, Posidonia at top - Align Posidonia modal style to match Eivissa Watch / Cases Tancades (bg-background-light, max-w-2xl, rounded-3xl, glass) - Add external "Visitar sitio" link button to Eivissa Watch modal - Refresh Eivissa Watch thumbnail (was just a green block, now real content) - Generate Cases Tancades thumbnail from OG image - Update Cases Tancades card tech stack from Next.js to Astro (matches actual site) - Add "Ver detalles" button to Cases Tancades card fix: persist modal layout stability CSS to source.css (was dropped on every build:css)
1672 lines
101 KiB
HTML
1672 lines
101 KiB
HTML
<!doctype html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Itziar ZG | Desarrollo web accesible y sostenible</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
|
<meta
|
|
name="description"
|
|
content="Itziar ZG desarrolla webs front-end ligeras, accesibles y sostenibles para proyectos con impacto social desde Ibiza."
|
|
/>
|
|
<meta name="robots" content="index, follow, max-image-preview:large" />
|
|
<link rel="canonical" href="https://www.itziarzameza.dev/index.html" />
|
|
<meta name="theme-color" content="#f7f6f8" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:locale" content="es_ES" />
|
|
<meta property="og:title" content="Itziar ZG | Desarrollo web accesible y sostenible" />
|
|
<meta property="og:description" content="Desarrollo front-end ligero, accesible y soberano para proyectos con impacto social." />
|
|
<meta property="og:url" content="https://www.itziarzameza.dev/index.html" />
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:title" content="Itziar ZG | Desarrollo web accesible y sostenible" />
|
|
<meta name="twitter:description" content="Desarrollo front-end ligero, accesible y soberano para proyectos con impacto social." />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
"name": "Itziar Zameza García",
|
|
"url": "https://www.itziarzameza.dev/",
|
|
"jobTitle": "Desarrolladora front-end",
|
|
"description": "Desarrolladora front-end especializada en tecnología ligera, accesible y soberana.",
|
|
"email": "mailto:itziar.zameza.dev@gmail.com",
|
|
"sameAs": [
|
|
"https://www.linkedin.com/in/itziarzamezagarcia"
|
|
]
|
|
}
|
|
</script>
|
|
<link
|
|
rel="alternate"
|
|
hreflang="x-default"
|
|
href="https://www.itziarzameza.dev/index.html"
|
|
/>
|
|
<link rel="preload" href="css/styles.css" as="style" />
|
|
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
|
|
<link rel="preload" href="fonts/space/space-grotesk-v22-latin-700.woff2" as="font" type="font/woff2" crossorigin />
|
|
<link rel="preload" href="fonts/instrument/instrument-serif-v5-latin-italic.woff2" as="font" type="font/woff2" crossorigin />
|
|
<link rel="preload" href="fonts/instrument/instrument-serif-v5-latin-regular.woff2" as="font" type="font/woff2" crossorigin />
|
|
<link rel="stylesheet" href="css/styles.css" />
|
|
<script>
|
|
window.addEventListener("load", function () {
|
|
var load = function () {
|
|
var s = document.createElement("script");
|
|
s.defer = true;
|
|
s.src = "https://stats.itziarzameza.dev/script.js";
|
|
s.setAttribute("data-website-id", "8d8d648f-4a0c-4315-b287-5983ffedc8c4");
|
|
s.setAttribute("data-domains", "www.itziarzameza.dev");
|
|
document.body.appendChild(s);
|
|
};
|
|
if ("requestIdleCallback" in window) {
|
|
requestIdleCallback(load, { timeout: 2000 });
|
|
} else {
|
|
setTimeout(load, 1500);
|
|
}
|
|
});
|
|
</script>
|
|
</head>
|
|
<body
|
|
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300"
|
|
>
|
|
<a class="skip-link" href="#main-content">Saltar al contenido principal</a>
|
|
<div class="relative min-h-screen overflow-hidden iridescent-bg">
|
|
<!-- Floating Fluid Shapes -->
|
|
<div
|
|
aria-hidden="true" class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
|
|
></div>
|
|
<div
|
|
aria-hidden="true" class="absolute top-1/2 -right-24 w-80 h-80 bg-pink-300/10 fluid-shape blur-3xl opacity-40"
|
|
></div>
|
|
<div class="layout-container flex h-full grow flex-col relative z-10">
|
|
<!-- Navigation -->
|
|
<header
|
|
class="mx-auto w-full max-w-6xl px-6 py-6 flex items-center justify-between"
|
|
>
|
|
<div class="flex items-center gap-2 group cursor-pointer">
|
|
<div
|
|
class="size-10 bg-primary rounded-full flex items-center justify-center text-white shadow-lg shadow-primary/20"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M760 600 710 710 600 760 710 810 760 920 810 810 920 760 810 710ZM760 40 710 150 600 200 710 250 760 360 810 250 920 200 810 150ZM360 160 260 380 40 480 260 580 360 800 460 580 680 480 460 380ZM360 354 400 440 486 480 400 520 360 606 320 520 234 480 320 440ZM360 480Z"/></svg>
|
|
</div>
|
|
<h2
|
|
class="text-xl font-bold tracking-tight font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
Itziar ZG
|
|
</h2>
|
|
</div>
|
|
<nav
|
|
aria-label="Navegación principal"
|
|
class="hidden md:flex items-center gap-10 glass px-8 py-3 rounded-full"
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#main-content"
|
|
>Inicio</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#manifiesto"
|
|
>Manifiesto</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#laboratorio"
|
|
>Laboratorio</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="huella.html"
|
|
>Huella</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#contact"
|
|
>Contacto</a
|
|
>
|
|
</nav>
|
|
<div class="flex items-center gap-3">
|
|
<!-- Language Switcher -->
|
|
<div
|
|
class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold"
|
|
>
|
|
<span class="text-primary">ES</span>
|
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
|
<a
|
|
href="index-ca.html"
|
|
class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors"
|
|
title="Català"
|
|
>CA</a
|
|
>
|
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
|
<a
|
|
href="index-en.html"
|
|
class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors"
|
|
title="English"
|
|
>EN</a
|
|
>
|
|
</div>
|
|
<button
|
|
class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors"
|
|
id="theme-toggle"
|
|
onclick="toggleTheme()"
|
|
aria-label="Toggle theme"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl dark:hidden" aria-hidden="true"><path d="M480 120Q330 120 225.0 225.0Q120 330 120 480Q120 630 225.0 735.0Q330 840 480 840Q494 840 507.5 839.0Q521 838 534 836Q493 807 468.5 760.5Q444 714 444 660Q444 570 507.0 507.0Q570 444 660 444Q715 444 761.0 468.5Q807 493 836 534Q838 521 839.0 507.5Q840 494 840 480Q840 330 735.0 225.0Q630 120 480 120ZM480 200Q568 200 638.0 248.5Q708 297 740 375Q720 370 700.0 367.0Q680 364 660 364Q537 364 450.5 450.5Q364 537 364 660Q364 680 367.0 700.0Q370 720 375 740Q297 708 248.5 638.0Q200 568 200 480Q200 364 282.0 282.0Q364 200 480 200ZM470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Q470 470 470.0 470.0Q470 470 470 470Z"/></svg>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xl hidden dark:block text-yellow-200" aria-hidden="true"><path d="M480.0 360.0Q530 360 565.0 395.0Q600 430 600.0 480.0Q600 530 565.0 565.0Q530 600 480.0 600.0Q430 600 395.0 565.0Q360 530 360.0 480.0Q360 430 395.0 395.0Q430 360 480.0 360.0ZM480.0 280.0Q397 280 338.5 338.5Q280 397 280.0 480.0Q280 563 338.5 621.5Q397 680 480.0 680.0Q563 680 621.5 621.5Q680 563 680.0 480.0Q680 397 621.5 338.5Q563 280 480.0 280.0ZM200 440H40V520H200ZM920 440H760V520H920ZM440 760V920H520V760ZM440 40V200H520V40ZM256 650 155 747 212 806 308 706ZM748 154 651 255 704 310 805 213ZM650 704 747 805 806 748 706 652ZM154 212 255 309 310 256 213 155ZM480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Q480 480 480.0 480.0Z"/></svg>
|
|
</button>
|
|
<button
|
|
class="bg-primary hover:bg-primary/90 text-white px-6 py-2.5 rounded-full text-sm font-bold transition-all shadow-md shadow-primary/25"
|
|
onclick="scrollToContact()"
|
|
>
|
|
Hablemos
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Hero Section -->
|
|
<main
|
|
id="main-content"
|
|
class="mx-auto max-w-6xl px-6 pt-16 pb-24 md:pt-24 flex flex-col items-center text-center"
|
|
>
|
|
<div
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-widest mb-8"
|
|
>
|
|
<span class="relative flex h-2 w-2">
|
|
<span
|
|
class="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"
|
|
></span>
|
|
<span
|
|
class="relative inline-flex rounded-full h-2 w-2 bg-primary"
|
|
></span>
|
|
</span>
|
|
Disponible para nuevos proyectos
|
|
</div>
|
|
<h1
|
|
class="text-4xl md:text-6xl font-serif italic leading-[1.2] text-slate-900 dark:text-white mb-6 max-w-4xl font-light"
|
|
>
|
|
Cuando necesites utilizar la tecnología para generar impacto social
|
|
de forma responsable, habla
|
|
<span
|
|
class="text-primary not-italic font-display font-black tracking-tighter"
|
|
>conmigo</span
|
|
>.
|
|
</h1>
|
|
<p
|
|
class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-12 leading-relaxed"
|
|
>
|
|
Desarrolladora front-end especializada en tecnología ligera,
|
|
accesible y soberana. Con base en Ibiza.
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<a
|
|
class="bg-primary text-white px-8 py-4 rounded-xl font-bold text-lg hover:translate-y-[-2px] transition-transform shadow-xl shadow-primary/30 flex items-center justify-center"
|
|
href="#manifiesto"
|
|
>
|
|
Ver Manifiesto
|
|
</a>
|
|
<a
|
|
class="glass px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/60 dark:hover:bg-white/10 transition-colors text-slate-800 dark:text-slate-200 flex items-center justify-center"
|
|
href="#laboratorio"
|
|
>
|
|
Explorar Laboratorio
|
|
</a>
|
|
</div>
|
|
<!-- Abstract Decorative Hero Image -->
|
|
<div
|
|
class="mt-20 w-full max-w-5xl aspect-[21/9] rounded-3xl overflow-hidden glass border-4 border-white/50 dark:border-white/20 relative"
|
|
>
|
|
<img
|
|
src="images/hero-gradient.webp"
|
|
alt=""
|
|
width="1200"
|
|
height="514"
|
|
decoding="async"
|
|
fetchpriority="high"
|
|
class="absolute inset-0 w-full h-full object-cover"
|
|
/>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent pointer-events-none"
|
|
></div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Manifiesto Section -->
|
|
<section class="py-24 bg-white/30 dark:bg-white/5" id="manifiesto">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2
|
|
class="text-4xl md:text-5xl font-serif italic mb-6 text-slate-900 dark:text-white"
|
|
>
|
|
Manifiesto
|
|
</h2>
|
|
<div class="h-1 w-20 bg-primary mx-auto mb-10 rounded-full"></div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 mb-16">
|
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M480.0 80.0Q397 80 324.0 111.5Q251 143 197.0 197.0Q143 251 111.5 324.0Q80 397 80.0 480.0Q80 563 111.5 636.0Q143 709 197.0 763.0Q251 817 324.0 848.5Q397 880 480.0 880.0Q563 880 636.0 848.5Q709 817 763.0 763.0Q817 709 848.5 636.0Q880 563 880.0 480.0Q880 397 848.5 324.0Q817 251 763.0 197.0Q709 143 636.0 111.5Q563 80 480.0 80.0ZM480.0 160.0Q614 160 707.0 253.0Q800 346 800.0 480.0Q800 614 707.0 707.0Q614 800 480.0 800.0Q346 800 253.0 707.0Q160 614 160.0 480.0Q160 346 253.0 253.0Q346 160 480.0 160.0ZM480.0 240.0Q380 240 310.0 310.0Q240 380 240.0 480.0Q240 580 310.0 650.0Q380 720 480.0 720.0Q580 720 650.0 650.0Q720 580 720.0 480.0Q720 380 650.0 310.0Q580 240 480.0 240.0ZM480.0 320.0Q546 320 593.0 367.0Q640 414 640.0 480.0Q640 546 593.0 593.0Q546 640 480.0 640.0Q414 640 367.0 593.0Q320 546 320.0 480.0Q320 414 367.0 367.0Q414 320 480.0 320.0ZM480.0 400.0Q447 400 423.5 423.5Q400 447 400.0 480.0Q400 513 423.5 536.5Q447 560 480.0 560.0Q513 560 536.5 536.5Q560 513 560.0 480.0Q560 447 536.5 423.5Q513 400 480.0 400.0Z"/></svg>
|
|
<h3
|
|
class="text-2xl font-serif italic font-bold dark:text-white"
|
|
>
|
|
Propósito
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Democratizar y humanizar la tecnología, poniéndola al servicio
|
|
de las personas y del planeta, y no al revés. Busco crear
|
|
herramientas que empoderen a las comunidades en lugar de
|
|
concentrar el poder.
|
|
</p>
|
|
</div>
|
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M300 300 580 380 660 660 380 580ZM480 420Q455 420 437.5 437.5Q420 455 420.0 480.0Q420 505 437.5 522.5Q455 540 480.0 540.0Q505 540 522.5 522.5Q540 505 540.0 480.0Q540 455 522.5 437.5Q505 420 480 420ZM480 80Q397 80 324.0 111.5Q251 143 197.0 197.0Q143 251 111.5 324.0Q80 397 80 480Q80 563 111.5 636.0Q143 709 197.0 763.0Q251 817 324.0 848.5Q397 880 480 880Q563 880 636.0 848.5Q709 817 763.0 763.0Q817 709 848.5 636.0Q880 563 880 480Q880 397 848.5 324.0Q817 251 763.0 197.0Q709 143 636.0 111.5Q563 80 480 80ZM480 160Q613 160 706.5 253.5Q800 347 800 480Q800 613 706.5 706.5Q613 800 480 800Q347 800 253.5 706.5Q160 613 160 480Q160 347 253.5 253.5Q347 160 480 160ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z"/></svg>
|
|
<h3
|
|
class="text-2xl font-serif italic font-bold dark:text-white"
|
|
>
|
|
Misión
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Desarrollar soluciones digitales eficientes, accesibles y
|
|
respetuosas con los derechos digitales, demostrando que otra
|
|
tecnología es posible desde el compromiso local y el impacto
|
|
global.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mb-10">
|
|
<h3
|
|
class="text-2xl font-serif italic text-slate-800 dark:text-slate-200"
|
|
>
|
|
Principios rectores
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<!-- Principio 1: Sostenibilidad -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full justify-between"
|
|
>
|
|
<div>
|
|
<div
|
|
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M216 176Q171 221 145.5 280.0Q120 339 120 402Q120 465 144.0 526.5Q168 588 222 642Q257 677 308.5 702.0Q360 727 430.5 741.5Q501 756 591.5 759.0Q682 762 794 752Q802 646 799.0 557.0Q796 468 782.5 396.5Q769 325 744.5 271.5Q720 218 684 182Q631 129 571.5 104.5Q512 80 450 80Q385 80 323.0 105.5Q261 131 216 176ZM328 192Q357 175 387.5 167.5Q418 160 450 160Q496 160 541.0 178.5Q586 197 627 238Q645 256 663.5 288.5Q682 321 695.5 373.5Q709 426 716.0 500.5Q723 575 718 678Q669 680 607.5 679.5Q546 679 485.0 670.0Q424 661 369.0 641.0Q314 621 279 586Q234 541 217.0 497.0Q200 453 200 412Q200 353 222.5 308.5Q245 264 262 246Q304 326 373.0 399.5Q442 473 534 520Q462 457 408.5 377.5Q355 298 328 192ZM328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192ZM328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Q328 192 328.0 192.0Q328 192 328 192Z"/></svg>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Sostenibilidad (Green Software)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Optimizar el consumo de recursos, minimizando la
|
|
transferencia de datos y la huella de carbono de las
|
|
aplicaciones web que desarrollo.
|
|
</p>
|
|
</div>
|
|
<a
|
|
href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-base" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
|
|
<span>Green Software Practitioner</span>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs ml-auto" aria-hidden="true"><path d="M200 120Q167 120 143.5 143.5Q120 167 120 200V760Q120 793 143.5 816.5Q167 840 200 840H480V760H200Q200 760 200.0 760.0Q200 760 200 760V200Q200 200 200.0 200.0Q200 200 200 200H760Q760 200 760.0 200.0Q760 200 760 200V480H840V200Q840 167 816.5 143.5Q793 120 760 120ZM388 332 332 388 704 760H560V840H840V560H760V704Z"/></svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Principio 2: Software Libre -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M160 160Q127 160 103.5 183.5Q80 207 80 240V720Q80 753 103.5 776.5Q127 800 160 800H400L480 720H800Q833 720 856.5 696.5Q880 673 880 640H447L367 720H160Q160 720 160.0 720.0Q160 720 160 720V240Q160 240 160.0 240.0Q160 240 160 240L256 560H940L837 217Q829 191 807.5 175.5Q786 160 760 160ZM244 240H760L832 480H316ZM244 240 316 480 244 240ZM160 640V720Q160 720 160.0 720.0Q160 720 160 720V640Z"/></svg>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Software Libre
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Apoyar y contribuir al código abierto como bien público
|
|
digital que fomenta la soberanía tecnológica y el aprendizaje
|
|
compartido.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principio 3: Bien Común -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M0 240V303Q0 346 44.0 373.0Q88 400 160 400Q173 400 185.0 399.5Q197 399 208 397Q194 376 187.0 353.0Q180 330 180 305V240ZM240 240V305Q240 337 257.5 363.5Q275 390 307 410Q339 430 383.5 440.0Q428 450 480 450Q533 450 577.5 440.0Q622 430 654 410Q686 390 703.0 363.5Q720 337 720 305V240ZM780 240V305Q780 331 773.5 354.0Q767 377 754 397Q765 399 776.5 399.5Q788 400 800 400Q872 400 916.0 373.5Q960 347 960 303V240ZM325 320H636Q626 340 580.5 355.0Q535 370 480 370Q425 370 379.5 355.0Q334 340 325 320ZM160 440Q127 440 103.5 463.5Q80 487 80 520Q80 554 103.5 577.0Q127 600 160 600Q194 600 217.0 577.0Q240 554 240 520Q240 487 217.0 463.5Q194 440 160 440ZM800 440Q767 440 743.5 463.5Q720 487 720 520Q720 554 743.5 577.0Q767 600 800 600Q834 600 857.0 577.0Q880 554 880 520Q880 487 857.0 463.5Q834 440 800 440ZM480 480Q430 480 395.0 515.0Q360 550 360 600Q360 651 395.0 685.5Q430 720 480 720Q531 720 565.5 685.5Q600 651 600 600Q600 550 565.5 515.0Q531 480 480 480ZM480 560Q497 560 508.5 571.5Q520 583 520 600Q520 617 508.5 628.5Q497 640 480 640Q463 640 451.5 628.5Q440 617 440 600Q440 583 451.5 571.5Q463 560 480 560ZM481 320Q481 320 481.0 320.0Q481 320 481 320Q481 320 481.0 320.0Q481 320 481 320ZM480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Q480 600 480.0 600.0Q480 600 480 600Z"/></svg>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Bien Común
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Priorizar proyectos y herramientas que generen un impacto
|
|
social positivo, medible y orientado a resolver necesidades
|
|
reales de la sociedad.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principio 4: Accesibilidad -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M480.0 720.0Q447 720 423.5 743.5Q400 767 400.0 800.0Q400 833 423.5 856.5Q447 880 480.0 880.0Q513 880 536.5 856.5Q560 833 560.0 800.0Q560 767 536.5 743.5Q513 720 480.0 720.0ZM360 80V600Q300 605 238.0 615.0Q176 625 120 640L140 720Q218 699 306.0 689.5Q394 680 480.0 680.0Q566 680 654.0 689.5Q742 699 820 720L840 640Q784 625 722.0 615.0Q660 605 600 600V80H520V320H440V80Z"/></svg>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Accesibilidad (a11y)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Diseñar interfaces web inclusivas para que todo el mundo pueda
|
|
acceder a la información sin barreras físicas, cognitivas o
|
|
tecnológicas.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principio 5: Privacidad -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M480 80Q341 115 250.5 239.5Q160 364 160 516V760L480 880L800 760V516Q800 364 709.5 239.5Q619 115 480 80ZM480 164Q584 197 652.0 296.0Q720 395 720 516V705L480 795L240 705V516Q240 395 308.0 296.0Q376 197 480 164ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z"/></svg>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Privacidad
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Respetar la soberanía de los datos personales, usando
|
|
analíticas éticas y cookieless, protegiendo a los usuarios del
|
|
rastreo corporativo.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principio 6: IA Responsable -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M240 80V252Q183 304 151.5 373.5Q120 443 120 520Q120 670 225.0 775.0Q330 880 480 880Q605 880 701.5 806.5Q798 733 827 615L879 410Q884 391 872.0 375.5Q860 360 840 360H760V240Q760 207 736.5 183.5Q713 160 680 160H600V80H520V240H680Q680 240 680.0 240.0Q680 240 680 240V440H788L750 595Q727 686 652.0 743.0Q577 800 480 800Q364 800 282.0 719.0Q200 638 200 522Q200 462 224.5 408.0Q249 354 294 312L320 288V80ZM494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440Q494 440 494.0 440.0Q494 440 494 440ZM440 360H520L526 410Q534 413 540.5 417.0Q547 421 552 426L598 406L638 474L598 504Q600 512 600.0 520.0Q600 528 598 536L638 566L598 634L552 614Q547 619 540.5 623.0Q534 627 526 630L520 680H440L434 630Q426 627 419.5 623.0Q413 619 408 614L362 634L322 566L362 536Q360 528 360.0 520.0Q360 512 362 504L322 474L362 406L408 426Q413 421 419.5 417.0Q426 413 434 410ZM480.0 460.0Q455 460 437.5 477.5Q420 495 420.0 520.0Q420 545 437.5 562.5Q455 580 480.0 580.0Q505 580 522.5 562.5Q540 545 540.0 520.0Q540 495 522.5 477.5Q505 460 480.0 460.0Z"/></svg>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
IA Responsable
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Utilizar modelos de IA de forma ética y transparente,
|
|
priorizando la ejecución local y velando porque sirvan de
|
|
apoyo a la agencia humana.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Laboratorio Section -->
|
|
<section class="py-24" id="laboratorio">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div class="mb-12">
|
|
<h2
|
|
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
|
|
>
|
|
Mi laboratorio
|
|
</h2>
|
|
<p class="text-slate-500 dark:text-slate-400">
|
|
Un espacio de experimentación técnica, herramientas reales e
|
|
infraestructura digital soberana.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tab Buttons Container -->
|
|
<div
|
|
role="tablist"
|
|
aria-label="Secciones del laboratorio"
|
|
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
|
|
>
|
|
<button
|
|
role="tab" aria-selected="true" type="button" id="tab-infraestructura-button" aria-controls="tab-infraestructura" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all bg-primary text-white shadow-md shadow-primary/25"
|
|
data-tab="infraestructura"
|
|
>
|
|
Infraestructura
|
|
</button>
|
|
<!--
|
|
<button
|
|
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
|
|
id="tab-experimentos-button" aria-controls="tab-experimentos" data-tab="experimentos"
|
|
>
|
|
Experimentos
|
|
</button>
|
|
-->
|
|
|
|
<button
|
|
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
|
|
id="tab-proyectos-button" aria-controls="tab-proyectos" data-tab="proyectos"
|
|
>
|
|
Proyectos
|
|
</button>
|
|
<button
|
|
role="tab" aria-selected="false" type="button" class="tab-btn px-6 py-3 rounded-xl font-bold text-sm transition-all text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/5"
|
|
id="tab-writing-button" aria-controls="tab-writing" data-tab="writing"
|
|
>
|
|
Notes
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Contents -->
|
|
<div id="tab-contents">
|
|
<!-- Tab 1: Infraestructura -->
|
|
<div id="tab-infraestructura" class="tab-pane block" role="tabpanel" aria-labelledby="tab-infraestructura-button" aria-hidden="false">
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<div class="space-y-6">
|
|
<h3 class="text-2xl font-serif italic dark:text-white">
|
|
Qué uso y por qué
|
|
</h3>
|
|
<p
|
|
class="text-slate-700 dark:text-slate-300 leading-relaxed"
|
|
>
|
|
La soberanía tecnológica empieza en los cimientos. He
|
|
decidido gestionar mi propia infraestructura para asegurar
|
|
el control de mis datos, la privacidad de mis proyectos y
|
|
reducir la dependencia de los gigantes de la nube.
|
|
</p>
|
|
<div
|
|
class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl"
|
|
>
|
|
<div
|
|
class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M422 232 629 480H469L498 707L313 440H452ZM320 80 360 360H160L520 880H600L560 560H800L400 80ZM471 470Z"/></svg>
|
|
<span>Compromiso Verde</span>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
Mi infraestructura está alojada en el centro de datos de
|
|
Hetzner en Helsinki, alimentado por energía 100% libre
|
|
de carbono procedente de fuentes eólicas e hidráulicas.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M300 720Q275 720 257.5 702.5Q240 685 240 660Q240 635 257.5 617.5Q275 600 300 600Q325 600 342.5 617.5Q360 635 360 660Q360 685 342.5 702.5Q325 720 300 720ZM300 320Q275 320 257.5 302.5Q240 285 240 260Q240 235 257.5 217.5Q275 200 300 200Q325 200 342.5 217.5Q360 235 360 260Q360 285 342.5 302.5Q325 320 300 320ZM160 840H800Q817 840 828.5 828.5Q840 817 840 800V520Q840 503 828.5 491.5Q817 480 800 480H160Q143 480 131.5 491.5Q120 503 120 520V800Q120 817 131.5 828.5Q143 840 160 840ZM200 760V560H760V760ZM160 440H800Q817 440 828.5 428.5Q840 417 840 400V120Q840 103 828.5 91.5Q817 80 800 80H160Q143 80 131.5 91.5Q120 103 120 120V400Q120 417 131.5 428.5Q143 440 160 440ZM200 360V160H760V360ZM200 760V560ZM200 360V160Z"/></svg>
|
|
<h4 class="font-bold dark:text-white">
|
|
Hetzner Helsinki
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Servidores dedicados y VPS alimentados por energía verde
|
|
en Finlandia.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M440 183V457L200 596V322Q200 322 200.0 322.0Q200 322 200 322ZM520 183 760 322Q760 322 760.0 322.0Q760 322 760 322V596L520 457ZM480 526 717 663 480 800Q480 800 480.0 800.0Q480 800 480 800L243 663ZM160 252Q141 263 130.5 281.0Q120 299 120 321V639Q120 661 130.5 679.0Q141 697 160 708L440 869Q459 880 480.0 880.0Q501 880 520 869L800 708Q819 697 829.5 679.0Q840 661 840 639V321Q840 299 829.5 281.0Q819 263 800 252L520 91Q501 80 480.0 80.0Q459 80 440 91ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z"/></svg>
|
|
<h4 class="font-bold dark:text-white">Coolify</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Alternativa self-hosted y de código abierto a
|
|
Vercel/Heroku.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M284 440H80V520H284Q298 589 352.5 634.5Q407 680 480.0 680.0Q553 680 607.5 634.5Q662 589 676 520H880V440H676Q662 371 607.5 325.5Q553 280 480.0 280.0Q407 280 352.5 325.5Q298 371 284 440ZM480 360Q530 360 565.0 395.0Q600 430 600 480Q600 530 565.0 565.0Q530 600 480 600Q430 600 395.0 565.0Q360 530 360 480Q360 430 395.0 395.0Q430 360 480 360Z"/></svg>
|
|
<h4 class="font-bold dark:text-white">Forgejo</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Servicio Git ligero autohospedado para control soberano
|
|
de código.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M240 280Q254 280 266.0 277.0Q278 274 289 269L346 340Q318 371 307.0 410.0Q296 449 302 488L221 515Q204 490 178.0 475.0Q152 460 120 460Q70 460 35.0 495.0Q0 530 0 580Q0 630 35.0 665.0Q70 700 120 700Q170 700 205.0 665.0Q240 630 240 580Q240 578 240.0 576.0Q240 574 240 572L321 544Q341 580 374.5 605.0Q408 630 450 637V724Q411 735 385.5 766.5Q360 798 360 840Q360 890 395.0 925.0Q430 960 480.0 960.0Q530 960 565.0 925.0Q600 890 600 840Q600 798 574.0 766.5Q548 735 510 724V637Q552 630 585.5 605.0Q619 580 639 544L720 572Q720 574 720.0 576.0Q720 578 720 580Q720 630 755.0 665.0Q790 700 840 700Q890 700 925.0 665.0Q960 630 960.0 580.0Q960 530 925.0 495.0Q890 460 840 460Q808 460 781.5 475.0Q755 490 739 515L658 488Q664 449 653.0 410.5Q642 372 614 340L671 270Q682 275 694.0 277.5Q706 280 720 280Q770 280 805.0 245.0Q840 210 840.0 160.0Q840 110 805.0 75.0Q770 40 720.0 40.0Q670 40 635.0 75.0Q600 110 600 160Q600 180 606.5 198.5Q613 217 624 232L567 303Q526 280 479.5 280.0Q433 280 392 303L336 232Q347 217 353.5 198.5Q360 180 360 160Q360 110 325.0 75.0Q290 40 240.0 40.0Q190 40 155.0 75.0Q120 110 120.0 160.0Q120 210 155.0 245.0Q190 280 240 280ZM120 540Q137 540 148.5 551.5Q160 563 160.0 580.0Q160 597 148.5 608.5Q137 620 120 620Q103 620 91.5 608.5Q80 597 80.0 580.0Q80 563 91.5 551.5Q103 540 120 540ZM240.0 120.0Q257 120 268.5 131.5Q280 143 280.0 160.0Q280 177 268.5 188.5Q257 200 240.0 200.0Q223 200 211.5 188.5Q200 177 200.0 160.0Q200 143 211.5 131.5Q223 120 240.0 120.0ZM480.0 800.0Q497 800 508.5 811.5Q520 823 520.0 840.0Q520 857 508.5 868.5Q497 880 480.0 880.0Q463 880 451.5 868.5Q440 857 440.0 840.0Q440 823 451.5 811.5Q463 800 480.0 800.0ZM480 360Q522 360 551.0 389.0Q580 418 580 460Q580 502 551.0 531.0Q522 560 480 560Q438 560 409.0 531.0Q380 502 380 460Q380 418 409.0 389.0Q438 360 480 360ZM720.0 120.0Q737 120 748.5 131.5Q760 143 760.0 160.0Q760 177 748.5 188.5Q737 200 720.0 200.0Q703 200 691.5 188.5Q680 177 680.0 160.0Q680 143 691.5 131.5Q703 120 720.0 120.0ZM840.0 540.0Q857 540 868.5 551.5Q880 563 880.0 580.0Q880 597 868.5 608.5Q857 620 840.0 620.0Q823 620 811.5 608.5Q800 597 800.0 580.0Q800 563 811.5 551.5Q823 540 840.0 540.0ZM480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0Q480 840 480.0 840.0ZM120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0Q120 580 120.0 580.0ZM480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460Q480 460 480.0 460.0Q480 460 480 460ZM840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0Q840 580 840.0 580.0ZM240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0Q240 160 240.0 160.0ZM720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Q720 160 720.0 160.0Z"/></svg>
|
|
<h4 class="font-bold dark:text-white">n8n</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Automatización de flujos de trabajo self-hosted libre de
|
|
ataduras de SaaS.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl mb-3 block" aria-hidden="true"><path d="M120 120V200L200 280V120ZM280 120V360L360 440V120ZM440 120V440L520 359V120ZM600 120V359L680 439V120ZM760 120V520L840 600V120ZM120 327V440L400 720L560 560L840 840V727L560 447L400 607Z"/></svg>
|
|
<h4 class="font-bold dark:text-white">Umami</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Analítica web ética, respetuosa con la privacidad y
|
|
cookieless.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
|
|
<!--
|
|
<div id="tab-experimentos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-experimentos-button" aria-hidden="true">
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M480 160Q424 160 374.5 177.5Q325 195 284 227L228 172Q217 161 200.0 161.0Q183 161 172 172Q161 183 161.0 200.0Q161 217 172 228L227 283Q195 324 177.5 374.0Q160 424 160 480Q160 614 253.0 707.0Q346 800 480 800H800V480Q800 346 707.0 253.0Q614 160 480 160ZM480 240Q580 240 650.0 310.0Q720 380 720 480V720H480Q380 720 310.0 650.0Q240 580 240 480Q240 441 252.0 405.5Q264 370 285 341L492 548Q503 559 520.0 559.0Q537 559 548 548Q560 536 560.0 519.5Q560 503 548 491L341 284Q370 263 405.5 251.5Q441 240 480 240ZM480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Q480 480 480.0 480.0Q480 480 480 480Z"/></svg>
|
|
<span
|
|
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
|
|
>Activo</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Medición de Green Software
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Comparación empírica del consumo de CPU y red entre
|
|
arquitecturas SSR (Astro/Next.js) y páginas HTML estáticas
|
|
optimizadas.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M360 360V600H600V360ZM440 440H520V520H440ZM360 120V200H280Q247 200 223.5 223.5Q200 247 200 280V360H120V440H200V520H120V600H200V680Q200 713 223.5 736.5Q247 760 280 760H360V840H440V760H520V840H600V760H680Q713 760 736.5 736.5Q760 713 760 680V600H840V520H760V440H840V360H760V280Q760 247 736.5 223.5Q713 200 680 200H600V120H520V200H440V120ZM680 280Q680 280 680.0 280.0Q680 280 680 280V680Q680 680 680.0 680.0Q680 680 680 680H280Q280 680 280.0 680.0Q280 680 280 680V280Q280 280 280.0 280.0Q280 280 280 280ZM480 480Z"/></svg>
|
|
<span
|
|
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full"
|
|
>Activo</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
IA Local en Raspberry Pi
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Ejecución de modelos pequeños como Llama 3.2 1B y Phi-3
|
|
con Ollama en local para tareas de clasificación y
|
|
etiquetado con cero coste de API y privacidad garantizada.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-3xl" aria-hidden="true"><path d="M480.0 320.0Q555 320 607.5 372.5Q660 425 660.0 500.0Q660 575 607.5 627.5Q555 680 480.0 680.0Q405 680 352.5 627.5Q300 575 300.0 500.0Q300 425 352.5 372.5Q405 320 480.0 320.0ZM480.0 392.0Q435 392 403.5 423.5Q372 455 372.0 500.0Q372 545 403.5 576.5Q435 608 480.0 608.0Q525 608 556.5 576.5Q588 545 588.0 500.0Q588 455 556.5 423.5Q525 392 480.0 392.0ZM40 500Q94 637 214.0 718.5Q334 800 480.0 800.0Q626 800 746.0 718.5Q866 637 920 500Q866 363 746.0 281.5Q626 200 480.0 200.0Q334 200 214.0 281.5Q94 363 40 500ZM480 500Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480 500Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480.0 500.0Q480 500 480 500ZM832 500Q782 601 687.5 660.5Q593 720 480.0 720.0Q367 720 272.5 660.5Q178 601 128 500Q178 399 272.5 339.5Q367 280 480.0 280.0Q593 280 687.5 339.5Q782 399 832 500Z"/></svg>
|
|
<span
|
|
class="px-2.5 py-0.5 bg-amber-500/10 text-amber-500 text-xs font-bold rounded-full"
|
|
>Pendiente</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Estrés de Lectores de Pantalla
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Auditoría manual de interfaces complejas con lectores NVDA
|
|
y VoiceOver para validar flujos interactivos dinámicos y
|
|
estados de ARIA en vivo.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<!-- Tab 3: Proyectos -->
|
|
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
|
|
<!-- Herramientas Reales -->
|
|
<div class="mb-12">
|
|
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
|
|
Herramientas reales, no demos
|
|
</h3>
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<!-- Posidonia · Eivissa Environmental Watch -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M216 176Q171 221 145.5 280.0Q120 339 120 402Q120 465 144.0 526.5Q168 588 222 642Q257 677 308.5 702.0Q360 727 430.5 741.5Q501 756 591.5 759.0Q682 762 794 752Q802 646 799.0 557.0Q796 468 782.5 396.5Q769 325 744.5 271.5Q720 218 684 182Q631 129 571.5 104.5Q512 80 450 80Q385 80 323.0 105.5Q261 131 216 176ZM328 192Q357 175 387.5 167.5Q418 160 450 160Q496 160 541.0 178.5Q586 197 627 238Q645 256 663.5 288.5Q682 321 695.5 373.5Q709 426 716.0 500.5Q723 575 718 678Q669 680 607.5 679.5Q546 679 485.0 670.0Q424 661 369.0 641.0Q314 621 279 586Q234 541 217.0 497.0Q200 453 200 412Q200 353 222.5 308.5Q245 264 262 246Q304 326 373.0 399.5Q442 473 534 520Q462 457 408.5 377.5Q355 298 328 192Z"/></svg>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Posidonia · Eivissa Environmental Watch
|
|
</h4>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4">Micrositio editorial sobre el 8º aniversario del decreto que protege la Posidonia oceánica en el archipiélago pitiuso.</p>
|
|
</div>
|
|
<footer class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
|
<span class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded">Operativo</span>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-400">HTML • Tailwind • Datos abiertos GEN-GOB</span>
|
|
<button onclick="openModal('project-4')" class="text-xs text-primary hover:underline font-bold">Ver detalles</button>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Eivissa Environmental Watch -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M724 222Q632 222 569.5 281.0Q507 340 502 416L444 416Q438 340 376.0 281.0Q314 222 222 222Q152 222 102 264Q79 222 79 174Q79 96 137.5 41.5Q196 -13 274 -13Q343 -13 396.0 31.0Q449 75 466 140Q483 75 536.0 31.0Q589 -13 658 -13Q736 -13 794.5 41.5Q853 96 853 174Q853 222 830 264Q780 222 724 222ZM502 496L502 510Q502 612 437.5 689.0Q373 766 274 780L274 940L354 940L354 780Q255 766 190.5 689.0Q126 612 126 510L126 496Q126 481 137.0 470.0Q148 459 163 459L465 459Q480 459 491.0 470.0Q502 481 502 496ZM502 822Q502 808 513.0 797.0Q524 786 538 786L554 786L554 612L626 612Q682 612 723.0 653.0Q764 694 764 750L764 838L848 838Q863 838 874.0 849.0Q885 860 885 875L885 891Q885 906 874.0 917.0Q863 928 848 928L764 928L764 940L706 940L706 928L538 928L538 786Q538 786 538.0 786.0Q538 786 538 786Q538 822 538.0 822.0Q538 822 538 822L502 822Z"/></svg>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Eivissa Environmental Watch
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Lector automatizado de noticias y del BOIB con
|
|
clasificación local mediante Ollama. Detecta y filtra
|
|
contenido relacionado con medio ambiente en Eivissa.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operativo</span
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-400"
|
|
>Ollama • n8n • Astro</span
|
|
>
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-3')"
|
|
>
|
|
Ver detalles
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div><!-- Cases Tancades -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M80 240V880H280V720H360V880H560V720H640V880H880V240L480 80L80 240ZM200 360Q200 320 220 300Q240 280 280 280Q320 280 340 300Q360 320 360 360Q360 400 340 420Q320 440 280 440Q240 440 220 420Q200 400 200 360ZM600 360Q600 320 620 300Q640 280 680 280Q720 280 740 300Q760 320 760 360Q760 400 740 420Q720 440 680 440Q640 440 620 420Q600 400 600 360Z"/></svg>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Cases Tancades
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Diagnóstico abierto de la vivienda en Balears: cruza
|
|
datos oficiales del INE, Airbnb y registros HUT del
|
|
Govern para mostrar cuántos pisos están vacíos frente
|
|
a la presión del alquiler turístico.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operativo</span
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-400"
|
|
>Astro • Datos abiertos INE</span
|
|
>
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-5')"
|
|
>
|
|
Ver detalles
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Navidrome -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M400 440Q423 440 442.5 434.5Q462 429 480 418V840H720V680H560V280Q560 214 513.0 167.0Q466 120 400.0 120.0Q334 120 287.0 167.0Q240 214 240.0 280.0Q240 346 287.0 393.0Q334 440 400 440Z"/></svg>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Servidor Navidrome
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
|
>Sin iniciar</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Docker • Hetzner</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<!-- Contribución Open Source -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M640 440 474 602Q443 632 421.5 668.5Q400 705 400 748Q400 803 438.5 841.5Q477 880 532 880Q564 880 592.0 866.5Q620 853 640 830Q660 853 688.0 866.5Q716 880 748 880Q803 880 841.5 841.5Q880 803 880 748Q880 705 859.0 668.5Q838 632 807 602ZM640 552 749 659Q768 678 784.0 699.5Q800 721 800 748Q800 770 785.0 785.0Q770 800 748 800Q734 800 721.5 794.5Q709 789 700 778L640 706L580 778Q571 789 558.5 794.5Q546 800 532 800Q510 800 495.0 785.0Q480 770 480 748Q480 721 496.0 699.5Q512 678 531 659ZM280 220 558 144 796 218Q791 227 781.5 233.5Q772 240 760 240H558Q531 240 515.0 242.0Q499 244 482 250L389 281L411 359L492 332Q509 327 532.0 324.0Q555 321 600 320Q600 320 600.0 320.0Q600 320 600 320Q600 331 593.5 341.0Q587 351 578 354L344 440Q344 440 344.0 440.0Q344 440 344 440H280ZM40 80V520H344Q351 520 358.0 518.5Q365 517 371 515L606 428Q639 416 659.5 386.0Q680 356 680 320H760Q810 320 845.0 287.0Q880 254 880 200V160L560 60L280 138V80ZM120 160H200V440H120ZM640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Q640 706 640.0 706.0Q640 706 640 706Z"/></svg>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Contribución Open Source
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
|
>Sin iniciar</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Forgejo • GitHub</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Trabajo Anterior (Proyectos de IA previos) -->
|
|
<div
|
|
class="border-t border-slate-200 dark:border-slate-800 pt-8"
|
|
>
|
|
<details class="group cursor-pointer">
|
|
<summary
|
|
class="flex justify-between items-center text-lg font-serif italic text-slate-700 dark:text-slate-300 select-none list-none"
|
|
>
|
|
<span
|
|
class="flex items-center gap-2 hover:text-primary transition-colors"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon transform group-open:rotate-90 transition-transform text-slate-400" aria-hidden="true"><path d="M504 480 320 664 376 720 616 480 376 240 320 296Z"/></svg>
|
|
Trabajo Anterior (Proyectos e IA comercial)
|
|
</span>
|
|
</summary>
|
|
<div class="grid md:grid-cols-2 gap-8 mt-6">
|
|
<!-- Project 1: AI Knowledge Pipeline -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
AI Knowledge Pipeline
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Sistema de procesamiento inteligente multimedia.
|
|
Recibe audios y PDFs, los transcribe y los
|
|
estructura mediante APIs de IA comerciales para su
|
|
posterior consulta semántica.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-1')"
|
|
>
|
|
Ver detalles y stack
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 2: ChefGPT -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
ChefGPT
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Bot conversacional de Telegram conectado con Google
|
|
Sheets que sugiere recetas basándose en ingredientes
|
|
disponibles en tiempo real.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-2')"
|
|
>
|
|
Ver detalles y stack
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 4: Writing -->
|
|
<div id="tab-writing" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-writing-button" aria-hidden="true">
|
|
<div class="max-w-2xl mx-auto space-y-8">
|
|
<p
|
|
class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
|
|
>
|
|
Reflexiones, aprendizajes técnicos y notas sobre soberanía
|
|
digital sin pretensiones de sentar cátedra.
|
|
</p>
|
|
|
|
<!-- Nota 1: Green Software Practitioner -->
|
|
<article
|
|
class="p-6 glass rounded-2xl border border-white/10 space-y-4"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<span
|
|
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
|
|
>20 de Julio, 2026</span
|
|
>
|
|
<span
|
|
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs" aria-hidden="true"><path d="M344 60 268 188 124 220 138 368 40 480 138 592 124 740 268 772 344 900 480 842 616 900 692 772 836 740 822 592 920 480 822 368 836 220 692 188 616 60 480 118ZM378 162 480 206 584 162 640 258 750 284 740 396 814 480 740 566 750 678 640 702 582 798 480 754 376 798 320 702 210 678 220 566 146 480 220 396 210 282 320 258ZM480 480ZM438 338 664 564 608 622 438 452 352 536 296 480Z"/></svg>
|
|
Green Software
|
|
</span>
|
|
</div>
|
|
|
|
<h4 class="font-bold dark:text-white text-xl text-primary">
|
|
Green Software Practitioner — 5 ideas que me llevo
|
|
</h4>
|
|
|
|
<div
|
|
class="space-y-4 text-sm text-slate-700 dark:text-slate-300 leading-relaxed"
|
|
>
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-1"
|
|
>
|
|
¿Por qué hice esta certificación?
|
|
</h5>
|
|
<p>
|
|
Porque quiero construir tecnología que tenga en cuenta
|
|
su impacto ambiental y social.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
Cinco ideas que me llevo:
|
|
</h5>
|
|
<ol class="list-decimal list-inside space-y-2.5 pl-1">
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>La mejor energía es la que no se consume.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Optimizar no es solo hacer la web más rápida.
|
|
También significa consumir menos recursos.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>La eficiencia empieza en el diseño.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Elegir una arquitectura sencilla suele ser mejor
|
|
que optimizar después.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Medir antes de mejorar.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
No podemos reducir aquello que no medimos.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>El software también tiene huella de
|
|
carbono.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Cada transferencia de datos, proceso o
|
|
almacenamiento tiene un coste.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Green Software no consiste solo en consumir
|
|
menos.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
También implica diseñar productos que ayuden a
|
|
reducir el impacto ambiental de las personas y las
|
|
organizaciones.
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-1"
|
|
>
|
|
¿Y ahora qué?
|
|
</h5>
|
|
<p>
|
|
Estoy leyendo <em>Soberanía Tecnológica</em> porque
|
|
creo que la sostenibilidad no depende solo del consumo
|
|
energético, sino también de quién controla la
|
|
infraestructura y el software que utilizamos.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Frase fija al final de la nota -->
|
|
<div
|
|
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400"
|
|
>
|
|
Estas son notas de aprendizaje, no guías definitivas. Si
|
|
ves algo que se pueda mejorar, me encantará escucharte.
|
|
</div>
|
|
</article>
|
|
|
|
<article class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
|
|
>19 de Julio, 2026</span
|
|
>
|
|
<h4
|
|
class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer"
|
|
>
|
|
La imperfección como aliada: por qué no uso purismos al
|
|
medir el carbono web
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
A veces obsesionarse con la máxima optimización técnica
|
|
bloquea la publicación de herramientas útiles. En este
|
|
post explico mis decisiones de infraestructura y los
|
|
límites pragmáticos que asumo...
|
|
</p>
|
|
<a
|
|
href="huella.html"
|
|
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
|
|
>
|
|
Leer artículo completo en la sección Huella
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-xs" aria-hidden="true"><path d="M560 240 504 298 646 440H160V520H646L504 662L560 720L800 480Z"/></svg>
|
|
</a>
|
|
<div
|
|
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400 mt-4"
|
|
>
|
|
Estas son notas de aprendizaje, no guías definitivas. Si
|
|
ves algo que se pueda mejorar, me encantará escucharte.
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer / Contact -->
|
|
<footer class="mt-24 pb-12" id="contact">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div
|
|
class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
|
|
>
|
|
<div class="absolute top-0 right-0 p-8">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary/20 dark:text-primary/10 text-9xl" aria-hidden="true"><path d="M480 80Q397 80 324.0 111.5Q251 143 197.0 197.0Q143 251 111.5 324.0Q80 397 80.0 480.0Q80 563 111.5 636.0Q143 709 197.0 763.0Q251 817 324.0 848.5Q397 880 480.0 880.0Q563 880 636.0 848.5Q709 817 763.0 763.0Q817 709 848.5 636.0Q880 563 880 480V422Q880 363 839.5 321.5Q799 280 740 280Q705 280 674.0 295.0Q643 310 622 338Q593 309 556.5 294.5Q520 280 480 280Q397 280 338.5 338.5Q280 397 280 480Q280 563 338.5 621.5Q397 680 480.0 680.0Q563 680 621.5 621.5Q680 563 680 480V422Q680 396 697.0 378.0Q714 360 740 360Q766 360 783.0 378.0Q800 396 800 422V480Q800 614 707.0 707.0Q614 800 480.0 800.0Q346 800 253.0 707.0Q160 614 160.0 480.0Q160 346 253.0 253.0Q346 160 480 160H680V80ZM600 480Q600 530 565.0 565.0Q530 600 480.0 600.0Q430 600 395.0 565.0Q360 530 360 480Q360 430 395.0 395.0Q430 360 480.0 360.0Q530 360 565.0 395.0Q600 430 600 480Z"/></svg>
|
|
</div>
|
|
<h2
|
|
class="text-5xl md:text-7xl font-serif italic mb-8 relative z-10 text-slate-900 dark:text-white"
|
|
>
|
|
¿Hablamos?
|
|
</h2>
|
|
<p
|
|
class="text-xl text-slate-600 dark:text-slate-400 mb-12 max-w-xl mx-auto relative z-10"
|
|
>
|
|
Si buscas tecnología ligera, accesible y con los pies en la
|
|
tierra — o simplemente quieres hablar de soberanía digital —
|
|
escríbeme.
|
|
</p>
|
|
<div
|
|
class="flex flex-col md:flex-row justify-center gap-6 relative z-10"
|
|
>
|
|
<a
|
|
class="bg-slate-900 dark:bg-slate-800 text-white px-10 py-5 rounded-2xl font-bold flex items-center justify-center gap-3 hover:bg-slate-800 dark:hover:bg-slate-700 transition-colors shadow-2xl"
|
|
href="mailto:itziar.zameza.dev@gmail.com"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon" aria-hidden="true"><path d="M160 160Q127 160 103.5 183.5Q80 207 80 240V720Q80 753 103.5 776.5Q127 800 160 800H800Q833 800 856.5 776.5Q880 753 880 720V240Q880 207 856.5 183.5Q833 160 800 160ZM480 440 160 640V240Q160 240 160.0 240.0Q160 240 160 240H800Q800 240 800.0 240.0Q800 240 800 240V640ZM480 520 800 720H160ZM160 640V720V640V240Q160 240 160.0 240.0Q160 240 160 240Q160 240 160.0 240.0Q160 240 160 240Z"/></svg>
|
|
Enviar un Email
|
|
</a>
|
|
<div class="flex gap-4 justify-center">
|
|
<a
|
|
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
|
href="https://www.linkedin.com/in/itziarzamezagarcia"
|
|
aria-label="LinkedIn" title="LinkedIn"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M440 280H280Q197 280 138.5 338.5Q80 397 80.0 480.0Q80 563 138.5 621.5Q197 680 280 680H440V600H280Q230 600 195.0 565.0Q160 530 160.0 480.0Q160 430 195.0 395.0Q230 360 280 360H440ZM320 440V520H640V440ZM520 280V360H680Q730 360 765.0 395.0Q800 430 800.0 480.0Q800 530 765.0 565.0Q730 600 680 600H520V680H680Q763 680 821.5 621.5Q880 563 880.0 480.0Q880 397 821.5 338.5Q763 280 680 280Z"/></svg>
|
|
</a>
|
|
<!-- <a
|
|
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
|
href="https://github.com/itziarZG"
|
|
aria-label="GitHub" title="GitHub"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-2xl" aria-hidden="true"><path d="M680 80Q630 80 595.0 115.0Q560 150 560 200Q560 206 563 228L282 392Q266 377 245.0 368.5Q224 360 200 360Q150 360 115.0 395.0Q80 430 80.0 480.0Q80 530 115.0 565.0Q150 600 200 600Q224 600 245.0 591.5Q266 583 282 568L563 732Q561 739 560.5 745.5Q560 752 560 760Q560 810 595.0 845.0Q630 880 680 880Q730 880 765.0 845.0Q800 810 800 760Q800 710 765.0 675.0Q730 640 680 640Q656 640 635.0 648.5Q614 657 598 672L317 508Q319 501 319.5 494.5Q320 488 320 480Q320 472 319.5 465.5Q319 459 317 452L598 288Q614 303 635.0 311.5Q656 320 680 320Q730 320 765.0 285.0Q800 250 800 200Q800 150 765.0 115.0Q730 80 680 80ZM680 160Q697 160 708.5 171.5Q720 183 720 200Q720 217 708.5 228.5Q697 240 680 240Q663 240 651.5 228.5Q640 217 640 200Q640 183 651.5 171.5Q663 160 680 160ZM200 440Q217 440 228.5 451.5Q240 463 240.0 480.0Q240 497 228.5 508.5Q217 520 200 520Q183 520 171.5 508.5Q160 497 160.0 480.0Q160 463 171.5 451.5Q183 440 200 440ZM720 760Q720 777 708.5 788.5Q697 800 680 800Q663 800 651.5 788.5Q640 777 640 760Q640 743 651.5 731.5Q663 720 680.0 720.0Q697 720 708.5 731.5Q720 743 720 760ZM680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200Q680 200 680.0 200.0Q680 200 680 200ZM200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200.0 480.0Q200 480 200 480ZM680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680 760Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680.0 760.0Q680 760 680 760Z"/></svg>
|
|
</a> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="mt-16 flex flex-col md:flex-row justify-between items-center gap-6 text-slate-400 dark:text-slate-500 text-sm"
|
|
>
|
|
<p>© 2026 Itziar ZG.</p>
|
|
<div class="flex gap-8">
|
|
<a
|
|
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
|
|
href="https://www.linkedin.com/in/itziarzamezagarcia"
|
|
>LinkedIn</a
|
|
>
|
|
<a
|
|
class="hover:text-primary transition-colors text-slate-600 dark:text-slate-400"
|
|
href="privacidad.html"
|
|
>Privacidad</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Modals -->
|
|
<!-- Modal 1: AI Knowledge Pipeline -->
|
|
<div
|
|
id="project-1-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-hidden="true"
|
|
aria-labelledby="project-1-modal-title"
|
|
onclick="closeModal('project-1')"
|
|
>
|
|
<div
|
|
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
|
onclick="event.stopPropagation()"
|
|
>
|
|
<div class="p-8 md:p-12">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h2
|
|
id="project-1-modal-title"
|
|
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
AI Knowledge Pipeline
|
|
</h2>
|
|
<button
|
|
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onclick="closeModal('project-1')"
|
|
aria-label="Close dialog"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<img
|
|
src="images/ai-pipeline.webp"
|
|
alt="AI Knowledge Pipeline"
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Descripción
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Sistema de ingesta y procesamiento inteligente de contenido
|
|
multimedia. Recibe audio, PDFs, vídeos y texto. Utiliza modelos
|
|
de IA para transcribir, resumir y extraer información clave,
|
|
almacenando todo en Supabase de forma estructurada para
|
|
reutilización posterior.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalidades
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Ingestión de múltiples tipos de contenido</li>
|
|
<li>Transcripción automática con IA</li>
|
|
<li>Resumen inteligente y extracción de keywords</li>
|
|
<li>Almacenamiento vectorial para búsqueda semántica</li>
|
|
<li>Pipeline automatizado con n8n</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnológico
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>n8n</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Supabase (PostgreSQL + pgvector)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>OpenAI API</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Whisper (transcripción)</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultado
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Pipeline completamente automatizado que reduce el tiempo de
|
|
procesamiento de contenido en un 85% y permite reutilizar
|
|
información de forma inteligente mediante búsquedas semánticas.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
|
onclick="closeModal('project-1')"
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 2: ChefGPT -->
|
|
<div
|
|
id="project-2-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-hidden="true"
|
|
aria-labelledby="project-2-modal-title"
|
|
onclick="closeModal('project-2')"
|
|
>
|
|
<div
|
|
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
|
onclick="event.stopPropagation()"
|
|
>
|
|
<div class="p-8 md:p-12">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h2
|
|
id="project-2-modal-title"
|
|
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
ChefGPT
|
|
</h2>
|
|
<button
|
|
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onclick="closeModal('project-2')"
|
|
aria-label="Close dialog"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<img
|
|
src="images/chefgpt.webp"
|
|
alt="ChefGPT"
|
|
loading="lazy"
|
|
decoding="async"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Descripción
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Agente conversacional inteligente en Telegram que actúa como
|
|
asistente culinario personal. Consulta tu inventario en
|
|
Supabase, accede a un RAG especializado con recetas para evitar
|
|
alucinaciones, y sugiere platos personalizados basados en lo que
|
|
tienes disponible.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalidades
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Integración bidireccional con Supabase</li>
|
|
<li>Consulta automática de inventario en base de datos</li>
|
|
<li>
|
|
RAG (Retrieval-Augmented Generation) con recetas verificadas
|
|
</li>
|
|
<li>
|
|
Prevención de alucinaciones mediante fine-tuning de prompts
|
|
</li>
|
|
<li>Generación de recetas personalizadas sin alucinar</li>
|
|
<li>Actualización automática del inventario</li>
|
|
<li>Conversación natural y contextual</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnológico
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Telegram Bot API</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Supabase (PostgreSQL)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>RAG (Retrieval)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>OpenAI GPT</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>n8n</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultado
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Asistente culinario robusto que elimina la decisión de "qué
|
|
cocinar" sin generar recetas inexistentes. El RAG garantiza que
|
|
todas las sugerencias provienen de un corpus de recetas
|
|
verificadas, proporcionando fiabilidad y personalización sin
|
|
alucinaciones de la IA.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
|
onclick="closeModal('project-2')"
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 3: Eivissa Environmental Watch -->
|
|
<div
|
|
id="project-3-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="project-3-modal-title"
|
|
onclick="closeModal('project-3')"
|
|
>
|
|
<div
|
|
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
|
onclick="event.stopPropagation()"
|
|
>
|
|
<div class="p-8 md:p-12">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h2
|
|
id="project-3-modal-title"
|
|
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
Eivissa Environmental Watch
|
|
</h2>
|
|
<button
|
|
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onclick="closeModal('project-3')"
|
|
aria-label="Close dialog"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<img
|
|
src="images/eivissa-environmental-watch.webp"
|
|
alt="Eivissa Environmental Watch"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Descripción
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Lector automatizado de noticias locales y del BOIB (Butlletí
|
|
Oficial de les Illes Balears) con clasificación local mediante
|
|
Ollama. Detecta y filtra el contenido relacionado con medio
|
|
ambiente en Eivissa, mostrando solo lo relevante y enlazando a
|
|
la fuente original (noticia o BOIB).
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalidades
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Scraping periódico de fuentes de noticias locales y BOIB</li>
|
|
<li>Clasificación local con modelos de IA open-source (Ollama)</li>
|
|
<li>Filtrado automático por temática medioambiental</li>
|
|
<li>Interfaz ligera para consultar las clasificaciones</li>
|
|
<li>Enlaces directos al BOIB y a las noticias originales</li>
|
|
<li>Cero envío de datos a APIs comerciales: privacidad total</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnológico
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Ollama (LLM local)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Navidrome (servidor)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Hetzner (infraestructura verde)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Docker</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HTML estático ligero</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultado
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Sitio activo en producción, publicando diariamente contenido
|
|
ambiental curado por IA local. La arquitectura totalmente
|
|
self-hosted garantiza soberanía sobre los datos y cero
|
|
dependencia de servicios cloud externos.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
|
<a href="https://www.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
|
Visitar sitio
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 4: Posidonia · Eivissa Environmental Watch -->
|
|
<div
|
|
id="project-4-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="project-4-modal-title"
|
|
onclick="closeModal('project-4')"
|
|
>
|
|
<div
|
|
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
|
onclick="event.stopPropagation()"
|
|
>
|
|
<div class="p-8 md:p-12">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h2
|
|
id="project-4-modal-title"
|
|
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
Posidonia · Eivissa Environmental Watch
|
|
</h2>
|
|
<button
|
|
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onclick="closeModal('project-4')"
|
|
aria-label="Close dialog"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<img
|
|
src="images/posidonia-eivissa-environmental-watch.webp"
|
|
alt="Captura del micrositio Posidonia con cabecera editorial verde y estadísticas de estaciones"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Descripción
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Micrositio editorial periodístico publicado el 26 de julio de 2026 que documenta el estado de la Posidonia oceánica ocho años después del decreto que prohíbe el fondeo sobre esta especie. La página confronta dos conjuntos de datos oficiales: la mejora general en las Illes Balears frente al deterioro específico en Eivissa.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalidades
|
|
</h3>
|
|
<ul class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300">
|
|
<li>Artículo editorial con datos oficiales del GEN-GOB (2025)</li>
|
|
<li>Visualización de estadísticas clave: 17% de estaciones baleares en mal estado frente a 17/18 estaciones de Eivissa en situación desfavorable</li>
|
|
<li>Línea temporal narrativa sobre los efectos del decreto de 2018</li>
|
|
<li>Diseño responsive optimizado para lectura móvil y accesibilidad</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnológico
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HTML</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Tailwind CSS</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Tipografía editorial</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Diseño responsive</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Datos abiertos GEN-GOB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultado
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Publicación editorial con datos verificados que evidencia la divergencia entre la narrativa oficial del Govern Balear y los datos reales sobre el estado de la pradera de Posidonia en Eivissa.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
|
<a href="https://posidonia.eivissaenvironmentalwatch.es/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
|
Visitar sitio
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 5: Cases Tancades -->
|
|
<div
|
|
id="project-5-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="project-5-modal-title"
|
|
onclick="closeModal('project-5')"
|
|
>
|
|
<div
|
|
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
|
onclick="event.stopPropagation()"
|
|
>
|
|
<div class="p-8 md:p-12">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h2
|
|
id="project-5-modal-title"
|
|
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
Cases Tancades
|
|
</h2>
|
|
<button
|
|
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onclick="closeModal('project-5')"
|
|
aria-label="Close dialog"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<img
|
|
src="images/cases-tancades.webp"
|
|
alt="Captura del micrositio Cases Tancades con titular "Quants pisos tancats hi ha a les Balears" y botones de acción"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Descripción
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Diagnóstico abierto de la vivienda en Balears que cruza datos
|
|
oficiales del INE, registros HUT del Govern y listados de
|
|
Airbnb para evidenciar cuántos pisos están cerrados o vacíos
|
|
frente a la presión del alquiler turístico.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalidades
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Cruce de datos INE, registros HUT del Govern y listados geo-localizados de Airbnb</li>
|
|
<li>Mapa interactivo por municipio y por isla (Mallorca, Menorca, Eivissa, Formentera)</li>
|
|
<li>Datos de consumo eléctrico por sección censal (Cens 2021) como proxy de vivienda vacía</li>
|
|
<li>Metodología abierta con código fuente disponible en GitHub</li>
|
|
<li>Visualizaciones comparativas de plazas turísticas vs. población residente</li>
|
|
<li>Sin estimaciones opacas: cada cifra enlaza a su fuente pública</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnológico
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Astro</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Datos abiertos INE</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Registros HUT del Govern</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Mapas interactivos</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">CC BY-SA 4.0</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultado
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Análisis verificable que cuantifica el desajuste entre vivienda
|
|
vacía (105.632 hogares con consumo 0 según INE 2021) y presión
|
|
turística (102.597 plazas entre Airbnb y registros HUT).
|
|
Visibiliza la crisis residencial balear con datos públicos.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3 pt-4 border-t border-slate-200 dark:border-slate-800">
|
|
<a href="https://casesbuides.itziarzameza.dev/" target="_blank" rel="noopener noreferrer" class="px-6 py-3 bg-primary text-white rounded-full text-sm font-bold hover:bg-primary/90 transition-all flex items-center gap-2">
|
|
Visitar sitio
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 17L17 7M7 7h10v10"/></svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts -->
|
|
<script defer src="js/main.js"></script>
|
|
</body>
|
|
</html>
|