♻️ douglasabnovato.dev
Uma página para demonstrar minha experiência teórica e prática centralizando o que gosto de fazer.
Uma página para demonstrar meus projeto de código e artigos. Também uma sugestão de conteúdos da internet, organizados de forma progressiva.
A gestão das tarefas para completar esse projeto está no "Project Board" desse repositório. Onde tem a descrição de tudo o que esse projeto se propõe a ter quando terminado.
O desenvolvimento foi organizado em branches. Dessa forma, a versão mais atualizada está na master, versões anteriores possuem suas respectivas versões em branches nomeadas.
Comportamentos
- 4. Loader nas páginas com requisição: codigos, blog
Correções
- 2. Navegação piscando entre páginas
- 3. Funcionamento correto do modo dark e light
- 4. Funcionamento correto da responsividade
Funcionalidades
- 2. Blog - os artigos do medium com API e estilização de cards
- 4. Projetos - as aplicações hospedadas
- 5. Hack Developer - uma trilha ordenada de conteúdo e rotina para ser dev
- 6. Sobre Mim - objetivo, apresentação e habilidades
- 7. Uses - o setup que utilizei, utilizo e estou construindo
- Um Ecommercer de aplicações
Comportamentos
- 3. Evoluir a página updates com uma timeline
Anotações
-
url secundária para dados do medium:
https://mediumpostapi.herokuapp.com/?usermedium=douglasabnovato -
url usada para dados do medium:
https://api.rss2json.com/v1/api.json?rss_url=https://medium.com/feed/@douglasabnovato
- 1. / - a home será um resumo do que teremos em todo o portfólio com dois tópicos em cada: breve apresentação, melhores códigos de repositórios no github, melhores textos de artigos no medium
- 3. Códigos - os repositórios do github com API e estilização de cards
- 8. Updates - treinamentos, experiências, certificações e eventos
Comportamentos
- 1. Navegação do menu sidebar com rotas para os itens e logo
- 2. Uma tela de em manutenção para as páginas conforme o item do sidebar não terminadas
Correções
- 1. Background do Footer com modo da sidebar close ou open
Requisitos
- duas cores
- mood dark e light
- idioma pt e en
- responsividade e mobile first
- acessibilidade
Estrutura
- git flow: master, developer, nomesDasVersoes
Referências
Inspiração
- Persistência do modo dark conforme preferências do usuário com localstorage.
- Navegação do menu sidebar com âncoras internas
- Versão com mais adaptabilidade na versão desktop e uma versão mobile.
Nessa versão, o objetivo é explorar ainda mais a Responsividade, aperfeiçoar os pontos de transição e a usabilidade conforme o dispositivo, e garantir que a Acessibilidade está sendo aplicada.
-
Orientações
-
analisar maneiras de reduzir os breakpoints
-
utilizar uma font serifada para títulos e uma sem serifa para o corpo
-
portfólio:
font-family: 'Merriweather Sans', sans-serif; -
sidebar:
font-family: 'Poppins', sans-serif; -
títulos do portfólio:
font-family: Courier, serif; -
modo light e dark
-
Itens para correção em DESKTOP/TABLE - [>1024 / 768 - 1024]
-
testar em um dispositivo real: abrindo o link hospedado no browser do smartphone
-
alinhamento entre ícone e texto do item menu
-
scroll horizontal: corrigido com grid css
-
espaços entre os elementos: padronizado os espaços entre os elementos
-
um filete branco do lado esquerdo: corrigido
-
está grudado do lado direito: padding no main do repositório
-
não sendo um sistema, o botão sair não faz sentido
-
Itens para correção em MOBILE - [375 - 768]
-
em mobile na orientação paisagem, está ok
-
uma animação no campo de busca com naturalidade
-
uma animação em cada item menu quando alterna de close e open
-
a home está aparecendo por baixo do sidebar
-
existe uma scroll horizontal
-
ao alternar horizontal e vertical, o zoom é alterado
- unidades de medidas flexíveis: rem, %, vw, vh
- internacionalização
- propriedades responsivas: usando grid e flexbox em diferentes situações
- media query somente em último caso: recurso após explorar ao máximo o css
- Versão com mais adaptabilidade na versão desktop e uma versão mobile.
Referências
- mobile first: pesquisa
- conteúdo de responsividade:
- media queries
- internationalization
- macro layouts: flexbox e grid
- layout fluído com css
Etapas
- portfólio: alterado as unidades de medidas de fixas para as fluídas: de px para %, vw, vh, rem, auto
- sidebar: alterado as unidades de medidas de fixas para as fluídas: de px para %, vw, vh, rem, auto
- verificar o comportamento em desktop
- verificar o comportamento em tablet
- tags HTML semânticas
- usando media queries: 420px para mobile
- sidebar no topo com movimento da home alinhado
- home left vir logo abaixo da sidebar
- home right vir logo abaixo da home left
Aperfeiçoar em forma de site com uma sidebar onde o primeiro item do menu sendo a home contendo o portfólio.
- implementar o desafio portfólio como a página home com a estrutura do desafio sidebar.
- Tornar os cards dos projetos clicáveis com infos da api: issue #1 (sem branch)
Aperfeiçoar a aplicação acrescentando dinamismo.
- estudar as referências indicadas
- como modificar atributos, classes e styles na DOM
- como consumir os repositorios da api github
- como fazer merge entre duas branches no git
- como centralizar horizontalmente com justify-content: space-between
- como centralizar verticalmente
- como centralizar vertical e horizontalmente
- como posicionar elementos CSS - display: flex
- como criar avatar com imagens
- como estilizar SVG com CSS
- como estilizar o segundo elemento child :nth-child()
- como inserir icone svg
- como estilizar um tooltip
- como estilizar boxes com cantos arredondados e sombras
- Como remover as bolinhas de uma lista não ordenada
- criar, gerir e automatizar quadros de projeto GitHub
- Consumir a API do Github: name, description, stargazers_count, forks_count,language
- Ajustar o layout com os dados vindos da API
Aperfeiçoar a aplicação tornando os cards clicáveis
- Os cards dos projetos deverão ser clicáveis
- Os cards dos posts deverão ser clicláveis
Aperfeiçoando a aplicação acrescentando dados estáticos para os links das redes sociais.
Neste desafio devo criar uma página web para que seja meu portfolio e currículo. Utilizando HTML e CSS.
Layout descritivo no figma
- 💡 Como começar:
1 - Use o link do Figma como base para o projeto.
2 - Todas as imagens e ícones estão na pasta assets.
3 - Techs: HTML e CSS.
4 - Informações estáticas
- Cores
:root {
--body-bg-color: #22212C;
--text-color: #837E9F;
--bg-cards: #302F3D;
--bg-techs: #CB92B1;
}- Tipo de fonte: font-family: Merriweather Sans, font-weight: 400, 500 e 700. Você pode encontrar a fonte no Google Fonts
Utilizando um template do wschools para aperfeiçoar o layout da aplicação.
Uma estrutura simples em html com um avatar e algumas informações. Realizado os principais comandos de git para testar o fluxo de trabalho com esse código.
- github, git, github pages, repositório, página simples
- transformar essa página em uma página pessoal:
douglasabnovato.github.io, somente arquivos estáticos - alterar o nome do repositório remoto e do local:
git remote remove origin:[email protected]:douglasabnovato/nome-repositorio.github.io.git
As seguintes ferramentas foram usadas na construção do projeto:
Referências de conteúdo para construir esse projeto
Segue os links correspondentes para colaborar na construção do desafio.
- O guia estelar de HTML
- O guia estelar de CSS
- Posicionando foguetes
- Formulários de outro planeta
- Alinhando os planetas
- App bonito, até nos textos
Podemos considerar este projeto como sendo com uma parte:
- Front End (pasta web)
Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas: Git, [Node.js][nodejs]. Além disso, é bom ter um editor para trabalhar com o código como [VSCode][vscode].
# Clone este repositório
$ git clone https://github.com/douglasabnovato/douglasabnovato.dev
# Acesse a pasta do projeto no seu terminal/cmd
$ cd douglasabnovato.dev
# Execute a aplicação em modo de desenvolvimento
Open Live Server
# A aplicação será aberta na porta:3000 - acesse http://localhost:3000- Faça um fork do projeto.
- Crie uma nova branch com as suas alterações:
git checkout -b my-feature - Salve as alterações e crie uma mensagem de commit contando o que você fez:
git commit -m "feature: My new feature" - Envie as suas alterações:
git push origin my-feature
Caso tenha alguma dúvida confira este guia de como contribuir no GitHub
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com ❤️ por Douglas A B Novato 👋🏽 Entre em contato!