✨ Bruno Henrique | LinkTree Profissional ✨

Página de links moderna e profissional com design glassmorphism, gradientes e animações suaves

🌐 Ver ao vivo

---

📸 Preview

---

✨ Funcionalidades

Recurso	Descrição
🎨 Design Glassmorphism	Cards com efeito de vidro fosco e blur para visual moderno
🌈 Gradientes Dinâmicos	Orbs de luz flutuantes em tons cyan e roxo
📱 100% Responsivo	Adaptação perfeita para mobile, tablet e desktop
✨ Animações AOS	Animações suaves de entrada ao rolar a página
🌧️ Efeito Chuva Sutil	Chuva discreta que não prejudica a leitura
🎵 Player de Música	Controles para reproduzir e pausar áudio
♿ Acessibilidade	Suporte a prefers-reduced-motion e atributos ARIA
🔗 Links Organizados	Portfolio, redes sociais e recursos em cards clicáveis

---

🛠️ Tecnologias Utilizadas

• HTML5 - Estrutura semântica
• CSS3 - Variáveis CSS, Flexbox, Grid, animações
• JavaScript - Interatividade e efeitos
• AOS Library - Animate On Scroll
• Google Fonts - Outfit (tipografia principal) e JetBrains Mono (citações)

---

🎨 Paleta de Cores

Cor	Hex	Uso
Fundo escuro	#0a0a0f	Background principal
Accent Cyan	#00d4ff	Destaques, links, bordas hover
Accent Roxo	#7c3aed	Gradientes secundários
Texto	#ffffff	Conteúdo principal
Glass	rgba(255,255,255,0.05)	Cards e overlays

---

📁 Estrutura do Projeto

LinkTree-main/
├── index.html              # Página principal
├── README.md               # Documentação (este arquivo)
└── src/
    ├── css/
    │   ├── style.css       # Estilos principais (glassmorphism, gradientes)
    │   └── animate-on-scroll.css
    ├── js/
    │   ├── script.js       # Lógica do player e fotos
    │   ├── chuva.js        # Efeito de chuva
    │   └── animate-on-scroll.js
    ├── img/                # Imagens e GIFs
    └── audio/              # Arquivos de áudio

---

🚀 Como Usar

Pré-requisitos

• Navegador moderno (Chrome, Firefox, Edge, Safari)
• Servidor local (opcional, para desenvolvimento)

Instalação

# Clone o repositório
git clone https://github.com/IBrunooDev/Projeto-LinkTree.git

# Entre na pasta
cd LinkTree

# Abra o index.html no navegador
# Ou use um servidor local:
npx serve .

Personalização

1. Alterar links: Edite os href das tags <a> em index.html
2. Trocar foto: Substitua src/img/GIF-1.gif pela sua imagem
3. Mudar cores: Ajuste as variáveis CSS em :root no style.css
4. Adicionar música: Coloque o arquivo de áudio em src/audio/ e atualize o src do <audio>

---

🔗 Links Incluídos

Ícone	Plataforma	Link
💻	Portfolio	ibrunoodev.netlify.app
📸	Instagram	@IBrunooDev
💼	LinkedIn	brunocarus
😼	GitHub	IBrunooDev
🎶	Spotify	Perfil pessoal
🚀	Twitch	ibrunoodev
🎧	Discord	Servidor dos Programadores
📚	OneBitCode	Curso Full Stack

---

📝 Changelog - Melhorias Implementadas

Design

• ✅ Novo layout com glassmorphism (vidro fosco)
• ✅ Gradientes flutuantes (orbs) em cyan e roxo
• ✅ Tipografia profissional: Outfit + JetBrains Mono
• ✅ Cards de links com hover animado e seta indicativa
• ✅ Anel pulsante ao redor da foto de perfil
• ✅ Chuva reduzida e mais sutil (60 gotas, opacidade 15%)

Código

• ✅ HTML semântico com <main>, <header>, <nav>, <section>, <footer>
• ✅ Meta tags para SEO e descrição
• ✅ Remoção de IDs duplicados nos botões
• ✅ Atributos rel="noopener noreferrer" em links externos
• ✅ Variáveis CSS para fácil customização
• ✅ Suporte a prefers-reduced-motion para acessibilidade

UX

• ✅ Layout responsivo otimizado para mobile
• ✅ Transições suaves em todos os elementos interativos
• ✅ Player de música com botões estilizados

---

👨‍💻 Autor

Bruno Henrique • @IBrunooDev

"Work in silence, let success make noise."

---

⭐ Se este projeto te ajudou, considere dar uma estrela no repositório!