added responsive mode and also new colors in page style

funaki-roger · Sep 13, 2024 · 5b072c8 · 5b072c8
1 parent d277b63
commit 5b072c8
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 25 deletions.
diff --git a/css/skins/color-2.css b/css/skins/color-2.css
@@ -1,5 +1,5 @@
 :root
 {
-    --skin-color: #fa5b0f;
+    --skin-color: #ff1b1b;
 
 }
diff --git a/css/skins/color-3.css b/css/skins/color-3.css
@@ -1,5 +1,5 @@
 :root
 {
-    --skin-color:#ff1b1b;
+    --skin-color:#1854b4;
 
 }
diff --git a/css/skins/color-4.css b/css/skins/color-4.css
@@ -1,5 +1,5 @@
 :root
 {
-    --skin-color:#1854b4;
+    --skin-color:#e60ffa;
 
 }
diff --git a/css/skins/color-5.css b/css/skins/color-5.css
@@ -1,5 +1,5 @@
 :root
 {
-    --skin-color: #e60ffa;
+    --skin-color: #5e5e5e;
 
 }
diff --git a/css/style-switcher.css b/css/style-switcher.css
@@ -82,20 +82,20 @@
 
 .style-switcher .color-2
 {
-    background: #fa5b0f;
+    background: #ff1b1b;
 }
 
 .style-switcher .color-3
 {
-    background: #ff1b1b;
+    background: #1854b4;
 }
 
 .style-switcher .color-4
 {
-    background: #1854b4;
+    background: #e60ffa;
 }
 
 .style-switcher .color-5
 {
-    background: #e60ffa;
+    background: #5e5e5e;
 }
diff --git a/css/style.css b/css/style.css
@@ -51,16 +51,44 @@ ul{
     display: block;
     padding: 0 30px;
     opacity: 1;
+    position: fixed;
+    left: 270px;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    transition: all 0.3s ease;
 }
 
-.hidden
+.section.back-section
 {
-    display: none !important;
+    z-index: 1;
+}
+
+.section.active
+{
+    z-index: 2;
+    opacity: 1;
+    animation: slideSection 1s ease;
 }
 
-.main-content
+@keyframes slideSection
 {
-    padding-left: 270px;
+    0%
+    {
+        transform: translateX(100%);
+    }
+    100%
+    {
+        transform: translateX(0%);
+    }
+}
+
+.hidden
+{
+    display: none !important;
 }
 
 .padd-15
@@ -169,6 +197,7 @@ ul{
     justify-content: center;
     align-items: center;
     z-index: 10;
+    transition: all 0.3s ease;
 }
 
 .aside .logo
@@ -232,6 +261,7 @@ ul{
     display: none;
     align-items: center;
     justify-content: center;
+    transition: all 0.3s ease;
 }
 
 .aside .nav-toggler span
@@ -243,6 +273,11 @@ ul{
     position: relative;
 }
 
