diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 5cf0f32..b31abec 100644 --- a/index.html +++ b/index.html @@ -1,47 +1,49 @@ - - - - + + + + - Interactive Sketches – ISTEC + Interactive Sketches – ISTEC - - - - -
-

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

- -
- -
-

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

+ + + + +

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

+ + + +
+ + + + diff --git a/proyecto1/proyecto1.html b/proyecto1/proyecto1.html index c22da09..539700b 100644 --- a/proyecto1/proyecto1.html +++ b/proyecto1/proyecto1.html @@ -29,9 +29,9 @@

Circle Matrix

- + diff --git a/proyecto2/proyecto2.html b/proyecto2/proyecto2.html index e984f76..7bd129e 100644 --- a/proyecto2/proyecto2.html +++ b/proyecto2/proyecto2.html @@ -1,5 +1,5 @@ - + @@ -15,9 +15,9 @@ - +
diff --git a/script.js b/script.js index 56bdf15..0a4d87e 100644 --- a/script.js +++ b/script.js @@ -1,16 +1,3 @@ -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]; - }; - } - }); -}; +window.onload = function () { + // Redundant click handlers removed as cards are now semantic tags. +}; diff --git a/style.css b/style.css index f563ad8..97a0144 100644 --- a/style.css +++ b/style.css @@ -26,6 +26,24 @@ body { line-height: 1.6; } +/* SKIP LINK */ +.skip-link { + position: absolute; + top: -40px; + left: 0; + background: var(--accent-color); + color: white; + padding: 8px; + z-index: 1000; + transition: top 0.3s; + text-decoration: none; + font-weight: 600; +} + +.skip-link:focus { + top: 0; +} + /* HEADER */ header { text-align: center; @@ -73,13 +91,14 @@ header p { border-radius: 24px; padding: 40px; text-align: left; + text-decoration: none; cursor: pointer; transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); display: flex; flex-direction: column; justify-content: space-between; position: relative; - overflow: hidden; + overflow: visible; animation: fadeInUp 0.8s ease-out both; } @@ -100,10 +119,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); + outline: none; +} + +.card:focus-visible { + box-shadow: 0 0 0 2px var(--accent-color), 0 20px 40px rgba(0, 0, 0, 0.3); + z-index: 10; } .card > * { @@ -147,7 +173,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);