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

✨ feat: add light theme

Browse Source 
can be accessed using the theme query param
(eg `?theme=system`)
This commit is contained in:
m-tartari
2025-06-16 17:45:40 +02:00
committed by Michele Tartari
parent ca98e66206
commit e0c7314313
4 changed files with 111 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/molecules/Hero/Hero.tsx
+43 -6
View File
@@ -7,28 +7,52 @@ import { EmailIconLink, GitHubIconLink, LinkedInIconLink } from 'components/atom
const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) => {
return (
<Box
sx={{
sx={theme => ({
position: 'relative',
minHeight: '100vh',
boxShadow: '0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25)',
backgroundImage: 'url("images/banner-blur.webp")',
backgroundImage: 'url("images/banner.webp")',
backgroundPosition: 'center center',
backgroundAttachment: { xs: 'scroll !important', md: 'fixed' },
backgroundSize: 'cover',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
wrap: 'wrap',
}}>
...(theme.palette.mode === 'dark' && {
backgroundImage: 'url("images/banner-blur.webp")',
}),
...(theme.palette.mode === 'light' && {
backgroundImage: 'url("images/banner.webp")',
'&::before': {
content: '""',
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 0,
backgroundImage: 'inherit',
backgroundPosition: 'center center',
backgroundAttachment: 'inherit',
backgroundSize: 'cover',
filter: 'blur(5px)',
},
}),
})}>
<Box
color="white"
sx={theme => ({
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
gap: '3em',
zIndex: 1,
[theme.breakpoints.down('md')]: {
flexDirection: 'column',
@@ -50,13 +74,19 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
variant="h6"
color="text.secondary"
sx={{
color: t => (t.palette.mode === 'light' ? 'inherit' : 'text.secondary'),
margin: '0.5em 0 0 0',
pt: 1,
}}>
Discover some of my works below.
<br /> Send a message to get in touch.
</Typography>
<Stack direction="row" gap={2} mt={2} justifyContent={{ xs: 'center', md: 'end' }} color="text.secondary">
<Stack
direction="row"
gap={2}
mt={2}
justifyContent={{ xs: 'center', md: 'end' }}
color={t => (t.palette.mode === 'light' ? 'inherit' : 'text.secondary')}>
<LinkedInIconLink fontSize="large" href="https://www.linkedin.com/in/m-tartari/" />
<GitHubIconLink fontSize="large" href="https://www.github.com/m-tartari/" />
<EmailIconLink fontSize="large" href="mailto:info@m-tartari.eu" />
@@ -78,7 +108,14 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
<IconButton
size="large"
onClick={() => (props.scrollTarget as React.RefObject<HTMLElement | null>).current?.scrollIntoView()}
sx={{ position: 'absolute', p: 1, bottom: 2, left: '50%', transform: 'translate(-50%, 0)' }}>
sx={{
position: 'absolute',
p: 1,
bottom: 2,
left: '50%',
transform: 'translate(-50%, 0)',
color: t => (t.palette.mode === 'light' ? 'white' : 'text.primary'),
}}>
<ExpandMore fontSize="large" />
</IconButton>
)}
src/components/molecules/Toolbar/index.tsx
+31 -11
View File
@@ -26,7 +26,9 @@ const AppBarButton = styled(Button<typeof RouterLink>)(({ theme }) => ({
color: 'inherit',
':hover': {
backgroundColor: 'transparent',
color: theme.palette.primary.main,
...(theme.palette.mode === 'dark' && {
color: theme.palette.primary.main,
}),
},
}))
const DrawerButton = styled(ListItemButton<typeof RouterLink>)(({ theme }) => ({
@@ -57,7 +59,13 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ drawerWidth = 240, window
}
const drawer = (
<Box onClick={handleDrawerToggle} sx={{ textAlign: 'center' }}>
<Box
onClick={handleDrawerToggle}
sx={theme => ({
height: '100%',
textAlign: 'center',
...(theme.palette.mode === 'light' && { backgroundColor: 'background.default' }),
})}>
<Typography variant="h6" sx={{ my: 2 }}>
Michele Tartari
</Typography>
@@ -90,10 +98,14 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ drawerWidth = 240, window
return (
<>
<AppBar
elevation={0}
elevation={theme.palette.mode === 'light' ? 1 : 0}
{...props}
sx={{
backgroundColor: trigger ? (theme.palette.mode === 'dark' ? 'background.paper' : undefined) : 'transparent',
backgroundColor: trigger ? 'background.paper' : 'transparent',
...(theme.palette.mode === 'light' && {
backgroundColor: 'hsla(0, 0%, 100%, 0.75)',
backdropFilter: 'blur(8px)',
}),
...props.sx,
}}>
<Toolbar
@@ -122,17 +134,25 @@ const CustomToolbar: React.FC<CustomToolbarProps> = ({ drawerWidth = 240, window
mr: 'auto',
},
})}>
<Typography variant="h6"> Michele Tartari</Typography>
<Typography variant="h6" color="text.primary">
Michele Tartari
</Typography>
</AppBarButton>
<Stack component="div" direction="row" spacing={2} sx={{ display: { xs: 'none', md: 'flex' } }}>
<AppBarButton component={RouterLink} to="/">
<Typography variant="h6">Home</Typography>
<AppBarButton component={RouterLink} to="/" disableRipple>
<Typography color={theme.palette.mode === 'dark' ? 'inherit' : 'text.secondary'} variant="h6">
Home
</Typography>
</AppBarButton>
<AppBarButton component={RouterLink} to="/projects">
<Typography variant="h6">Projects</Typography>
<AppBarButton component={RouterLink} to="/projects" disableRipple>
<Typography color={theme.palette.mode === 'dark' ? 'inherit' : 'text.secondary'} variant="h6">
Projects
</Typography>
</AppBarButton>
<AppBarButton component={RouterLink} to="/curriculum">
<Typography variant="h6">Curriculum</Typography>
<AppBarButton component={RouterLink} to="/curriculum" disableRipple>
<Typography color={theme.palette.mode === 'dark' ? 'inherit' : 'text.secondary'} variant="h6">
Curriculum
</Typography>
</AppBarButton>
<Button
component={RouterLink}