Criando o portfólio do projeto.

Opa, tudo bem? Já faz um tempinho. Para a segunda semana do 30 Dias com JavaScript, o projeto seria basicamente criar um portfólio, e ficou meio complicado mostrar o progresso de cada item durante a semana. Então, eu escolhi terminar o portfólio e só depois mostrar.

Esse portfólio foi feito com JavaScript (obviamente), em um formato semelhante ao React, mas sem o Node. Dessa vez, quase nada de HTML foi escrito, apenas criei uma div com o id="root" e importei o main.js e o style.css.

No JavaScript, cada componente da tela foi feito com uma função, como no React. Para que eles funcionem, o arquivo main.js carrega o DOM e adiciona o app.js.

O app.js é o arquivo principal, onde eu carrego tudo. Ele ficou assim:

import Header from "./header.js";
import Projects from "./projects.js";
import About from "./about.js";
import More from "./more.js";
import Week from "./week.js";
import BackToTop from "./BackTop.js";

async function App() {
  const root = document.getElementById("root");
  const projectsContainer = await Projects();
  root.appendChild(Header());
  root.appendChild(Week());
  root.appendChild(projectsContainer);
  root.appendChild(About());
  root.appendChild(More());
  root.appendChild(BackToTop());
}

export default App;

Não vou mostrar o código de todos os componentes aqui, se você quiser ver, pode acessar o repositório da semana 2, mas vou falar um pouco sobre cada um deles de forma geral.

No Header, temos os links de navegação, que, no mobile, se agrupam e são exibidos ao clicar em um botão.
No About e More, temos painéis de texto.
No BackToTop, foi criado um botão que, ao ser clicado, faz a tela rolar para o topo.
No Projects, eu carrego outro arquivo, o ProjectCard, onde pego os dados do projectList.json e organizo-os em um card. Assim, no componente Projects, os cards são organizados em uma lista.
No Week, temos links de navegação que, ao serem clicados, atualizam a lista mostrando os itens do JSON da semana correspondente.

E com isso, o nosso portfólio está pronto!

---

O resultado final você pode conferir aqui
link para o repositorio do projeto