fix: Ajuste de Layout

davi.psouza · davi.psouza · commit b4f0c43a595d · 2025-05-07T17:54:24.000-03:00
diff --git a/css/style.css b/css/style.css
@@ -1,6 +1,11 @@
 
 :root{
-    --bg-color-one: #3b3b3b;
+    --color-one: #3b3b3b;
+    --color-two: #f8f9fa;
+    --principal-color: #212529;
+    --secondary-color: #ffc107;
+    --auxiliar-color1: #cea014;
+    --auxiliar-color2: #9d7e21;
 
     --font-familly-one: Verdana;
     --font-weight-one: 500;
@@ -12,11 +17,114 @@
 }
 *{
     font-family: Lexend;
+    color: var(--color-two);
+    transition: all .3s ease;
+    scroll-behavior: smooth;
 }
-body{
-    background-color: var(--bg-color-one);
+html, body{
+    background-color: var(--principal-color);
     overflow-x: hidden;
 }
+
+.intro{
+    font-size: 20px;
+    text-transform: uppercase;
+}
+
+.intro-name{
+    font-weight: 700; 
+    font-size: 50px;
+    text-transform: uppercase;
+}
+
+.intro-initials{
+    font-size: 15px; 
+    text-align: justify;
+    opacity: 50%;
+}
+
+.intro-balls{
+
+    width: 20em; 
+    height: 20em;
+    border-radius: 100%;
+    position: absolute;
+    transform: translate(0%, -50%);
+    right: 0;
+
+}
+
+.intro-template{
+    max-width: 32em!important;
+}
+
+#ball3{
+
+    top: -10em;
+    background-color: var(--auxiliar-color2);
+
+}
+
+#ball2{
+
+    top: 0em;
+    background-color: var(--auxiliar-color1);
+
+}
+
+#ball1{
+
+    top: 10em;
+    background-color: var(--secondary-color);
+
+}
+
+.page-content{
+
+    background-color: var(--principal-color);
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+    text-align: start; 
+    height: auto; 
+    min-height: 100vh;
+    padding: 5em;
+
+}
+
+.topics{
+
+    padding: 0em 1em;
+    margin: 0em 2em;
+    max-width: 20em!important;
+
+}
+
+.topics .topic-title{
+    color: var(--secondary-color);
+}
+
+.download_cv{
+
+    text-decoration: none;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: var(--secondary-color);
+
+}
+
+.download_cv:hover{
+    text-decoration: none;
+    color: var(--auxiliar-color1);
+}
+
+.disabled{
+
+    opacity: 50%;
+    cursor: not-allowed;
+
+}
+
 .h1-title{
     font-weight: var(--font-weight-one);
 }
@@ -41,6 +149,13 @@ body{
     height: 5em;
 }
 
+.nav-item:hover{
+
+    border-bottom: 4px solid #ecb41a!important;
+    transition: all 0.1s ease;
+
+}
+
 
 body::-webkit-scrollbar{
     width: 10px;
@@ -138,14 +253,6 @@ body::-webkit-scrollbar-thumb{
     transform: translate3d(50px, 0, 0);
 }
 
-.hover{
-    transition: all 0.3s ease;
-}
-.hover:hover{
-    transition: all 0.3s ease;
-    opacity: 50%;
-}
-
 .hover-warning{
     transition: all 0.3s ease;
 }
@@ -190,3 +297,71 @@ body::-webkit-scrollbar-thumb{
         transform: translate3d(-50%, 0px,0);
     }
 }
+
+#Links{
+
+    background-color: var(--color-one);
+
+}
+
+@media (max-width: 850px) {
+    body {
+        font-size: 14px;
+        /* padding: 1em; */
+    }
+
+    .intro-name {
+        font-size: 30px;
+    }
+
+    .intro {
+        font-size: 16px;
+    }
+
+    .intro-balls {
+        width: 10em;
+        height: 10em;
+        transform: translate(-50%, -50%);
+        right: 0%;
+    }
+
+    #ball1{
+        top: 5em;
+    }
+
+    #ball3{
+        top: -5em;
+    }
+
+    .container-one {
+        width: 100%;
+        height: auto;
+    }
+
+    .card-one {
+        max-width: 100%;
+    }
+
+    .h1-title {
+        font-size: 1.5em;
+    }
+
+    .p-subtitle {
+        font-size: 2em;
+    }
+}
+
+@media (max-width: 770px), (max-height: 800px) {
+
+    .balls{
+        display: none;
+    }
+
+    .intro-template{
+        text-align: center;
+    }
+
+    .intro-initials{
+        margin-top: 1em;
+    }
+}
diff --git a/index.html b/index.html
@@ -24,64 +24,88 @@
         <button class="navbar-toggler mx-3 my-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
             <span class="navbar-toggler-icon"></span>
         </button>
