script.js

/* ===========================
   TRANSLATIONS
=========================== */
const i18n = {
  es: {
    "nav.experience":  "Experiencia",
    "nav.education":   "Formación",
    "nav.skills":      "Skills",
    "nav.projects":    "Proyectos",
    "nav.contact":     "Contacto",
    "hero.tag":        "< Desarrollador Web >",
    "hero.sub":        "Desarrollo aplicaciones web modernas. Basado en <span class='accent'>Girona</span>.",
    "hero.cta":        "Ver mi trabajo",
    "hero.cta2":       "Contactar",
    "hero.scroll":     "scroll",
    "about.eyebrow":   "// sobre mí",
    "about.title":     "Un desarrollador con ganas de crecer",
    "about.body":      "Intento dar lo mejor de mí y hacer un trabajo en equipo lo más correcto posible, creando un buen ambiente de compañerismo. Busco formarme constantemente y conseguir la mayor experiencia en cualquier ámbito. Me comprometo con mi trabajo y tengo afán de superación.",
    "about.stat1":     "años de experiencia",
    "about.stat2":     "idiomas",
    "about.stat3":     "años",
    "exp.eyebrow":     "// experiencia profesional",
    "exp.title":       "Dónde he trabajado",
    "exp.present":     "Actual",
    "exp.job1.role":   "Desarrollador Web",
    "exp.job1.t1":     "Desarrollo de aplicativos con PHP 5.4, Python y Angular.",
    "exp.job1.t2":     "Desarrollo dentro de entorno ERP propio.",
    "exp.job1.t3":     "Comunicación y trabajo en equipo.",
    "exp.job1.t4":     "Aprendizaje constante sobre tecnologías de uso propio.",
    "exp.job2.role":   "Promotor",
    "exp.job2.t1":     "Trato directo con el cliente.",
    "exp.job2.t2":     "Organización de expositores de venta.",
    "exp.job2.t3":     "Habilidades de ventas.",
    "exp.job3.role":   "Técnico en Telecomunicaciones",
    "exp.job3.t1":     "Instalación y reparación en infraestructuras comunes de telecomunicaciones (ICT).",
    "exp.job3.t2":     "Instalación y mantenimiento de sistemas CCTV.",
    "exp.job3.t3":     "Instalación y reparación de porteros y videoporteros electrónicos.",
    "tag.sales":       "Ventas",
    "tag.client":      "Atención al cliente",
    "tag.telecom":     "Telecomunicaciones",
    "edu.eyebrow":     "// formación",
    "edu.title":       "Mi recorrido académico",
    "edu.cfgs.title":  "CFGS Desarrollo de Aplicaciones Web",
    "edu.cfgs.desc":   "Bases de datos, HTML5, C#, programación web y entornos de programación.",
    "edu.cfgm.title":  "CFGM Electrónica y Telecomunicaciones",
    "edu.cfgm.desc":   "Sistemas eléctricos, electrónicos e informáticos, ICT, redes cableadas e inalámbricas.",
    "edu.eso.title":   "Educación Secundaria Obligatoria",
    "edu.b2.title":    "Inglés B2 \"First\"",
    "skills.eyebrow":  "// habilidades técnicas",
    "skills.title":    "Tech stack",
    "skills.web":      "Web & Backend",
    "skills.tools":    "Herramientas",
    "skills.infra":    "Infraestructura",
    "skills.soft":     "Soft Skills",
    "skills.networks": "Redes",
    "skills.hardware": "Hardware PC",
    "skill.teamwork":  "Trabajo en equipo",
    "skill.learn":     "Aprendizaje continuo",
    "skill.proactive": "Proactividad",
    "skill.client":    "Atención al cliente",
    "lang.eyebrow":    "// idiomas",
    "lang.title":      "Comunicación",
    "lang.es.name":    "Castellano",
    "lang.ca.name":    "Català",
    "lang.en.name":    "English",
    "lang.native":     "Lengua nativa",
    "proj.eyebrow":    "// proyectos personales",
    "proj.title":      "Lo que estoy construyendo",
    "proj.p1.title":   "Portfolio Personal",
    "proj.p1.desc":    "Este mismo portfolio. Diseñado y desarrollado con HTML, CSS y JavaScript vanilla, con soporte multilingüe.",
    "proj.p2.title":   "Próximamente...",
    "proj.p2.desc":    "Aquí aparecerá el próximo proyecto. ¡Estate atento!",
    "proj.p3.title":   "Próximamente...",
    "proj.p3.desc":    "Más proyectos en camino.",
    "proj.wip":        "En construcción 🚧",
    "contact.eyebrow": "// contacto",
    "contact.title":   "Hablemos",
    "contact.body":    "¿Tienes un proyecto interesante o una oferta de trabajo? Estaré encantado de escucharte.",
    "footer.made":     "Diseñado y desarrollado por Àlex Carrasco · 2026",
  },
  ca: {
    "nav.experience":  "Experiència",
    "nav.education":   "Formació",
    "nav.skills":      "Skills",
    "nav.projects":    "Projectes",
    "nav.contact":     "Contacte",
    "hero.tag":        "< Desenvolupador Web >",
    "hero.sub":        "Desenvolupo aplicacions web modernes. Basat a <span class='accent'>Girona</span>.",
    "hero.cta":        "Veure la meva feina",
    "hero.cta2":       "Contactar",
    "hero.scroll":     "scroll",
    "about.eyebrow":   "// sobre mi",
    "about.title":     "Un desenvolupador amb ganes de créixer",
    "about.body":      "Intento donar el millor de mi i fer un treball en equip el més correcte possible, creant un bon ambient de companyerisme. Busco formar-me constantment i aconseguir la major experiència en qualsevol àmbit. Em comprometo amb la meva feina i tinc afany de superació.",
    "about.stat1":     "anys d'experiència",
    "about.stat2":     "idiomes",
    "about.stat3":     "anys",
    "exp.eyebrow":     "// experiència professional",
    "exp.title":       "On he treballat",
    "exp.present":     "Actual",
    "exp.job1.role":   "Desenvolupador Web",
    "exp.job1.t1":     "Desenvolupament d'aplicatius amb PHP 5.4, Python i Angular.",
    "exp.job1.t2":     "Desenvolupament dins d'entorn ERP propi.",
    "exp.job1.t3":     "Comunicació i treball en equip.",
    "exp.job1.t4":     "Aprenentatge constant sobre tecnologies d'ús propi.",
    "exp.job2.role":   "Promotor",
    "exp.job2.t1":     "Tracte directe amb el client.",
    "exp.job2.t2":     "Organització d'expositors de venta.",
    "exp.job2.t3":     "Habilitats de vendes.",
    "exp.job3.role":   "Tècnic en Telecomunicacions",
    "exp.job3.t1":     "Instal·lació i reparació en infraestructures comunes de telecomunicacions (ICT).",
    "exp.job3.t2":     "Instal·lació i manteniment de sistemes CCTV.",
    "exp.job3.t3":     "Instal·lació i reparació de porters i videoporters electrònics.",
    "tag.sales":       "Vendes",
    "tag.client":      "Atenció al client",
    "tag.telecom":     "Telecomunicacions",
    "edu.eyebrow":     "// formació",
    "edu.title":       "El meu recorregut acadèmic",
    "edu.cfgs.title":  "CFGS Desenvolupament d'Aplicacions Web",
    "edu.cfgs.desc":   "Bases de dades, HTML5, C#, programació web i entorns de programació.",
    "edu.cfgm.title":  "CFGM Electrònica i Telecomunicacions",
    "edu.cfgm.desc":   "Sistemes elèctrics, electrònics i informàtics, ICT, xarxes cablejades i sense fils.",
    "edu.eso.title":   "Educació Secundària Obligatòria",
    "edu.b2.title":    "Anglès B2 \"First\"",
    "skills.eyebrow":  "// habilitats tècniques",
    "skills.title":    "Tech stack",
    "skills.web":      "Web & Backend",
    "skills.tools":    "Eines",
    "skills.infra":    "Infraestructura",
    "skills.soft":     "Soft Skills",
    "skills.networks": "Xarxes",
    "skills.hardware": "Hardware PC",
    "skill.teamwork":  "Treball en equip",
    "skill.learn":     "Aprenentatge continu",
    "skill.proactive": "Proactivitat",
    "skill.client":    "Atenció al client",
    "lang.eyebrow":    "// idiomes",
    "lang.title":      "Comunicació",
    "lang.es.name":    "Castellano",
    "lang.ca.name":    "Català",
    "lang.en.name":    "English",
    "lang.native":     "Llengua materna",
    "proj.eyebrow":    "// projectes personals",
    "proj.title":      "El que estic construint",
    "proj.p1.title":   "Portfolio Personal",
    "proj.p1.desc":    "Aquest mateix portfolio. Dissenyat i desenvolupat amb HTML, CSS i JavaScript vanilla, amb suport multilingüe.",
    "proj.p2.title":   "Pròximament...",
    "proj.p2.desc":    "Aquí apareixerà el proper projecte. Estigues atent!",
    "proj.p3.title":   "Pròximament...",
    "proj.p3.desc":    "Més projectes en camí.",
    "proj.wip":        "En construcció 🚧",
    "contact.eyebrow": "// contacte",
    "contact.title":   "Parlem",
    "contact.body":    "Tens un projecte interessant o una oferta de feina? Estaré encantat d'escoltar-te.",
    "footer.made":     "Dissenyat i desenvolupat per Àlex Carrasco · 2026",
  },
  en: {
    "nav.experience":  "Experience",
    "nav.education":   "Education",
    "nav.skills":      "Skills",
    "nav.projects":    "Projects",
    "nav.contact":     "Contact",
    "hero.tag":        "< Web Developer >",
    "hero.sub":        "I build modern web applications. Based in <span class='accent'>Girona</span>.",
    "hero.cta":        "See my work",
    "hero.cta2":       "Get in touch",
    "hero.scroll":     "scroll",
    "about.eyebrow":   "// about me",
    "about.title":     "A developer eager to grow",
    "about.body":      "I strive to give my best and work as effectively as possible in a team, fostering a positive environment. I'm constantly looking to improve my skills and gain as much experience as I can. I am committed to my work and always seek to go beyond expectations.",
    "about.stat1":     "years of experience",
    "about.stat2":     "languages",
    "about.stat3":     "years old",
    "exp.eyebrow":     "// work experience",
    "exp.title":       "Where I've worked",
    "exp.present":     "Present",
    "exp.job1.role":   "Web Developer",
    "exp.job1.t1":     "Application development with PHP 5.4, Python and Angular.",
    "exp.job1.t2":     "Development within a proprietary ERP environment.",
    "exp.job1.t3":     "Communication and teamwork.",
    "exp.job1.t4":     "Continuous learning about in-house technologies.",
    "exp.job2.role":   "Sales Promoter",
    "exp.job2.t1":     "Direct customer interaction.",
    "exp.job2.t2":     "Organization of sales displays.",
    "exp.job2.t3":     "Sales skills.",
    "exp.job3.role":   "Telecommunications Technician",
    "exp.job3.t1":     "Installation and repair of common telecommunications infrastructure (ICT).",
    "exp.job3.t2":     "Installation and maintenance of CCTV systems.",
    "exp.job3.t3":     "Installation and repair of intercoms and video intercoms.",
    "tag.sales":       "Sales",
    "tag.client":      "Customer Service",
    "tag.telecom":     "Telecommunications",
    "edu.eyebrow":     "// education",
    "edu.title":       "My academic journey",
    "edu.cfgs.title":  "Higher Degree in Web Application Development",
    "edu.cfgs.desc":   "Databases, HTML5, C#, web programming and development environments.",
    "edu.cfgm.title":  "Intermediate Degree in Electronics & Telecommunications",
    "edu.cfgm.desc":   "Electrical, electronic and IT systems, ICT, wired and wireless networks.",
    "edu.eso.title":   "Compulsory Secondary Education (ESO)",
    "edu.b2.title":    "English B2 \"First\"",
    "skills.eyebrow":  "// technical skills",
    "skills.title":    "Tech stack",
    "skills.web":      "Web & Backend",
    "skills.tools":    "Tools",
    "skills.infra":    "Infrastructure",
    "skills.soft":     "Soft Skills",
    "skills.networks": "Networks",
    "skills.hardware": "PC Hardware",
    "skill.teamwork":  "Teamwork",
    "skill.learn":     "Continuous learning",
    "skill.proactive": "Proactivity",
    "skill.client":    "Customer service",
    "lang.eyebrow":    "// languages",
    "lang.title":      "Communication",
    "lang.es.name":    "Spanish",
    "lang.ca.name":    "Catalan",
    "lang.en.name":    "English",
    "lang.native":     "Native language",
    "proj.eyebrow":    "// personal projects",
    "proj.title":      "What I'm building",
    "proj.p1.title":   "Personal Portfolio",
    "proj.p1.desc":    "This very portfolio. Designed and developed with vanilla HTML, CSS and JavaScript, with multilingual support.",
    "proj.p2.title":   "Coming soon...",
    "proj.p2.desc":    "The next project will appear here. Stay tuned!",
    "proj.p3.title":   "Coming soon...",
    "proj.p3.desc":    "More projects on their way.",
    "proj.wip":        "Under construction 🚧",
    "contact.eyebrow": "// contact",
    "contact.title":   "Let's talk",
    "contact.body":    "Do you have an interesting project or a job offer? I'd be happy to hear from you.",
    "footer.made":     "Designed and developed by Àlex Carrasco · 2026",
  }
};

