diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..f06e0f6
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-05-24 - Semantic Navigation & Focus Visibility
+**Learning:** Converting non-semantic interactive containers (divs with onclick) to semantic tags requires specific CSS adjustments to maintain visual fidelity: `text-decoration: none` to prevent default underlines, and `overflow: visible` to ensure custom focus indicators (like box-shadow rings) are not clipped by glassmorphism containers.
+**Action:** When refactoring to semantic links, explicitly audit overflow properties and link decorations to ensure accessibility enhancements don't break the intended aesthetic.
diff --git a/index.html b/index.html
index 5cf0f32..eb2405f 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,45 @@
-
-
-
-
+
+
+
+
- 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..0ab80f6 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..f6c02fc 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 2px var(--accent-color);
+}
+
/* MOBILE */
@media (max-width: 600px) {
.ui-panel {
diff --git a/proyecto2/proyecto2.html b/proyecto2/proyecto2.html
index e984f76..2832083 100644
--- a/proyecto2/proyecto2.html
+++ b/proyecto2/proyecto2.html
@@ -15,9 +15,9 @@
-
+
diff --git a/proyecto2/style.css b/proyecto2/style.css
index fd6dfbb..d87fa7c 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 2px 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..8aab5cf 100644
--- a/style.css
+++ b/style.css
@@ -79,8 +79,10 @@ 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;
+ outline: none;
}
.card:nth-child(2) {
@@ -98,14 +100,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 0 0 2px var(--accent-color), 0 20px 40px rgba(0, 0, 0, 0.3);
+}
+
.card > * {
position: relative;
z-index: 1;
@@ -145,9 +153,12 @@ header p {
transition: all 0.3s ease;
width: 100%;
border: 1px solid rgba(255, 255, 255, 0.1);
+ display: block;
+ text-align: center;
}
-.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);