From 38b282e9cba544053aab3b8619574dbe5b2afe61 Mon Sep 17 00:00:00 2001
From: Valentine Omonya <valomosh254@gmail.com>
Date: Sun, 24 Mar 2024 17:51:01 +0300
Subject: [PATCH] Changed Navigation from Services to Tech Stack

---
 src/components/BackToTop/BackToTop.jsx   | 25 +++++++++++++++++++++---
 src/components/BackToTop/backtotop.css   |  4 ++++
 src/components/Contact/Contact.jsx       |  2 +-
 src/components/Hero/Hero.jsx             |  4 ++--
 src/components/Hero/hero.css             |  4 ----
 src/components/NavBar/Navbar.jsx         | 17 ++++++++--------
 src/components/TechStack/techstack.css   |  5 ++++-
 src/components/TechStacks/TechStacks.jsx |  2 +-
 8 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/src/components/BackToTop/BackToTop.jsx b/src/components/BackToTop/BackToTop.jsx
index 58bb053..013d54e 100644
--- a/src/components/BackToTop/BackToTop.jsx
+++ b/src/components/BackToTop/BackToTop.jsx
@@ -1,16 +1,35 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import chevronUp from "../../assets/images/chevronup.png";
 import "./backtotop.css";
+
 const backToTopHandler = () => {
   window.scrollTo({
     top: 0,
-    behavior:"smooth",
+    behavior: "smooth",
   });
 };
 
 const BackToTop = () => {
+  const [iScrolled, setIscrolled] = useState(false);
+  
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY < 150) {
+        setIscrolled(true);
+      } else {
+        setIscrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
-    <div className="back-to-top" onClick={backToTopHandler}>
+    <div className={`back-to-top ${iScrolled ? "hidden" : ""}`} onClick={backToTopHandler}>
       <div className="back-to-top-icon">
         <img src={chevronUp} alt="" />
       </div>
diff --git a/src/components/BackToTop/backtotop.css b/src/components/BackToTop/backtotop.css
index 4a0687e..ff90440 100644
--- a/src/components/BackToTop/backtotop.css
+++ b/src/components/BackToTop/backtotop.css
@@ -10,8 +10,12 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    transition: all 0.3s ease-in-out;
 
 }
+.back-to-top.hidden {
+    display: none;
+}
 
 .back-to-top-icon {
     height: 40px;
diff --git a/src/components/Contact/Contact.jsx b/src/components/Contact/Contact.jsx
index 4136db9..a9782b2 100644
--- a/src/components/Contact/Contact.jsx
+++ b/src/components/Contact/Contact.jsx
@@ -44,7 +44,7 @@ const Contact = ({ activeTab, setActiveTab }) => {
                 <a onClick={() => handleTabClick("about", event)}>About</a>
               </li>
               <li>
-                <a onClick={() => handleTabClick("services", event)}>Services</a>
+                <a onClick={() => handleTabClick("techstack", event)}>Tech Stack</a>
               </li>
               <li>
                 <a onClick={() => handleTabClick("projects", event)}>Projects</a>
diff --git a/src/components/Hero/Hero.jsx b/src/components/Hero/Hero.jsx
index 1171925..77d3083 100644
--- a/src/components/Hero/Hero.jsx
+++ b/src/components/Hero/Hero.jsx
@@ -24,9 +24,9 @@ const Hero = () => {
       style={{
         top: "-100px",
         zIndex: "1",
-        background: `linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url(${sliderImage})`,
+        background: `linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url(${sliderImage})`,
         transition: "0.4s",
-        animation: "zoomBackground 8s infinite",
+        animation: "zoomBackground 8s infinite linear",
       }}
     >
       <div className="hero-content">
diff --git a/src/components/Hero/hero.css b/src/components/Hero/hero.css
index 05170b4..b4a0a7e 100644
--- a/src/components/Hero/hero.css
+++ b/src/components/Hero/hero.css
@@ -16,10 +16,6 @@
         background-size: 105%;
     }
 
-    50% {
-        background-size: 102.5%;
-    }
-
     100% {
         background-size: 100%;
     }
diff --git a/src/components/NavBar/Navbar.jsx b/src/components/NavBar/Navbar.jsx
index c97e466..43d6e9a 100644
--- a/src/components/NavBar/Navbar.jsx
+++ b/src/components/NavBar/Navbar.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import {scrollToSection} from "../../Utils/ScrollUtils/ScrollUtils";
+import { scrollToSection } from "../../Utils/ScrollUtils/ScrollUtils";
 import "./navbar.css";
 
 const Navbar = ({ activeTab, setActiveTab }) => {
@@ -34,7 +34,10 @@ const Navbar = ({ activeTab, setActiveTab }) => {
   return (
     <div className={`navbar ${stickyNavbar ? "navbar-sticky" : ""}`}>
       <div className="logo">
-        <h1 className="logo-title">
+        <h1
+          className="logo-title"
+          onClick={(event) => handleTabClick("home", event)}
+        >
           Devalentine<span>.</span>
         </h1>
       </div>
@@ -49,20 +52,18 @@ const Navbar = ({ activeTab, setActiveTab }) => {
             </a>
           </li>
           <li
-            className={`nav-item ${activeTab === "services" ? "active" : ""}`}
+            className={`nav-item ${activeTab === "techstack" ? "active" : ""}`}
           >
             <a
               className="nav-link"
-            
-              onClick={() => handleTabClick("services", event)}
+              onClick={() => handleTabClick("techstack", event)}
             >
-              Services
+              Tech Stack
             </a>
           </li>
           <li className={`nav-item ${activeTab === "about" ? "active" : ""}`}>
             <a
               className="nav-link"
-             
               onClick={() => handleTabClick("about", event)}
             >
               About
@@ -73,7 +74,6 @@ const Navbar = ({ activeTab, setActiveTab }) => {
           >
             <a
               className="nav-link"
-              
               onClick={() => handleTabClick("projects", event)}
             >
               Projects
@@ -82,7 +82,6 @@ const Navbar = ({ activeTab, setActiveTab }) => {
           <li className={`nav-item ${activeTab === "contact" ? "active" : ""}`}>
             <a
               className="nav-link"
-              
               onClick={() => handleTabClick("contact", event)}
             >
               Contacts
diff --git a/src/components/TechStack/techstack.css b/src/components/TechStack/techstack.css
index a8ea467..67c4fcb 100644
--- a/src/components/TechStack/techstack.css
+++ b/src/components/TechStack/techstack.css
@@ -44,7 +44,10 @@
     transition: all 0.6s ease-in-out;
     
 }
-
+.service-description p{
+    font-size:20px;
+    letter-spacing: 3px;line-height:2rem;
+}
 .services-card.active .service-description {
     max-height: 200px;
     transition: all 0.6s ease-in-out;
diff --git a/src/components/TechStacks/TechStacks.jsx b/src/components/TechStacks/TechStacks.jsx
index 5862a20..768d461 100644
--- a/src/components/TechStacks/TechStacks.jsx
+++ b/src/components/TechStacks/TechStacks.jsx
@@ -8,7 +8,7 @@ const TechStacks = () => {
   const { servicesList } = useContext(ServicesContext);
   return (
     <div className="services-section" >
-    <HeadLine id="services" number={"01"} description={"Teh Stacks I Use"} name={"Tech Stack"} />
+    <HeadLine id="techstack" number={"01"} description={"Teh Stacks I Use"} name={"Tech Stack"} />
       <div className="services-container">
         {servicesList.map((service, i) => (
           <TechStack key={i} name={service.name} image={service.image} description={service.description} />