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:
Alternância de Tema: O usuário pode alternar entre o tema claro e escuro.
Alternância de Idioma: O usuário pode alternar entre os idiomas português e inglês.
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.
SOCIAL SHARE CARD GENERATOR