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

design changes and project updates

Browse source
This commit is contained in:
Nicholas Orlowsky 2023-03-21 11:26:01 -05:00
parent 6ad19a8bfa
commit e375cbe23d
21 changed files with 174 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/components/project-card/ProjectCard.css
View file

@ -4,17 +4,15 @@
}
.project-card-int {
background-color: #222;
font-family: monospace;
padding: 2px;
background-size: cover;
background-position: center;
transition: .5s;
border-radius: 10px;
}
.project-card-int:hover {
transform: translateY(-5px);
transition: .5s;
color: #F38020;
cursor: pointer;
}
@ -48,6 +46,7 @@
}
.lang-card {
color: white;
border-radius: 5px;
font-family: monospace;
background-color: #00AA00;
@ -79,7 +78,7 @@
}
.react {
background-color: #61DAFB;
background-color: #0cc4f6;
}
.typescript {
@ -130,11 +129,11 @@
background-color: #1572B6;
}
.xenhtml {
.xenhtmlframework {
background-color: #3A6A81;
}
.xeninfo {
.xeninfoapi {
background-color: #3E4E57;
}
@ -142,15 +141,15 @@
background-color: #007396;
}
.apple-script {
background-color: #D9D9D9;
.applescript {
background-color: #a8a8a8;
}
.spotify {
.spotifyapi {
background-color: #1DB954;
}
.nodejs {
.node\.js {
background-color: #339933;
}
@ -158,7 +157,7 @@
background-color: #0075A8;
}
.azure-devops {
.azuredevops {
background-color: #0078D7;
}
@ -169,3 +168,11 @@
.mssql {
background-color: #CC2927;
}
.rust {
background-color: #CE412B;
}
.discordapi {
background-color: #7289DA;
}

28
src/components/project-card/ProjectCard.tsx
View file

@ -8,20 +8,20 @@ export default function ProjectCard(props: {info: ProjectCardProps}) {
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 className={"project-card-int pb-2 justify-content-center align-items-center d-flex flex-column"} 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)}}>
<h4 className={"font-weight-bold"}>{props.info.title}</h4>
<p className={"font-weight-lighter w-75"}>{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>