feat(i18n): add multilingual support and interactive features
This commit is contained in:
Clezio Penha
+153
@@ -0,0 +1,153 @@
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
/* =========================
|
||||
MENU MOBILE
|
||||
========================= */
|
||||
|
||||
const menuButton = document.querySelector(".menu-toggle");
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const navMenu = document.querySelector(".nav-links");
|
||||
|
||||
if (menuButton) {
|
||||
menuButton.addEventListener("click", () => {
|
||||
navMenu.classList.toggle("open");
|
||||
});
|
||||
}
|
||||
|
||||
/* =========================
|
||||
THEME
|
||||
========================= */
|
||||
|
||||
const savedTheme =
|
||||
localStorage.getItem(
|
||||
"portfolio-theme"
|
||||
) || "dark";
|
||||
|
||||
document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
savedTheme
|
||||
);
|
||||
|
||||
themeToggle.textContent =
|
||||
savedTheme === "light"
|
||||
? "☀️"
|
||||
: "🌙";
|
||||
|
||||
themeToggle.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
|
||||
const currentTheme =
|
||||
document.documentElement.getAttribute(
|
||||
"data-theme"
|
||||
);
|
||||
|
||||
const nextTheme =
|
||||
currentTheme === "dark"
|
||||
? "light"
|
||||
: "dark";
|
||||
|
||||
document.documentElement.setAttribute(
|
||||
"data-theme",
|
||||
nextTheme
|
||||
);
|
||||
|
||||
localStorage.setItem(
|
||||
"portfolio-theme",
|
||||
nextTheme
|
||||
);
|
||||
|
||||
themeToggle.textContent =
|
||||
nextTheme === "light"
|
||||
? "☀️"
|
||||
: "🌙";
|
||||
|
||||
}
|
||||
);
|
||||
|
||||
/* =========================
|
||||
BOTÃO TOPO
|
||||
========================= */
|
||||
|
||||
const backToTop = document.getElementById("backToTop");
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
|
||||
if (window.scrollY > 500) {
|
||||
backToTop.classList.add("show");
|
||||
} else {
|
||||
backToTop.classList.remove("show");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
backToTop.addEventListener("click", () => {
|
||||
|
||||
window.scrollTo({
|
||||
top: 0,
|
||||
behavior: "smooth"
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
/* =========================
|
||||
ANIMAÇÃO DAS SEÇÕES
|
||||
========================= */
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
entries => {
|
||||
|
||||
entries.forEach(entry => {
|
||||
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add("show-element");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
},
|
||||
{
|
||||
threshold: 0.15
|
||||
}
|
||||
);
|
||||
|
||||
document
|
||||
.querySelectorAll(
|
||||
".section, .metric-card, .card, .project-card"
|
||||
)
|
||||
.forEach(element => observer.observe(element));
|
||||
|
||||
/* =========================
|
||||
NAVBAR ATIVA
|
||||
========================= */
|
||||
|
||||
const sections = document.querySelectorAll("section");
|
||||
const navLinks = document.querySelectorAll(".nav-links a");
|
||||
|
||||
window.addEventListener("scroll", () => {
|
||||
|
||||
let current = "";
|
||||
|
||||
sections.forEach(section => {
|
||||
|
||||
const sectionTop = section.offsetTop - 140;
|
||||
|
||||
if (window.scrollY >= sectionTop) {
|
||||
current = section.getAttribute("id");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
navLinks.forEach(link => {
|
||||
|
||||
link.classList.remove("active");
|
||||
|
||||
if (link.getAttribute("href") === `#${current}`) {
|
||||
link.classList.add("active");
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
@@ -0,0 +1,533 @@
|
||||
const translations = {
|
||||
|
||||
pt: {
|
||||
|
||||
"nav.home": "Início",
|
||||
"nav.about": "Sobre",
|
||||
"nav.specialties": "Especialidades",
|
||||
"nav.experience": "Experiência",
|
||||
"nav.projects": "Projetos",
|
||||
"nav.contact": "Contato",
|
||||
|
||||
"hero.badge":
|
||||
"Programador Sênior • Backend Engineer • Tech Lead",
|
||||
|
||||
"hero.title":
|
||||
"Transformando desafios de negócio em soluções robustas, escaláveis e seguras.",
|
||||
|
||||
"hero.description":
|
||||
"Programador Sênior com mais de 15 anos de experiência em desenvolvimento backend, arquitetura de software, cloud computing e liderança técnica.",
|
||||
|
||||
"hero.projects":
|
||||
"Ver Projetos",
|
||||
|
||||
"hero.contact":
|
||||
"Entrar em Contato",
|
||||
|
||||
"about.title":
|
||||
"Sobre Mim",
|
||||
|
||||
"about.description":
|
||||
"Ao longo da minha carreira participei da construção e evolução de sistemas corporativos, integrações críticas, automações de processos e plataformas backend voltadas para desempenho, escalabilidade e confiabilidade.",
|
||||
|
||||
"work.title":
|
||||
"Como Eu Trabalho",
|
||||
|
||||
"work.architecture.title":
|
||||
"Arquitetura",
|
||||
|
||||
"work.architecture.description":
|
||||
"Planejamento técnico antes da implementação.",
|
||||
|
||||
"work.scalability.title":
|
||||
"Escalabilidade",
|
||||
|
||||
"work.scalability.description":
|
||||
"Sistemas preparados para crescimento contínuo.",
|
||||
|
||||
"work.performance.title":
|
||||
"Performance",
|
||||
|
||||
"work.performance.description":
|
||||
"Eficiência operacional e otimização de recursos.",
|
||||
|
||||
"work.security.title":
|
||||
"Segurança",
|
||||
|
||||
"work.security.description":
|
||||
"Boas práticas desde a concepção.",
|
||||
|
||||
"work.quality.title":
|
||||
"Qualidade",
|
||||
|
||||
"work.quality.description":
|
||||
"Código limpo e manutenção simplificada.",
|
||||
|
||||
"metrics.experience":
|
||||
"Anos de Experiência",
|
||||
|
||||
"metrics.leadership":
|
||||
"Liderança Técnica",
|
||||
|
||||
"metrics.cloud":
|
||||
"Oracle Cloud & Azure",
|
||||
|
||||
"metrics.backend":
|
||||
"APIs e Sistemas Corporativos",
|
||||
|
||||
"specialties.title":
|
||||
"Especialidades",
|
||||
|
||||
"experience.title":
|
||||
"Experiência Profissional",
|
||||
|
||||
"specialties.api":
|
||||
"APIs REST",
|
||||
|
||||
"specialties.architecture":
|
||||
"Arquitetura de Software",
|
||||
|
||||
"specialties.cloud":
|
||||
"Cloud Computing",
|
||||
|
||||
"specialties.devops":
|
||||
"DevOps",
|
||||
|
||||
"specialties.database":
|
||||
"Bancos de Dados",
|
||||
|
||||
"specialties.microservices":
|
||||
"Microsserviços",
|
||||
|
||||
"projects.title":
|
||||
"Projetos em Destaque",
|
||||
|
||||
"contact.title":
|
||||
"Vamos Conversar",
|
||||
|
||||
"contact.description":
|
||||
"Disponível para oportunidades profissionais e novos desafios.",
|
||||
|
||||
"stack.title":
|
||||
"Stack Tecnológica",
|
||||
|
||||
"timeline.senior.title":
|
||||
"Programador Sênior",
|
||||
|
||||
"timeline.senior.description":
|
||||
"Desenvolvimento de sistemas corporativos e soluções backend.",
|
||||
|
||||
"timeline.techlead.title":
|
||||
"Tech Lead",
|
||||
|
||||
"timeline.techlead.description":
|
||||
"Liderança técnica e apoio arquitetural.",
|
||||
|
||||
"timeline.cloud.title":
|
||||
"Cloud & DevOps",
|
||||
|
||||
"timeline.cloud.description":
|
||||
"Modernização de infraestrutura e automação.",
|
||||
|
||||
"project.sped.title":
|
||||
"Sistema de Processamento SPED",
|
||||
|
||||
"project.sped.description":
|
||||
"Plataforma responsável pela geração e processamento automatizado de arquivos fiscais SPED.",
|
||||
|
||||
"project.oracle.title":
|
||||
"Infraestrutura Oracle Cloud",
|
||||
|
||||
"project.oracle.description":
|
||||
"Implementação e gerenciamento de infraestrutura cloud.",
|
||||
|
||||
"project.gitea.title":
|
||||
"Servidor Git Privado com Gitea",
|
||||
|
||||
"project.gitea.description":
|
||||
"Ambiente Git privado para versionamento e colaboração.",
|
||||
|
||||
"project.api.title":
|
||||
"APIs Corporativas",
|
||||
|
||||
"project.api.description":
|
||||
"Desenvolvimento de APIs REST utilizando Spring Boot.",
|
||||
|
||||
"footer.role":
|
||||
"Senior Software Engineer • Backend Engineer"
|
||||
},
|
||||
|
||||
en: {
|
||||
|
||||
"nav.home": "Home",
|
||||
"nav.about": "About",
|
||||
"nav.specialties": "Specialties",
|
||||
"nav.experience": "Experience",
|
||||
"nav.projects": "Projects",
|
||||
"nav.contact": "Contact",
|
||||
|
||||
"hero.badge":
|
||||
"Senior Software Engineer • Backend Engineer • Tech Lead",
|
||||
|
||||
"hero.title":
|
||||
"Transforming business challenges into robust, scalable and secure solutions.",
|
||||
|
||||
"hero.description":
|
||||
"Senior Software Engineer with over 15 years of experience in backend development, software architecture, cloud computing and technical leadership.",
|
||||
|
||||
"hero.projects":
|
||||
"View Projects",
|
||||
|
||||
"hero.contact":
|
||||
"Get In Touch",
|
||||
|
||||
"about.title":
|
||||
"About Me",
|
||||
|
||||
"about.description":
|
||||
"Throughout my career I have contributed to corporate systems, critical integrations, process automation and backend platforms focused on performance, scalability and reliability.",
|
||||
|
||||
"work.title":
|
||||
"How I Work",
|
||||
|
||||
"work.architecture.title":
|
||||
"Architecture",
|
||||
|
||||
"work.architecture.description":
|
||||
"Technical planning before implementation.",
|
||||
|
||||
"work.scalability.title":
|
||||
"Scalability",
|
||||
|
||||
"work.scalability.description":
|
||||
"Systems designed for continuous growth.",
|
||||
|
||||
"work.performance.title":
|
||||
"Performance",
|
||||
|
||||
"work.performance.description":
|
||||
"Operational efficiency and resource optimization.",
|
||||
|
||||
"work.security.title":
|
||||
"Security",
|
||||
|
||||
"work.security.description":
|
||||
"Best practices applied from the very beginning.",
|
||||
|
||||
"work.quality.title":
|
||||
"Quality",
|
||||
|
||||
"work.quality.description":
|
||||
"Clean code and simplified maintenance.",
|
||||
|
||||
"metrics.experience":
|
||||
"Years of Experience",
|
||||
|
||||
"metrics.leadership":
|
||||
"Technical Leadership",
|
||||
|
||||
"metrics.cloud":
|
||||
"Oracle Cloud & Azure",
|
||||
|
||||
"metrics.backend":
|
||||
"APIs and Enterprise Systems",
|
||||
|
||||
"specialties.title":
|
||||
"Specialties",
|
||||
|
||||
"experience.title":
|
||||
"Professional Experience",
|
||||
|
||||
"specialties.api":
|
||||
"REST APIs",
|
||||
|
||||
"specialties.architecture":
|
||||
"Software Architecture",
|
||||
|
||||
"specialties.cloud":
|
||||
"Cloud Computing",
|
||||
|
||||
"specialties.devops":
|
||||
"DevOps",
|
||||
|
||||
"specialties.database":
|
||||
"Databases",
|
||||
|
||||
"specialties.microservices":
|
||||
"Microservices",
|
||||
|
||||
"projects.title":
|
||||
"Featured Projects",
|
||||
|
||||
"contact.title":
|
||||
"Let's Talk",
|
||||
|
||||
"contact.description":
|
||||
"Available for professional opportunities and new challenges.",
|
||||
|
||||
"stack.title":
|
||||
"Technology Stack",
|
||||
|
||||
"timeline.senior.title":
|
||||
"Senior Software Engineer",
|
||||
|
||||
"timeline.senior.description":
|
||||
"Development of enterprise systems and backend solutions.",
|
||||
|
||||
"timeline.techlead.title":
|
||||
"Tech Lead",
|
||||
|
||||
"timeline.techlead.description":
|
||||
"Technical leadership and architectural guidance.",
|
||||
|
||||
"timeline.cloud.title":
|
||||
"Cloud & DevOps",
|
||||
|
||||
"timeline.cloud.description":
|
||||
"Infrastructure modernization and automation.",
|
||||
|
||||
"project.sped.title":
|
||||
"SPED Processing Platform",
|
||||
|
||||
"project.sped.description":
|
||||
"Platform responsible for the automated generation and processing of SPED tax files.",
|
||||
|
||||
"project.oracle.title":
|
||||
"Oracle Cloud Infrastructure",
|
||||
|
||||
"project.oracle.description":
|
||||
"Implementation and management of cloud infrastructure.",
|
||||
|
||||
"project.gitea.title":
|
||||
"Private Git Server with Gitea",
|
||||
|
||||
"project.gitea.description":
|
||||
"Private Git environment for version control and team collaboration.",
|
||||
|
||||
"project.api.title":
|
||||
"Enterprise APIs",
|
||||
|
||||
"project.api.description":
|
||||
"Development of REST APIs using Spring Boot.",
|
||||
|
||||
"footer.role":
|
||||
"Senior Software Engineer • Backend Engineer"
|
||||
},
|
||||
|
||||
es: {
|
||||
|
||||
"nav.home": "Inicio",
|
||||
"nav.about": "Acerca de",
|
||||
"nav.specialties": "Especialidades",
|
||||
"nav.experience": "Experiencia",
|
||||
"nav.projects": "Proyectos",
|
||||
"nav.contact": "Contacto",
|
||||
|
||||
"hero.badge":
|
||||
"Programador Senior • Backend Engineer • Tech Lead",
|
||||
|
||||
"hero.title":
|
||||
"Transformando desafíos empresariales en soluciones robustas, escalables y seguras.",
|
||||
|
||||
"hero.description":
|
||||
"Programador Senior con más de 15 años de experiencia en desarrollo backend, arquitectura de software, cloud computing y liderazgo técnico.",
|
||||
|
||||
"hero.projects":
|
||||
"Ver Proyectos",
|
||||
|
||||
"hero.contact":
|
||||
"Contactar",
|
||||
|
||||
"about.title":
|
||||
"Sobre Mí",
|
||||
|
||||
"about.description":
|
||||
"A lo largo de mi carrera participé en sistemas corporativos, integraciones críticas, automatización de procesos y plataformas backend enfocadas en rendimiento, escalabilidad y confiabilidad.",
|
||||
|
||||
"work.title":
|
||||
"Cómo Trabajo",
|
||||
|
||||
"work.architecture.title":
|
||||
"Arquitectura",
|
||||
|
||||
"work.architecture.description":
|
||||
"Planificación técnica antes de la implementación.",
|
||||
|
||||
"work.scalability.title":
|
||||
"Escalabilidad",
|
||||
|
||||
"work.scalability.description":
|
||||
"Sistemas preparados para un crecimiento continuo.",
|
||||
|
||||
"work.performance.title":
|
||||
"Rendimiento",
|
||||
|
||||
"work.performance.description":
|
||||
"Eficiencia operativa y optimización de recursos.",
|
||||
|
||||
"work.security.title":
|
||||
"Seguridad",
|
||||
|
||||
"work.security.description":
|
||||
"Buenas prácticas aplicadas desde la concepción.",
|
||||
|
||||
"work.quality.title":
|
||||
"Calidad",
|
||||
|
||||
"work.quality.description":
|
||||
"Código limpio y mantenimiento simplificado.",
|
||||
|
||||
"metrics.experience":
|
||||
"Años de Experiencia",
|
||||
|
||||
"metrics.leadership":
|
||||
"Liderazgo Técnico",
|
||||
|
||||
"metrics.cloud":
|
||||
"Oracle Cloud y Azure",
|
||||
|
||||
"metrics.backend":
|
||||
"APIs y Sistemas Corporativos",
|
||||
|
||||
"specialties.title":
|
||||
"Especialidades",
|
||||
|
||||
"experience.title":
|
||||
"Experiencia Profesional",
|
||||
|
||||
"specialties.api":
|
||||
"APIs REST",
|
||||
|
||||
"specialties.architecture":
|
||||
"Arquitectura de Software",
|
||||
|
||||
"specialties.cloud":
|
||||
"Computación en la Nube",
|
||||
|
||||
"specialties.devops":
|
||||
"DevOps",
|
||||
|
||||
"specialties.database":
|
||||
"Bases de Datos",
|
||||
|
||||
"specialties.microservices":
|
||||
"Microservicios",
|
||||
|
||||
"projects.title":
|
||||
"Proyectos Destacados",
|
||||
|
||||
"contact.title":
|
||||
"Hablemos",
|
||||
|
||||
"contact.description":
|
||||
"Disponible para oportunidades profesionales y nuevos desafíos.",
|
||||
|
||||
"stack.title":
|
||||
"Stack Tecnológico",
|
||||
|
||||
"timeline.senior.title":
|
||||
"Programador Senior",
|
||||
|
||||
"timeline.senior.description":
|
||||
"Desarrollo de sistemas empresariales y soluciones backend.",
|
||||
|
||||
"timeline.techlead.title":
|
||||
"Tech Lead",
|
||||
|
||||
"timeline.techlead.description":
|
||||
"Liderazgo técnico y apoyo arquitectónico.",
|
||||
|
||||
"timeline.cloud.title":
|
||||
"Cloud & DevOps",
|
||||
|
||||
"timeline.cloud.description":
|
||||
"Modernización de infraestructura y automatización.",
|
||||
|
||||
"project.sped.title":
|
||||
"Plataforma de Procesamiento SPED",
|
||||
|
||||
"project.sped.description":
|
||||
"Plataforma responsable de la generación y procesamiento automatizado de archivos fiscales SPED.",
|
||||
|
||||
"project.oracle.title":
|
||||
"Infraestructura Oracle Cloud",
|
||||
|
||||
"project.oracle.description":
|
||||
"Implementación y gestión de infraestructura en la nube.",
|
||||
|
||||
"project.gitea.title":
|
||||
"Servidor Git Privado con Gitea",
|
||||
|
||||
"project.gitea.description":
|
||||
"Entorno Git privado para control de versiones y colaboración.",
|
||||
|
||||
"project.api.title":
|
||||
"APIs Empresariales",
|
||||
|
||||
"project.api.description":
|
||||
"Desarrollo de APIs REST utilizando Spring Boot.",
|
||||
|
||||
"footer.role":
|
||||
"Senior Software Engineer • Backend Engineer"
|
||||
}
|
||||
};
|
||||
|
||||
function applyLanguage(lang) {
|
||||
|
||||
const dictionary =
|
||||
translations[lang] || translations.pt;
|
||||
|
||||
document
|
||||
.querySelectorAll("[data-i18n]")
|
||||
.forEach(element => {
|
||||
|
||||
const key = element.dataset.i18n;
|
||||
|
||||
if (dictionary[key]) {
|
||||
element.textContent = dictionary[key];
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
document.documentElement.lang = lang;
|
||||
|
||||
localStorage.setItem(
|
||||
"portfolio-language",
|
||||
lang
|
||||
);
|
||||
|
||||
document
|
||||
.querySelectorAll("[data-lang]")
|
||||
.forEach(button => {
|
||||
|
||||
button.classList.remove("active");
|
||||
|
||||
if (button.dataset.lang === lang) {
|
||||
button.classList.add("active");
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
document
|
||||
.querySelectorAll("[data-lang]")
|
||||
.forEach(button => {
|
||||
|
||||
button.addEventListener("click", () => {
|
||||
applyLanguage(button.dataset.lang);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
const savedLanguage =
|
||||
localStorage.getItem(
|
||||
"portfolio-language"
|
||||
);
|
||||
|
||||
applyLanguage(
|
||||
savedLanguage || "pt"
|
||||
);
|
||||
|
||||
});
|
||||
Reference in New Issue
Block a user