Portfólio

Ideia   |    Instalação   |    Desafios   |    Aprendizados   

💡 Ideia

0 Projeto tem como objetivo mostrar um pouco mais do meu trabalho.

Tecnologias utilizadas no projeto:

---

💻 Desktop:

---

📱 Mobile:

---

📋 Desafios:

Atualmente o projeto está concluído, entretanto não está terminado. O processo de criação não prende o projeto a algo fixo para sempre, tudo é mutável e conforme eu vá evoluindo o site também irá. Dando continuidade ao projeto depois de um ano, resolvi testar como estão minhas enferrujadas habilidades tentando retirar uma terceira versão deste projeto. As atividades desempenhadas seguem mapeadas abaixo:

• Idealização;
• Prototipação das telas;
• Construção do projeto Beta (HTML e CSS);
• Refatoração 1 - (Melhorar código HTML e CSS);
• Implementar responsividade;
• Criar navbar responsiva para acesso ao site via mobile;
• Implementar scroll suave;
• Refatoração 2 - (Melhorar a navbar, responsividade nas mudanças de tamanho da tela, adição de efeitos e animações);
• Implementar formulário para contato;
• Implementar a V2.0 do site portfólio;
• Refatoração 3 - Nova versão do site com elementos mais atuais;
• Prototipação das telas via Figma;
• Implementar uma nova Navbar que funcione corretamente com responsividade ao mobile (comecei refazendo o menu);
• Criação das estruturas HTML das páginas;
• Estilização via CSS;
• Busca e implementação de animação ao invés de usar GIFs (santa gambiarra);
• Criação da logo;
• Refatorar as imagens .png e .jeg por .svg (otimização);
• Remover estrutura de código das versões anteriores junto aos arquivos;
• Atualizar o Readme;
• Refatoração 4 - Nova logo, elementos e estilos;
• Atualizar telas via Figma;
• Menu mobile refatorado;
• Novos ícones adicionados;
• Refatoração 5 - Novo estilo, cores, artes, exposição de elementos, modo noturno e claro, tradução (pt-br e en);
• Novas telas projetadas no Figma;
• Novas fontes adicionadas (maior relação com a nova temática do site);
• Novos ícones feitos com pixel art;
• Textos de referência para cada pixel art (visível por meio da interação);
• Nova organização dos arquivos (separação por sessões no CSS, arquivos de tradução manual);
• Novos recursos de animação ao longo de todo o site;
• Novos recursos de interação com o site (hover e touchstart nas artes de pixel);
• Funcionalidade de escolha de modo (noturno e claro);
• Novo recurso de tradução (manual, via CSS devido a necessidade de referenciar as obras de pixel);

---

🔧 Instalação:

Para iniciar, efetue o clone do projeto do GitHub em um diretório de sua preferência:

cd "diretorio de sua preferencia"
git clone https://github.com/gustavofbc/gustavofbc.github.io.git

Em seguida, para verificar o projeto funcionando, abra-o usando o live-server em seu vscode ou abra o arquivo "index.html" utilizando o navegador de sua preferência.

e voalá! 🎉

---

🎓 Aprendizados

-> HTML5: semântico, padronização de nomenclatura de classes;

-> CSS3: animações, transições, responsividade, media-queries, nova organização de arquivos.

-> JavaScript: import de fonts via arquivos e não somente via link, acessibilidade nas queries, animação ao scroll, animações de movimentação, animações pausadas por meio da interação, tradução, uso do LocalStorage.

-> Figma: prototipação de interfaces, exportação de ícones e elementos customizados.

_que a força esteja com você meu caro mestre/padawan/sith.