4zero4! 🎸

     

Website da banda 4zero4!, projetado em formato One Page, com o objetivo de fortalecer a presença digital da banda, centralizando todas as informações principais e meios de contatos em uma navegação fluida e intuitiva.

  Projeto   |      Funcionalidades   |      Tecnologias   |      Estrutura

PROJETO

O objetivo desta refatoração (v2.0) foi transformar um código de iniciante em um case de nível profissional, aplicando as melhores práticas de desenvolvimento front-end, focado em performance, acessibilidade (A11y) e SEO técnico, conforme minha expansão de conhecimentos e habilidades técnicas na programação.

• 🌐 Acesse o Website

FUNCIONALIDADES

• 🎬 Vídeo de Fundo (seção Home): Otimizado com preload para melhor performance.
• 🎤 Cards Interativos: Apresentação dos integrantes, discografia e agenda de shows.
• 📸 Galeria de Fotos: Com transição fade suave e navegação completa por clique e teclado.
• 📞 Formulário de Contato: Funcional e integrado com Formspree.
• 📱 Responsividade: Design adaptável a todos os dispositivos.
• ♿ Acessibilidade (A11y): Navegação por teclado, aria-labels e estrutura semântica.
• 👀 Reveal-on-Scroll: Animações de carregamento de seção usando `IntersectionObserver.

TECNOLOGIAS E FERRAMENTAS

• HTML5 → Estrutura semântica, acessível e otimizada para SEO com JSON-LD.
• CSS3 → Estilização moderna (CSS Nesting, Variáveis Globais), animações 3D (transform) e responsividade.
• JavaScript (ES6+) → Código (Vanilla JS) para todas as interatividades (menu, galeria, formulário, reveal) e manipulação do DOM.
• Git/GitHub → Versionamento de código.
• Vercel → Deploy oficial do site com otimização e minificação automáticas.
• Formspree → Integração do formulário de contato.

---

ESTRUTURAÇÃO DO PROJETO

📁 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                   # Documentação
└── LICENSE                     # Licença

---

📝 LICENÇA

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.

🧑🏻‍💻 AUTOR

Desenvolvido por Lucas Code.