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

🐛 fix: uniform headers across pages

Browse Source
This commit is contained in:
m-tartari
2025-06-16 13:36:02 +00:00
parent 1c4233573c
commit 428c908651
7 changed files with 81 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/atoms/SectionHeader/index.tsx
+6
View File
@@ -0,0 +1,6 @@
import { Typography, TypographyProps } from '@mui/material'
import { FC } from 'react'
const Header: FC<TypographyProps> = props => <Typography variant="h4" color="primary.main" component="h2" gutterBottom {...props} />
export default Header
src/components/atoms/SectionSubheader/index.tsx
+6
View File
@@ -0,0 +1,6 @@
import { Typography, TypographyProps } from '@mui/material'
import { FC } from 'react'
const Subheader: FC<TypographyProps> = props => <Typography variant="h5" component="h3" fontFamily="Oswald, sans-serif" gutterBottom {...props} />
export default Subheader
src/components/atoms/index.ts
+3
View File
@@ -1,5 +1,8 @@
export { default as Award } from './Award'
export { default as Extracurricular } from './Extracurricular'
export { default as ListItemText } from './ListItemText'
export { default as Publication } from './Publication'
export { default as SectionHeader } from './SectionHeader'
export { default as SectionSubheader } from './SectionSubheader'
export * from './IconLinks'
src/components/molecules/CookieConsent/index.tsx
+3 -2
View File
@@ -3,6 +3,7 @@ import { Box, Button, Link, Stack, Typography, Unstable_TrapFocus as TrapFocus,
import { useAnalytics } from 'use-analytics'
import { ANALYTICS_PLUGINS, COOKIE_CONSENT_KEY } from 'components/utils/analytics/index.js'
import { SectionSubheader } from 'components/atoms/index.js'
interface Consent {
necessary: boolean // Always true, but included for completeness
@@ -63,9 +64,9 @@ const CookieConsent = () => {
zIndex: 9999,
})}>
<Box>
<Typography id="cookie-consent-dialog-title" variant="h6" component="h2" fontWeight="bold" gutterBottom>
<SectionSubheader id="cookie-consent-dialog-title" component="h2" variant="h6">
Cookie Preferences
</Typography>
</SectionSubheader>
<Typography id="cookie-consent-dialog-description" variant="body2" color="textSecondary">
<span style={{ display: 'inline-block' }}>We use cookies to improve your browsing experience and analyze our traffic.</span>
<span style={{ display: 'inline-block' }}>By clicking "Accept All", you consent to our use of cookies.</span>
src/components/molecules/CookiePreferences/index.tsx
+5 -4
View File
@@ -4,6 +4,7 @@ import { Box, Button, Link, Stack, Switch, Typography, SnackbarCloseReason, Snac
import { useAnalytics } from 'use-analytics'
import { ANALYTICS_PLUGINS, COOKIE_CONSENT_KEY } from 'components/utils/analytics/index.js'
import { SectionHeader } from 'components/atoms/index.js'
interface CookieConsentState {
necessary: boolean // Always true, but included for completeness
@@ -64,9 +65,9 @@ const CookieConsent: React.FC<CookieConsentProps> = ({ consentDisplayDefaultOpen
return (
<Box id="cookie-preferences" aria-labelledby="cookie-preferences-title" aria-describedby="cookie-preferences-description">
<Typography id="cookie-preferences-title" aria-label="cookie-preferences" variant="h3" component="h2" gutterBottom>
<SectionHeader color="inherit" id="cookie-preferences-title" aria-label="cookie-preferences">
Cookie Preferences
</Typography>
</SectionHeader>
<Typography id="cookie-preferences-description" color="textSecondary" flexGrow={1}>
Please set your preferences below. You can change these settings at any time in the future.
<br />
@@ -98,7 +99,7 @@ const CookieConsent: React.FC<CookieConsentProps> = ({ consentDisplayDefaultOpen
<Box>
<Stack direction="row" alignItems="center" justifyContent="space-between" alignContent="center">
<Typography variant="body1" fontWeight="bold">
<Typography variant="h6" fontFamily="Oswald, sans-serif">
Necessary Cookies
</Typography>
<Switch slotProps={{ input: { 'aria-label': 'necessary-cookies-toggle' } }} color="default" disabled checked />
@@ -110,7 +111,7 @@ const CookieConsent: React.FC<CookieConsentProps> = ({ consentDisplayDefaultOpen
<Box>
<Stack direction="row" alignItems="center" justifyContent="space-between" alignContent="center">
<Typography variant="body1" fontWeight="bold">
<Typography variant="h6" fontFamily="Oswald, sans-serif">
Analytics Cookies
</Typography>
<Switch
src/components/molecules/PrivacyPolicy/index.tsx
+9 -21
View File
@@ -1,7 +1,7 @@
import React from 'react'
import { Typography, Link, List as MuiList, styled, Box } from '@mui/material'
import ListItemText from 'components/atoms/ListItemText/index.js'
import { ListItemText, SectionHeader, SectionSubheader } from 'components/atoms/index.js'
const List = styled(MuiList)(({ theme }) => ({
listStyleType: 'disc',
@@ -15,24 +15,20 @@ const List = styled(MuiList)(({ theme }) => ({
const PrivacyPolicy: React.FC = () => {
return (
<Box aria-labelledby="privacy-policy">
<Typography id="privacy-policy" aria-label="privacy-policy" variant="h3" component="h2" gutterBottom>
<SectionHeader id="privacy-policy" aria-label="privacy-policy" color="inherit">
Privacy Policy
</Typography>
</SectionHeader>
<Typography variant="subtitle1" color="textSecondary" component="p" pb={4}>
Last updated: May 27, 2025
</Typography>
<Typography variant="h5" component="h2" gutterBottom>
Introduction
</Typography>
<SectionSubheader>Introduction</SectionSubheader>
<Typography component="p" color="textSecondary">
m-tartari ("we", "our", or "us") respects your privacy and is committed to protecting your personal data. This privacy policy will inform you
about how we look after your personal data when you visit our website and tell you about your privacy rights and how the law protects you.
</Typography>
<Typography variant="h5" component="h2" gutterBottom sx={{ mt: 4 }}>
The Data We Collect About You
</Typography>
<SectionSubheader sx={{ mt: 4 }}>The Data We Collect About You</SectionSubheader>
<Typography component="p" color="textSecondary">
We collect and process the following information when you visit our website:
</Typography>
@@ -44,9 +40,7 @@ const PrivacyPolicy: React.FC = () => {
<ListItemText title="Usage Data"> includes information about how you use our website, products, and services.</ListItemText>
</List>
<Typography variant="h5" component="h2" gutterBottom sx={{ mt: 4 }}>
Cookies
</Typography>
<SectionSubheader sx={{ mt: 4 }}>Cookies</SectionSubheader>
<Typography component="p" color="textSecondary">
We use cookies to distinguish you from other users of our website. This helps us to provide you with a good experience when you browse our
website and also allows us to improve our site.
@@ -66,9 +60,7 @@ const PrivacyPolicy: React.FC = () => {
</ListItemText>
</List>
<Typography variant="h5" component="h2" gutterBottom sx={{ mt: 4 }}>
Google Analytics
</Typography>
<SectionSubheader sx={{ mt: 4 }}>Google Analytics</SectionSubheader>
<Typography component="p" color="textSecondary">
This website uses Google Analytics 4, a web analytics service provided by Google, Inc. ("Google"). Google Analytics uses cookies to help the
website analyze how users use the site. The information generated by the cookie about your use of the website will be transmitted to and
@@ -92,9 +84,7 @@ const PrivacyPolicy: React.FC = () => {
.
</Typography>
<Typography variant="h5" component="h2" gutterBottom sx={{ mt: 4 }}>
Your Rights
</Typography>
<SectionSubheader sx={{ mt: 4 }}>Your Rights</SectionSubheader>
<Typography component="p" color="textSecondary">
Under the General Data Protection Regulation (GDPR), you have various rights in relation to your personal data, including:
</Typography>
@@ -108,9 +98,7 @@ const PrivacyPolicy: React.FC = () => {
<ListItemText>The right to object to processing of your personal data</ListItemText>
</List>
<Typography variant="h5" component="h2" gutterBottom sx={{ mt: 4 }}>
Contact Us
</Typography>
<SectionSubheader sx={{ mt: 4 }}>Contact Us</SectionSubheader>
<Typography component="p" color="textSecondary">
If you have any questions about this privacy policy or our privacy practices, please contact us at{' '}
<Link color="textPrimary" href="mailto:privacy@m-tartari.eu" target="_blank" rel="noopener noreferrer">
src/components/pages/CurriculumPage/CurriculumPage.tsx
+49 -57
View File
@@ -1,6 +1,6 @@
import { Box, Divider, Link, Stack, Table, TableCell, TableRow, Typography } from '@mui/material'
import { Award, ExternalIconLink, Extracurricular, Publication } from 'components/atoms'
import { Award, ExternalIconLink, Extracurricular, Publication, SectionHeader, SectionSubheader } from 'components/atoms'
import { CurriculumItem } from 'components/molecules'
import { Page } from 'components/templates'
@@ -8,9 +8,7 @@ const Curriculum = () => {
return (
<Page title="Curriculum">
<Box component="section" id="work">
<Typography variant="h4" color="primary.main" gutterBottom>
Work Experience
</Typography>
<SectionHeader>Work Experience</SectionHeader>
{/* id="selfemployed-software" */}
<CurriculumItem title="Software Engineering Consultant" dates="04/24 - Today" company="Self-Employed" location="Remote">
@@ -128,13 +126,9 @@ const Curriculum = () => {
</CurriculumItem>
<Divider sx={{ mt: 4, mb: 4 }} />
<Typography variant="h4" color="primary.main" gutterBottom>
Education
</Typography>
<SectionHeader>Education</SectionHeader>
<Typography variant="h5" gutterBottom>
Certifications
</Typography>
<SectionSubheader fontWeight={300}>Certifications</SectionSubheader>
{/* id="WUT" */}
<CurriculumItem title="IBM Full Stack Software Developer Professional Certificate" dates="03/24">
<Stack direction="row" alignItems="center" gap={0.5}>
@@ -143,20 +137,19 @@ const Curriculum = () => {
</Stack>
</CurriculumItem>
<Typography
variant="h5"
onClick={() => window.open('https://master-emaro.ec-nantes.fr/', '_blank')}
sx={{
mt: 2,
cursor: 'pointer',
':hover': {
backgroundColor: 'transparent',
color: 'primary.main',
},
}}
gutterBottom>
EMARO+ Program - Master Studies
</Typography>
<SectionSubheader fontWeight={300} mt={2}>
<Link
rel="noopener noreferrer"
target="_blank"
underline="hover"
href="https://master-emaro.ec-nantes.fr/"
sx={{
color: 'inherit',
cursor: 'pointer',
}}>
EMARO+ Program - Master Studies
</Link>
</SectionSubheader>
{/* id="WUT" */}
<CurriculumItem
title="M.Eng. in Robotics and Control"
@@ -214,20 +207,19 @@ const Curriculum = () => {
</Typography>
</CurriculumItem>
<Typography
variant="h5"
onClick={() => window.open('https://corsi.unibo.it/2cycle/AutomationEngineering/almatong-bachelor-programme', '_blank')}
sx={{
mt: 2,
cursor: 'pointer',
':hover': {
backgroundColor: 'transparent',
color: 'primary.main',
},
}}
gutterBottom>
Almatong Project - Bachelor Studies
</Typography>
<SectionSubheader fontWeight={300} mt={2}>
<Link
rel="noopener noreferrer"
target="_blank"
underline="hover"
href="https://corsi.unibo.it/2cycle/AutomationEngineering/almatong-bachelor-programme"
sx={{
color: 'inherit',
cursor: 'pointer',
}}>
Almatong Project - Bachelor Studies
</Link>
</SectionSubheader>
{/* id="TJ" */}
<CurriculumItem
title="B.S. in Control Theory and Control Engineering"
@@ -272,9 +264,9 @@ const Curriculum = () => {
</Typography>
</CurriculumItem>
<Typography variant="h5" sx={{ mt: 2 }} gutterBottom>
<SectionSubheader fontWeight={300} mt={2}>
High School Studies
</Typography>
</SectionSubheader>
{/* id="Roiti" */}
<CurriculumItem
title="Scientific High School Diploma"
@@ -311,20 +303,22 @@ const Curriculum = () => {
</CurriculumItem>
<Divider sx={{ mt: 4, mb: 4 }} />
<Typography variant="h4" color="primary.main" gutterBottom>
Skills
</Typography>
<SectionHeader>Skills</SectionHeader>
<Table>
<TableRow>
<TableCell width="15%">
<b>Languages</b>
<Typography variant="h6" component="b" fontWeight={600}>
Languages
</Typography>
</TableCell>
<TableCell width="85%">Italian (Native Speaker), English (Proficient, IELTS 7.5), French (Good), Chinese (Basic, HSK3)</TableCell>
</TableRow>
<TableRow>
<TableCell rowSpan={4} width="15%" id="digital_skills">
<b>Digital</b>
<Typography variant="h6" component="b" fontWeight={600}>
Digital
</Typography>
</TableCell>
<TableCell width="85%">
<b>Languages:</b> TypeScript/Javascript (Proficient), Python (Proficient), Bash (Good), C++ (Good), C (Fair)
@@ -347,7 +341,9 @@ const Curriculum = () => {
</TableRow>
<TableRow sx={{ '&:last-child td': { borderBottom: 0 } }}>
<TableCell width="15%">
<b>Softskills</b>
<Typography variant="h6" component="b" fontWeight={600}>
Softskills
</Typography>
</TableCell>
<TableCell width="85%">
Adaptability, Communication, Creativity, Critical Thinking, Problem-Solving, Self-Organization, Teamworking
@@ -357,11 +353,9 @@ const Curriculum = () => {
{/* Accomplishments */}
<Divider sx={{ mt: 4, mb: 4 }} />
<Typography variant="h4" color="primary.main" gutterBottom>
Accomplishments
</Typography>
<SectionHeader>Accomplishments</SectionHeader>
<Box pb={1}>
<Typography variant="h5">Awards</Typography>
<SectionSubheader fontWeight={300}>Awards</SectionSubheader>
<Award
year="2021"
@@ -385,7 +379,7 @@ const Curriculum = () => {
</Box>
<Box pb={1}>
<Typography variant="h5">Press Releases</Typography>
<SectionSubheader fontWeight={300}>Press Releases</SectionSubheader>
<Award
year="2020"
title="Covid-19: L'impatto sui giovani talenti"
@@ -405,7 +399,7 @@ const Curriculum = () => {
</Box>
<Box py={1}>
<Typography variant="h5">Publications</Typography>
<SectionSubheader fontWeight={300}>Publications</SectionSubheader>
<Publication
year="2020"
title="Control System Design for Human Assisting Robot"
@@ -425,11 +419,9 @@ const Curriculum = () => {
{/* Extacurricoular */}
<Divider sx={{ mt: 4, mb: 4 }} />
<Typography variant="h4" color="primary.main" gutterBottom>
Extracurricular
</Typography>
<SectionHeader>Extracurricular</SectionHeader>
{/* Volunteering */}
<Typography variant="h5">Volunteering</Typography>
<SectionSubheader fontWeight={300}>Volunteering</SectionSubheader>
<Box component="ul" pl={4} mt={0}>
<Extracurricular Component="li" year="2013 - Today" title="Blood Donor, Bone Marrow Donor at AVIS & ADMO" />
<Extracurricular Component="li" year="2008 - 2014" title="Scoutism and associated volunteering activities in Agesci" />
@@ -437,7 +429,7 @@ const Curriculum = () => {
</Box>
{/* Other */}
{/* Interests */}
<Typography variant="h5">Interests</Typography>
<SectionSubheader fontWeight={300}>Interests</SectionSubheader>
<Box component="ul" pl={4} mt={0}>
<Extracurricular Component="li" title="Historical Handcrafting & Reenactment" />
<Extracurricular Component="li" title="Hiking/Travelling" />