https://github.com/brunotxrs/dev-links
Este projeto está passando por uma reestruturação completa para aprimorar a organização, separar os estilos corretamente e refatorar toda a estrutura de código. Além disso, a nova versão será construída do zero, aplicando meus próprios conhecimentos e garantindo total autoria do desenvolvimento.
https://github.com/brunotxrs/dev-links
css3 figma git github html5 javascript
Last synced: 3 months ago
JSON representation
Este projeto está passando por uma reestruturação completa para aprimorar a organização, separar os estilos corretamente e refatorar toda a estrutura de código. Além disso, a nova versão será construída do zero, aplicando meus próprios conhecimentos e garantindo total autoria do desenvolvimento.
- Host: GitHub
- URL: https://github.com/brunotxrs/dev-links
- Owner: brunotxrs
- License: mit
- Created: 2024-10-16T02:30:05.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-12T15:22:33.000Z (over 1 year ago)
- Last Synced: 2025-03-12T16:31:20.349Z (over 1 year ago)
- Topics: css3, figma, git, github, html5, javascript
- Language: CSS
- Homepage: https://brunotxrs.github.io/dev-links/
- Size: 21.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: License
Awesome Lists containing this project
README
DevLinks
## Transformando HTML, CSS e JS em React com Estilo!
Este projeto é uma reimaginação do desafio DevLinks do curso **Discover** da Rocketseat, originalmente desenvolvido em **HTML**, **CSS** e **JavaScript** puro. Decidi dar um passo além e reconstruí-lo em **React** para aprimorar minhas habilidades e mergulhar no mundo dos componentes reutilizáveis e estados gerenciados.
## ✨ O Que Há de Novo?
* **React Power:** A estrutura do projeto foi completamente transformada em componentes React, permitindo maior modularidade e reutilização de código.
* **Context API:** Implementei um sistema de temas dinâmico usando a Context API do React, permitindo aos usuários alternar entre os modos claro e escuro com um simples clique.
* **Ionicons:** Adicionei ícones de redes sociais elegantes e modernos com a biblioteca Ionicons, elevando a experiência visual do projeto.
* **Responsividade:** O projeto foi otimizado para funcionar perfeitamente em dispositivos móveis e desktops, garantindo uma experiência consistente em qualquer tela.
## ️ 🛠️ Tecnologias Utilizadas
* **React** → A base da nossa aplicação, oferecendo componentes reutilizáveis e um fluxo de dados unidirecional.
* **CSS3** → Estilização personalizada para criar uma interface atraente e responsiva.
* **Context API →** Para o gerenciamento global do tema, permitindo a fácil alternância entre os modos claro e escuro.
* **Ionicons →** Biblioteca de ícones para adicionar um toque especial aos links sociais.
## 📦 Estrutura de Pastas
```plaintext
devlinks/
├── build/
│ └── ...
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── assets/
│ │ └── ...
│ ├── Container/
│ │ ├── profile/
│ │ ├── switch/
│ │ ├── links/
│ │ ├── social-links/
│ │ └── footer/
│ ├── App.css
│ ├── App.js
│ ├── ...
│ ├── index.js
│ ├── index.css
│ └── ...
├── License
├── package.json
└── README.md
```
## 🧩 Componentes
* **Profile:** Exibe o avatar e o nome de usuário.
* **Switch:** Permite alternar entre os modos claro e escuro.
* **Links:** Lista de links externos personalizados.
* **SocialLinks:** Ícones de links para perfis de redes sociais.
* **Footer:** Rodapé com mensagem de agradecimento e link para o perfil do autor.
## 📷 Preview
Aqui estão algumas capturas de tela do projeto em diferentes dispositivos:
Mobile
Desktop
## 🔖 Layout
Você pode visualizar o layout do projeto [Clicando aqui](https://www.figma.com/community/file/1187422022288947321). É necessário ter conta no [Figma](https://figma.com) para acessá-lo.
### 📜 Licença
Este projeto está sob a licença MIT. Consulte o arquivo [Licença MIT](./License) para obter mais informações.
## ✨ Developer
👨💻 Este projeto foi desenvolvido por Bruno Teixeira como parte do meu portfólio de desenvolvimento Front-End. Sinta-se à vontade para entrar em contato ou contribuir com o projeto!
- [](https://www.linkedin.com/in/brunotxrs/)
- [](https://github.com/brunotxrs)
**Divirta-se explorando o DevLinks em React!**