Article image
wagner nardes
wagner nardes28/11/2023 14:41
Compartilhe

Finalização da Formação JavaScript Developer: Criação da página portifólio

  • #HTML
  • #JavaScript
  • #CSS

Olá para você que está compartilhando este momento comigo. Este artigo tem a proposta de revelar um pouco sobre a jornada de criar minha própria página de portfólio, explorando as técnicas empregadas e as personalizações que acrescentei para torná-la verdadeiramente minha.

imageO pontapé inicial do projeto envolveu a construção do cabeçalho, exibindo as informações iniciais da página. No print, você pode visualizar a evolução gradual dos arquivos CSS, os quais ajustei conforme desenvolvia cada seção. Optei por manter os estilos CSS separados para uma organização mais eficiente.

image

Ao observar o print, é possível notar a prática de adicionar comentários identificando cada bloco de CSS. Embora tenha considerado consolidar todos os estilos em um único arquivo, optei por manter a estrutura atual devido à sua interessante organização.

image

Em uma etapa posterior, o instrutor propôs a utilização de um JSON para extrair dados por meio do JavaScript. Contudo, decidi incorporar essas informações diretamente no HTML, eliminando a necessidade de um script adicional. Poderia ser uma oportunidade para exibir minhas habilidades? Sim, mas acredito que isso possa ser evidenciado de maneira mais adequada em outra seção.

image

Quanto ao design, o projeto original sugeria um efeito mais simplificado, porém, optei por uma abordagem mais elaborada. Integrei dois SVGs nas extremidades da página, reservando um deles para o canto das informações e aplicando um efeito de vidro no restante. O plano de fundo exibe uma imagem espacial, refletindo meu gosto pessoal.

image

E, finalmente, apresento o resultado final da minha página. Destaco que ela foi desenvolvida seguindo a abordagem "mobile first", adaptando-se de forma responsiva ao tamanho da tela para otimizar a visualização das informações.

image

Em consonância com minha prática habitual, elaborei um README abrangente para servir como a capa informativa deste projeto específico. Para acessar e explorar o código-fonte no GitHub, clique no seguinte link: https://github.com/Pidiotto/portifolio. Além disso, disponibilizei uma versão live da página para uma experiência mais imersiva, acessível por meio do link: https://pidiotto.github.io/portifolio/.

Compartilhe
Comentários (2)
Flávio Sousa
Flávio Sousa - 28/11/2023 22:53

Parabéns pelo projeto! Muito interessante e legal da sua parte compartilhar.


Já estudou um pouco sobre web? Mesmo se ainda não, tenta fazer o deploy do portfolio em outras plataformas de deploy além do github pages. Exemplo: Surge, Netlify, Vercel.

obs.: Lembre-se de prestar atenção se essas plataformas dão suporte as tecnologias que você está utilizando.

Edvaldo Souza
Edvaldo Souza - 28/11/2023 18:36

Gostei bastante, parábens!