1522 lines
66 KiB
HTML
1522 lines
66 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" />
|
|
</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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 2: Experiments -->
|
|
<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">
|
|
<!-- 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>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Instància personal autohospedada de música a Hetzner
|
|
per recuperar la sobirania sobre els meus arxius
|
|
d'àudio i evitar algorismes corporatius d'streaming.
|
|
</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"
|
|
>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>
|
|
|
|
<!-- 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>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Col·laboració activa i correcció d'errors en eines i
|
|
frameworks de codi obert que utilitzem en el dia a
|
|
dia.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-primary bg-primary/10 px-2 py-1 rounded"
|
|
>Constant</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Forgejo • GitHub</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"
|
|
>En Desenvolupament</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>HTML5 • JS • D3.js</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"
|
|
>
|
|
<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>
|
|
|
|
<article class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
|
|
>2 de Junio, 2026</span
|
|
>
|
|
<h4
|
|
class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer"
|
|
>
|
|
Migrando mi código: De GitHub a Forgejo en mi propio VPS
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Primeros pasos configurando Forgejo mediante Docker.
|
|
Detalle de consumo de memoria RAM (spoiler: consume menos
|
|
de 100MB en repositorios medianos) y facilidad de uso...
|
|
</p>
|
|
<span class="text-xs text-slate-400 mt-4 block"
|
|
>Pròximament</span
|
|
>
|
|
<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
|
|
>
|
|
</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: Content Processing Automation -->
|
|
<!-- <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"
|
|
>
|
|
Content Processing Automation
|
|
</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="https://lh3.googleusercontent.com/aida-public/AB6AXuBq9zdk9-QnIcGhOgx3FS680JDa-ouDfdurPEV9qAqxu8XVNEqDFe6lg9rGCeof4iPKxENJpJZWCzvn1JauqOrn67WDSYwxD2rHpU_aBWw-2YvoFbuoa4CGp8_1ZGk9LtnLIenHtt1GFoN5fGyTSf3leg6-rbmrueHVrPqu_7M2cp2u0VRFlWSbe8k9kCmk5p6kq4ypMsY-m7QX5SUbvR3JXfWvFKi6mPWF__c2_NPGKAlBwNcfm5MKcbUR4y0XP5YfzIu6yvKP8YA"
|
|
alt="Content Processing Automation"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Descripción
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Pipeline integral de procesamiento de contenido multimedia que
|
|
automatiza desde la ingesta hasta la distribución. Transforma
|
|
múltiples formatos (audio, vídeo, PDFs, texto) en contenido
|
|
estructurado y lista para publicación en redes sociales.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Funcionalidades
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Procesamiento de múltiples formatos multimedia</li>
|
|
<li>Transcripción y análisis automático</li>
|
|
<li>Generación de títulos, descripciones y hashtags con IA</li>
|
|
<li>Redimensionamiento y optimización de imágenes</li>
|
|
<li>Publicación automática en redes sociales</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Stack Tecnológico
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Workflow Automation</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>FFmpeg (vídeo)</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"
|
|
>Social Media APIs</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Resultado
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Automatización completa de la cadena de producción de contenido,
|
|
reduciendo tiempo manual en un 90% y garantizando consistencia
|
|
en la calidad y el formato de publicaciones.
|
|
</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')"
|
|
>
|
|
Cerrar
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|