Skip to content

Commit

Permalink
Resizing blocks for mobile
Browse files Browse the repository at this point in the history 
Signed-off-by: FordoA455 <[email protected]>
  • Loading branch information
@FordoA455
FordoA455 committed Dec 3, 2024
1 parent 523a208 commit 534aec0
Show file tree
Hide file tree
Showing 2 changed files with 132 additions and 59 deletions.
189 changes: 131 additions & 58 deletions src/components/InfoPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,138 @@ import "../App.css";
import Typography from '@mui/joy/Typography';
import Card from '@mui/joy/Card';
import CardContent from '@mui/joy/CardContent';
import React from 'react';
import React, {useState, useEffect} from 'react';

export default function InfoPage() {
const [isMobile, setIsMobile] = useState<Boolean>(false);

useEffect(() => {
const handleResize = () => {
setIsMobile(window.innerWidth < 830); // Adjust the breakpoint as needed
};

window.addEventListener('resize', handleResize);
handleResize(); // Initial check on component mount

return () => {
window.removeEventListener('resize', handleResize);
};
}, []);
return (
<div style={{marginTop: "100px"}}>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
width: "50%",
backgroundColor: "black"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
<Typography textColor={"common.white"}>MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
width: "50%",
marginLeft: "48%",
marginTop: "100px",
backgroundColor: "black"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
<Typography textColor={"common.white"}>With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
marginTop: "100px",
width: "50%",
backgroundColor: "black"
}}
>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
<Typography textColor={"common.white"}>The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
</CardContent>
</Card>
</div>);
<div>
{!isMobile && (<div style={{marginTop: "100px"}}>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
width: "50%",
backgroundColor: "black"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Where Boundaries Fade and Ideas Flourish</Typography>
<Typography textColor={"common.white"}>MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
width: "50%",
marginLeft: "48%",
marginTop: "100px",
backgroundColor: "black"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Workshops and advice to help you grow</Typography>
<Typography textColor={"common.white"}>With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
marginTop: "100px",
width: "50%",
backgroundColor: "black"
}}
>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h2">Real world collaboration and innovation</Typography>
<Typography textColor={"common.white"}>The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
</CardContent>
</Card>
</div>)}
{isMobile && (<div style={{marginTop: "100px"}}>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
backgroundColor: "black",
padding: "5%"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h4">Where Boundaries Fade and Ideas Flourish</Typography>
<Typography textColor={"common.white"} level="body-md">MVHacks is proud to give a platform for aspiring tech enthusiasts to grow and learn by making unique projects that progress society.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
marginTop: "50px",
backgroundColor: "black",
padding: "5%"
}}>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h4">Workshops and advice to help you grow</Typography>
<Typography textColor={"common.white"} level="body-md">With specialized judges that are currently in the tech industry, at MVHacks you'll receive the best feedback to help you improve.</Typography>
</CardContent>
</Card>
<Card
orientation="horizontal"
size="md"
variant="outlined"
sx={{
"--Card-padding": "16px",
"--Card-radius": "26px",
display: "flex",
flexDirection: "column",
marginTop: "50px",
backgroundColor: "black",
padding: "5%"
}}
>
<CardContent sx={{alignItems: "center"}}>
<Typography textColor={"#c8acd4"} level="h4">Real world collaboration and innovation</Typography>
<Typography textColor={"common.white"} level="body-md">The MVHacks schedule is currently in development, but expect team-building exercises, workshops, and challenges!</Typography>
</CardContent>
</Card>
</div>)}
</div>
);
}
2 changes: 1 addition & 1 deletion src/components/Navbar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export default function Navbar({ onOptionSelect }: any) {
return (
<div style={{width: "100%", backgroundColor: "black", zIndex: "10"}}>
<div style={{display: "flex", marginLeft: "11%", marginTop: "3%"}}>
<img src={logo} alt="mvhackslogo" width="60" height="60" />
<img src={logo} alt="mvhackslogo" width="60" height="60" style={{marginLeft: "10px"}} />
<Link overlay underline="none" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start'}} onClick = {() => onOptionSelect('home')}>
<Typography sx={{color: "white", paddingLeft: "10%"}} level="h2">MV</Typography>
<Typography sx={{color: "white", paddingLeft: "10%"}} level="h2" noWrap={true}>HACKS 8.0</Typography>
Expand Down

0 comments on commit 534aec0

Please sign in to comment.