casl/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #406 from m-tartari/refactor/main_page/cleanup_style

Browse Source 
♻️ refactor: cleanup MainPage styling
This commit is contained in:
Michele Tartari
2025-03-13 11:18:21 +01:00
committed by GitHub
parent bc8aac8ce3 4f8beda486
commit 8335e39318
5 changed files with 47 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/molecules/CurriculumItem/CurriculumItem.tsx
+6 -6
View File
@@ -1,5 +1,5 @@
import React from 'react' import React from 'react'
import { Accordion, AccordionDetails, AccordionSummary, Box, Grid, Typography } from '@mui/material' import { Accordion, AccordionDetails, AccordionSummary, Box, Grid2 as Grid, Typography } from '@mui/material'
import { ExpandMore as ExpandIcon } from '@mui/icons-material' import { ExpandMore as ExpandIcon } from '@mui/icons-material'
interface CurriculumEntryProps { interface CurriculumEntryProps {
@@ -53,20 +53,20 @@ const CurriculumItem = (props: CurriculumEntryProps) => {
marginLeft: 2, marginLeft: 2,
}, },
}}> }}>
<Grid container direction="row" justifyContent="space-between" alignItems="stretch" display={{ xs: 'none', sm: 'flex' }}> <Grid container width={1} direction="row" justifyContent="space-between" alignItems="stretch" display={{ xs: 'none', sm: 'flex' }}>
<Grid item xs={9} component={Typography} variant="h6"> <Grid component={Typography} size={9} variant="h6">
<b>{props.title}</b> <b>{props.title}</b>
</Grid> </Grid>
<Grid item xs={3} component={Typography} variant="h6" color="primary.main" textAlign="right"> <Grid component={Typography} size={3} variant="h6" color="primary.main" textAlign="right">
{props.dates} {props.dates}
</Grid> </Grid>
{typeof props.company !== 'undefined' && ( {typeof props.company !== 'undefined' && (
<Grid item xs={9} component={Typography} variant="overline" color="text.secondary"> <Grid component={Typography} size={9} variant="overline" color="text.secondary">
{props.company} {props.company}
</Grid> </Grid>
)} )}
{typeof props.location !== 'undefined' && ( {typeof props.location !== 'undefined' && (
<Grid item xs={3} component={Typography} variant="subtitle1" color="text.secondary" textAlign="right"> <Grid component={Typography} size={3} variant="subtitle1" color="text.secondary" textAlign="right">
<em>{props.location}</em> <em>{props.location}</em>
</Grid> </Grid>
)} )}
src/components/molecules/Hero/Hero.tsx
+14 -7
View File
@@ -24,18 +24,25 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
wrap: 'wrap', wrap: 'wrap',
}}> }}>
<Box <Box
sx={{ sx={theme => ({
maxWidth: '95%', maxWidth: '95%',
marginRight: '1%', marginRight: '1%',
padding: { xs: '3em', md: '6em' },
textAlign: { xs: 'center', md: 'right' },
display: 'flex', display: 'flex',
flexDirection: { xs: 'column', md: 'row' },
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
gap: '3em', gap: '3em',
}}>
[theme.breakpoints.down('sm')]: {
flexDirection: 'column',
textAlign: 'center',
padding: '3em',
},
[theme.breakpoints.up('sm')]: {
flexDirection: 'row',
textAlign: 'right',
padding: '6em',
},
})}>
<Box> <Box>
{/* {/*
<h2>Michele Tartari</h2> <h2>Michele Tartari</h2>
@@ -77,7 +84,7 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
<IconButton <IconButton
size="large" size="large"
onClick={() => (props.scrollTarget as React.MutableRefObject<HTMLSelectElement | null>).current?.scrollIntoView()} onClick={() => (props.scrollTarget as React.MutableRefObject<HTMLSelectElement | null>).current?.scrollIntoView()}
sx={{ position: 'absolute', p: 1, bottom: 3 }}> sx={{ display: { xs: 'none', md: 'block' }, position: 'absolute', p: 1, bottom: 3 }}>
<ExpandMore fontSize="large" /> <ExpandMore fontSize="large" />
</IconButton> </IconButton>
)} )}
src/components/molecules/ProjectSpotlight/ProjectSpotlight.tsx
+25 -37
View File
@@ -1,8 +1,9 @@
import React from 'react' import React from 'react'
import { ParallaxBanner, ParallaxProvider } from 'react-scroll-parallax' import { ParallaxBanner, ParallaxProvider } from 'react-scroll-parallax'
import { Box, Grid, IconButton, Typography, useTheme } from '@mui/material' import { Box, Grid2 as Grid, IconButton, Typography, useTheme } from '@mui/material'
import { ExpandMore } from '@mui/icons-material' import { ExpandMore } from '@mui/icons-material'
import { useViewport } from '../../utils/viewport'
import { useViewport } from 'components/utils/viewport/index.js'
type AnchorType = 'left' | 'top' | 'right' | 'bottom' type AnchorType = 'left' | 'top' | 'right' | 'bottom'
@@ -18,13 +19,11 @@ type Props = {
} }
const Description = (props: Props) => { const Description = (props: Props) => {
const theme = useTheme()
switch (props.anchor) { switch (props.anchor) {
case 'bottom': case 'bottom':
return ( return (
<Box <Box
sx={{ sx={theme => ({
width: '100%', width: '100%',
display: 'flex', display: 'flex',
alignItems: 'center', alignItems: 'center',
@@ -39,13 +38,13 @@ const Description = (props: Props) => {
borderTopWidth: theme.spacing(0.5), borderTopWidth: theme.spacing(0.5),
borderTopColor: theme.palette.primary.main, borderTopColor: theme.palette.primary.main,
p: `${theme.spacing(7)} ${theme.spacing(5)} ${theme.spacing(5.5)} ${theme.spacing(5)}`, p: `${theme.spacing(7)} ${theme.spacing(5)} ${theme.spacing(5.5)} ${theme.spacing(5)}`,
}}> })}>
<Grid container spacing={2} maxWidth="xl"> <Grid container spacing={2} maxWidth="xl">
<Grid item xs={12} md={4}> <Grid size={4}>
<Typography variant="h4">{props.title}</Typography> <Typography variant="h4">{props.title}</Typography>
{props.caption} {props.caption}
</Grid> </Grid>
<Grid item component={Typography} xs={12} md={8}> <Grid component={Typography} size={8}>
{props.children} {props.children}
</Grid> </Grid>
</Grid> </Grid>
@@ -54,7 +53,7 @@ const Description = (props: Props) => {
case 'top': case 'top':
return ( return (
<Box <Box
sx={{ sx={theme => ({
display: 'flex', display: 'flex',
position: 'absolute', position: 'absolute',
bgcolor: 'background.default', bgcolor: 'background.default',
@@ -67,13 +66,13 @@ const Description = (props: Props) => {
borderBottomColor: theme.palette.primary.main, borderBottomColor: theme.palette.primary.main,
p: `${theme.spacing(5)} ${theme.spacing(5)} ${theme.spacing(3)} ${theme.spacing(5)}`, p: `${theme.spacing(5)} ${theme.spacing(5)} ${theme.spacing(3)} ${theme.spacing(5)}`,
// p: '5.1em 3.1em 3.1em 3.1em', // p: '5.1em 3.1em 3.1em 3.1em',
}}> })}>
<Grid container spacing={2} maxWidth="xl"> <Grid container spacing={2} maxWidth="xl">
<Grid item xs={12} md={4}> <Grid size={4}>
<Typography variant="h4">{props.title}</Typography> <Typography variant="h4">{props.title}</Typography>
{props.caption} {props.caption}
</Grid> </Grid>
<Grid item component={Typography} xs={12} md={8}> <Grid component={Typography} size={8}>
{props.children} {props.children}
</Grid> </Grid>
</Grid> </Grid>
@@ -82,7 +81,7 @@ const Description = (props: Props) => {
case 'right': case 'right':
return ( return (
<Box <Box
sx={{ sx={theme => ({
height: '102%', height: '102%',
width: '28em', width: '28em',
position: 'absolute', position: 'absolute',
@@ -93,9 +92,9 @@ const Description = (props: Props) => {
// borderLeftWidth: '0.35em', // borderLeftWidth: '0.35em',
borderLeftStyle: 'solid', borderLeftStyle: 'solid',
borderLeftColor: theme.palette.primary.main, borderLeftColor: theme.palette.primary.main,
p: `${theme.spacing(3)} ${theme.spacing(5)} ${theme.spacing(5)} ${theme.spacing(5)}`, p: `${theme.spacing(10)} ${theme.spacing(5)} ${theme.spacing(5)} ${theme.spacing(5)}`,
// p: '5.1em 3.1em 3.1em 3.1em', // p: '5.1em 3.1em 3.1em 3.1em',
}}> })}>
<Typography variant="h4">{props.title}</Typography> <Typography variant="h4">{props.title}</Typography>
{props.caption} {props.caption}
<Typography mt={3}>{props.children}</Typography> <Typography mt={3}>{props.children}</Typography>
@@ -104,7 +103,7 @@ const Description = (props: Props) => {
case 'left': case 'left':
return ( return (
<Box <Box
sx={{ sx={theme => ({
height: '102%', height: '102%',
width: '28em', width: '28em',
position: 'absolute', position: 'absolute',
@@ -115,9 +114,9 @@ const Description = (props: Props) => {
// borderLeftWidth: '0.35em', // borderLeftWidth: '0.35em',
borderRightStyle: 'solid', borderRightStyle: 'solid',
borderRightColor: theme.palette.primary.main, borderRightColor: theme.palette.primary.main,
p: `${theme.spacing(3)} ${theme.spacing(5)} ${theme.spacing(5)} ${theme.spacing(5)}`, p: `${theme.spacing(10)} ${theme.spacing(5)} ${theme.spacing(5)} ${theme.spacing(5)}`,
// p: '5.1em 3.1em 3.1em 3.1em', // p: '5.1em 3.1em 3.1em 3.1em',
}}> })}>
<Typography variant="h4">{props.title}</Typography> <Typography variant="h4">{props.title}</Typography>
{props.caption} {props.caption}
<Typography mt={3}>{props.children}</Typography> <Typography mt={3}>{props.children}</Typography>
@@ -166,9 +165,8 @@ const DesktopComponent = React.forwardRef<HTMLSelectElement, Props>((props, ref)
}) })
const MobileComponent = React.forwardRef<HTMLSelectElement, Props>((props, ref) => { const MobileComponent = React.forwardRef<HTMLSelectElement, Props>((props, ref) => {
const theme = useTheme()
return ( return (
<> <Box component="section">
<Box <Box
ref={ref} ref={ref}
component="img" component="img"
@@ -180,28 +178,18 @@ const MobileComponent = React.forwardRef<HTMLSelectElement, Props>((props, ref)
src={props.mobileImage ?? props.image} src={props.mobileImage ?? props.image}
/> />
<Box <Box
sx={{ sx={theme => ({
width: '100%', mt: theme.spacing(-1.05),
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderTopStyle: 'solid', borderTopStyle: 'solid',
borderTopWidth: theme.spacing(0.5), borderTopWidth: theme.spacing(0.5),
borderTopColor: theme.palette.primary.main, borderTopColor: theme.palette.primary.main,
p: `${theme.spacing(7)} ${theme.spacing(5)} ${theme.spacing(5.5)} ${theme.spacing(5)}`, p: `${theme.spacing(7)} ${theme.spacing(5)} ${theme.spacing(5.5)} ${theme.spacing(5)}`,
}}> })}>
<Grid container spacing={2} maxWidth="xl"> <Typography variant="h4">{props.title}</Typography>
<Grid item xs={12} md={4}> {props.caption}
<Typography variant="h4">{props.title}</Typography> <Typography pt={1}>{props.children}</Typography>
{props.caption}
</Grid>
<Grid item component={Typography} xs={12} md={8}>
{props.children}
</Grid>
</Grid>
</Box> </Box>
</> </Box>
) )
}) })
src/components/pages/MainPage/MainPage.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ const MainPage = () => {
return ( return (
<ViewportProvider> <ViewportProvider>
<Box aria-label="page" sx={{ flexGrow: 1 }}> <Box aria-label="page" sx={{ flexGrow: 1 }}>
<Toolbar position="absolute" sx={{ backgroundColor: 'transparent' }} /> <Toolbar />
<Hero scrollTarget={refIITLinfa} /> <Hero scrollTarget={refIITLinfa} />
{/* 1 IIT - Linfa */} {/* 1 IIT - Linfa */}
<ProjectSpotlight <ProjectSpotlight
src/components/templates/Page/Page.tsx
+1 -3
View File
@@ -51,12 +51,10 @@ const Page: React.FC<BoxProps> = ({ title, children, ...props }) => {
mb: 4, mb: 4,
minHeight: '80vh', minHeight: '80vh',
mx: 'auto', mx: 'auto',
maxWidth: 'calc(100% - 4em)', maxWidth: { xs: '100%', md: 'calc(100% - 4em)' },
width: '70em', width: '70em',
...props.sx, ...props.sx,
}}> }}>
{/* Children is included in props */}
{children} {children}
</Container> </Container>
<Footer /> <Footer />