itziarZG
29d215495d
- Remove fonts/material-symbols-outlined.woff2 (4MB external font eliminated) - Inline 38 Material Symbols as SVG paths (extracted to icon-paths.json) - Convert 5 Google-hosted images to self-hosted WebP - Add favicon.svg (adaptive auto_awesome icon, light + dark) - Add scrollbar-gutter: stable + body.modal-open to prevent modal jumps - Clean up preload links to fonts no longer used Net reduction: ~3.9MB external dependencies, zero CLS on icon swap
1592 lines
69 KiB
HTML
1592 lines
69 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 sobirà i sostenible</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: "#8c2bee",
|
|
"background-light": "#f7f6f8",
|
|
"background-dark": "#191022",
|
|
},
|
|
fontFamily: {
|
|
display: ["Space Grotesk", "sans-serif"],
|
|
serif: ["Instrument Serif", "serif"],
|
|
},
|
|
borderRadius: {
|
|
DEFAULT: "0.5rem",
|
|
lg: "1rem",
|
|
xl: "1.5rem",
|
|
full: "9999px",
|
|
},
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<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="preload"
|
|
href="fonts/material-symbols-outlined.woff2"
|
|
as="font"
|
|
type="font/woff2"
|
|
crossorigin
|
|
/>
|
|
<link
|
|
rel="preload"
|
|
href="fonts/space/space-grotesk-v22-latin-regular.woff2"
|
|
as="font"
|
|
type="font/woff2"
|
|
crossorigin
|
|
/>
|
|
<link rel="stylesheet" href="css/styles.css?v=1.1" />
|
|
<script
|
|
defer
|
|
src="https://stats.itziarzameza.dev/script.js"
|
|
data-website-id="8d8d648f-4a0c-4315-b287-5983ffedc8c4"
|
|
data-domains="www.itziarzameza.dev"
|
|
></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"
|
|
>
|
|
<div class="relative min-h-screen overflow-hidden iridescent-bg">
|
|
<!-- Floating Fluid Shapes -->
|
|
<div
|
|
class="absolute -top-24 -left-24 w-96 h-96 bg-primary/10 fluid-shape blur-3xl opacity-50"
|
|
></div>
|
|
<div
|
|
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
|
|
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="#"
|
|
>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"
|
|
>
|
|
<span class="material-symbols-outlined text-xl dark:hidden">
|
|
dark_mode
|
|
</span>
|
|
<span
|
|
class="material-symbols-outlined text-xl hidden dark:block text-yellow-200"
|
|
>
|
|
light_mode
|
|
</span>
|
|
</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
|
|
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"
|
|
>
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center"
|
|
data-alt="Abstract soft purple and pink liquid gradients flowing"
|
|
style="
|
|
background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuD7jcnN_wxvIYoIUzW4qcK4CoDUZZZNjygy4of13sQuWzPdhmFyLBcD-uo94oXDghcnd1bXI9F8yApHPlBJmTsrsoHrDT7H4NcX0Qv3QSCb8qwZgJV6iPJuI1LjVxfxuJBeaAy9X3nHgeacqLeAJkbb0DQg9-LxVDUdgZUABcx65AW1k59FXjFiuf2K2BAop_ki74vQZC0gsddWQbM6TmU--QLahcLkY54YobaPZeL_Fgh0veydf7Wh7pKAT4s6RFcMDKH0w4Ova98");
|
|
"
|
|
></div>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-t from-background-light/80 dark:from-background-dark/80 to-transparent"
|
|
></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">
|
|
<span class="material-symbols-outlined text-primary text-3xl"
|
|
>target</span
|
|
>
|
|
<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">
|
|
<span class="material-symbols-outlined text-primary text-3xl"
|
|
>explore</span
|
|
>
|
|
<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"
|
|
>
|
|
<span class="material-symbols-outlined">eco</span>
|
|
</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"
|
|
>
|
|
<span class="material-symbols-outlined text-base"
|
|
>verified</span
|
|
>
|
|
<span>Green Software Practitioner</span>
|
|
<span class="material-symbols-outlined text-xs ml-auto"
|
|
>open_in_new</span
|
|
>
|
|
</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"
|
|
>
|
|
<span class="material-symbols-outlined">folder_open</span>
|
|
</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"
|
|
>
|
|
<span class="material-symbols-outlined">groups</span>
|
|
</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"
|
|
>
|
|
<span class="material-symbols-outlined"
|
|
>accessibility_new</span
|
|
>
|
|
</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"
|
|
>
|
|
<span class="material-symbols-outlined">shield</span>
|
|
</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"
|
|
>
|
|
<span class="material-symbols-outlined">psychology</span>
|
|
</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
|
|
class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-800 pb-4 mb-8"
|
|
>
|
|
<button
|
|
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>
|
|
<!-- Experiments tab: en standby, código del panel preservado más abajo en comentarios -->
|
|
|
|
<!--
|
|
|
|
<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"
|
|
data-tab="experimentos"
|
|
>
|
|
Experiments
|
|
</button>
|
|
|
|
-->
|
|
<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"
|
|
data-tab="proyectos"
|
|
>
|
|
Projectes
|
|
</button>
|
|
<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"
|
|
data-tab="writing"
|
|
>
|
|
Notes
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tab Contents -->
|
|
<div id="tab-contents">
|
|
<!-- Tab 1: Infraestructura -->
|
|
<div id="tab-infraestructura" class="tab-pane block">
|
|
<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"
|
|
>
|
|
<span class="material-symbols-outlined">bolt</span>
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>dns</span
|
|
>
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>deployed_code</span
|
|
>
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>git_gesture</span
|
|
>
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>hub</span
|
|
>
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>monitoring</span
|
|
>
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>screen_record</span
|
|
>
|
|
<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>
|
|
|
|
<!-- Tab 2: Experimentos (en standby - código del panel preservado en comentarios) -->
|
|
<!--
|
|
<div id="tab-experimentos" class="tab-pane hidden">
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl"
|
|
>nest_eco_leaf</span
|
|
>
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl"
|
|
>memory</span
|
|
>
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl"
|
|
>visibility</span
|
|
>
|
|
<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">
|
|
<!-- 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">
|
|
<!-- 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 • Navidrome</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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>query_stats</span
|
|
>
|
|
<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">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operatiu</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Next.js · Dades obertes INE/Govern Balear</span
|
|
>
|
|
</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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>music_note</span
|
|
>
|
|
<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-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operatiu</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Docker • Hetzner</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Flux n8n + Ollama -->
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>route</span
|
|
>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Flux n8n + Ollama
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Pipeline autònom en local que intercepta notes de veu,
|
|
les transcriu i les processa utilitzant Ollama amb
|
|
models d'IA de codi obert sense enviar dades a OpenAI.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operatiu</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>n8n • Ollama • Whisper</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Visualització Dades Balears -->
|
|
<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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>query_stats</span
|
|
>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Visualització Dades Balears
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Tauler interactiu i visualització ecològica sobre el
|
|
consum d'aigua i recursos a l'arxipèlag balear,
|
|
dissenyat amb tecnologies web lleugeres.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-amber-500 bg-amber-500/10 px-2 py-1 rounded"
|
|
>Migració pendent (actualment a Vercel)</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>HTML5 • JS • D3.js</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">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>volunteer_activism</span
|
|
>
|
|
<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>
|
|
</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"
|
|
>
|
|
<span
|
|
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
|
|
>chevron_right</span
|
|
>
|
|
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">
|
|
<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"
|
|
>
|
|
<span class="material-symbols-outlined text-xs"
|
|
>verified</span
|
|
>
|
|
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
|
|
<span class="material-symbols-outlined text-xs"
|
|
>arrow_right_alt</span
|
|
>
|
|
</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">
|
|
<span
|
|
class="material-symbols-outlined text-primary/20 dark:text-primary/10 text-9xl"
|
|
>alternate_email</span
|
|
>
|
|
</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"
|
|
>
|
|
<span class="material-symbols-outlined">mail</span>
|
|
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"
|
|
title="LinkedIn"
|
|
>
|
|
<span class="material-symbols-outlined text-2xl">link</span>
|
|
</a>
|
|
<!-- <a
|
|
class="size-16 glass rounded-full flex items-center justify-center hover:text-primary transition-colors"
|
|
href="https://github.com/itziarZG"
|
|
title="GitHub"
|
|
>
|
|
<span class="material-symbols-outlined text-2xl"
|
|
>share</span
|
|
>
|
|
</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-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="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
|
|
alt="AI Knowledge Pipeline"
|
|
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-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="https://lh3.googleusercontent.com/aida-public/AB6AXuDfqsuP4x2xr1tNEyjnxJ4D517oj2e5uvU9_41GuMiygljVgzuSLFs-teeZfNDCD7jP8ShaU_Vgc_L0qzjAtd5I-8-oVtoxi8ih81LLt3l5IM6-RvPCVAuoIx9jK7q9SvAcvet8d5Fg9YQCndNdiKbWHXgyEkD9ARj0x7EAdyzsGThzWbcVHof2YHZjw3aXpVV7sq0YrQqsQ07WON23OSALCIHo6W80FBSEUydUs6yvDyEoT-XJlLHO_xKX4xS8J4x38c1nhEDIuiw"
|
|
alt="ChefGPT"
|
|
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>
|
|
|
|
<button
|
|
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
|
onclick="closeModal('project-3')"
|
|
>
|
|
Tancar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/main.js"></script>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|