110 lines
3.2 KiB
JavaScript
110 lines
3.2 KiB
JavaScript
import { FaReact, FaPython, FaJava } from "react-icons/fa";
|
|
import { SiKubernetes } from "react-icons/si";
|
|
import Accordion from "@mui/material/Accordion";
|
|
import AccordionSummary from "@mui/material/AccordionSummary";
|
|
import AccordionDetails from "@mui/material/AccordionDetails";
|
|
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
|
import Box from "@mui/material/Box";
|
|
|
|
export default function Projects() {
|
|
return (
|
|
<Box style={{ padding: 10 }}>
|
|
<Accordion
|
|
style={{ boxShadow: "none", margin: 0 }}
|
|
defaultExpanded
|
|
disableGutters
|
|
square
|
|
>
|
|
<AccordionSummary
|
|
content={{ margin: 0 }}
|
|
expandIcon={<ExpandMoreIcon />}
|
|
style={{ margin: 0 }}
|
|
>
|
|
<h3>Projects</h3>
|
|
</AccordionSummary>
|
|
<AccordionDetails>
|
|
<Box
|
|
className="top-projects"
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
margin: "auto",
|
|
flexWrap: "wrap",
|
|
}}
|
|
>
|
|
<Box style={{ flex: 1, padding: "0 10px" }}>
|
|
<div style={{ display: "inline-flex" }}>
|
|
<h3>React</h3>
|
|
<FaReact
|
|
style={{
|
|
margin: "auto",
|
|
marginLeft: 10,
|
|
width: 20,
|
|
height: 20,
|
|
}}
|
|
/>
|
|
</div>
|
|
<p>Khufu</p>
|
|
<p>Qualiteer</p>
|
|
</Box>
|
|
<Box style={{ flex: 1, padding: "0 10px" }}>
|
|
<div style={{ display: "inline-flex" }}>
|
|
<h3>Kubernetes</h3>
|
|
<SiKubernetes
|
|
style={{
|
|
margin: "auto",
|
|
marginLeft: 10,
|
|
width: 20,
|
|
height: 20,
|
|
}}
|
|
/>
|
|
</div>
|
|
<p>Oasis</p>
|
|
<p>Garden</p>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
className="top-projects"
|
|
style={{
|
|
display: "flex",
|
|
flex: 1,
|
|
margin: "auto",
|
|
flexWrap: "wrap",
|
|
}}
|
|
>
|
|
<Box style={{ flex: 1, padding: "0 10px" }}>
|
|
<div style={{ display: "inline-flex" }}>
|
|
<h3>Python</h3>
|
|
<FaPython
|
|
style={{
|
|
margin: "auto",
|
|
marginLeft: 10,
|
|
width: 20,
|
|
height: 20,
|
|
}}
|
|
/>
|
|
</div>
|
|
<p>Reed</p>
|
|
<p>TODO</p>
|
|
</Box>
|
|
<Box style={{ flex: 1, padding: "0 10px" }}>
|
|
<div style={{ display: "inline-flex" }}>
|
|
<h3>Java</h3>
|
|
<FaJava
|
|
style={{
|
|
margin: "auto",
|
|
marginLeft: 10,
|
|
width: 20,
|
|
height: 20,
|
|
}}
|
|
/>
|
|
</div>
|
|
<p>Dunemasking</p>
|
|
<p>JavaFX</p>
|
|
</Box>
|
|
</Box>
|
|
</AccordionDetails>
|
|
</Accordion>
|
|
</Box>
|
|
);
|
|
}
|