diff --git a/.Jules/palette.md b/.Jules/palette.md
new file mode 100644
index 0000000..1066b7c
--- /dev/null
+++ b/.Jules/palette.md
@@ -0,0 +1,3 @@
+## 2024-06-25 - [Semantic Navigation & High-Contrast Focus]
+**Learning:** For interactive card components in dark-themed glassmorphism designs, using semantic `` tags instead of `div` with `onclick` improves both native accessibility and SEO. Focus states should mirror hover transforms (like `translateY`) to provide consistent feedback across input methods.
+**Action:** Always prefer `` tags for large clickable areas and ensure `:focus-visible` triggers the same visual affordances as `:hover`.
diff --git a/index.html b/index.html
index 5cf0f32..ac9997e 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..9d6e601 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..3de2b75 100644
--- a/proyecto1/style.css
+++ b/proyecto1/style.css
@@ -108,6 +108,8 @@ 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;
+ display: inline-block;
}
.back-btn:hover {
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..ded5b41 100644
--- a/proyecto2/style.css
+++ b/proyecto2/style.css
@@ -143,6 +143,8 @@ 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;
+ display: inline-block;
}
.back-btn:hover {
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..aa10cad 100644
--- a/style.css
+++ b/style.css
@@ -81,6 +81,8 @@ header p {
position: relative;
overflow: hidden;
animation: fadeInUp 0.8s ease-out both;
+ text-decoration: none;
+ outline: none;
}
.card:nth-child(2) {
@@ -100,12 +102,17 @@ header p {
z-index: 0;
}
-.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 +154,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);