91 lines
2.6 KiB
JavaScript
91 lines
2.6 KiB
JavaScript
// views/MainView.jsx
|
|
import React from "react";
|
|
import { Typography, Button, Flex, Space } from "antd";
|
|
import { ReactComponent as LogoHorizontal } from "./logo-horizontal.svg";
|
|
import { ReactComponent as LogoVertical } from "./logo-vertical.svg";
|
|
import { useMediaQuery } from "react-responsive";
|
|
|
|
const { Paragraph } = Typography;
|
|
|
|
const MainView = ({ setCurrentView }) => {
|
|
const isMobile = useMediaQuery({ maxWidth: 600 });
|
|
return (
|
|
<Flex
|
|
justify="center"
|
|
align={isMobile ? "flex-start" : "center"}
|
|
vertical
|
|
style={{ height: "100%", padding: "24px 50px" }}
|
|
>
|
|
<div style={{ textAlign: "center", maxWidth: "800px", margin: "0 0" }}>
|
|
<div className={"tblogo"}>
|
|
{isMobile ? (
|
|
<LogoVertical height={180} />
|
|
) : (
|
|
<LogoHorizontal height={60} />
|
|
)}
|
|
</div>
|
|
{isMobile ? (
|
|
<Flex
|
|
justify="left"
|
|
align="left"
|
|
vertical
|
|
style={{ marginTop: "12.5px" }}
|
|
>
|
|
<Button
|
|
className="tbmobilenav"
|
|
style={{ textAlign: "left" }}
|
|
onClick={() => setCurrentView("experience")}
|
|
>
|
|
Experience
|
|
</Button>
|
|
<Button
|
|
className="tbmobilenav"
|
|
style={{ textAlign: "left" }}
|
|
onClick={() => setCurrentView("blogs")}
|
|
>
|
|
Blog
|
|
</Button>
|
|
<Button
|
|
className="tbmobilenav"
|
|
style={{ textAlign: "left" }}
|
|
onClick={() => setCurrentView("cv")}
|
|
>
|
|
CV
|
|
</Button>
|
|
<Button
|
|
className="tbmobilenav"
|
|
style={{ textAlign: "left" }}
|
|
onClick={() => setCurrentView("contact")}
|
|
>
|
|
Contact
|
|
</Button>
|
|
</Flex>
|
|
) : (
|
|
<Flex justify="center" align="center">
|
|
<Button
|
|
className={"tbnav"}
|
|
onClick={() => setCurrentView("experience")}
|
|
>
|
|
Experience
|
|
</Button>
|
|
<Button className={"tbnav"} onClick={() => setCurrentView("blogs")}>
|
|
Blog
|
|
</Button>
|
|
<Button className={"tbnav"} onClick={() => setCurrentView("cv")}>
|
|
CV
|
|
</Button>
|
|
<Button
|
|
className={"tbnav"}
|
|
onClick={() => setCurrentView("contact")}
|
|
>
|
|
Contact
|
|
</Button>
|
|
</Flex>
|
|
)}
|
|
</div>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default MainView;
|