dadobos/me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance SEO with meta tags in index.html; improve typography and layout in various components

Browse Source
This commit is contained in:
Dan Dobos
2025-10-20 18:07:11 +02:00
parent 4f7256da05
commit cf1fef8020
10 changed files with 130 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+2
View File
@@ -9,6 +9,8 @@
/> />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta name="title" content="Dan Adobos — Personal Portfolio">
<meta name="description" content="Personal portfolio of Dan Adobos — software engineer and front-end developer. Showcasing projects, open-source work, blog posts, and contact information.">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
src/components/blog-accordion/BlogAccordion.jsx
+6 -2
View File
@@ -31,11 +31,15 @@ const BlogAccordion = ({ blogContent }) => {
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
aria-controls={`panel-${itemIdx}-content`} aria-controls={`panel-${itemIdx}-content`}
id={`panel-${itemIdx}-header`}> id={`panel-${itemIdx}-header`}>
<Typography variant="h5">{title}</Typography> <Typography variant="h4">{title}</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
{lines.map((lineContent, idx) => ( {lines.map((lineContent, idx) => (
<Typography key={`${itemIdx}-${idx}`} paragraph> <Typography
key={`${itemIdx}-${idx}`}
variant="subtitle1"
style={{ fontSize: "18px" }}
paragraph>
{lineContent} {lineContent}
</Typography> </Typography>
))} ))}
src/components/main-accordion/MainAccordion.jsx
+2 -8
View File
@@ -18,7 +18,7 @@ const MainAccordion = ({ items, title }) => {
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content" aria-controls="panel1a-content"
id="panel1a-header"> id="panel1a-header">
<Typography variant="h5">{title}</Typography> <Typography variant="h4">{title}</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Grid2 <Grid2
@@ -28,13 +28,7 @@ const MainAccordion = ({ items, title }) => {
justifyContent="baseline" justifyContent="baseline"
spacing={3}> spacing={3}>
{items.map((project) => ( {items.map((project) => (
<Grid2 <Grid2 key={project.key + project.title}>
item
xs={12}
sm={6}
md={4}
key={project.title}
sx={{ alignItems: "center", justifyContent: "center" }}>
<MainCard <MainCard
imageURL={project.imageURL} imageURL={project.imageURL}
title={project.title} title={project.title}
src/components/main-card/MainCard.jsx
+6 -6
View File
@@ -27,12 +27,13 @@ const MainCard = ({ imageURL, title, description, url }) => {
children={ children={
<Card <Card
sx={{ sx={{
minWidth: "320px",
maxWidth: "320px", maxWidth: "320px",
mx: "auto", marginLeft: "auto",
marginRight: "auto",
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
}} }}>
>
<CardMedia <CardMedia
component="img" component="img"
height="150" height="150"
@@ -45,9 +46,8 @@ const MainCard = ({ imageURL, title, description, url }) => {
<CardActionArea> <CardActionArea>
<CardContent <CardContent
color="white" color="white"
onClick={() => window.open(url, "_blank")} onClick={() => window.open(url, "_blank")}>
> <Typography gutterBottom variant="h5" component="div">
<Typography gutterBottom variant="h6" component="div">
{title} {title}
</Typography> </Typography>
</CardContent> </CardContent>
src/layouts/common/darkModeToggle/DarkModeToggle.jsx
+8 -1
View File
@@ -11,8 +11,15 @@ const DarkModeToggle = () => {
return ( return (
<IconButton <IconButton
aria-label="Dark Mode Toggle"
onClick={appContext.toggleColorMode} onClick={appContext.toggleColorMode}
sx={{ color: theme.palette.text.secondary }}> size="large"
sx={{
alignSelf: "right",
ml: 1,
color: theme.palette.text.secondary,
fontSize: "24px",
}}>
{theme.palette.mode === "dark" ? ( {theme.palette.mode === "dark" ? (
<WbSunnyOutlinedIcon /> <WbSunnyOutlinedIcon />
) : ( ) : (
src/layouts/common/languageSwitcher/LanguageSwitcher.jsx
+6 -1
View File
@@ -10,15 +10,20 @@ const LanguageSwitcher = () => {
const appContext = useContext(AppContext); const appContext = useContext(AppContext);
return ( return (
<IconButton <IconButton
aria-label="Language Switcher"
onClick={() => { onClick={() => {
const setLocale = appContext && appContext.setLocale; const setLocale = appContext && appContext.setLocale;
if (typeof setLocale === "function") { if (typeof setLocale === "function") {
setLocale(appContext.locale === "en" ? "nl" : "en"); setLocale(appContext.locale === "en" ? "nl" : "en");
} }
}} }}
size="large"
sx={{ sx={{
color: theme.palette.text.secondary,
alignSelf: "right", alignSelf: "right",
mr: 1,
ml: 1,
color: theme.palette.text.secondary,
fontSize: "24px",
}}> }}>
{<LanguageOutlinedIcon />} {<LanguageOutlinedIcon />}
</IconButton> </IconButton>
src/layouts/landing/components/header/Header.jsx
+17 -20
View File
@@ -9,11 +9,11 @@ import {
Typography, Typography,
Breadcrumbs, Breadcrumbs,
Link as MaterialLink, Link as MaterialLink,
Grid2,
IconButton, IconButton,
Box,
} from "@mui/material"; } from "@mui/material";
import { useTheme } from "@mui/material/styles"; import { useTheme } from "@mui/material/styles";
import ThreeSixtyOutlinedIcon from "@mui/icons-material/ThreeSixtyOutlined"; import ThreeSixtyIcon from "@mui/icons-material/ThreeSixtyOutlined";
import LanguageSwitcher from "layouts/common/languageSwitcher"; import LanguageSwitcher from "layouts/common/languageSwitcher";
import DarkModeToggle from "layouts/common/darkModeToggle"; import DarkModeToggle from "layouts/common/darkModeToggle";
@@ -28,6 +28,7 @@ const Header = () => {
<HideOnScroll> <HideOnScroll>
<AppBar <AppBar
position="fixed" position="fixed"
component="nav"
sx={{ sx={{
background: "transparent", background: "transparent",
zIndex: 1301, zIndex: 1301,
@@ -37,20 +38,14 @@ const Header = () => {
}} }}
elevation={0}> elevation={0}>
<Toolbar> <Toolbar>
<Grid2 <Typography component="div" sx={{ flexGrow: 1, display: "block" }}>
container
sx={{
width: "100%",
justifyContent: "space-between",
alignItems: "center",
}}>
<Grid2 item>
<Breadcrumbs aria-label="breadcrumb"> <Breadcrumbs aria-label="breadcrumb">
<Typography <Typography
variant="h5" component="span"
sx={{ sx={{
textTransform: "uppercase", textTransform: "uppercase",
letterSpacing: ".2rem", letterSpacing: ".2rem",
fontSize: "1.6rem",
}}> }}>
Dan Dobos Dan Dobos
</Typography> </Typography>
@@ -62,22 +57,24 @@ const Header = () => {
About About
</MaterialLink> </MaterialLink>
</Breadcrumbs> </Breadcrumbs>
</Grid2> </Typography>
<Grid2 item>
<Grid2 container alignItems="center"> <Box sx={{ display: "block" }}>
<Link to="/projects"> <Link to="/projects">
<IconButton <IconButton
aria-label="Projects" aria-label="Projects"
disableRipple size="large"
sx={{ mr: 1, color: theme.palette.text.secondary }}> sx={{
<ThreeSixtyOutlinedIcon /> // px: 2,
mx: 2,
color: theme.palette.text.secondary,
}}>
<ThreeSixtyIcon />
</IconButton> </IconButton>
</Link> </Link>
<LanguageSwitcher /> <LanguageSwitcher />
<DarkModeToggle /> <DarkModeToggle />
</Grid2> </Box>
</Grid2>
</Grid2>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</HideOnScroll> </HideOnScroll>
src/layouts/main/components/footer/Footer.jsx
+1 -1
View File
@@ -15,7 +15,7 @@ const Footer = () => {
minHeight: "24px", minHeight: "24px",
}} }}
justifyContent="center"> justifyContent="center">
<Grid2 item> <Grid2>
<Typography <Typography
inline="true" inline="true"
variant="body1" variant="body1"
src/pages/about/About.jsx
+6 -6
View File
@@ -24,12 +24,12 @@ const About = () => {
alignItems="flex-end" alignItems="flex-end"
justifyContent="flex-end" justifyContent="flex-end"
spacing={3}> spacing={3}>
<Grid2 item> <Grid2>
<Typography variant="h4" align="right" inline="true"> <Typography align="right" inline="true" sx={{ fontSize: "32px" }}>
Software Developer Software Developer
</Typography> </Typography>
</Grid2> </Grid2>
<Grid2 item> <Grid2>
<Typography <Typography
variant="h1" variant="h1"
gutterBottom gutterBottom
@@ -48,14 +48,14 @@ const About = () => {
</Typography> </Typography>
</Grid2> </Grid2>
<Grid2 item> <Grid2>
<Typography align="right" inline="true" variant="h6"> <Typography align="right" inline="true" sx={{ fontSize: "22px" }}>
Characterized by the desire of understanding and implementing Characterized by the desire of understanding and implementing
technological innovations. technological innovations.
</Typography> </Typography>
</Grid2> </Grid2>
<Grid2 item> <Grid2>
<Typography align="right" inline="true"> <Typography align="right" inline="true">
Contact Contact
</Typography> </Typography>
src/pages/landing/Landing.jsx
+14 -14
View File
@@ -10,9 +10,9 @@ const Home = () => {
const t = useIntl(); const t = useIntl();
return ( return (
<Grid2 container direction="column" alignItems="stretch"> <Grid2 container direction="column" alignItems="stretch">
<Grid2 item container direction="column"> <Grid2 container direction="column">
<Grid2 item> <Grid2>
<Typography variant="h3"> <Typography variant="h3" marginTop={4} marginBottom={2}>
{t.formatMessage({ {t.formatMessage({
id: "navigation.projects", id: "navigation.projects",
defaultMessage: "Projects", defaultMessage: "Projects",
@@ -20,14 +20,14 @@ const Home = () => {
</Typography> </Typography>
<Divider variant="inset" /> <Divider variant="inset" />
</Grid2> </Grid2>
<Grid2 item> <Grid2>
<Projects /> <Projects />
</Grid2> </Grid2>
</Grid2> </Grid2>
<Grid2 item container direction="column"> <Grid2 container direction="column">
<Grid2 item> <Grid2>
<Typography variant="h3"> <Typography variant="h3" marginTop={4} marginBottom={2}>
{t.formatMessage({ {t.formatMessage({
id: "navigation.best-practices", id: "navigation.best-practices",
defaultMessage: "Best Practices", defaultMessage: "Best Practices",
@@ -35,14 +35,14 @@ const Home = () => {
</Typography> </Typography>
<Divider variant="inset" /> <Divider variant="inset" />
</Grid2> </Grid2>
<Grid2 item> <Grid2>
<BestPractices /> <BestPractices />
</Grid2> </Grid2>
</Grid2> </Grid2>
<Grid2 item container direction="column"> <Grid2 container direction="column">
<Grid2 item> <Grid2>
<Typography variant="h3"> <Typography variant="h3" marginTop={4} marginBottom={2}>
{t.formatMessage({ {t.formatMessage({
id: "navigation.blog", id: "navigation.blog",
defaultMessage: "Blog", defaultMessage: "Blog",
@@ -50,13 +50,13 @@ const Home = () => {
</Typography> </Typography>
<Divider variant="inset" /> <Divider variant="inset" />
</Grid2> </Grid2>
<Grid2 item> <Grid2>
<Blog /> <Blog />
</Grid2> </Grid2>
</Grid2> </Grid2>
<Grid2 item container justifyContent="flex-end"> <Grid2 container justifyContent="flex-end">
<Grid2 item> <Grid2>
<About /> <About />
</Grid2> </Grid2>
</Grid2> </Grid2>