Add react-books-2 project page

JPSS14 · Dec 31, 2023 · bc7663e · bc7663e
1 parent 77998e6
commit bc7663e
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 1 deletion.
diff --git a/Assets/images/react-books-2-3.png b/Assets/images/react-books-2-3.png
diff --git a/Assets/images/react-books-2-book.png b/Assets/images/react-books-2-book.png
diff --git a/Assets/images/react-books-2-mobile.png b/Assets/images/react-books-2-mobile.png
diff --git a/Projetos/react-books-2.html b/Projetos/react-books-2.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link href="../Assets/fonticon.css" rel="stylesheet" type="text/css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="stylesheet" href="../Assets/boot.css" />
+    <link rel="stylesheet" href="../Assets/style.css" />
+
+    <title>João Pedro Scarabelli Silva</title>
+  </head>
+
+  <body>
+    <!-- HEADER -->
+    <header class="main_header">
+      <h1 class="logo"><a href="../index.html">MyPortfolio</a></h1>
+      <nav class="main_header_nav">
+        <ul>
+          <li>
+            <a
+              class="icon-linkedin2"
+              href="https://www.linkedin.com/in/jo%C3%A3o-pedro-s-silva/"
+            ></a>
+          </li>
+          <li><a class="icon-github" href="https://github.com/JPSS14"></a></li>
+        </ul>
+      </nav>
+    </header>
+    <!-- HEADER -->
+
+    <!-- MAIN -->
+    <main class="main">
+      <article class="description_article">
+        <!-- HEADER -->
+        <header class="description_article_header">
+          <h1>React Books 2</h1>
+          <p>Status: <span class="status_comp">Completo</span></p>
+          <a href="https://github.com/JPSS14/react-books-2" target="_blank"
+            >Ver Código</a
+          >
+          <a href="https://jpss14.github.io/react-books-2" target="_blank"
+            >Testar</a
+          >
+        </header>
+        <!-- /HEADER -->
+
+        <!-- CONTENT -->
+        <div class="description_article_content">
+          <h2>O que me levou a construir o projeto?</h2>
+
+          <p>
+            Diante da ideia de construir um projeto que refletisse tudo que
+            aprendi durante a minha última oportunidade profissional como
+            Front-End, surgiu o React Books 2, onde aplico diferentes
+            tecnologias em conjunto, nesse mesmo período estava participando de
+            uma capacitação em UX/UI. Uma união de dois mundos, o Front e o
+            UX/UI, aqui está o primeiro projeto de muitos que virão.
+          </p>
+
+          <img class="border" src="../Assets/images/react-books-2-book.png" />
+
+          <img class="border" src="../Assets/images/react-books-2-3.png" />
+
+          <h2>Desafios</h2>
+          <p>
+            A responsividade deixou de ser uma opção a muito tempo e hoje é um
+            item obrigatório, aqui apliquei diversas técnicas para manter um
+            layout flexível e acessível, incluindo até mesmo uma paginação
+            dinâmica baseada em resolução.
+          </p>
+
+          <img src="../Assets/images/react-books-2-mobile.png" />
+        </div>
+        <!-- /CONTENT -->
+
+        <!-- TECHNOLOGIES -->
+        <div class="description_article_technologies">
+          <header class="description_article_technologies_header">
+            <h2>Tecnologias</h2>
+          </header>
+          <ul class="description_article_technologies_list">
+            <li>React</li>
+            <li>Material UI</li>
+            <li>Typescript</li>
+            <li>Jest</li>
+            <li>Axios</li>
+            <li>Axios</li>
+            <li>JavaScript</li>
+            <li>HTML5</li>
+            <li>CSS3</li>
+            <li>GIT</li>
+          </ul>
+        </div>
+        <!-- /TECHNOLOGIES -->
+
+        <!-- LEARNING -->
+        <div class="description_article_learning">
+          <header class="description_article_learning_header">
+            <h2>Aprendizado</h2>
+          </header>
+          <ul class="description_article_learning_list">
+            <li>Paginação dinâmica baseada em resolução da tela</li>
+            <li>Construção de theme do Material UI</li>
+            <li>UX/UI (Style Guide)</li>
+            <li>Carrossel com React Slick</li>
+            <li>Rotas dinâmicas com React Router</li>
+            <li>Criação de mappers para garantir a integridade dos dados</li>
+            <li>Responsividade</li>
+            <li>Testes unitários de componentes com Jest</li>
+            <li>Integração com API com Axios</li>
+          </ul>
+        </div>
+        <!-- /LEARNING -->
+
+        <!-- STATE -->
+        <div class="description_article_state">
+          <header class="description_article_state_header">
+            <h2>
+              Estado do projeto: <span class="status_comp">Completo</span>
+            </h2>
+          </header>
+          <ul class="description_article_state_list"></ul>
+        </div>
+        <!-- /STATE -->
+      </article>
+    </main>
+    <!-- /MAIN -->
+
+    <!-- FOOTER -->
+    <footer class="main_footer">
+      <h1 class="logo"><a href="../index.html">MyPortfolio</a></h1>
+      <nav class="main_footer_nav">
+        <ul>
+          <li>
+            <a
+              class="icon-linkedin2"
+              href="https://www.linkedin.com/in/jo%C3%A3o-pedro-s-silva/"
+            ></a>
+          </li>
+          <li><a class="icon-github" href="https://github.com/JPSS14"></a></li>
+        </ul>
+      </nav>
+    </footer>
+    <!-- /FOOTER -->
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -105,7 +105,7 @@ <h3>React Books 2</h3>
                     target="_blank"
                     >Testar</a
                   >
-                  <a class="read_more" href="Projetos/health-plus.html"
+                  <a class="read_more" href="Projetos/react-books-2.html"
                     >Saiba mais</a
                   >
                 </div>