Website oficial da banda 4zero4!
Experiência digital focada na retenção e engajamento, com centralização dos principais canais e infos da banda
Projeto | Funcionalidades | Tecnologias | Estrutura
Website oficial da banda 4zero4!, desenvolvido em formato One Page para centralizar informações, fortalecer a presença digital e conectar fãs à energia do Punk Rock. O projeto foi completamente refatorado antes do lançamento final, elevando o código a um padrão profissional com foco em performance, acessibilidade e SEO técnico.
- Experiência imersiva — vídeo de fundo otimizado com
preloade animações de entrada viaIntersectionObserver - Cards interativos — apresentação dos integrantes, canais de contato, discografia e agenda de shows
- Galeria de fotos — transição fade suave com navegação por clique e teclado
- Formulário de contato — funcional e integrado com Formspree
- Acessibilidade — navegação por teclado,
aria-labelse estrutura semântica - Layout responsivo — interface adaptada para todos os dispositivos
| Tecnologia | Uso |
|---|---|
| HTML5 | Estrutura semântica, acessível e otimizada para SEO com JSON-LD |
| CSS3 | Estilos com CSS Nesting, variáveis globais e animações 3D |
| JavaScript ES6+ | Vanilla JS para todas as interatividades |
| Formspree | Integração do formulário de contato |
| Git/Github | Versionamento de código |
| Vercel | Deploy com otimização e minificação automáticas |
📁 4zero4
├── 📁 docs
│ ├── 📂 assets
│ │ ├── 📁 docs → Arquivos (Press Kit)
│ │ ├── 📁 fonts → Fontes
│ │ ├── 📁 img → Imagens (separadas por seção)
│ │ └── 📁 videos → Vídeos
│ ├── 📂 src
│ │ ├── 📂 css
│ │ │ └── style.css → Código CSS para estilização do projeto
│ │ └── 📂 js
│ │ ├── form.js → Código JS para funcionalidade do formulário
│ │ ├── gallery.js → Código JS para funcionalidade da galeria de fotos
│ │ ├── menu.js → Código JS para funcionalidade do menu e header
│ │ └── reveal.js → Código JS para funcionalidade do reveal do conteúdo
│ ├── 📁 dist
│ │ ├── 📂 css
│ │ │ └── style.min.css → Código CSS minificado
│ │ └── 📂 js
│ │ ├── form.min.js → Código JS para funcionalidade do formulário minificado
│ │ ├── gallery.min.js → Código JS para funcionalidade da galeria de fotos minificado
│ │ ├── menu.min.js → Código JS para funcionalidade do menu e header minificado
│ │ └── reveal.min.js → Código JS para funcionalidade do reveal do conteúdo minificado
│ └── index.html → Página principal
├── README.md
└── LICENSE
Este projeto é público apenas para fins de portfólio do desenvolvedor. Todos os direitos sobre conteúdo visual e textual pertencem exclusivamente à banda 4zero4!. É proibida a cópia, reprodução ou uso do conteúdo sem autorização expressa.
Desenvolvido por Lucas Couto.
Conheça meu trabalho em Lucas Code.