Imagesgram

Um clone simples e focado do Instagram, construído com HTML, CSS e JavaScript.

Índice

• Sobre o Imagesgram
• Funcionalidades
• Tecnologias Utilizadas
• Pré-requisitos
• Como Executar
• Próximos Passos
• Contribuição
• Autor
• Licença

Sobre o Imagesgram

O Imagesgram é um projeto pessoal com o objetivo de replicar as funcionalidades essenciais do popular aplicativo Instagram, focando na exibição de fotos de perfil em um formato de grade responsivo. Este projeto serve como um exercício prático para aprimorar minhas habilidades em desenvolvimento front-end, explorando conceitos de layout, estilização e interatividade com JavaScript.

Funcionalidades

As seguintes funcionalidades já foram implementadas:

• Layout de Perfil: Exibição de informações básicas do perfil (nome de usuário, nome completo, bio, estatísticas).
• Grade de Posts: Layout de grade de três colunas para exibir as miniaturas das fotos do perfil.
• Visualização Ampliada: Ao clicar em uma miniatura, a imagem é exibida em um modal sobre a tela.
• [Outras funcionalidades que você já tem, ex: Abas (Posts, Reels, Tagged)]

Próximas funcionalidades planejadas:

• Carregamento dinâmico de mais posts (infinite scrolling ou paginação).
• Funcionalidade de comentar nas fotos ampliadas.
• [Outras funcionalidades que você pretende adicionar]

Tecnologias Utilizadas

• HTML: Estrutura da página web.
• CSS: Estilização e layout, incluindo Flexbox para a grade de posts e posicionamento para o modal.
• JavaScript: Interatividade, manipulação do DOM para carregamento dinâmico e controle do modal.
• [Outras tecnologias, ex: Font Awesome para ícones]

Pré-requisitos

Para visualizar o Imagesgram no seu navegador, você precisará de:

• Um navegador web moderno (Chrome, Firefox, Safari, Edge).

Como Executar

1. Clone este repositório para o seu computador:

   git clone [https://docs.github.com/articles/referencing-and-citing-content](https://docs.github.com/articles/referencing-and-citing-content)

2. Navegue até o diretório do projeto:

   cd imagesgram

3. Abra o arquivo index.html (ou profile.html, dependendo do que você quer visualizar inicialmente) no seu navegador web.

Próximos Passos

Estou trabalhando em adicionar as seguintes funcionalidades:

• Implementação da seção de Reels.
• Adição da aba de fotos "Tagged".
• Melhorias na estilização e responsividade para diferentes dispositivos.

Contribuição

Contribuições são bem-vindas! Se você tiver alguma sugestão de melhoria, correção de bugs ou novas funcionalidades, sinta-se à vontade para abrir uma issue ou enviar um pull request.

1. Faça um fork do repositório.
2. Crie uma branch com a sua funcionalidade (git checkout -b feature/sua-funcionalidade).
3. Faça commit das suas alterações (git commit -am 'Adiciona nova funcionalidade').
4. Faça push para a branch (git push origin feature/sua-funcionalidade).
5. Abra um pull request.

Autor

• Noob Criativo

Licença

Este projeto está sob a licença GNU General Public License v3.0 - veja o arquivo LICENSE.md para detalhes.