Merge branch 'master' into nova

herbertribeiro19 · Apr 21, 2023 · 12e0866 · 12e0866
2 parents a0b46ba + eaa27b8
commit 12e0866
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 27 deletions.
diff --git a/content.html b/content.html
@@ -1,6 +1,9 @@
 <!DOCTYPE html>
+
 <html lang="pt-br">
 
+
+
 <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -11,6 +14,9 @@
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
 
  <title>Portfólio profissional</title>
+
+ <title>Portfólio Profissional</title>
+
  <link rel="icon" href="./assets/logoicon.png">
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-50V7SLZNW4"></script>
@@ -26,13 +32,15 @@
 <body>
  <div class="section-1-bg" id="inicio">
 
+
  <header>
  <div class="icon-logo">
  <a href="content.html"><img src="./assets/logoicon.png" alt="logo"></a>
  </div>
  <aside>
  <div class="icon-menu" onclick="abrirmenu()">
  <img src="./assets/menu3.png" alt="menu">
+
  </div>
  <div id="barra-menu">
  <ul>
@@ -95,13 +103,16 @@ <h2>Mobile and FrontEnd Developer</h2>
  </div> -->
  </div>
 
+
  <section class="c-sobre" data-aos="" id="sobre">
  <div class="image" data-aos="fade-up">
+
  <img src="./assets/about.svg" alt="Sobre">
  </div>
  <div class="sobre-mim" data-aos="fade-up">
  <h1>Sobre mim</h1>
  <h4>Desenvolvedor & <span>Designer</span></h4>
+
  <p>
  < Olá, sou Herbert Ribeiro, estudante do curso de Sistemas de Informação <br>na Universidade Federal de
  Viçosa (UFV) e técnico em informática
@@ -125,42 +136,44 @@ <h1>Skills</h1>
  <p>Veja abaixo as minhas principais habilidades</p>
  <div class="c-card" data-aos="fade-up">
  <div class="card">
+
+
  <img src="./assets/flutter.png" alt="nodejs">
  <h3>flutter</h3>
  </div>
- <div class="card">
+ <div class="card" data-aos="zoom-in">
  <img src="./assets/dart.png" alt="nodejs">
  <h3>Dart</h3>
  </div>
- <div class="card">
+ <div class="card" data-aos="zoom-in">
  <img src="./assets/react.png" alt="nodejs">
  <h3>React</h3>
  </div>
- <div class="card">
+ <div class="card" data-aos="zoom-in">
  <img src="./assets/html.png" alt="html">
  <h3>HTML</h3>
  </div>
- <div class="card">
+ <div class="card" data-aos="zoom-in">
  <img src="./assets/css.png" alt="css">
  <h3>CSS</h3>
  </div>
- <div class="card">
+ <div class="card" data-aos="zoom-in">
  <img src="./assets/js.png" alt="js">
  <h3>JavaScript</h3>
  </div>
- <div class="card">
+ <div class="card" data-aos="zoom-in">
  <img src="./assets/node-js.png" alt="nodejs">
  <h3>NodeJS</h3>
  </div>
- <div class="card">
+ <div class="card" data-aos="zoom-in">
  <img src="./assets/figma.png" alt="figma">
  <h3>Figma</h3>
  </div>
- <div class="card">
+ <div class="card" data-aos="zoom-in">
  <img src="./assets/photoshop.png" alt="photoshop">
  <h3>Photoshop</h3>
  </div>
- <div class="card">
+ <div class="card" data-aos="zoom-in">
  <img src="./assets/c++.png" alt="c++">
  <h3>C++</h3>
  </div>

diff --git a/script.js b/script.js
@@ -1,5 +1,5 @@
 //Funcão de máquina de escrever
