diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..b4cd63b --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,9 @@ +# Palette's Journal - MySketches + +## 2025-05-15 - Semantic navigation for glassmorphism cards +**Learning:** In a glassmorphism design with cards that act as navigation links, using semantic `` tags instead of `div` with `onclick` handlers is crucial for accessibility. To ensure a clear `:focus-visible` state without clipping the focus ring, the card must have `overflow: visible`. If background clipping was used to contain child elements, consider moving the background styling to a pseudo-element with a lower `z-index`. +**Action:** Always prefer `` tags for navigation cards. Convert nested ` - - -
-

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..9d6e601 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..f35cb86 100644 --- a/proyecto1/style.css +++ b/proyecto1/style.css @@ -108,14 +108,20 @@ 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..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..b3dd9bc 100644 --- a/proyecto2/style.css +++ b/proyecto2/style.css @@ -143,14 +143,20 @@ 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..0e526ca 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) { @@ -97,15 +100,20 @@ header p { background: var(--accent-gradient); opacity: 0; transition: opacity 0.4s ease; - z-index: 0; + z-index: -1; + border-radius: inherit; } -.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; @@ -147,7 +155,7 @@ 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);