itziarZG/MyWebsite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: separate CSS and JavaScript into external files

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2 -104
View File
@@ -37,39 +37,7 @@
},
};
</script>
<style>
.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-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-shape {
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
}
</style>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body
class="bg-background-light dark:bg-background-dark font-display text-slate-900 dark:text-slate-100 selection:bg-primary/30 transition-colors duration-300"
@@ -965,76 +933,6 @@
</div>
<!-- Scripts -->
<script>
// Load saved theme on page load
function initTheme() {
const savedTheme = localStorage.getItem("theme") || "light";
if (savedTheme === "dark") {
document.documentElement.classList.add("dark");
} else {
document.documentElement.classList.remove("dark");
}
}
// Toggle theme and save preference
function toggleTheme() {
const html = document.documentElement;
if (html.classList.contains("dark")) {
html.classList.remove("dark");
localStorage.setItem("theme", "light");
} else {
html.classList.add("dark");
localStorage.setItem("theme", "dark");
}
}
// Smooth scrolling to sections
function scrollToProjects() {
const projectsSection = document.getElementById("projects");
if (projectsSection) {
projectsSection.scrollIntoView({ behavior: "smooth" });
}
}
function scrollToContact() {
const contactSection = document.getElementById("contact");
if (contactSection) {
contactSection.scrollIntoView({ behavior: "smooth" });
}
}
// Modal functions
function openModal(projectId) {
const modal = document.getElementById(projectId + "-modal");
if (modal) {
modal.classList.remove("hidden");
document.body.style.overflow = "hidden";
}
}
function closeModal(projectId) {
const modal = document.getElementById(projectId + "-modal");
if (modal) {
modal.classList.add("hidden");
document.body.style.overflow = "auto";
}
}
// Close modal with ESC key
document.addEventListener("keydown", function (event) {
if (event.key === "Escape") {
const modals = document.querySelectorAll(
'[id$="-modal"]:not(.hidden)',
);
modals.forEach((modal) => {
const projectId = modal.id.replace("-modal", "");
closeModal(projectId);
});
}
});
// Initialize theme on page load
document.addEventListener("DOMContentLoaded", initTheme);
</script>
<script src="js/main.js"></script>
</body>
</html>