Passeio Aleatório

Este projeto consiste de uma página web que simula realizações de um passeio aleatório. Além da simulação, o projeto dispõe de um artigo fortemente baseado em exemplos que explica a teoria e o funcionamento do experimento.

Table of contents

• Visão Geral
  • Ideia Inicial
  • Screenshots
  • Links
• Desenvolvimento
  • Tecnologias e Ferramentas
  • Aprendizado
  • Dificuldades
  • Próximos Passos
• Autor

Visão Geral

🎯 Ideia Inicial

No início, ainda durante a fase de planejamento, eu já tinha em mente que queria por em prática alguns conhecimentos. Dentre eles:

• Desenvolver um dropdown em cascata;
• Usar Chart.js para exibir gráficos;
• Fixar um elemento com position: sticky;
• Usar as tags semânticas do HTML: header, main, footer, article, section;
• Implementar transições estilizadas de background;
• Acompanhar a leitura aplicando estilos ao menu lateral;
• Usar o figma para prototipar algo minimamente útil.

Complementar a tudo isso abdiquei do uso do Angular e do Sass. A simulação era relativamente simples e na minha cabeça super fazia sentido abrir mão dessas tecnologias. No fundo eu queria aproveitar a oportunidae para ter uma noção de como seria desenvolver algo sem frameworks e pré-processadores.

📸 Screenshots

Simulação

Artigo

🔗 Links

• Live site: Acesse a simulação
• Repositório: Repositório no Github
• Protótipo de design: Protótipo inacabado no figma
• Inspiração de design: JSON Formatter

Desenvolvimento

🔨 Tecnologias e Ferramentas

• HTML
• CSS
• Javascript
• Chart.js
• MathJax
• Figma
• InkScape

🎓 Dificuldades

Lidar com o CSS foi o maior dos problemas. Desenvolver um design agradável para diferentes tamanhos de tela, estilizar o input range e fixar o menu lateral deram uma dor de cabeça. Escolher a paleta de cores então nem se fala. Usar CSS sem pré-processador foi ótimo pro aprendizado, mas em questão de praticidade...

🔮 Próximos Passos

Ainda na vibe do frontend quero desenvolver algo com dark/light theme. Preciso aprender a nomear as classes CSS de forma mais eficiente e maturar a implementação de uma interfaces responsivas.
Fora isso preciso praticar mais a integração com o backend, algo que não foi possível nesse projeto.
Ando pesnando no que fazer em seguida. Só sei que com certeza dever ser algo com Node.js.

Autor

Me encontre no:

• Github - @vitorp4
• CodePen - @vitorp4
• Medium - @vitorp4
• Linkedin - João Gomes
• Frontend Mentor - @vitorp4