/* ===========================
   LANGUAGE SWITCHER
=========================== */
let currentLang = 'es';

const themeLabelMap = {
  es: {
    dark: 'Cambiar a modo noche',
    light: 'Cambiar a modo claro'
  },
  ca: {
    dark: 'Canviar a mode fosc',
    light: 'Canviar a mode clar'
  },
  en: {
    dark: 'Switch to dark mode',
    light: 'Switch to light mode'
  }
};

function applyLang(lang) {
  currentLang = lang;
  const dict = i18n[lang];

  document.querySelectorAll('[data-i18n]').forEach(el => {
    const key = el.getAttribute('data-i18n');
    if (dict[key] !== undefined) {
      el.innerHTML = dict[key];
    }
  });

  // Update <html lang>
  document.documentElement.lang = lang === 'ca' ? 'ca' : lang === 'en' ? 'en' : 'es';

  // Update active button state for ALL lang buttons (nav + mobile)
  document.querySelectorAll('.lang-btn').forEach(btn => {
    btn.classList.toggle('active', btn.getAttribute('data-lang') === lang);
  });

  updateThemeToggleLabels();
}

document.querySelectorAll('.lang-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const lang = btn.getAttribute('data-lang');
    applyLang(lang);
  });
});

/* ===========================
   THEME TOGGLE
=========================== */
const THEME_KEY = 'portfolio-theme';
const themeButtons = document.querySelectorAll('[data-theme-toggle]');

