diff --git a/src/css/cards.css b/src/css/cards.css index 920b069..e8650a7 100644 --- a/src/css/cards.css +++ b/src/css/cards.css @@ -20,6 +20,10 @@ transition: opacity 0.5s ease, transform 0.5s ease; } +.activity-card:nth-child(1), .activity-card:nth-child(2) { + padding-inline: 2rem; +} + /* Classe que será adicionada para a animação */ .activity-card.show { opacity: 1; @@ -34,7 +38,7 @@ @keyframes cardFadeIn { 0% { opacity: 0; - transform: translateY(20px); + transform: translateY(100px); } 100% { opacity: 1; @@ -100,6 +104,9 @@ .overlay.active { display: flex; /* Altera para visível quando ativo */ + opacity: 0; + display: flex; + animation: cardFadeIn 0.7s forwards; } .overlay-content { @@ -111,13 +118,18 @@ border-radius: 10px; position: relative; transform: scale(0.9); - transition: all 0.5s ease; + transition: all 0.6s ease; +} + +.overlay.active .overlay-content { + transform: scale(1); + transition: all 0.6s ease; } #overlayImg { - width: 90%; + width: 85%; border-radius: 8px; - margin: 3vh 0vh; + margin: 1vh 0vh; } .close-btn { diff --git a/src/js/index.js b/src/js/index.js index 42cccbf..962a55c 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -24,7 +24,7 @@ function renderActivities() { link.setAttribute("data-img", activity.image); link.setAttribute("data-name", activity.title); link.setAttribute("data-role", activity.role); - link.setAttribute("data-description", activity.description); + link.setAttribute("data-description", activity.descriptionTwo); link.setAttribute("data-link", activity.link); const image = document.createElement("img"); @@ -57,6 +57,7 @@ function initModal() { const overlayDescription = document.getElementById("overlayDescription"); const closeBtn = document.getElementById("closeBtn"); const techContainer = document.getElementById("modal-tech-badges"); + const overlayContent = document.querySelector(".overlay-content"); const link = document.querySelector(".overlay-content > a"); link.classList.add("activity-link"); @@ -100,18 +101,35 @@ function initModal() { link.target = "_blank"; // Abre em nova aba overlay.classList.add("active"); // Exibe o modal + + // Adiciona uma pequena animação de crescimento suave ao conteúdo do modal + setTimeout(() => { + overlayContent.style.transform = "scale(1)"; + overlayContent.style.opacity = "1"; + }, 100); // Um pequeno delay para suavizar a transição }); }); // Fecha o modal ao clicar no botão de fechar closeBtn.addEventListener("click", () => { - overlay.classList.remove("active"); + overlayContent.style.transform = "translateY(100px)"; + overlayContent.style.opacity = "0"; + + // Depois de um pequeno atraso, fecha o overlay completamente + setTimeout(() => { + overlay.classList.remove("active"); + }, 300); // Tempo suficiente para a animação ser concluída }); // Fecha o modal ao clicar fora do conteúdo do modal overlay.addEventListener("click", (e) => { if (e.target === overlay) { - overlay.classList.remove("active"); + overlayContent.style.transform = "translateY(100px)"; + overlayContent.style.opacity = "0"; + + setTimeout(() => { + overlay.classList.remove("active"); + }, 300); } }); } diff --git a/src/js/info-atividades.js b/src/js/info-atividades.js index 2cbedba..ffa6ad3 100644 --- a/src/js/info-atividades.js +++ b/src/js/info-atividades.js @@ -4,7 +4,9 @@ const description = "Imagem referente ao site dessa atividade" export const activities = [ { title: "Atividade 01: Projeto Get Coffe", - description: "Desenvolvimento de um site sobre café para atrair clientes", + description: + "Recriando um layout no Figma de um site sobre café para os usuários fazerem pedidos sem sair de casa", + descriptionTwo: `O objetivo principal era desenvolver uma interface intuitiva e fácil de usar para que os usuários possam fazer seus pedidos de café de forma rápida e prática, sem sair de casa.`, link: "./src/activities/atv01_projeto-coffe", image: "./src/assets/screenshots/get-coffe.png", alt: `${description}`, @@ -21,7 +23,8 @@ export const activities = [ }, { title: "Atividade 02: Padrinhos Mágicos", - description: "Criação de um site falando sobre os padrinhos mágicos", + description: `Recriando um layout no Figma de um site falando sobre alguns episódios do desenho os "Padrinhos Mágicos"`, + descriptionTwo: `Esta atividade visa reproduzir uma interface para exibir alguns episódios da série "Os Padrinhos Mágicos", cada card exibe uma imagem e um resumo breve do episódio, além dos botões na parte superior que simulam a ação de login`, link: "./src/activities/atv02_padrinhos-magicos", image: "./src/assets/screenshots/padrinhos-magicos.png", alt: `${description}`, @@ -40,6 +43,7 @@ export const activities = [ title: "Atividade 03: Lógica de Programação", description: "Conjunto de 4 atividades de Javascript envolvendo lógica de programação", + descriptionTwo: `Cada card contém uma atividade de Lógica de Programação, essas atividades foram convertidas em um site para exibir todas em um único lugar e então testar`, link: "./src/activities/atv03_logica-js", image: "./src/assets/screenshots/logica-js.png", alt: `${description}`,