Skip to content

oliveltonsantos/portfolio

Repository files navigation

💡 Sobre o projeto:

O ponto de partida foi quando li um post criado pela Raquel Maia no Instagram dela, o desafio foi criar um portfólio para mostrar projetos e deixar nossos contatos disponíveis.

🛠 Tecnologias utilizadas:

  • HTML 5
  • CSS 3

🎨 Design

Visual

Decidi optar por um visual minimalista, o foco principal está no conteúdo, portanto para mim faz sentido buscar eliminar as distrações visuais que não sejam relevantes para o meu objetivo principal que é a informação.

Cores

Utilizei uma paleta com 4 cores, sendo 3 cores mais neutras e uma para destaque de elementos como textos, botões, links, etc.

Cores utilizadas:

  • cor-primaria: #000000; (preto)
  • cor-secundaria: #1d1d1d; (cinza)
  • cor-terciaria: #ffffff; (branco)
  • cor-quartenaria: #71ae3f; (verde)
Fonte

A fonte utilizada chama-se Inter, conheci essa fonte através de uma distribuição linux chamada Elementary OS. Pessoalmente acho a fonte bem simples, tem boa legibilidade e diferentes pesos (todas essas características se conectam com o meu site).

📝 Coisas novas que aprendi:

Flex-box

Aprendi um pouco sobre flex-box observando o código CSS da Raquel Maia e testando em algumas partes específicas do meu código, além disso, li algumas explicações neste site chamado W3Schools.

Menu fixo

Uma ideia que tive foi de implementar um menu fixo no site, dessa maneira evita-se que usuário tenha que rolar a página até o topo para acessar o menu. Para saber mais leia o texto clicando aqui.

Inserir PDF no HTML

Também quis colocar o meu currículo no site, dessa maneira o usuário pode visualizar o PDF sem sair do site ou então basta dar um clique no botão “Download”. Confira um texto explicando como fazer aqui.

Rodapé fixo

Quando fui criar a página "Currículo" tive um problema com o rodapé, ele não ficava posicionado na parte inferior mas sim próximo a caixa onde está inserido o currículo. Veja abaixo o antes e depois.

Antes:

Antes

Depois:

Depois

Para conseguir este resultado você pode ler este texto aqui ou olhar o meu código.

💻 Resultado:

Acesse o site pronto neste link aqui!

render.mp4

💬 Sugestões:

Fico aberto a sugestões de melhoria e ideias, caso você tenha alguma basta me enviar uma mensagem no LinkedIn.