function getInitialTheme() {
  const savedTheme = localStorage.getItem(THEME_KEY);
  if (savedTheme === 'dark' || savedTheme === 'light') {
    return savedTheme;
  }

  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

function updateThemeToggleLabels() {
  const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
  const labels = themeLabelMap[currentLang] || themeLabelMap.es;
  const nextLabel = isDark ? labels.light : labels.dark;

  themeButtons.forEach(btn => {
    btn.setAttribute('aria-label', nextLabel);
    btn.setAttribute('title', nextLabel);
    btn.textContent = isDark ? '☀' : '🌙';
  });
}

function applyTheme(theme) {
  document.documentElement.setAttribute('data-theme', theme);
  localStorage.setItem(THEME_KEY, theme);
  updateThemeToggleLabels();
}

function toggleTheme() {
  const currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
  applyTheme(currentTheme === 'dark' ? 'light' : 'dark');
}

themeButtons.forEach(btn => {
  btn.addEventListener('click', toggleTheme);
});

applyTheme(getInitialTheme());

/* ===========================
   NAVBAR SCROLL
=========================== */
const navbar = document.getElementById('navbar');

window.addEventListener('scroll', () => {
  navbar.classList.toggle('scrolled', window.scrollY > 20);
}, { passive: true });

/* ===========================
   HAMBURGER MENU
=========================== */
const hamburger = document.getElementById('hamburger');
const mobileMenu = document.getElementById('mobileMenu');

hamburger.addEventListener('click', () => {
  hamburger.classList.toggle('open');
  mobileMenu.classList.toggle('open');
});

// Close menu on link click
mobileMenu.querySelectorAll('a').forEach(a => {
  a.addEventListener('click', () => {
    hamburger.classList.remove('open');
    mobileMenu.classList.remove('open');
  });
});

/* ===========================
   SMOOTH SCROLL FOR NAV LINKS
=========================== */
document.querySelectorAll('a[href^="#"]').forEach(link => {
  link.addEventListener('click', e => {
    const target = document.querySelector(link.getAttribute('href'));
    if (target) {
      e.preventDefault();
      const offset = 68;
      const top = target.getBoundingClientRect().top + window.scrollY - offset;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  });
});

/* ===========================
   SCROLL REVEAL
=========================== */
const revealObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      revealObserver.unobserve(entry.target);
    }
  });
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });

