DevLinks

Projeto desenvolvido durante os estudos da trilha Discover, da Rocketseat. A aplicação funciona como uma página de links pessoais, reunindo redes sociais, portfólio e canal do YouTube em uma interface simples, responsiva e com alternância entre tema claro e escuro.

Preview

A página exibe um perfil com avatar, nome de usuário, botões de navegação para links externos, ícones sociais e um switch para mudar o tema visual.

Funcionalidades

• Perfil com foto e nome de usuário.
• Links para LinkedIn, GitHub/portfólio, Instagram e YouTube.
• Ícones sociais usando Ionicons.
• Alternância entre tema claro e escuro.
• Troca dinâmica do avatar conforme o tema selecionado.
• Imagens de fundo diferentes para modo claro, modo escuro, mobile e desktop.

Tecnologias utilizadas

• HTML5
• CSS3
• JavaScript
• Google Fonts
• Ionicons
• Git/GitHub
• Figma

Estrutura do projeto

.
├── assets/
│   ├── avatar.png
│   ├── avatar-light.png
│   ├── bg-desktop.jpg
│   ├── bg-desktop-light.jpg
│   ├── bg-mobile.jpg
│   ├── bg-mobile-light.jpg
│   ├── moon-stars.svg
│   └── sun.svg
├── index.html
├── script.js
├── style.css
└── README.md

Como executar

Como este é um projeto estático, não é necessário instalar dependências ou rodar um processo de build.

1. Clone o repositório:

git clone <url-do-repositorio>

2. Acesse a pasta do projeto:

cd discover-rocketseat

3. Abra o arquivo index.html no navegador.

Também é possível usar a extensão Live Server no VS Code para visualizar o projeto com recarregamento automático.

Aprendizados

Este projeto reforça conceitos fundamentais de desenvolvimento web, como estruturação semântica com HTML, estilização com variáveis CSS, responsividade, uso de assets locais e manipulação do DOM com JavaScript.

Autor

Desenvolvido por Everton Oliveira.