├── capturaNlwPocket.png ├── certificadoGemini.pdf ├── certificate_javascript.pdf ├── capturaCertificadoGemini.png ├── LICENSE ├── script.js ├── index.html ├── README.md └── style.css /capturaNlwPocket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Emersonpinho/siteParaMeusCertificados/HEAD/capturaNlwPocket.png -------------------------------------------------------------------------------- /certificadoGemini.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Emersonpinho/siteParaMeusCertificados/HEAD/certificadoGemini.pdf -------------------------------------------------------------------------------- /certificate_javascript.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Emersonpinho/siteParaMeusCertificados/HEAD/certificate_javascript.pdf -------------------------------------------------------------------------------- /capturaCertificadoGemini.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Emersonpinho/siteParaMeusCertificados/HEAD/capturaCertificadoGemini.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2024 Emerson de araujo pinho 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const imgSlider = document.querySelector('.img-slider'); 2 | const items = document.querySelectorAll('.item'); 3 | const imgItems = document.querySelectorAll('.img-item'); 4 | const infoItems = document.querySelectorAll('.info-item'); 5 | 6 | const nextBtn = document.querySelector('.next-btn'); 7 | const prevBtn = document.querySelector('.prev-btn'); 8 | 9 | let colors = ['#3674be','#d26181','#ceb13d','#c6414c','#171f2b','#50aa61'] 10 | let indexSlider = 0; 11 | let index = 0; 12 | 13 | const slider = () => { 14 | imgSlider.style.transform = `rotate(${indexSlider * 60}deg)`; 15 | 16 | items.forEach(item => { 17 | item.style.transform = `rotate(${indexSlider * -60}deg)`; 18 | }); 19 | 20 | document.querySelector('.img-item.active').classList.remove('active'); 21 | imgItems[index].classList.add('active'); 22 | 23 | document.querySelector('.info-item.active').classList.remove('active'); 24 | infoItems[index].classList.add('active'); 25 | 26 | document.body.style.background = colors[index] 27 | } 28 | 29 | nextBtn.addEventListener('click', () => { 30 | indexSlider++; 31 | index++; 32 | if(index > imgItems.length - 1) 33 | { 34 | index = 0; 35 | } 36 | 37 | slider(); 38 | }); 39 | 40 | prevBtn.addEventListener('click', () => { 41 | indexSlider--; 42 | index--; 43 | if(index < 0) 44 | { 45 | index = imgItems.length-1; 46 | } 47 | 48 | slider(); 49 | }); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Galeria de Certificados 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 | Certificado 1 21 |
22 |
23 |
24 |
25 | Certificado 2 26 |
27 |
28 |
29 |
30 | Certificado 3 31 |
32 |
33 | 34 |
35 |
36 |
37 | 38 |
39 | 40 |
41 |

Certificado de Conclusão em Python

42 |

Emitido em: 2023

43 |

Curso completo de Python para iniciantes e avançados.

44 | Ver Certificado 45 |
46 | 47 |
48 |

Certificado de Desenvolvimento Web

49 |

Emitido em: 2022

50 |

Domínio em HTML, CSS, JavaScript e PHP.

51 | Ver Certificado 52 |
53 | 54 |
55 |

Certificado de Ciência de Dados

56 |

Emitido em: 2024

57 |

Estudos de análise de dados com Python e SQL.

