Commit 21 cambios

Author: SebiGitHub

assets/js/app.js

@@ -1,40 +1,57 @@
+// año del footer
 const year = document.getElementById('year');
 if (year) year.textContent = new Date().getFullYear();
 
+// estado de idioma
 const STATE = { lang: localStorage.getItem('lang') || 'es', dict: {} };
 
+// carga JSON de idioma
 async function loadDict(lang){
-  const res = await fetch(`assets/i18n/${lang}.json`);
-  STATE.dict = await res.json();
-  STATE.lang = lang;
-  localStorage.setItem('lang', lang);
-  applyI18n();
+  try {
+    const res = await fetch(`assets/i18n/${lang}.json`);
+    const json = await res.json();
+    STATE.dict = json;
+    STATE.lang = lang;
+    localStorage.setItem('lang', lang);
+    applyI18n();
+  } catch (e) {
+    console.error('Error cargando diccionario', e);
+  }
 }
 
+// aplica textos + re-renderiza secciones
 function applyI18n(){
-  if (!STATE.dict || !STATE.dict.nav) return; // aún no se ha cargado el JSON
+  if (!STATE.dict || !STATE.dict.nav) {
+    // aún no se ha cargado bien el JSON
+    return;
+  }
 
   document.querySelectorAll('[data-i18n]').forEach(el=>{
     const key = el.getAttribute('data-i18n');
     const val = key.split('.').reduce((o,k)=>o?.[k], STATE.dict);
     if (typeof val === 'string') el.textContent = val;
   });
+
   renderSkills();
   renderProjects();
   renderXP();
   renderServices();
   document.documentElement.lang = STATE.lang;
 }
 
-
+// toggle ES/EN
 document.getElementById('lang-toggle')?.addEventListener('click', ()=>{
   loadDict(STATE.lang === 'es' ? 'en' : 'es');
 });
 
-
+// === RENDER PROYECTOS ===
 function renderProjects(){
   const grid = document.getElementById("projects-grid");
-  if (!grid || !STATE.dict || !STATE.dict.projects) return;
+  if (!grid) return;
+  if (!STATE.dict || !STATE.dict.projects) {
+    console.warn('Projects aún no disponible en STATE.dict');
+    return;
+  }
 
   const proj = STATE.dict.projects;
 
@@ -82,28 +99,17 @@ function renderProjects(){
   `).join("");
 }
 
-
+// === RENDER SKILLS ===
 function renderSkills(){
   const grid = document.getElementById("skills-grid");
   if (!grid || !STATE.dict.skills) return;
 
+  const s = STATE.dict.skills;
   const blocks = [
-    {
-      title: STATE.dict.skills.dev_title,
-      items: STATE.dict.skills.dev_items
-    },
-    {
-      title: STATE.dict.skills.web_title,
-      items: STATE.dict.skills.web_items
-    },
-    {
-      title: STATE.dict.skills.data_title,
-      items: STATE.dict.skills.data_items
-    },
-    {
-      title: STATE.dict.skills.soft_title,
-      items: STATE.dict.skills.soft_items
-    }
+    { title: s.dev_title,  items: s.dev_items  },
+    { title: s.web_title,  items: s.web_items  },
+    { title: s.data_title, items: s.data_items },
+    { title: s.soft_title, items: s.soft_items }
   ];
 
   grid.innerHTML = blocks.map(b => `
@@ -116,23 +122,16 @@ function renderSkills(){
   `).join("");
 }
 
+// === RENDER EXPERIENCIA ===
 function renderXP(){
   const container = document.getElementById("xp-list");
   if (!container || !STATE.dict.xp) return;
 
+  const x = STATE.dict.xp;
   const items = [
-    {
-      title: STATE.dict.xp.xp1_title,
-      body: STATE.dict.xp.xp1_body
-    },
-    {
-      title: STATE.dict.xp.xp2_title,
-      body: STATE.dict.xp.xp2_body
-    },
-    {
-      title: STATE.dict.xp.xp3_title,
-      body: STATE.dict.xp.xp3_body
-    }
+    { title: x.xp1_title, body: x.xp1_body },
+    { title: x.xp2_title, body: x.xp2_body },
+    { title: x.xp3_title, body: x.xp3_body }
   ];
 
   container.innerHTML = items.map(i => `
@@ -141,30 +140,18 @@ function renderXP(){
       <p>${i.body}</p>
     </div>
   `).join("");
-
-  const certs = document.getElementById("services-list");
 }
 
+// === RENDER SERVICIOS ===
 function renderServices(){
   const container = document.getElementById("services-list");
   if (!container || !STATE.dict.services) return;
 
+  const s = STATE.dict.services;
   const items = [
-    {
-      icon: "⚙️",
-      title: STATE.dict.services.s1_title,
-      body: STATE.dict.services.s1_body
-    },
-    {
-      icon: "🖥️",
-      title: STATE.dict.services.s2_title,
-      body: STATE.dict.services.s2_body
-    },
-    {
-      icon: "🛠️",
-      title: STATE.dict.services.s3_title,
-      body: STATE.dict.services.s3_body
-    }
+    { icon: "⚙️", title: s.s1_title, body: s.s1_body },
+    { icon: "🖥️", title: s.s2_title, body: s.s2_body },
+    { icon: "🛠️", title: s.s3_title, body: s.s3_body }
   ];
 
   container.innerHTML = items.map(i => `
@@ -176,6 +163,7 @@ function renderServices(){
   `).join("");
 }
 
+// === ANIMACIÓN DE SECCIONES ===
 function setupSectionObserver(){
   const sections = document.querySelectorAll('.section');
   const observer = new IntersectionObserver(entries => {
@@ -185,15 +173,13 @@ function setupSectionObserver(){
         observer.unobserve(entry.target);
       }
     });
-  }, {
-    threshold: 0.18
-  });
+  }, { threshold: 0.18 });
 
   sections.forEach(sec => observer.observe(sec));
 }
 
+// arranque
 document.addEventListener("DOMContentLoaded", ()=>{
-  loadDict(STATE.lang);
   setupSectionObserver();
+  loadDict(STATE.lang);
 });
-

index.html

@@ -118,6 +118,6 @@ <h2 data-i18n="contact.title">Contacto</h2>
     <small>© <span id="year"></span> Sebi — All rights reserved.</small>
   </footer>
 
-  <script src="assets/js/app.js"></script>
+  <script src="assets/js/app.js?v=2"></script>
 </body>
 </html>