Skip to content

Commit

Permalink
Melhorias de performance - CSS/Javascript
Browse files Browse the repository at this point in the history
  • Loading branch information
@gustavolima007
gustavolima007 committed Jan 1, 2025
1 parent 474b28a commit 86f38b4
Show file tree
Hide file tree
Showing 3 changed files with 182 additions and 85 deletions.
91 changes: 79 additions & 12 deletions assets/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -317,27 +317,27 @@ main {
min-width: 259px;
}

/*-----------------------------------*\
#SIDEBAR
\*-----------------------------------*/

/* SIDEBAR */
.sidebar {
margin-bottom: 15px;
margin-bottom: 15px; /* Ajuste único */
max-height: 112px;
overflow: hidden;
transition: var(--transition-2);
}

.sidebar.active {
max-height: 405px;
max-height: 405px; /* Ajuste para o estado ativo */
}

.sidebar-info {
position: relative;
position: sticky; /* Faz o elemento "grudar" no topo */
top: 0; /* Fixa no topo da sidebar */
z-index: 10; /* Garante que fique acima de outros elementos */
padding: 10px; /* Espaçamento interno */
display: flex;
justify-content: flex-start;
align-items: center;
gap: 15px;
gap: 20px; /* Espaçamento entre os itens */
}

.avatar-box {
Expand Down Expand Up @@ -1692,11 +1692,31 @@ textarea.form-input::-webkit-resizer {
* SIDEBAR
*/

.contacts-list {
.contacts-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px 15px;
}

gap: 20px 15px; /* Espaçamento ajustado */
padding: 10px; /* Adicione espaço interno se necessário */
list-style: none; /* Remova marcadores padrão */
}

@media (max-width: 768px) {
.sidebar {
max-height: 200px; /* Ajuste para telas menores */
}

.sidebar.active {
max-height: 300px; /* Ajuste ativo */
}


.contacts-list {
grid-template-columns: 1fr; /* Alinhe os itens em uma coluna */
gap: 15px; /* Reduza o espaçamento */
}
}


/**
* NAVBAR
*/
Expand Down Expand Up @@ -2013,6 +2033,40 @@ textarea.form-input::-webkit-resizer {
justify-content: center;
}

.sidebar {
height: 100%;
overflow: hidden;
transition: height 0.3s ease-in-out;
}

.sidebar.active {
height: 100%;
}

.sidebar {
border: 1px solid transparent;
transition: border-color 0.3s ease-in-out;
}

.sidebar {
border: 1px solid transparent;
transition: border-color 0.3s ease-in-out;
}

.sidebar:hover {
border-color: var(--highlight-color);
}

.sidebar-info {
cursor: pointer; /* Adicione se for clicável */
}

.contacts-list li:hover {
background-color: var(--hover-bg-color);
border-radius: 5px;
}


/**
* RESUME
*/
Expand All @@ -2021,3 +2075,16 @@ textarea.form-input::-webkit-resizer {
max-width: 700px;
}
}


/* Animações Baseadas em GPU */

.animated {
transition: transform 0.3s ease-out, opacity 0.3s ease-out;
transform: translateY(20px);
opacity: 0;
}
.animated.show {
transform: translateY(0);
opacity: 1;
}
31 changes: 31 additions & 0 deletions assets/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,3 +293,34 @@ const throttle = (func, limit) => {
window.addEventListener("scroll", throttle(() => {
console.log("Scroll otimizado!");
}, 200));


// Gerenciamento de Estados do Usuário
document.addEventListener("visibilitychange", () => {
if (document.hidden) {
console.log("Página está oculta");
// Pausar animações ou outros processos
} else {
console.log("Página visível novamente");
// Retomar atividades pausadas
}
});

// Cache Dinâmico com Service Worker
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/sw.js').then((registration) => {
console.log('Service Worker registrado:', registration);
});
}

self.addEventListener('install', (event) => {
event.waitUntil(
caches.open('v1').then((cache) => cache.addAll(['/index.html', '/styles.css', '/script.js']))
);
});
self.addEventListener('fetch', (event) => {
event.respondWith(
caches.match(event.request).then((response) => response || fetch(event.request))
);
});

145 changes: 72 additions & 73 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,19 +36,19 @@
- #MAIN
-->
<main>
<!--
<!--
FUNCIONALIDADE DO MENU
-->
<div class="overlay" data-overlay></div>
<section class="testimonials-modal">
<button class="modal-close-btn" data-modal-close-btn>
</button>
<div class="modal-content">
<div data-modal-text>
</div>
</div>
</section>
<div class="overlay" data-overlay></div>
<section class="testimonials-modal">
<button class="modal-close-btn" data-modal-close-btn>
</button>
<div class="modal-content">
<div data-modal-text>
</div>
</div>
</section>


