Portfólio - Certificados

Pablo-M-Santos · Mar 19, 2024 · 6f339b4 · 6f339b4
1 parent e90a213
commit 6f339b4
Show file tree

Hide file tree

Showing 9 changed files with 256 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -1,5 +1,5 @@
 <h1 align="center">
-  💻 Portfólio -  Pablo Santos
+  💻<br>Portfólio -  Pablo Santos
 </h1>
 
 ![Resultado do projeto](./imagens/foto-home.png)

diff --git a/imagens/certi_arduino_day.jpg b/imagens/certi_arduino_day.jpg
diff --git a/imagens/certi_dio.png b/imagens/certi_dio.png
diff --git a/imagens/certi_escola_virtual.png b/imagens/certi_escola_virtual.png
diff --git a/imagens/certi_hauwei.jpg b/imagens/certi_hauwei.jpg
diff --git a/imagens/click.png b/imagens/click.png
diff --git a/index.html b/index.html
@@ -36,8 +36,8 @@
     <section class="home" id="home">
       <div class="home-content">
         <div class="home-container">
-          <img class="home-img" src="./imagens/foto-perfil.png" alt="Pablo Santos - Perfil">
-          <div class="home-texto">
+          <img class="home-img anima-home" src="./imagens/foto-perfil.png" alt="Pablo Santos - Perfil">
+          <div class="home-texto anima-home">
             <h1>Olá, eu sou<br><strong id="home-nome">Pablo Santos,</strong></h1>
             <h2>sou <span> desenvolvedor Front-End.</span></h2>
 
@@ -58,9 +58,9 @@ <h2>sou <span> desenvolvedor Front-End.</span></h2>
 
     <!-- QUEM SOU -->
     <img class="onda" src="./imagens/onda-home.png" alt="">
-    <section class="quem-sou" id="quem-sou">
+    <section class="quem-sou" id="quem-sou" >
       <div class="quem-sou-content">
-        <div class="quem-sou-container">
+        <div class="quem-sou-container anima-quem-sou">
           <img class="quem-sou-img" src="./imagens/quem-sou-img.png" alt="">
           <div class="quem-sou-texto">
             <h2><strong>Quem Sou</strong></h2>
@@ -75,84 +75,84 @@ <h3>Desenvolvedor Front - End</h3>
     </section>
     <!-- FORMAÇÃO -->
     <img class="onda-botton" src="./imagens/onda-quem-sou.png" alt="">
-    <section class="formacao" id="formacao">
+    <section class="formacao anima-formacao2" id="formacao">
       <div class="container">
-        <h2>Formação</h2>
+        <h2 class="anima-formacao">Formação</h2>
         <div class="formacao-grade">
-          <div class="formacao-tecnica">
+          <div class="formacao-tecnica anima-formacao2">
             <h3 class="sub-titulo">Formação</h3>
             <p><strong>Técnico em Informática</strong> - EEEP Luíza de Teodoro Vieira </p>
             <p class="time">2022 - 2024</p>
           </div>
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p><strong>Lógica de Programação</strong></p>
             <p class="time">2022 - 2023</p>
           </div>
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p><strong>HTML</strong> - DIO</p>
             <p class="time">2022 - 2024</p>
           </div>
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p><strong>CSS</strong> - DIO</p>
             <p class="time">2022 - 2024</p>
           </div>
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p><strong>JavaScript</strong> - DIO</p>
             <p class="time">2022 - 2024</p>
           </div>
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p><strong>Vue</strong></p>
             <p class="time">Estudando . . .</p>
           </div>
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p><strong>Java</strong></p>
             <p class="time">Estudando . . .</p>
           </div>
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p><strong>Python</strong></p>
             <p class="time">2022 - 2023</p>
           </div>
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p class="p-extend"><strong>Design</strong> - Figma</p>
             <p class="time">2023 - 2024</p>
           </div>
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p><strong>SQL</strong></p>
             <p class="time">2023 - 2024</p>
           </div>
 
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p class="p-extend"><strong>Banco de Dados</strong></p>
             <p class="time">2023 - 2024</p>
           </div>
 
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p><strong>Robótica</strong> - Programação</p>
             <p class="time">2022 - 2023</p>
           </div>
 
-          <div class="curso">
+          <div class="curso anima-formacao2">
             <h3 class="sub-titulo">Curso</h3>
             <p class="p-extend"><strong>Manutenção</strong> - Computadores</p>
             <p class="time">2022 - 2024</p>
@@ -164,13 +164,13 @@ <h3 class="sub-titulo">Curso</h3>
         <div class="habilidades">
           <h3 class="formacao-titulo">Habilidades</h3>
           <div class="habilidades-grade">
-            <div class="bloco">
+            <div class="bloco ">
               <p>HTML</p>
               <p>CSS</p>
               <p>JavaScript (aprendendo)</p>
             </div>
 
-            <div class="bloco">
+            <div class="bloco ">
               <p>Lógica de Programação</p>
               <p>Python</p>
               <p>Figma</p>
