From 15216d12aff0af8f9ed015f0fbabdee9a17704e5 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Mon, 16 Jun 2025 13:18:41 +0000
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20update=20compo?=
 =?UTF-8?q?nents=20proportions=20for=20new=20fonts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/molecules/Hero/Hero.tsx       | 24 ++++++++++++++------
 src/components/molecules/Project/Project.tsx |  2 +-
 src/components/templates/Page/Page.tsx       | 17 +++++++++-----
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/molecules/Hero/Hero.tsx b/src/components/molecules/Hero/Hero.tsx
index c65fb64..bdf0552 100644
--- a/src/components/molecules/Hero/Hero.tsx
+++ b/src/components/molecules/Hero/Hero.tsx
@@ -42,14 +42,24 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
           },
         })}>
         <Box>
-          <Typography variant="h3">Robotics Engineer</Typography>
-          <Typography color="text.secondary" sx={{ margin: '0.5em 0 0 0', top: 0 }}>
-            See some of my works below. Send a message to get in touch.
+          <Typography variant="h1">
+            Robotics
+            <br /> Engineer
           </Typography>
-          <Stack direction="row" gap={2} mt={2} justifyContent={{ xs: 'center', sm: 'end' }}>
-            <LinkedInIconLink sx={{ color: 'text.secondary' }} fontSize="large" href="https://www.linkedin.com/in/m-tartari/" />
-            <GitHubIconLink sx={{ color: 'text.secondary' }} fontSize="large" href="https://www.github.com/m-tartari/" />
-            <EmailIconLink sx={{ color: 'text.secondary' }} fontSize="large" href="mailto:info@m-tartari.eu" />
+          <Typography
+            variant="h6"
+            color="text.secondary"
+            sx={{
+              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">
+            <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" />
           </Stack>
         </Box>
         <Avatar
diff --git a/src/components/molecules/Project/Project.tsx b/src/components/molecules/Project/Project.tsx
index ae11c41..7bc1213 100644
--- a/src/components/molecules/Project/Project.tsx
+++ b/src/components/molecules/Project/Project.tsx
@@ -51,7 +51,7 @@ const Project = (props: ProjectProps) => {
           },
         }}>
         <div style={{ flex: 1 }}>
-          <Typography variant="h6">
+          <Typography variant="h5">
             <b>{props.title}</b>
           </Typography>
           <Stack direction="row" gap={1} alignItems="center">
diff --git a/src/components/templates/Page/Page.tsx b/src/components/templates/Page/Page.tsx
index 875af51..fdaa53f 100644
--- a/src/components/templates/Page/Page.tsx
+++ b/src/components/templates/Page/Page.tsx
@@ -24,26 +24,31 @@ const Page: React.FC<PageProps> = ({ title, children, showCookieConsent, ...prop
       {title && (
         <>
           <Typography
-            variant="h2"
+            variant="h1"
             aria-label="page-title"
             textAlign="center"
             sx={{
               mt: 6,
-              p: 6,
+              py: 6,
             }}>
             {title}
           </Typography>
           <Divider
             variant="middle"
-            sx={{
+            sx={theme => ({
               borderColor: 'primary.main',
               borderStyle: 'solid',
               borderWidth: 2,
               mx: 'auto',
               mb: 4,
-              width: '30em',
               maxWidth: 'calc(60% - 2.5em)',
-            }}
+              [theme.breakpoints.up('md')]: {
+                width: theme => theme.breakpoints.values.sm,
+              },
+              [theme.breakpoints.down('sm')]: {
+                maxWidth: '75vw',
+              },
+            })}
           />
         </>
       )}
@@ -51,7 +56,7 @@ const Page: React.FC<PageProps> = ({ title, children, showCookieConsent, ...prop
         component="main"
         maxWidth={false}
         sx={{
-          mt: 12,
+          mt: { xs: 8, md: 12 },
           mb: 4,
           minHeight: '80vh',
           mx: 'auto',