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

Carousels for mobile!

Browse source
This commit is contained in:
Nicholas Orlowsky 2022-07-29 00:42:23 -05:00
parent a71217d54b
commit b99b1c4f74
No known key found for this signature in database
GPG key ID: 3845F78A73B14100
8 changed files with 78 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/projects/Projects.tsx
View file

@ -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>
)