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)
1702 lines
103 KiB
HTML
1702 lines
103 KiB
HTML
<!doctype html>
|
|
<html lang="ca">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Itziar ZG | Desenvolupament web accessible i sostenible</title>
|
|
<link rel="icon" type="image/svg+xml" href="favicon.svg" />
|
|
<meta
|
|
name="description"
|
|
content="Itziar ZG desenvolupa webs front-end lleugeres, accessibles i sostenibles per a projectes amb impacte social des d'Eivissa."
|
|
/>
|
|
<meta name="robots" content="index, follow, max-image-preview:large" />
|
|
<link rel="canonical" href="https://www.itziarzameza.dev/index-ca.html" />
|
|
<meta name="theme-color" content="#f7f6f8" />
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:locale" content="ca_ES" />
|
|
<meta property="og:title" content="Itziar ZG | Desenvolupament web accessible i sostenible" />
|
|
<meta property="og:description" content="Desenvolupament front-end lleuger, accessible i sobirà per a projectes amb impacte social." />
|
|
<meta property="og:url" content="https://www.itziarzameza.dev/index-ca.html" />
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:title" content="Itziar ZG | Desenvolupament web accessible i sostenible" />
|
|
<meta name="twitter:description" content="Desenvolupament front-end lleuger, accessible i sobirà per a projectes amb impacte social." />
|
|
<script type="application/ld+json">
|
|
{
|
|
"@context": "https://schema.org",
|
|
"@type": "Person",
|
|
"name": "Itziar Zameza García",
|
|
"url": "https://www.itziarzameza.dev/",
|
|
"jobTitle": "Desenvolupadora front-end",
|
|
"description": "Desenvolupadora front-end especialitzada en tecnologia lleugera, accessible i sobirana.",
|
|
"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">Salta al contingut 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 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="Navegació 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"
|
|
>Inici</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#manifiesto"
|
|
>Manifest</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#laboratorio"
|
|
>Laboratori</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="huella.html"
|
|
>Emprenta</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#contact"
|
|
>Contacte</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>
|
|
<span class="text-primary">CA</span>
|
|
<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()"
|
|
>
|
|
Parlem
|
|
</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>
|
|
Disponible per a nous projectes
|
|
</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"
|
|
>
|
|
Quan necessitis utilitzar la tecnologia per generar impacte social
|
|
de forma responsable, parla
|
|
<span
|
|
class="text-primary not-italic font-display font-black tracking-tighter"
|
|
>amb mi</span
|
|
>.
|
|
</h1>
|
|
<p
|
|
class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-12 leading-relaxed"
|
|
>
|
|
Desenvolupadora front-end especialitzada en tecnologia lleugera,
|
|
accessible i sobirana. Amb base a Eivissa.
|
|
</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>
|
|
<!-- Manifest 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"
|
|
>
|
|
Manifest per a una tecnologia humana i sobirana
|
|
</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òsit
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Democratitzar i humanitzar la tecnologia, posant-la al servei
|
|
de les persones i del planeta, i no al revés. Busco crear
|
|
eines que empoderin les comunitats en lloc 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"
|
|
>
|
|
Missió
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Desenvolupar solucions digitals eficients, accessibles i
|
|
respectuoses amb els drets digitals, demostrant que una altra
|
|
tecnologia és possible des del compromís local i l'impacte
|
|
global.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mb-10">
|
|
<h3
|
|
class="text-2xl font-serif italic text-slate-800 dark:text-slate-200"
|
|
>
|
|
Principis rectors
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<!-- Principi 1: Sostenibilitat -->
|
|
<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">
|
|
Sostenibilitat (Green Software)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Optimitzar el consum de recursos, minimitzant la
|
|
transferència de dades i l'empremta de carboni de les
|
|
aplicacions web que desenvolupo.
|
|
</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>
|
|
|
|
<!-- Principi 2: Programari Lliure -->
|
|
<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">
|
|
Programari Lliure
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Recolzar i contribuir al codi obert com a bé públic digital
|
|
que fomenta la sobirania tecnològica i l'aprenentatge
|
|
compartit.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principi 3: Bé Comú -->
|
|
<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">Bé Comú</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Prioritzar projectes i eines que generin un impacte social
|
|
positiu, mesurable i orientat a resoldre necessitats reals de
|
|
la societat.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principi 4: Accessibilitat -->
|
|
<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">
|
|
Accessibilitat (a11y)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Dissenyar interfícies web inclusives perquè tothom pugui
|
|
accedir a la informació sense barreres físiques, cognitives o
|
|
tecnològiques.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principi 5: Privacitat -->
|
|
<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">
|
|
Privacitat
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Respectar la sobirania de les dades personals, utilitzant
|
|
analítiques ètiques i cookieless, protegint els usuaris del
|
|
rastreig corporatiu.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principi 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"
|
|
>
|
|
Utilitzar models d'IA de forma ètica i transparent,
|
|
prioritzant l'execució local i vetllant perquè serveixin de
|
|
suport a l'agència humana.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Laboratori 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"
|
|
>
|
|
El meu laboratori
|
|
</h2>
|
|
<p class="text-slate-500 dark:text-slate-400">
|
|
Un espai d'experimentació tècnica, eines reals i infraestructura
|
|
digital sobirana.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tab Buttons Container -->
|
|
<div
|
|
role="tablist"
|
|
aria-label="Seccions del laboratori"
|
|
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"
|
|
>
|
|
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"
|
|
>
|
|
Projectes
|
|
</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è utilitzo i per què
|
|
</h3>
|
|
<p
|
|
class="text-slate-700 dark:text-slate-300 leading-relaxed"
|
|
>
|
|
La sobirania tecnològica comença als fonaments. He decidit
|
|
gestionar la meva pròpia infraestructura per assegurar el
|
|
control de les meves dades, la privacitat dels meus
|
|
projectes i reduir la dependència dels gegants del núvol.
|
|
</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>Compromís Verd</span>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
La meva infraestructura està allotjada al centre de
|
|
dades de Hetzner a Hèlsinki, alimentat per energia 100%
|
|
lliure de carboni procedent de fonts eòliques i
|
|
hidràuliques.
|
|
</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 Hèlsinki
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Servidors dedicats i VPS alimentats per energia verda a
|
|
Finlàndia.
|
|
</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 i de codi obert 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"
|
|
>
|
|
Servei Git lleuger autohospedat per al control sobirà de
|
|
codi.
|
|
</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"
|
|
>
|
|
Automatització de fluxos de treball self-hosted lliure
|
|
de lligams 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, respectuosa amb la privacitat i
|
|
cookieless.
|
|
</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="M158 242Q121 292 100.5 352.5Q80 413 80.0 480.0Q80 547 100.0 607.0Q120 667 157 717L215 660Q189 622 174.5 576.5Q160 531 160.0 480.0Q160 429 174.5 383.0Q189 337 215 299ZM480 80Q413 80 353.0 100.0Q293 120 243 157L300 215Q338 189 383.5 174.5Q429 160 480 160Q531 160 576.5 174.5Q622 189 660 215L717 157Q667 120 607.0 100.0Q547 80 480 80ZM802 242 745 299Q771 337 785.5 383.0Q800 429 800.0 480.0Q800 531 785.5 576.5Q771 622 745 660L803 717Q840 667 860.0 607.0Q880 547 880.0 480.0Q880 413 859.5 352.5Q839 292 802 242ZM299 745 242 802Q292 839 352.5 859.5Q413 880 480 880Q548 880 608.0 859.5Q668 839 718 802L661 745Q623 771 577.0 785.5Q531 800 480 800Q429 800 383.0 785.5Q337 771 299 745ZM480 280Q397 280 338.5 338.5Q280 397 280 480Q280 563 338.5 621.5Q397 680 480 680Q563 680 621.5 621.5Q680 563 680 480Q680 397 621.5 338.5Q563 280 480 280Z"/></svg>
|
|
<h4 class="font-bold dark:text-white">Cap</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Eina de gravació de pantalla de codi lliure al nostre
|
|
node.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 2: Experiments (en pausa - codi del panel preservat en comentaris) -->
|
|
<!--
|
|
<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"
|
|
>Actiu</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Mesurament de Green Software
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Comparació empírica del consum de CPU i xarxa entre
|
|
arquitectures SSR (Astro/Next.js) i pàgines HTML
|
|
estàtiques optimitzades.
|
|
</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"
|
|
>Actiu</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"
|
|
>
|
|
Execució de models petits com Llama 3.2 1B i Phi-3 amb
|
|
Ollama en local per a tasques de classificació i
|
|
etiquetatge amb zero cost d'API i privacitat garantida.
|
|
</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"
|
|
>Pendent</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Estrès de Lectors de Pantalla
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Auditoria manual d'interfícies complexes amb lectors NVDA
|
|
i VoiceOver per validar fluxos interactius dinàmics i
|
|
estats d'ARIA en viu.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<!-- Tab 3: Projectes -->
|
|
<div id="tab-proyectos" class="tab-pane hidden" role="tabpanel" aria-labelledby="tab-proyectos-button" aria-hidden="true">
|
|
<!-- Eines Reals -->
|
|
<div class="mb-12">
|
|
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
|
|
Eines reals, 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">Microsite editorial sobre el 8è aniversari del decret que protegeix la Posidonia oceànica a l'arxipèlag pitiús.</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">Operatiu</span>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-400">HTML • Tailwind • Dades obertes GEN-GOB</span>
|
|
<button onclick="openModal('project-4')" class="text-xs text-primary hover:underline font-bold">Veure detalls</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 automatitzat de notícies i del BOIB amb
|
|
classificació local mitjançant Ollama. Detecta i filtra
|
|
contingut relacionat amb medi ambient a 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"
|
|
>Operatiu</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')"
|
|
>
|
|
Veure detalls
|
|
</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òstic obert de l'habitatge a les Balears: creua
|
|
dades oficials de l'INE, Airbnb i registres HUT del
|
|
Govern per mostrar quants pisos estan buits davant la
|
|
pressió del lloguer turístic.
|
|
</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"
|
|
>Operatiu</span
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-400"
|
|
>Astro • Dades obertes INE</span
|
|
>
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-5')"
|
|
>
|
|
Veure detalls
|
|
</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"
|
|
>Sense iniciar</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Docker • Hetzner</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<!-- Contribució Codi Obert -->
|
|
<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ó Codi Obert
|
|
</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"
|
|
>Sense iniciar</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Forgejo • GitHub</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Treball Anterior -->
|
|
<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>
|
|
Treball Anterior (Projectes d'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 processament intel·ligent multimèdia. Rep
|
|
àudios i PDFs, els transcriu i els estructura
|
|
mitjançant APIs d'IA comercials per a la seva
|
|
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')"
|
|
>
|
|
Veure detalls i 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 connectat amb
|
|
Supabase i RAG que suggereix receptes basant-se en
|
|
ingredients disponibles en temps real.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-2')"
|
|
>
|
|
Veure detalls i 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 Juliol, 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 idees que em porto
|
|
</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"
|
|
>
|
|
Per què vaig fer aquesta certificació?
|
|
</h5>
|
|
<p>
|
|
Perquè vull construir tecnologia que tingui en compte
|
|
el seu impacte ambiental i social.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
Cinc idees que em porto:
|
|
</h5>
|
|
<ol class="list-decimal list-inside space-y-2.5 pl-1">
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>La millor energia és la que no es
|
|
consumeix.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Optimitzar no és només fer la web més ràpida.
|
|
També significa consumir menys recursos.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>L'eficiència comença en el disseny.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Escollir una arquitectura senzilla sol ser millor
|
|
que optimitzar després.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Mesurar abans de millorar.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
No podem reduir allò que no mesurem.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>El programari també té empremta de
|
|
carboni.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Cada transferència de dades, procés o
|
|
emmagatzematge té un cost.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Green Software no consisteix només a consumir
|
|
menys.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
També implica dissenyar productes que ajudin a
|
|
reduir l'impacte ambiental de les persones i les
|
|
organitzacions.
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-1"
|
|
>
|
|
I ara què?
|
|
</h5>
|
|
<p>
|
|
Estic llegint <em>Sobirania Tecnològica</em> perquè
|
|
crec que la sostenibilitat no depèn només del consum
|
|
energètic, sinó també de qui controla la
|
|
infraestructura i el programari que utilitzem.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Frase fixa 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"
|
|
>
|
|
Aquestes són notes d'aprenentatge, no guies definitives.
|
|
Si veus alguna cosa que es pugui millorar, m'encantarà
|
|
escoltar-te.
|
|
</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"
|
|
>
|
|
Llegir article complet a la secció Emprenta
|
|
<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"
|
|
>
|
|
Aquestes són notes d'aprenentatge, no guies definitives.
|
|
Si veus alguna cosa que es pugui millorar, m'encantarà
|
|
escoltar-te.
|
|
</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-ca.html"
|
|
>Privacitat</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ó
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Sistema d'ingestió i processament intel·ligent de contingut
|
|
multimèdia. Rep àudio, PDFs, vídeos i text. Utilitza models d'IA
|
|
per transcriure, resumir i extreure informació clau,
|
|
emmagatzemant tot a Supabase de forma estructurada per a la seva
|
|
posterior reutilització.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalitats
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Ingestió de múltiples tipus de contingut</li>
|
|
<li>Transcripció automàtica amb IA</li>
|
|
<li>Resum intel·ligent i extracció de paraules clau</li>
|
|
<li>Emmagatzematge vectorial per a cerca semàntica</li>
|
|
<li>Pipeline automatitzat amb n8n</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnològic
|
|
</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ó)</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultat
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Pipeline completament automatitzat que redueix el temps de
|
|
processament de contingut en un 85% i permet reutilitzar
|
|
informació de forma intel·ligent mitjançant cerques semàntiques.
|
|
</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')"
|
|
>
|
|
Tancar
|
|
</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ó
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Agent conversacional intel·ligent a Telegram que actua com a
|
|
assistent culinari personal. Consulta el teu inventari a
|
|
Supabase, accedeix a un RAG especialitzat amb receptes per
|
|
evitar al·lucinacions, i suggereix plats personalitzats basats
|
|
en el que tens disponible.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalitats
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Integració bidireccional amb Supabase</li>
|
|
<li>Consulta automàtica d'inventari a la base de dades</li>
|
|
<li>
|
|
RAG (Retrieval-Augmented Generation) amb receptes verificades
|
|
</li>
|
|
<li>
|
|
Prevenció d'al·lucinacions mitjançant fine-tuning de prompts
|
|
</li>
|
|
<li>Generació de receptes personalitzades sense al·lucinar</li>
|
|
<li>Actualització automàtica de l'inventari</li>
|
|
<li>Conversa natural i contextual</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnològic
|
|
</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">
|
|
Resultat
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Assistent culinari robust que elimina la decisió de "què cuinar"
|
|
sense generar receptes inexistents. El RAG garanteix que totes
|
|
les suggerències provenen d'un corpus de receptes verificades,
|
|
proporcionant fiabilitat i personalització sense al·lucinacions
|
|
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')"
|
|
>
|
|
Tancar
|
|
</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ó
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Lector automatitzat de notícies locals i del BOIB (Butlletí
|
|
Oficial de les Illes Balears) amb classificació local
|
|
mitjançant Ollama. Detecta i filtra el contingut relacionat amb
|
|
medi ambient a Eivissa, mostrant només el que és rellevant i
|
|
enllaçant a la font original (notícia o BOIB).
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalitats
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Scraping periòdic de fonts de notícies locals i BOIB</li>
|
|
<li>Classificació local amb models d'IA de codi obert (Ollama)</li>
|
|
<li>Filtratge automàtic per temàtica mediambiental</li>
|
|
<li>Interfície lleugera per consultar les classificacions</li>
|
|
<li>Enllaços directes al BOIB i a les notícies originals</li>
|
|
<li>Zero enviament de dades a APIs comercials: privacitat total</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnològic
|
|
</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 verda)</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àtic lleuger</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultat
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Lloc actiu en producció, publicant diàriament contingut
|
|
ambiental curat per una IA local. L'arquitectura totalment
|
|
autoallotjada garanteix sobirania sobre les dades i zero
|
|
dependència de serveis al núvol externs.
|
|
</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 lloc
|
|
<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 micrositet Posidonia amb capçalera editorial verda i estadístiques d'estacions"
|
|
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ó
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Microsite editorial periodístic publicat el 26 de juliol de 2026 que documenta l'estat de la Posidonia oceànica vuit anys després del decret que prohibeix el fondeig sobre aquesta espècie. La pàgina confronta dos conjunts de dades oficials: la millora general a les Illes Balears davant la deterioració específica a Eivissa.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalitats
|
|
</h3>
|
|
<ul class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300">
|
|
<li>Article editorial amb dades oficials del GEN-GOB (2025)</li>
|
|
<li>Visualització d'estadístiques clau: 17% d'estacions balears en mal estat davant 17/18 estacions d'Eivissa en situació desfavorable</li>
|
|
<li>Línia temporal narrativa sobre els efectes del decret de 2018</li>
|
|
<li>Disseny responsive optimitzat per a lectura mòbil i accessibilitat</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnològic
|
|
</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">Tipografia editorial</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Disseny responsive</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Dades obertes GEN-GOB</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultat
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Publicació editorial amb dades verificades que evidencia la divergència entre la narrativa oficial del Govern Balear i les dades reals sobre l'estat de la praderia de Posidonia a 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 lloc
|
|
<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 micrositet Cases Tancades amb titular "Quants pisos tancats hi ha a les Balears" i botons d'acció"
|
|
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ó
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Diagnòstic obert de l'habitatge a Balears que creua dades
|
|
oficials de l'INE, registres HUT del Govern i llistats
|
|
d'Airbnb per evidenciar quants pisos estan tancats o buits
|
|
davant la pressió del lloguer turístic.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalitats
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Creuament de dades INE, registres HUT del Govern i llistats geo-localitzats d'Airbnb</li>
|
|
<li>Mapa interactiu per municipi i per illa (Mallorca, Menorca, Eivissa, Formentera)</li>
|
|
<li>Dades de consum elèctric per secció censal (Cens 2021) com a proxy d'habitatge buit</li>
|
|
<li>Metodologia oberta amb codi font disponible a GitHub</li>
|
|
<li>Visualitzacions comparatives de places turístiques vs. població resident</li>
|
|
<li>Sense estimacions opaques: cada xifra enllaça a la seva font pública</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnològic
|
|
</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">Dades obertes INE</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Registres HUT del Govern</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Mapes interactius</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">
|
|
Resultat
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Anàlisi verificable que quantifica el desajust entre habitatge
|
|
buit (105.632 llars amb consum 0 segons INE 2021) i pressió
|
|
turística (102.597 places entre Airbnb i registres HUT). Fa
|
|
visible la crisi residencial balear amb dades públiques.
|
|
</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 lloc
|
|
<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>
|