Desenvolvido 100% por conta própria. Responsivo e projetado para Mobile.
https://diogolcarvalho.github.io/projeto-portfolio/
Três principais pastas: CSS, img e JS. A pasta CSS com todos os arquivos CSS, que optei por organizar em várias pastas separadas de acordo com o conteúdo apresentado, para melhor manutenção:
Utilizei no projeto um reset.css e um arquivo com todas as variáveis css do projeto. A pasta img tem apenas as imagens utilizadas e a pasta JS tem todos os comandos JavaScript.
Na tag head estão os links referentes aos arquivos CSS do projeto, links das fontes e as meta tags padrões como charset e viewport.
O resto do arquivo HTML é estruturado em tags semânticas e utilizei a formatação BEM para as class e id. Ao final temos duas tags scripts. Uma referente aos icons e a outra ao arquivo JS do projeto.
Keyframes na tag header, criando o efeito de degradê na página inicial e também mudando a posição do background. Os outros comandos estão modificando a escala e o eixo Y.
Pseudo-classes na tag contact, modificando os filhos da tag li.
Display: Flex-Box e Grid Layout em várias partes do projeto.
Variáveis e media-queries
Na tag header usei um addEventListener para quando o scroll for maior que 500 no eixo Y, mude a color na tag nav. Também criei todos os comandos para um MOBILE. Basicamente no arquivo header.css há um media query que cria uma barra Mobile, e quando o usuário clicar, a barra muda de imagem e cria uma classe nav__ativo chamando um menu MOBILE. Ao final desenvolvi uma função para resetar todo o menu e trocar a imagem e selecionei todos os elementos da li, e já que ele cria um NODELIST, que basicamente é uma array, selecionei cada item para acionar a função ao clicar.
No contact queria fazer um efeito usando onmouseover e onmouseout, então selecionei todos os elementos da li de contato, e criei duas funções, uma que leva dois parâmetros, a cor do efeito e a posição. E a segunda função é basicamente para resetar o efeito.
Por último, queria apenas modificar o texto da seção footer para que sempre apresente o ano corretamente.
