Merge pull request #505 from m-tartari/feat/new-fonts

✨ feat: add new font and update theme

package-lock.json

@@ -11,7 +11,8 @@
         "@analytics/google-analytics": "^1.1.0",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.0",
-        "@fontsource/roboto": "^5.2.6",
+        "@fontsource/inter": "^5.2.6",
+        "@fontsource/oswald": "^5.2.6",
         "@mui/icons-material": "^7.1.1",
         "@mui/material": "^7.0.0",
         "@vitejs/plugin-react-swc": "^3.10.2",
@@ -1412,10 +1413,19 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
-    "node_modules/@fontsource/roboto": {
+    "node_modules/@fontsource/inter": {
       "version": "5.2.6",
-      "resolved": "https://registry.npmjs.org/@fontsource/roboto/-/roboto-5.2.6.tgz",
+      "resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.6.tgz",
-      "integrity": "sha512-hzarG7yAhMoP418smNgfY4fO7UmuUEm5JUtbxCoCcFHT0hOJB+d/qAEyoNjz7YkPU5OjM2LM8rJnW8hfm0JLaA==",
+      "integrity": "sha512-CZs9S1CrjD0jPwsNy9W6j0BhsmRSQrgwlTNkgQXTsAeDRM42LBRLo3eo9gCzfH4GvV7zpyf78Ozfl773826csw==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
+    "node_modules/@fontsource/oswald": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@fontsource/oswald/-/oswald-5.2.6.tgz",
+      "integrity": "sha512-2rMxNdRrTjuhz2alrqMgOR45HOdxcLdzHYTdmque2idEH7TmG7fsYEpRr3qCL3TFpInr5OygAYvTEGWBy2d06g==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"

package.json

@@ -22,7 +22,8 @@
     "@analytics/google-analytics": "^1.1.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@fontsource/roboto": "^5.2.6",
+    "@fontsource/inter": "^5.2.6",
+    "@fontsource/oswald": "^5.2.6",
     "@mui/icons-material": "^7.1.1",
     "@mui/material": "^7.0.0",
     "@vitejs/plugin-react-swc": "^3.10.2",

src/components/molecules/Hero/Hero.tsx

@@ -25,33 +25,41 @@ const Hero = (props: { scrollTarget?: React.ForwardedRef<HTMLSelectElement> }) =
       }}>
       <Box
         sx={theme => ({
-          maxWidth: '95%',
-          marginRight: '1%',
           display: 'flex',
           justifyContent: 'center',
           alignItems: 'center',
           gap: '3em',
 
-          [theme.breakpoints.down('sm')]: {
+          [theme.breakpoints.down('md')]: {
             flexDirection: 'column',
             textAlign: 'center',
-            padding: '3em',
+            padding: '2em',
           },
-          [theme.breakpoints.up('sm')]: {
+          [theme.breakpoints.up('md')]: {
             flexDirection: 'row',
             textAlign: 'right',
             padding: '6em',
           },
         })}>
         <Box>
-          <Typography variant="h3">Robotics Engineer</Typography>
+          <Typography variant="h1">
-          <Typography color="text.secondary" sx={{ margin: '0.5em 0 0 0', top: 0 }}>
+            Robotics
-            See some of my works below. Send a message to get in touch.
+            <br /> Engineer
           </Typography>
-          <Stack direction="row" gap={2} mt={2} justifyContent={{ xs: 'center', sm: 'end' }}>
+          <Typography
-            <LinkedInIconLink sx={{ color: 'text.secondary' }} fontSize="large" href="https://www.linkedin.com/in/m-tartari/" />
+            variant="h6"
-            <GitHubIconLink sx={{ color: 'text.secondary' }} fontSize="large" href="https://www.github.com/m-tartari/" />
+            color="text.secondary"
-            <EmailIconLink sx={{ color: 'text.secondary' }} fontSize="large" href="mailto:info@m-tartari.eu" />
+            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

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

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

src/main.tsx

@@ -1,4 +1,13 @@
 /* istanbul ignore file */
+import '@fontsource/oswald/700.css'
+import '@fontsource/oswald/500.css'
+import '@fontsource/oswald/400.css'
+import '@fontsource/oswald/300.css'
+import '@fontsource/inter/700.css'
+import '@fontsource/inter/500.css'
+import '@fontsource/inter/400.css'
+import '@fontsource/inter/300.css'
+
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { AnalyticsProvider } from 'use-analytics'

src/style/theme.ts

@@ -1,8 +1,29 @@
 /* istanbul ignore file */
-import { createTheme } from '@mui/material/styles'
+import { createTheme, responsiveFontSizes } from '@mui/material/styles'
-
 // A custom theme for this app
-const theme = createTheme({
+let theme = createTheme({
+  typography: {
+    fontFamily: 'Inter, sans-serif', // Base font for headings
+
+    h1: {
+      fontFamily: 'Oswald, sans-serif',
+      textTransform: 'uppercase',
+      fontWeight: 700,
+    },
+    h2: {
+      fontFamily: 'Oswald, sans-serif',
+      textTransform: 'uppercase',
+      fontWeight: 700,
+    },
+    h3: {
+      fontFamily: 'Oswald, sans-serif',
+      fontWeight: 700,
+    },
+    h4: {
+      fontFamily: 'Oswald, sans-serif',
+      fontWeight: 700,
+    },
+  },
   palette: {
     mode: 'dark',
     primary: {
@@ -18,4 +39,6 @@ const theme = createTheme({
   },
 })
 
+theme = responsiveFontSizes(theme)
+
 export default theme