+.aside .nav-toggler.open span
+{
+    background-color: transparent;
+}
+
 .aside .nav-toggler span::before
 {
     content: '';
@@ -254,6 +289,13 @@ ul{
     left: 0;
 }
 
+.aside .nav-toggler.open span::before
+{
+    transform: rotate(45deg);
+    top: 0;
+}
+
+
 .aside .nav-toggler span::after
 {
     content: '';
@@ -265,6 +307,12 @@ ul{
     left: 0;
 }
 
+.aside .nav-toggler.open span::after
+{
+    transform: rotate(-45deg);
+    top: 0;
+}
+
 .aside .nav
 {
     margin-top: 50px;
@@ -442,7 +490,6 @@ h3.my-profession
 
 .about .about-content .personal-info .buttons .btn
 {
-    margin-right: 15px;
     margin-top: 10px;
 }
 
@@ -831,9 +878,26 @@ h3.my-profession
     {
         left: -270px;
     }
-    .main-content
+    .aside.open
+    {
+        left: 0;
+    }
+    .aside .nav-toggler
+    {
+        display: flex;
+        left: 30px;
+    }
+    .aside .nav-toggler.open
+    {
+        left: 300px;
+    }
+    .section 
+    {
+        left: 0;
+    }
+    .section.open
     {
-        padding-left: 0;
+        left: 270px;
     }
     .about .about-content .personal-info .info-item p span
     {

diff --git a/index.html b/index.html
@@ -44,7 +44,7 @@
         <!--Main content Start-->
         <div class="main-content">
             <!--Home Section Start-->
-            <section class="home section" id="home">
+            <section class="home active section" id="home"> 
                 <div class="container">
                     <div class="row">
                         <div class="home-info padd-15">
@@ -89,9 +89,8 @@ <h3 class="my-profession"><span class="typing">I'm a QA Analyst</span></h3>
                                 Collaboration;<br>
                             </p>
                             <a href="https://github.com/funaki-roger/" class="btn" target="_blank">GitHub</a>
+                            <a href="https://www.linkedin.com/in/rogerfunaki/" class="btn" target="_blank">LinkedIn</a> 
                             <a href="#contact" class="btn hire-me">My contacts</a>
-                            <a href="https://api.whatsapp.com/send?phone=5511942396406&text=&type=phone_number&app_absent=0" 
-                            target="_blank" class="btn hire-me">WhatsApp</a> 
                         </div>
                         <div class="home-img padd-15">
                             <img src="images/perfil.png" alt="">
@@ -102,7 +101,7 @@ <h3 class="my-profession"><span class="typing">I'm a QA Analyst</span></h3>
             <!--Home Section End-->
 
             <!--Abount Section Start-->
-            <section class="about section" id="about">
+            <section class="about section" id="about"> 
                 <div class="container">
                     <div class="now">
                         <div class="section-title padd-15">
@@ -181,10 +180,10 @@ <h3>I am a Quality Assurance Analyst and also a <span>Scrum Master</span></h3>
                                     </div>
                                     <div class="row">
                                         <div class="buttons padd-15">
-                                            <a href="https://www.linkedin.com/in/rogerfunaki/" class="btn" target="_blank">LinkedIn</a> 
+                                            <a href="https://api.whatsapp.com/send?phone=5511942396406&text=&type=phone_number&app_absent=0" 
+                                            target="_blank" class="btn hire-me">WhatsApp</a> 
                                             <a href="https://drive.google.com/file/d/1tkCb1JgmW_Ccd9YNbQl37H-VOXNTcILy/view?usp=sharing"
                                             class="btn" target="_blank">Download CV</a>
-
                                         </div>
                                     </div>
                                 </div>
@@ -1049,11 +1048,11 @@ <h2>Customer Registration,<br><br>
                 <div class="container">
                     <div class="row">
                         <div class="section-title padd-15">
-                            <h2>Contact</h2>
+                            <h2>Contact Me</h2>
                         </div>
                     </div>
                     <h3 class="contact-title padd-15">Have You Any Questions ?</h3>
-                    <h4 class="contact-sub-title padd-15">I'M AT YOU SERVICES</h4>
+                    <h4 class="contact-sub-title padd-15">LET'S TALK</h4>
                     <div class="row">
                         <!--Contact info item start-->
                         <div class="contact-info-item padd-15">
@@ -1085,7 +1084,7 @@ <h4>GitHub</h4>
                         <!--Contact info item end-->
                     </div>
                     <h3 class="contact-title padd-15">SEND ME AN EMAIL</h3>
-                    <h4 class="contact-sub-title padd-15">I'M VERY RESPOSIVE TO MESSAGES</h4>
+                    <!--<h4 class="contact-sub-title padd-15">I'M VERY RESPOSIVE TO MESSAGES</h4>-->
                     <!-- Contact form -->
                     <div class="row">
                         <div class="contact-form padd-15">

diff --git a/js/script.js b/js/script.js
@@ -2,6 +2,78 @@
 var typed = new Typed(".typing", {
     strings: ["", "I work with", "WEB | Mobile | API | Scrum Master"],
     typeSpeed: 150,
-    backSpeed: 250,
+    backSpeed: 200,
     loop: true
 });
+
+/* Aside */
+
+const nav = document.querySelector(".nav"),
+    navList = nav.querySelectorAll("li"),
+    totalNavList = navList.length,
+    allSection = document.querySelectorAll(".section"),
+    totalSection = allSection.length;
+
+for (let i = 0; i < totalNavList; i++) {
+    const a = navList[i].querySelector("a");
+    a.addEventListener("click", function () {
+        for (let i = 0; i < totalSection; i++) {
+            allSection[i].classList.remove("back-section");
+        }
+        for (let j = 0; j < totalNavList; j++) {
+            if (navList[j].querySelector("a").classList.contains("active")) {
+                allSection[j].classList.add("back-section");
+            }
+            navList[j].querySelector("a").classList.remove("active");
+        }
+        this.classList.add("active");
+        showSection(this);
+        if (window.innerWidth < 1200) {
+            asideSectionTogglerBtn();
+        }
+    });
+}
+
+function showSection(element) {
+    for (let i = 0; i < totalSection; i++) {
+        allSection[i].classList.remove("active");
+    }
+    const target = element.getAttribute("href").split("#")[1];
+    document.querySelector("#" + target).classList.add("active");
+}
+
+function updateNav(element) {
+    const target = element.getAttribute("href").split("#")[1];
+    for (let i = 0; i < totalNavList; i++) {
+        const link = navList[i].querySelector("a");
+        if (link.getAttribute("href").split("#")[1] === target) {
+            link.classList.add("active");
+        } else {
+            link.classList.remove("active");
+        }
+    }
+}
+
+// Verifica se o botão "Hire Me" existe antes de adicionar o evento
+const hireMeBtn = document.querySelector(".hire-me");
+if (hireMeBtn) {
+    hireMeBtn.addEventListener("click", function () {
+        showSection(this);
+        updateNav(this);
+    });
+}
+
+const navTogglerBtn = document.querySelector(".nav-toggler"),
+    aside = document.querySelector(".aside");
+
+navTogglerBtn.addEventListener("click", () => {
+    asideSectionTogglerBtn();
+});
+
+function asideSectionTogglerBtn() {
+    aside.classList.toggle("open");
+    navTogglerBtn.classList.toggle("open");
+    for (let i = 0; i < totalSection; i++) {
+        allSection[i].classList.toggle("open");
+    }
+}