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)
1670 lines
100 KiB
HTML
1670 lines
100 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Itziar ZG | Accessible & Sustainable Web Development</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
|
<meta
|
|
name="description"
|
|
content="Itziar ZG builds lightweight, accessible and sustainable front-end websites for socially impactful projects from Ibiza."
|
|
/>
|
|
<meta name="robots" content="index, follow, max-image-preview:large" />
|
|
<link rel="canonical" href="https://www.itziarzameza.dev/index-en.html" />
|
|
<meta name="theme-color" content="#f7f6f8" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:locale" content="en_GB" />
|
|
<meta property="og:title" content="Itziar ZG | Accessible & Sustainable Web Development" />
|
|
<meta property="og:description" content="Lightweight, accessible and sovereign front-end development for socially impactful projects." />
|
|
<meta property="og:url" content="https://www.itziarzameza.dev/index-en.html" />
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:title" content="Itziar ZG | Accessible & Sustainable Web Development" />
|
|
<meta name="twitter:description" content="Lightweight, accessible and sovereign front-end development for socially impactful projects." />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
"name": "Itziar Zameza García",
|
|
"url": "https://www.itziarzameza.dev/",
|
|
"jobTitle": "Front-end developer",
|
|
"description": "Front-end developer specialized in lightweight, accessible and sovereign technology.",
|
|
"email": "mailto:itziar.zameza.dev@gmail.com",
|
|
"sameAs": [
|
|
"https://www.linkedin.com/in/itziarzamezagarcia"
|
|
]
|
|
}
|
|
</script>
|
|
<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" />
|
|
<link
|
|
rel="alternate"
|
|
hreflang="es"
|
|
href="https://www.itziarzameza.dev/index.html"
|
|
/>
|
|
<link
|
|
rel="alternate"
|
|
hreflang="ca"
|
|
href="https://www.itziarzameza.dev/index-ca.html"
|
|
/>
|
|
<link
|
|
rel="alternate"
|
|
hreflang="en"
|
|
href="https://www.itziarzameza.dev/index-en.html"
|
|
/>
|
|
<link
|
|
rel="alternate"
|
|
hreflang="x-default"
|
|
href="https://www.itziarzameza.dev/index.html"
|
|
/>
|
|
<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">Skip to main content</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 max-w-6xl w-full px-6 py-6 flex items-center justify-between"
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<div
|
|
class="size-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold text-lg"
|
|
>
|
|
IZ
|
|
</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="Main navigation"
|
|
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"
|
|
>Home</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#manifiesto"
|
|
>Manifesto</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#laboratorio"
|
|
>Lab</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="huella.html"
|
|
>Footprint</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#contact"
|
|
>Contact</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"
|
|
>
|
|
<a
|
|
href="index.html"
|
|
class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors"
|
|
title="Español"
|
|
>ES</a
|
|
>
|
|
<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>
|
|
<span class="text-primary">EN</span>
|
|
</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()"
|
|
>
|
|
Let's talk
|
|
</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 glass text-sm text-slate-700 dark:text-slate-300 mb-8 border border-white/40"
|
|
>
|
|
<span class="flex h-2 w-2 relative">
|
|
<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>
|
|
Available for new projects
|
|
</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"
|
|
>
|
|
When you need to use technology to generate social impact
|
|
responsibly, talk
|
|
<span
|
|
class="text-primary not-italic font-display font-black tracking-tighter"
|
|
>with me</span
|
|
>.
|
|
</h1>
|
|
<p
|
|
class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-12 leading-relaxed"
|
|
>
|
|
Front-end developer specialized in lightweight, accessible, and
|
|
sovereign technology. Based in Ibiza.
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<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>
|
|
|
|
<!-- Manifesto 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"
|
|
>
|
|
Manifesto for Human & Sovereign Technology
|
|
</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"
|
|
>
|
|
Purpose
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Democratize and humanize technology, putting it at the service
|
|
of people and the planet, and not the other way around. I seek
|
|
to create tools that empower communities rather than
|
|
concentrate power.
|
|
</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"
|
|
>
|
|
Mission
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Develop efficient, accessible, and digital-rights-respecting
|
|
solutions, demonstrating that another technology is possible
|
|
through local commitment and global impact.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mb-10">
|
|
<h3
|
|
class="text-2xl font-serif italic text-slate-800 dark:text-slate-200"
|
|
>
|
|
Guiding principles
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<!-- Principle 1: Sustainability -->
|
|
<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">
|
|
Sustainability (Green Software)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Optimize resource consumption, minimizing data transfer and
|
|
the carbon footprint of the web applications I develop.
|
|
</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>
|
|
|
|
<!-- Principle 2: Free Software -->
|
|
<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">
|
|
Free & Open Source Software
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Support and contribute to open source as a digital public good
|
|
that fosters technological sovereignty and shared learning.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principle 3: Common Good -->
|
|
<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">
|
|
Common Good
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Prioritize projects and tools that generate a positive,
|
|
measurable social impact oriented toward solving real society
|
|
needs.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principle 4: Accessibility -->
|
|
<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">
|
|
Accessibility (a11y)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Design inclusive web interfaces so everyone can access
|
|
information without physical, cognitive, or technological
|
|
barriers.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principle 5: Privacy -->
|
|
<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">Privacy</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Respect personal data sovereignty, using ethical and
|
|
cookieless analytics, protecting users from corporate
|
|
tracking.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principle 6: Responsible AI -->
|
|
<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">
|
|
Responsible AI
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Use AI models ethically and transparently, prioritizing local
|
|
execution and ensuring they support human agency.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Laboratorio Section -->
|
|
<section class="py-24" id="laboratorio">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2
|
|
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
|
|
>
|
|
My Laboratory
|
|
</h2>
|
|
<p class="text-slate-500 dark:text-slate-400">
|
|
A space for technical experimentation, real tools, and sovereign
|
|
digital infrastructure.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tab Buttons Container -->
|
|
<div
|
|
role="tablist"
|
|
aria-label="Laboratory sections"
|
|
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"
|
|
>
|
|
Infrastructure
|
|
</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"
|
|
>
|
|
Experiments
|
|
</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"
|
|
>
|
|
Projects
|
|
</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: Infrastructure -->
|
|
<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">
|
|
What I use and why
|
|
</h3>
|
|
<p
|
|
class="text-slate-700 dark:text-slate-300 leading-relaxed"
|
|
>
|
|
Technological sovereignty begins at the foundations. I
|
|
have chosen to manage my own infrastructure to ensure
|
|
control over my data, project privacy, and reduce
|
|
dependency on cloud giants.
|
|
</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>Green Commitment</span>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
My infrastructure is hosted at Hetzner's data center in
|
|
Helsinki, powered by 100% carbon-free energy from wind
|
|
and hydro sources.
|
|
</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"
|
|
>
|
|
Dedicated servers and VPS powered by green energy in
|
|
Finland.
|
|
</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"
|
|
>
|
|
Self-hosted, open-source alternative to 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"
|
|
>
|
|
Lightweight self-hosted Git service for sovereign code
|
|
control.
|
|
</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"
|
|
>
|
|
Self-hosted workflow automation free from SaaS lock-in.
|
|
</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"
|
|
>
|
|
Ethical, privacy-respecting, cookieless web analytics.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 2: Experiments (on standby - panel code preserved in comments) -->
|
|
<!--
|
|
<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"
|
|
>Active</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Green Software Measurement
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Empirical comparison of CPU and network consumption
|
|
between SSR (Astro/Next.js) architectures and optimized
|
|
static HTML pages.
|
|
</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"
|
|
>Active</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Local AI on Raspberry Pi
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Running small models like Llama 3.2 1B and Phi-3 with
|
|
Ollama locally for classification and tagging tasks with
|
|
zero API cost and guaranteed privacy.
|
|
</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"
|
|
>Pending</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Screen Reader Stress Test
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Manual audit of complex interfaces using NVDA and
|
|
VoiceOver screen readers to validate dynamic interactive
|
|
flows and live ARIA states.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<!-- Tab 3: Projects -->
|
|
<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">
|
|
Real tools, not 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">Editorial microsite on the 8th anniversary of the decree protecting Posidonia oceánica in the Pitiusic archipelago.</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">Operational</span>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-400">HTML • Tailwind • Open data GEN-GOB</span>
|
|
<button onclick="openModal('project-4')" class="text-xs text-primary hover:underline font-bold">View details</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"
|
|
>
|
|
Automated reader of news and BOIB with local
|
|
classification via Ollama. Detects and filters
|
|
environment-related content from Eivissa sources.
|
|
</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"
|
|
>Operational</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')"
|
|
>
|
|
View details
|
|
</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"
|
|
>
|
|
Open diagnostic of housing in the Balearic Islands:
|
|
cross-references official data from INE, Airbnb, and
|
|
Govern Balear HUT registries to show how many flats
|
|
sit empty against the pressure of tourist rentals.
|
|
</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"
|
|
>Operational</span
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-400"
|
|
>Astro • Open data INE</span
|
|
>
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-5')"
|
|
>
|
|
View details
|
|
</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">
|
|
Navidrome Server
|
|
</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"
|
|
>Not started</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Docker • Hetzner</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<!-- Open Source Contribution -->
|
|
<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">
|
|
Open Source Contribution
|
|
</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"
|
|
>Not started</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>
|
|
Previous Work (Commercial & AI Projects)
|
|
</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"
|
|
>
|
|
Intelligent multimedia processing system. Receives
|
|
audio files and PDFs, transcribes, and structures
|
|
them using commercial AI APIs for semantic querying.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-1')"
|
|
>
|
|
View details & 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"
|
|
>
|
|
Conversational Telegram bot connected to Supabase
|
|
and RAG that suggests recipes based on available
|
|
ingredients in real time.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-2')"
|
|
>
|
|
View details & 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>
|
|
|
|
<!-- Note 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"
|
|
>July 20, 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 Key Takeaways
|
|
</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"
|
|
>
|
|
Why did I get this certification?
|
|
</h5>
|
|
<p>
|
|
Because I want to build technology that takes its
|
|
environmental and social impact into account.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
Five ideas I'm taking away:
|
|
</h5>
|
|
<ol class="list-decimal list-inside space-y-2.5 pl-1">
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>The best energy is the energy not
|
|
consumed.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Optimizing isn't just about making websites
|
|
faster. It also means using fewer resources.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Efficiency starts with design.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Choosing a simple architecture is usually better
|
|
than optimizing later.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Measure before improving.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
We cannot reduce what we do not measure.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Software also has a carbon footprint.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Every data transfer, process, or storage has a
|
|
cost.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Green Software isn't just about consuming
|
|
less.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
It also means designing products that help reduce
|
|
the environmental impact of people and
|
|
organizations.
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-1"
|
|
>
|
|
What's next?
|
|
</h5>
|
|
<p>
|
|
I am currently reading
|
|
<em>Technological Sovereignty</em> because I believe
|
|
sustainability doesn't depend solely on energy
|
|
consumption, but also on who controls the
|
|
infrastructure and software we use.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fixed footer note -->
|
|
<div
|
|
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400"
|
|
>
|
|
These are learning notes, not definitive guides. If you
|
|
spot something that can be improved, I'd love to hear from
|
|
you.
|
|
</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"
|
|
>July 19, 2026</span
|
|
>
|
|
<h4
|
|
class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer"
|
|
>
|
|
Imperfection as an Ally: Why I Avoid Purism When Measuring
|
|
Web Carbon
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Sometimes obsessing over maximum technical optimization
|
|
blocks publishing useful tools. In this post I explain my
|
|
infrastructure decisions and the pragmatic limits I
|
|
accept...
|
|
</p>
|
|
<a
|
|
href="huella.html"
|
|
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
|
|
>
|
|
Read full article in Footprint section
|
|
<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"
|
|
>
|
|
These are learning notes, not definitive guides. If you
|
|
spot something that can be improved, I'd love to hear from
|
|
you.
|
|
</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-en.html"
|
|
>Privacy</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">
|
|
Description
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Intelligent multimedia content processing and ingestion system.
|
|
Receives audio files, PDFs, videos, and text. Uses AI models to
|
|
transcribe, summarize, and extract key information, storing
|
|
everything structured in Supabase for subsequent retrieval.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Key Features
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Multiple content type ingestion</li>
|
|
<li>Automatic AI transcription</li>
|
|
<li>Intelligent summarization and keyword extraction</li>
|
|
<li>Vector storage for semantic search</li>
|
|
<li>Automated workflow with n8n</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Tech Stack
|
|
</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 (transcription)</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Result
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Fully automated pipeline that reduces content processing time by
|
|
85% and enables intelligent information reuse through semantic
|
|
search.
|
|
</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')"
|
|
>
|
|
Close
|
|
</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">
|
|
Description
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Intelligent conversational agent on Telegram acting as a
|
|
personal culinary assistant. Queries your Supabase inventory,
|
|
accesses a specialized recipe RAG to avoid hallucinations, and
|
|
suggests customized dishes based on available ingredients.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Key Features
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Bi-directional integration with Supabase</li>
|
|
<li>Automatic database inventory querying</li>
|
|
<li>
|
|
RAG (Retrieval-Augmented Generation) with verified recipes
|
|
</li>
|
|
<li>Hallucination prevention via prompt fine-tuning</li>
|
|
<li>Customized recipe generation without hallucinations</li>
|
|
<li>Automatic inventory updating</li>
|
|
<li>Natural and contextual conversation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Tech Stack
|
|
</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">
|
|
Result
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Robust culinary assistant that eliminates the "what to cook"
|
|
decision without generating non-existent recipes. The RAG
|
|
ensures all suggestions originate from a corpus of verified
|
|
recipes, providing reliability and personalization without AI
|
|
hallucinations.
|
|
</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')"
|
|
>
|
|
Close
|
|
</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">
|
|
Description
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Automated reader of local news and BOIB (Official Gazette of
|
|
the Balearic Islands) with local classification via Ollama. It
|
|
detects and filters environment-related content from Eivissa
|
|
sources, surfacing only what's relevant and linking back to the
|
|
original article or gazette entry.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Features
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Periodic scraping of local news sources and BOIB</li>
|
|
<li>Local classification using open-source AI models (Ollama)</li>
|
|
<li>Automatic filtering by environmental topic</li>
|
|
<li>Lightweight UI to browse classifications</li>
|
|
<li>Direct links to BOIB entries and original news articles</li>
|
|
<li>Zero data sent to commercial APIs: full privacy</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Tech Stack
|
|
</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 (local LLM)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Navidrome (server)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Hetzner (green infrastructure)</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">Static lightweight HTML</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Outcome
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Live production site, publishing daily environment-related
|
|
content curated by a local AI. The fully self-hosted
|
|
architecture guarantees data sovereignty and zero dependency on
|
|
external cloud services.
|
|
</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">
|
|
Visit site
|
|
<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="Screenshot of the Posidonia microsite with green editorial header and station statistics"
|
|
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">
|
|
Description
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Editorial microsite published on 26 July 2026 documenting the state of Posidonia oceánica eight years after the decree banning anchoring on this species. The page contrasts two sets of official data: the overall improvement in the Balearic Islands versus the specific deterioration in Eivissa.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Features
|
|
</h3>
|
|
<ul class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300">
|
|
<li>Editorial article with official GEN-GOB (2025) data</li>
|
|
<li>Key statistics visualization: 17% of Balearic stations in poor condition vs. 17/18 Eivissa stations in unfavourable condition</li>
|
|
<li>Narrative timeline on the effects of the 2018 decree</li>
|
|
<li>Responsive design optimized for mobile reading and accessibility</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Tech Stack
|
|
</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">Editorial typography</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Responsive design</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">GEN-GOB open data</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Outcome
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Editorial publication with verified data highlighting the divergence between the official Balearic Government's narrative and the real data on the state of the Posidonia meadow in 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">
|
|
Visit site
|
|
<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="Screenshot of the Cases Tancades microsite with the headline "Quants pisos tancats hi ha a les Balears" and action buttons"
|
|
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">
|
|
Description
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Open housing diagnosis in the Balearic Islands that
|
|
cross-references official INE data, Govern HUT registers, and
|
|
Airbnb listings to evidence how many homes are closed or vacant
|
|
against the pressure of tourist rentals.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Features
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Cross-referencing of INE data, Govern HUT registers, and geo-localized Airbnb listings</li>
|
|
<li>Interactive map by municipality and island (Mallorca, Menorca, Eivissa, Formentera)</li>
|
|
<li>Electricity consumption data by census tract (2021 Census) as a vacancy proxy</li>
|
|
<li>Open methodology with source code available on GitHub</li>
|
|
<li>Comparative visualizations of tourist places vs. resident population</li>
|
|
<li>No opaque estimates: each figure links to its public source</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Tech Stack
|
|
</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">Open data INE</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">HUT Govern registers</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Interactive maps</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">
|
|
Outcome
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Verifiable analysis quantifying the gap between vacant housing
|
|
(105,632 homes with 0 consumption per INE 2021) and tourist
|
|
pressure (102,597 places across Airbnb and HUT registers).
|
|
Makes the Balearic housing crisis visible through public data.
|
|
</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">
|
|
Visit site
|
|
<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 src="js/main.js"></script>
|
|
</body>
|
|
</html>
|