nickorlow/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

project updates and blog

Browse source
This commit is contained in:
Nicholas Orlowsky 2023-03-20 18:06:26 -05:00
parent 261a4fcacd
commit dec88e2842
12 changed files with 344 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

44
src/components/project-card/ProjectCard.tsx Normal file
View file

@ -0,0 +1,44 @@
import React, {useState} from "react";
import "./ProjectCard.css";
import ProjectCardProps from "../../types/ProjectCardProps";
import Modal from "react-modal";
export default function ProjectCard(props: {info: ProjectCardProps}) {
const [isModalOpen, setModalOpen] = useState(false);
return (
<div className={"project-card col-md-4 p-2"}>
<div className={"project-card-int pb-2"} style={{backgroundImage: "linear-gradient(to bottom, rgba(0, 0, 0, .60) 50%, rgba(0, 0, 0, 0.75) 100%), url(\""+props.info.imageUrl+"\")"}} onClick={()=>{setModalOpen(true)}}>
<h3>{props.info.title}</h3>
<p>{props.info.shortDescription}</p>
<div>
<div className={"row"} style={{fontFamily: "monospace"}}>
{props.info.techUsed.slice(0, 3).map(s =>
<div className={"col-md-4 col-12 mt-2"}>
<div className={"lang-card "+s.toLowerCase().replace(" ", "")}>
<p style={{fontSize: 16, margin: 0}}>{s}</p>
</div>
</div>
)}
</div>
</div>
</div>
<Modal className={"project-card-modal"} isOpen={isModalOpen}>
<p className={"back-button"} onClick={()=>{setModalOpen(false)}}>Back</p>
<h1>{props.info.title}</h1>
<a href={props.info.link}>{props.info.linkTitle}</a>
<p>{props.info.description}</p>
<h3>All technologies used:</h3>
<div className={"d-flex flex-wrap mw-100"}>
{props.info.techUsed.map(s =>
<div className={""}>
<div className={"lang-card-modal "+s.toLowerCase().replace(" ", "")}>
<p style={{fontSize: 16, margin: 0}}>{s}</p>
</div>
</div>
)}
</div>
</Modal>
</div>
);
}