├── .vscode └── settings.json ├── img ├── foto.png ├── DESKTOP.png ├── card-nike.png ├── background.png ├── card-liniker.png ├── card-phone.png ├── card-pikachu.png ├── card-sandman.png └── card-sistema.png ├── css ├── reset.css ├── section-tittle.css ├── menu.css ├── logo.css ├── home.css ├── projetos.css ├── contato.css ├── sobre-mim.css ├── tablet.css ├── style.css └── mobile.css ├── README.md ├── mobile-navbar.js └── index.html /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "liveServer.settings.port": 5501 3 | } -------------------------------------------------------------------------------- /img/foto.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VINICIUSNUNES137/portifolio/HEAD/img/foto.png -------------------------------------------------------------------------------- /img/DESKTOP.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VINICIUSNUNES137/portifolio/HEAD/img/DESKTOP.png -------------------------------------------------------------------------------- /img/card-nike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VINICIUSNUNES137/portifolio/HEAD/img/card-nike.png -------------------------------------------------------------------------------- /img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VINICIUSNUNES137/portifolio/HEAD/img/background.png -------------------------------------------------------------------------------- /img/card-liniker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VINICIUSNUNES137/portifolio/HEAD/img/card-liniker.png -------------------------------------------------------------------------------- /img/card-phone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VINICIUSNUNES137/portifolio/HEAD/img/card-phone.png -------------------------------------------------------------------------------- /img/card-pikachu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VINICIUSNUNES137/portifolio/HEAD/img/card-pikachu.png -------------------------------------------------------------------------------- /img/card-sandman.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VINICIUSNUNES137/portifolio/HEAD/img/card-sandman.png -------------------------------------------------------------------------------- /img/card-sistema.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/VINICIUSNUNES137/portifolio/HEAD/img/card-sistema.png -------------------------------------------------------------------------------- /css/reset.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | ul, ul, li { 8 | list-style: none; 9 | } 10 | 11 | a{ 12 | text-decoration: none; 13 | color: inherit; 14 | } -------------------------------------------------------------------------------- /css/section-tittle.css: -------------------------------------------------------------------------------- 1 | .section__tittle { 2 | grid-area: tittle; 3 | font-size: 150px; 4 | text-align: center; 5 | background: linear-gradient(#fff2, #000); 6 | /* background-color: aliceblue; */ 7 | background-clip: text; 8 | -webkit-background-clip: text; 9 | color: transparent; 10 | } 11 | -------------------------------------------------------------------------------- /css/menu.css: -------------------------------------------------------------------------------- 1 | .menu { 2 | display: flex; 3 | gap: 72px; 4 | font-size: 1.25rem; 5 | color: #7779; 6 | } 7 | 8 | .menu li { 9 | border-bottom: 2px solid transparent; 10 | transition: all 0.5s; 11 | } 12 | 13 | .menu li:hover { 14 | border-color: var(--primary-color); 15 | color: #fff; 16 | } 17 | -------------------------------------------------------------------------------- /css/logo.css: -------------------------------------------------------------------------------- 1 | .logo { 2 | font-size: 1.5rem; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | .logo::before { 9 | content: '<'; 10 | font-size: 1.75rem; 11 | color: var(--primary-color); 12 | /* font-weight: 700; */ 13 | } 14 | 15 | .logo::after { 16 | content: '/>'; 17 | font-size: 1.75rem; 18 | color: var(--primary-color); 19 | /* font-weight: 700; */ 20 | } 21 | -------------------------------------------------------------------------------- /css/home.css: -------------------------------------------------------------------------------- 1 | .home { 2 | width: 100%; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | background-image: url(https://i.pinimg.com/originals/66/29/ac/6629ac69eee96adbe0880b4f06afdc26.gif); 7 | background-repeat: no-repeat; 8 | background-size: cover; 9 | /* filter: brightness(50%); */ 10 | box-shadow: inset 0px -40px 40px #000; 11 | } 12 | 13 | .home::after { 14 | background-color: #fff; 15 | } 16 | 17 | .profile__foto { 18 | filter: brightness(70%); 19 | border: 5px solid var(--primary-color); 20 | border-radius: 50%; 21 | } 22 | 23 | .profile { 24 | display: flex; 25 | align-items: center; 26 | gap: 48px; 27 | } 28 | 29 | .profile__text { 30 | font-size: 1.5rem; 31 | } 32 | 33 | .profile__name { 34 | font-size: 4rem; 35 | color: var(--primary-color); 36 | } 37 | -------------------------------------------------------------------------------- /css/projetos.css: -------------------------------------------------------------------------------- 1 | .projetos { 2 | width: 100%; 3 | display: flex; 4 | flex-direction: column; 5 | gap: 64px; 6 | align-items: center; 7 | } 8 | 9 | .card-container { 10 | max-width: 1200px; 11 | width: 100%; 12 | display: flex; 13 | flex-wrap: wrap; 14 | justify-content: space-between; 15 | gap: 48px; 16 | } 17 | 18 | .card { 19 | position: relative; 20 | display: block; 21 | overflow: hidden; 22 | /* border: 3px solid var(--primary-color); */ 23 | } 24 | 25 | .card::before { 26 | position: absolute; 27 | background-color: #1117; 28 | content: 'Clique aqui para visualizar'; 29 | font-size: 1.5rem; 30 | color: #fff; 31 | text-align: center; 32 | width: 100%; 33 | height: 100%; 34 | display: grid; 35 | place-content: center; 36 | transform: translateY(100%); 37 | transition: transform 0.6s; 38 | } 39 | 40 | .card:hover::before { 41 | transform: translateY(0%); 42 | } 43 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **PORTIFÓLIO VINICIUS NUNES - 2022** 2 | 3 | ![](./img/DESKTOP.png) 4 | 5 | ## [Clique aqui](https://viniciusnunes137.github.io/portifolio/) para acessar o site 6 | 7 | ## **SOBRE** 8 | 9 | - Site tipo do portifólio, onde foi construído com o intuito de divulgar a minha evolução como desenvolvedor web. 10 | 11 | - - Foi proposto esse projeto pelo professor de Linguagem de Marcação com a finalidade de replicar um projeto que desenvolvemos no FIGMA com a finalidade de compreender a @media para responsividade. 12 | 13 | 14 | 15 | ## **TECNOLOGIAS APLICADAS** 16 | 17 | - HTML5 18 | - CSS3 19 | 20 | 21 | ## **FERRAMENTAS** 22 | 23 | - VSCODE 24 | - GITHUB / GIT 25 | - FIGMA 26 | - FONT-AWESOME 27 | 28 | 29 | ## **CONCEITOS APLICADOS** 30 | 31 | - DISPLAY (GRID) 32 | - GRID (AREA) 33 | - CSS PORCIONADO 34 | - @MEDIA 35 | 36 | ## **AUTOR** 37 | 38 | - [VINICIUS NUNES](https://github.com/VINICIUSNUNES137) 39 | 40 | -------------------------------------------------------------------------------- /mobile-navbar.js: -------------------------------------------------------------------------------- 1 | class MobileNavbar { 2 | constructor(mobileMenu, navList, navLinks) { 3 | this.mobileMenu = document.querySelector(mobileMenu) 4 | this.navList = document.querySelector(navList) 5 | this.navLinks = document.querySelectorAll(navLinks) 6 | this.activeClass = 'active' 7 | 8 | this.handleClick = this.handleClick.bind(this) 9 | } 10 | 11 | animateLinks() { 12 | this.navLinks.forEach((link, index) => { 13 | link.style.animation 14 | ? (link.style.animation = '') 15 | : (link.style.animation = `navLinkFade 0.5s ease forwards ${ 16 | index / 7 + 0.3 17 | }s`) 18 | }) 19 | } 20 | 21 | handleClick() { 22 | this.navList.classList.toggle(this.activeClass) 23 | this.mobileMenu.classList.toggle(this.activeClass) 24 | this.animateLinks() 25 | } 26 | 27 | addClickEvent() { 28 | this.mobileMenu.addEventListener('click', this.handleClick) 29 | } 30 | 31 | init() { 32 | if (this.mobileMenu) { 33 | this.addClickEvent() 34 | } 35 | return this 36 | } 37 | } 38 | 39 | const mobileNavbar = new MobileNavbar( 40 | '.mobile-menu', 41 | '.nav-list', 42 | '.nav-list li' 43 | ) 44 | mobileNavbar.init() 45 | -------------------------------------------------------------------------------- /css/contato.css: -------------------------------------------------------------------------------- 1 | .contatos { 2 | width: 100%; 3 | max-width: 1200px; 4 | display: grid; 5 | grid-template-areas: 6 | 'tittle tittle tittle' 7 | 'contato social link'; 8 | grid-template-rows: auto 1fr; 9 | grid-template-columns: 1fr 2fr 1fr; 10 | align-items: center; 11 | } 12 | 13 | .contato-container { 14 | grid-area: contato; 15 | display: flex; 16 | flex-direction: column; 17 | gap: 16px; 18 | } 19 | 20 | .contato-container h3 { 21 | font-size: 1.5rem; 22 | } 23 | 24 | .contato-item { 25 | display: flex; 26 | gap: 12px; 27 | } 28 | 29 | .contato-item__icon { 30 | font-size: 1.25rem; 31 | } 32 | 33 | .social-container { 34 | grid-area: social; 35 | display: flex; 36 | justify-content: center; 37 | gap: 32px; 38 | } 39 | 40 | .social:hover { 41 | color: var(--primary-color); 42 | } 43 | 44 | .social { 45 | width: 64px; 46 | height: 64px; 47 | background-color: var(--icon-color); 48 | font-size: 2rem; 49 | display: grid; 50 | place-content: center; 51 | transition: color 0.5s; 52 | } 53 | 54 | .link-container { 55 | grid-area: link; 56 | display: flex; 57 | flex-direction: column; 58 | gap: 16px; 59 | text-align: center; 60 | } 61 | 62 | .link-container h3 { 63 | font-size: 1.5rem; 64 | } 65 | -------------------------------------------------------------------------------- /css/sobre-mim.css: -------------------------------------------------------------------------------- 1 | .sobre-mim { 2 | max-width: 1200px; 3 | width: 100%; 4 | height: 100vh; 5 | display: grid; 6 | grid-template-areas: 7 | 'tittle tittle' 8 | 'description skills'; 9 | grid-template-rows: auto 1fr; 10 | grid-template-columns: 1fr 1fr; 11 | gap: 64px; 12 | } 13 | 14 | .description { 15 | grid-area: description; 16 | display: flex; 17 | flex-direction: column; 18 | gap: 32px; 19 | } 20 | 21 | .description__tittle { 22 | font-size: 48px; 23 | color: var(--primary-color); 24 | } 25 | 26 | .description__text { 27 | font-size: 1.5rem; 28 | width: 85%; 29 | line-height: 150%; 30 | } 31 | 32 | .skills { 33 | grid-area: skills; 34 | display: flex; 35 | flex-direction: column; 36 | gap: 32px; 37 | } 38 | 39 | .skills__tittle { 40 | font-size: 48px; 41 | color: var(--primary-color); 42 | } 43 | 44 | .skills__container { 45 | display: flex; 46 | flex-wrap: wrap; 47 | gap: 16px; 48 | } 49 | 50 | .skills__icon { 51 | width: 150px; 52 | height: 150px; 53 | background-color: var(--icon-color); 54 | display: flex; 55 | flex-direction: column; 56 | justify-content: center; 57 | align-items: center; 58 | gap: 12px; 59 | } 60 | 61 | .skills__icon i { 62 | font-size: 3rem; 63 | } 64 | 65 | .skills__icon span { 66 | font-weight: 700; 67 | font-size: 1.5rem; 68 | } 69 | -------------------------------------------------------------------------------- /css/tablet.css: -------------------------------------------------------------------------------- 1 | /* TABLET */ 2 | 3 | @media (max-width: 960px) { 4 | nav { 5 | display: none; 6 | } 7 | header { 8 | max-width: 650px; 9 | display: flex; 10 | justify-content: space-between; 11 | } 12 | 13 | body { 14 | max-width: 960px; 15 | width: 100%; 16 | } 17 | 18 | .navigation-icon { 19 | visibility: visible; 20 | font-size: 1.5rem; 21 | } 22 | 23 | .home { 24 | display: flex; 25 | flex-direction: column; 26 | height: 1000px; 27 | align-items: center; 28 | justify-content: center; 29 | } 30 | 31 | .section__tittle { 32 | font-size: 7rem; 33 | } 34 | 35 | .profile { 36 | display: flex; 37 | flex-direction: column; 38 | text-align: center; 39 | line-height: 60px; 40 | } 41 | 42 | .sobre-mim { 43 | width: 100%; 44 | height: 1400px; 45 | display: flex; 46 | flex-direction: column; 47 | align-items: flex-start; 48 | padding-left: 28.5px; 49 | } 50 | 51 | .skills { 52 | width: 75%; 53 | } 54 | 55 | .skills__container { 56 | gap: 48px; 57 | } 58 | 59 | .description__text { 60 | width: 450px; 61 | } 62 | 63 | .projetos { 64 | max-height: 2800px; 65 | height: 100%; 66 | display: flex; 67 | flex-direction: column; 68 | } 69 | .card-container { 70 | flex-wrap: wrap; 71 | width: 85%; 72 | display: flex; 73 | justify-content: center; 74 | 75 | } 76 | 77 | .card-container img { 78 | width: 600px; 79 | } 80 | .contatos { 81 | display: flex; 82 | flex-direction: column; 83 | height: 800px; 84 | gap: 48px; 85 | } 86 | 87 | .contato-container { 88 | display: flex; 89 | align-items: center; 90 | } 91 | 92 | .link-container { 93 | display: flex; 94 | align-items: center; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --primary-color: #9562f3; 3 | --icon-color: #121216; 4 | } 5 | 6 | html { 7 | scroll-behavior: smooth; 8 | } 9 | 10 | body { 11 | display: grid; 12 | grid-template-areas: 'content'; 13 | font-family: 'Ubuntu', sans-serif; 14 | color: #fff; 15 | background-color: #000; 16 | } 17 | 18 | main { 19 | grid-area: content; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | } 24 | 25 | header { 26 | grid-area: content; 27 | z-index: 777; 28 | max-width: 1200px; 29 | width: 100%; 30 | place-self: start center; 31 | margin-top: 48px; 32 | display: flex; 33 | justify-content: space-between; 34 | align-items: center; 35 | } 36 | 37 | section { 38 | height: 100vh; 39 | } 40 | 41 | .voltar { 42 | position: fixed; 43 | right: 16px; 44 | bottom: 16px; 45 | display: grid; 46 | place-content: center; 47 | font-size: 2.5rem; 48 | transition: all 0.5s; 49 | } 50 | .voltar:hover { 51 | color: var(--primary-color); 52 | z-index: 9999; 53 | } 54 | 55 | footer { 56 | height: 50px; 57 | width: 100%; 58 | background-color: #0005; 59 | grid-area: content; 60 | place-self: end center; 61 | display: flex; 62 | align-items: center; 63 | justify-content: center; 64 | border-top: 2px solid white; 65 | font-size: 1rem; 66 | gap: 3px; 67 | } 68 | 69 | .copy-name { 70 | font-size: 1.1rem; 71 | color: var(--primary-color); 72 | font-weight: 600; 73 | } 74 | 75 | @media (max-width: 3000px) { 76 | .navigation-icon { 77 | visibility: hidden; 78 | } 79 | } 80 | 81 | /* Barra de Rolagem */ 82 | 83 | /* Fundo que corre */ 84 | ::-webkit-scrollbar-track { 85 | background-color: #232c3b; 86 | } 87 | /* Fundo que corre */ 88 | 89 | ::-webkit-scrollbar { 90 | width: 10px; 91 | background: #f4f4f4; 92 | } 93 | 94 | /* Linha que desce */ 95 | ::-webkit-scrollbar-thumb { 96 | background: var(--primary-color); 97 | border-radius: 15px; 98 | } 99 | /* Linha que desce*/ 100 | 101 | /* Barra de Rolagem */ 102 | -------------------------------------------------------------------------------- /css/mobile.css: -------------------------------------------------------------------------------- 1 | @media (max-width: 640px) { 2 | body { 3 | width: 100%; 4 | } 5 | 6 | footer { 7 | font-size: 0.75rem; 8 | } 9 | 10 | .copy-name { 11 | font-size: 0.75rem; 12 | } 13 | 14 | header { 15 | max-width: 400px; 16 | width: 100%; 17 | justify-content: space-between; 18 | padding-left: 32px; 19 | padding-right: 32px; 20 | } 21 | 22 | .logo { 23 | display: none; 24 | } 25 | 26 | header::before { 27 | content: ''; 28 | font-size: 1.75rem; 29 | color: var(--primary-color); 30 | } 31 | 32 | .home { 33 | display: flex; 34 | position: relative; 35 | flex-direction: column; 36 | justify-content: space-around; 37 | padding-top: 48px; 38 | width: 100%; 39 | height: 100vh; 40 | } 41 | 42 | .profile__text { 43 | font-size: 1.5rem; 44 | } 45 | 46 | .profile__name { 47 | font-size: 3rem; 48 | } 49 | 50 | .profile__foto { 51 | width: 70vw; 52 | } 53 | 54 | .section__tittle { 55 | font-size: 3.5rem; 56 | } 57 | 58 | .description__tittle { 59 | font-size: 3rem; 60 | text-align: center; 61 | } 62 | 63 | .description__text { 64 | text-align: justify; 65 | width: 80vw; 66 | } 67 | 68 | .skills__tittle { 69 | font-size: 3rem; 70 | text-align: center; 71 | } 72 | 73 | .sobre-mim { 74 | height: 2200px; 75 | display: flex; 76 | width: 100vw; 77 | align-items: center; 78 | gap: 100px; 79 | padding: 0; 80 | } 81 | 82 | .skills__container { 83 | justify-content: center; 84 | } 85 | 86 | .projetos { 87 | height: 1800px; 88 | display: flex; 89 | } 90 | 91 | .card-container { 92 | display: flex; 93 | justify-content: center; 94 | } 95 | 96 | .card-container img { 97 | width: 350px; 98 | } 99 | 100 | h2 { 101 | display: flex; 102 | justify-content: center; 103 | } 104 | 105 | .contatos { 106 | height: 800px; 107 | } 108 | 109 | .social-container { 110 | flex-direction: column; 111 | } 112 | } 113 | 114 | .copy { 115 | font-size: 0.7rem; 116 | } 117 | 118 | .copy-name { 119 | font-size: 0.7rem; 120 | } 121 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Portifólio - Vinicius Nunes 7 | 8 | 9 | 13 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
31 | 32 | 33 | 34 | 35 | 52 |
53 |
54 | 55 | 56 | 57 |
58 |
59 | foto 64 |
65 | Olá, meu nome é 66 |

Vinicius Nunes

67 | e sou desenvolvedor Frontend 68 |
69 |
70 |
71 |
72 |

SOBRE MIM

73 |
74 |

QUEM SOU?

75 |

76 | Sou iniciante na área de criação e manutenção de sites, tenho 77 | conhecimento em prototipação e designer sempre pensando na 78 | experiência do usuário. Sou apaixonado pelo mundo digital e 79 | principalmente desenvolvimento, sempre procurando inspiração nos 80 | meus colegas de trabalho e no mundo que me rodeia. 81 |

82 |
83 |
84 |

SKILLS

85 |
    86 |
  • 87 | 88 | HTML 89 |
    • 90 |
  • 91 | 92 | CSS 93 |
    • 94 |
  • 95 | 96 | JS 97 |
    • 98 |
  • 99 | 100 | FIGMA 101 |
    • 102 |
  • 103 | 104 | GITHUB 105 |
    • 106 |
  • 107 | 108 | JAVA 109 |
    • 110 |
111 |
112 |
113 |
114 |

PROJETOS

115 |
116 | 121 | Site liniker 122 | 123 | 128 | Landing-page Nike 129 | 130 | 135 | Site Sandman 136 | 137 | 142 | Pikachu 143 | 144 | 149 | Pikachu 150 | 151 | 156 | Pikachu 157 | 158 |
159 |
160 |
161 |

CONTATOS

162 | 163 | 196 |
197 |
198 | 206 | 207 | 208 | 209 | 210 | --------------------------------------------------------------------------------