58 | Ver Certificado 59 |
60 |
61 | 62 |
63 | 64 | 65 |
66 |
67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # Site Para Meus Certificados 3 | 4 | Este projeto é um site desenvolvido para exibir e organizar certificados de cursos e formações de maneira prática e visual. O objetivo é permitir que os visitantes vejam todos os certificados de forma clara e acessível, além de fornecer uma plataforma de fácil manutenção para adicionar ou atualizar novos certificados. 5 | 6 | --- 7 | 8 | ## 📋 Visão Geral 9 | 10 | O site foi desenvolvido com o objetivo de facilitar a exibição dos certificados conquistados, permitindo que empregadores e outros profissionais verifiquem facilmente as formações concluídas. É ideal para quem busca uma apresentação visual e direta de suas conquistas acadêmicas e profissionais. 11 | 12 | ### Funcionalidades 13 | 14 | - Exibição de certificados em uma galeria organizada 15 | - Sistema de upload para novos certificados 16 | - Design responsivo para dispositivos móveis e desktops 17 | - Navegação intuitiva para visualização de detalhes do certificado 18 | 19 | --- 20 | 21 | ## 🚀 Tecnologias Utilizadas 22 | 23 | O projeto foi construído com as seguintes tecnologias: 24 | 25 | - **HTML/CSS:** Estrutura e estilo da interface do usuário. 26 | - **JavaScript:** Funcionalidades interativas. 27 | - **PHP:** Back-end para gerenciamento dos certificados. 28 | - **Banco de Dados:** Armazenamento das informações dos certificados (opcional, dependendo do escopo do projeto). 29 | 30 | --- 31 | 32 | ## 🛠️ Instalação 33 | 34 | Para rodar o projeto localmente, siga as etapas abaixo: 35 | 36 | 1. Clone o repositório: 37 | ```bash 38 | git clone https://github.com/Emersonpinho/siteParaMeusCertificados.git 39 | ``` 40 | 2. Navegue até o diretório do projeto: 41 | ```bash 42 | cd siteParaMeusCertificados 43 | ``` 44 | 3. Instale as dependências (caso necessário, para PHP, configure o servidor local). 45 | 46 | 4. Inicie o servidor local para visualizar o site: 47 | - Usando o PHP embutido: 48 | ```bash 49 | php -S localhost:8000 50 | ``` 51 | 5. Acesse `http://localhost:8000` no navegador para visualizar o site. 52 | 53 | --- 54 | 55 | ## 📄 Estrutura de Pastas 56 | 57 | Aqui está a estrutura básica do projeto: 58 | 59 | ```plaintext 60 | siteParaMeusCertificados/ 61 | │ 62 | ├── assets/ # Imagens e arquivos estáticos 63 | ├── css/ # Arquivos de estilo (CSS) 64 | ├── js/ # Scripts JavaScript 65 | ├── php/ # Scripts PHP para backend 66 | └── index.html # Página principal 67 | ``` 68 | 69 | --- 70 | 71 | ## 👨‍💻 Contribuição 72 | 73 | Contribuições são sempre bem-vindas! Para contribuir, siga os passos: 74 | 75 | 1. Faça um fork do projeto. 76 | 2. Crie uma nova branch com sua feature (`git checkout -b feature/nova-feature`). 77 | 3. Commit suas mudanças (`git commit -m 'Add nova feature'`). 78 | 4. Dê push na sua branch (`git push origin feature/nova-feature`). 79 | 5. Abra um Pull Request. 80 | 81 | --- 82 | 83 | ## 📞 Contato 84 | 85 | Se tiver dúvidas ou sugestões sobre o projeto, entre em contato: 86 | 87 | - **GitHub:** [Emerson10110](https://github.com/Emerson10110) 88 | - **Email:** [printpinho@gmail.com](mailto:printpinho@gmail.com) 89 | 90 | --- 91 | 92 | ## 📝 Licença 93 | 94 | Este projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes. 95 | ``` 96 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&display=swap'); 2 | 3 | * { 4 | font-family: 'Montserrat', sans-serif; 5 | margin: 0; 6 | padding: 0; 7 | box-sizing: border-box; 8 | } 9 | 10 | :root{ 11 | --all-transition: 1s ease; 12 | --opacity-transition: .3s ease; 13 | } 14 | 15 | body{ 16 | background: #3674be; 17 | min-height: 100vh; 18 | overflow: hidden; 19 | transition: var(--all-transition); 20 | } 21 | 22 | body::before{ 23 | content: ''; 24 | position: absolute; 25 | left: 3.5%; 26 | top: 50%; 27 | transform: translateY(-50%); 28 | width: 700px; 29 | height: 700px; 30 | background: rgba(255,255,255,.8); 31 | border-radius: 80%; 32 | filter: blur(200px); 33 | 34 | } 35 | 36 | .img-box{ 37 | left: -72%; 38 | position: absolute; 39 | top : 50%; 40 | transform: translateY(-50%); 41 | width: 1300px; 42 | height: 1300px; 43 | } 44 | 45 | .img-box .img-list{ 46 | height: inherit; 47 | transform: rotate(-120deg); 48 | } 49 | 50 | .img-list .img-slider{ 51 | height: inherit; 52 | transition: var(--all-transition); 53 | } 54 | 55 | .img-slider .img-item{ 56 | position: absolute; 57 | left: 0; 58 | top: 50%; 59 | transform: translateY(-50%) rotate(calc(-360deg / 6 * var(--i))) scale(.8); 60 | transform-origin: 650px; 61 | transition: var(--all-transition); 62 | } 63 | 64 | .img-slider .img-item.active{ 65 | transform: translateY(-50%) rotate(calc(-360deg / 6 * var(--i))) scale(0.9) translateX(-65%); 66 | z-index: 1; 67 | } 68 | 69 | .img-item .item{ 70 | display: flex; 71 | justify-content: center; 72 | align-items: center; 73 | transition: var(--all-transition); 74 | } 75 | 76 | .img-item .item img{ 77 | transform: rotate(calc(360deg / 6 * var(--i))) rotate(120deg); 78 | filter: blur(8px); 79 | transition: var(--all-transition); 80 | } 81 | 82 | .img-item.active .item img{ 83 | filter: blur(0); 84 | } 85 | 86 | .info-box{ 87 | position: absolute; 88 | right: 0; 89 | top: 50%; 90 | transform: translateY(-50%); 91 | width: 500px; 92 | height: 500px; 93 | } 94 | 95 | .info-box .info-item{ 96 | position: absolute; 97 | width: 100%; 98 | height: 100%; 99 | border-radius: 40px 0 0 40px; 100 | padding: 0 70px; 101 | color: #fff; 102 | display: flex; 103 | flex-direction: column; 104 | justify-content: center; 105 | transform: translateX(100%); 106 | opacity: 0; 107 | box-shadow: none; 108 | transition: transform var(--all-transition),opacity var(--opacity-transition), box-shaow var(--all-transition); 109 | } 110 | 111 | .info-box .info-item.active{ 112 | transform: translateX(0); 113 | opacity: 1; 114 | box-shadow: 0 0 30px rgba(0,0,0,.2); 115 | } 116 | 117 | .info-item h2{ 118 | font-size: 30px; 119 | } 120 | 121 | .info-item h2:nth-child(2){ 122 | margin: 20px 0; 123 | } 124 | 125 | .colors span{ 126 | display: inline-block; 127 | width: 30px; 128 | height: 30px; 129 | border-radius: 100%; 130 | margin-left: 10px; 131 | } 132 | 133 | .colors span.active{ 134 | outline: 3px solid #fff; 135 | } 136 | 137 | .colors span:nth-child(1){ 138 | background: #3674be; 139 | } 140 | 141 | .colors span:nth-child(2){ 142 | background: #d26181; 143 | } 144 | 145 | .colors span:nth-child(3){ 146 | background: #ceb13d; 147 | } 148 | 149 | .colors span:nth-child(4){ 150 | background: #c6414c; 151 | } 152 | 153 | .colors span:nth-child(5){ 154 | background: #171f2b; 155 | } 156 | 157 | .colors span:nth-child(6){ 158 | background: #50aa61; 159 | } 160 | 161 | .info-item p{ 162 | font-size: 16px; 163 | margin: 20px 0 25px; 164 | } 165 | 166 | .info-item .btn{ 167 | display: inline-flex; 168 | justify-content: center; 169 | align-items: center; 170 | width: 180px; 171 | height: 47px; 172 | background: #fff; 173 | border-radius: 40px; 174 | box-shadow: 0 0 10px rgba(0,0,0,.1); 175 | font-size: 16px; 176 | color: #333; 177 | text-decoration: none; 178 | font-weight: 600; 179 | } 180 | 181 | .navigation{ 182 | position: absolute; 183 | left: 23%; 184 | bottom: 7%; 185 | width: 150px; 186 | display: flex; 187 | justify-content: space-between; 188 | z-index: 100; 189 | } 190 | 191 | .navigation span{ 192 | display: inline-flex; 193 | justify-content: center; 194 | align-items: center; 195 | width: 50px; 196 | height: 50px; 197 | background: rgba(255,255,255,.2); 198 | border-radius: 100%; 199 | cursor: pointer; 200 | font-size: 30px; 201 | color: #fff; 202 | } 203 | 204 | --------------------------------------------------------------------------------