Uma plataforma moderna para compartilhar e descobrir projetos de desenvolvimento, permitindo que desenvolvedores publiquem seus trabalhos com imagens, descrições e tags organizadas.
📚 Projeto Educacional: Este é um projeto de estudo focado no aprendizado de desenvolvimento web. A funcionalidade de publicação é simulada para fins de demonstração.
Acesse a aplicação em funcionamento: https://code-connect-js.vercel.app
- Upload de Imagens: Interface para simular o carregamento de imagens dos projetos
- Formulário de Publicação: Campos para nome, descrição e tags do projeto
- Sistema de Tags: Demonstração de organização por categorias
- Navegação Lateral: Menu com diferentes seções da aplicação
- Design Responsivo: Interface adaptada para diferentes dispositivos
⚠️ Nota: As funcionalidades são simuladas para fins de aprendizado. Não há conexão com banco de dados ou sistema de publicação real.
O projeto utiliza um tema escuro moderno com:
- Paleta de Cores:
- Fundo principal:
#00090E - Verde principal:
#81FE88 - Cinza secundário:
#888888 - Containers:
#171D1F
- Fundo principal:
- Tipografia: Fonte "Prompt" do Google Fonts
- Layout: Design clean com foco na usabilidade
codeconnect/
├── index.html # Página principal
├── styles.css # Estilos CSS
├── scripts.js # Funcionalidades JavaScript
└── img/ # Imagens e ícones
├── Logo.svg
├── feed.svg
├── account_circle.svg
├── info.svg
├── logout.svg
├── upload.svg
├── trash.svg
├── arrow_forward2.svg
├── close.svg
└── imagem1.png
- HTML5: Estrutura semântica da página
- CSS3: Estilização com variáveis CSS e Flexbox
- JavaScript: Interatividade e funcionalidades dinâmicas
- Google Fonts: Tipografia "Prompt"
- Menu lateral com navegação
- Área de upload de imagens com preview
- Formulário para detalhes do projeto
- Sistema de tags dinâmico
- Botões de ação (Descartar/Publicar)
- Layout responsivo com Flexbox
- Variáveis CSS para fácil manutenção
- Estrutura semântica HTML5
- Design system consistente
- Upload de Imagem: Clique no botão "Carregar imagem" para simular a seleção de uma imagem
- Preencher Dados: Adicione o nome e descrição do projeto nos campos
- Adicionar Tags: Experimente o sistema de tags para categorizar projetos
- Simular Publicação: Clique em "Publicar" para ver a interação (funcionalidade simulada)
💡 Aprendizado: Este projeto demonstra conceitos de HTML semântico, CSS moderno e JavaScript básico para manipulação do DOM.
- Clone ou baixe os arquivos do projeto
- Certifique-se de que todas as imagens estão na pasta
img/ - Abra o
index.htmlem um navegador web - A aplicação estará pronta para uso
O projeto está hospedado na Vercel para fácil acesso e demonstração. Para fazer seu próprio deploy:
- Faça fork/clone do repositório
- Conecte com sua conta Vercel
- Configure o deploy automático
- Acesse sua URL personalizada
O design foi pensado para funcionar bem em diferentes tamanhos de tela, com layout flexível que se adapta aos dispositivos.
Para personalizar o tema, edite as variáveis CSS no arquivo styles.css:
:root {
--background-color: #00090E;
--text-color: #E1E1E1;
--primary-color: #81FE88;
--secondary-color: #888888;
/* ... outras variáveis */
}Mauricio Grass de Bronstein
Desenvolvedor em formação - Projeto desenvolvido durante o processo de aprendizado em desenvolvimento web
Este projeto foi criado como parte do processo de aprendizado em desenvolvimento web, focando em:
- Estruturação HTML semântica
- Estilização CSS moderna com variáveis e Flexbox
- Interatividade básica com JavaScript
- Design responsivo e user experience
- Organização de código e boas práticas
CodeConnect - Conectando desenvolvedores através de seus projetos! 🚀