Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/adrianemaciel/my-portfolio-react-2.0

My personal portfolio React 2.0
https://github.com/adrianemaciel/my-portfolio-react-2.0

material-ui reactjs vite

Last synced: about 1 month ago
JSON representation

My personal portfolio React 2.0

Awesome Lists containing this project

README

        

# Meu Portfólio Pessoal Versao 2.0

Bem-vindo ao meu portfólio pessoal! Este projeto foi desenvolvido para mostrar minhas habilidades e projetos em desenvolvimento web.

## Tecnologias Utilizadas

- **React**: Uma biblioteca JavaScript para construir interfaces de usuário.
- **Vite**: Uma ferramenta de build que oferece um ambiente de desenvolvimento rápido e otimizado para projetos em React.
- **Material-UI**: Uma biblioteca de componentes React que implementa o Material Design, facilitando a criação de interfaces modernas e responsivas.
- **Framer Motion**: Uma biblioteca para animações em React que permite criar transições fluidas e interações envolventes.
- **EmailJS**: Para integrar um formulário de contato funcional que envia e-mails diretamente.
- **React-Scroll**: Utilizado para navegação suave entre seções.

## Desafios e Soluções
### Desafios:
### 1. Implementar navegação em dispositivos móveis com Drawer:

- **Solução**: Implementação de um Drawer que fecha automaticamente ao clicar em uma seção, melhorando a experiência do usuário.

### 2. Envio de e-mails pelo formulário de contato:

- **Solução**: Configuração do EmailJS para garantir a funcionalidade de envio. Utilização de feedback visual com Snackbar para informar o sucesso ou falha.

### 3. Manter o código organizado:

- **Solução**: Separação dos componentes em arquivos específicos para maior modularidade e reuso.

### 4. Animações em viewport:

- **Solução**: Uso do react-intersection-observer para ativar animações somente quando os elementos estão visíveis no viewport, melhorando a performance.

## Aprendizados
- Uso avançado do Material-UI, incluindo theming, breakpoints personalizados e componentes reutilizáveis.
- Melhoria nas práticas de organização e modularização do código, em projetos React.
- Integração de ferramentas como EmailJS e Snackbar para criar uma experiência funcional e dinâmica.
- Desenvolvimento de componentes acessíveis e responsivos para diferentes dispositivos.

## Demonstração

Captura de Tela do Portfólio

## Instalação

Para rodar este projeto localmente, siga as etapas abaixo:

1. Clone o repositório:

```bash
git clone https://github.com/adrianemaciel/my-portfolio-react-2.0.git

```

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

```bash
cd my-portfolio-react-2.0

```

3. Instale as dependências:

```bash
npm install

```

4. Inicie o servidor de desenvolvimento:

```bash
npm run dev

```

5. Abra o navegador e acesse:

```bash
http://localhost:5173

```

## Contribuição

Se você quiser contribuir para este projeto, sinta-se à vontade para abrir um pull request ou enviar um problema. Qualquer feedback é bem-vindo!

## Status do projeto

Projeto concluído e em constante evolução para integrar novos aprendizados e funcionalidades.

## Contato

Você pode me encontrar nas seguintes redes sociais:

- [Email](mailto:[email protected]@gmail.com)
- [LinkedIn](https://www.linkedin.com/in/adrianemacieldeveloper)