three webprojects displayed - styling for large monitors only

src/components/WebProjects.jsx

@@ -16,11 +16,11 @@ function WebProjects() {
             </div>
             <div className="projectTextContainer">
             <h3 className="projectTextTitle">{item.Name}</h3>
-            <p>{item.Details}</p>
+            <p className="projectTechnologies">{item.Technologies}</p>
-            <p>{item.Features}</p>
+            <div className="projectLinksContainer">
-            <p>{item.Technologies}</p>
+            <a href={item.GitHub} target="_blank" >GitHub</a>
-            <p>{item.GitHub}</p>
+            <a href={item.Hosted} target="_blank" >Hosted</a>
-            <p>{item.Hosted}</p>
+            </div>
             </div>
         </div>);
       })}

src/data/webdata.js

@@ -16,22 +16,22 @@ export const webProjects = [
     GitHub: "https://github.com/WordleTeamLegends/wordle",
     Hosted: "https://wordle.paulus.casa",
   },
-  {
-    Name: "REACT Clicker Heroes - Hacker Version",
-    Image: "/projectimgs/wordle.webp",
-    Details: "Remaking the week 2 project with react",
-    Features: "Click to hack",
-    Technologies: "React JS",
-    GitHub: "https://github.com/II-Paulus-II/project-week6",
-    Hosted: "https://paulus-project-week2.vercel.app/",
-  },
   {
     Name: "Clicker Heroes - Hacker Version",
-    Image: "/projectimgs/wordle.webp",
+    Image: "/projectimgs/hacker.webp",
     Details: "As an introduction to Vanilla Javascript I made my own version of a cookie clicker or clicker heroes game",
     Features: "Click to hack",
-    Technologies: "Javascript, html, css",
+    Technologies: "Javascript, HTML, CSS",
     GitHub: "https://github.com/II-Paulus-II/project-week2",
     Hosted: "https://paulus-project-week2.vercel.app/",
   },
+  {
+    Name: "Dangerous Cows - Image Gallery",
+    Image: "/projectimgs/cows.webp",
+    Details: "As an introduction to Vanilla Javascript I made my own version of a cookie clicker or clicker heroes game",
+    Features: "Click to hack",
+    Technologies: "Javascript, HTML, CSS",
+    GitHub: "https://github.com/II-Paulus-II/project-week3",
+    Hosted: "https://ii-paulus-ii.github.io/project-week3/",
+  },
 ];

src/styles/projects.css

@@ -91,6 +91,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
+  margin: 0.5rem;
   width: 100%;
   box-sizing: content-box;
 
@@ -98,13 +99,15 @@
 
 .projectIndividualItemContainer {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  margin: 0.5rem;
   padding: 1.5rem;
-  max-width: 50%;
+  max-width: calc(33% - 1rem);
+  background: linear-gradient(109.6deg, rgb(15, 25, 25) 0%, rgb(14, 138, 130) 91.1%);
 }
 
 .projectImageContainer {
-  width: 50%;
+  width: 100%;
   padding: 0.5rem;
 }
 .projectImage {
@@ -114,6 +117,25 @@
 .projectTextContainer {
   display: flex;
   flex-direction: column;
-  width: 50%;
+  text-align: center;
+  width: 100%;
   padding: 0.5rem;
+}
+
+.projectTextTitle {
+  padding: 0.5rem;
+  font-size: 1.4rem;
+  font-weight: 900;
+}
+
+.projectTechnologies {
+  font-size: 1.1rem;
+  padding-bottom: 1rem;
+}
+
+.projectLinksContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 2rem;
+  justify-content: center;
 }