<!--
- #SIDEBAR
Expand All @@ -75,7 +75,7 @@ <h1 class="name" title="Gustavo F. Lima | Projetos">Gustavo F. Lima | Projetos</
<ion-icon name="mail-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Email</p>
<p class="contact-title">E-mail</p>
<a href="mailto:[email protected]" class="contact-link">[email protected]</a>
</div>
</li>
Expand All @@ -84,7 +84,7 @@ <h1 class="name" title="Gustavo F. Lima | Projetos">Gustavo F. Lima | Projetos</
<ion-icon name="phone-portrait-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Phone</p>
<p class="contact-title">Celular</p>
<a href="tel:+55 (19) 9 9547-7044" class="contact-link">+55 (19) 9 9547-7044</a>
</div>
</li>
Expand All @@ -93,7 +93,7 @@ <h1 class="name" title="Gustavo F. Lima | Projetos">Gustavo F. Lima | Projetos</
<ion-icon name="location-outline"></ion-icon>
</div>
<div class="contact-info">
<p class="contact-title">Location</p>
<p class="contact-title">Localização</p>
<address>Campinas, São Paulo, Brasil</address>
</div>
</li>
Expand Down Expand Up @@ -139,67 +139,67 @@ <h1 class="name" title="Gustavo F. Lima | Projetos">Gustavo F. Lima | Projetos</
<!--
- #SOBRE
-->
<article class="about active" data-page="about">
<header>
<h2 class="h2 article-title">Sobre mim</h2>
</header>
<section class="about-text">
<p> ✨ Transformando dados em insights. </p>
<p> 📚 Atualmente aprendendo serviços avançados do GCP e buscando certificação Fabric. </p>
<p> 🎯 Metas: Dominar soluções de dados em tempo real e expandir minha expertise em engenharia de dados. </p>
<p> 🎲 Curiosidade: Amo otimizar consultas SQL complexas! </p>
<p> 🚀 Engenheiro de Dados | Google Cloud | Oracle SQL | Especialista em Fabric </p>
</section>
<!--
<article class="about active" data-page="about">
<header>
<h2 class="h2 article-title">Sobre mim</h2>
</header>
<section class="about-text">
<p> ✨ Transformando dados em insights. </p>
<p> 📚 Atualmente aprendendo serviços avançados do GCP e buscando certificação Fabric. </p>
<p> 🎯 Metas: Dominar soluções de dados em tempo real e expandir minha expertise em engenharia de dados. </p>
<p> 🎲 Curiosidade: Amo otimizar consultas SQL complexas! </p>
<p> 🚀 Engenheiro de Dados | Google Cloud | Oracle SQL | Especialista em Fabric </p>
</section>
<!--
- serviços
-->
<section class="service">
<h3 class="h3 service-title">O que eu faço</h3>
<ul class="service-list">
<li class="service-item">
<div class="service-icon-box">
<img src="./assets/images/logo-1-color.png" alt="Microsoft Fabric" width="80">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Microsoft Fabric</h4>
<p class="service-item-text"> O design mais moderno e de alta qualidade feito em nível profissional.
</p>
</div>
</li>
<li class="service-item">
<div class="service-icon-box">
<img src="./assets/images/logo-2-color.jpg" alt="Power BI" width="80">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Power BI</h4>
<p class="service-item-text"> Desenvolvimento de dashboards de alta qualidade em nível profissional.
</p>
</div>
</li>
<li class="service-item">
<div class="service-icon-box">
<img src="./assets/images/python_wallpaper.jpg" alt="ícone de Python" width="80">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Python</h4>
<p class="service-item-text"> Desenvolvimento profissional de soluções automatizadas e análise de dados.
</p>
</div>
</li>
<li class="service-item">
<div class="service-icon-box">
<img src="./assets/images/GCP_wallpaper.jpg" alt="ícone de Google Cloud" width="80">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Google Cloud</h4>
<p class="service-item-text"> Implementação de soluções na nuvem com alta qualidade e eficiência. </p>
</div>
</li>
</ul>
</section>

<section class="service">
<h3 class="h3 service-title">O que eu faço</h3>
<ul class="service-list">
<li class="service-item">
<div class="service-icon-box">
<img src="./assets/images/logo-1-color.png" alt="Microsoft Fabric" width="80">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Microsoft Fabric</h4>
<p class="service-item-text"> O design mais moderno e de alta qualidade feito em nível profissional.
</p>
</div>
</li>
<li class="service-item">
<div class="service-icon-box">
<img src="./assets/images/logo-2-color.jpg" alt="Power BI" width="80">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Power BI</h4>
<p class="service-item-text"> Desenvolvimento de dashboards de alta qualidade em nível profissional.
</p>
</div>
</li>
<li class="service-item">
<div class="service-icon-box">
<img src="./assets/images/python_wallpaper.jpg" alt="ícone de Python" width="80">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Python</h4>
<p class="service-item-text"> Desenvolvimento profissional de soluções automatizadas e análise de dados.
</p>
</div>
</li>
<li class="service-item">
<div class="service-icon-box">
<img src="./assets/images/GCP_wallpaper.jpg" alt="ícone de Google Cloud" width="80">
</div>
<div class="service-content-box">
<h4 class="h4 service-item-title">Google Cloud</h4>
<p class="service-item-text"> Implementação de soluções na nuvem com alta qualidade e eficiência. </p>
</div>
</li>
</ul>
</section>




</article>

<!--
Expand Down Expand Up @@ -498,5 +498,4 @@ <h2 class="h2 article-title">Contato</h2>
<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
</body>

</html>

0 comments on commit 86f38b4

Please sign in to comment.