Carousels for mobile!
This commit is contained in:
parent
a71217d54b
commit
b99b1c4f74
|
|
@ -24,6 +24,7 @@
|
|||
"react-bootstrap": "^1.6.1",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-markdown": "^8.0.3",
|
||||
"react-responsive-carousel": "^3.2.23",
|
||||
"react-router-dom": "^6.3.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"react-slick": "^0.28.1",
|
||||
|
|
@ -32,6 +33,7 @@
|
|||
"react-tabs": "^3.2.2",
|
||||
"react-typing-animation": "^1.6.2",
|
||||
"remarkable": "^2.0.1",
|
||||
"style-loader": "^3.3.1",
|
||||
"typescript": "^4.1.2",
|
||||
"web-vitals": "^1.0.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
|
||||
@media only screen and (max-width: 768px) {
|
||||
.blog-card {
|
||||
margin-top: 100px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export default function Blogs() {
|
|||
|
||||
return (
|
||||
<div className={"child"}>
|
||||
<div className={"row"} style={{alignContent: "center", padding: 50}}>
|
||||
<div className={"row"} style={{alignContent: "center"}}>
|
||||
{AllBlogs.reverse().map((blog, i) => {
|
||||
blogId++;
|
||||
if(!blog.private) {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ export default function Footer() {
|
|||
return (
|
||||
<footer>
|
||||
<div style={{height: 12, marginTop: -50}}>
|
||||
<p style={{color: "grey"}} className={"m-0"}>Originally created by Nicholas Orlowsky - Licensed under GNU General Public License v3 - Original source available <a href={"https://github.com/nickorlow/personal-site"}>here</a></p>
|
||||
<p>Hosting provided by <a href={"https://nws.nickorlow.com"}>Nick Web Services (NWS)</a></p>
|
||||
<p style={{color: "grey"}} className={"m-0 small"}>Originally created by Nicholas Orlowsky - Licensed under GNU General Public License v3 - Original source available <a href={"https://github.com/nickorlow/personal-site"}>here</a></p>
|
||||
<p className={"small"}>Hosting provided by <a href={"https://nws.nickorlow.com"}>Nick Web Services (NWS)</a></p>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
import {AllHobbies} from "../../static/data/Hobbies";
|
||||
import InfoCard from "../info-card/InfoCard";
|
||||
import React from "react";
|
||||
import React, {useState} from "react";
|
||||
import {AllJobs} from "../../static/data/Jobs";
|
||||
import {Carousel} from "react-bootstrap";
|
||||
import JobCard from "../job-card/JobCard";
|
||||
|
||||
export default function Hobbies () {
|
||||
const [cur, setCur] = useState(1);
|
||||
return (
|
||||
<div className={"child"} style={{minHeight: "100vh"}}>
|
||||
<div style={{
|
||||
|
|
@ -10,13 +14,30 @@ export default function Hobbies () {
|
|||
justifyContent: "center",
|
||||
flexDirection: "column",
|
||||
width: "96vw",
|
||||
height: "100vh",
|
||||
minHeight: "100vh",
|
||||
alignContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<h1>Other Hobbies</h1>
|
||||
{AllHobbies.map((hobby) => <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
|
||||
info={hobby}/>)}
|
||||
<div className={"d-md-block d-none"}>
|
||||
<h1>Other Hobbies</h1>
|
||||
{AllHobbies.map((hobby) => <InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
|
||||
info={hobby}/>)}
|
||||
</div>
|
||||
|
||||
<div className={"align-content-center d-md-none"}>
|
||||
<h1 className={"mb-4"}>Other Hobbies</h1>
|
||||
<p>{cur}/{AllHobbies.length}</p>
|
||||
<Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
|
||||
{AllHobbies.map((hobby, i) =>
|
||||
<Carousel.Item>
|
||||
<InfoCard style={{textAlign: "left", maxWidth: "50vmax", margin: 50}}
|
||||
info={hobby}/>
|
||||
</Carousel.Item>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ import "./JobCard.css";
|
|||
|
||||
export default function JobCard(props: {style?: any, className?: string, job: Job}){
|
||||
return (
|
||||
<ScrollAnimation className={"job-card "+(props.className || "")} style={props.style} animateIn="fade-up" duration={2} animateOnce={true} offset={50} delay={200}>
|
||||
<ScrollAnimation className={"job-card "+(props.className || "")} style={props.style} animateIn={"no-fade-up"} initiallyVisible={true} duration={2} animateOnce={true} offset={50} delay={200}>
|
||||
<div className={"row"} style={{paddingTop: 40}}>
|
||||
<div className={"col-md-4"}>
|
||||
<img className={"float-left float-md-none"} alt={props.job.company+" company logo"} src={props.job.image} style={{paddingLeft: 20, objectFit: "contain" ,height: "auto", maxWidth: 300}}/>
|
||||
<img className={"float-left float-md-none"} alt={props.job.company+" company logo"} src={props.job.image} style={{objectFit: "contain" ,height: "auto", width: "300px", maxWidth: '100%'}}/>
|
||||
</div>
|
||||
<div className={"col-md-8 row"}>
|
||||
<div className={"col-md-6 text-left"}>
|
||||
|
|
@ -17,9 +17,9 @@ export default function JobCard(props: {style?: any, className?: string, job: Jo
|
|||
{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"}>
|
||||
<div className={"col-md-6 text-left"}>
|
||||
{props.job.items.map((s) => <li>{s}</li>)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollAnimation>
|
||||
|
|
|
|||
|
|
@ -1,15 +1,30 @@
|
|||
import {AllJobs} from "../../static/data/Jobs";
|
||||
import JobCard from "../job-card/JobCard";
|
||||
import React from "react";
|
||||
import React, {useState} from "react";
|
||||
import "./Jobs.css";
|
||||
import {Carousel} from "react-bootstrap";
|
||||
|
||||
|
||||
export default function Jobs() {
|
||||
const [cur, setCur] = useState(1);
|
||||
return (
|
||||
<div className={"child"} style={{minHeight: "100vh"}}>
|
||||
<div style={{alignContent: "center", padding: 50}}>
|
||||
<div className={"align-content-center d-md-block d-none"}>
|
||||
<h1 style={{marginBottom: 40}}>Work</h1>
|
||||
{AllJobs.map((job, i) =><JobCard job={job}/>)}
|
||||
</div>
|
||||
<div className={"align-content-center d-md-none"}>
|
||||
<h1 className={"mb-4"}>Work</h1>
|
||||
<p>{cur}/{AllJobs.length}</p>
|
||||
<Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
|
||||
{AllJobs.map((job, i) =>
|
||||
<Carousel.Item>
|
||||
<JobCard job={job}/>
|
||||
</Carousel.Item>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
import {AllProjects} from "../../static/data/Projects";
|
||||
import InfoCard from "../info-card/InfoCard";
|
||||
import React from "react";
|
||||
import React, {useState} from "react";
|
||||
import {AllHobbies} from "../../static/data/Hobbies";
|
||||
import {Carousel} from "react-bootstrap";
|
||||
|
||||
export default function Projects() {
|
||||
const [cur, setCur] = useState(1);
|
||||
return (
|
||||
<div className={"child"} style={{minHeight: "100vh"}}>
|
||||
|
||||
|
|
@ -15,14 +18,29 @@ export default function Projects() {
|
|||
alignContent: "center",
|
||||
alignItems: "center"
|
||||
}}>
|
||||
<h1>Projects</h1>
|
||||
<p>(writing code is my biggest hobby)</p>
|
||||
<div className={"row m-0"} style={{justifyContent: "center", padding: 20}}>
|
||||
{AllProjects.map((project) => <InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
|
||||
info={project}/>)}
|
||||
</div>
|
||||
<a href={"https://github.com/nickorlow"}>More on GitHub</a>
|
||||
|
||||
<div className={"align-content-center d-md-block d-none"}>
|
||||
<h1>Projects</h1>
|
||||
<p>(writing code is my biggest hobby)</p>
|
||||
<div className={"row m-0"} style={{justifyContent: "center", padding: 20}}>
|
||||
{AllProjects.map((project) => <InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
|
||||
info={project}/>)}
|
||||
</div>
|
||||
<a href={"https://github.com/nickorlow"}>More on GitHub</a>
|
||||
</div>
|
||||
<div className={"align-content-center d-md-none"}>
|
||||
<h1 className={"mb-4"}>Projects</h1>
|
||||
<p>{cur}/{AllProjects.length}</p>
|
||||
<Carousel controls={false} interval={null} onSlide={(e)=>{setCur(e+1)}} indicators={false} wrap={false}>
|
||||
{AllProjects.map((project, i) =>
|
||||
<Carousel.Item>
|
||||
<InfoCard className={"col-md-6"} style={{textAlign: "left",marginTop: 35, paddingLeft: 20, paddingRight: 20}}
|
||||
info={project}/>
|
||||
</Carousel.Item>
|
||||
)}
|
||||
</Carousel>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
Loading…
Reference in a new issue