From d435ca461c7188aeaa3fccdfa486d5ebbbe92f72 Mon Sep 17 00:00:00 2001 From: Priyank Juyal Date: Fri, 15 Nov 2024 12:38:17 +0530 Subject: [PATCH] Custom projects with a detail modal pop-up --- public/index.html | 1 + .../githubRepoCard/GithubRepoCard.js | 7 --- src/pages/projects/ProjectModal.css | 39 ++++++++++++ src/pages/projects/ProjectModal.js | 50 +++++++++++++++ src/pages/projects/Projects.css | 43 +++++++++++++ src/pages/projects/Projects.js | 61 +++++++++++++------ 6 files changed, 174 insertions(+), 27 deletions(-) create mode 100644 src/pages/projects/ProjectModal.css create mode 100644 src/pages/projects/ProjectModal.js diff --git a/public/index.html b/public/index.html index 6f6a70363..76cb715c9 100644 --- a/public/index.html +++ b/public/index.html @@ -1,6 +1,7 @@ + diff --git a/src/components/githubRepoCard/GithubRepoCard.js b/src/components/githubRepoCard/GithubRepoCard.js index d130464c7..117714c44 100644 --- a/src/components/githubRepoCard/GithubRepoCard.js +++ b/src/components/githubRepoCard/GithubRepoCard.js @@ -4,15 +4,9 @@ import "./GithubRepoCard.css"; import { Fade } from "react-reveal"; export default function GithubRepoCard({ repo, theme }) { - function openRepoinNewTab(url) { - var win = window.open(url, "_blank"); - win.focus(); - } - return (
-
openRepoinNewTab(repo.url)}>
*/} -
); diff --git a/src/pages/projects/ProjectModal.css b/src/pages/projects/ProjectModal.css new file mode 100644 index 000000000..c46621018 --- /dev/null +++ b/src/pages/projects/ProjectModal.css @@ -0,0 +1,39 @@ +/* ProjectModal.css */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.6); /* semi-transparent black overlay */ + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; + } + + .modal-content { + width: 80%; + max-width: 600px; + padding: 20px; + border-radius: 8px; + position: relative; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + } + + .modal-close { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + font-size: 24px; + color: #ffffff; + cursor: pointer; + } + + .modal-title { + font-size: 24px; + margin-bottom: 10px; + } + \ No newline at end of file diff --git a/src/pages/projects/ProjectModal.js b/src/pages/projects/ProjectModal.js new file mode 100644 index 000000000..2c396d17c --- /dev/null +++ b/src/pages/projects/ProjectModal.js @@ -0,0 +1,50 @@ +import React from "react"; +import "./ProjectModal.css"; + +const ProjectModal = ({ repo, isOpen, onClose, theme }) => { + if (!isOpen) return null; + + return ( +
+
e.stopPropagation()} + style={{ backgroundColor: theme.background }} + > + +

+ {repo.name} +

+

+ {repo.description} +

+ +
+
+ ); +}; + +export default ProjectModal; diff --git a/src/pages/projects/Projects.css b/src/pages/projects/Projects.css index 6f6f7bccc..06a8746cc 100644 --- a/src/pages/projects/Projects.css +++ b/src/pages/projects/Projects.css @@ -115,3 +115,46 @@ margin-top: 30px; } } + + +/* Modal Styling */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + background-color: rgba(0, 0, 0, 0.6); + display: flex; + align-items: center; + justify-content: center; + z-index: 1000; +} + +.modal-content { + background: white; + padding: 20px; + border-radius: 8px; + max-width: 500px; + width: 90%; + position: relative; +} + +.modal-close { + position: absolute; + top: 10px; + right: 10px; + font-size: 1.5rem; + cursor: pointer; + color: #333; +} +.standard-card { + height: 280px; /* Set desired height */ + width: 350px; /* Set desired width */ + display: flex; + flex-direction: column; + justify-content: space-between; /* Makes sure content spreads evenly */ + padding: 16px; + box-sizing: border-box; + overflow: hidden; +} diff --git a/src/pages/projects/Projects.js b/src/pages/projects/Projects.js index 88bb0751d..b7817b8bc 100644 --- a/src/pages/projects/Projects.js +++ b/src/pages/projects/Projects.js @@ -3,11 +3,10 @@ import Header from "../../components/header/Header"; import Footer from "../../components/footer/Footer"; import GithubRepoCard from "../../components/githubRepoCard/GithubRepoCard"; import PublicationCard from "../../components/publicationsCard/PublicationCard"; -import Button from "../../components/button/Button"; import TopButton from "../../components/topButton/TopButton"; +import ProjectModal from "./ProjectModal"; import { Fade } from "react-reveal"; import { - greeting, projectsHeader, publicationsHeader, publications, @@ -17,8 +16,26 @@ import "./Projects.css"; import ProjectsImg from "./ProjectsImg"; class Projects extends Component { + constructor(props) { + super(props); + this.state = { + selectedRepo: null, + isModalOpen: false, + }; + } + + openModal = (repo) => { + this.setState({ selectedRepo: repo, isModalOpen: true }); + }; + + closeModal = () => { + this.setState({ selectedRepo: null, isModalOpen: false }); + }; + render() { - const theme = this.props.theme; + const { theme } = this.props; + const { selectedRepo, isModalOpen } = this.state; + return (
@@ -26,10 +43,6 @@ class Projects extends Component {
- {/* */}
@@ -49,18 +62,15 @@ class Projects extends Component {
-
- {ProjectsData.data.map((repo) => { - return ; - })} + + {/* Projects Grid Layout */} +
+ {ProjectsData.data.map((repo) => ( +
this.openModal(repo)} key={repo.id} className="standard-card"> + +
+ ))}
-
); }