diff --git a/src/Utils/ScrollUtils/ScrollUtils.jsx b/src/Utils/ScrollUtils/ScrollUtils.jsx index 8c953e6..b07b725 100644 --- a/src/Utils/ScrollUtils/ScrollUtils.jsx +++ b/src/Utils/ScrollUtils/ScrollUtils.jsx @@ -6,7 +6,7 @@ export const scrollToSection = (sectionId) => { if (section) { window.scrollTo({ top: section.offsetTop - 100, - behavior: "smooth", + behavior: "smooth", }); } else { console.error(`Element with ID "${sectionId}" not found.`); diff --git a/src/assets/ProjectsList/ProjectsList.jsx b/src/assets/ProjectsList/ProjectsList.jsx index 864c969..de6fe14 100644 --- a/src/assets/ProjectsList/ProjectsList.jsx +++ b/src/assets/ProjectsList/ProjectsList.jsx @@ -1,24 +1,29 @@ import image1 from "../images/notAvailable.jpeg"; let ProjectsList = [ { - name: "Project Name", + id:1, + name: "Project 1 Name", image: image1, technology: "ReactJs", + description:"Aliqua nostrud non aute irure velit incididunt. Eu eiusmod ea officia incididunt proident aute eiusmod excepteur in cillum sunt elit do culpa. Ad esse deserunt anim reprehenderit ullamco fugiat aliqua proident elit esse. Fugiat quis laboris deserunt cillum. Elit ullamco voluptate irure minim.", live_link: "http://reactjs.com", github_link:"https://github.com/devalentineomonya" }, { - name: "Project Name", + id:2, + name: "Project 2 Name", image: image1, technology: "ReactJs", - link: "http://reactjs.com", + description:"Aliqua nostrud non aute irure velit incididunt. Eu eiusmod ea officia incididunt proident aute eiusmod excepteur in cillum sunt elit do culpa. Ad esse deserunt anim reprehenderit ullamco fugiat aliqua proident elit esse. Fugiat quis laboris deserunt cillum. Elit ullamco voluptate irure minim.", + live_link: "http://reactjs.com", github_link:"https://github.com/devalentineomonya" }, - { - name: "Project Name", + { id:3, + name: "Project 3 Name", image: image1, technology: "ReactJs", - link: "http://reactjs.com", + description:"Aliqua nostrud non aute irure velit incididunt. Eu eiusmod ea officia incididunt proident aute eiusmod excepteur in cillum sunt elit do culpa. Ad esse deserunt anim reprehenderit ullamco fugiat aliqua proident elit esse. Fugiat quis laboris deserunt cillum. Elit ullamco voluptate irure minim.", + live_link: "http://reactjs.com", github_link:"https://github.com/devalentineomonya", }, diff --git a/src/components/ProjectCard/ProjectCard.jsx b/src/components/ProjectCard/ProjectCard.jsx index 093185c..f5c2850 100644 --- a/src/components/ProjectCard/ProjectCard.jsx +++ b/src/components/ProjectCard/ProjectCard.jsx @@ -1,11 +1,18 @@ import React from "react"; import "./projectcard.css"; -const ProjectCard = ({projectInfo}) => { + +const ProjectCard = ({ projectInfo, setTogglePopup,setProjectID }) => { + function openPopup(e) { + e.preventDefault(); + setTogglePopup(true); + setProjectID(projectInfo.id) + } + return (
- {projectInfo.name}/ + {projectInfo.name}
@@ -14,7 +21,13 @@ const ProjectCard = ({projectInfo}) => {
- {projectInfo.name} + + {projectInfo.name} +
diff --git a/src/components/ProjectPopup/ProjectPopup.jsx b/src/components/ProjectPopup/ProjectPopup.jsx new file mode 100644 index 0000000..4ecd30d --- /dev/null +++ b/src/components/ProjectPopup/ProjectPopup.jsx @@ -0,0 +1,46 @@ +import React from "react"; +import "./projectpopup.css"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faPlus } from "@fortawesome/free-solid-svg-icons"; +import image1 from "../../assets/images/slider1.jpg"; +import ProjectsList from "../../assets/ProjectsList/ProjectsList"; + +const ProjectPopup = ({ togglePopup, setTogglePopup, projectID }) => { + let project = null; // Initialize project as null + + // Check if projectID is set before finding the project + if (projectID) { + project = ProjectsList.find((p) => p.id === projectID); + } + + return ( + +
+
setTogglePopup(false)}> + +
+ {project && ( // Render content only if project is found +
+
+
+ {project.name} +
+
+
+
+

{project.name}

+

{project.description}

+
+
+ View Github + View Live +
+
+
+ )} +
+ + ); +}; + +export default ProjectPopup; diff --git a/src/components/ProjectPopup/projectpopup.css b/src/components/ProjectPopup/projectpopup.css new file mode 100644 index 0000000..55c4ead --- /dev/null +++ b/src/components/ProjectPopup/projectpopup.css @@ -0,0 +1,135 @@ +.popup-overlay { + position: fixed; + height: 100vh; + width: 100%; + top: 0; + left: 0; + background-color: rgba(0, 0, 0, 0.4); + display: flex; + justify-content: center; + align-items: center; + z-index: 1300; + scale: 0; + transition: all 0.3s ease-in-out; +} + +.popup-overlay.open { + scale: 1; +} + +.popup-content { + display: flex; + background-color: #fff; + height: 80%; + width: 80%; + border-radius: 10px; + position: relative; + overflow: hidden; + +} + +.close-button { + position: absolute; + right: 10px; + top: 5px; + height: 40px; + width: 40px; + cursor: pointer; + background-color: rgba(0, 0, 0, 0.3); + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 20px; + transform: rotate(45deg); + z-index: 1300; +} + +.popup-grid { + display: grid; + grid-template-columns: 1.1fr 0.9fr; + column-gap: 20px; + padding: 5px; +} + +.popup-left-section { + width: 100%; + height: 100%; + overflow: hidden; + position: relative; + border-radius: 10px; +} + +.popup-left-section img { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + +} + +.popup-right-section { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: relative; +} +.popup-text h1{ + font-size: 30px; + font-family: "Dosis"; + margin-bottom: 10px; + cursor: pointer; + transition: all 0.3s ease-in-out; +} +.popup-text h1:hover{ + color: var(--color-primary); + +} + +.popup-text p { + font-size: 14px; + letter-spacing: 3px; + line-height: 2rem; + +} + +.popup-buttons { + position: absolute; + bottom: 0; + display: flex; + width: 100%; + padding: 0 20px; + padding-bottom: 20px; + justify-content: space-between; + +} + +.popup-buttons a { + + font-size: 20px; +} + +@media screen and (max-width:1200px) { + + .popup-grid { + display: flex; + flex-direction: column; + } + + .popup-left-section { + flex: 1; + margin-top: 50px; + } + + .popup-right-section { + flex: 1; + } + + .popup-content { + + height: 70%; + } + +} \ No newline at end of file diff --git a/src/components/Projects/Projects.jsx b/src/components/Projects/Projects.jsx index 08aa0d2..940188c 100644 --- a/src/components/Projects/Projects.jsx +++ b/src/components/Projects/Projects.jsx @@ -3,13 +3,13 @@ import ProjectCard from "../ProjectCard/ProjectCard"; import ProjectsList from "../../assets/ProjectsList/ProjectsList"; import "./projects.css"; import HeadLine from "../HeadLine/HeadLine"; -const Projects = () => { +const Projects = ({setTogglePopup, setProjectID}) => { return (
{ProjectsList.map((project, i) => ( - + ))}
diff --git a/src/components/SocialLinks/socialinks.css b/src/components/SocialLinks/socialinks.css index 35a0b1b..a564edc 100644 --- a/src/components/SocialLinks/socialinks.css +++ b/src/components/SocialLinks/socialinks.css @@ -3,7 +3,7 @@ bottom: 50%; left: 2%; transform: translate(-50%, 50%); - z-index: 1500; + z-index: 1100; transition: 0.3s ease-in-out; } diff --git a/src/components/TechStacks/TechStacks.jsx b/src/components/TechStacks/TechStacks.jsx index 607a5ac..5862a20 100644 --- a/src/components/TechStacks/TechStacks.jsx +++ b/src/components/TechStacks/TechStacks.jsx @@ -8,7 +8,7 @@ const TechStacks = () => { const { servicesList } = useContext(ServicesContext); return (
- +
{servicesList.map((service, i) => ( diff --git a/src/pages/Home.jsx b/src/pages/Home.jsx index 45a6607..0e1293e 100644 --- a/src/pages/Home.jsx +++ b/src/pages/Home.jsx @@ -12,10 +12,13 @@ import LatestProjects from "../components/LatestProjects/LatestProjects"; import Contact from "../components/Contact/Contact"; import Projects from "../components/Projects/Projects"; import { scrollToSection } from "../Utils/ScrollUtils/ScrollUtils"; -import React, { useEffect } from "react"; +import React, { useEffect, useState } from "react"; +import ProjectPopup from "../components/ProjectPopup/ProjectPopup"; const Home = ({ activeTab, setActiveTab }) => { const hash = window.location.hash.substr(1); + const[togglePopup, setTogglePopup] = useState(false); + const [projectID, setProjectID] = useState(null); useEffect(() => { scrollToSection(hash); setActiveTab(hash); @@ -38,7 +41,7 @@ const Home = ({ activeTab, setActiveTab }) => { - + @@ -46,6 +49,7 @@ const Home = ({ activeTab, setActiveTab }) => { + ); };