tabs css somewhat finished

src/App.css

@@ -11,9 +11,14 @@ html {
 body {
   height: 100vh;
   max-width: 100vw;
+  font-family: monospace;
   overflow-y: scroll;
 }
 
+a {
+  font-family: monospace;
+}
+
 a:-webkit-any-link {
   color: white;
 }

src/components/Projects.jsx

@@ -18,11 +18,10 @@ function Projects() {
   return (
     <article id="projects" className="projectsContainer">
       <section className="projectsTitlesContainer">
-        <h2>Projects</h2>
         <div className="projectSelectionButtonsContainer">
-          <button type="button" onClick={() => { handleClicks("web")}}>Web Dev</button>
+          <div className={typeProject === "web" ? "projectSelectionButtons projectSelectedButton" : "projectSelectionButtons projectNotSelectedButton"} onClick={() => { handleClicks("web")}}>Web Dev</div>
-          <button type="button" onClick={() => { handleClicks("cpp")}}>C++</button>
+          <div className={typeProject === "cpp" ? "projectSelectionButtons projectSelectedButton" : "projectSelectionButtons projectNotSelectedButton"} onClick={() => { handleClicks("cpp")}}>C++</div>
-          <button type="button" onClick={() => { handleClicks("mod")}}>Game Mods</button>
+          <div className={typeProject === "mod" ? "projectSelectionButtons projectSelectedButton" : "projectSelectionButtons projectNotSelectedButton"} onClick={() => { handleClicks("mod")}}>Game Mods</div>
         </div>
       </section>
       {typeProject === "web" && <WebProjects />}

src/components/WebProjects.jsx

@@ -13,7 +13,7 @@ function WebProjects() {
   return (
     <section id="webprojects" className="subProjectsContainer">
       <div className="projectItemsContainer">
-      <div  className="projectButtonsContainer">
+        <div  className="projectButtonsContainer">
         {webProjects.map((item, index) => {
           return (
                 <button key={`${index}tab`} type="button" onClick={() => { handleProjectTabs(index)}}>{index+1}</button>
@@ -22,8 +22,8 @@ function WebProjects() {
         </div>
         {webProjects.map((item, index) => {
           return(
-            <>
+            <div key={item.Name}>
-            {projectNumber === index && <div key={item.Name} className="projectIndividualItemContainer">
+            {projectNumber === index && <div className="projectIndividualItemContainer">
               <h3>{item.Name}</h3>
               <p>{item.Details}</p>
               <p>{item.Features}</p>
@@ -31,7 +31,7 @@ function WebProjects() {
               <p>{item.GitHub}</p>
               <p>{item.Hosted}</p>
             </div>}
-          </>);
+          </div>);
       })}
       </div>
     </section>

src/styles/projects.css

@@ -1,7 +1,7 @@
 .projectsContainer {
   min-height: 100vh;
   width: 100%;
-  padding: 3rem;
+  padding: 3.5rem 2rem;
   color: white;
 }
 
@@ -9,15 +9,18 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  box-sizing: content-box;
+  border: 5px white solid;
+  border-top: 0;
+  border-radius: 5px;
+  position: relative;
+  z-index: 0;
 }
 
 .projectItemsContainer {
-  display: flex;
-  flex-direction: column;
-  position: relative;
   padding: 1rem;
-  margin: 1rem;
   max-width: 100vw;
+  overflow: hidden
 }
 
 .projectIndividualItemContainer {
@@ -26,10 +29,14 @@
   padding: 2rem;
   min-width: calc(100vw - 10rem);
   min-height: calc(100vh - 20rem);
+  border: 5px white solid;
+  border-radius: 5px;
 }
 
 .projectsTitlesContainer {
   text-align: center; 
+  padding: 0;
+  margin: 0;
 }
 
 .projectButtonsContainer {
@@ -41,7 +48,58 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
-  padding: 0.5rem;
+  gap: 3rem;
-  gap: 1rem;
+  position: relative;
 }
 
+.projectSelectionButtons {
+  color: white;
+  padding: 1.5rem;
+  font-weight: bolder;
+  min-width: 10rem;
+}
+
+.projectNotSelectedButton {
+  border-top: 5px white double;
+  border-left: 5px white double;
+  border-right: 5px white double;
+  border-top-left-radius: 15%;
+  border-top-right-radius: 15%;
+  border-bottom: 0;
+  z-index: 1;
+}
+
+.projectSelectedButton {
+  position: relative;
+  border-top: 7px white solid;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom: 0;
+}
+
+.projectSelectedButton::after, .projectSelectedButton::before {
+  content: '';
+  min-width: 100vw;
+  height: 100%;
+  border: 7px solid white;
+  position: absolute;
+  bottom: -7px;
+  border-top: 0;
+  z-index: 0;
+}
+
+.projectSelectedButton::before {
+  border-left: 0;
+  -moz-border-radius: 0 0 5px 0;
+  -webkit-border-radius: 0 0 5px 0;
+  border-radius: 0 0 5px 0;
+  right: calc(10rem - 7px);
+}
+
+.projectSelectedButton::after {
+  border-right: 0;
+  -moz-border-radius: 0 0 0 5px;
+  -webkit-border-radius: 0 0 0 5px;
+  border-radius: 0 0 0 5px;
+  left: calc(10rem - 7px);
+}