diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..6ae2833 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2026-07-05 - [Semantic Link Refactoring and Focus Indicators] +**Learning:** When refactoring interactive `div` containers to semantic `` links, nested interactive elements (like ` - - -
-

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. -

- -
- - - - - - + + + + +
+

Interactive Sketches

+

Examples of creative coding with p5.js – 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. +

+ 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 - - - - - -
-

Circle Matrix

-

- Transform an image into a dynamic field of particles. - The image dissolves into circles that react to your presence. -

- -
- - - - - - -
-
- - - - - - - + + + + + +
+

Circle Matrix

+

+ Transform an image into a dynamic field of particles. + The image dissolves into circles that react to your presence. +

+ +
+ + + + + + +
+
+ + + ⬅ Back + + + + + + \ No newline at end of file diff --git a/proyecto1/style.css b/proyecto1/style.css index b562aca..db1a2e0 100644 --- a/proyecto1/style.css +++ b/proyecto1/style.css @@ -108,12 +108,16 @@ 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; } -.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); + outline: none; + box-shadow: 0 0 0 2px var(--accent-color); } /* MOBILE */ diff --git a/proyecto2/proyecto2.html b/proyecto2/proyecto2.html index e984f76..507683c 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..c21d018 100644 --- a/proyecto2/style.css +++ b/proyecto2/style.css @@ -143,12 +143,16 @@ 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; } -.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); + outline: none; + box-shadow: 0 0 0 2px var(--accent-color); } /* MOBILE */ diff --git a/script.js b/script.js index 56bdf15..fb9ffe1 100644 --- a/script.js +++ b/script.js @@ -1,16 +1,5 @@ -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]; - }; - } - }); -}; +// Navigation is now handled by semantic tags in index.html. +// This script is kept for potential future interactive enhancements. +window.onload = function () { + console.log("Interactive Sketches loaded."); +}; diff --git a/style.css b/style.css index f563ad8..7ab1576 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) { @@ -100,10 +102,11 @@ 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); + box-shadow: 0 0 0 2px var(--accent-color), 0 20px 40px rgba(0, 0, 0, 0.3); } .card > * { @@ -133,6 +136,8 @@ header p { /* BIG BUTTON */ .btn { + display: block; + text-align: center; margin-top: auto; padding: 16px 24px; font-size: 1rem; @@ -147,7 +152,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);