48 lines
2.1 KiB
TypeScript
48 lines
2.1 KiB
TypeScript
import {AllProjects} from "../../static/data/Projects";
|
|
import InfoCard from "../info-card/InfoCard";
|
|
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"}}>
|
|
|
|
<div style={{
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
flexDirection: "column",
|
|
width: "100vw",
|
|
minHeight: "100vh",
|
|
alignContent: "center",
|
|
alignItems: "center"
|
|
}}>
|
|
|
|
<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>
|
|
)
|
|
}
|