🐛 fix: uniform headers across pages

src/components/atoms/SectionHeader/index.tsx

@@ -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

@@ -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

@@ -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,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

@@ -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

@@ -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>
+      <SectionSubheader>Introduction</SectionSubheader>
-        Introduction
-      </Typography>
       <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 }}>
+      <SectionSubheader sx={{ mt: 4 }}>The Data We Collect About You</SectionSubheader>
-        The Data We Collect About You
-      </Typography>
       <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 }}>
+      <SectionSubheader sx={{ mt: 4 }}>Cookies</SectionSubheader>
-        Cookies
-      </Typography>
       <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 }}>
+      <SectionSubheader sx={{ mt: 4 }}>Google Analytics</SectionSubheader>
-        Google Analytics
-      </Typography>
       <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 }}>
+      <SectionSubheader sx={{ mt: 4 }}>Your Rights</SectionSubheader>
-        Your Rights
-      </Typography>
       <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 }}>
+      <SectionSubheader sx={{ mt: 4 }}>Contact Us</SectionSubheader>
-        Contact Us
-      </Typography>
       <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

@@ -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>
+        <SectionHeader>Work Experience</SectionHeader>
-          Work Experience
-        </Typography>
 
         {/* 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>
+        <SectionHeader>Education</SectionHeader>
-          Education
-        </Typography>
 
-        <Typography variant="h5" gutterBottom>
+        <SectionSubheader fontWeight={300}>Certifications</SectionSubheader>
-          Certifications
-        </Typography>
         {/* 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
+        <SectionSubheader fontWeight={300} mt={2}>
-          variant="h5"
+          <Link
-          onClick={() => window.open('https://master-emaro.ec-nantes.fr/', '_blank')}
+            rel="noopener noreferrer"
+            target="_blank"
+            underline="hover"
+            href="https://master-emaro.ec-nantes.fr/"
             sx={{
-            mt: 2,
+              color: 'inherit',
               cursor: 'pointer',
-            ':hover': {
+            }}>
-              backgroundColor: 'transparent',
-              color: 'primary.main',
-            },
-          }}
-          gutterBottom>
             EMARO+ Program - Master Studies
-        </Typography>
+          </Link>
+        </SectionSubheader>
         {/* id="WUT" */}
         <CurriculumItem
           title="M.Eng. in Robotics and Control"
@@ -214,20 +207,19 @@ const Curriculum = () => {
           </Typography>
         </CurriculumItem>
 
-        <Typography
+        <SectionSubheader fontWeight={300} mt={2}>
-          variant="h5"
+          <Link
-          onClick={() => window.open('https://corsi.unibo.it/2cycle/AutomationEngineering/almatong-bachelor-programme', '_blank')}
+            rel="noopener noreferrer"
+            target="_blank"
+            underline="hover"
+            href="https://corsi.unibo.it/2cycle/AutomationEngineering/almatong-bachelor-programme"
             sx={{
-            mt: 2,
+              color: 'inherit',
               cursor: 'pointer',
-            ':hover': {
+            }}>
-              backgroundColor: 'transparent',
-              color: 'primary.main',
-            },
-          }}
-          gutterBottom>
             Almatong Project - Bachelor Studies
-        </Typography>
+          </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>
+        <SectionHeader>Skills</SectionHeader>
-          Skills
-        </Typography>
         <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>
+        <SectionHeader>Accomplishments</SectionHeader>
-          Accomplishments
-        </Typography>
         <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>
+        <SectionHeader>Extracurricular</SectionHeader>
-          Extracurricular
-        </Typography>
         {/* 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" />