Um Passo de Cada Vez: Construindo Meu Cartão de Visitas Digital

Todo desenvolvedor se lembra dos primeiros projetos, aqueles que transformam linhas de código em algo real e funcional. Para mim, o DevLinks, um minicurso gratuito da Rocketseat, foi um desses marcos importantes no início da minha jornada.

Texto Alternativo da Imagem

O desafio era simples, mas muito relevante: construir uma 'árvore de links', um tipo de cartão de visitas online para centralizar todas as minhas redes e projetos. O resultado é um projeto que não só me orgulha, mas que também ensina conceitos fundamentais de HTML, CSS e JavaScript.

O Projeto: Uma Solução Simples e Elegante

A premissa de uma árvore de links é ser um hub central. Em vez de passar vários links diferentes para as pessoas, você envia um único link que contém todos os outros. É prático e profissional.

As tecnologias usadas são a base de todo desenvolvimento web:

HTML: Para a estrutura semântica da página (os links, a foto de perfil, etc.).
CSS: Para a estilização, criando um visual limpo e moderno.
JavaScript: Para adicionar interatividade, a 'mágica' do projeto.

O 'Tchan' do Projeto: Implementando o Dark Mode com JavaScript

A funcionalidade mais legal do DevLinks é, sem dúvida, o seletor de tema (Light e Dark Mode). A lógica por trás é uma excelente introdução à manipulação do DOM com JavaScript.

O conceito é o seguinte:

No CSS, criamos um estilo padrão (Dark Mode) e uma classe extra, por exemplo .light, que sobrescreve as cores para o tema claro.
No HTML, temos um botão (o interruptor).
No JavaScript, adicionamos um 'ouvinte de evento' a esse botão. Quando o botão é clicado, o script simplesmente adiciona ou remove a classe .light do body da página.

Aqui está um trecho simplificado do código que faz isso acontecer:

// Seleciona o botão no HTML
const themeButton = document.getElementById('theme-toggle');
// Seleciona o corpo do documento
const body = document.body;

// Adiciona um evento de 'click'
themeButton.addEventListener('click', () => {
  // A função toggle() adiciona a classe se ela não existir,
  // e remove se ela já existir. É um interruptor!
  body.classList.toggle('light');
});

É uma solução simples, elegante e um ótimo exemplo do poder do JavaScript para criar experiências de usuário dinâmicas.

Do Design à Realidade: A Importância do Figma

Um ponto que adorei no curso foi que a Rocketseat forneceu o layout completo no Figma. Isso simula perfeitamente o ambiente de trabalho real, onde desenvolvedores recebem um design de um profissional de UI/UX e precisam traduzi-lo fielmente em código. Ter essa experiência, mesmo em um projeto de estudo, é fundamental para desenvolver um olhar crítico para os detalhes da interface.

Conclusão

O projeto DevLinks, finalizado em 28 de dezembro de 2022, foi mais do que um simples agregador de links. Foi uma prova de que, com as ferramentas certas e a orientação de plataformas como a Rocketseat, é possível construir projetos funcionais e bonitos desde o início da carreira.

Convido você a conferir o resultado final:

E também conhecer a minha versão da Árvore de links: