├── img ├── logo.png ├── toDo.png ├── logo-hora.webp ├── arrow-rigth.png ├── foto_perfil.jpg ├── landing-page.png ├── pagina-de-cadastro.png ├── tailwind-css.svg ├── node.svg ├── alura-logo.svg ├── typescript.svg ├── rocketseat.svg └── workana.svg ├── document ├── Certificado Alura.pdf ├── Vinicius Torres Cv.pdf └── Certificado Hora de Codar.pdf ├── css ├── config.css └── style.css ├── js └── script.js └── index.html /img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/img/logo.png -------------------------------------------------------------------------------- /img/toDo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/img/toDo.png -------------------------------------------------------------------------------- /img/logo-hora.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/img/logo-hora.webp -------------------------------------------------------------------------------- /img/arrow-rigth.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/img/arrow-rigth.png -------------------------------------------------------------------------------- /img/foto_perfil.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/img/foto_perfil.jpg -------------------------------------------------------------------------------- /img/landing-page.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/img/landing-page.png -------------------------------------------------------------------------------- /img/pagina-de-cadastro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/img/pagina-de-cadastro.png -------------------------------------------------------------------------------- /document/Certificado Alura.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/document/Certificado Alura.pdf -------------------------------------------------------------------------------- /document/Vinicius Torres Cv.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/document/Vinicius Torres Cv.pdf -------------------------------------------------------------------------------- /document/Certificado Hora de Codar.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vini-torres/Meu-portfolio/HEAD/document/Certificado Hora de Codar.pdf -------------------------------------------------------------------------------- /img/tailwind-css.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /css/config.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600&family=Poppins:wght@100;200;300;400;500;600;700;800&&family=Inter:wght@500;600;700;800;900&display=swap'); 2 | 3 | * { 4 | margin: 0; 5 | padding: 0; 6 | box-sizing: border-box; 7 | border: none; 8 | list-style: none; 9 | text-decoration: none; 10 | } 11 | 12 | html { 13 | font-size: 62.5%; 14 | scroll-behavior: smooth; 15 | } 16 | 17 | body { 18 | font-size: 1.6rem; 19 | font-family: 'Barlow', sans-serif; 20 | background-color: var(--black); 21 | } 22 | 23 | :root { 24 | --font-inter: 'Inter', sans-serif; 25 | --font-barlow: 'Barlow', sans-serif; 26 | --font-poppins: 'Poppins', sans-serif; 27 | --ciano-default-color: #00e7f9; 28 | --ciano-hover: #00b4c1; 29 | --blue-dark-color: #0F1116; 30 | --white: rgb(250, 250, 250); 31 | --black: #000000; 32 | --black-100: #0d0d0d; 33 | } 34 | 35 | .container_header, .section_sobre, .section_qualificacoes, .section_servico, .section_tech, .section_projetos, .section_contato { 36 | max-width: 140rem; 37 | margin: 0 auto; 38 | padding: 0 2rem; 39 | } 40 | 41 | .section_sobre, .section_qualificacoes, .section_servico, .section_tech, .section_projetos, .section_contato { 42 | padding-top: 9rem; 43 | } 44 | 45 | .destaque { 46 | color: var(--ciano-default-color); 47 | } 48 | 49 | -------------------------------------------------------------------------------- /js/script.js: -------------------------------------------------------------------------------- 1 | const buttonDropdown = document.querySelector(".button_header"); 2 | const menuDropdown = document.querySelector(".menu_header"); 3 | buttonDropdown.addEventListener("click", ()=> menuDropdown.classList.toggle("active")); 4 | 5 | const cursoButton = [...document.querySelector(".bloco_button").children]; 6 | const cursos = [...document.querySelector(".container_qualificacoes").children]; 7 | const educacao = document.querySelector(".educacao"); 8 | 9 | function esconderCursos () { 10 | cursos.forEach(curso => {curso.style.display = "none"}); 11 | cursoButton.forEach(button => {button.classList.remove("ativo")}); 12 | } 13 | 14 | function cursoTarget (id) { 15 | const cursoCurrent = document.querySelector("#" + id); 16 | cursoCurrent.style.display = "block" 17 | } 18 | 19 | function selecionarCurso () { 20 | cursoButton.forEach (button => { 21 | button.addEventListener("click", (target)=> { 22 | esconderCursos(); 23 | const cursoAtual = target.currentTarget; 24 | cursoTarget(cursoAtual.dataset.id); 25 | cursoAtual.className += " ativo" 26 | }) 27 | }) 28 | } 29 | 30 | function execute () { 31 | esconderCursos(); 32 | selecionarCurso() 33 | educacao.click() 34 | } 35 | 36 | window.addEventListener("load", execute()) 37 | 38 | const botaoCopiar = document.querySelectorAll(".botaoCopiar"); 39 | botaoCopiar.forEach(item => { 40 | item.addEventListener('click', ()=> { 41 | if(navigator.clipboard.writeText(item.value)) { 42 | item.id = "email-copiado_check" 43 | item.textContent = "Email copiado"; 44 | } 45 | 46 | setInterval(()=> { 47 | item.id= "email-copiado_check"; 48 | item.textContent = "Copiar email" 49 | }, 3000); 50 | }) 51 | }) 52 | -------------------------------------------------------------------------------- /img/node.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/alura-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/typescript.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /img/rocketseat.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /img/workana.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Vinícius Tôrres | Desenvolvedor front-end 11 | 12 | 13 |
14 |
15 | Logo principal 16 | 28 |
29 |
30 |
31 |
32 |
33 |

Tecnologia como um ativo

34 |

Olá, eu sou Vinícius

35 |

Front-end developer

36 |

Fico feliz em vê-lo (a) por aqui. Espero que aproveite o conteúdo e que eu possa te ajudar de alguma forma.

37 | 38 |
39 | 46 |
47 |
48 | Foto de Vinícius Tôrres 49 |
50 |

DESENVOLVEDOR FRONT-END

51 |

Desenvolvedor Front-end com experiências em React, React-native, Node e JavaScript puro.

52 |

Meu nome é Vinícius, tenho 20 anos e atuo na área de desenvolvimento há mais de 1 ano. Possuo experiência como freelancer, mas estou buscando uma primeira oportunidade no mercado como desenvolvedor Jr.

53 |

Logo abaixo tem o meu currículo com informçôes mais detalhadas sobre mim. Se preferir, podemos marcar uma call atráves do meu e-mail que está disponibilizado.

54 |
55 | 56 | 57 | 58 | 59 |
60 |
61 |
62 |
63 |
64 |

+ 01

65 |

Ano de experiência como desenvolvedor

66 |
67 |
68 |

+ 08

69 |

Projetos pessoais e educativos concluídos

70 |
71 |
72 |

+ 01

73 |

Projeto freelancer entregue

74 |
75 |
76 |

+ 02

77 |

Cursos front-end concluídos

78 |
79 |
80 |
81 |
82 |

Minhas qualificações e experiências

83 |
84 |
85 | 86 | 87 |
88 |
89 |
    90 |
  • 91 |
    92 | 93 | Curso da alura 94 |
    95 |

    Desenvolvimento Front-end

    96 |

    Iniciei meus estudos como desenvolvedor front-end na Alura, no qual eu aprendir a base e conceitos importantes. Nessa trajetória me aprofundei em tecnologias como Html, Css, JavaScript, tailwind CSS e BootStrap.

    97 |

    2021-2022

    98 | 99 | 100 | 101 |
    • 102 |
  • 103 |
    104 | 105 | Curso da rocketseat 106 |
    107 |

    Especialização Front-end

    108 |

    Atualmente estou cursando desenvolvimento front-end na Rocketseat (Ignite) com intuito de me especializar em tecnologias como React, React-native e Node JS. Além disso, estou buscando aprender conceitos importantes no mercado para aplicar no meus trabalhos.

    109 |

    Em progresso

    110 | 111 |
    • 112 |
  • 113 |
    114 | 115 | Curso Hora de codar 116 |
    117 |

    Programação orientada a objetos

    118 |

    No curso Hora de codar, busquei me aprofundar em Programação orientada a objetos, com o intuito de aprender mais sobre essa "ferramenta" e como eu poderia utilizá-la em meus projetos.

    119 |

    2022 Dezembro

    120 | 121 | 122 | 123 |
    • 124 |
125 |
    126 |
  • 127 |
    128 | 129 | Plataforma de intermédio Woarkana 130 |
    131 |

    Atuei como Freelancer

    132 |

    Nesse trabalho, além de poder contribuir para o projeto do cliente, puder revisar e aprendar conceitos importantes da base do front-end. O cliente solicitou um trabalho, no qual o foco do trabalho era fazer o layout de uma aplicação disponibilizada no figma, e as ferramentas solicitadas para esse trabalho foram Html, Css e JS. A workana era a plataforma de intermédio.

    133 |

    2023 - Janeiro ( 1 Semana de duração )

    134 |
    • 135 |
136 |
137 |
138 |
139 |
140 |

Conheça quais são os meus serviços

141 |

Metodologias que eu utilizo nos meus trabalhos.

142 |
143 |
144 |
145 |

Desenvolvimento Web

146 |

Um desenvolvimento focado na criação de sites, páginas únicas, e-commerce e outras aplicações. Promovendo uma boa experiência e uma boa otimização do site.

147 |
148 |
149 |

Desenvolvimento Responsivo

150 |

Aplicação web responsiva, disponível para todos os dispositivos móveis, tornando o site mais prático e acessível. Ou aplicações 100% mobile, como aplicativos.

151 |
152 |
153 |

Experiência do usuário

154 |

Aplicações voltadas a um conjunto de elementos e fatores de um serviço, produto ou sistema que tem como objetivo promover uma boa experiência para o usuário.

155 |
156 |
157 |
158 |
159 |

Conhecimento

160 |
161 |
162 | 163 |

Html 5

164 |
165 |
166 | 167 |

Css 3

168 |
169 |
170 | 171 |

Styled-components

172 |
173 |
174 | 175 |

BootStrap

176 |
177 |
178 | Tailwind CSS 179 |

Tailwind Css

180 |
181 |
182 | 183 |

JavaScript

184 |
185 |
186 | TypeScript 187 |

TypeScript

188 |
189 |
190 | 191 |

React

192 |
193 |
194 | 195 |

React-native

196 |
197 |
198 | Node JS 199 |

Node Js

200 |
201 |
202 |
203 |
204 |

Meus projetos

205 |
206 |
207 | 208 |
209 |

Landing-page

210 | 217 |
218 |
219 |
220 | 221 |
222 |

To-Do List

223 | 230 |
231 |
232 |
233 | 234 |
235 |

Página de Cadastro

236 | 243 |
244 |
245 |
246 |
247 | 248 | 249 | 250 |
251 |
252 |
253 |
254 |

Networking

255 |

Você pode me enviar um email ou conversar diretamente através das minhas redes.

