🚧 douglasabnovato.dev 🚀

💻 Sobre o projeto

♻️ 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.

🎨 Layout - v5.2 - Site

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

v5.1 - Site

Funcionalidades

• [x] 2. Blog - os artigos do medium com API e estilização de cards
• [x] 4. Projetos - as aplicações hospedadas
• [x] 5. Hack Developer - uma trilha ordenada de conteúdo e rotina para ser dev
• [x] 6. Sobre Mim - objetivo, apresentação e habilidades
• [x] 7. Uses - o setup que utilizei, utilizo e estou construindo
• [ ] Um Ecommercer de aplicações

Comportamentos

• [x] 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

v5.0 - Site

• [x] 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
• [x] 3. Códigos - os repositórios do github com API e estilização de cards
• [x] 8. Updates - treinamentos, experiências, certificações e eventos

Comportamentos

• [x] 1. Navegação do menu sidebar com rotas para os itens e logo
• [x] 2. Uma tela de em manutenção para as páginas conforme o item do sidebar não terminadas

Correções

• [x] 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

• web.dev / Learn Responsive Design
• web.dev / Learn Css
• web.dev / Learn Forms
• web.dev / Learn pwa

Inspiração

• marc.dev
• turnerj
• dejan
• pedropaulo
• startbootstrap
• pokemaobr

🛠 Versões

Web Responsive - v4.2

• [x] Persistência do modo dark conforme preferências do usuário com localstorage.
• [x] Navegação do menu sidebar com âncoras internas

Web - v4.1:

• 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

• [x] analisar maneiras de reduzir os breakpoints

• [x] utilizar uma font serifada para títulos e uma sem serifa para o corpo

• [x] portfólio: font-family: 'Merriweather Sans', sans-serif;

• [x] sidebar: font-family: 'Poppins', sans-serif;

• [x] títulos do portfólio: font-family: Courier, serif;

• [x] modo light e dark

• Itens para correção em DESKTOP/TABLE - [>1024 / 768 - 1024]

• [x] testar em um dispositivo real: abrindo o link hospedado no browser do smartphone

• [x] alinhamento entre ícone e texto do item menu

• [x] scroll horizontal: corrigido com grid css

• [x] espaços entre os elementos: padronizado os espaços entre os elementos

• [x] um filete branco do lado esquerdo: corrigido

• [x] está grudado do lado direito: padding no main do repositório

• [x] não sendo um sistema, o botão sair não faz sentido

• Itens para correção em MOBILE - [375 - 768]

• [x] em mobile na orientação paisagem, está ok

• [x] uma animação no campo de busca com naturalidade

• [x] uma animação em cada item menu quando alterna de close e open

• [x] a home está aparecendo por baixo do sidebar

• [x] existe uma scroll horizontal

• [x] 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

Web - v4.0:

• Versão com mais adaptabilidade na versão desktop e uma versão mobile.

Referências

• [x] mobile first: pesquisa
• conteúdo de responsividade:
• [x] media queries
• [x] internationalization
• [x] macro layouts: flexbox e grid
• [x] layout fluído com css

Etapas

• [x] portfólio: alterado as unidades de medidas de fixas para as fluídas: de px para %, vw, vh, rem, auto
• [x] sidebar: alterado as unidades de medidas de fixas para as fluídas: de px para %, vw, vh, rem, auto
• [x] verificar o comportamento em desktop
• [x] verificar o comportamento em tablet
• [x] tags HTML semânticas
• [x] usando media queries: 420px para mobile
• [x] sidebar no topo com movimento da home alinhado
• [x] home left vir logo abaixo da sidebar
• [x] home right vir logo abaixo da home left

Web - v3.5:

Aperfeiçoar em forma de site com uma sidebar onde o primeiro item do menu sendo a home contendo o portfólio.

• [x] implementar o desafio portfólio como a página home com a estrutura do desafio sidebar.

Web - v3.4:

• [x] Tornar os cards dos projetos clicáveis com infos da api: issue #1 (sem branch)

Web - v3.3:

Aperfeiçoar a aplicação acrescentando dinamismo.

• [x] estudar as referências indicadas

🛠 Buscas no Google

• 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

🚀 Se desafie também

• [x] Consumir a API do Github: name, description, stargazers_count, forks_count,language
• [x] Ajustar o layout com os dados vindos da API

Web - v3.2

Aperfeiçoar a aplicação tornando os cards clicáveis

🚀 Requisitos para o desafio

• [x] Os cards dos projetos deverão ser clicáveis
• [x] Os cards dos posts deverão ser clicláveis

Web - v3.1

Aperfeiçoando a aplicação acrescentando dados estáticos para os links das redes sociais.

Web - v3.0

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

🎨 Style Guide

• 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

Web - v2.0

Utilizando um template do wschools para aperfeiçoar o layout da aplicação.

Web - v1.0

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: git@github.com:douglasabnovato/nome-repositorio.github.io.git

🛠 Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

• Css
• Javascript
• HTML
• Git
• Github
• Github Pages
  

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

🚀 Como executar o projeto

Podemos considerar este projeto como sendo com uma parte:

1. Front End (pasta web)

Pré-requisitos

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].

🧭 Rodando a aplicação web (Front End)

# 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

😯 Como contribuir para o projeto

1. Faça um fork do projeto.
2. Crie uma nova branch com as suas alterações: git checkout -b my-feature
3. Salve as alterações e crie uma mensagem de commit contando o que você fez: git commit -m "feature: My new feature"
4. Envie as suas alterações: git push origin my-feature

   Caso tenha alguma dúvida confira este guia de como contribuir no GitHub

:memo: Licença

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!