Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom projects with a detail modal pop-up #396

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+174 −27
Open

Custom projects with a detail modal pop-up #396

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.tailwindcss.com"></script>
<meta charset="utf-8" />
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon1.ico" /> -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
Expand Down
7 changes: 0 additions & 7 deletions src/components/githubRepoCard/GithubRepoCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div className="repo-card-div" style={{ backgroundColor: theme.highlight }}>
<Fade bottom duration={2000} distance="40px">
<div key={repo.id} onClick={() => openRepoinNewTab(repo.url)}>
<div className="repo-name-div">
<svg
aria-hidden="true"
Expand Down Expand Up @@ -72,7 +66,6 @@ export default function GithubRepoCard({ repo, theme }) {
<p>{repo.node.diskUsage} KB</p>
</div>
</div> */}
</div>
</Fade>
</div>
);
Expand Down
39 changes: 39 additions & 0 deletions src/pages/projects/ProjectModal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}

50 changes: 50 additions & 0 deletions src/pages/projects/ProjectModal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
import React from "react";
import "./ProjectModal.css";

const ProjectModal = ({ repo, isOpen, onClose, theme }) => {
if (!isOpen) return null;

return (
<div
className="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center z-50 modal-overlay"
onClick={onClose}
>
<div
className="bg-white rounded-lg p-8 max-w-lg w-full relative modal-content shadow-lg"
onClick={(e) => e.stopPropagation()}
style={{ backgroundColor: theme.background }}
>
<button
className="absolute top-2 right-2 text-gray-600 hover:text-gray-800 text-2xl modal-close"
onClick={onClose}
>
&times;
</button>
<h2 className="text-2xl font-bold mb-4" style={{ color: theme.text }}>
{repo.name}
</h2>
<p className="mb-4" style={{ color: theme.secondaryText }}>
{repo.description}
</p>
<ul className="mb-4" style={{ color: theme.secondaryText }}>
<li>
<strong>Tech Stack:</strong> {repo.techStack}
</li>
<li>
<strong>GitHub URL:</strong>{" "}
<a
href={repo.url}
target="_blank"
rel="noopener noreferrer"
style={{ color: theme.linkColor }}
>
Project Link
</a>
</li>
</ul>
</div>
</div>
);
};

export default ProjectModal;
43 changes: 43 additions & 0 deletions src/pages/projects/Projects.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
61 changes: 41 additions & 20 deletions src/pages/projects/Projects.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -17,19 +16,33 @@ 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 (
<div className="projects-main">
<Header theme={theme} />
<div className="basic-projects">
<Fade bottom duration={2000} distance="40px">
<div className="projects-heading-div">
<div className="projects-heading-img-div">
{/* <img
src={require(`../../assets/images/${projectsHeader["avatar_image_path"]}`)}
alt=""
/> */}
<ProjectsImg theme={theme} />
</div>
<div className="projects-heading-text-div">
Expand All @@ -49,18 +62,15 @@ class Projects extends Component {
</div>
</Fade>
</div>
<div className="repo-cards-div-main">
{ProjectsData.data.map((repo) => {
return <GithubRepoCard repo={repo} theme={theme} />;
})}

{/* Projects Grid Layout */}
<div className="max-w-screen-lg mx-auto p-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{ProjectsData.data.map((repo) => (
<div onClick={() => this.openModal(repo)} key={repo.id} className="standard-card">
<GithubRepoCard repo={repo} theme={theme} />
</div>
))}
</div>
<Button
text={"More Projects"}
className="project-button"
href={greeting.githubProfile}
newTab={true}
theme={theme}
/>

{/* Publications */}
{publications.data.length > 0 ? (
Expand All @@ -74,6 +84,7 @@ class Projects extends Component {
>
{publicationsHeader.title}
</h1>
<br/>
<p
className="projects-header-detail-text subTitle"
style={{ color: theme.secondaryText }}
Expand All @@ -92,8 +103,18 @@ class Projects extends Component {
})}
</div>

<Footer theme={this.props.theme} onToggle={this.props.onToggle} />
<TopButton theme={this.props.theme} />
<Footer theme={theme} onToggle={this.props.onToggle} />
<TopButton theme={theme} />

{/* Render the modal */}
{selectedRepo && (
<ProjectModal
repo={selectedRepo}
isOpen={isModalOpen}
onClose={this.closeModal}
theme={theme}
/>
)}
</div>
);
}
Expand Down
Loading