A página inicial do portfólio foi projetada com um menu de navegação que agrupa todas as seções mais importantes do projeto. Todas as divs e elementos de navegação foram devidamente estruturados no HTML para manter a página organizada.
Para uma melhor experiência do usuário, foram adicionadas cores contrastantes, imagens com animações, transições de navegação e efeitos hover em todos os botões, utilizando uma classe universal.
Na aba "Minhas Especialidades", utilizei uma seção com cinco divs, todas estilizadas via CSS para criar cartões personalizados e animados, proporcionando uma melhor experiência ao usuário.
Na aba "Sobre", mantive o código organizado com foco em apresentar minha personalidade e história profissional. Trabalhei com elementos div estruturados e combinei o design da página com um cabeçalho e rodapé bem elaborados, contendo botões de contato para minhas redes sociais, e-mail e um logotipo limpo para este projeto.
A aba de projetos é a minha favorita e a mais importante do portfólio, pois apresenta meus principais trabalhos e demonstra meu domínio sobre as tecnologias utilizadas. Essa seção possui uma forte integração com meu GitHub, garantindo que tudo esteja devidamente hospedado e versionado.
A estrutura do código segue os mesmos princípios das outras páginas, utilizando classes universais. Assim, o efeito hover aplicado aos cartões das minhas habilidades é o mesmo utilizado aqui, reduzindo repetição de código e otimizando o desempenho para navegadores.
Na aba de contatos, utilizei uma API de formulários para conectar diretamente com meu e-mail, tornando o portfólio totalmente funcional. Caso queira me enviar uma mensagem, basta preencher os dados solicitados e clicar no botão de envio.
O design dos ícones em 3D foi criado para manter a identidade visual em todas as páginas do site, utilizando animações com keyframes em CSS.
- HTML5: Estrutura semântica das páginas.
- CSS3: Estilização responsiva e animações.
- JavaScript: Interatividade e dinamismo.
Você pode acessar meu portfólio diretamente pelo link abaixo:
Caso prefira clonar o repositório e rodar localmente:
git clone https://github.com/JohnReiiss/Portfolio-Johnatan-Hayabusa.gitAbra o arquivo index.html em seu navegador para visualizar o projeto.
- Desenvolvedor: [Johnatan dos Santos Reis]
- E-mail: [email protected]
- LinkedIn: linkedin.com/in/johnatan-Reis
- GitHub: github.com/JohnReiiss
Obrigado por visitar meu portfólio! Espero que goste do projeto. 🚀