-        <div class="d-flex align-items-center navbar-brand fs-6 hover-warning">
-            <p class="mx-3 m-2">Davi Pinheiro de Souza</p>
-        </div>
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
-            <ul class="navbar-nav mx-5 my-4 ms-auto" id="navbar">
+            <ul class="navbar-nav my-4 mx-auto" id="navbar">
                
                 <!-- Espaço destinado a inserção de opções da navbar via script -->
 
             </ul>
         </div>
     </nav>
 
-    <div class="d-flex text-start align-items-center justify-content-center" style="background-color: #212529; height: auto; min-height: 100vh;">
+    <div class="page-content row" id="Home">
         <!-- <h1 class="display-4 h1-title text-warning mb-2"><strong>Davi Pinheiro de Souza</strong></h1>
         <p class="fs-3 text-light" id="funcs" style="height: 1em"><small></small></p> -->
-        <div style="max-width: 40em;">
-            <p class="text-light mb-0" style="font-family: Lexend; font-size: 20px;">Hello, I am</p>
-            <p class="text-light" style="font-family: Lexend; font-weight: 900; font-size: 50px;">DAVI P. DE SOUZA</p>
+        <div class="intro-template col-md-6">
+            <p class="intro mb-0">Hello, I am</p>
+            <p class="intro-name">Davi P. de Souza</p>
             <div>
-                <p class="text-warning mb-1" style="font-family: Lexend; font-size: 20px;">And I am a Web Developer</p>
-                <p class="text-light mb-0 opacity-50" style="font-family: Lexend; font-size: 15px; text-align: justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a neque turpis. Nam eu feugiat dolor. Sed nec hendrerit urna, nec fringilla odio. Duis nec orci justo. </p>
+                <p class="intro mb-1" style="color: var(--secondary-color);">I am a Web Developer</p>
+                <p class="intro-initials text-light mb-0">
+                    Sou apaixonado por tecnologia e desenvolvimento web, 
+                    Tenho experiência em front-end e back-end, 
+                    e estou sempre buscando aprender novas ferramentas e 
+                    linguagens para evoluir meus projetos. Meu objetivo é 
+                    transformar ideias em aplicações úteis e acessíveis. 
+                </p>
             </div>
         </div>
-        <div class="position-relative ms-5 mt-4">
-            <div style="width: 20em; height: 100%;">
-                <div class="bg-warning rounded-circle opacity-100 position-absolute translate-middle start-50" style="width: 20em; height: 20em; top: -10em;"></div>
-                <div class="bg-warning rounded-circle opacity-75  position-absolute translate-middle start-50" style="width: 20em; height: 20em; top: 0em;"></div>
-                <div class="bg-warning rounded-circle opacity-50  position-absolute translate-middle start-50" style="width: 20em; height: 20em; top: 10em;"></div>
-            </div>
+        <div class="intro-template balls col-md-6 position-relative mt-4">
+            <div class="intro-balls" id="ball3"></div>
+            <div class="intro-balls" id="ball2"></div>
+            <div class="intro-balls" id="ball1"></div>
         </div>
     </div>
 
-    <!-- Sobre -->
-    <div class="d-flex align-items-center justify-content-center p-5" style=" background-color: #212529;" id="Sobre">
-        <div class="row align-items-center justify-content-center">
-            <!-- Container da Foto -->
-            <div class="col-sm-4 m-5 tremidinha" data-anime= "up">
-                <!-- Foto -->
-                <img class="img-fluid rounded shadow" src="images/Me.jpeg" alt="Minha foto">
-            </div>
-            <!-- Container Infos -->
-            <div class="col-sm-4" data-anime= "up">
-                <!-- Titulo -->
-                <h2 class="text-warning mb-4">Sobre mim</h2>
-                <!-- Informações -->
-                <p class="text-light mb-4" style="text-align: justify;">Olá, me chamo Davi Pinheiro de Souza, tenho 22 anos e sou Desenvolvedor Web e Suporte em TI.
-                    Atualmente trabalho como Desenvolvedor Web com PHP e Bootstrap. Estou no quinto semestre de Engenharia de Software. Estudo JavaScript, PHP, Bootstrap, React JS, Java, C#, Springboot e MySQL para me aperfeiçoar cada vez mais na construção de sites e API's.
-                    Venho me interessando muito pela área de Inteligencia Artificial e Redes Neurais e pretendo estudar isso um pouco mais a fundo.</p>
-                <!-- Botão Curriculo -->
-                <a class="btn btn-outline-warning tremidinha" style="text-decoration: none;font-weight: 500;" href="file/CV_DaviPinheiroDeSouza.pdf" download="Curriculo_Davi" target="_blank">
-                    <!-- Icon -->
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download mb-1 me-1" viewBox="0 0 16 16">
-                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
-                        <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
-                    </svg>
-                     Baixar CV
+    <div class="page-content row flex-column m-0" id="Sobre">
+
+        <div class="col-12 text-center mb-5" data-anime= "up">
+            <p class="intro-name mb-0" style="font-size: 30px;">
+                What about me?
+            </p>
+            <i>
+                <a class="download_cv disabled" href="file/CV_DaviPinheiroDeSouza.pdf" download="Curriculo_Davi" target="_blank">
+                    Download CV
                 </a>
