From c1de54876e66f043f49cbaa47207a4fcf25feb04 Mon Sep 17 00:00:00 2001
From: II-Paulus-II <paulus.coding@gmail.com>
Date: Wed, 20 Mar 2024 10:10:33 +0000
Subject: [PATCH] started work on styling project cards

---
 quicknotes.md                  |  3 +--
 src/components/WebProjects.jsx | 22 +++++-----------
 src/styles/projects.css        | 48 ++++++++++++----------------------
 3 files changed, 25 insertions(+), 48 deletions(-)

diff --git a/quicknotes.md b/quicknotes.md
index 6f65d9b..fb72821 100644
--- a/quicknotes.md
+++ b/quicknotes.md
@@ -4,5 +4,4 @@ projectArticleContainer
 ==> projectTypeSelected et al.
 
 => projectInformationContainer
-==> projectNumberSelectionContainer
-===> projectNumberSelector
\ No newline at end of file
+==> projectIndividualItemContainer
\ No newline at end of file
diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx
index 9b539e0..e43bdac 100644
--- a/src/components/WebProjects.jsx
+++ b/src/components/WebProjects.jsx
@@ -5,31 +5,23 @@ import { useProjectContext } from "@/context/ProjectContext";
 
 
 function WebProjects() {
-  const { projectNumber, setProjectNumber } = useProjectContext();
-  function handleProjectTabs(arg) {
-    setProjectNumber(arg);
-  }
 
   return (
     <section id="webprojects" className="projectInformationContainer">
-      <div  className="projectNumberSelectionContainer">
-      {webProjects.map((item, index) => {
-        return (
-              <div key={`${index}tab`} className="projectNumberSelector" onClick={() => { handleProjectTabs(index)}}>{index+1}</div>
-        );
-      })}
-      </div>
       {webProjects.map((item, index) => {
         return(
-          <div key={item.Name}>
-          {projectNumber === index && <div className="projectIndividualItemContainer">
-            <h3>{item.Name}</h3>
+          <div key={item.Name} className="projectIndividualItemContainer">
+            <div className="projectImageContainer">
+              <img className ="projectImage" src={item.Image} alt={item.Name} />
+            </div>
+            <div className="projectTextContainer">
+            <h3 className="projectTextTitle">{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>
diff --git a/src/styles/projects.css b/src/styles/projects.css
index 5c342e5..251c08c 100644
--- a/src/styles/projects.css
+++ b/src/styles/projects.css
@@ -89,45 +89,31 @@
 
 .projectInformationContainer {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   width: 100%;
   box-sizing: content-box;
-  position: relative;
-  z-index: 0;
-}
 
-.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 {
-  display: flex;
-  flex-direction: column;
-  padding: 2rem;
-  min-width: calc(100vw - 10rem);
-  min-height: calc(100vh - 20rem);
-}
-
-
-
-
-.projectButtonsContainer {
   display: flex;
   flex-direction: row;
-  justify-content: center;
-  gap: 1rem;
+  padding: 1.5rem;
+  max-width: 50%;
 }
 
+.projectImageContainer {
+  width: 50%;
+  padding: 0.5rem;
+}
+.projectImage {
+  width: 100%;
+}
 
+.projectTextContainer {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  padding: 0.5rem;
+}
\ No newline at end of file