diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..4041ae3
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2026-06-18 - Semantic Navigation Refactor
+**Learning:** Refactoring JavaScript-based navigation (`onclick` on `div` or `button`) to semantic `` tags significantly improves accessibility by providing native keyboard support and screen reader recognition, while also enabling standard browser features like "Open in new tab" and better history management.
+**Action:** Prioritize semantic `` tags for all primary navigation elements, and ensure focus-visible states are explicitly defined to match hover affordances.
diff --git a/index.html b/index.html
index 5cf0f32..c7a7598 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,46 @@
-
-
-
-
+
+
+
+
- Interactive Sketches – ISTEC
+ Interactive Sketches – ISTEC
-
-
-
-
-
-
-
-
-
-
Circle Matrix (Image → Particles)
-
- Transform an image into a dynamic field of circles.
- Each pixel becomes an interactive element that reacts to movement.
-
- Concept: Image as a system of autonomous particles.
-
-
-
-
The Weight of Words (Voice → Physics)
-
- Spoken words are converted into letters that move and fall under gravity.
- Language becomes physical and temporary.
-
- Concept: Speech transformed into matter.
-
-
-
Circle Matrix (Image → Particles)
+
+ Transform an image into a dynamic field of circles.
+ Each pixel becomes an interactive element that reacts to movement.
+
+ Concept: Image as a system of autonomous particles.
+
+ Open Sketch
+
+
+
+ The Weight of Words (Voice → Physics)
+
+ Spoken words are converted into letters that move and fall under gravity.
+ Language becomes physical and temporary.
+
+ Concept: Speech transformed into matter.
+
+ Open Sketch
+
+
+
+
+
+
diff --git a/proyecto1/proyecto1.html b/proyecto1/proyecto1.html
index c22da09..dcea080 100644
--- a/proyecto1/proyecto1.html
+++ b/proyecto1/proyecto1.html
@@ -1,40 +1,40 @@
-
-
-
-
+
+
+
+
- Circle Matrix Image
+ Circle Matrix Image
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+ ⬅ Back
+
+
+
+
+
+
\ No newline at end of file
diff --git a/proyecto1/style.css b/proyecto1/style.css
index b562aca..3eb7a90 100644
--- a/proyecto1/style.css
+++ b/proyecto1/style.css
@@ -108,14 +108,21 @@ input[type="file"] {
-webkit-backdrop-filter: blur(16px);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 100;
+ text-decoration: none;
+ outline: none;
}
-.back-btn:hover {
+.back-btn:hover,
+.back-btn:focus-visible {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
border-color: var(--accent-color);
}
+.back-btn:focus-visible {
+ box-shadow: 0 0 0 3px var(--accent-color);
+}
+
/* MOBILE */
@media (max-width: 600px) {
.ui-panel {
diff --git a/proyecto2/proyecto2.html b/proyecto2/proyecto2.html
index e984f76..93dad31 100644
--- a/proyecto2/proyecto2.html
+++ b/proyecto2/proyecto2.html
@@ -1,5 +1,5 @@
-
+
@@ -15,9 +15,9 @@
-
+
diff --git a/proyecto2/style.css b/proyecto2/style.css
index fd6dfbb..e4d6f09 100644
--- a/proyecto2/style.css
+++ b/proyecto2/style.css
@@ -143,14 +143,21 @@ input[type="range"]::-webkit-slider-thumb {
-webkit-backdrop-filter: blur(16px);
transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
z-index: 1000;
+ text-decoration: none;
+ outline: none;
}
-.back-btn:hover {
+.back-btn:hover,
+.back-btn:focus-visible {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-2px);
border-color: var(--accent-color);
}
+.back-btn:focus-visible {
+ box-shadow: 0 0 0 3px var(--accent-color);
+}
+
/* MOBILE */
@media (max-width: 600px) {
#gui {
diff --git a/script.js b/script.js
deleted file mode 100644
index 56bdf15..0000000
--- a/script.js
+++ /dev/null
@@ -1,16 +0,0 @@
-window.onload = function () {
- const routes = {
- "btn-p1": "proyecto1/proyecto1.html",
- "btn-p2": "proyecto2/proyecto2.html"
- };
-
- Object.keys(routes).forEach(id => {
- const element = document.getElementById(id);
-
- if (element) {
- element.onclick = () => {
- window.location.href = routes[id];
- };
- }
- });
-};
diff --git a/style.css b/style.css
index f563ad8..405f4fb 100644
--- a/style.css
+++ b/style.css
@@ -79,8 +79,11 @@ header p {
flex-direction: column;
justify-content: space-between;
position: relative;
- overflow: hidden;
+ overflow: visible;
animation: fadeInUp 0.8s ease-out both;
+ text-decoration: none;
+ color: inherit;
+ outline: none;
}
.card:nth-child(2) {
@@ -98,14 +101,20 @@ header p {
opacity: 0;
transition: opacity 0.4s ease;
z-index: 0;
+ border-radius: 24px;
}
-.card:hover {
+.card:hover,
+.card:focus-visible {
transform: translateY(-8px);
border-color: rgba(56, 189, 248, 0.4);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}
+.card:focus-visible {
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 0 3px var(--accent-color);
+}
+
.card > * {
position: relative;
z-index: 1;
@@ -147,7 +156,8 @@ header p {
border: 1px solid rgba(255, 255, 255, 0.1);
}
-.card:hover .btn {
+.card:hover .btn,
+.card:focus-visible .btn {
background: var(--accent-gradient);
border-color: transparent;
box-shadow: 0 8px 16px rgba(56, 189, 248, 0.2);