+            </i>
+        </div>
+        <div class="col-12 row m-0 justify-content-center align-items-center mt-5" data-anime= "up">
+              
+            <div class="col-lg-4 topics" data-anime= "up">
+                <p class="topic-title">Who am I?</p>
+                <p class="intro-initials">
+                    I'm a web developer with a strong interest in back-end 
+                    technologies, currently working as a Support Analyst at 
+                    TOTVS and I’m a Software Engeneering Studant. I'm 
+                    passionate about solving real-world problems through 
+                    code and continuously improving my skills.
+                </p>
             </div>
+            
+            <div class="col-lg-4 topics" data-anime= "up">
+                <p class="topic-title">What do I do?</p>
+                <p class="intro-initials">
+                    I develop full-stack applications using technologies 
+                    like Java, MySQL, PHP, ADVPL, Angular, and a bit of Python. 
+                    I'm also exploring React and WebSockets, and I enjoy 
+                    building APIs and working on robust back-end logic. At 
+                    work, I’ve been learning ADVPL, TLPP, Angular, and PO 
+                    UI to support TOTVS systems.
+                </p>
+            </div>
+            
+            <div class="col-lg-4 topics" data-anime= "up">
+                <p class="topic-title">What are my goals?</p>
+                <p class="intro-initials">
+                    I'm focused on deepening my knowledge in back-end 
+                    development, especially in C# and architecture. I 
+                    also want to expand into cybersecurity and ethical 
+                    hacking in the future. My main goal is to become a 
+                    well-rounded developer who can create secure, scalable, 
+                    and efficient systems.
+                </p>
+            </div>
+
         </div>
     </div>
     
@@ -347,6 +371,8 @@ <h2 class="text-warning fs-4 text-center text-lg-start mt-5">
     <script src="js/OpcoesNav.js"></script>
     <script src="js/exibeOpcoes.js"></script>
 
+    <script src="js/script.js"></script>
+
     <!-- Script Bootstrap -->
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
     
diff --git a/js/OpcoesNav.js b/js/OpcoesNav.js
@@ -4,8 +4,8 @@ class OpcoesNav{
 
         var divNav = document.getElementById("navbar");
 
-        divNav.innerHTML += `<li class="nav-item mx-4 hover">
-                                    <a class="navbar-brand fs-6 text-light" href="#${id}">${id}</a>
+        divNav.innerHTML += `<li class="nav-item px-4">
+                                    <a class="navbar-brand mx-0 fs-6 text-light" href="#${id}">${id}</a>
                              </li>`
 
     }
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,9 @@
+const disabledItems = Array.from(document.getElementsByClassName('disabled'));
+
+disabledItems.forEach(element => {
+    element.addEventListener('click', (event) => {
+        event.preventDefault(); // Impede o comportamento padrão do clique
+        event.stopPropagation(); // Impede que o evento se propague
+        console.log('Este item está desabilitado.');
+    });
+});

Original file line number	Diff line number	Diff line change
`@@ -4,8 +4,8 @@ class OpcoesNav{`
`4`	`4`
`5`	`5`	`var divNav = document.getElementById("navbar");`
`6`	`6`
`7`		- divNav.innerHTML += `<li class="nav-item mx-4 hover">
`8`		`- <a class="navbar-brand fs-6 text-light" href="#${id}">${id}</a>`
	`7`	+ divNav.innerHTML += `<li class="nav-item px-4">
	`8`	`+ <a class="navbar-brand mx-0 fs-6 text-light" href="#${id}">${id}</a>`
`9`	`9`	</li>`
`10`	`10`
`11`	`11`	`}`