@@ -222,52 +222,43 @@ <h3 class="formacao-titulo">Idiomas</h3>
     </section>
 
     <!-- CERTIFICADOS -->
-    <section class="certificados">
-      <div class="container-formacao">
-        <h2>Certificados</h2>
+    <section class="certificados anima-certificado">
+      <div class="container-certificado">
+        <h2 class="anima-certificado">Certificados</h2>
         <div class="cards-certificados">
           <!-- DIO -->
-          <article class="card">
-            <div class="img-certificados">
-              <img src="" alt="ícone código" />
+          <article class="card anima-certificado">
+            <div class="img-certificados ">
+              <img src="./imagens/certi_dio.png" alt="certificado Bootcamp da Dio" />
             </div>
             <h3>Bootcamp da Dio</h3>
-            <p>
-              Criei sistemas destinados a eventos como o Arduino Day, incluindo um Seguidor de Linha e projetos para
-              exposição.
-            </p>
+            <p>Participei do Bootcamp da DIO com HTML, CSS e JavaScript, onde pude melhorar meus conhecimentos e minhas habilidades. </p>
           </article>
           <!-- Arduino Day -->
-          <article class="card">
+          <article class="card anima-certificado">
             <div class="img-certificados">
-              <img src="" alt="ícone código" />
+              <img src="./imagens/certi_arduino_day.jpg" alt="certificado Arduino Day" />
             </div>
             <h3>Arduino Day</h3>
-            <p>
-              Criei sistemas destinados a eventos como o Arduino Day, incluindo um Seguidor de Linha e projetos para
-              exposição.
-            </p>
+            <p>Participei no Arduino Day na programação de seguidores de linha e projeto de exposição utilizando a linguagem C++ para desenvolver os sistemas.</p>
           </article>
           <!-- JavaScript -->
-          <article class="card">
-            <div class="img-certificados">
-              <img src="" alt="ícone código" />
+          <article class="card anima-certificado">
+            <div class="img-certificados" id="img-hauwei">
+              <img src="./imagens/certi_escola_virtual.png" alt="Em progresso..." />
             </div>
-            <h3>Hauwei e AW</h3>
-            <p>
-              Criei sistemas destinados a eventos como o Arduino Day, incluindo um Seguidor de Linha e projetos para
-              exposição.
-            </p>
+            <h3>Fundação Bradesco</h3>
+            <p>Participei do curso de criação de site usando HTML, CSS e JavaScript da fundação bradesco onde pude aprimorar minhas abilidades.</p>
           </article>
 
         </div>
-        <a href="https://drive.google.com/drive/folders/1gDYDrXLr6qqswwU7wjFaLFwue14OOlNO?hl=pt-BR" class="certificados-drive">Meus certificados <img class="click" src="./imagens/click.png" alt=""></a>
+        <a href="https://drive.google.com/drive/folders/1gDYDrXLr6qqswwU7wjFaLFwue14OOlNO?hl=pt-BR" class="certificados-drive">Mais certificados</a>
       </div>
 
     </section>
 
     <!-- PROJETOS -->
-    <section class="projetos" id="projetos">
+    <section class="projetos anima-projeto-left " id="projetos">
       <div class="projetos-container">
         <h2>Projetos</h2>
         <!-- ATUAL CARGAS -->
@@ -302,7 +293,7 @@ <h3 class="nome">ATUAL CARGAS</h3>
           </div>
         </div>
         <!-- ELETRONIC ARTS -->
-        <div class="projetos-box" id="right">
+        <div class="projetos-box anima-projeto-right" id="right">
           <div class="texto" id="texto">
             <h3 class="nome">ELETRONIC ARTS GAMES</h3>
             <p class="detalhe">Site da Eletronic Arts, proporcionando uma experiência única aos amantes do universo dos
@@ -323,7 +314,7 @@ <h3 class="nome">ELETRONIC ARTS GAMES</h3>
           <img id="img-right" src=".//imagens/Eletronic_Arts.png" alt="">
         </div>
         <!-- UECE - ENEM - NOTA DE CORTE -->
-        <div class="projetos-box">
+        <div class="projetos-box anima-projeto-left">
           <img src="./imagens/euce-enem.png" alt="">
           <div class="texto">
             <h3 class="nome">UECE & ENEM</h3>
@@ -345,7 +336,7 @@ <h3 class="nome">UECE & ENEM</h3>
         </div>
 
         <!-- MUNDO DIGITAL -->
-        <div class="projetos-box" id="right">
+        <div class="projetos-box anima-projeto-right" id="right">
           <div class="texto" id="texto">
             <h3 class="nome">MUNDO DIGITAL</h3>
             <p class="detalhe">
@@ -366,7 +357,7 @@ <h3 class="nome">MUNDO DIGITAL</h3>
         </div>
 
         <!-- PRIMEIRO PROJETO -->
-        <div class="projetos-box">
+        <div class="projetos-box anima-projeto-left">
           <img src="./imagens/primeiro-projeto.png" alt="">
           <div class="texto">
             <h3 class="nome">PRIMEIRO PROJETO</h3>
