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

job changes

Browse source
This commit is contained in:
Nicholas Orlowsky 2021-10-19 15:40:52 -05:00
parent e0b947da0e
commit 6ecf830639
12 changed files with 183 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/job-card/JobCard.css
View file

@ -1,9 +1,3 @@
@media only screen and (min-width: 993px) {
.center-card {
border-left: .5px rgba(255,255,255,.25) solid;
border-right: .5px rgba(255,255,255,.25) solid;
}
}
@media only screen and (max-width: 768px) {

26
src/components/job-card/JobCard.tsx
View file

@ -3,18 +3,22 @@ import React from "react";
import Job from "../../types/Job";
import "./JobCard.css";
export default function JobCard(props: {style?: any, className?: string, job: Job, isCenter: boolean}){
export default function JobCard(props: {style?: any, className?: string, job: Job}){
return (
<ScrollAnimation className={"job-card "+(props.isCenter ? "center-card " : "")+(props.className || "")} style={props.style} animateIn="fade-up" duration={2} animateOnce={true} offset={50} delay={200}>
<div style={{padding: 20}}>
<img alt={props.job.company+" company logo"} src={props.job.image} style={{maxHeight: 70, padding: 10,width: "auto", maxWidth: "100%"}}/>
<h2>{props.job.title}</h2>
{props.job.uri == null && <h5>{props.job.company}</h5>}
{props.job.uri != null && <a href={props.job.uri}><h5>{props.job.company}</h5></a>}
<p>{props.job.timespan}</p>
<ul>
{props.job.items.map((s) => <li>{s}</li>)}
</ul>
<ScrollAnimation className={"job-card "+(props.className || "")} style={props.style} animateIn="fade-up" duration={2} animateOnce={true} offset={50} delay={200}>
<div className={"row"} style={{padding: 20}}>
<img className={"col-md-4"} alt={props.job.company+" company logo"} src={props.job.image} style={{objectFit: "contain" ,maxHeight: 70, padding: 10,width: "auto", maxWidth: "100%"}}/>
<div className={"col-md-8 row"}>
<div className={"col-md-6 text-left"}>
<h2>{props.job.title}</h2>
{props.job.uri == null && <h5>{props.job.company}</h5>}
{props.job.uri != null && <a href={props.job.uri}><h5>{props.job.company}</h5></a>}
<p>{props.job.timespan}</p>
</div>
<ul className={"col-md-6 text-left"}>
{props.job.items.map((s) => <li>{s}</li>)}
</ul>
</div>
</div>
</ScrollAnimation>
);