Portfolio - @astarte.drawings

O intuito desse projeto foi testar meus conhecimentos com base nos cursos gratuitos que fiz até então.
Quis ver até onde conseguia chegar fazendo sozinha e esse foi o resultado!

➜ Obs.: Projeto completo finalizado em agosto de 2022.

➜ Projeto inicial feito com base no meu monitor com resolução de 1920x1080. Deixei o nav e o footer responsivos com @media max-width: 1366px e 650px;

➜ Em Julho/Agosto de 2023 retomei ele, corrigindo os erros que percebi ter feito como:

- correção na distribuição das pastas/local dos arquivos.

- criado um arquivo .css para cada página.

- correção nas classes repetidas (algumas estavam entrando em conflito, por estarem no mesmo arquivo).

- correção no :hover das abas expansíveis na página inicial.

➜ Setembro de 2023:

- adicionado responsividade.

- Imagens otimizadas para pesar menos.

Cursos gratuitos realizados:

• Bootcamp Carrefour Web Developer pela Digital Innovation One
• Imersão Dev da Alura
• 2 eventos gratuitos da escola Dev Superior
• vídeo aulas gratuitas no youtube

Vez ou outra precisei fazer alguma consulta para algo mais específico, como o efeito de texto deslizante, por exemplo. Abaixo estão os links de tutoriais que pesquisei e/ou utilizei.

Fontes

• Alex Brush

• Poppins

Cores

--fundo: rgb(240, 212, 212);
--laranja-claro: #F2811D;
--laranja-escuro: #E35B49;
--vermelho: #d3130f;
--amarelo: #F1C570; 
--cinza: #8C8C8C;
--background: rgb(248, 248, 248);

Tutoriais pelos quais pesquisei durante a criação desse projeto:

Utilizado:

Galeria lightbox com HTML e CSS | Sala de estudo

Outros assistidos:

Criando uma galeria de fotos com HTML, CSS e FLEXBOX | Fernando Leonid

Como criar uma galeria de imagens usando Grid, Css e Html | Prof. Luis Vulcanis

Como fazer um SLIDESHOW com HTML e CSS | Além do Código

Landing Page com HTML e CSS | Rafaella Ballerini

Animações de textos com CSS:

Animação utilizada com algumas alterações:

Texto deslizante | Acervo Lima

Outros links:

Animações com Transition e Animation | Alura

Textos animados com CSS animation e keyframes | DevMedia

Usando animações CSS | Mozilla.org

35 efeitos de texto CSS para o seu site | Creativos online

Botões

Animation Buttons | by @Yuhomyan on Codepen

Referência de código utilizada na página "Contato"

Repositório Contact-Page | @Patalin

Envio de formulário para email

Formspree

Utilizei a API Formspree para envio dos formulários da aba Contato, diretamente para meu e-mail. Basta definir o formulário action no html para o endpoint. Nenhum código de servidor é necessário.

Gerador de efeito CSS utilizado:

Shape Divider Efeito de onda com CSS.

Site com ilustrações/doodles:

• unDraw
• Demais ilustrações, foram feitas por mim mesma - @astarte.drawings

Compressão de imagens:

• TinyPNG