@@ -385,7 +376,7 @@ <h3 class="nome">PRIMEIRO PROJETO</h3>
           </div>
         </div>
         <!-- PORTFÓLIO -->
-        <div class="projetos-box" id="right">
+        <div class="projetos-box anima-projeto-right" id="right">
           <div class="texto" id="texto">
             <h3 class="nome">PORTFÓLIO</h3>
             <p class="detalhe">Confira meu portfólio como desenvolvedor front-end para ver todos os projetos e ideias
@@ -407,12 +398,12 @@ <h3 class="nome">PORTFÓLIO</h3>
     </section>
 
     <!-- EVENTOS -->
-    <img class="onda" src="./imagens/onda-eventos.png" alt="">
-    <section class="eventos" id="eventos">
+    <img class="onda " src="./imagens/onda-eventos.png">
+    <section class="eventos " id="eventos">
       <div class="grid-layout">
-        <h2>Eventos</h2>
+        <h2 class="anima-certificado">Eventos</h2>
         <div class="evento-container">
-          <article class="evento-card">
+          <article class="evento-card anima-certificado">
             <div class="imagem-container">
               <img src="./imagens/arduino_day.png" alt="ícone código" />
             </div>
@@ -423,7 +414,7 @@ <h3>Desenvolvimento com Arduino</h3>
             </p>
           </article>
 
-          <article class="evento-card">
+          <article class="evento-card anima-certificado">
             <div class="imagem-container">  
               <img src="./imagens/feprocic.png" alt="ícone imagem" />
             </div>
@@ -433,7 +424,7 @@ <h3>FEPROCIC</h3>
             </p>
           </article>
 
-          <article class="evento-card">
+          <article class="evento-card anima-certificado">
             <div class="imagem-container">
               <img class="fabrica" src="./imagens/fabrica_de_programadores.png  " alt="ícone layers" />
             </div>
@@ -447,9 +438,9 @@ <h3>Fábrica de Programadores</h3>
       </div>
     </section>
     <!-- FOOTER -->
-    <footer id="contato">
+    <footer id="contato ">
       <div class="footer-container">
-        <div class="footer-links">
+        <div class="footer-links anima-certificado">
           <div class="social-media" id="social-media-footer">
             <a href="https://wa.me/558592822527?text=Olá!,%20eu%20vim%20do%20seu%20Portfólio
             "><i class='bx bxl-whatsapp'></i></a>
@@ -459,7 +450,7 @@ <h3>Fábrica de Programadores</h3>
             <a href="https://www.instagram.com/pablo_santosti/"><i class='bx bxl-instagram'></i></a>
           </div>
         </div>
-        <div class="footer-menus">
+        <div class="footer-menus anima-certificado">
           <nav class="navbar-footer">
             <a href="#home" >Home</a>
             <a href="#quem-sou">Quem sou</a>
@@ -468,7 +459,7 @@ <h3>Fábrica de Programadores</h3>
             <a href="#eventos">Eventos</a>
           </nav>
         </div>
-        <div class="footer-direitos">
+        <div class="footer-direitos anima-certificado">
           <p>&#169 2024 todos os direitos reservados a Pablo Santos</p> 
         </div>
       </div>

diff --git a/main.js b/main.js
@@ -20,10 +20,13 @@ window.onscroll = () => {
         let id = sec.getAttribute('id');
 
         if (top >= offset && top < offset + height) {
-            navLinks.forEach(links => {
-                links.classList.remove('active');
-                document.querySelector('header nav a[href*=' + id + ']').classList.add('active');
+            navLinks.forEach(link => {
+                link.classList.remove('active');
             });
+            let targetLink = document.querySelector('header nav a[href="#' + id + '"]');
+            if (targetLink) {
+                targetLink.classList.add('active');
+            }
         }
     });
 
@@ -32,10 +35,13 @@ window.onscroll = () => {
     let windowHeight = window.innerHeight;
 
     if (window.scrollY + windowHeight >= footerTop) {
-        navLinks.forEach(links => {
-            links.classList.remove('active');
-            document.querySelector('header nav a[href="#contato"]').classList.add('active');
+        navLinks.forEach(link => {
+            link.classList.remove('active');
         });
+        let contactLink = document.querySelector('header nav a[href="#contato"]');
+        if (contactLink) {
+            contactLink.classList.add('active');
+        }
     }
 
     // sticky navbar
@@ -49,11 +55,16 @@ window.onscroll = () => {
 
 console.log('Sistema no ar...');
 
+const myObserver = new IntersectionObserver((entries) => {
+    entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('show');
+        } else {
+            entry.target.classList.remove('show');
+        }
+    });
+});
 
-const home = document.querySelector('.home');
-
-const myObserver = new IntersectionObserver( (entries) => {
-    console.log(entries);
-})
+const elements = document.querySelectorAll('.anima-home, .anima-quem-sou, .anima-formacao, .anima-form, .anima-formacao2, .anima-certificado, .anima-projeto-left, .anima-projeto-right');
 
-myObserver.observe(home)
+elements.forEach((element) => myObserver.observe(element));