document.querySelectorAll('.reveal-item').forEach(el => revealObserver.observe(el));

/* ===========================
   LANG BAR ANIMATION (trigger on scroll)
=========================== */
const langBarObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('in-view');
      langBarObserver.unobserve(entry.target);
    }
  });
}, { threshold: 0.3 });

document.querySelectorAll('.lang-card').forEach(el => langBarObserver.observe(el));

/* ===========================
   ACTIVE NAV LINK ON SCROLL
=========================== */
const sections = document.querySelectorAll('section[id]');
const navLinks = document.querySelectorAll('.nav-links a, .mobile-menu a[href^="#"]');

const activeObserver = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      navLinks.forEach(link => {
        link.style.color = '';
        if (link.getAttribute('href') === '#' + entry.target.id) {
          link.style.color = 'var(--accent)';
        }
      });
    }
  });
}, { threshold: 0.4 });

sections.forEach(s => activeObserver.observe(s));

/* ===========================
   HERO PARALLAX (subtle)
=========================== */
const heroGlow = document.querySelector('.hero-glow');

window.addEventListener('mousemove', e => {
  const x = (e.clientX / window.innerWidth - 0.5) * 30;
  const y = (e.clientY / window.innerHeight - 0.5) * 30;
  if (heroGlow) {
    heroGlow.style.transform = `translate(${x}px, ${y}px)`;
  }
}, { passive: true });