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

Merge branch 'develop' into copilot/sub-pr-5-again

Browse Source
This commit is contained in:
Itziar Zameza García
2026-03-22 20:16:06 +01:00
parent cf8b3a9efd cdc160ec9e
commit dd5515c040
2 changed files with 50 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+25 -10
View File
@@ -4,15 +4,6 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" /> <meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Itziar ZG | AI &amp; Automation Developer</title> <title>Itziar ZG | AI &amp; Automation Developer</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Instrument+Serif:ital@0;1&amp;display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet"
/>
<script id="tailwind-config"> <script id="tailwind-config">
tailwind.config = { tailwind.config = {
darkMode: "class", darkMode: "class",
@@ -37,6 +28,15 @@
}, },
}; };
</script> </script>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&amp;family=Instrument+Serif:ital@0;1&amp;display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/styles.css" />
</head> </head>
<body <body
@@ -281,7 +281,7 @@
<div class="aspect-video relative overflow-hidden"> <div class="aspect-video relative overflow-hidden">
<img <img
class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700" class="object-cover w-full h-full group-hover:scale-110 transition-transform duration-700"
data-alt="Visualization of an AI neural network and data pipeline" alt="Visualization of an AI neural network and data pipeline"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA8RWItHd5HSWHY1TZGhviEiYL0nH49aw4shoKawpqU6-sXM8PS5yl17suDdKzrYINIOcJ6UMBjTl-c66Ul8JUBHK9PNN0cXxr_1selPrAOi0plM8CipkLw1D-0QUKa05GZg7AzHFCCYWLdicp0_M6TMYPWiEu7cdxASk_G9GTfhUXkNQKjFA0qrxqtqdDAzG-gpLV-XOs7L3hELHIUam_iE_0w4i5DNlONlsACvbS5kTTDB7FOFb7SAMKe0VH_9c5J3F0eQyyjokw"
/> />
<div <div
@@ -612,6 +612,9 @@
<div <div
id="project-1-modal" 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" 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')" onclick="closeModal('project-1')"
> >
<div <div
@@ -621,6 +624,7 @@
<div class="p-8 md:p-12"> <div class="p-8 md:p-12">
<div class="flex justify-between items-start mb-6"> <div class="flex justify-between items-start mb-6">
<h2 <h2
id="project-1-modal-title"
class="text-3xl font-serif italic text-slate-900 dark:text-white" class="text-3xl font-serif italic text-slate-900 dark:text-white"
> >
AI Knowledge Pipeline AI Knowledge Pipeline
@@ -628,6 +632,7 @@
<button <button
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors" class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
onclick="closeModal('project-1')" onclick="closeModal('project-1')"
aria-label="Close dialog"
> >
✕ ✕
</button> </button>
@@ -718,6 +723,9 @@
<div <div
id="project-2-modal" 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" 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')" onclick="closeModal('project-2')"
> >
<div <div
@@ -727,6 +735,7 @@
<div class="p-8 md:p-12"> <div class="p-8 md:p-12">
<div class="flex justify-between items-start mb-6"> <div class="flex justify-between items-start mb-6">
<h2 <h2
id="project-2-modal-title"
class="text-3xl font-serif italic text-slate-900 dark:text-white" class="text-3xl font-serif italic text-slate-900 dark:text-white"
> >
ChefGPT ChefGPT
@@ -734,6 +743,7 @@
<button <button
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors" class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
onclick="closeModal('project-2')" onclick="closeModal('project-2')"
aria-label="Close dialog"
> >
✕ ✕
</button> </button>
@@ -832,6 +842,9 @@
<div <div
id="project-3-modal" 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" 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')" onclick="closeModal('project-3')"
> >
<div <div
@@ -841,6 +854,7 @@
<div class="p-8 md:p-12"> <div class="p-8 md:p-12">
<div class="flex justify-between items-start mb-6"> <div class="flex justify-between items-start mb-6">
<h2 <h2
id="project-3-modal-title"
class="text-3xl font-serif italic text-slate-900 dark:text-white" class="text-3xl font-serif italic text-slate-900 dark:text-white"
> >
Content Processing Automation Content Processing Automation
@@ -848,6 +862,7 @@
<button <button
class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors" class="text-2xl text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors"
onclick="closeModal('project-3')" onclick="closeModal('project-3')"
aria-label="Close dialog"
> >
✕ ✕
</button> </button>
js/main.js
+25 -2
View File
@@ -58,20 +58,37 @@ function scrollToContact() {
// Modal Management // Modal Management
// ============================================ // ============================================
/** Element that had focus before a modal was opened */
let _modalPreviousFocus = null;
/** /**
* Open modal by project ID * Open modal by project ID.
* Saves the currently focused element and moves focus into the modal.
* @param {string} projectId - The project identifier * @param {string} projectId - The project identifier
*/ */
function openModal(projectId) { function openModal(projectId) {
const modal = document.getElementById(projectId + "-modal"); const modal = document.getElementById(projectId + "-modal");
if (modal) { if (modal) {
_modalPreviousFocus = document.activeElement;
modal.classList.remove("hidden"); modal.classList.remove("hidden");
document.body.style.overflow = "hidden"; document.body.style.overflow = "hidden";
// Move focus to the first focusable element inside the modal
const focusable = modal.querySelectorAll(
'button, [href], input, select, textarea, [contenteditable="true"], [tabindex]:not([tabindex="-1"])'
);
if (focusable.length > 0) {
focusable[0].focus();
} else {
modal.setAttribute("tabindex", "-1");
modal.focus();
}
} }
} }
/** /**
* Close modal by project ID * Close modal by project ID.
* Restores focus to the element that was focused before the modal opened.
* @param {string} projectId - The project identifier * @param {string} projectId - The project identifier
*/ */
function closeModal(projectId) { function closeModal(projectId) {
@@ -79,6 +96,12 @@ function closeModal(projectId) {
if (modal) { if (modal) {
modal.classList.add("hidden"); modal.classList.add("hidden");
document.body.style.overflow = "auto"; document.body.style.overflow = "auto";
// Return focus to the element that triggered the modal
if (_modalPreviousFocus) {
_modalPreviousFocus.focus();
_modalPreviousFocus = null;
}
} }
} }