From fda5f22a783d3bba88ef98f1863c96ce4c1153dc Mon Sep 17 00:00:00 2001
From: II-Paulus-II <paulus.coding@gmail.com>
Date: Mon, 18 Mar 2024 13:36:57 +0000
Subject: [PATCH] tabs css somewhat finished

---
 src/App.css                    |  5 +++
 src/components/Projects.jsx    |  7 ++--
 src/components/WebProjects.jsx |  8 ++--
 src/styles/projects.css        | 72 ++++++++++++++++++++++++++++++----
 4 files changed, 77 insertions(+), 15 deletions(-)

diff --git a/src/App.css b/src/App.css
index 7d398b1..0994181 100644
--- a/src/App.css
+++ b/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;
 }
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index b17d61c..b4f1aee 100644
--- a/src/components/Projects.jsx
+++ b/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>
-          <button type="button" onClick={() => { handleClicks("cpp")}}>C++</button>
-          <button type="button" onClick={() => { handleClicks("mod")}}>Game Mods</button>
+          <div className={typeProject === "web" ? "projectSelectionButtons projectSelectedButton" : "projectSelectionButtons projectNotSelectedButton"} onClick={() => { handleClicks("web")}}>Web Dev</div>
+          <div className={typeProject === "cpp" ? "projectSelectionButtons projectSelectedButton" : "projectSelectionButtons projectNotSelectedButton"} onClick={() => { handleClicks("cpp")}}>C++</div>
+          <div className={typeProject === "mod" ? "projectSelectionButtons projectSelectedButton" : "projectSelectionButtons projectNotSelectedButton"} onClick={() => { handleClicks("mod")}}>Game Mods</div>
         </div>
       </section>
       {typeProject === "web" && <WebProjects />}
diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx
index d6fbb1e..8185060 100644
--- a/src/components/WebProjects.jsx
+++ b/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(
-            <>
-            {projectNumber === index && <div key={item.Name} className="projectIndividualItemContainer">
+            <div key={item.Name}>
+            {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>
diff --git a/src/styles/projects.css b/src/styles/projects.css
index 6663cde..d007e8a 100644
--- a/src/styles/projects.css
+++ b/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: 1rem;
+  gap: 3rem;
+  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);
+}