itziarZG/MyWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: update email

Browse Source
This commit is contained in:
itziarZG
2026-07-21 18:46:03 +02:00
parent 4793bf76a9
commit 335edbf316
3 changed files with 661 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index-en.html
+247 -73
View File
@@ -29,11 +29,35 @@
},
};
</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="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
@@ -95,10 +119,22 @@
</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>
<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>
<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>
@@ -146,12 +182,18 @@
<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>.
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.
Front-end developer specialized in lightweight, accessible, and
sovereign technology. Based in Ibiza.
</p>
<div class="flex flex-wrap justify-center gap-4">
<a
@@ -204,8 +246,9 @@
</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.
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">
@@ -252,8 +295,8 @@
<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.
Optimize resource consumption, minimizing data transfer and
the carbon footprint of the web applications I develop.
</p>
</div>
<a
@@ -262,9 +305,13 @@
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 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>
<span class="material-symbols-outlined text-xs ml-auto"
>open_in_new</span
>
</a>
</div>
@@ -283,8 +330,8 @@
<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.
Support and contribute to open source as a digital public good
that fosters technological sovereignty and shared learning.
</p>
</div>
@@ -304,7 +351,8 @@
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.
measurable social impact oriented toward solving real society
needs.
</p>
</div>
@@ -326,7 +374,8 @@
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.
information without physical, cognitive, or technological
barriers.
</p>
</div>
@@ -339,14 +388,13 @@
>
<span class="material-symbols-outlined">shield</span>
</div>
<h4 class="font-bold text-lg mb-2 dark:text-white">
Privacy
</h4>
<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.
cookieless analytics, protecting users from corporate
tracking.
</p>
</div>
@@ -383,7 +431,8 @@
My Laboratory
</h2>
<p class="text-slate-500 dark:text-slate-400">
A space for technical experimentation, real tools, and sovereign digital infrastructure.
A space for technical experimentation, real tools, and sovereign
digital infrastructure.
</p>
</div>
@@ -429,7 +478,10 @@
<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.
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"
@@ -441,7 +493,9 @@
<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.
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>
@@ -457,7 +511,8 @@
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
>
Dedicated servers and VPS powered by green energy in Finland.
Dedicated servers and VPS powered by green energy in
Finland.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -481,7 +536,8 @@
<p
class="text-xs text-slate-500 dark:text-slate-400 mt-1"
>
Lightweight self-hosted Git service for sovereign code control.
Lightweight self-hosted Git service for sovereign code
control.
</p>
</div>
<div class="p-6 glass rounded-2xl border border-white/10">
@@ -534,7 +590,9 @@
<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.
Empirical comparison of CPU and network consumption
between SSR (Astro/Next.js) architectures and optimized
static HTML pages.
</p>
</div>
<div
@@ -556,7 +614,9 @@
<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.
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
@@ -578,7 +638,9 @@
<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.
Manual audit of complex interfaces using NVDA and
VoiceOver screen readers to validate dynamic interactive
flows and live ARIA states.
</p>
</div>
</div>
@@ -609,7 +671,9 @@
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Personal self-hosted music instance on Hetzner to regain sovereignty over my audio files and avoid corporate streaming algorithms.
Personal self-hosted music instance on Hetzner to
regain sovereignty over my audio files and avoid
corporate streaming algorithms.
</p>
</div>
<div class="flex items-center justify-between mt-4">
@@ -640,7 +704,9 @@
<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.
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">
@@ -671,7 +737,8 @@
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mb-4"
>
Active collaboration and bug fixing in open-source tools and frameworks used daily.
Active collaboration and bug fixing in open-source
tools and frameworks used daily.
</p>
</div>
<div class="flex items-center justify-between mt-4">
@@ -702,7 +769,9 @@
<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.
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">
@@ -750,7 +819,9 @@
<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.
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">
@@ -776,7 +847,9 @@
<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.
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">
@@ -804,11 +877,20 @@
</p>
<!-- Note 1: Green Software Practitioner -->
<article class="p-6 glass rounded-2xl border border-white/10 space-y-4">
<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>
<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>
@@ -817,47 +899,111 @@
Green Software Practitioner — 5 Key Takeaways
</h4>
<div class="space-y-4 text-sm text-slate-700 dark:text-slate-300 leading-relaxed">
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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
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>
@@ -869,12 +1015,16 @@
<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
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...
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"
@@ -885,8 +1035,12 @@
>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
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>
@@ -903,13 +1057,19 @@
<p
class="text-sm text-slate-600 dark:text-slate-400 leading-relaxed"
>
First steps configuring Forgejo via Docker. Detail of RAM memory consumption (spoiler: uses less than 100MB on medium repositories) and ease of use...
First steps configuring Forgejo via Docker. Detail of RAM
memory consumption (spoiler: uses less than 100MB on
medium repositories) and ease of use...
</p>
<span class="text-xs text-slate-400 mt-4 block"
>Coming soon</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">
These are learning notes, not definitive guides. If you spot something that can be improved, I'd love to hear from you.
<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>
@@ -947,7 +1107,7 @@
>
<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@gmail.com"
href="mailto:itziar.zameza.dev@gmail.com"
>
<span class="material-symbols-outlined">mail</span>
Enviar un Email
@@ -1032,7 +1192,10 @@
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.
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>
@@ -1080,7 +1243,9 @@
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.
Fully automated pipeline that reduces content processing time by
85% and enables intelligent information reuse through semantic
search.
</p>
</div>
</div>
@@ -1137,7 +1302,10 @@
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.
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>
@@ -1150,7 +1318,9 @@
>
<li>Bi-directional integration with Supabase</li>
<li>Automatic database inventory querying</li>
<li>RAG (Retrieval-Augmented Generation) with verified recipes</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>
@@ -1191,7 +1361,11 @@
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.
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>