web projects area started

src/App.jsx

@@ -5,6 +5,7 @@ import Footer from "@/components/Footer.jsx";
 import Content from "@/components/Content.jsx";
 import ProjectContextProvider from "@/context/ProjectContext";
 
+
 function App() {
 
   return (

src/components/ModProjects.jsx

@@ -0,0 +1,15 @@
+/* ----- Project Imports ----- */
+import "@/styles/projects.css";
+import * as Modsdata from "@/data/modsdata.js";
+
+
+function ModProjects() {
+  return (
+    <section id="modprojects" className="subprojectsContainer">
+    <h3>This is Mod projects area title</h3>
+    <p>This be some Mod projects</p>
+    </section>
+  );
+};
+
+export default ModProjects;

src/components/Projects.jsx

@@ -2,17 +2,33 @@
 import "@/styles/projects.css";
 import "@/components/WebProjects";
 import "@/components/CppProjects";
-import WebProjects from "./WebProjects";
+import WebProjects from "@/components/WebProjects";
-import CppProjects from "./CppProjects";
+import CppProjects from "@/components/CppProjects";
+import ModProjects from "@/components/ModProjects";
 import { useProjectContext } from "@/context/ProjectContext";
 
 
 function Projects() {
   const { typeProject, setTypeProject } = useProjectContext();
+
+  function handleClicks(arg) {
+    setTypeProject(arg);
+  }
+
   return (
     <article id="projects" className="projectsContainer">
+      <section className="projectsTitlesContainer">
+        <h2>Projects</h2>
+        <p>Some paragraph</p>
+        <div className="projectSelectionButtons">
+          <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>
+      </section>
       {typeProject === "web" && <WebProjects />}
       {typeProject === "cpp" && <CppProjects />}
+      {typeProject === "mod" && <ModProjects />}
     </article>
   );
 };

src/components/WebProjects.jsx

@@ -1,13 +1,26 @@
 /* ----- Project Imports ----- */
 import "@/styles/projects.css";
-import * as Webdata from "@/data/webdata.js";
+import { webProjects } from "@/data/webdata.js";
 
 
 function WebProjects() {
   return (
-    <section id="webprojects" className="webprojectsContainer">
+    <section id="webprojects" className="subProjectsContainer">
     <h3>This is Web projects area title</h3>
-    <p>This be some web projects</p>
+    <div className="projectItemsContainer">
+    {webProjects.map((item) => {
+      return (
+        <div key={item.Name} className="projectIndividualItemContainer">
+          <h4>{item.Name}</h4>
+          <p>{item.Details}</p>
+          <p>{item.Features}</p>
+          <p>{item.Technologies}</p>
+          <p>{item.GitHub}</p>
+          <p>{item.Hosted}</p>
+        </div>
+      );
+    })}
+    </div>
     </section>
   );
 };

src/data/webdata.js

@@ -11,9 +11,27 @@ export const webProjects = [
     Name: "Wordle Clone",
     Image: "/projectimgs/wordle.webp",
     Details: "As a final group project during the software development bootcamp, our group decided to work on a wordle clone using the latest version of Next JS - APP router.",
-    Features: "There are a few minor differences between our clone and the real one. First after validation of guesses, the letters that are not in the solution word are not allowed to be used again. Hence, we do not have to add the guess words to an array to prevent entering the same guess again. Further, in our version one can play as many times as they like as a new random word will be chosen each time to be the solution. Lastly, all games are recorded in the database so we decided to make signing in with clerk a necessity to play which also means that if you come back later that day you will be where you left off.",
+    Features: "There are a few minor differences between our clone and the real one. After validation of guesses, the letters that are not in the solution word are not allowed to be used again. Hence, we do not have to add the guess words to an array to prevent entering the same guess again. Further, in our version one can play as many times as they like as a new random word will be chosen each time to be the solution, rather than there being a 'word of the day'. Lastly, all games are recorded in the database so we decided to make signing in with clerk a necessity to play. If you come back later that day you will be where you left off.",
     Technologies: "Next JS, React JS, PostgresQL, Clerk Auth",
     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",
+    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-week2",
+    Hosted: "https://paulus-project-week2.vercel.app/",
+  },
 ];

src/styles/projects.css

@@ -2,3 +2,48 @@
   min-height: 100vh;
   padding: 3rem;
 }
+
+.subProjectsContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.projectItemsContainer {
+  display: flex;
+  flex-direction: row;
+  padding: 1rem;
+  gap: 1rem;
+  margin: 1rem;
+  border: 4px black;
+  border-style: double;
+  overflow-x: scroll;
+  scrollbar-width: auto;      
+  scrollbar-color: blue black;
+}
+
+.projectItemsContainer::-webkit-scrollbar {
+  height: 5px;
+}
+
+.projectItemsContainer::-webkit-scrollbar-track {
+  background: rgba(144, 238, 144, 0.164);
+}
+
+.projectItemsContainer::-webkit-scrollbar-thumb {
+  background-color: black;
+  outline: 1px solid blue;
+}
+
+.projectIndividualItemContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.projectsTitlesContainer {
+
+}
+.projectSelectionButtons {
+
+}
+