A princípio, foi construído uma página web bem simples, introduzindo os conceitos básicos.
- head;
- meta;
- title;
- link;
- body;
- nav;
- p;
- ul;
- li;
- id;
- class;
- a;
- h1;
- section;
- h2;
- img;
- footer.
- margin;
- color;
- font-family;
- font-size;
- width;
Depois de concluir o Bootcamp, por ser muito conteúdo, decidi recomeçar e refazer algumas coisas. Esse repositório foi o primeiro a ser refeito, e o resultado foi uma página pessoal que eu idealizei no Canva (clique aqui).
- Responsividade;
- Dark theme;
- CSS puro, sem framework;
- Apenas uma página web;
- Minimalista.
Anexei capturas de tela de diferentes dispositivos neste repositório mostrando o comportamento da página.
- Utilização do fonts.googleapis.com no arquivo index.html;
- Utilização da tag hr;
- Utilização da fonte Roboto;
- Utilização de variáveis para armazenar as cores em hexadecimal no :root{};
- Utilização de Flex-box e grid-template;
- Utilização de Position: absolute e relative;
- Utilização de filter: brightness() nos ícones ao passar o mouse ( img:hover {} );
- Utilização de box-shadow para a sensação de profundidade;
- Utilização de @media para configuração das larguras de tela acima de 480px, e 900px separadamente.
- Utilização do Chrome DevTools;
- Utilização do Picular para seleção das cores;
- Utilização do Adobe Color Wheel para identificar cores complementares;
- Vídeo da Rocketseat sobre flexbox;
- Vídeo da Rocketseat sobre grid-template;
- Utilização do ícone Github (clique aqui) Autor: Xinh Studio;
- Utilização do ícone E-mail (clique aqui) Autor: José Garcia;
- Utilização do ícone LinkedIn (clique aqui) Autor: Rudez Studio;
- Utilização do ícone WhatsApp (clique aqui) Autor: Rudez Studio;
- Utilização do ícone Rocket Blue (clique aqui) Autor: Squid.ink;
- Utilização do ícone Python (clique aqui) Autor: Flatart;
- Utilização do ícone HTML5 (clique aqui) Autor: Flatart;
- Utilização do ícone CSS3 (clique aqui) Autor: Flatart;
- Utilização do ícone PostgreSQL (clique aqui) Autor: Iconfinder;
- Utilização do ícone JavaScript (clique aqui) Autor: Erik Ragnar Eliasson;
- Utilização do ícone Swift (clique aqui) Autor: Samat Odedara;
- Utilização do ícone Rocket Gold (clique aqui) Autor: Freepik.