Criando o DevLinks: Um Projeto Simples para Alternar Idiomas e Temas na Web

No meu último projeto, realizado durante a formação Discover da Rocketseat sob a orientação do mestre Mayk Brito, desenvolvi uma aplicação chamada DevLinks, que funciona como um portfólio interativo. O objetivo do projeto é fornecer links para redes sociais e portfólio, além de oferecer a funcionalidade de alternar entre dois idiomas (português e inglês) e entre os temas claro e escuro. Neste post, compartilho como desenvolvi a aplicação, as tecnologias que utilizei e as lições que aprendi ao longo do processo.

🚀 Objetivo do Projeto
O objetivo principal do DevLinks era criar um portfólio simples que fosse agradável ao usuário e também funcional. Além disso, queria praticar a criação de uma interface interativa, onde o usuário pudesse alternar entre diferentes idiomas e temas.

O projeto é composto por três partes principais:

1. Alternância de Tema: O usuário pode alternar entre o tema claro e escuro.
2. Alternância de Idioma: O usuário pode alternar entre os idiomas português e inglês.
3. Links de Redes Sociais e Portfólio: O projeto exibe links para o meu portfólio e redes sociais, como GitHub, Instagram e LinkedIn.

💻 Tecnologias Utilizadas

Aqui estão as tecnologias que utilizei para desenvolver o DevLinks:

• HTML5: Para estruturar a página.
• CSS3: Para estilizar e criar uma experiência de usuário agradável.
• JavaScript: Para implementar a alternância de temas e idiomas.
• Ionicons: Para adicionar ícones de redes sociais.
• Google Fonts: Para melhorar a legibilidade do texto, usando a fonte "Inter". A combinação dessas tecnologias é poderosa o suficiente para criar uma aplicação simples, mas funcional, com uma interface limpa e interativa.

🎨 Como Funciona a Alternância de Tema

A alternância de tema foi implementada utilizando a manipulação de classes CSS com JavaScript. O tema claro é o padrão, e o tema escuro é ativado quando o usuário clica no botão de alternância. Quando o tema é alterado, as cores de fundo, texto e outros elementos na página também mudam.

Aqui está o código que manipula a alternância de tema:

document.getElementById('button_switch').addEventListener('click', () => {
  const html = document.documentElement;
  html.classList.toggle('light'); // Alterna a classe 'light' para tema claro/escuro
});

Além disso, usamos ícones de lua e sol para ilustrar o tema atual e permitir uma interação visual mais interessante.

🌍 Como Funciona a Alternância de Idioma

Para a alternância de idioma, usei um objeto translations que contém as traduções em português e inglês. Quando o usuário clica no botão para alterar o idioma, a página é atualizada com o texto correspondente.

Aqui está a função que lida com a alternância de idioma:

document.getElementById('pt-btn').addEventListener('click', () => {
  loadTranslations('pt');
});

document.getElementById('en-btn').addEventListener('click', () => {
  loadTranslations('en');
});

function loadTranslations(language) {
  document.querySelectorAll('[data-key]').forEach((element) => {
    const key = element.getAttribute('data-key');
    if (translations[language][key]) {
      element.textContent = translations[language][key];
    }
  });
}

O texto da página é atualizado sempre que o usuário altera o idioma, e todos os elementos com o atributo data-key são substituídos pela tradução correta.

📱 Responsividade

O DevLinks foi projetado para ser completamente responsivo. Usando CSS, o layout se ajusta automaticamente a diferentes tamanhos de tela, seja em um desktop ou em dispositivos móveis.

Aqui está uma parte importante do código CSS para garantir que a página seja responsiva:

@media (max-width: 768px) {
  body {
    background: url('assets/bg-mobile.jpg') no-repeat center center fixed;
    background-size: cover;
  }
}

Essa abordagem ajuda a garantir que o fundo da página se ajuste bem a dispositivos móveis, mantendo a experiência de usuário fluida e agradável.

📝 Conclusão

O DevLinks é um exemplo simples de como você pode criar um portfólio interativo que oferece funcionalidades adicionais, como alternância de temas e idiomas. Este projeto me ajudou a aprender mais sobre manipulação de DOM, uso de variáveis CSS e criação de interfaces responsivas.

Se você está começando a aprender HTML, CSS e JavaScript, eu recomendo fortemente tentar criar algo semelhante. É uma ótima maneira de praticar suas habilidades e aprender como trabalhar com interatividade em páginas da web.

Você pode conferir o código-fonte do DevLinks no meu GitHub.

Se você tem algum feedback ou gostaria de colaborar de alguma forma, fique à vontade para me chamar! 😊

🔧 Próximos Passos

• Adicionar mais idiomas à aplicação.
• Melhorar a animação de transição entre os temas.
• Explorar o uso de frameworks como React ou Vue.js para criar projetos mais complexos.