256 |
257 |
258 |
259 | 260 | Linkedin 261 | 262 | 263 |
264 |
265 | 266 | Github 267 | 268 | 269 |
270 |
271 | 272 | Instagram 273 | 274 | 275 |
276 |
277 |
278 | 279 | 280 | 281 |
282 | 285 | 286 | 287 | 288 | 289 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url(config.css); 2 | 3 | .header { 4 | width: 100%; 5 | height: 8rem; 6 | z-index: 10000; 7 | background-color: var(--black-100); 8 | position: fixed; 9 | top: 0; 10 | } 11 | 12 | .container_header { 13 | height: 8rem; 14 | display: flex; 15 | justify-content: space-between; 16 | align-items: center; 17 | position: relative; 18 | } 19 | 20 | .container_header .logo_header { 21 | width: 5rem; 22 | height: 5rem; 23 | } 24 | 25 | .container_header .menu_header .list_header { 26 | width: 25rem; 27 | height: 0; 28 | display: flex; 29 | flex-direction: column; 30 | align-items: center; 31 | gap: 3rem; 32 | background-color: var(--black-100); 33 | position: absolute; 34 | top: 7.1rem; 35 | right: 1rem; 36 | overflow-y: hidden; 37 | transition: .7s; 38 | z-index: 10; 39 | } 40 | 41 | .container_header .menu_header.active .list_header { 42 | height: 40rem; 43 | padding: 4rem; 44 | } 45 | 46 | .container_header .menu_header .list_header .iten_header .link_iten{ 47 | font-family: var(--font-inter); 48 | font-size: 2rem; 49 | color: var(--white); 50 | transition: all .3s; 51 | } 52 | 53 | .container_header .menu_header .list_header .iten_header .link_iten:hover { 54 | color: var(--ciano-default-color); 55 | } 56 | 57 | .container_header .menu_header .button_header { 58 | font-size: 1.8rem; 59 | background-color: transparent; 60 | cursor: pointer; 61 | } 62 | 63 | .container_header .menu_header .button_header .menu_icone-header { 64 | border-top: .2rem solid; 65 | display: block; 66 | color: var(--white); 67 | } 68 | 69 | .container_header .menu_header .button_header .menu_icone-header::after, .menu_icone-header::before { 70 | content: ''; 71 | display: block; 72 | width: 3rem; 73 | height: .2rem; 74 | background-color: currentColor; 75 | margin-top: .5rem; 76 | transition: .7s; 77 | position: relative; 78 | } 79 | 80 | .container_header .menu_header.active .button_header .menu_icone-header { 81 | border-top-color: transparent; 82 | } 83 | .container_header .menu_header.active .button_header .menu_icone-header::before { 84 | transform: rotate(135deg); 85 | } 86 | .container_header .menu_header.active .button_header .menu_icone-header::after { 87 | transform: rotate(-135deg); 88 | top: -.7rem; 89 | } 90 | 91 | .section_main { 92 | padding: 30rem 0 11rem 0; 93 | display: flex; 94 | flex-direction: column; 95 | align-items: center; 96 | justify-content: center; 97 | } 98 | 99 | .section_main .container_main { 100 | text-align: center; 101 | color: var(--white); 102 | } 103 | 104 | .section_main .container_main .destaque_main { 105 | display: inline; 106 | font-family: var(--font-poppins); 107 | background-color: var(--blue-dark-color); 108 | color: var(--white); 109 | border-radius: .4rem; 110 | padding: .8rem; 111 | font-size: 1.4rem; 112 | font-weight: 400; 113 | text-transform: uppercase; 114 | } 115 | 116 | .section_main .container_main .titulo_main { 117 | font-family: var(--font-poppins); 118 | font-weight: 100; 119 | font-size: 5rem; 120 | margin-top: 1rem; 121 | } 122 | 123 | .section_main .container_main .cargo_main{ 124 | font-family: var(--font-inter); 125 | font-weight: 600; 126 | font-size: 7.5rem; 127 | letter-spacing: .1rem; 128 | } 129 | 130 | .section_main .container_main .descricao_main { 131 | font-family: var(--font-poppins); 132 | font-weight: 300; 133 | font-size: 1.4rem; 134 | max-width: 45rem; 135 | margin: 1rem auto 3rem auto; 136 | } 137 | 138 | .section_main .container_main .button { 139 | width: 27rem; 140 | height: 4rem; 141 | border-radius: .5rem; 142 | background-color: var(--ciano-default-color); 143 | color: var(--black); 144 | font-weight: 600; 145 | cursor: pointer; 146 | transition: all .3s; 147 | } 148 | 149 | .section_main .container_main .button:hover { 150 | background-color: var(--ciano-hover); 151 | } 152 | 153 | .section_main .navigation_main .list_main{ 154 | display: flex; 155 | gap: 2rem; 156 | margin-top: 10rem; 157 | } 158 | 159 | .section_main .navigation_main .list_main .iten_main .link .icons{ 160 | font-size: 3rem; 161 | transition: all .3s; 162 | color: var(--white); 163 | } 164 | 165 | .section_main .navigation_main .list_main .iten_main .link .icons:hover { 166 | color: var(--ciano-default-color); 167 | } 168 | 169 | .section_sobre { 170 | display: flex; 171 | justify-content: space-around; 172 | align-items: center; 173 | gap: 3rem; 174 | } 175 | 176 | .section_sobre .foto_perfil{ 177 | min-width: 45rem; 178 | height: 45rem; 179 | object-fit: contain; 180 | border-radius: 100%; 181 | box-shadow: .1rem .1rem 1rem .1rem var(--ciano-default-color);; 182 | } 183 | 184 | .section_sobre .container_sobre { 185 | max-width: 60rem; 186 | } 187 | 188 | .section_sobre .container_sobre .texto_destaque { 189 | color: var(--white); 190 | font-family: var(--font-inter); 191 | font-size: 1.2rem; 192 | letter-spacing: .3rem; 193 | display: flex; 194 | align-items: center; 195 | gap: .5rem; 196 | } 197 | 198 | .section_sobre .container_sobre .texto_destaque .arrow { 199 | width: 2rem; 200 | } 201 | 202 | .section_sobre .container_sobre .titulo_sobre { 203 | font-family: var(--font-barlow); 204 | font-size: 3.2rem; 205 | font-weight: 400; 206 | color: var(--white); 207 | margin: 2rem 0; 208 | } 209 | 210 | .section_sobre .container_sobre .descricao_sobre { 211 | font-family: var(--font-inter); 212 | font-size: 1.5rem; 213 | color: #ccc; 214 | margin-bottom: 3rem; 215 | } 216 | 217 | .section_sobre .container_sobre .container_button { 218 | width: 60%; 219 | display: flex; 220 | gap: 1rem; 221 | } 222 | .section_sobre .container_sobre .container_button .link{ 223 | width: 100%; 224 | } 225 | 226 | .section_sobre .container_sobre .container_button .button_cv, .button_email { 227 | width: 100%; 228 | height: 4.5rem; 229 | border-radius: .5rem; 230 | font-weight: 600; 231 | cursor: pointer; 232 | transition: all .3s; 233 | } 234 | 235 | .section_sobre .container_sobre .container_button .button_cv { 236 | background-color: var(--ciano-default-color); 237 | } 238 | .section_sobre .container_sobre .container_button .button_cv:hover { 239 | background-color: var(--ciano-hover); 240 | } 241 | .section_sobre .container_sobre .container_button .button_email { 242 | background-color: transparent; 243 | border: .1rem solid var(--ciano-default-color); 244 | color: var(--ciano-default-color); 245 | } 246 | .section_sobre .container_sobre .container_button .button_email:hover { 247 | background-color: var(--ciano-default-color); 248 | color: var(--black); 249 | } 250 | 251 | .section_destaque { 252 | display: flex; 253 | justify-content: center; 254 | flex-wrap: wrap; 255 | gap: 3rem; 256 | background-color: var(--blue-dark-color); 257 | padding: 3rem 0; 258 | margin: 7rem 0; 259 | } 260 | 261 | .section_destaque .bloco_destaque { 262 | width: 19rem; 263 | } 264 | .section_destaque .bloco_destaque .destaque_numero { 265 | font-family: var(--font-inter); 266 | font-weight: 900; 267 | font-size: 6rem; 268 | color: var(--ciano-default-color); 269 | } 270 | .section_destaque .bloco_destaque .numero { 271 | font-family: var(--font-inter); 272 | font-weight: 900; 273 | font-size: 5rem; 274 | letter-spacing: .1rem; 275 | color: var(--white); 276 | } 277 | 278 | .section_destaque .bloco_destaque .destaque_descricao { 279 | font-size: 1.7rem; 280 | color: #b5b5b5; 281 | font-weight: 600; 282 | max-width: 20rem; 283 | } 284 | 285 | .section_qualificacoes .cabecalho { 286 | text-align: center; 287 | color: var(--white); 288 | margin-bottom: 2rem; 289 | } 290 | 291 | .section_qualificacoes .cabecalho .titulo{ 292 | font-family: var(--font-inter); 293 | font-size: 3.5rem; 294 | max-width: 60rem; 295 | margin: 0 auto; 296 | 297 | } 298 | 299 | .section_qualificacoes .bloco_button { 300 | max-width: 60rem; 301 | width: 100%; 302 | margin: 0 auto; 303 | display: flex; 304 | } 305 | 306 | .section_qualificacoes .bloco_button .button { 307 | width: 100%; 308 | height: 6rem; 309 | background-color: transparent; 310 | color: #ccc; 311 | font-family: var(--font-barlow); 312 | font-size: 1.7rem; 313 | letter-spacing: .1rem; 314 | border-bottom: .1rem solid #ccc; 315 | cursor: pointer; 316 | transition: .3s all; 317 | } 318 | .section_qualificacoes .bloco_button .button:first-child { 319 | border-right: .1rem solid #ccc; 320 | } 321 | 322 | .section_qualificacoes .bloco_button .ativo { 323 | color: var(--ciano-default-color); 324 | border-color: var(--ciano-default-color); 325 | } 326 | 327 | .section_qualificacoes .container_qualificacoes .lista, .lista_work { 328 | max-width: 60rem; 329 | margin: 0 auto; 330 | animation: Up 0.8s; 331 | position: relative; 332 | } 333 | 334 | .section_qualificacoes .container_qualificacoes #educacao::before { 335 | content: ''; 336 | position: absolute; 337 | left: 50%; 338 | width: 2px; 339 | height: 100%; 340 | background-color: #474747; 341 | } 342 | 343 | .section_qualificacoes .container_qualificacoes .lista .li{ 344 | width: 30rem; 345 | padding: 1rem 2rem; 346 | position: relative; 347 | margin: 3rem 0; 348 | } 349 | 350 | .section_qualificacoes .container_qualificacoes .lista_work .item-work { 351 | width: 100%; 352 | border: .3rem solid var(--black-100); 353 | border-radius: .5rem; 354 | padding: 2rem; 355 | } 356 | 357 | .section_qualificacoes .container_qualificacoes .lista .rigth::after, .left::after { 358 | content: ''; 359 | position: absolute; 360 | top: 3rem; 361 | right: -.5rem; 362 | width: .8rem; 363 | height: .8rem; 364 | background-color: var(--ciano-default-color); 365 | box-shadow: .1rem 0rem 1rem .1rem var(--ciano-default-color); 366 | border-radius: 100%; 367 | } 368 | 369 | .left { 370 | left: 50%; 371 | } 372 | 373 | .rigth { 374 | right: 0rem; 375 | } 376 | 377 | .section_qualificacoes .container_qualificacoes .lista .li .header_qualificacoes { 378 | display: flex; 379 | align-items: center; 380 | gap: 1rem; 381 | } 382 | 383 | .section_qualificacoes .container_qualificacoes .lista .li .header_qualificacoes .icon { 384 | background-color: var(--blue-dark-color); 385 | border-radius: 100%; 386 | font-size: 1.8rem; 387 | padding: 1.5rem; 388 | color: var(--ciano-default-color); 389 | } 390 | 391 | .section_qualificacoes .container_qualificacoes .lista .item-work .header_qualificacoes .icon { 392 | background-color: var(--black-100); 393 | } 394 | 395 | .section_qualificacoes .container_qualificacoes .lista .li .header_qualificacoes .curso-hora { 396 | width: 17rem; 397 | } 398 | 399 | .section_qualificacoes .container_qualificacoes .lista .li .cargo { 400 | font-family: var(--font-barlow); 401 | font-weight: 600; 402 | font-size: 1.3rem; 403 | color: #818181; 404 | margin: .4rem 0 2rem; 405 | } 406 | 407 | .section_qualificacoes .container_qualificacoes .lista .li .descricao { 408 | font-size: 1.5rem; 409 | color: #ccc; 410 | } 411 | 412 | .section_qualificacoes .container_qualificacoes .lista .li .conclusao { 413 | font-family: var(--font-barlow); 414 | font-size: 1.3rem; 415 | font-weight: 600; 416 | color: #818181; 417 | margin: 1rem 0 2rem 0; 418 | } 419 | .section_qualificacoes .container_qualificacoes .lista .li .conclusao i { 420 | margin-right: .7rem; 421 | color: var(--white); 422 | } 423 | 424 | .section_qualificacoes .container_qualificacoes .lista .li .button_certificado { 425 | width: 100%; 426 | height: 4rem; 427 | background-color: transparent; 428 | border: .1rem solid var(--ciano-default-color); 429 | border-radius: .5rem; 430 | color: var(--ciano-default-color); 431 | cursor: pointer; 432 | transition: all .3s; 433 | } 434 | 435 | .section_qualificacoes .container_qualificacoes .lista .li .button_certificado.true:hover { 436 | transform: scale(1.1); 437 | } 438 | 439 | .section_qualificacoes .container_qualificacoes .lista .li .button-progresso { 440 | color: #a6a6a6; 441 | border-color: #a6a6a6; 442 | cursor: not-allowed; 443 | } 444 | 445 | .section_servico .cabecalho_servico { 446 | display: flex; 447 | align-items: center; 448 | gap: 3rem; 449 | margin-bottom: 6rem; 450 | } 451 | 452 | .section_servico .cabecalho_servico .titulo { 453 | max-width: 45rem; 454 | font-family: var(--font-poppins); 455 | font-weight: 700; 456 | font-size: 3.4rem; 457 | color: var(--white); 458 | border-right: .1rem solid var(--ciano-default-color); 459 | } 460 | 461 | .section_servico .cabecalho_servico .descricao { 462 | max-width: 40rem; 463 | font-size: 2rem; 464 | color: #ccc; 465 | } 466 | 467 | .section_servico .container_servico { 468 | display: flex; 469 | flex-wrap: wrap; 470 | gap: 2rem; 471 | margin-bottom: 4rem; 472 | } 473 | 474 | .section_servico .container_servico .bloco_servico { 475 | width: 100%; 476 | min-width: 30rem; 477 | max-width: 37rem; 478 | height: 25rem; 479 | padding: 2rem; 480 | border: .2rem solid var(--black-100); 481 | border-radius: .5rem; 482 | } 483 | 484 | .section_servico .container_servico .bloco_servico .titulo { 485 | color: #ccc; 486 | font-size: 2rem; 487 | margin-bottom: 2rem; 488 | } 489 | 490 | .section_servico .container_servico .bloco_servico .descricao { 491 | font-size: 1.9rem; 492 | letter-spacing: .1rem; 493 | color: #818181; 494 | } 495 | 496 | .section_tech .titulo_tech { 497 | text-align: center; 498 | font-size: 3rem; 499 | color: var(--ciano-default-color); 500 | margin-bottom: 5rem; 501 | } 502 | 503 | .section_tech .container_tech { 504 | display: flex; 505 | gap: 1rem; 506 | flex-wrap: wrap; 507 | justify-content: center; 508 | } 509 | 510 | .section_tech .container_tech .bloco_tech { 511 | width: 29.7rem; 512 | height: 6rem; 513 | border-radius: .5rem; 514 | background-color: var(--black-100); 515 | display: flex; 516 | align-items: center; 517 | gap: 2rem; 518 | padding-left: 2rem; 519 | } 520 | 521 | .section_tech .container_tech .bloco_tech i{ 522 | font-size: 3rem; 523 | color: var(--ciano-default-color); 524 | } 525 | 526 | .section_tech .container_tech .bloco_tech .tailwind { 527 | background-color: var(--ciano-default-color); 528 | padding: .3rem; 529 | border-radius: .5rem; 530 | } 531 | 532 | .section_tech .container_tech .bloco_tech .typescript, .node { 533 | width: 4rem; 534 | } 535 | 536 | .section_tech .container_tech .bloco_tech .nome_tech{ 537 | color: #ccc; 538 | } 539 | 540 | .section_projetos .titulo_projeto { 541 | text-align: center; 542 | font-size: 3rem; 543 | color: var(--ciano-default-color); 544 | margin-bottom: 5rem; 545 | } 546 | 547 | .section_projetos .container_projetos { 548 | display: flex; 549 | justify-content: center; 550 | gap: 1rem; 551 | } 552 | 553 | .section_projetos .container_projetos .card_projeto { 554 | width: 45rem; 555 | min-width: 31rem; 556 | height: 25rem; 557 | border: .2rem solid var(--black-100); 558 | background-color: var(--black); 559 | border-radius: .5rem; 560 | position: relative; 561 | } 562 | 563 | .section_projetos .container_projetos .card_projeto .imagem_fundo{ 564 | width: 100%; 565 | height: 100%; 566 | object-fit: cover; 567 | position: absolute; 568 | } 569 | 570 | .section_projetos .container_projetos .card_projeto:hover .imagem_fundo { 571 | opacity: .2; 572 | transition: all .3s; 573 | } 574 | 575 | .section_projetos .container_projetos .card_projeto .card_descricao { 576 | height: 100%; 577 | display: flex; 578 | flex-direction: column; 579 | align-items: center; 580 | justify-content: center; 581 | gap: 2rem; 582 | opacity: 0; 583 | } 584 | 585 | .section_projetos .container_projetos .card_projeto:hover .card_descricao { 586 | opacity: 1; 587 | animation: Up 0.8s; 588 | } 589 | 590 | .section_projetos .container_projetos .card_projeto .card_descricao .titulo_card{ 591 | color: var(--white); 592 | font-size: 2.4rem; 593 | } 594 | 595 | .section_projetos .container_projetos .card_projeto .card_descricao .card_nav { 596 | width: 100%; 597 | display: flex; 598 | justify-content: center; 599 | gap: 1rem; 600 | z-index: 2; 601 | } 602 | 603 | .section_projetos .container_projetos .card_projeto .card_descricao .card_nav .button { 604 | width: 10rem; 605 | height: 3rem; 606 | border-radius: .5rem; 607 | background-color: transparent; 608 | cursor: pointer; 609 | } 610 | .section_projetos .container_projetos .card_projeto .card_descricao .card_nav .github { 611 | background-color: rgb(166, 0, 255); 612 | } 613 | 614 | .section_projetos .container_projetos .card_projeto .card_descricao .card_nav .site { 615 | background-color: var(--ciano-default-color); 616 | } 617 | 618 | .section_projetos .container_button { 619 | display: flex; 620 | justify-content: center; 621 | gap: 2rem; 622 | margin: 3rem 0; 623 | } 624 | 625 | .section_projetos .container_button .botao_github{ 626 | width: 30rem; 627 | height: 4rem; 628 | border-radius: .5rem; 629 | background-color: transparent; 630 | border: .1rem solid var(--ciano-default-color); 631 | color: var(--ciano-default-color); 632 | cursor: pointer; 633 | transition: all .3s; 634 | } 635 | 636 | .section_projetos .container_button .botao_github:hover { 637 | background-color: var(--ciano-default-color); 638 | color: var(--black); 639 | } 640 | 641 | .section_contato { 642 | margin-bottom: 10rem; 643 | } 644 | 645 | .section_contato .cabecalho_contato { 646 | display: flex; 647 | flex-direction: column; 648 | justify-content: center; 649 | align-items: center; 650 | } 651 | 652 | .section_contato .cabecalho_contato .titulo { 653 | font-family: var(--font-inter); 654 | font-size: 6rem; 655 | letter-spacing: .2rem; 656 | color: var(--ciano-default-color); 657 | display: inline; 658 | padding-right: 1rem; 659 | } 660 | 661 | .section_contato .cabecalho_contato .descricao{ 662 | width: 100%; 663 | max-width: 50rem; 664 | color: var(--white); 665 | margin: 1rem 0 2rem 0; 666 | font-size: 1.8rem; 667 | text-align: center; 668 | } 669 | 670 | .section_contato .lista_rede { 671 | display: flex; 672 | justify-content: center; 673 | flex-wrap: wrap; 674 | gap: 2rem; 675 | margin-top: 3rem; 676 | } 677 | 678 | .section_contato .lista_rede .item_rede { 679 | width: 30rem; 680 | padding: 1rem; 681 | border: .2rem solid var(--black-100); 682 | height: 6rem; 683 | border-radius: .5rem; 684 | transition: all .3s; 685 | cursor: pointer; 686 | } 687 | 688 | .section_contato .lista_rede .item_rede:hover { 689 | transform: scale(1.1); 690 | } 691 | 692 | .section_contato .lista_rede .item_rede .link { 693 | display: flex; 694 | align-items: center; 695 | justify-content: center; 696 | gap: 1rem; 697 | font-size: 1.8rem; 698 | font-family: var(--font-inter); 699 | color: var(--white); 700 | } 701 | 702 | .section_contato .lista_rede .item_rede .icon { 703 | font-size: 3rem; 704 | color: var(--ciano-default-color); 705 | } 706 | 707 | .botao_topo { 708 | width: 28rem; 709 | margin: 0 auto; 710 | display: flex; 711 | justify-content: center; 712 | align-items: center; 713 | background-color: transparent; 714 | color: var(--white); 715 | font-family: var(--font-poppins); 716 | font-weight: 600; 717 | font-size: 1.7rem; 718 | letter-spacing: .1rem; 719 | margin-bottom: 2rem; 720 | cursor: pointer; 721 | } 722 | 723 | .botao_topo .icone { 724 | font-size: 2rem; 725 | padding-right: 1rem; 726 | color: var(--ciano-default-color); 727 | animation: UpArrow 1s infinite; 728 | } 729 | 730 | .footer { 731 | background-color: var(--black-100); 732 | height: 6rem; 733 | display: flex; 734 | align-items: center; 735 | justify-content: center; 736 | } 737 | 738 | .footer .titulo { 739 | font-size: 1.8rem; 740 | font-weight: 400; 741 | color: var(--white); 742 | } 743 | 744 | @media (min-width: 621px) { 745 | .section_qualificacoes .container_qualificacoes .lista .left::after { 746 | content: ''; 747 | left: -.3rem; 748 | } 749 | } 750 | 751 | @media (max-width: 1000px) { 752 | .section_sobre .foto_perfil { 753 | min-width: 40rem; 754 | height: 40rem; 755 | } 756 | .section_projetos .container_projetos { 757 | flex-wrap: wrap; 758 | } 759 | } 760 | 761 | @media (max-width: 900px) { 762 | .section_main .container_main .titulo_main { 763 | font-size: 3rem; 764 | 765 | } 766 | .section_main .container_main .cargo_main { 767 | font-size: 5rem; 768 | } 769 | .section_sobre { 770 | flex-direction: column; 771 | align-items: center; 772 | } 773 | 774 | .section_sobre .container_sobre .container_button { 775 | width: 100%; 776 | margin: 0 auto; 777 | } 778 | } 779 | 780 | @media (max-width: 790px) { 781 | .section_servico .container_servico { 782 | justify-content: center; 783 | } 784 | .section_servico .cabecalho_servico .titulo { 785 | width: 100%; 786 | margin: 0 auto; 787 | text-align: center; 788 | border: none; 789 | } 790 | .section_servico .cabecalho_servico .descricao { 791 | display: none; 792 | } 793 | } 794 | @media (max-width: 620px) { 795 | .section_main .container_main .cargo_main { 796 | font-size: 3.5rem; 797 | } 798 | .section_sobre .foto_perfil { 799 | display: none; 800 | } 801 | .section_sobre .container_sobre .titulo_sobre{ 802 | font-size: 2.3rem; 803 | } 804 | .section_destaque .bloco_destaque .destaque_descricao { 805 | text-align: center; 806 | } 807 | .section_qualificacoes .container_qualificacoes { 808 | width: 31rem; 809 | margin: 0 auto; 810 | } 811 | .section_qualificacoes .container_qualificacoes #educacao::before { 812 | left: -.7rem; 813 | } 814 | .section_qualificacoes .container_qualificacoes #educacao li { 815 | margin-right: 0; 816 | left: 0; 817 | } 818 | .section_qualificacoes .container_qualificacoes .lista li::after { 819 | left: -1rem; 820 | } 821 | 822 | } 823 | @media (max-width: 430px) { 824 | html { 825 | font-size: 60%; 826 | } 827 | .section_main .container_main .descricao_main { 828 | font-size: 2.2rem; 829 | } 830 | .section_main .container_main .cargo_main { 831 | font-size: 2.8rem; 832 | } 833 | .section_main .container_main .descricao_main { 834 | font-size: 1.4rem; 835 | max-width: 90%; 836 | } 837 | .section_sobre .container_sobre .titulo_sobre { 838 | font-size: 2rem; 839 | } 840 | .section_contato .cabecalho_contato .titulo { 841 | font-size: 4.2rem; 842 | } 843 | .section_qualificacoes .cabecalho .titulo { 844 | font-size: 2.8rem; 845 | } 846 | .section_qualificacoes .container_qualificacoes .lista_work .item-work { 847 | width: 30rem; 848 | } 849 | .section_servico .cabecalho_servico .titulo { 850 | font-size: 2.9rem; 851 | } 852 | } 853 | @keyframes Up { 854 | from { 855 | opacity: 0; 856 | transform: translateY(2rem); 857 | } 858 | to { 859 | opacity: 1; 860 | } 861 | } 862 | @keyframes UpArrow { 863 | from { 864 | opacity: 0; 865 | transform: translateY(1rem); 866 | } 867 | to { 868 | opacity: 1; 869 | transform: translateY(-1rem); 870 | } 871 | } 872 | --------------------------------------------------------------------------------