https://github.com/fvandrad/vue-arco-iris
🏳️🌈 Uma aplicação web interativa sobre arco-íris
https://github.com/fvandrad/vue-arco-iris
nature page project projeto vue
Last synced: 6 months ago
JSON representation
🏳️🌈 Uma aplicação web interativa sobre arco-íris
- Host: GitHub
- URL: https://github.com/fvandrad/vue-arco-iris
- Owner: fvandrad
- License: mit
- Created: 2025-04-12T22:49:55.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2025-04-12T22:52:31.000Z (6 months ago)
- Last Synced: 2025-04-12T23:27:58.386Z (6 months ago)
- Topics: nature, page, project, projeto, vue
- Language: Vue
- Homepage: https://fvandrad.github.io/arco-iris/
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌈 Trae Arco-Íris
## 📝 Descrição
Uma aplicação web interativa sobre arco-íris, desenvolvida com Vue 3 e TypeScript. O projeto apresenta informações sobre a formação de arco-íris, curiosidades, uma galeria de imagens e muito mais.
## 🛠️ Tecnologias Utilizadas
- ⚡ Vue 3
- 📘 TypeScript
- 🔄 Vite
- 🎨 CSS personalizado
- 🧩 Componentes reutilizáveis
## 🚀 Instalação e Execução
```bash
# Clonar o repositório
git clone https://github.com/seu-usuario/arco-iris.git
# Entrar no diretório
cd arco-iris
# Instalar dependências
npm install
# Iniciar servidor de desenvolvimento
npm run dev
# Compilar para produção
npm run build
# Visualizar versão de produção
npm run preview
```
## 📋 Estrutura do Projeto
```
src/
├── assets/ # 🖼️ Imagens e recursos estáticos
├── components/ # 🧩 Componentes Vue
│ ├── RainbowHeader.vue # 📰 Cabeçalho da aplicação
│ ├── RainbowInfo.vue # ℹ️ Informações sobre arco-íris
│ ├── RainbowColors.vue # 🎨 Cores do arco-íris
│ ├── RainbowFacts.vue # 📚 Fatos interessantes
│ ├── RainbowGallery.vue # 🖼️ Galeria de imagens
│ ├── RainbowFooter.vue # 📝 Rodapé da aplicação
│ └── RainbowParticles.vue # ✨ Efeito de partículas
├── App.vue # 📱 Componente principal
├── main.ts # 🏁 Ponto de entrada da aplicação
└── style.css # 🎨 Estilos globais
```
## ✨ Recursos
- 📱 Design responsivo
- 🖼️ Galeria de imagens interativa
- ℹ️ Informações educativas sobre arco-íris
- 🎨 Visualização das cores do arco-íris
- 📚 Fatos curiosos sobre o fenômeno
- ✨ Efeitos visuais com partículas
- 🔄 Animações suaves
## 🌐 Demo
Acesse a [demonstração online](https://fvandrad.github.io/arco-iris/)
## 📄 Licença
Este projeto está sob a licença MIT.
---
💻 Desenvolvido com ❤️ e ☕