https://github.com/benevanio/bene-tesla-dev
https://github.com/benevanio/bene-tesla-dev
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/benevanio/bene-tesla-dev
- Owner: Benevanio
- Created: 2025-01-01T17:10:45.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2025-01-01T17:21:47.000Z (11 months ago)
- Last Synced: 2025-06-05T11:46:58.990Z (6 months ago)
- Language: JavaScript
- Homepage: https://bene-tesla-dev.vercel.app
- Size: 62.5 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Entendido! Se o seu projeto é feito em React, mas não está utilizando o **Node.js** diretamente, a estrutura e as instruções para rodar o projeto serão um pouco diferentes. Abaixo está a versão corrigida do README, considerando que você não está utilizando **Node.js** diretamente e apenas está utilizando **React** (presumivelmente com o Create React App ou outro boilerplate similar).
```markdown
# @Bene_Tesla_Dev
Bem-vindo ao repositório do site **@Bene_Tesla_Dev**! Este é um site simples desenvolvido com **React**. O site possui uma navegação interativa com componentes reutilizáveis, incluindo um **Navbar** e um **Footer**. Além disso, apresenta páginas como **Home**, **About** e **Contact**, e um efeito visual de círculo na imagem de perfil.
## Descrição
Este site foi criado para demonstrar a utilização de componentes React, com navegação entre páginas e efeitos visuais, como o círculo animado na imagem. O projeto usa **React Router** para a navegação entre as páginas e **CSS** para o estilo visual.
## Funcionalidades
- **Navbar e Footer reutilizáveis**: Componentes de navegação e rodapé que podem ser usados em todas as páginas.
- **Página Home**: Exibe uma imagem de perfil com um efeito de círculo e uma introdução.
- **Página About**: Contém informações sobre o site ou o autor.
- **Página Contact**: Oferece informações de contato ou um formulário de contato.
- **Efeito de círculo na imagem**: Imagem de perfil com bordas arredondadas e animações de hover.
- **Design responsivo**: O layout é responsivo e se adapta a diferentes dispositivos utilizando o `viewport`.
## Tecnologias Usadas
- **React**: Biblioteca para a construção da interface de usuário.
- **React Router**: Para navegação entre as páginas Home, About e Contact.
- **CSS**: Estilos e animações aplicadas à página e aos componentes.
## Como Rodar o Projeto
Este projeto foi criado com o **Create React App**. Para rodar o projeto localmente, siga os seguintes passos:
### Passos para rodar o projeto localmente
1. Clone o repositório:
```bash
git clone https://github.com/Benevanio/bene-tesla-dev
cd bene_tesla_dev
```
2. Instale as dependências:
Embora o **Node.js** não seja necessário diretamente para rodar o projeto, você deve ter o ambiente do **React** instalado. Caso não tenha, basta executar:
```bash
npm install
```
Ou, se você estiver usando o **yarn**, basta executar:
```bash
yarn install
```
3. Inicie o servidor de desenvolvimento:
Execute o comando abaixo para rodar a aplicação no modo de desenvolvimento:
```bash
npm start
```
Ou com **yarn**:
```bash
yarn start
```
4. Abra o navegador e acesse:
```
http://localhost:3000
```
## Estrutura de Pastas
A estrutura do projeto está organizada da seguinte forma:
```
/bene_tesla_dev
│
├── /public # Arquivos públicos e estáticos (como favicon e imagem de perfil)
├── /src # Código fonte, incluindo arquivos JSX
│ ├── /components # Componentes reutilizáveis (Navbar, Footer)
│ │ ├── Navbar.jsx # Componente Navbar
│ │ └── Footer.jsx # Componente Footer
│ ├── /pages # Páginas do site (Home, About, Contact)
│ │ ├── Home.jsx # Página inicial
│ │ ├── About.jsx # Página sobre
│ │ └── Contact.jsx # Página de contato
│ └── App.jsx # Componente principal, onde o React Router é configurado
│
└── index.html # Estrutura HTML básica do projeto
```
## Navegação entre as Páginas
O site utiliza **React Router** para navegação entre as páginas. As páginas disponíveis são:
- **Home** (`/`)
- **About** (`/about`)
- **Contact** (`/contact`)
## Customizações
- Para mudar a imagem de perfil, substitua o arquivo `/public/images.jpg` por outro arquivo de imagem ou altere o caminho da imagem no código HTML.
- O tamanho da imagem pode ser ajustado na classe `.img` no arquivo CSS.
- A navegação do site pode ser personalizada editando o componente `Navbar.jsx` na pasta `components`.
- O conteúdo das páginas **Home**, **About** e **Contact** pode ser modificado diretamente nos arquivos `Home.jsx`, `About.jsx` e `Contact.jsx`.
## Contribuindo
Se você gostaria de contribuir para o projeto, fique à vontade para fazer um **fork** do repositório, realizar suas alterações e enviar um **pull request**.
## Licença
Este projeto está licenciado sob a [Licença MIT](LICENSE).
---
Obrigado por conferir o site **@Bene_Tesla_Dev**! Sinta-se à vontade para personalizar e expandir conforme sua necessidade.
```