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

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

Browse Source 
✨ feat: add new font and update theme
This commit is contained in:
Michele Tartari
2025-06-16 16:09:50 +02:00
committed by GitHub
parent c222c4fa12 15216d12af
commit 436a7c8e74
7 changed files with 83 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+14 -4
View File
@@ -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",
"integrity": "sha512-hzarG7yAhMoP418smNgfY4fO7UmuUEm5JUtbxCoCcFHT0hOJB+d/qAEyoNjz7YkPU5OjM2LM8rJnW8hfm0JLaA==",
"resolved": "https://registry.npmjs.org/@fontsource/inter/-/inter-5.2.6.tgz",
"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
+2 -1
View File
@@ -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
+20 -12
View File
@@ -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 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
src/components/molecules/Project/Project.tsx
+1 -1
View File
@@ -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
+11 -6
View File
@@ -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
+9
View File
@@ -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
+26 -3
View File
@@ -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