-function typeWriter(elemento){
+function typeWriter(elemento) {
  const textoArray = elemento.innerHTML.split('');
  elemento.innerHTML = '';
  textoArray.forEach((letra, i) => {
@@ -14,28 +14,28 @@ typeWriter(document.querySelector('h2'));
 //-----------------------------------------
 
 //Função de abrir menu lateral
-function abrirmenu(){
+function abrirmenu() {
  let BarraMenuAberto = document.getElementById('barra-menu')
 
- if(BarraMenuAberto.style.width == "0px"){
+ if (BarraMenuAberto.style.width == "0px") {
  BarraMenuAberto.style.width = "150px";
- }else{
+ } else {
  BarraMenuAberto.style.width = "0px";
  }
 
  if (BarraMenuAberto.style.height == "0px") {
  BarraMenuAberto.style.height = "380px";
- }else{
+ } else {
  BarraMenuAberto.style.height = "0px";
  }
 }
 //-----------------------------------------
 
 //Função enviar feedback
-function send(){
+function send() {
  let envioMensagem = document.getElementById('envio');
 
- if(envioMensagem.onclick){
+ if (envioMensagem.onclick) {
  alert("Mensagem enviada com sucesso!");
  return;
  }
@@ -60,15 +60,21 @@ var swiper = new Swiper(".swiper-projetos", {
  320: {
  slidesPerView: 1,
  centeredSlides: false,
+ centeredSlides: true,
+ slideShadows: true,
  },
  768: {
  slidesPerView: 0,
+ centeredSlides: true,
+ slideShadows: true,
  },
  991: {
- slidesPerView: 1.7,
+ slidesPerView: 1.2,
+ centeredSlides: true,
+ slideShadows: true,
  },
  1200: {
- slidesPerView: 1.3,
+ slidesPerView: 1.4,
  centeredSlides: true,
  slideShadows: true,
  },

diff --git a/style_content.css b/style_content.css
@@ -550,7 +550,7 @@ aside {
 }
 
 .card img{
- width: 60px;
+ width: 60px; 
  height: auto;
 }
 
@@ -628,7 +628,6 @@ aside {
  width: 1300px;
  position: center;
  cursor: pointer;
- border-radius: 50px;
 }
 
 .swiper-wrapper{
@@ -639,16 +638,16 @@ aside {
  margin-top: 32px;
  border-radius: 20px;
  margin-bottom: 60px;
- border-radius: 50px;
 }
 
-.img-projetos img:hover{
- transform: scale(1.1);
- transition: 0.5s;
- border: solid 0.5px #9584a0;
- border-radius: 20px;
+
+.card-character {
+ width: 100%;
+ max-width: 200rem;
+ transition: all .3s ease;
 }
 
+
 .card:hover{
  transform: scale(1.1);
  transition-duration: 1s;
@@ -696,6 +695,37 @@ a {
  } */
 
 
+
+.card-character .image button {
+ position: absolute;
+ padding: 1rem 2rem;
+ background-color: #ffffff;
+ color: #000000;
+ border-radius: 15px 5px 15px 5px;
+ cursor: pointer;
+ border: none;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 2rem;
+ bottom: 0;
+ align-items: center;
+ opacity: 0;
+ transition: all .3s ease;
+}
+
+a {
+ color: black;
+}
+
+.card-character:hover .image{
+ transform: scale(1.1);
+}
+
+.card-character:hover .image button {
+ opacity: 1;
+ bottom: 5.7rem;
+}
+
  @media (max-width: 1200px) {
  .img-projetos img {
  width: 630px;
@@ -721,6 +751,28 @@ a {
  cursor: pointer;
  border-radius: 10px;
  }
+ .card-character .image{
+ /* position: relative; */
+ width: 400px;
+ height: 280px;
+ }
+
+ .card-character .image img {
+ width: 400px;
+ height: 280px;
+ }
+
+ .card-character .image button {
+ position: absolute;
+ padding: 15px;
+ font-size: 12px;
+ line-height: 15px;
+ transition: all .3s ease;
+ }
+
+ .card-character:hover .image button {
+ bottom: 1rem;
+ }
  }
 
  @media (max-width: 560px) {
@@ -751,6 +803,30 @@ a {
  cursor: pointer;
  border-radius: 10px;
  }
+
+
+ .card-character .image{
+ /* position: relative; */
+ width: 350px;
+ height: 200px;
+ }
+
+ .card-character .image img {
+ width: 350px;
+ height: 200px;
+ }
+
+ .card-character .image button {
+ position: absolute;
+ padding: 15px;
+ font-size: 12px;
+ line-height: 15px;
+ transition: all .3s ease;
+ }
+
+ .card-character:hover .image button {
+ bottom: 1rem;
+ }
  }
 
  @media (max-width: 414px) {
@@ -767,7 +843,7 @@ a {
  }
 
  .img-projetos img {
- width: 220px;
+ width: 250px;
  }
 
  .swiper-projetos {
@@ -776,6 +852,7 @@ a {
  border-radius: 10px;
  }
 
+
  .card-character .image button{
  align-items: end;
  justify-content: end;
@@ -788,6 +865,7 @@ a {
  opacity: 0;
  transition: all .3s ease;
  }
+
  }
 
 /* RODAPE - PAGE 5 */