Site profissional de tarot da Luaé, desenvolvido com foco em performance, SEO e experiência do usuário.
- Design Responsivo - Funciona perfeitamente em todos os dispositivos
- Performance Otimizada - Imagens comprimidas, CSS/JS minificados
- SEO Otimizado - Meta tags, sitemap, robots.txt
- Cache Inteligente - Service Worker para cache offline
- Acessibilidade - Navegação por teclado, contraste adequado
- Estrutura Modular - Código organizado e fácil de manter
site_tarot/
├── 📁 src/ # Código fonte
│ ├── 📁 assets/ # Recursos estáticos
│ │ ├── 📁 css/ # Estilos modulares
│ │ ├── 📁 js/ # JavaScript modulares
│ │ └── 📁 images/ # Imagens
│ ├── 📁 pages/ # Páginas adicionais
│ └── index.html # Página principal
├── 📁 dist/ # Arquivos de produção
├── 📁 scripts/ # Scripts de build
├── 📁 docs/ # Documentação
└── 📄 package.json # Configurações do projeto
# Iniciar servidor de desenvolvimento
npm run dev
# Limpar arquivos de build
npm run clean# Build básico (concatenar arquivos)
npm run build
# Build com minificação
npm run build:minify
# Build completo (otimizar imagens + concatenar + minificar)
npm run build:full
# Deploy (mesmo que build:full)
npm run deploy# Otimizar imagens
npm run optimize-images
# Minificar arquivos
npm run minifynpm install# Iniciar servidor local
npm run dev
# Acessar: http://localhost:3000# Build completo
npm run build:full
# Os arquivos otimizados estarão em ./dist/# Fazer deploy (build completo)
npm run deploy
# Fazer upload da pasta ./dist/ para o servidor- ✅ Imagens comprimidas (62.8% de redução)
- ✅ CSS/JS minificados
- ✅ Lazy loading de imagens
- ✅ Preload de recursos críticos
- ✅ Cache inteligente (Service Worker)
- ✅ Meta tags otimizadas
- ✅ Sitemap.xml
- ✅ Robots.txt
- ✅ Estrutura semântica
- ✅ Open Graph tags
- ✅ Navegação por teclado
- ✅ Contraste adequado
- ✅ Alt text em imagens
- ✅ ARIA labels
- HTML5 - Estrutura semântica
- CSS3 - Estilos modulares e responsivos
- JavaScript ES6+ - Funcionalidades interativas
- Node.js - Scripts de build
- Sharp - Otimização de imagens
O site é totalmente responsivo e funciona perfeitamente em:
- 📱 Mobile (320px+)
- 📱 Tablet (768px+)
- 💻 Desktop (1024px+)
- 🖥️ Large screens (1200px+)
- Netlify - Hospedagem gratuita para sites estáticos
- Vercel - Deploy automático
- GitHub Pages - Totalmente gratuito
- Hostinger - R$ 8-15/mês
- GoDaddy - R$ 10-20/mês
- Locaweb - R$ 15-25/mês
Adicione o código do Google Analytics no <head> do HTML:
<!-- Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>- Adicione o site ao Google Search Console
- Verifique a propriedade via HTML tag
- Envie o sitemap.xml
- Edite os arquivos em
src/ - Execute
npm run build:full - Faça upload da pasta
dist/
- Crie módulos em
src/assets/js/ - Adicione estilos em
src/assets/css/ - Atualize o build script se necessário
- Teste com
npm run dev
Para dúvidas ou suporte:
- 📧 Email: [seu-email@exemplo.com]
- 📱 WhatsApp: [seu-número]
- 🌐 Site: [seu-site.com]
Este projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
- Sempre faça suas alterações nos arquivos dentro da pasta
src/(HTML, CSS, JS, imagens, etc). - NUNCA edite manualmente os arquivos da raiz do projeto (ex:
index.html,script.min.js,styles.min.css). - Após editar, rode
npm run buildpara gerar/atualizar os arquivos finais na raiz. - O Hostinger serve os arquivos da raiz — é isso que vai para produção.
- A pasta
dist/foi removida e não deve ser usada. Ignore qualquer instrução antiga que mencionedist.
Resumo do fluxo:
- Edite em
src/ - Rode
npm run build - Faça o deploy dos arquivos da raiz
Desenvolvido com ❤️ para Luaé Tarot