Skip to content

Latest commit

 

History

History
52 lines (34 loc) · 4.47 KB

README.md

File metadata and controls

52 lines (34 loc) · 4.47 KB
Raw

Meu Portfolio

Objetivos / Aims

  • Fazer meu portfólio a partir do modelo apresentado nas aulas da "Imersão Programação do Zero" da Cubos Academy.
  • Make my portfolio from the model presented during the "Imersão Programação do Zero" classes at Cubos Academy.

Problemas que consegui resolver / Problems I was able to solve

  • Minha foto de perfil estava distorcendo (encurtando na horizontal) quando eu a estilizava no CSS com border-radius 50%. Para resolver o problema, editei-a com o aplicativo Fotos do Windows, tornando-a quadrada.

  • My profile picture was distorted (shrinking horizontally) when I styled it on CSS with border-radius 50%. To solve the problem, I edited it with the app "Fotos" on Windows, making it square.

  • Eu não estava conseguindo colocar ícones de algumas instituições. Para resolver o problema, é possível ancorar a logomarca de uma empresa quando ela aparece nos resultados de pesquisa do Google, bastando para isso clicar com o botão direito do mouse, copiar o endereço da imagem e colar no atributo href.

  • I wasn't getting icons from some institutions. To resolve the issue, one can anchor a company's logo when it appears in Google search results by simply right-clicking, copying the image address, and pasting it in the href attribute.

  • Quando abria a página no local host, título, profissão e coluna maior ficavam alinhadas. Porém, na página criada pelo GitHub, o header ganhava proporção maior e desalinhava tudo. Aprendi que a página do GitHub pode levar algum tempo para ficar totalmente pronta. Quando a visitei depois, estava tudo certo. Exceto por uma coisa que explicarei adiante.

  • When I opened the page on local host, the title, occupation and greater column in the main were aligned. However, on the GitHub page, the header was would grow and misaligned everything. I learned that the GitHub page can take a while to get ready. When I visited it again, everything was fine. Except for one thing that I will explain in the next item.

  • Ao variar o tamanho da tela, a coluna maior ("Habilidades") se movia. Resolvi o problema com a propriedade flex: 0 0 auto que quer dizer flex grow = 0, flex shrink = 0, e flex basis = 0. Sem isso, a coluna menor à esquerda crescia e "empurrava" a coluna maior à direita.

*When I changed the screen size, the greater column ("Habilidades") would move. I solved the problem with the property flex: 0 0 auto, which means flex gro = 0, flex shrink = 0, and flex=basis = 0. Without that, the minor column on the left would grow and "push" the greater column to the right.

Algumas lições que aprendi / Some lessons I learned

  • Em CSS, quando vamos estilizar a borda de alguma div, temos que informar 3 coisas: quantos pixels, o tipo, e a cor.
  • Existem elementos que reservam, ocupam uma linha inteira, outras ficam no meio do texto mesmo.
  • O elemento <span><span/> é um dos que ficam no meio do texto(Ele pode ser usado para agrupar elementos para fins de estilo (usando os atributos class ou id)
  • A div, a h1, etc., por padrão, reservam uma linha inteira.
  • Chamamos a essa característica "display".
  • Para agrupar o conteúdo ao lado da imagem estilizamos "display: inline-block;" no css
  • Classe é um atributo, assim com src, id, etc.
  • O que listamos em css, dentro das chaves, são "propriedades".
  • Via de regra, é melhor formatar um mesmo seletor que se repete no site e depois criar novas classes ou ids para características específicas.
  • Por padrão, listas são recuadas (indented) e com bullet points. Para retirar tais características, é necessário estilizar no css com "list-style-type: none; e "padding: 0;
  • O peso padrão de uma fonte (font-weight) é de 400px. Negrito: 700px.

Tecnologias / Technologies

  • CSS
  • HTML

Links

Autor / Author

Foto Nome GitHub Likedin E-mail
Romulo Craveiro de Sousa Tartaruga Romulo Craveiro Linkedin romulocraveiro@gmail.com