setting up projects

src/App.jsx

@@ -3,14 +3,17 @@ import "./App.css";
 import Header from "@/components/Header.jsx";
 import Footer from "@/components/Footer.jsx";
 import Content from "@/components/Content.jsx";
+import ProjectContextProvider from "@/context/projectcontext";
 
 function App() {
 
   return (
     <>
-    <Header />
+    <ProjectContextProvider>
-    <Content />
+      <Header />
-    <Footer />
+      <Content />
+      <Footer />
+    </ProjectContextProvider>
     </>
   )
 }

src/components/CppProjects.jsx

@@ -0,0 +1,16 @@
+/* ----- Project Imports ----- */
+import "@/styles/projects.css";
+import * as Cppdata from "@/data/cppdata.js";
+
+
+
+function CppProjects() {
+  return (
+    <section id="cpp-projects" className="cpp-projectsContainer">
+    <h2>This is projects area title</h2>
+    <p>This be some projects</p>
+    </section>
+  );
+};
+
+export default CppProjects;

src/components/Details.jsx

@@ -6,7 +6,8 @@ function Details() {
   return (
     <article className="detailsContainer">
       <section className="detailsSocialLinksContainer">
-        <a href="https://github.com/II-Paulus-II" target="_blank" ><img className="detailsSocialLinksImg" src="/github.webp" alt="github" /></a>
+
+        <a href="https://www.linkedin.com/in/paul-andrew-hughes/" target="_blank" ><img className="detailsSocialLinksImg" src="/linkedin.webp" alt="linkedin" /></a>
       </section>
       <section className="detailsTextContainer">
         <div className="detailsTextInnerContainer"><h2 className="detailsTitle">Paul Hughes</h2></div>
@@ -17,7 +18,8 @@ function Details() {
         </div>
       </section>
       <section className="detailsSocialLinksContainer">
-        <a href="https://www.linkedin.com/in/paul-andrew-hughes/" target="_blank" ><img className="detailsSocialLinksImg" src="/linkedin.webp" alt="linkedin" /></a>
+
+        <a href="https://github.com/II-Paulus-II" target="_blank" ><img className="detailsSocialLinksImg" src="/github.webp" alt="github" /></a>
       </section>
     </article>
   );

src/components/Projects.jsx

@@ -1,12 +1,17 @@
 /* ----- Project Imports ----- */
 import "@/styles/projects.css";
+import "@/components/WebProjects";
+import "@/components/CppProjects";
+import WebProjects from "./WebProjects";
+import CppProjects from "./CppProjects";
 
 
 function Projects() {
   return (
-    <article className="projectsContainer">
+    <article id="projects" className="projectsContainer">
-    <h2 id="projects">This is projects area title</h2>
+      
-    <p>This be some projects</p>
+      <WebProjects />
+      <CppProjects />
     </article>
   );
 };

src/components/WebProjects.jsx

@@ -0,0 +1,16 @@
+/* ----- Project Imports ----- */
+import "@/styles/projects.css";
+import * as Webdata from "@/data/webdata.js";
+
+
+
+function WebProjects() {
+  return (
+    <section id="webprojects" className="webprojectsContainer">
+    <h2>This is projects area title</h2>
+    <p>This be some projects</p>
+    </section>
+  );
+};
+
+export default WebProjects;

src/context/projectcontext.jsx

@@ -0,0 +1,19 @@
+/* ----- Third Party Imports ----- */
+import { createContext, useState, useContext } from "react";
+
+/* ----- Project Imports ----- */
+
+const ProjectContext = createContext();
+
+export default function ProjectContextProvider({ children }) {
+
+  return (
+    <ProjectContext.Provider value = {{}}>
+    {children}
+    </ProjectContext.Provider>
+  );
+}
+
+export function useProjectContext() {
+  return useContext(ProjectContext);
+}

src/data/webdata.js

@@ -8,17 +8,12 @@ const BLANKTEMPLATE = {
 
 export const webProjects = [
   {
-    Name: "",
+    Name: "Wordle Clone",
-    Details: "",
+    Image: "/projectimgs/wordle.webp",
-    Technologies: "",
+    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.",
-    GitHub: "",
+    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.",
-    Hosted: "",
+    Technologies: "Next JS, React JS, PostgresQL, Clerk Auth",
-  },
+    GitHub: "https://github.com/WordleTeamLegends/wordle",
-  {
+    Hosted: "https://wordle.paulus.casa",
-    Name: "",
-    Details: "",
-    Technologies: "",
-    GitHub: "",
-    Hosted: "",
   },
 ];