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

29
src/components/hobbies/Hobbies.tsx
View file

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