Este projeto agora utiliza arquivos JSON separados para gerenciar todo o conteúdo dinâmico da landing page do DevFest. Isso facilita a manutenção e atualização dos dados sem precisar mexer no código React.
src/data/
├── speakers.json # Dados dos palestrantes da versão atual
├── sponsors.json # Patrocinadores por categoria da versão atual
├── communities.json # Comunidades parceiras da versão atual
├── volunteers.json # Informações sobre voluntários da versão atual
├── organizers.json # Equipe organizadora e contatos da versão atual
├── devfest2025/ # Arquivo de backup com os dados do evento anterior
└── devfest2026/ # Novo pacote de dados para o DevFest 2026
Contém informações detalhadas dos palestrantes:
{
"speakers": [
{
"id": 1,
"name": "Nome do Palestrante",
"role": "Cargo",
"company": "Empresa",
"bio": "Biografia detalhada...",
"image": "/images/speakers/nome.jpg",
"track": "web|mobile|cloud",
"social": {
"twitter": "https://twitter.com/handle",
"linkedin": "https://linkedin.com/in/profile",
"github": "https://github.com/username"
},
"talk": {
"title": "Título da Palestra",
"description": "Descrição da palestra...",
"time": "14:30",
"duration": "45min"
}
}
]
}- Abra
src/data/speakers.json - Adicione um novo objeto no array
speakers - Incremente o
id - Adicione a foto em
public/images/speakers/
Organiza patrocinadores por categoria (diamond, gold, silver):
{
"sponsors": {
"diamond": [...],
"gold": [...],
"silver": [...]
},
"sponsorshipTiers": {
"diamond": {
"name": "Patrocinador Diamante",
"price": "R$ 25.000",
"benefits": [...]
}
}
}- Escolha a categoria (diamond/gold/silver)
- Adicione o logo em
public/images/sponsors/ - Adicione o objeto no array correspondente
Dados das comunidades parceiras:
{
"partnerCommunities": [
{
"id": 1,
"name": "Nome da Comunidade",
"description": "Descrição...",
"logo": "/images/communities/logo.png",
"members": 2500,
"founded": "2019",
"location": "São Paulo, SP",
"social": {
"website": "https://site.com",
"instagram": "https://instagram.com/handle"
},
"focus": ["React", "JavaScript", "Frontend"]
}
]
}Informações sobre voluntariado:
{
"volunteers": {
"info": {
"title": "Título da seção",
"description": "Descrição...",
"contactEmail": "voluntarios@gdgsjc.org"
},
"benefits": [...],
"roles": [...],
"requirements": {...},
"timeline": [...]
}
}Dados da equipe organizadora:
{
"organizers": {
"event": {
"name": "DevFest São José dos Campos 2025",
"date": "2025-10-12",
"venue": "UNIVAP"
},
"team": [...],
"advisors": [...],
"contact": {
"general": "contato@gdgsjc.org",
"sponsors": "patrocinio@gdgsjc.org"
},
"social": {
"instagram": "https://instagram.com/gdgsjc"
}
}
}- Edite
speakers.json - Adicione fotos em
public/images/speakers/ - O site será atualizado automaticamente
- Edite
sponsors.json - Adicione logos em
public/images/sponsors/ - Organize por categoria (diamond/gold/silver)
- Edite
communities.json - Adicione logos em
public/images/communities/ - Inclua informações de contato e redes sociais
- Edite
volunteers.json - Atualize benefícios, funções e cronograma
- Modifique requisitos conforme necessário
- Edite
organizers.json - Adicione fotos em
public/images/organizers/ - Atualize informações de contato
public/images/
├── speakers/ # 400x400px, formato JPG/PNG
├── sponsors/ # Logos em alta resolução
├── communities/ # Logos 200x200px
├── organizers/ # 300x300px, formato JPG/PNG
└── placeholder-avatar.jpg # Imagem padrão
- Palestrantes: 400x400px, formato quadrado
- Logos: PNG com fundo transparente
- Otimização: Use ferramentas como TinyPNG
- Nomes: Use kebab-case (nome-sobrenome.jpg)
- Edite os arquivos JSON
- Adicione as imagens na pasta
public/images/ - Teste localmente:
npm run dev - Build:
npm run build - Commit e push para GitHub
- GitHub Pages será atualizado automaticamente
# Desenvolvimento
npm run dev
# Build para produção
npm run build
# Preview da build
npm run preview
# Validar JSON (opcional)
npm install -g jsonlint
jsonlint src/data/speakers.json- Atualizar lista de palestrantes
- Confirmar patrocinadores
- Revisar informações das comunidades
- Atualizar dados de contato
- Testar todos os links
- Otimizar imagens
- Fazer build e deploy
- Fotos dos palestrantes em ação
- Updates nas redes sociais
- Feedback dos participantes
- Adicionar fotos do evento
- Agradecer palestrantes e patrocinadores
- Preparar dados para próxima edição
- Verifique se o arquivo está em
public/images/ - Confirme o nome do arquivo no JSON
- Use caminhos relativos (/images/...)
- Valide a sintaxe JSON
- Verifique se o import está correto no App.jsx
- Confirme a estrutura do objeto JSON
- Execute
npm run buildpara ver erros - Verifique sintaxe JSON
- Confirme que todas as imagens existem
Para dúvidas sobre a estrutura de dados:
- Email: dev@gdgsjc.org
- GitHub: Crie uma issue no repositório
- Slack: Canal #devfest-tech
Desenvolvido com ❤️ pela equipe do GDG São José dos Campos