refactor: separate CSS and JavaScript into external files

- Extract inline CSS styles to css/styles.css
  - Glass morphism effects (.glass, .dark .glass)
  - Iridescent background gradients
  - Fluid blob shape animations

- Extract all JavaScript to js/main.js
  - Theme toggle functionality with localStorage persistence
  - Smooth scroll navigation functions
  - Modal open/close management
  - Keyboard event handlers (ESC to close modals)
  - Comprehensive JSDoc comments for maintainability

- Update index.html with external file references
- Remove legacy theme-toggle.js and language-toggle.js
- Improve cacheability and maintainability
- Reduce inline code bloat in HTML (60KB → ~950 bytes JS link)
This commit is contained in:
Itziar Zameza García
2026-03-22 19:37:20 +01:00
parent 6a8e7dfb83
commit 52472588fa
5 changed files with 139 additions and 412 deletions
+37
View File
@@ -0,0 +1,37 @@
/* Glass Morphism Effect */
.glass {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.dark .glass {
background: rgba(30, 20, 40, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
}
/* Iridescent Background Gradient */
.iridescent-bg {
background:
radial-gradient(
circle at 0% 0%,
rgba(140, 43, 238, 0.15) 0%,
transparent 50%
),
radial-gradient(
circle at 100% 100%,
rgba(255, 182, 255, 0.2) 0%,
transparent 50%
),
radial-gradient(
circle at 50% 50%,
rgba(140, 43, 238, 0.05) 0%,
transparent 100%
);
}
/* Fluid Blob Shapes */
.fluid-shape {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}