added tabs to web projects section

src/components/WebProjects.jsx

@@ -1,25 +1,39 @@
 /* ----- Project Imports ----- */
 import "@/styles/projects.css";
 import { webProjects } from "@/data/webdata.js";
+import { useProjectContext } from "@/context/ProjectContext";
 
 
 function WebProjects() {
+  const { projectNumber, setProjectNumber } = useProjectContext();
+  function handleProjectTabs(arg) {
+    setProjectNumber(arg);
+  }
+
   return (
     <section id="webprojects" className="subProjectsContainer">
-    <div className="projectItemsContainer">
-    {webProjects.map((item) => {
-      return (
-        <div key={item.Name} className="projectIndividualItemContainer">
-          <h3>{item.Name}</h3>
-          <p>{item.Details}</p>
-          <p>{item.Features}</p>
-          <p>{item.Technologies}</p>
-          <p>{item.GitHub}</p>
-          <p>{item.Hosted}</p>
+      <div className="projectItemsContainer">
+      <div  className="projectButtonsContainer">
+        {webProjects.map((item, index) => {
+          return (
+                <button key={`${index}tab`} type="button" onClick={() => { handleProjectTabs(index)}}>{index+1}</button>
+          );
+        })}
         </div>
-      );
-    })}
-    </div>
+        {webProjects.map((item, index) => {
+          return(
+            <>
+            {projectNumber === index && <div key={item.Name} className="projectIndividualItemContainer">
+              <h3>{item.Name}</h3>
+              <p>{item.Details}</p>
+              <p>{item.Features}</p>
+              <p>{item.Technologies}</p>
+              <p>{item.GitHub}</p>
+              <p>{item.Hosted}</p>
+            </div>}
+          </>);
+      })}
+      </div>
     </section>
   );
 };

src/context/ProjectContext.jsx

@@ -7,8 +7,10 @@ const ProjectContext = createContext();
 
 export default function ProjectContextProvider({ children }) {
   const [typeProject, setTypeProject] = useState("web");
+  const [projectNumber, setProjectNumber] = useState(0);
+  
   return (
-    <ProjectContext.Provider value = {{typeProject, setTypeProject}}>
+    <ProjectContext.Provider value = {{typeProject, setTypeProject, projectNumber, setProjectNumber}}>
     {children}
     </ProjectContext.Provider>
   );

src/styles/projects.css

@@ -13,16 +13,11 @@
 
 .projectItemsContainer {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   position: relative;
   padding: 1rem;
   margin: 1rem;
   max-width: 100vw;
-  overflow-x: scroll;
-  position: relative;
-  scrollbar-color: white black;
-  scrollbar-width: thin;
-  -ms-overflow-style: none;
 }
 
 .projectIndividualItemContainer {
@@ -37,6 +32,11 @@
   text-align: center; 
 }
 
+.projectButtonsContainer {
+  display: flex;
+  flex-direction: row;
+}
+
 .projectSelectionButtonsContainer {
   display: flex;
   flex-direction: row;