├── .vscode └── settings.json ├── README.md ├── assets ├── databases │ ├── firebase.png │ ├── mariadb.png │ ├── microsoftsql.png │ ├── mongodb.png │ ├── mysql.png │ ├── oracle.png │ ├── postgree.png │ ├── redis.png │ └── sqlite.webp ├── frameworks │ ├── angular.png │ ├── bootstrap.png │ ├── django.png │ ├── express.png │ ├── flask.png │ ├── flutter.png │ ├── jquery.png │ ├── laravel.png │ ├── next.png │ ├── react.webp │ ├── ruby_on_rails.png │ └── vue.png ├── ias │ ├── alexa.png │ ├── chatgpt.png │ ├── claude.webp │ ├── copilot.png │ ├── gemini.png │ ├── googleai.png │ ├── jasper.png │ ├── midjourney.png │ └── siri.png ├── ides │ ├── androidstudio.png │ ├── atom.png │ ├── eclipse.png │ ├── intellij.png │ ├── netbeans.png │ ├── pycharm.png │ ├── sublimetext.png │ ├── visualstudio.png │ ├── vscode.png │ └── xcode.png ├── langs │ ├── c++.png │ ├── c.png │ ├── csharp.png │ ├── dart.png │ ├── go.png │ ├── haskell.png │ ├── java.png │ ├── javascript.png │ ├── kotlin.png │ ├── lua.png │ ├── php.png │ ├── python.png │ ├── ruby.png │ ├── swift.png │ └── typescript.png ├── page │ ├── clone.png │ ├── github.png │ ├── head.png │ ├── icone.ico │ └── logo.png └── readme │ ├── imersao.webp │ ├── readme.png │ └── readme_2.png ├── bancos.html ├── fonts ├── Hubot-Sans.ttf ├── Hubot-Sans.woff2 ├── Mona-Sans.ttf └── Mona-Sans.woff2 ├── frameworks.html ├── ias.html ├── ides.html ├── index.html ├── linguagens.html ├── scripts ├── bancos.js ├── frameworks.js ├── ias.js ├── ides.js ├── linguagens.js ├── mode.js ├── mode_index.js ├── script_banco.js ├── script_framework.js ├── script_ias.js ├── script_ide.js └── script_linguagem.js └── style.css /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [🌌 DEVSPACE](https://devspaceee.vercel.app) 2 | 3 | **DEVSPACE** é uma plataforma que reúne as principais ferramentas do mundo do desenvolvimento. Navegue por **linguagens de programação**, **bancos de dados**, **frameworks**, **ambientes de desenvolvimento**, e **inteligências artificiais** em um ambiente com visual **simples, agradável e intuitivo**. 4 | 5 | ![DEVSPACE](assets/readme/readme.png) 6 | 7 | ## Como usar 8 | 9 | Para começar a utilizar o **DEVSPACE**, siga as etapas descritas na imagem abaixo. Ela fornece um guia visual sobre como explorar e aproveitar ao máximo a plataforma. 10 | 11 | ![DEVSPACE](assets/readme/readme_2.png) 12 | 13 | ## Funcionalidades 14 | 15 | O **DEVSPACE** oferece uma funcionalidade principal: explorar ferramentas de desenvolvimento por meio de módulos organizados. Você pode acessar e descobrir informações detalhadas sobre: 16 | 17 | - **Linguagens de Programação**: Conheça as linguagens mais populares e suas características. 18 | - **Bancos de Dados**: Encontre informações sobre diversos tipos de bancos de dados, desde SQL até NoSQL. 19 | - **Frameworks**: Descubra frameworks que podem acelerar o desenvolvimento de suas aplicações. 20 | - **IDEs**: Explore as principais ferramentas de desenvolvimento e encontre a que melhor se adapta às suas necessidades. 21 | - **IAs**: Conheça soluções de inteligência artificial que podem aprimorar seu fluxo de trabalho no mundo dev. 22 | 23 | ### Responsividade 24 | 25 | O **DEVSPACE** foi projetado para ser totalmente responsivo, oferecendo uma excelente experiência de navegação em desktops, tablets e dispositivos móveis. A interface se ajusta automaticamente ao tamanho da tela, garantindo que você possa explorar as ferramentas de forma confortável em qualquer dispositivo. 26 | 27 | ### Tema Claro e Escuro 28 | 29 | Para se adequar às suas preferências visuais e condições de iluminação, o **DEVSPACE** oferece suporte a temas claro e escuro. Você pode alternar entre os modos de visualização para uma experiência personalizada e agradável. 30 | 31 | ## Tecnologias Utilizadas 32 | 33 | O **DEVSPACE** foi desenvolvido utilizando as seguintes tecnologias: 34 | 35 | - **HTML5**: Utilizado para estruturar o conteúdo da plataforma, garantindo uma base sólida e semântica para o desenvolvimento. 36 | - **CSS**: Empregado para estilizar e criar um design responsivo e agradável, proporcionando uma experiência de usuário intuitiva e visualmente atraente. 37 | - **JavaScript**: Implementado para adicionar interatividade e dinamismo à plataforma. Além de permitir a alternância entre temas claro e escuro, o JavaScript é utilizado para realizar buscas eficientes e apresentar os resultados de maneira organizada e intuitiva, facilitando a exploração das linguagens de programação, bancos de dados, frameworks, IDEs e IAs. 38 | 39 | Essas tecnologias foram escolhidas para garantir um desenvolvimento eficaz e uma experiência de usuário de alta qualidade. 40 | 41 | ## Como Rodar o Projeto 42 | 43 | 1. Clone este repositório: 44 | 45 | ```bash 46 | git clone https://github.com/seu-usuario/devspace.git 47 | ``` 48 | 49 | 2. Navegue até o diretório do projeto: 50 | 51 | ```bash 52 | cd diretório/do/projeto 53 | ``` 54 | 55 | 3. Acesse no seu navegador: 56 | ```bash 57 | http://localhost:3000 58 | ``` 59 | 60 | ## Contribuição 61 | 62 | Contribuições são bem-vindas! Siga os passos abaixo para contribuir com o DEVSPACE: 63 | 64 | 1. Faça um fork deste repositório. 65 | 66 | 2. Crie uma nova branch com sua feature ou correção de bug: 67 | 68 | ```bash 69 | git checkout -b minha-feature 70 | ``` 71 | 72 | 3. Faça o commit das suas mudanças: 73 | 74 | ```bash 75 | git commit -m 'Adiciona nova feature' 76 | ``` 77 | 78 | 4. Envie suas alterações: 79 | 80 | ```bash 81 | git push origin minha-feature 82 | ``` 83 | 84 | 5. Envie suas alterações. 85 | 86 | ## Contexto do Projeto 87 | 88 | O **DEVSPACE** foi desenvolvido durante a Imersão Dev com Google Gemini, um evento de treinamento intensivo focado em tecnologias de desenvolvimento web, com a ajuda do Gemini. A Imersão foi hospedada pela Alura. 89 | 90 | ![DEVSPACE](assets/readme/imersao.webp) 91 | 92 | ## Processo de Criação 93 | 94 | O **DEVSPACE** nasceu da minha vontade de entender melhor o mundo do desenvolvimento e explorar as ferramentas mais importantes na área. O design foi inspirado na antiga página inicial do GitHub, que oferecia uma visão clara e acessível das da plataforma, decidi criar uma similar, mas com um foco diferente. 95 | 96 | ### Motivação 97 | 98 | Como alguém que não tinha um conhecimento profundo sobre várias ferramentas do mundo dev, eu buscava uma maneira prática e eficaz de aprender e conhecer novas tecnologias. O **DEVSPACE** foi desenvolvido para preencher essa lacuna, proporcionando um espaço onde posso explorar linguagens de programação, bancos de dados, frameworks, IDEs e inteligências artificiais de forma organizada e intuitiva. 99 | 100 | ### Desenvolvimento 101 | 102 | Foram dedicadas mais de 20 horas ao aprendizado e aplicação de **HTML**, **CSS** e **JavaScript** no desenvolvimento do **DEVSPACE**. O projeto foi construído com um design **minimalista e intuitivo** para garantir uma navegação fluida e agradável. Utilizando essas tecnologias, foi criada uma interface que é ao mesmo tempo simples e eficiente, proporcionando uma experiência de exploração das ferramentas que é a mais agradável possível. 103 | 104 | Além disso, foram exploradas e implementadas animações e efeitos de **CSS**, que adicionaram um toque especial e dinâmico à plataforma. Essas adições não só melhoraram a estética do projeto, mas também enriqueceram a experiência do usuário com interações mais envolventes e visuais. 105 | 106 | ### Objetivo 107 | 108 | O objetivo do **DEVSPACE** é servir como uma ferramenta de aprendizado e referência para desenvolvedores de todos os níveis, oferecendo uma visão clara e acessível das principais tecnologias disponíveis no mercado. Espero que o **DEVSPACE** ajude não apenas a mim, mas também a outros desenvolvedores a expandirem seu conhecimento e se familiarizarem com novas ferramentas e tecnologias. 109 | 110 | ### Agradecimentos 111 | 112 | Gostaria de agradecer a todos os desenvolvedores e projetos que inspiraram este trabalho, bem como à comunidade que torna o aprendizado e a inovação possíveis. Sem o apoio e os recursos disponíveis, este projeto não seria possível. 113 | -------------------------------------------------------------------------------- /assets/databases/firebase.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/databases/firebase.png -------------------------------------------------------------------------------- /assets/databases/mariadb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/databases/mariadb.png -------------------------------------------------------------------------------- /assets/databases/microsoftsql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/databases/microsoftsql.png -------------------------------------------------------------------------------- /assets/databases/mongodb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/databases/mongodb.png -------------------------------------------------------------------------------- /assets/databases/mysql.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/databases/mysql.png -------------------------------------------------------------------------------- /assets/databases/oracle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/databases/oracle.png -------------------------------------------------------------------------------- /assets/databases/postgree.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/databases/postgree.png -------------------------------------------------------------------------------- /assets/databases/redis.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/databases/redis.png -------------------------------------------------------------------------------- /assets/databases/sqlite.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/databases/sqlite.webp -------------------------------------------------------------------------------- /assets/frameworks/angular.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/angular.png -------------------------------------------------------------------------------- /assets/frameworks/bootstrap.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/bootstrap.png -------------------------------------------------------------------------------- /assets/frameworks/django.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/django.png -------------------------------------------------------------------------------- /assets/frameworks/express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/express.png -------------------------------------------------------------------------------- /assets/frameworks/flask.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/flask.png -------------------------------------------------------------------------------- /assets/frameworks/flutter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/flutter.png -------------------------------------------------------------------------------- /assets/frameworks/jquery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/jquery.png -------------------------------------------------------------------------------- /assets/frameworks/laravel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/laravel.png -------------------------------------------------------------------------------- /assets/frameworks/next.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/next.png -------------------------------------------------------------------------------- /assets/frameworks/react.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/react.webp -------------------------------------------------------------------------------- /assets/frameworks/ruby_on_rails.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/ruby_on_rails.png -------------------------------------------------------------------------------- /assets/frameworks/vue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/frameworks/vue.png -------------------------------------------------------------------------------- /assets/ias/alexa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ias/alexa.png -------------------------------------------------------------------------------- /assets/ias/chatgpt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ias/chatgpt.png -------------------------------------------------------------------------------- /assets/ias/claude.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ias/claude.webp -------------------------------------------------------------------------------- /assets/ias/copilot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ias/copilot.png -------------------------------------------------------------------------------- /assets/ias/gemini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ias/gemini.png -------------------------------------------------------------------------------- /assets/ias/googleai.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ias/googleai.png -------------------------------------------------------------------------------- /assets/ias/jasper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ias/jasper.png -------------------------------------------------------------------------------- /assets/ias/midjourney.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ias/midjourney.png -------------------------------------------------------------------------------- /assets/ias/siri.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ias/siri.png -------------------------------------------------------------------------------- /assets/ides/androidstudio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/androidstudio.png -------------------------------------------------------------------------------- /assets/ides/atom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/atom.png -------------------------------------------------------------------------------- /assets/ides/eclipse.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/eclipse.png -------------------------------------------------------------------------------- /assets/ides/intellij.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/intellij.png -------------------------------------------------------------------------------- /assets/ides/netbeans.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/netbeans.png -------------------------------------------------------------------------------- /assets/ides/pycharm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/pycharm.png -------------------------------------------------------------------------------- /assets/ides/sublimetext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/sublimetext.png -------------------------------------------------------------------------------- /assets/ides/visualstudio.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/visualstudio.png -------------------------------------------------------------------------------- /assets/ides/vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/vscode.png -------------------------------------------------------------------------------- /assets/ides/xcode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/ides/xcode.png -------------------------------------------------------------------------------- /assets/langs/c++.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/c++.png -------------------------------------------------------------------------------- /assets/langs/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/c.png -------------------------------------------------------------------------------- /assets/langs/csharp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/csharp.png -------------------------------------------------------------------------------- /assets/langs/dart.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/dart.png -------------------------------------------------------------------------------- /assets/langs/go.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/go.png -------------------------------------------------------------------------------- /assets/langs/haskell.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/haskell.png -------------------------------------------------------------------------------- /assets/langs/java.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/java.png -------------------------------------------------------------------------------- /assets/langs/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/javascript.png -------------------------------------------------------------------------------- /assets/langs/kotlin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/kotlin.png -------------------------------------------------------------------------------- /assets/langs/lua.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/lua.png -------------------------------------------------------------------------------- /assets/langs/php.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/php.png -------------------------------------------------------------------------------- /assets/langs/python.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/python.png -------------------------------------------------------------------------------- /assets/langs/ruby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/ruby.png -------------------------------------------------------------------------------- /assets/langs/swift.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/swift.png -------------------------------------------------------------------------------- /assets/langs/typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/langs/typescript.png -------------------------------------------------------------------------------- /assets/page/clone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/page/clone.png -------------------------------------------------------------------------------- /assets/page/github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/page/github.png -------------------------------------------------------------------------------- /assets/page/head.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/page/head.png -------------------------------------------------------------------------------- /assets/page/icone.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/page/icone.ico -------------------------------------------------------------------------------- /assets/page/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/page/logo.png -------------------------------------------------------------------------------- /assets/readme/imersao.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/readme/imersao.webp -------------------------------------------------------------------------------- /assets/readme/readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/readme/readme.png -------------------------------------------------------------------------------- /assets/readme/readme_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/assets/readme/readme_2.png -------------------------------------------------------------------------------- /bancos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 13 | 14 | DevSpace - Bancos de Dados 15 | 16 | 17 |
18 | 21 | 29 |
30 |
31 |
32 | github 35 |
36 | 37 |
38 |

BANCOS DE DADOS

39 |
40 | Banco de dados são sistemas que armazenam, organizam e 42 | gerenciamgrandes volumes de informações, permitindo o acesso eficiente 43 | e seguro aesses dados. Eles utilizam modelos e estruturas específicas 44 | para armazenar dados, e oferecem ferramentas para manipulação e 45 | consulta das informações, sendo essenciais em diversas áreas como 46 | desenvolvimento de aplicativos, gerenciamento de empresas e análise de 47 | dados. 49 |
50 |
51 | 52 | 53 | 61 | 66 | 67 |
54 | 60 | 62 | 65 |
68 |
69 | 70 |
71 | 72 |
73 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /fonts/Hubot-Sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/fonts/Hubot-Sans.ttf -------------------------------------------------------------------------------- /fonts/Hubot-Sans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/fonts/Hubot-Sans.woff2 -------------------------------------------------------------------------------- /fonts/Mona-Sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/fonts/Mona-Sans.ttf -------------------------------------------------------------------------------- /fonts/Mona-Sans.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/matheusaudibert/devspace/9a2a0ddb5679a98839dcc8c9c59587d2b6e96e28/fonts/Mona-Sans.woff2 -------------------------------------------------------------------------------- /frameworks.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 10 | 17 | 18 | DevSpace - Frameworks 19 | 20 | 21 |
22 | 25 | 33 |
34 |
35 |
36 | github 39 |
40 | 41 |
42 |

FRAMEWORKS

43 |
44 | Frameworks são conjuntos de ferramentas e bibliotecas de código que 46 | fornecem uma estrutura padronizada para o desenvolvimento de software, 47 | facilitando a criação de aplicações ao oferecer soluções prontas para 48 | tarefas comuns. Eles promovem a reutilização de código e seguem 49 | convenções específicas, ajudando a acelerar o processo de 50 | desenvolvimento e a manter a consistência e a organização do 51 | projeto. 53 |
54 |
55 | 56 | 57 | 65 | 70 | 71 |
58 | 64 | 66 | 69 |
72 |
73 | 74 |
75 | 76 |
77 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /ias.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 17 | 18 | DevSpace - IAs 19 | 20 | 21 |
22 | 25 | 33 |
34 |
35 |
36 | github 39 |
40 | 41 |
42 |

IAs

43 |
44 | IAs (Inteligências Artificiais) são sistemas computacionais 46 | projetados para realizar tarefas que normalmente requerem inteligência 47 | humana, como reconhecimento de padrões, compreensão de linguagem e 48 | tomada de decisões. Elas utilizam algoritmos avançados e modelos de 49 | aprendizado de máquina para analisar dados, gerar respostas e executar 50 | ações com base em informações preexistentes. 52 |
53 |
54 | 55 | 56 | 64 | 69 | 70 |
57 | 63 | 65 | 68 |
71 |
72 | 73 |
74 | 75 |
76 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /ides.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 17 | 18 | DevSpace - IDEs 19 | 20 | 21 |
22 | 25 | 33 |
34 |
35 |
36 | github 39 |
40 | 41 |
42 |

IDEs

43 |
44 | IDEs (Ambientes de Desenvolvimento Integrados) são ferramentas que 46 | fornecem um conjunto de funcionalidades para facilitar o 47 | desenvolvimento de software, combinando editor de código, compilador, 48 | depurador e outras ferramentas essenciais em um único ambiente. Elas 49 | ajudam os desenvolvedores a escrever, testar e depurar código de forma 50 | mais eficiente, oferecendo recursos como auto-completar, controle de 51 | versão e integração com frameworks e bibliotecas. 53 |
54 |
55 | 56 | 57 | 65 | 70 | 71 |
58 | 64 | 66 | 69 |
72 |
73 | 74 |
75 | 76 |
77 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | DevSpace 10 | 11 | 12 |
13 | 14 | 22 | 23 |
24 |
25 |
26 | github 27 | 28 |
29 | 30 |
31 |
32 |

Todo o mundo dev, em um só lugar!

33 |
34 | Conheça linguagens.
35 | Explore frameworks.
36 | Entenda bancos.
37 | Descubra IDEs.
38 | Acesse IAs.
39 | Navegue por mais de 50 módulos. 40 |
41 |
42 | 43 | 44 |
45 |
46 | 47 |
48 |
49 | 50 |
51 |

Como usar nossa plataforma

52 |
53 | 54 | Para começar, selecione a categoria que você deseja explorar: 55 |

56 | Linguagens - Bancos de Dados - Frameworks - IDEs - IAs 57 |

58 | 1. Utilize a barra de pesquisa para digitar o termo específico que você está procurando.

2. Clique em Buscar para filtrar a sua pesquisa.

3. Navegue pelos conteúdos disponíveis e interaja com os recursos. 59 | 60 |


61 |
62 | 63 |
64 |
65 | 66 |
67 |
68 |

Domine as tecnologias mais usadas.

69 |
70 | Descubra as tecnologias mais essenciais do mercado, abrangendo linguagens de programação, bancos de dados, frameworks, IDEs e IAs . Conheça as ferramentas que estão moldando a indústria e aumente suas competências para se destacar em um cenário tecnológico em constante evolução.

71 | Não perca tempo, comece agora! 72 |
73 |
74 |
75 | 76 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /linguagens.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 12 | 17 | 18 | DevSpace - Linguagens 19 | 20 | 21 |
22 | 25 | 33 |
34 |
35 |
36 | github 39 |
40 | 41 |
42 |

LINGUAGENS

43 |
44 | Linguagens de programação são sistemas de comunicação que permitem 46 | aos desenvolvedores escrever instruções para computadores executarem 47 | tarefas específicas, usando regras e sintaxes definidas. Elas variam 48 | em seus paradigmas e métodos de execução, e são usadas em diferentes 49 | áreas como desenvolvimento web, análise de dados e sistemas 50 | embarcados. 52 |
53 |
54 | 55 | 56 | 64 | 69 | 70 |
57 | 63 | 65 | 68 |
71 |
72 | 73 |
74 | 75 |
76 | 82 | 83 | 84 | 85 | 86 | 87 | -------------------------------------------------------------------------------- /scripts/bancos.js: -------------------------------------------------------------------------------- 1 | let bancos = [ 2 | { 3 | name: "MySQL", 4 | image: "mysql.png", 5 | description: "MySQL é um sistema de gerenciamento de banco de dados relacional (RDBMS) de código aberto, amplamente utilizado em aplicações web. Ele é conhecido por sua simplicidade, rapidez e confiabilidade, suportando grandes volumes de dados com desempenho eficiente. MySQL é popular entre desenvolvedores devido à sua integração com várias linguagens de programação e à sua ampla adoção em soluções de código aberto.", 6 | website: "https://www.mysql.com" 7 | }, 8 | { 9 | name: "PostgreSQL", 10 | image: "postgree.png", 11 | description: "PostgreSQL é um banco de dados relacional de código aberto que se destaca por sua conformidade com os padrões SQL e suporte a operações complexas, como consultas avançadas e transações. Ele é altamente extensível, oferecendo suporte para tipos de dados personalizados, índices avançados e replicação, o que o torna ideal para aplicações críticas que exigem robustez e flexibilidade.", 12 | website: "https://www.postgresql.org" 13 | }, 14 | { 15 | name: "Microsoft SQL Server", 16 | image: "microsoftsql.png", 17 | description: "Microsoft SQL Server é um RDBMS desenvolvido pela Microsoft, conhecido por sua integração com o ecossistema Windows e Azure. Ele oferece recursos avançados de gerenciamento de dados, segurança e análise, com suporte para grandes volumes de dados empresariais. Sua interface gráfica, juntamente com ferramentas de BI (Business Intelligence), faz dele uma escolha popular em ambientes corporativos.", 18 | website: "https://www.microsoft.com/en-us/sql-server/sql-server-downloads" 19 | }, 20 | { 21 | name: "SQLite", 22 | image: "sqlite.webp", 23 | description: "SQLite é um banco de dados relacional leve e autônomo, embutido em uma única biblioteca. Ele é amplamente utilizado em aplicativos móveis, dispositivos embarcados e pequenas aplicações devido à sua simplicidade e ausência de um servidor separado. Apesar de sua leveza, SQLite suporta a maioria dos comandos SQL padrão e oferece boa performance para operações de leitura/escrita em ambientes de baixa demanda.", 24 | website: "https://www.sqlite.org" 25 | }, 26 | { 27 | name: "MongoDB", 28 | image: "mongodb.png", 29 | description: "MongoDB é um banco de dados NoSQL baseado em documentos, que armazena dados em formato BSON (similar ao JSON). Ele é conhecido por sua escalabilidade horizontal, flexibilidade e capacidade de gerenciar grandes volumes de dados não estruturados. MongoDB é amplamente utilizado em aplicações modernas que exigem alta disponibilidade e desempenho, como em sistemas distribuídos e big data.", 30 | website: "https://www.mongodb.com/pt-br" 31 | }, 32 | { 33 | name: "Oracle Database", 34 | image: "oracle.png", 35 | description: "Oracle Database é um RDBMS robusto e escalável, amplamente utilizado em ambientes corporativos. Ele oferece uma gama completa de recursos avançados, como suporte a OLTP (Online Transaction Processing), OLAP (Online Analytical Processing), e segurança de dados. Oracle Database é conhecido por seu desempenho, confiabilidade e capacidade de gerenciar grandes volumes de dados em aplicações empresariais críticas.", 36 | website: "https://www.oracle.com/database/" 37 | }, 38 | { 39 | name: "Redis", 40 | image: "redis.png", 41 | description: "Redis é um banco de dados em memória de código aberto que funciona como um armazenamento de chave-valor. Ele é extremamente rápido e é frequentemente utilizado como cache, fila de mensagens ou para armazenar dados temporários em tempo real. Redis suporta operações complexas, como manipulação de listas e conjuntos, o que o torna uma ferramenta versátil para aplicações de alta performance que exigem baixa latência.", 42 | website: "https://redis.io" 43 | }, 44 | { 45 | name: "Firebase", 46 | image: "firebase.png", 47 | description: "Firebase é uma plataforma de desenvolvimento de aplicativos móveis e web oferecida pelo Google, que inclui um banco de dados NoSQL em tempo real. Ele permite a sincronização de dados em tempo real entre clientes e servidores, o que é ideal para aplicativos que precisam de atualização instantânea, como chats e colaborações em tempo real. Firebase também oferece integração com outras ferramentas do Google para autenticação e análise de dados.", 48 | website: "https://firebase.google.com/docs/database?hl=pt-br" 49 | }, 50 | { 51 | name: "MariaDB", 52 | image: "mariadb.png", 53 | description: "MariaDB é um sistema de gerenciamento de banco de dados relacional que foi criado como um fork do MySQL, oferecendo compatibilidade completa com ele. Ele é conhecido por seu desempenho aprimorado, recursos de segurança e suporte para novos mecanismos de armazenamento. MariaDB é frequentemente escolhido como uma alternativa ao MySQL em ambientes que exigem maior flexibilidade e inovação contínua no gerenciamento de dados.", 54 | website: "https://mariadb.org" 55 | } 56 | ] -------------------------------------------------------------------------------- /scripts/frameworks.js: -------------------------------------------------------------------------------- 1 | const frameworks = [ 2 | { 3 | name: "React", 4 | image: "react.webp", 5 | description: "React é um framework JavaScript de código aberto, desenvolvido pelo Facebook, amplamente utilizado para construir interfaces de usuário (UIs) em aplicações web. Ele se destaca por seu conceito de componentes reutilizáveis, que permite aos desenvolvedores criar UIs de maneira modular e eficiente. Um dos principais recursos do React é o Virtual DOM, que otimiza a atualização e renderização de componentes, resultando em um desempenho superior. React é altamente popular em projetos que requerem UIs dinâmicas e interativas, sendo compatível com várias bibliotecas e ferramentas dentro do ecossistema JavaScript.", 6 | website: "https://reactjs.org/" 7 | }, 8 | { 9 | name: "Angular", 10 | image: "angular.png", 11 | description: "Angular é um framework JavaScript de código aberto, desenvolvido pelo Google, utilizado para construir aplicações web de página única (SPAs). Ele é conhecido por sua arquitetura baseada em componentes e por utilizar TypeScript, proporcionando um ambiente robusto para o desenvolvimento de aplicações escaláveis. Com recursos integrados como injeção de dependência e roteamento, Angular é ideal para projetos de grande porte que exigem uma estrutura sólida e manutenível.", 12 | website: "https://angular.dev" 13 | }, 14 | { 15 | name: "Vue", 16 | image: "vue.png", 17 | description: "Vue.js é um framework JavaScript progressivo que facilita a criação de interfaces de usuário e SPAs. Ele é conhecido por sua simplicidade, flexibilidade e curva de aprendizado suave, permitindo aos desenvolvedores integrar Vue.js em projetos existentes ou construir aplicações completas. Com uma arquitetura baseada em componentes e um ecossistema de ferramentas que suportam desenvolvimento de ponta a ponta, Vue.js é popular tanto para projetos pequenos quanto grandes.", 18 | website: "https://vuejs.org" 19 | }, 20 | { 21 | name: "Django", 22 | image: "django.png", 23 | description: "Django é um framework web de alto nível para Python, conhecido por seguir o princípio 'batteries-included' (tudo incluído). Ele fornece uma estrutura robusta e segura para o desenvolvimento rápido de aplicações web, com recursos integrados para administração, autenticação, e ORM (mapeamento objeto-relacional). Django é ideal para projetos que requerem escalabilidade e uma arquitetura bem definida, como portais web e plataformas de e-commerce.", 24 | website: "https://www.djangoproject.com" 25 | }, 26 | { 27 | name: "Flask", 28 | image: "flask.png", 29 | description: "Flask é um microframework web para Python que oferece simplicidade e flexibilidade na construção de aplicações web. Ele é minimalista, fornecendo apenas os componentes essenciais necessários para o desenvolvimento web, permitindo que os desenvolvedores adicionem extensões conforme necessário. Flask é ideal para projetos pequenos a médios, onde a personalização e o controle sobre a arquitetura da aplicação são prioridades.", 30 | website: "https://flask.palletsprojects.com/en/3.0.x/" 31 | }, 32 | { 33 | name: "Ruby on Rails", 34 | image: "ruby_on_rails.png", 35 | description: "Ruby on Rails, ou simplesmente Rails, é um framework web de código aberto para Ruby, conhecido por sua convenção sobre configuração e desenvolvimento ágil. Rails simplifica o desenvolvimento web ao fornecer estruturas pré-configuradas para a construção de aplicações, com forte foco em produtividade e padrões de design. É amplamente utilizado para construir MVPs, startups e plataformas web complexas, graças à sua eficiência e estrutura coesa.", 36 | website: "https://rubyonrails.org" 37 | }, 38 | { 39 | name: "Express", 40 | image: "express.png", 41 | description: "Express.js é um framework minimalista e flexível para Node.js, usado para construir aplicações web e APIs. Ele fornece uma fina camada de recursos essenciais para desenvolvimento web, permitindo que os desenvolvedores criem estruturas customizadas conforme as necessidades do projeto. Express.js é altamente popular para o desenvolvimento de aplicações em tempo real e microservices, devido à sua simplicidade e integração direta com o ecossistema Node.js.", 42 | website: "https://expressjs.com" 43 | }, 44 | { 45 | name: "Laravel", 46 | image: "laravel.png", 47 | description: "Laravel é um framework PHP de código aberto que se destaca por sua sintaxe elegante e ferramentas integradas para tarefas comuns, como roteamento, autenticação e caching. Ele facilita o desenvolvimento rápido de aplicações web robustas, com um foco em boas práticas e manutenibilidade. Laravel é amplamente utilizado para construir aplicações web modernas e escaláveis, com recursos como Eloquent ORM e suporte para desenvolvimento API-first.", 48 | website: "https://laravel.com" 49 | }, 50 | { 51 | name: "Bootstrap", 52 | image: "bootstrap.png", 53 | description: "Bootstrap é um framework front-end de código aberto que fornece uma coleção de componentes e utilitários CSS e JavaScript para criar interfaces web responsivas e modernas. Ele é amplamente utilizado para acelerar o desenvolvimento de interfaces, oferecendo um design consistente e suporte a diferentes dispositivos e tamanhos de tela. Bootstrap é ideal para desenvolvedores que precisam criar rapidamente layouts e componentes de interface de alta qualidade.", 54 | website: "https://getbootstrap.com" 55 | }, 56 | { 57 | name: "jQuery", 58 | image: "jquery.png", 59 | description: "jQuery é uma biblioteca JavaScript leve que simplifica o desenvolvimento de scripts client-side ao fornecer uma API fácil de usar para manipulação de DOM, eventos, animações e chamadas AJAX. Embora menos utilizado em novos projetos modernos devido ao surgimento de frameworks como React e Vue.js, jQuery continua popular para adicionar interatividade rápida a páginas web existentes, graças à sua compatibilidade e simplicidade.", 60 | website: "https://jquery.com" 61 | }, 62 | { 63 | name: "Flutter", 64 | image: "flutter.png", 65 | description: "Flutter é um framework de código aberto desenvolvido pelo Google para criar aplicações móveis, web e desktop com uma única base de código. Utilizando a linguagem Dart, Flutter se destaca por sua capacidade de criar interfaces de usuário nativas e altamente performáticas, com widgets personalizáveis e uma arquitetura reativa. É especialmente popular para o desenvolvimento de aplicativos móveis, oferecendo uma experiência consistente em iOS e Android.", 66 | website: "https://flutter.dev" 67 | }, 68 | { 69 | name: "Next", 70 | image: "next.png", 71 | description: "Next.js é um framework para React que facilita a construção de aplicações web com renderização híbrida, combinando server-side rendering (SSR) e static site generation (SSG). Ele oferece uma estrutura otimizada para SEO, desempenho e experiência do usuário, com funcionalidades como roteamento automático e suporte a API routes. Next.js é amplamente utilizado para desenvolver aplicações web modernas e escaláveis, especialmente em projetos que exigem alta performance e SEO-friendly.", 72 | website: "https://nextjs.org" 73 | } 74 | ]; -------------------------------------------------------------------------------- /scripts/ias.js: -------------------------------------------------------------------------------- 1 | const ias = [ 2 | { 3 | name: "Gemini", 4 | image: "gemini.png", 5 | description: "Gemini é um assistente de IA desenvolvido pelo Google, projetado para oferecer uma gama ampla de funcionalidades inteligentes. Com um foco em integração e eficiência, Gemini utiliza algoritmos avançados de processamento de linguagem natural e aprendizado de máquina para ajudar os usuários em diversas tarefas, desde consultas informativas até assistências mais complexas. Seu design visa otimizar a experiência do usuário, oferecendo respostas rápidas e precisas, e sua integração com outros serviços Google melhora ainda mais a sua utilidade.", 6 | website: "https://gemini.google.com/app" 7 | }, 8 | { 9 | name: "ChatGPT", 10 | image: "chatgpt.png", 11 | description: "ChatGPT é um chatbot desenvolvido pela OpenAI, especializado em gerar texto de forma coerente e em responder perguntas com base em uma ampla gama de conhecimentos. Utilizando a tecnologia GPT (Generative Pre-trained Transformer), o ChatGPT é capaz de compreender e gerar texto de maneira contextualmente relevante. Sua aplicação vai desde a criação de conteúdos e respostas automatizadas até interações mais complexas e criativas, oferecendo uma experiência conversacional rica e fluida para os usuários.", 12 | website: "https://chat.openai.com" 13 | }, 14 | { 15 | name: "Claude AI", 16 | image: "claude.webp", 17 | description: "Claude AI é um assistente de IA desenvolvido pela Anthropic, focado em proporcionar uma interação segura e ética com os usuários. A tecnologia por trás de Claude é projetada para priorizar a segurança e a confiabilidade, minimizando os riscos associados a interações automatizadas. Com uma abordagem centrada no usuário, Claude AI visa oferecer respostas úteis e precisas enquanto adota princípios rigorosos de responsabilidade e transparência.", 18 | website: "https://www.anthropic.com/claude" 19 | }, 20 | { 21 | name: "Copilot", 22 | image: "copilot.png", 23 | description: "Copilot é uma ferramenta de assistência de codificação desenvolvida pela GitHub, que utiliza IA para sugerir e completar código em tempo real. Projetado para aumentar a produtividade dos desenvolvedores, o Copilot analisa o código em que você está trabalhando e fornece sugestões contextuais que podem acelerar o processo de desenvolvimento. Integrado diretamente no ambiente de desenvolvimento integrado (IDE), Copilot ajuda a resolver problemas comuns de codificação e a explorar novas possibilidades de implementação.", 24 | website: "https://github.com/features/copilot" 25 | }, 26 | { 27 | name: "Jasper", 28 | image: "jasper.png", 29 | description: "Jasper é uma ferramenta de escrita assistida por inteligência artificial projetada para facilitar a criação de conteúdo. Utilizando algoritmos avançados de processamento de linguagem natural, Jasper ajuda redatores e profissionais de marketing a gerar textos de alta qualidade, oferecendo sugestões inteligentes e gerando conteúdo com base em suas entradas. Ideal para criar artigos, postagens de blog e descrições de produtos, Jasper melhora a eficiência e a criatividade na produção de material escrito, proporcionando suporte adicional na revisão e refinamento do conteúdo.", 30 | website: "www.jasper.ai" 31 | }, 32 | { 33 | name: "Midjourney", 34 | image: "midjourney.png", 35 | description: "Midjourney é uma plataforma de IA dedicada à geração de imagens criativas a partir de descrições textuais. Utilizando modelos avançados de aprendizado profundo, o Midjourney transforma textos descritivos em visuais impressionantes e detalhados, permitindo aos usuários criar arte e imagens personalizadas sem necessidade de habilidades avançadas em design. É uma ferramenta popular para artistas, designers e criadores de conteúdo que buscam explorar novas formas de expressão visual.", 36 | website: "https://www.midjourney.com" 37 | }, 38 | { 39 | name: "Google AI Studio", 40 | image: "googleai.png", 41 | description: "Google AI Studio é uma plataforma desenvolvida pelo Google que oferece ferramentas e recursos para facilitar o desenvolvimento e a implementação de projetos de inteligência artificial (IA) e aprendizado de máquina (ML). Com o Google AI Studio, os desenvolvedores podem construir, treinar e implantar modelos de IA de forma eficiente, aproveitando a infraestrutura e a expertise do Google em IA.", 42 | website: "https://aistudio.google.com" 43 | }, 44 | { 45 | name: "Alexa", 46 | image: "alexa.png", 47 | description: "Alexa é o assistente virtual desenvolvido pela Amazon, projetado para facilitar interações com dispositivos inteligentes e fornecer uma gama de serviços baseados em voz. Capaz de realizar tarefas como responder perguntas, tocar música, controlar dispositivos domésticos e fazer compras online, Alexa utiliza processamento de linguagem natural para entender e responder aos comandos dos usuários. Com integração com uma vasta gama de produtos e serviços, Alexa busca melhorar a conveniência e a eficiência no dia a dia.", 48 | website: "https://www.amazon.com/alexa" 49 | }, 50 | { 51 | name: "Siri", 52 | image: "siri.png", 53 | description: "Siri é o assistente virtual desenvolvido pela Apple, integrado aos dispositivos iOS e projetado para facilitar a interação por meio de comandos de voz. Siri utiliza tecnologia de reconhecimento de voz e processamento de linguagem natural para oferecer respostas rápidas, realizar tarefas e interagir com aplicativos e serviços. Através de uma interface intuitiva e uma ampla gama de funcionalidades, Siri visa melhorar a produtividade e a experiência do usuário em dispositivos Apple.", 54 | website: "https://www.apple.com/siri" 55 | } 56 | ]; 57 | -------------------------------------------------------------------------------- /scripts/ides.js: -------------------------------------------------------------------------------- 1 | const ides = [ 2 | { 3 | name: "Visual Studio Code", 4 | image: "vscode.png", 5 | description: "O Visual Studio Code (VSCode) é um editor de código-fonte leve e extensível, amplamente utilizado por programadores por sua versatilidade. Ele suporta diversas linguagens de programação e oferece recursos avançados como IntelliSense, que autocompleta código de forma inteligente, e uma integração fluida com Git para controle de versões. Além disso, possui um terminal embutido e uma vasta biblioteca de extensões que permitem personalizar o ambiente de desenvolvimento, tornando-o ideal tanto para projetos simples quanto para grandes aplicações.", 6 | download_link: "https://code.visualstudio.com/download" 7 | }, 8 | { 9 | name: "Visual Studio", 10 | image: "visualstudio.png", 11 | description: "Visual Studio é uma IDE poderosa da Microsoft, amplamente utilizada para desenvolvimento em .NET, C++, C#, entre outras linguagens. Ele oferece uma gama completa de ferramentas de desenvolvimento, incluindo depuração avançada, testes de unidade e integração contínua. Com suporte para projetos de diferentes plataformas, desde aplicações de desktop até desenvolvimento web e mobile, é uma escolha robusta para desenvolvedores profissionais.", 12 | download_link: "https://visualstudio.microsoft.com/pt-br/downloads/" 13 | }, 14 | { 15 | name: "IntelliJ IDEA", 16 | image: "intellij.png", 17 | description: "O IntelliJ IDEA é uma IDE robusta desenvolvida pela JetBrains, especialmente popular entre desenvolvedores Java. Ele oferece recursos avançados de refatoração, navegação de código e análise estática, além de suporte integrado para uma ampla gama de frameworks como Spring e Hibernate. Sua capacidade de autocompletar código e detectar erros em tempo real o torna uma ferramenta poderosa para desenvolvimento de software em grande escala.", 18 | download_link: "https://www.jetbrains.com/idea/download/?section=windows" 19 | }, 20 | { 21 | name: "PyCharm", 22 | image: "pycharm.png", 23 | description: "Desenvolvida pela JetBrains, PyCharm é uma IDE especializada para programação em Python. Ela oferece recursos avançados como depuração, teste de unidades, inspeção de código e suporte para desenvolvimento web com Django. PyCharm é especialmente valorizada por sua capacidade de autocompletar código e refatoração inteligente, o que facilita o desenvolvimento de aplicativos Python eficientes e escaláveis.", 24 | download_link: "https://www.jetbrains.com/pycharm/download/" 25 | }, 26 | { 27 | name: "Xcode", 28 | image: "xcode.png", 29 | description: "Xcode é a IDE oficial da Apple para desenvolvimento de software em iOS, macOS, watchOS e tvOS. Ele oferece um ambiente completo para programação em Swift e Objective-C, com recursos como Interface Builder para design de interfaces gráficas, simulação de dispositivos e ferramentas avançadas de depuração. Xcode é essencial para desenvolvedores que desejam criar aplicativos para o ecossistema Apple.", 30 | download_link: "https://developer.apple.com/xcode/" 31 | }, 32 | { 33 | name: "Android Studio", 34 | image: "androidstudio.png", 35 | description: "Android Studio é a IDE oficial para desenvolvimento de aplicativos Android, baseada no IntelliJ IDEA. Ela oferece um conjunto completo de ferramentas para design de interfaces, emulação de dispositivos e otimização de desempenho. Com suporte para linguagens como Java e Kotlin, Android Studio facilita a criação de aplicativos móveis robustos e eficientes para a plataforma Android.", 36 | download_link: "https://developer.android.com/studio?hl=pt-br" 37 | }, 38 | { 39 | name: "NetBeans", 40 | image: "netbeans.png", 41 | description: "NetBeans é uma IDE de código aberto, conhecida por sua flexibilidade e suporte a várias linguagens de programação como Java, PHP e C++. Ele oferece recursos como edição de código inteligente, depuração, e suporte para desenvolvimento web e móvel. A modularidade do NetBeans permite que os desenvolvedores personalizem o ambiente conforme suas necessidades específicas, tornando-o uma opção versátil para projetos variados.", 42 | download_link: "https://netbeans.apache.org/front/main/download/" 43 | }, 44 | { 45 | name: "Atom", 46 | image: "atom.png", 47 | description: "Atom é um editor de código aberto e altamente personalizável, desenvolvido pelo GitHub. Embora seja leve, ele suporta uma ampla gama de linguagens de programação e oferece recursos como autocompletar, múltiplos painéis e controle de versões integrado. Com uma vasta biblioteca de pacotes e temas, Atom pode ser adaptado para atender a diversas necessidades de desenvolvimento, desde pequenas edições até projetos mais complexos.", 48 | download_link: "https://atom-editor.cc" 49 | }, 50 | { 51 | name: "Sublime Text", 52 | image: "sublimetext.png", 53 | description: "Sublime Text é um editor de texto minimalista e extremamente rápido, amplamente utilizado para edição de código. Ele oferece funcionalidades como múltiplos cursores, navegação instantânea e um poderoso sistema de plugins. Apesar de ser um editor de texto e não uma IDE completa, Sublime Text é altamente eficiente e popular entre desenvolvedores que valorizam velocidade e simplicidade em seu ambiente de codificação.", 54 | download_link: "https://www.sublimetext.com/download" 55 | } 56 | ] -------------------------------------------------------------------------------- /scripts/linguagens.js: -------------------------------------------------------------------------------- 1 | const Linguagens = [ 2 | { 3 | name: "Python", 4 | image: "python.png", 5 | description: "Linguagens de programação são sistemas de comunicação que permitem aos desenvolvedores escrever instruções para computadores executarem tarefasespecíficas, usando regras e sintaxes definidas. Elas variam em seusparadigmas e métodos de execução, e são usadas em diferentes áreas comodesenvolvimento web, análise de dados e sistemas embarcados.", 6 | website: "https://www.python.org", 7 | releaseYear: 1991 8 | }, 9 | { 10 | name: "JavaScript", 11 | image: "javascript.png", 12 | description: "JavaScript é uma linguagem de programação amplamente utilizada no desenvolvimento web, essencial para a criação de páginas interativas e dinâmicas. Ela permite aos desenvolvedores adicionar comportamentos complexos em sites, como animações e manipulação de eventos. JavaScript é uma linguagem interpretada, baseada em eventos e orientada a objetos, que opera no navegador do cliente, mas também pode ser usada no lado do servidor com ambientes como Node.js. Sua sintaxe é flexível e é um componente chave das tecnologias web modernas junto com HTML e CSS.", 13 | website: "https://developer.mozilla.org/en-US/docs/Web/JavaScript", 14 | releaseYear: 1995 15 | }, 16 | { 17 | name: "Java", 18 | image: "java.png", 19 | description: "Java é uma linguagem de programação orientada a objetos, projetada para ser portável, robusta e segura. Ela é amplamente utilizada no desenvolvimento de aplicações empresariais, sistemas móveis (especialmente Android), e aplicações web. Java é conhecida por seu princípio de 'escreva uma vez, execute em qualquer lugar', o que significa que o código Java pode ser executado em qualquer dispositivo que tenha a Java Virtual Machine (JVM) instalada. Sua sintaxe é similar à de C++, mas com algumas melhorias que facilitam o desenvolvimento e a manutenção.", 20 | website: "https://www.java.com/pt-BR/", 21 | releaseYear: 1995 22 | }, 23 | { 24 | name: "C", 25 | image: "c.png", 26 | description: "C é uma linguagem de programação procedural, conhecida por sua eficiência e controle de baixo nível sobre recursos de hardware. Desenvolvida na década de 1970, C é amplamente utilizada para o desenvolvimento de sistemas operacionais, drivers de hardware e software de sistema devido à sua proximidade com o hardware. A sintaxe de C influenciou muitas outras linguagens de programação, e sua capacidade de manipulação direta de memória a torna ideal para aplicações onde o desempenho e o controle são críticos.", 27 | website: "https://en.wikipedia.org/wiki/C_(programming_language)", 28 | releaseYear: 1972 29 | }, 30 | { 31 | name: "C#", 32 | image: "csharp.png", 33 | description: "C# (pronuncia-se 'C sharp') é uma linguagem de programação desenvolvida pela Microsoft como parte da plataforma .NET. É uma linguagem orientada a objetos, moderna e versátil, utilizada para criar aplicações de desktop, web e móveis. C# combina a simplicidade da sintaxe de C e C++ com a robustez da plataforma .NET, proporcionando suporte para desenvolvimento de aplicações seguras e eficientes. É amplamente usada para criar jogos com Unity, aplicações empresariais e sistemas complexos.", 34 | website: "https://en.wikipedia.org/wiki/C_Sharp_(programming_language)", 35 | releaseYear: 200 36 | }, 37 | { 38 | name: "C++", 39 | image: "c++.png", 40 | description: "C++ é uma linguagem de programação que estende a linguagem C com características orientadas a objetos, como classes e herança, além de suporte para programação genérica com templates. Desenvolvida como uma evolução de C, C++ é usada para desenvolvimento de software de sistemas, jogos, e aplicações de alto desempenho que exigem eficiência e controle detalhado sobre os recursos de hardware. Sua flexibilidade e poder fazem dela uma escolha popular para uma ampla gama de aplicações, desde sistemas embarcados até aplicações gráficas complexas.", 41 | website: "https://pt.wikipedia.org/wiki/C%2B%2B", 42 | releaseYear: 1985 43 | }, 44 | { 45 | name: "Typescript", 46 | image: "typescript.png", 47 | description: "TypeScript é uma linguagem de programação desenvolvida pela Microsoft que é um superconjunto estrito de JavaScript. Ela adiciona tipos estáticos e outros recursos de programação orientada a objetos ao JavaScript, visando melhorar a robustez e a escalabilidade do código. TypeScript compila para JavaScript, o que permite que o código seja executado em qualquer ambiente que suporte JavaScript, como navegadores e servidores. É muito utilizada em projetos de grande escala e para o desenvolvimento de aplicações web modernas.", 48 | website: "https://www.typescriptlang.org", 49 | releaseYear: 2012 50 | }, 51 | { 52 | name: "PHP", 53 | image: "php.png", 54 | description: "PHP (Hypertext Preprocessor) é uma linguagem de programação amplamente utilizada para desenvolvimento web, especialmente no lado do servidor. PHP é projetada para gerar conteúdo dinâmico e interagir com bancos de dados. Sua sintaxe é semelhante à de C e Perl, e é conhecida por sua integração fácil com HTML. PHP é uma das linguagens mais populares para criação de sites e sistemas web, sendo usada em plataformas como WordPress e Joomla.", 55 | website: "https://www.php.net", 56 | releaseYear: 1995 57 | }, 58 | { 59 | name: "Swift", 60 | image: "swift.png", 61 | description: "Swift é uma linguagem de programação desenvolvida pela Apple. É projetada para ser segura, rápida e moderna, substituindo Objective-C como a principal linguagem para desenvolvimento de aplicações para iOS, macOS, watchOS e tvOS. Swift combina a performance de linguagens compiladas com a simplicidade e a segurança da programação moderna, facilitando o desenvolvimento de aplicativos robustos e de alta performance para o ecossistema Apple.", 62 | website: "https://www.swift.org", 63 | releaseYear: 2014 64 | }, 65 | { 66 | name: "Ruby", 67 | image: "ruby.png", 68 | description: "Ruby é uma linguagem de programação dinâmica e orientada a objetos, criada por Yukihiro Matsumoto. É conhecida por sua sintaxe limpa e legível, que favorece a produtividade do desenvolvedor. Ruby é popular no desenvolvimento web, especialmente com o framework Ruby on Rails, que facilita a criação de aplicações web rápidas e eficientes. A filosofia do Ruby é focada na simplicidade e na felicidade do desenvolvedor.", 69 | website: "https://www.ruby-lang.org/pt/", 70 | releaseYear: 1995 71 | }, 72 | { 73 | name: "Go", 74 | image: "go.png", 75 | description: "Go, também conhecida como Golang, é uma linguagem de programação desenvolvida pelo Google. É projetada para ser simples, eficiente e com suporte nativo para concorrência, permitindo o desenvolvimento de sistemas escaláveis e de alto desempenho. Go é conhecida por sua sintaxe concisa, compilação rápida e forte suporte a programação paralela. É amplamente utilizada para desenvolvimento de sistemas, infraestrutura e aplicações em nuvem.", 76 | website: "https://go.dev", 77 | releaseYear: 2009 78 | }, 79 | { 80 | name: "Kotlin", 81 | image: "kotlin.png", 82 | description: "Kotlin é uma linguagem de programação desenvolvida pela JetBrains, projetada para ser interoperável com Java e fornecer uma alternativa moderna e concisa para o desenvolvimento na plataforma Java. É uma linguagem estaticamente tipada que suporta programação orientada a objetos e funcional. Kotlin é amplamente utilizada para o desenvolvimento de aplicações Android e é conhecida por sua sintaxe clara, segurança contra nulidade e suporte para programação funcional.", 83 | website: "https://kotlinlang.org", 84 | releaseYear: 2011 85 | }, 86 | { 87 | name: "Haskell", 88 | image: "haskell.png", 89 | description: "Haskell é uma linguagem de programação funcional puramente baseada em teoria matemática e lógica. Desenvolvida na década de 1980 e nomeada em homenagem ao matemático Haskell Curry, a linguagem é conhecida por seu forte sistema de tipos, suporte a funções de ordem superior e avaliação preguiçosa. Haskell é amplamente utilizada em pesquisa acadêmica e em indústrias que necessitam de alta confiabilidade e segurança em sistemas complexos, como sistemas financeiros e análise de dados.", 90 | website: "https://www.haskell.org", 91 | releaseYear: 1990 92 | }, 93 | { 94 | name: "Dart", 95 | image: "dart.png", 96 | description: "Dart é uma linguagem de programação desenvolvida pelo Google, projetada para criar aplicações web e móveis com alta performance. Dart é a linguagem principal para o desenvolvimento com o framework Flutter, que permite criar interfaces de usuário nativas para iOS e Android a partir de um único código base. Dart combina recursos de linguagens orientadas a objetos com suporte para programação assíncrona, oferecendo uma sintaxe moderna e ferramentas robustas para desenvolvimento de aplicações multiplataforma.", 97 | website: "https://dart.dev", 98 | releaseYear: 2011 99 | }, 100 | { 101 | name: "Lua", 102 | image: "lua.png", 103 | description: "Lua é uma linguagem de programação leve e poderosa, projetada para ser embutida em outras aplicações. Desenvolvida na década de 1990, Lua é conhecida por sua simplicidade e flexibilidade, oferecendo uma sintaxe clara e uma pequena pegada de memória. É amplamente utilizada como linguagem de script em jogos, sistemas embarcados e aplicações onde a integração com C ou C++ é necessária. Lua é valorizada por sua extensibilidade e desempenho, tornando-a uma escolha popular para diversas aplicações.", 104 | website: "https://www.lua.org", 105 | releaseYear: 1993 106 | } 107 | ]; -------------------------------------------------------------------------------- /scripts/mode.js: -------------------------------------------------------------------------------- 1 | let trail = document.getElementById('trail') 2 | let body = document.querySelector('body') 3 | let logo = document.querySelector('.logo') 4 | let a = document.querySelectorAll('li a') 5 | let img = document.querySelector('.github-icon') 6 | let search = document.querySelector('.search') 7 | let box = document.querySelector('.search-box') 8 | let icon = document.querySelector('.fa-magnifying-glass') 9 | let btn = document.querySelector('.btn') 10 | 11 | trail.addEventListener('click', ()=> { 12 | trail.classList.toggle('light') 13 | body.classList.toggle('light') 14 | logo.classList.toggle('light') 15 | a.forEach(a => { 16 | a.classList.toggle('light'); 17 | }); 18 | img.classList.toggle('light') 19 | search.classList.toggle('light') 20 | box.classList.toggle('light') 21 | icon.classList.toggle('light') 22 | btn.classList.toggle('light'); 23 | }) -------------------------------------------------------------------------------- /scripts/mode_index.js: -------------------------------------------------------------------------------- 1 | let trail = document.getElementById('trail') 2 | let body = document.querySelector('body') 3 | let logo = document.querySelector('.logo') 4 | let a = document.querySelectorAll('li a') 5 | let img = document.querySelector('.github-icon') 6 | let btn = document.querySelectorAll('.btn') 7 | 8 | 9 | trail.addEventListener('click', ()=> { 10 | trail.classList.toggle('light') 11 | body.classList.toggle('light') 12 | logo.classList.toggle('light') 13 | a.forEach(a => { 14 | a.classList.toggle('light'); 15 | }); 16 | img.classList.toggle('light') 17 | btn.forEach(btn => { 18 | btn.classList.toggle('light'); 19 | }); 20 | }) -------------------------------------------------------------------------------- /scripts/script_banco.js: -------------------------------------------------------------------------------- 1 | function apresentar() { 2 | 3 | let div = document.getElementById("lang-cards"); 4 | 5 | 6 | let resultados = ""; 7 | 8 | for (let banco of bancos) { 9 | resultados += ` 10 |
11 |
12 | ${banco.name} 13 |
14 | 15 |

${banco.name}

16 |
17 |
18 | 19 |
20 |

21 | ${banco.description} 22 |

23 | Website 24 |
25 | `; 26 | } 27 | div.innerHTML = resultados; 28 | } 29 | 30 | function pesquisar(){ 31 | 32 | let div = document.getElementById("lang-cards"); 33 | 34 | let input = document.getElementById("input").value.toLowerCase(); 35 | 36 | if (input == "") { 37 | div.innerHTML = "

Insira algum banco!

" 38 | return 39 | } 40 | 41 | let resultados = ""; 42 | let nome = ""; 43 | 44 | for (let banco of bancos) { 45 | 46 | nome = banco.name.toLowerCase() 47 | 48 | if (nome.includes(input)){ 49 | resultados += ` 50 |
51 |
52 | ${banco.name} 53 |
54 | 55 |

${banco.name}

56 |
57 |
58 | 59 |
60 |

61 | ${banco.description} 62 |

63 | Website 64 |
65 | `; 66 | } 67 | } 68 | 69 | if(resultados == "") { 70 | div.innerHTML = "

Nenhum banco de dado encontrado!

" 71 | return 72 | } 73 | 74 | div.innerHTML = resultados; 75 | } 76 | 77 | 78 | document.getElementById("input").addEventListener("keydown", function(event) { 79 | if (event.key === "Enter") { 80 | event.preventDefault(); 81 | pesquisar(); 82 | } 83 | }); 84 | -------------------------------------------------------------------------------- /scripts/script_framework.js: -------------------------------------------------------------------------------- 1 | function apresentar() { 2 | 3 | let div = document.getElementById("lang-cards"); 4 | 5 | 6 | let resultados = ""; 7 | 8 | for (let framework of frameworks) { 9 | 10 | resultados += ` 11 |
12 |
13 | ${framework.name} 14 |
15 | 16 |

${framework.name}

17 |
18 |
19 | 20 |
21 |

22 | ${framework.description} 23 |

24 | Website 25 |
26 | `; 27 | } 28 | div.innerHTML = resultados; 29 | } 30 | 31 | function pesquisar() { 32 | 33 | let div = document.getElementById("lang-cards"); 34 | 35 | let input = document.getElementById("input").value.toLowerCase(); 36 | 37 | if (input == "") { 38 | div.innerHTML = "

Insira algum framework!

" 39 | return 40 | } 41 | 42 | let resultados = ""; 43 | let nome = ""; 44 | 45 | for (let framework of frameworks) { 46 | 47 | nome = framework.name.toLowerCase() 48 | 49 | if (nome.includes(input)){ 50 | resultados += ` 51 |
52 |
53 | ${framework.name} 54 |
55 | 56 |

${framework.name}

57 |
58 |
59 | 60 |
61 |

62 | ${framework.description} 63 |

64 | Website 65 |
66 | `; 67 | } 68 | } 69 | 70 | if(resultados == "") { 71 | div.innerHTML = "

Nenhum framework encontrado!

" 72 | return 73 | } 74 | div.innerHTML = resultados; 75 | } 76 | 77 | document.getElementById("input").addEventListener("keydown", function(event) { 78 | if (event.key === "Enter") { 79 | event.preventDefault(); 80 | pesquisar(); 81 | } 82 | }); -------------------------------------------------------------------------------- /scripts/script_ias.js: -------------------------------------------------------------------------------- 1 | function apresentar() { 2 | 3 | let div = document.getElementById("lang-cards"); 4 | 5 | 6 | let resultados = ""; 7 | 8 | for (let ia of ias) { 9 | resultados += ` 10 |
11 |
12 | ${ia.name} 13 |
14 | 15 |

${ia.name}

16 |
17 |
18 | 19 |
20 |

21 | ${ia.description} 22 |

23 | Acesse aqui 24 |
25 | `; 26 | 27 | 28 | } 29 | 30 | div.innerHTML = resultados; 31 | } 32 | 33 | function pesquisar(){ 34 | 35 | let div = document.getElementById("lang-cards"); 36 | 37 | let input = document.getElementById("input").value.toLowerCase(); 38 | 39 | if (input == "") { 40 | div.innerHTML = "

Insira alguma IA!

" 41 | return 42 | } 43 | 44 | 45 | let resultados = ""; 46 | let nome = ""; 47 | 48 | for (let ia of ias) { 49 | 50 | nome = ia.name.toLowerCase() 51 | 52 | if (nome.includes(input)){ 53 | resultados += ` 54 |
55 |
56 | ${ia.name} 57 |
58 | 59 |

${ia.name}

60 |
61 |
62 | 63 |
64 |

65 | ${ia.description} 66 |

67 | Website 68 |
69 | `; 70 | } 71 | 72 | } 73 | 74 | if(resultados == "") { 75 | div.innerHTML = "

Nehuma IA encontrada!

" 76 | return 77 | } 78 | 79 | div.innerHTML = resultados; 80 | 81 | } 82 | 83 | document.getElementById("input").addEventListener("keydown", function(event) { 84 | if (event.key === "Enter") { 85 | event.preventDefault(); 86 | pesquisar(); 87 | } 88 | }); -------------------------------------------------------------------------------- /scripts/script_ide.js: -------------------------------------------------------------------------------- 1 | function apresentar() { 2 | 3 | let div = document.getElementById("lang-cards"); 4 | 5 | 6 | let resultados = ""; 7 | 8 | for (let ide of ides) { 9 | 10 | resultados += ` 11 |
12 |
13 | ${ide.name} 14 |
15 | 16 |

${ide.name}

17 |
18 |
19 | 20 |
21 |

22 | ${ide.description} 23 |

24 | Baixe aqui 25 |
26 | `; 27 | } 28 | div.innerHTML = resultados; 29 | } 30 | 31 | function pesquisar(){ 32 | 33 | let div = document.getElementById("lang-cards"); 34 | 35 | let input = document.getElementById("input").value.toLowerCase(); 36 | 37 | if (input == "") { 38 | div.innerHTML = "

Insira alguma IDE!

" 39 | return 40 | } 41 | 42 | 43 | let resultados = ""; 44 | let nome = ""; 45 | 46 | for (let ide of ides) { 47 | 48 | 49 | nome = ide.name.toLowerCase() 50 | 51 | if (nome.includes(input)){ 52 | 53 | resultados += ` 54 |
55 |
56 | ${ide.name} 57 |
58 | 59 |

${ide.name}

60 |
61 |
62 | 63 |
64 |

65 | ${ide.description} 66 |

67 | Baixe aqui 68 |
69 | `; 70 | } 71 | } 72 | 73 | if(resultados == "") { 74 | div.innerHTML = "

Nehuma IDE encontrada!

" 75 | return 76 | } 77 | 78 | div.innerHTML = resultados; 79 | } 80 | 81 | document.getElementById("input").addEventListener("keydown", function(event) { 82 | if (event.key === "Enter") { 83 | event.preventDefault(); 84 | pesquisar(); 85 | } 86 | }); -------------------------------------------------------------------------------- /scripts/script_linguagem.js: -------------------------------------------------------------------------------- 1 | function apresentar() { 2 | 3 | let div = document.getElementById("lang-cards"); 4 | 5 | 6 | let resultados = ""; 7 | 8 | for (let linguagem of Linguagens) { 9 | 10 | resultados += ` 11 |
12 |
13 | ${linguagem.name} 14 |
15 | 16 |

${linguagem.name}

17 |
18 |
19 | 20 |
21 |

22 | ${linguagem.description} 23 |

24 |

Ano de Lançamento: ${linguagem.releaseYear}

25 | Website 26 |
27 | `; 28 | } 29 | div.innerHTML = resultados; 30 | } 31 | 32 | function pesquisar() { 33 | 34 | let div = document.getElementById("lang-cards"); 35 | 36 | let input = document.getElementById("input").value.toLowerCase(); 37 | 38 | if (input == "") { 39 | div.innerHTML = "

Insira alguma linguagem!

" 40 | return 41 | } 42 | 43 | 44 | let resultados = ""; 45 | let nome = ""; 46 | 47 | for (let linguagem of Linguagens) { 48 | 49 | nome = linguagem.name.toLowerCase() 50 | 51 | if (nome.includes(input)){ 52 | 53 | resultados += ` 54 |
55 |
56 | ${linguagem.name} 57 |
58 | 59 |

${linguagem.name}

60 |
61 |
62 | 63 |
64 |

65 | ${linguagem.description} 66 |

67 |

Ano de Lançamento: ${linguagem.releaseYear}

68 | Website 69 |
70 | `; 71 | } 72 | } 73 | if(resultados == "") { 74 | div.innerHTML = "

Nenhuma linguagem encontrada!

" 75 | return 76 | } 77 | 78 | div.innerHTML = resultados; 79 | } 80 | 81 | document.getElementById("input").addEventListener("keydown", function(event) { 82 | if (event.key === "Enter") { 83 | event.preventDefault(); 84 | pesquisar(); 85 | } 86 | }); -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: "Mona Sans"; 3 | src: url("/fonts/Mona-Sans.woff2") format("woff2 supports variations"), 4 | url("/fonts/Mona-Sans.woff2") format("woff2-variations"); 5 | font-weight: 200 900; 6 | font-stretch: 75% 125%; 7 | } 8 | 9 | body { 10 | font-family: "Mona Sans"; 11 | color: #ffffff; 12 | background-color: #000000; 13 | margin: 0px 30px; 14 | padding: 0; 15 | display: flex; 16 | flex-direction: column; 17 | transition: 0.5s; 18 | } 19 | 20 | /* LANDING PAGE */ 21 | 22 | header { 23 | margin: 10px; 24 | display: flex; 25 | align-items: center; 26 | justify-content: space-between; 27 | position: relative; 28 | } 29 | 30 | .logo { 31 | float: right; 32 | width: 60px; 33 | transition: 0.5s; 34 | } 35 | 36 | ul { 37 | margin: 0 auto; 38 | font-weight: 500; 39 | list-style: none; 40 | padding: 0; 41 | display: flex; 42 | justify-content: center; 43 | margin: 0; 44 | } 45 | 46 | .active { 47 | color: rgb(78, 52, 196); 48 | } 49 | 50 | li { 51 | margin: 0 10px; 52 | } 53 | 54 | li a { 55 | display: inline-block; 56 | text-decoration: none; 57 | transition: transform 0.2s ease-in-out; 58 | color: #fff; 59 | transition: 0.5s; 60 | } 61 | 62 | li a:hover { 63 | transform: translateY(-5px); 64 | } 65 | 66 | .github-icon { 67 | float: left; 68 | width: 3rem; 69 | height: auto; 70 | transition: 0.5s; 71 | } 72 | 73 | .content { 74 | display: flex; 75 | justify-content: space-between; 76 | align-items: center; 77 | box-sizing: border-box; 78 | } 79 | 80 | .content-text h1 { 81 | font-weight: 900; 82 | font-style: 125%; 83 | font-size: 3rem; 84 | width: 80%; 85 | } 86 | 87 | .content-text-desc { 88 | font-weight: 350; 89 | font-size: 1.3rem; 90 | } 91 | 92 | .color { 93 | color: rgb(78, 52, 196); 94 | } 95 | .content-img { 96 | width: 40%; 97 | padding: 30px; 98 | } 99 | 100 | .content-img img { 101 | width: 500px; 102 | transition: transform 0.2s ease-in-out; 103 | } 104 | 105 | .content-img img:hover { 106 | transform: rotate(-15deg); 107 | } 108 | 109 | .content-img-2 { 110 | width: 40%; 111 | padding: 30px; 112 | } 113 | 114 | .content-img-2 img { 115 | width: 500px; 116 | transition: transform 0.2s ease-in-out; 117 | } 118 | 119 | .content-img-2 img:hover { 120 | transform: rotate(+15deg); 121 | } 122 | 123 | .content-middle { 124 | border-radius: 20px; 125 | border: 1px solid rgb(78, 52, 196); 126 | padding: 20px; 127 | display: block; 128 | padding: 0 100px; 129 | text-align: center; 130 | transition: background-color 0.2s ease-in-out; 131 | } 132 | .content-middle:hover { 133 | background-color: rgba(78, 52, 196, 0.075); 134 | } 135 | 136 | .content-middle h1 { 137 | font-weight: 900; 138 | font-style: 125%; 139 | font-size: 2.5rem; 140 | } 141 | 142 | .content-middle .start { 143 | font-weight: 400; 144 | font-size: 1.2rem; 145 | max-width: 100%; 146 | } 147 | 148 | .content-middle .modules { 149 | color: rgb(78, 52, 196); 150 | font-weight: 800; 151 | font-stretch: 125%; 152 | font-size: 1.4rem; 153 | } 154 | 155 | .content-final { 156 | display: flex; 157 | align-items: center; 158 | justify-content: flex-start; 159 | border-radius: 8px; 160 | } 161 | 162 | .content-img-2 { 163 | flex: 0 0 500px; 164 | margin-right: 20px; 165 | position: relative; 166 | left: -50px; 167 | } 168 | 169 | .content-img-2 img { 170 | width: 100%; 171 | height: auto; 172 | } 173 | 174 | .content-text { 175 | flex: 5; 176 | padding-left: 20px; 177 | } 178 | 179 | footer { 180 | text-align: center; 181 | padding: 10px 0; 182 | font-size: 14px; 183 | bottom: 0; 184 | } 185 | 186 | footer p { 187 | margin: 0; 188 | } 189 | 190 | /* PAGINAS DE BUSCA */ 191 | 192 | .container { 193 | border-radius: 20px; 194 | padding: 20px; 195 | margin: 10px 100px; 196 | display: block; 197 | padding: 0 100px; 198 | text-align: center; 199 | align-items: center; 200 | justify-content: center; 201 | } 202 | 203 | .explication { 204 | background-color: #61616141; 205 | backdrop-filter: blur(10px); 206 | -webkit-backdrop-filter: blur(10px); 207 | border-radius: 10px; 208 | padding: 20px; 209 | } 210 | 211 | .explication .start { 212 | font-weight: 400; 213 | font-size: 1.2rem; 214 | max-width: 100%; 215 | } 216 | 217 | .search-box { 218 | margin: auto; 219 | margin-top: 5%; 220 | margin-bottom: 4%; 221 | position: relative; 222 | width: 300px; 223 | height: 42px; 224 | border: 1px solid #ffffff; 225 | padding: 0px 10px; 226 | border-radius: 50px; 227 | transition: 0.5s; 228 | } 229 | 230 | .elements { 231 | width: 100%; 232 | height: 100%; 233 | vertical-align: middle; 234 | } 235 | 236 | .search { 237 | border: none; 238 | height: 100%; 239 | width: 100%; 240 | padding: 0px 5px; 241 | border-radius: 50px; 242 | font-size: 16px; 243 | color: #ffffff; 244 | font-weight: 500; 245 | background-color: transparent; 246 | caret-color: #ffffff; 247 | transition: 0.5s; 248 | } 249 | 250 | .search:focus { 251 | outline: none; 252 | } 253 | 254 | input::placeholder { 255 | font-family: "Mona Sans"; 256 | } 257 | 258 | .fa-magnifying-glass { 259 | color: #ffffff; 260 | font-size: 20px; 261 | transition: 0.5s; 262 | } 263 | 264 | .fa-magnifying-glass:hover { 265 | color: #929292; 266 | } 267 | 268 | .todas { 269 | margin: 10px; 270 | border-radius: 5px; 271 | margin-top: 20px; 272 | padding: 10px 20px; 273 | cursor: pointer; 274 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 275 | transition: background-color 0.2s ease-in-out; 276 | } 277 | 278 | .lang-cards { 279 | display: flex; 280 | flex-wrap: wrap; 281 | margin: 0 20px; 282 | } 283 | 284 | .lang-cards h1 { 285 | text-align: center; 286 | margin: 50px auto; 287 | width: fit-content; 288 | } 289 | 290 | .lang-card { 291 | flex: 1 1 calc(33.333% - 40px); 292 | margin: 20 20px; 293 | width: 30%; 294 | border-radius: 8px; 295 | padding: 10px; 296 | background-color: #61616141; 297 | box-sizing: border-box; 298 | transition: transform 0.2s ease-in-out, background-color 0.2s ease-in-out; 299 | } 300 | 301 | .lang-card:hover { 302 | transform: translateY(-5px); 303 | background-color: transparent; 304 | } 305 | 306 | .card-initial { 307 | display: flex; 308 | align-items: center; 309 | margin-bottom: 15px; 310 | } 311 | .lang-img { 312 | width: 100px; 313 | height: auto; 314 | border-radius: 8px; 315 | margin-right: 15px; 316 | } 317 | 318 | .lang-info { 319 | display: flex; 320 | flex-direction: column; 321 | } 322 | 323 | .lang-label { 324 | color: gray; 325 | font-weight: 300; 326 | font-stretch: 125%; 327 | margin-bottom: 5px; 328 | } 329 | 330 | .lang-name { 331 | font-size: 1.5rem; 332 | font-weight: 900; 333 | font-stretch: 125%; 334 | margin: 0; 335 | } 336 | 337 | .lang-name-alt { 338 | font-size: 1rem; 339 | font-weight: 400; 340 | font-stretch: 125%; 341 | margin: 0; 342 | } 343 | 344 | .lang-desc { 345 | font-size: 0.9rem; 346 | font-weight: 500; 347 | } 348 | 349 | .lang-desc label { 350 | display: block; 351 | margin-bottom: 5px; 352 | } 353 | 354 | .lang-year { 355 | font-size: 0.8rem; 356 | margin-bottom: 10px; 357 | } 358 | 359 | .lang-link { 360 | color: #007bff; 361 | text-decoration: none; 362 | font-weight: bold; 363 | } 364 | 365 | .year { 366 | color: gray; 367 | } 368 | 369 | .lang-link:hover { 370 | text-decoration: underline; 371 | } 372 | 373 | .button { 374 | background-color: #fff; 375 | color: #000; 376 | font-size: 16px; 377 | font-weight: 700; 378 | margin-top: 20px; 379 | padding: 10px 20px; 380 | cursor: pointer; 381 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 382 | } 383 | 384 | .btn { 385 | margin-left: 5px; 386 | padding: 15px 40px; 387 | border: none; 388 | outline: none; 389 | color: #fff; 390 | cursor: pointer; 391 | position: relative; 392 | z-index: 0; 393 | border-radius: 12px; 394 | transition: 0.5s; 395 | } 396 | 397 | .btn::after { 398 | content: ""; 399 | z-index: -1; 400 | position: absolute; 401 | width: 100%; 402 | height: 100%; 403 | background-color: #0a0a0a; 404 | left: 0; 405 | top: 0; 406 | border-radius: 10px; 407 | transition: 0.5s; 408 | } 409 | 410 | .btn::before { 411 | content: ""; 412 | background: linear-gradient( 413 | 45deg, 414 | #021ac3, 415 | #545de0, 416 | #459dda, 417 | #2d22f4, 418 | #00ffd5, 419 | #002bff, 420 | #096bde, 421 | #8555e0 422 | ); 423 | position: absolute; 424 | top: -2px; 425 | left: -2px; 426 | background-size: 600%; 427 | z-index: -1; 428 | width: calc(100% + 4px); 429 | height: calc(100% + 4px); 430 | filter: blur(8px); 431 | animation: glowing 20s linear infinite; 432 | transition: opacity 0.3s ease-in-out; 433 | border-radius: 10px; 434 | opacity: 0; 435 | transition: 0.5s; 436 | } 437 | 438 | @keyframes glowing { 439 | 0% { 440 | background-position: 0 0; 441 | } 442 | 50% { 443 | background-position: 400% 0; 444 | } 445 | 100% { 446 | background-position: 0 0; 447 | } 448 | } 449 | 450 | .btn:hover::before { 451 | opacity: 1; 452 | transition: 0.5s; 453 | } 454 | 455 | .btn:active:after { 456 | background: transparent; 457 | transition: 0.5s; 458 | } 459 | 460 | .btn:active { 461 | color: #000; 462 | font-weight: bold; 463 | transition: 0.5s; 464 | } 465 | 466 | /* RESPONSIVIDADE */ 467 | 468 | @media screen and (max-width: 768px) { 469 | header { 470 | padding: 0 20px; 471 | flex-direction: column; 472 | } 473 | 474 | .logo { 475 | margin-bottom: 10px; 476 | } 477 | 478 | ul { 479 | flex-direction: column; 480 | align-items: center; 481 | margin: 0; 482 | } 483 | 484 | li { 485 | margin: 10px 0; 486 | } 487 | 488 | .github-icon { 489 | margin-top: 10px; 490 | } 491 | 492 | .content { 493 | flex-direction: column; 494 | text-align: center; 495 | } 496 | 497 | .content-img { 498 | width: 100%; 499 | padding: 20px; 500 | } 501 | 502 | .content-img img { 503 | width: 80%; 504 | } 505 | 506 | .content-text h1 { 507 | font-size: 2.5rem; 508 | width: 100%; 509 | } 510 | 511 | .content-text-desc { 512 | font-size: 1.1rem; 513 | } 514 | 515 | .content-middle { 516 | padding: 0 20px; 517 | } 518 | 519 | .content-middle h1 { 520 | font-size: 2rem; 521 | } 522 | 523 | .content-middle .start { 524 | font-size: 1rem; 525 | } 526 | 527 | .content-middle .modules { 528 | font-size: 1.2rem; 529 | } 530 | 531 | .content-final { 532 | flex-direction: column; 533 | text-align: center; 534 | overflow-x: hidden; 535 | } 536 | 537 | .content-img-2 { 538 | width: 100%; 539 | flex: 0 0 auto; 540 | margin-right: 0; 541 | margin-bottom: 20px; 542 | left: 0; 543 | } 544 | 545 | .content-text { 546 | padding-left: 0; 547 | padding-right: 20px; 548 | } 549 | 550 | .container { 551 | margin: 10px 20px; 552 | padding: 0 20px; 553 | } 554 | 555 | .explication .start { 556 | font-size: 1rem; 557 | } 558 | 559 | .search-box { 560 | width: 100%; 561 | height: 42px; 562 | } 563 | 564 | .todas { 565 | width: 100%; 566 | } 567 | 568 | .lang-card { 569 | flex: 1 1 calc(100% - 40px); 570 | width: 90%; 571 | margin: 20px auto; 572 | } 573 | 574 | .lang-img { 575 | width: 80px; 576 | } 577 | 578 | .lang-name { 579 | font-size: 1.3rem; 580 | } 581 | 582 | .lang-desc { 583 | font-size: 0.85rem; 584 | } 585 | } 586 | 587 | @media screen and (max-width: 480px) { 588 | .logo { 589 | width: 40px; 590 | } 591 | 592 | .github-icon { 593 | width: 2rem; 594 | } 595 | 596 | .content-text h1 { 597 | font-size: 2rem; 598 | } 599 | 600 | .content-text-desc { 601 | font-size: 1rem; 602 | } 603 | 604 | .content-img img { 605 | width: 100%; 606 | } 607 | 608 | .content-middle { 609 | padding: 0 10px; 610 | } 611 | 612 | .content-middle h1 { 613 | font-size: 1.5rem; 614 | } 615 | 616 | .content-middle .start { 617 | font-size: 0.9rem; 618 | } 619 | 620 | .content-middle .modules { 621 | font-size: 1rem; 622 | } 623 | 624 | .content-final { 625 | overflow-x: hidden; 626 | } 627 | 628 | .content-img-2 { 629 | flex: 0 0 auto; 630 | margin-right: 0; 631 | margin-bottom: 20px; 632 | left: 0; 633 | } 634 | 635 | .content-text { 636 | padding-left: 0; 637 | padding-right: 10px; 638 | } 639 | 640 | .content-text h1 { 641 | font-size: 1.5rem; 642 | } 643 | 644 | .content-text .content-text-desc { 645 | font-size: 1rem; 646 | } 647 | 648 | .container { 649 | margin: 10px 10px; 650 | padding: 0 10px; 651 | } 652 | 653 | .explication { 654 | padding: 15px; 655 | } 656 | 657 | .explication .start { 658 | font-size: 0.9rem; 659 | } 660 | 661 | .search-box { 662 | width: 100%; 663 | height: 40px; 664 | } 665 | 666 | .search { 667 | font-size: 14px; 668 | } 669 | 670 | .fa-magnifying-glass { 671 | font-size: 18px; 672 | } 673 | 674 | .todas { 675 | width: 100%; 676 | font-size: 14px; 677 | } 678 | 679 | .lang-card { 680 | flex: 1 1 calc(100% - 20px); 681 | width: 100%; 682 | margin: 10px auto; 683 | } 684 | 685 | .lang-img { 686 | width: 60px; 687 | } 688 | 689 | .lang-name { 690 | font-size: 1.1rem; 691 | } 692 | 693 | .lang-desc { 694 | font-size: 0.8rem; 695 | } 696 | } 697 | 698 | /* ELEMENTOS LIGHT MODE */ 699 | 700 | .trail { 701 | width: 51px; 702 | height: 25px; 703 | border-radius: 15px; 704 | background-color: #ffffff; 705 | position: relative; 706 | cursor: pointer; 707 | } 708 | 709 | .trail .ind { 710 | width: 24px; 711 | height: 25px; 712 | background-color: black; 713 | border-radius: 50%; 714 | transform: scale(0.9); 715 | position: absolute; 716 | left: 0; 717 | transition: 0.5s; 718 | } 719 | 720 | .trail.light { 721 | background-color: #c3c3c3; 722 | } 723 | 724 | .trail.light .ind { 725 | left: 27px; 726 | background-color: #ffffff; 727 | } 728 | 729 | body.light { 730 | color: #000000; 731 | background-color: #ffffff; 732 | } 733 | 734 | .logo.light { 735 | filter: invert(1); 736 | } 737 | 738 | .btn.light { 739 | margin-left: 5px; 740 | padding: 15px 40px; 741 | border: none; 742 | outline: none; 743 | color: #000000; 744 | cursor: pointer; 745 | position: relative; 746 | z-index: 0; 747 | border-radius: 12px; 748 | transition: 0.5s; 749 | } 750 | 751 | .btn.light::after { 752 | content: ""; 753 | z-index: -1; 754 | position: absolute; 755 | width: 100%; 756 | height: 100%; 757 | background-color: #c3c3c3; 758 | left: 0; 759 | top: 0; 760 | border-radius: 10px; 761 | transition: 0.5s; 762 | } 763 | 764 | .btn.light:hover.light::before { 765 | opacity: 1; 766 | transition: 0.5s; 767 | } 768 | 769 | .btn.light:active::after { 770 | background: transparent; 771 | transition: 0.5s; 772 | } 773 | 774 | .btn.light:active { 775 | color: #ffffff; 776 | background-color: #000; 777 | font-weight: bold; 778 | transition: 0.5s; 779 | } 780 | 781 | li a.light { 782 | color: #000000; 783 | } 784 | 785 | li a.light.active { 786 | color: rgb(78, 52, 196); 787 | } 788 | 789 | .github-icon.light { 790 | filter: invert(1); 791 | } 792 | 793 | .search.light { 794 | color: #000000; 795 | caret-color: #000000; 796 | } 797 | 798 | .fa-magnifying-glass.light { 799 | color: rgb(0, 0, 0); 800 | transition: 0.5s; 801 | } 802 | 803 | .search-box.light { 804 | border: 1px solid #000000; 805 | } 806 | --------------------------------------------------------------------------------