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
1558 lines
67 KiB
HTML
1558 lines
67 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>Itziar ZG | Sovereign & Sustainable Web Development</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="#"
|
|
>Home</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#manifiesto"
|
|
>Manifesto</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#laboratorio"
|
|
>Lab</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="huella.html"
|
|
>Footprint</a
|
|
>
|
|
<a
|
|
class="text-sm font-medium hover:text-primary transition-colors text-slate-700 dark:text-slate-300"
|
|
href="#contact"
|
|
>Contact</a
|
|
>
|
|
</nav>
|
|
<div class="flex items-center gap-3">
|
|
<!-- Language Switcher -->
|
|
<div
|
|
class="flex items-center gap-1.5 glass px-3 py-1.5 rounded-full text-xs font-bold"
|
|
>
|
|
<a
|
|
href="index.html"
|
|
class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors"
|
|
title="Español"
|
|
>ES</a
|
|
>
|
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
|
<a
|
|
href="index-ca.html"
|
|
class="text-slate-600 dark:text-slate-400 hover:text-primary transition-colors"
|
|
title="Català"
|
|
>CA</a
|
|
>
|
|
<span class="text-slate-300 dark:text-slate-700">|</span>
|
|
<span class="text-primary">EN</span>
|
|
</div>
|
|
<button
|
|
class="size-10 flex items-center justify-center rounded-full glass hover:bg-white/60 dark:hover:bg-white/10 transition-colors"
|
|
id="theme-toggle"
|
|
onclick="toggleTheme()"
|
|
aria-label="Toggle theme"
|
|
>
|
|
<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()"
|
|
>
|
|
Let's talk
|
|
</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>
|
|
Available for new projects
|
|
</div>
|
|
<h1
|
|
class="text-4xl md:text-6xl font-serif italic leading-[1.2] text-slate-900 dark:text-white mb-6 max-w-4xl font-light"
|
|
>
|
|
When you need to use technology to generate social impact
|
|
responsibly, talk
|
|
<span
|
|
class="text-primary not-italic font-display font-black tracking-tighter"
|
|
>with me</span
|
|
>.
|
|
</h1>
|
|
<p
|
|
class="text-lg md:text-xl text-slate-600 dark:text-slate-400 max-w-2xl mb-12 leading-relaxed"
|
|
>
|
|
Front-end developer specialized in lightweight, accessible, and
|
|
sovereign technology. Based in Ibiza.
|
|
</p>
|
|
<div class="flex flex-wrap justify-center gap-4">
|
|
<a
|
|
class="glass px-8 py-4 rounded-xl font-bold text-lg hover:bg-white/60 dark:hover:bg-white/10 transition-colors text-slate-800 dark:text-slate-200 flex items-center justify-center"
|
|
href="#laboratorio"
|
|
>
|
|
Explorar Laboratorio
|
|
</a>
|
|
</div>
|
|
<!-- Abstract Decorative Hero Image -->
|
|
<div
|
|
class="mt-20 w-full max-w-5xl aspect-[21/9] rounded-3xl overflow-hidden glass border-4 border-white/50 dark:border-white/20 relative"
|
|
>
|
|
<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>
|
|
|
|
<!-- Manifesto Section -->
|
|
<section class="py-24 bg-white/30 dark:bg-white/5" id="manifiesto">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2
|
|
class="text-4xl md:text-5xl font-serif italic mb-6 text-slate-900 dark:text-white"
|
|
>
|
|
Manifesto for Human & Sovereign Technology
|
|
</h2>
|
|
<div class="h-1 w-20 bg-primary mx-auto mb-10 rounded-full"></div>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-2 gap-12 mb-16">
|
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="material-symbols-outlined text-primary text-3xl"
|
|
>target</span
|
|
>
|
|
<h3
|
|
class="text-2xl font-serif italic font-bold dark:text-white"
|
|
>
|
|
Purpose
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Democratize and humanize technology, putting it at the service
|
|
of people and the planet, and not the other way around. I seek
|
|
to create tools that empower communities rather than
|
|
concentrate power.
|
|
</p>
|
|
</div>
|
|
<div class="p-8 glass rounded-3xl border border-white/20">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="material-symbols-outlined text-primary text-3xl"
|
|
>explore</span
|
|
>
|
|
<h3
|
|
class="text-2xl font-serif italic font-bold dark:text-white"
|
|
>
|
|
Mission
|
|
</h3>
|
|
</div>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Develop efficient, accessible, and digital-rights-respecting
|
|
solutions, demonstrating that another technology is possible
|
|
through local commitment and global impact.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mb-10">
|
|
<h3
|
|
class="text-2xl font-serif italic text-slate-800 dark:text-slate-200"
|
|
>
|
|
Guiding principles
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="grid md:grid-cols-3 gap-6">
|
|
<!-- Principle 1: Sustainability -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full justify-between"
|
|
>
|
|
<div>
|
|
<div
|
|
class="size-12 bg-emerald-500/10 rounded-xl flex items-center justify-center text-emerald-500 mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">eco</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Sustainability (Green Software)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Optimize resource consumption, minimizing data transfer and
|
|
the carbon footprint of the web applications I develop.
|
|
</p>
|
|
</div>
|
|
<a
|
|
href="https://badges.greensoftware.foundation/awards/b80fdaac-96a2-48e1-9170-7a84c0297295"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center gap-2 px-3.5 py-2.5 bg-emerald-500/10 border border-emerald-500/20 text-emerald-600 dark:text-emerald-400 rounded-xl text-xs font-bold hover:bg-emerald-500/20 transition-colors mt-2"
|
|
>
|
|
<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>
|
|
|
|
<!-- Principle 2: Free Software -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">folder_open</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Free & Open Source Software
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Support and contribute to open source as a digital public good
|
|
that fosters technological sovereignty and shared learning.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principle 3: Common Good -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">groups</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Common Good
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Prioritize projects and tools that generate a positive,
|
|
measurable social impact oriented toward solving real society
|
|
needs.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principle 4: Accessibility -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined"
|
|
>accessibility_new</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Accessibility (a11y)
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Design inclusive web interfaces so everyone can access
|
|
information without physical, cognitive, or technological
|
|
barriers.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principle 5: Privacy -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">shield</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">Privacy</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Respect personal data sovereignty, using ethical and
|
|
cookieless analytics, protecting users from corporate
|
|
tracking.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Principle 6: Responsible AI -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/30 transition-all duration-300 flex flex-col h-full"
|
|
>
|
|
<div
|
|
class="size-12 bg-primary/10 rounded-xl flex items-center justify-center text-primary mb-4"
|
|
>
|
|
<span class="material-symbols-outlined">psychology</span>
|
|
</div>
|
|
<h4 class="font-bold text-lg mb-2 dark:text-white">
|
|
Responsible AI
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Use AI models ethically and transparently, prioritizing local
|
|
execution and ensuring they support human agency.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Laboratorio Section -->
|
|
<section class="py-24" id="laboratorio">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
|
<h2
|
|
class="text-5xl font-serif italic mb-4 text-slate-900 dark:text-white"
|
|
>
|
|
My Laboratory
|
|
</h2>
|
|
<p class="text-slate-500 dark:text-slate-400">
|
|
A space for technical experimentation, real tools, and sovereign
|
|
digital infrastructure.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Tab Buttons Container -->
|
|
<div
|
|
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"
|
|
>
|
|
Infrastructure
|
|
</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"
|
|
>
|
|
Projects
|
|
</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: Infrastructure -->
|
|
<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">
|
|
What I use and why
|
|
</h3>
|
|
<p
|
|
class="text-slate-700 dark:text-slate-300 leading-relaxed"
|
|
>
|
|
Technological sovereignty begins at the foundations. I
|
|
have chosen to manage my own infrastructure to ensure
|
|
control over my data, project privacy, and reduce
|
|
dependency on cloud giants.
|
|
</p>
|
|
<div
|
|
class="p-6 bg-emerald-500/10 border border-emerald-500/20 rounded-2xl"
|
|
>
|
|
<div
|
|
class="flex gap-3 items-center text-emerald-600 dark:text-emerald-400 font-bold mb-2"
|
|
>
|
|
<span class="material-symbols-outlined">bolt</span>
|
|
<span>Green Commitment</span>
|
|
</div>
|
|
<p class="text-sm text-slate-600 dark:text-slate-400">
|
|
My infrastructure is hosted at Hetzner's data center in
|
|
Helsinki, powered by 100% carbon-free energy from wind
|
|
and hydro sources.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-3xl mb-3 block"
|
|
>dns</span
|
|
>
|
|
<h4 class="font-bold dark:text-white">
|
|
Hetzner Helsinki
|
|
</h4>
|
|
<p
|
|
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
|
|
>
|
|
Dedicated servers and VPS powered by green energy in
|
|
Finland.
|
|
</p>
|
|
</div>
|
|
<div class="p-6 glass rounded-2xl border border-white/10">
|
|
<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"
|
|
>
|
|
Self-hosted, open-source alternative to 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"
|
|
>
|
|
Lightweight self-hosted Git service for sovereign code
|
|
control.
|
|
</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"
|
|
>
|
|
Self-hosted workflow automation free from SaaS lock-in.
|
|
</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"
|
|
>
|
|
Ethical, privacy-respecting, cookieless web analytics.
|
|
</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"
|
|
>Active</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Green Software Measurement
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Empirical comparison of CPU and network consumption
|
|
between SSR (Astro/Next.js) architectures and optimized
|
|
static HTML pages.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<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"
|
|
>Active</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Local AI on Raspberry Pi
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Running small models like Llama 3.2 1B and Phi-3 with
|
|
Ollama locally for classification and tagging tasks with
|
|
zero API cost and guaranteed privacy.
|
|
</p>
|
|
</div>
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 hover:border-primary/20 transition-all"
|
|
>
|
|
<div class="flex items-center justify-between mb-4">
|
|
<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"
|
|
>Pending</span
|
|
>
|
|
</div>
|
|
<h4 class="font-bold dark:text-white mb-2">
|
|
Screen Reader Stress Test
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Manual audit of complex interfaces using NVDA and
|
|
VoiceOver screen readers to validate dynamic interactive
|
|
flows and live ARIA states.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
-->
|
|
|
|
<!-- Tab 3: Projects -->
|
|
<div id="tab-proyectos" class="tab-pane hidden">
|
|
<!-- Herramientas Reales -->
|
|
<div class="mb-12">
|
|
<h3 class="text-2xl font-serif italic mb-6 dark:text-white">
|
|
Real tools, not demos
|
|
</h3>
|
|
<div class="grid md:grid-cols-2 gap-8">
|
|
<!-- Eivissa Environmental Watch -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 960 960" fill="currentColor" class="icon text-primary text-2xl" aria-hidden="true"><path d="M724 222Q632 222 569.5 281.0Q507 340 502 416L444 416Q438 340 376.0 281.0Q314 222 222 222Q152 222 102 264Q79 222 79 174Q79 96 137.5 41.5Q196 -13 274 -13Q343 -13 396.0 31.0Q449 75 466 140Q483 75 536.0 31.0Q589 -13 658 -13Q736 -13 794.5 41.5Q853 96 853 174Q853 222 830 264Q780 222 724 222ZM502 496L502 510Q502 612 437.5 689.0Q373 766 274 780L274 940L354 940L354 780Q255 766 190.5 689.0Q126 612 126 510L126 496Q126 481 137.0 470.0Q148 459 163 459L465 459Q480 459 491.0 470.0Q502 481 502 496ZM502 822Q502 808 513.0 797.0Q524 786 538 786L554 786L554 612L626 612Q682 612 723.0 653.0Q764 694 764 750L764 838L848 838Q863 838 874.0 849.0Q885 860 885 875L885 891Q885 906 874.0 917.0Q863 928 848 928L764 928L764 940L706 940L706 928L538 928L538 786Q538 786 538.0 786.0Q538 786 538 786Q538 822 538.0 822.0Q538 822 538 822L502 822Z"/></svg>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Eivissa Environmental Watch
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Automated reader of news and BOIB with local
|
|
classification via Ollama. Detects and filters
|
|
environment-related content from Eivissa sources.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4 gap-2 flex-wrap">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operational</span
|
|
>
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-xs text-slate-400"
|
|
>Ollama • Navidrome</span
|
|
>
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-3')"
|
|
>
|
|
View details
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div><!-- Cases Tancades -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<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"
|
|
>
|
|
Open diagnostic of housing in the Balearic Islands:
|
|
cross-references official data from INE, Airbnb, and
|
|
Govern Balear HUT registries to show how many flats
|
|
sit empty against the pressure of tourist rentals.
|
|
</p>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-emerald-500 bg-emerald-500/10 px-2 py-1 rounded"
|
|
>Operational</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Next.js · Open data 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">
|
|
Navidrome Server
|
|
</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"
|
|
>Operational</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Docker • Hetzner</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- n8n + Ollama Pipeline -->
|
|
<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">
|
|
n8n + Ollama Pipeline
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Autonomous local pipeline that captures voice notes,
|
|
transcribes them, and processes them using Ollama with
|
|
open-source AI models without sending data to 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"
|
|
>Operational</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>n8n • Ollama • Whisper</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Balearic Data Visualization -->
|
|
<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">
|
|
Balearic Data Visualization
|
|
</h4>
|
|
</div>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Interactive dashboard and ecological visualization of
|
|
water and resource consumption in the Balearic
|
|
archipelago, built with lightweight web technologies.
|
|
</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"
|
|
>Migration pending (currently on Vercel)</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>HTML5 • JS • D3.js</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Open Source Contribution -->
|
|
<div
|
|
class="p-6 glass rounded-3xl border border-white/20 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<span
|
|
class="material-symbols-outlined text-primary text-2xl"
|
|
>volunteer_activism</span
|
|
>
|
|
<h4 class="font-bold text-lg dark:text-white">
|
|
Open Source Contribution
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center justify-between mt-4">
|
|
<span
|
|
class="text-[10px] uppercase font-bold tracking-wider text-slate-500 bg-slate-500/10 px-2 py-1 rounded"
|
|
>Not started</span
|
|
>
|
|
<span class="text-xs text-slate-400"
|
|
>Forgejo • GitHub</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Trabajo Anterior (Proyectos de IA previos) -->
|
|
<div
|
|
class="border-t border-slate-200 dark:border-slate-800 pt-8"
|
|
>
|
|
<details class="group cursor-pointer">
|
|
<summary
|
|
class="flex justify-between items-center text-lg font-serif italic text-slate-700 dark:text-slate-300 select-none list-none"
|
|
>
|
|
<span
|
|
class="flex items-center gap-2 hover:text-primary transition-colors"
|
|
>
|
|
<span
|
|
class="material-symbols-outlined transform group-open:rotate-90 transition-transform text-slate-400"
|
|
>chevron_right</span
|
|
>
|
|
Previous Work (Commercial & AI Projects)
|
|
</span>
|
|
</summary>
|
|
<div class="grid md:grid-cols-2 gap-8 mt-6">
|
|
<!-- Project 1: AI Knowledge Pipeline -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
AI Knowledge Pipeline
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Intelligent multimedia processing system. Receives
|
|
audio files and PDFs, transcribes, and structures
|
|
them using commercial AI APIs for semantic querying.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-1')"
|
|
>
|
|
View details & stack
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project 2: ChefGPT -->
|
|
<div
|
|
class="p-6 glass rounded-2xl border border-white/10 flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<h4
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
ChefGPT
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
|
|
>
|
|
Conversational Telegram bot connected to Supabase
|
|
and RAG that suggests recipes based on available
|
|
ingredients in real time.
|
|
</p>
|
|
</div>
|
|
<div class="flex gap-4 items-center">
|
|
<button
|
|
class="text-xs text-primary hover:underline font-bold"
|
|
onclick="openModal('project-2')"
|
|
>
|
|
View details & stack
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab 4: Writing -->
|
|
<div id="tab-writing" class="tab-pane hidden">
|
|
<div class="max-w-2xl mx-auto space-y-8">
|
|
<p
|
|
class="text-slate-600 dark:text-slate-400 italic text-center text-sm"
|
|
>
|
|
Reflexiones, aprendizajes técnicos y notas sobre soberanía
|
|
digital sin pretensiones de sentar cátedra.
|
|
</p>
|
|
|
|
<!-- Note 1: Green Software Practitioner -->
|
|
<article
|
|
class="p-6 glass rounded-2xl border border-white/10 space-y-4"
|
|
>
|
|
<div class="flex items-center justify-between">
|
|
<span
|
|
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
|
|
>July 20, 2026</span
|
|
>
|
|
<span
|
|
class="px-2.5 py-0.5 bg-emerald-500/10 text-emerald-500 text-xs font-bold rounded-full flex items-center gap-1"
|
|
>
|
|
<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 Key Takeaways
|
|
</h4>
|
|
|
|
<div
|
|
class="space-y-4 text-sm text-slate-700 dark:text-slate-300 leading-relaxed"
|
|
>
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-1"
|
|
>
|
|
Why did I get this certification?
|
|
</h5>
|
|
<p>
|
|
Because I want to build technology that takes its
|
|
environmental and social impact into account.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-2"
|
|
>
|
|
Five ideas I'm taking away:
|
|
</h5>
|
|
<ol class="list-decimal list-inside space-y-2.5 pl-1">
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>The best energy is the energy not
|
|
consumed.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Optimizing isn't just about making websites
|
|
faster. It also means using fewer resources.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Efficiency starts with design.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Choosing a simple architecture is usually better
|
|
than optimizing later.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Measure before improving.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
We cannot reduce what we do not measure.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Software also has a carbon footprint.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
Every data transfer, process, or storage has a
|
|
cost.
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<strong class="text-slate-900 dark:text-white"
|
|
>Green Software isn't just about consuming
|
|
less.</strong
|
|
>
|
|
<p
|
|
class="text-xs text-slate-600 dark:text-slate-400 mt-0.5 pl-5"
|
|
>
|
|
It also means designing products that help reduce
|
|
the environmental impact of people and
|
|
organizations.
|
|
</p>
|
|
</li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div>
|
|
<h5
|
|
class="font-bold text-slate-900 dark:text-white mb-1"
|
|
>
|
|
What's next?
|
|
</h5>
|
|
<p>
|
|
I am currently reading
|
|
<em>Technological Sovereignty</em> because I believe
|
|
sustainability doesn't depend solely on energy
|
|
consumption, but also on who controls the
|
|
infrastructure and software we use.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Fixed footer note -->
|
|
<div
|
|
class="pt-3 border-t border-slate-200 dark:border-slate-800 text-xs italic text-slate-500 dark:text-slate-400"
|
|
>
|
|
These are learning notes, not definitive guides. If you
|
|
spot something that can be improved, I'd love to hear from
|
|
you.
|
|
</div>
|
|
</article>
|
|
|
|
<article class="p-6 glass rounded-2xl border border-white/10">
|
|
<span
|
|
class="text-xs text-slate-400 dark:text-slate-500 font-mono"
|
|
>July 19, 2026</span
|
|
>
|
|
<h4
|
|
class="font-bold dark:text-white text-lg mt-1 mb-2 hover:text-primary transition-colors cursor-pointer"
|
|
>
|
|
Imperfection as an Ally: Why I Avoid Purism When Measuring
|
|
Web Carbon
|
|
</h4>
|
|
<p
|
|
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
|
|
>
|
|
Sometimes obsessing over maximum technical optimization
|
|
blocks publishing useful tools. In this post I explain my
|
|
infrastructure decisions and the pragmatic limits I
|
|
accept...
|
|
</p>
|
|
<a
|
|
href="huella.html"
|
|
class="inline-flex items-center text-xs text-primary hover:underline font-bold mt-4 gap-1"
|
|
>
|
|
Read full article in Footprint section
|
|
<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"
|
|
>
|
|
These are learning notes, not definitive guides. If you
|
|
spot something that can be improved, I'd love to hear from
|
|
you.
|
|
</div>
|
|
</article>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer / Contact -->
|
|
<footer class="mt-24 pb-12" id="contact">
|
|
<div class="mx-auto max-w-6xl px-6">
|
|
<div
|
|
class="glass rounded-[3rem] p-12 md:p-24 text-center relative overflow-hidden"
|
|
>
|
|
<div class="absolute top-0 right-0 p-8">
|
|
<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-en.html"
|
|
>Privacy</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Project Modals -->
|
|
<!-- Modal 1: AI Knowledge Pipeline -->
|
|
<div
|
|
id="project-1-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-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">
|
|
Description
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Intelligent multimedia content processing and ingestion system.
|
|
Receives audio files, PDFs, videos, and text. Uses AI models to
|
|
transcribe, summarize, and extract key information, storing
|
|
everything structured in Supabase for subsequent retrieval.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Key Features
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Multiple content type ingestion</li>
|
|
<li>Automatic AI transcription</li>
|
|
<li>Intelligent summarization and keyword extraction</li>
|
|
<li>Vector storage for semantic search</li>
|
|
<li>Automated workflow with n8n</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Tech Stack
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>n8n</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Supabase (PostgreSQL + pgvector)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>OpenAI API</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Whisper (transcription)</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Result
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Fully automated pipeline that reduces content processing time by
|
|
85% and enables intelligent information reuse through semantic
|
|
search.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
|
onclick="closeModal('project-1')"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 2: ChefGPT -->
|
|
<div
|
|
id="project-2-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-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">
|
|
Description
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Intelligent conversational agent on Telegram acting as a
|
|
personal culinary assistant. Queries your Supabase inventory,
|
|
accesses a specialized recipe RAG to avoid hallucinations, and
|
|
suggests customized dishes based on available ingredients.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Key Features
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Bi-directional integration with Supabase</li>
|
|
<li>Automatic database inventory querying</li>
|
|
<li>
|
|
RAG (Retrieval-Augmented Generation) with verified recipes
|
|
</li>
|
|
<li>Hallucination prevention via prompt fine-tuning</li>
|
|
<li>Customized recipe generation without hallucinations</li>
|
|
<li>Automatic inventory updating</li>
|
|
<li>Natural and contextual conversation</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Tech Stack
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Telegram Bot API</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>Supabase (PostgreSQL)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>RAG (Retrieval)</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>OpenAI GPT</span
|
|
>
|
|
<span
|
|
class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary"
|
|
>n8n</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Result
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Robust culinary assistant that eliminates the "what to cook"
|
|
decision without generating non-existent recipes. The RAG
|
|
ensures all suggestions originate from a corpus of verified
|
|
recipes, providing reliability and personalization without AI
|
|
hallucinations.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
|
onclick="closeModal('project-2')"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal 3: Eivissa Environmental Watch -->
|
|
<div
|
|
id="project-3-modal"
|
|
class="hidden fixed inset-0 bg-black/50 dark:bg-black/70 z-50 flex items-center justify-center p-4 backdrop-blur-sm"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="project-3-modal-title"
|
|
onclick="closeModal('project-3')"
|
|
>
|
|
<div
|
|
class="bg-background-light dark:bg-background-dark rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto glass border border-white/20"
|
|
onclick="event.stopPropagation()"
|
|
>
|
|
<div class="p-8 md:p-12">
|
|
<div class="flex justify-between items-start mb-6">
|
|
<h2
|
|
id="project-3-modal-title"
|
|
class="text-3xl font-serif italic text-slate-900 dark:text-white"
|
|
>
|
|
Eivissa Environmental Watch
|
|
</h2>
|
|
<button
|
|
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
|
|
onclick="closeModal('project-3')"
|
|
aria-label="Close dialog"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<img
|
|
src="images/eivissa-environmental-watch.webp"
|
|
alt="Eivissa Environmental Watch"
|
|
class="w-full rounded-2xl mb-6 object-cover h-64"
|
|
/>
|
|
|
|
<div class="space-y-4 mb-8">
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Description
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300 leading-relaxed">
|
|
Automated reader of local news and BOIB (Official Gazette of
|
|
the Balearic Islands) with local classification via Ollama. It
|
|
detects and filters environment-related content from Eivissa
|
|
sources, surfacing only what's relevant and linking back to the
|
|
original article or gazette entry.
|
|
</p>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Features
|
|
</h3>
|
|
<ul
|
|
class="list-disc list-inside space-y-2 text-slate-700 dark:text-slate-300"
|
|
>
|
|
<li>Periodic scraping of local news sources and BOIB</li>
|
|
<li>Local classification using open-source AI models (Ollama)</li>
|
|
<li>Automatic filtering by environmental topic</li>
|
|
<li>Lightweight UI to browse classifications</li>
|
|
<li>Direct links to BOIB entries and original news articles</li>
|
|
<li>Zero data sent to commercial APIs: full privacy</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-3">
|
|
Tech Stack
|
|
</h3>
|
|
<div class="flex flex-wrap gap-2">
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Ollama (local LLM)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Navidrome (server)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Hetzner (green infrastructure)</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Docker</span>
|
|
<span class="px-4 py-2 bg-primary/10 rounded-full text-sm font-bold text-primary">Static lightweight HTML</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 class="text-xl font-bold text-slate-900 dark:text-white mb-2">
|
|
Outcome
|
|
</h3>
|
|
<p class="text-slate-700 dark:text-slate-300">
|
|
Live production site, publishing daily environment-related
|
|
content curated by a local AI. The fully self-hosted
|
|
architecture guarantees data sovereignty and zero dependency on
|
|
external cloud services.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
class="w-full bg-primary text-white py-3 rounded-xl font-bold hover:bg-primary/90 transition-colors"
|
|
onclick="closeModal('project-3')"
|
|
>
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Scripts -->
|
|
<script src="js/main.js"></script>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|