started work on styling project cards

quicknotes.md

@@ -4,5 +4,4 @@ projectArticleContainer
 ==> projectTypeSelected et al.
 
 => projectInformationContainer
-==> projectNumberSelectionContainer
+==> projectIndividualItemContainer
-===> projectNumberSelector

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}>
+          <div key={item.Name} className="projectIndividualItemContainer">
-          {projectNumber === index && <div className="projectIndividualItemContainer">
+            <div className="projectImageContainer">
-            <h3>{item.Name}</h3>
+              <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>

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;
+  padding: 1.5rem;
-  gap: 1rem;
+  max-width: 50%;
 }
 
+.projectImageContainer {
+  width: 50%;
+  padding: 0.5rem;
+}
+.projectImage {
+  width: 100%;
+}
 
+.projectTextContainer {
+  display: flex;
+  flex-direction: column;
+  width: 50%;
+  padding: 0.5rem;
+}