added tabs to web projects section

src/components/WebProjects.jsx

@@ -1,23 +1,37 @@
 /* ----- 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) => {
+      <div  className="projectButtonsContainer">
+        {webProjects.map((item, index) => {
           return (
-        <div key={item.Name} className="projectIndividualItemContainer">
+                <button key={`${index}tab`} type="button" onClick={() => { handleProjectTabs(index)}}>{index+1}</button>
+          );
+        })}
+        </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>}
-      );
+          </>);
       })}
       </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;