Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/adrianemaciel/my-portfolio-react-2.0
- Owner: adrianemaciel
- Created: 2024-10-09T03:45:35.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2025-01-07T21:46:45.000Z (about 1 month ago)
- Last Synced: 2025-01-07T22:32:39.908Z (about 1 month ago)
- Topics: material-ui, reactjs, vite
- Language: JavaScript
- Homepage: https://adrianemaciel-personal-portfolio-v2.netlify.app/
- Size: 4.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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
## 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)