Changed Services section to Tech Stack section

src/Utils/ScrollUtils/ScrollUtils.jsx

@@ -1,7 +1,8 @@
 // scrollUtils.js
 export const scrollToSection = (sectionId) => {
   const section = document.getElementById(sectionId);
-  if (sectionId !== "home") {
+
+  if (sectionId !== "home" && sectionId !== "") {
     if (section) {
       window.scrollTo({
         top: section.offsetTop - 100,

src/assets/ProjectsList/ProjectsList.jsx

@@ -4,19 +4,22 @@ let ProjectsList = [
     name: "Project Name",
     image: image1,
     technology: "ReactJs",
-    link: "http://reactjs.com",
+    live_link: "http://reactjs.com",
+    github_link:"https://github.com/devalentineomonya"
   },
   {
     name: "Project Name",
     image: image1,
     technology: "ReactJs",
     link: "http://reactjs.com",
+    github_link:"https://github.com/devalentineomonya"
   },
   {
     name: "Project Name",
     image: image1,
     technology: "ReactJs",
     link: "http://reactjs.com",
+    github_link:"https://github.com/devalentineomonya",
   },
 
 ];

src/components/CardItem/CardItem.jsx

@@ -3,8 +3,8 @@ import "./carditem.css";
 
 const CardItem = ({ cardContent }) => {
   const handleClick = () => {
-    if (cardContent.link) {
-      window.open(cardContent.link, "_blank"); // Open link in a new tab
+    if (cardContent.live_link) {
+      window.open(cardContent.live_link, "_blank"); 
     }
   };
 

src/components/Service/Service.jsx → src/components/TechStack/TechStack.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import chevron_right from "../../assets/images/chevron.png";
-import "./service.css";
-const Service = (props) => {
+import "./techstack.css";
+const TechStack = (props) => {
   const [isActive, setIsActive] = useState(false);
 
   const toggleAccordion = () => {
@@ -25,4 +25,4 @@ const Service = (props) => {
   );
 };
 
-export default Service;
+export default TechStack;

src/components/Servces/Services.jsx → src/components/TechStacks/TechStacks.jsx

@@ -1,21 +1,21 @@
 import React, { useContext } from "react";
-import "./services.css";
-import Service from "../Service/Service";
+import "./techstacks.css";
+import TechStack from "../TechStack/TechStack";
 import { ServicesContext } from "../../Context/ServicesContext";
 import HeadLine from "../HeadLine/HeadLine";
 
-const Services = () => {
+const TechStacks = () => {
   const { servicesList } = useContext(ServicesContext);
   return (
     <div className="services-section" >
-    <HeadLine id="services" number={"01"} description={"What i do as a service"} name={"Services"} />
+    <HeadLine id="services" number={"01"} description={"What i do as a service"} name={"Tech Stack"} />
       <div className="services-container">
         {servicesList.map((service, i) => (
-          <Service key={i} name={service.name} image={service.image} description={service.description} />
+          <TechStack key={i} name={service.name} image={service.image} description={service.description} />
         ))}
       </div>
     </div>
   );
 };
 
-export default Services;
+export default TechStacks;

src/pages/Home.jsx

@@ -1,5 +1,5 @@
 import Hero from "../components/Hero/Hero";
-import Services from "../components/Servces/Services";
+import TechStacks from "../components/TechStacks/TechStacks";
 import ServicesContextProvider from "../Context/ServicesContext";
 import About from "../components/About/About";
 import CounterContextProvider from "../Context/CounterContext";
@@ -26,7 +26,7 @@ const Home = ({ activeTab, setActiveTab }) => {
       <Hero />
 
       <ServicesContextProvider>
-        <Services />
+        <TechStacks />
       </ServicesContextProvider>
 
       <CounterContextProvider>