From cf13a4c65213b2092f94fd31c6eaaf689d00b0f1 Mon Sep 17 00:00:00 2001 From: II-Paulus-II Date: Thu, 14 Mar 2024 10:11:08 +0000 Subject: [PATCH] web projects area started --- src/App.jsx | 1 + src/components/ModProjects.jsx | 15 ++++++++++++ src/components/Projects.jsx | 20 +++++++++++++-- src/components/WebProjects.jsx | 19 +++++++++++--- src/data/webdata.js | 20 ++++++++++++++- src/styles/projects.css | 45 ++++++++++++++++++++++++++++++++++ 6 files changed, 114 insertions(+), 6 deletions(-) create mode 100644 src/components/ModProjects.jsx diff --git a/src/App.jsx b/src/App.jsx index 9bf83f6..a0028d6 100644 --- a/src/App.jsx +++ b/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 ( diff --git a/src/components/ModProjects.jsx b/src/components/ModProjects.jsx new file mode 100644 index 0000000..b19202e --- /dev/null +++ b/src/components/ModProjects.jsx @@ -0,0 +1,15 @@ +/* ----- Project Imports ----- */ +import "@/styles/projects.css"; +import * as Modsdata from "@/data/modsdata.js"; + + +function ModProjects() { + return ( +
+

This is Mod projects area title

+

This be some Mod projects

+
+ ); +}; + +export default ModProjects; \ No newline at end of file diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx index 34d217c..a72499a 100644 --- a/src/components/Projects.jsx +++ b/src/components/Projects.jsx @@ -2,17 +2,33 @@ import "@/styles/projects.css"; import "@/components/WebProjects"; import "@/components/CppProjects"; -import WebProjects from "./WebProjects"; -import CppProjects from "./CppProjects"; +import WebProjects from "@/components/WebProjects"; +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 (
+
+

Projects

+

Some paragraph

+
+ + + +
+
{typeProject === "web" && } {typeProject === "cpp" && } + {typeProject === "mod" && }
); }; diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx index a0a9419..0d3af36 100644 --- a/src/components/WebProjects.jsx +++ b/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 ( -
+

This is Web projects area title

-

This be some web projects

+
+ {webProjects.map((item) => { + return ( +
+

{item.Name}

+

{item.Details}

+

{item.Features}

+

{item.Technologies}

+

{item.GitHub}

+

{item.Hosted}

+
+ ); + })} +
); }; diff --git a/src/data/webdata.js b/src/data/webdata.js index b060efd..e53e996 100644 --- a/src/data/webdata.js +++ b/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/", + }, ]; diff --git a/src/styles/projects.css b/src/styles/projects.css index 657b45d..e581e6f 100644 --- a/src/styles/projects.css +++ b/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 { + +} +