project type area and gui sorted

2024-03-18 20:00:40 +00:00 · 2024-03-18 20:00:40 +00:00 · a13b6d5600
commit a13b6d5600
parent 4e31dabaaa
4 changed files with 133 additions and 101 deletions
--- a/quicknotes.md
+++ b/quicknotes.md
@ -0,0 +1,8 @@
+
+projectArticleContainer
+=> projectTypeSelectionContainer
+==> projectTypeSelected et al.
+
+=> projectInformationContainer
+==> projectNumberSelectionContainer
+===> projectNumberSelector
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@ -16,13 +16,11 @@ function Projects() {
  }

  return (
-    <article id="projects" className="projectsContainer">
-      <section className="projectsTitlesContainer">
-        <div className="projectSelectionButtonsContainer">
-          <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>
+    <article id="projects" className="projectArticleContainer">
+      <section className="projectTypeSelectionContainer">
+          <div className={typeProject === "web" ? "projectTypeSelection projectTypeSelected projectSelectedOne" : "projectTypeSelection projectNotSelected"} onClick={() => { handleClicks("web")}}>Web Dev</div>
+          <div className={typeProject === "cpp" ? "projectTypeSelection projectTypeSelected projectSelectedTwo" : "projectTypeSelection projectNotSelected"} onClick={() => { handleClicks("cpp")}}>C++</div>
+          <div className={typeProject === "mod" ? "projectTypeSelection projectTypeSelected projectSelectedThree" : "projectTypeSelection projectNotSelected"} onClick={() => { handleClicks("mod")}}>Game Mods</div>
      </section>
      {typeProject === "web" && <WebProjects />}
      {typeProject === "cpp" && <CppProjects />}
--- a/src/components/WebProjects.jsx
+++ b/src/components/WebProjects.jsx
@ -11,12 +11,11 @@ function WebProjects() {
  }

  return (
-    <section id="webprojects" className="subProjectsContainer">
-      <div className="projectItemsContainer">
-        <div  className="projectButtonsContainer">
+    <section id="webprojects" className="projectInformationContainer">
+      <div  className="projectNumberSelectionContainer">
      {webProjects.map((item, index) => {
        return (
-                <button key={`${index}tab`} type="button" onClick={() => { handleProjectTabs(index)}}>{index+1}</button>
+              <div key={`${index}tab`} className="projectNumberSelector" onClick={() => { handleProjectTabs(index)}}>{index+1}</div>
        );
      })}
      </div>
@ -33,7 +32,6 @@ function WebProjects() {
          </div>}
        </div>);
      })}
-      </div>
    </section>
  );
 };
--- a/src/styles/projects.css
+++ b/src/styles/projects.css
@ -1,26 +1,115 @@
-.projectsContainer {
+.projectArticleContainer {
  min-height: 100vh;
  width: 100%;
  padding: 3.5rem 2rem;
  color: white;
 }

-.subProjectsContainer {
+.projectTypeSelectionContainer {
+  text-align: center; 
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 3rem;
+  position: relative;
+}
+
+.projectTypeSelection {
+  color: white;
+  padding: 1.5rem;
+  font-weight: bolder;
+  min-width: 10rem;
+}
+
+.projectNotSelected {
+  border-top: 3px white solid;
+  border-left: 3px white solid;
+  border-right: 3px white solid;
+  border-bottom: 0;
+  z-index: 1;
+}
+
+.projectTypeSelected {
+  position: relative;
+  border-top: 3px white solid;
+  border-bottom: 0;
+}
+
+.projectTypeSelected::after, .projectTypeSelected::before {
+  content: '';
+  height: 100%;
+  border: 3px solid;
+  position: absolute;
+  bottom: -3px;
+  border-top: 0;
+  z-index: 0;
+}
+
+.projectSelectedOne::after {
+  min-width: calc(43vw + 13rem);
+  border-image: linear-gradient(to left,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 40%) 3;
+}
+
+.projectSelectedOne::before {
+  min-width: calc(43vw - 13rem);
+  border-image: linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 70%) 3;
+}
+
+.projectSelectedTwo::after {
+  min-width: 43vw;
+  border-image: linear-gradient(to left,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 40%) 3;
+}
+
+.projectSelectedTwo::before {
+  min-width: 43vw;
+  border-image: linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 40%) 3;
+}
+
+.projectSelectedThree::after {
+  min-width: calc(43vw - 13rem);;
+  border-image: linear-gradient(to left,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 70%) 3;
+}
+
+.projectSelectedThree::before {
+  min-width: calc(43vw + 13rem);
+  border-image: linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 40%) 3;
+}
+
+.projectTypeSelected::before {
+  border-left: 0;
+  right: calc(10rem - 3px);
+}
+
+.projectTypeSelected::after {
+  border-right: 0;
+  left: calc(10rem - 3px);
+}
+
+.projectInformationContainer {
  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 {
-  padding: 1rem;
-  max-width: 100vw;
-  overflow: hidden
+.projectNumberSelectionContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 3rem;
+  position: relative;
+}
+
+.projectNumberSelector {
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  margin: 0.5rem;
+  border: 3px solid white;
 }

 .projectIndividualItemContainer {
@ -29,77 +118,16 @@
  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 {
  display: flex;
  flex-direction: row;
-}
-
-.projectSelectionButtonsContainer {
-  display: flex;
-  flex-direction: row;
  justify-content: center;
-  gap: 3rem;
-  position: relative;
+  gap: 1rem;
 }

-.projectSelectionButtons {
-  color: white;
-  padding: 1.5rem;
-  font-weight: bolder;
-  min-width: 10rem;
-}

-.projectNotSelectedButton {
-  border-top: 3px white solid;
-  border-left: 3px white solid;
-  border-right: 3px white solid;
-  border-top-left-radius: 15%;
-  border-top-right-radius: 15%;
-  border-bottom: 0;
-  z-index: 1;
-}
-
-.projectSelectedButton {
-  position: relative;
-  border-top: 3px white solid;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  border-bottom: 0;
-}
-
-.projectSelectedButton::after, .projectSelectedButton::before {
-  content: '';
-  min-width: 75vw;
-  height: 100%;
-  border: 3px solid white;
-  position: absolute;
-  bottom: -3px;
-  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 - 3px);
-}
-
-.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 - 3px);
-}