From cf1fef80201362d393ac0ba26c049311a14db023 Mon Sep 17 00:00:00 2001
From: Dan Dobos <dan@prowarehouse.nl>
Date: Mon, 20 Oct 2025 18:07:11 +0200
Subject: [PATCH] feat: enhance SEO with meta tags in index.html; improve
 typography and layout in various components

---
 public/index.html                             |  2 +
 .../blog-accordion/BlogAccordion.jsx          |  8 +-
 .../main-accordion/MainAccordion.jsx          | 10 +--
 src/components/main-card/MainCard.jsx         | 90 +++++++++----------
 .../common/darkModeToggle/DarkModeToggle.jsx  |  9 +-
 .../languageSwitcher/LanguageSwitcher.jsx     |  7 +-
 .../landing/components/header/Header.jsx      | 83 +++++++++--------
 src/layouts/main/components/footer/Footer.jsx |  2 +-
 src/pages/about/About.jsx                     | 12 +--
 src/pages/landing/Landing.jsx                 | 28 +++---
 10 files changed, 130 insertions(+), 121 deletions(-)

diff --git a/public/index.html b/public/index.html
index 00e5b58..8fe43c9 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,6 +9,8 @@
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <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="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
diff --git a/src/components/blog-accordion/BlogAccordion.jsx b/src/components/blog-accordion/BlogAccordion.jsx
index 6bbb541..f65e899 100644
--- a/src/components/blog-accordion/BlogAccordion.jsx
+++ b/src/components/blog-accordion/BlogAccordion.jsx
@@ -31,11 +31,15 @@ const BlogAccordion = ({ blogContent }) => {
 					expandIcon={<ExpandMoreIcon />}
 					aria-controls={`panel-${itemIdx}-content`}
 					id={`panel-${itemIdx}-header`}>
-					<Typography variant="h5">{title}</Typography>
+					<Typography variant="h4">{title}</Typography>
 				</AccordionSummary>
 				<AccordionDetails>
 					{lines.map((lineContent, idx) => (
-						<Typography key={`${itemIdx}-${idx}`} paragraph>
+						<Typography
+							key={`${itemIdx}-${idx}`}
+							variant="subtitle1"
+							style={{ fontSize: "18px" }}
+							paragraph>
 							{lineContent}
 						</Typography>
 					))}
diff --git a/src/components/main-accordion/MainAccordion.jsx b/src/components/main-accordion/MainAccordion.jsx
index 24af126..4e66b9a 100644
--- a/src/components/main-accordion/MainAccordion.jsx
+++ b/src/components/main-accordion/MainAccordion.jsx
@@ -18,7 +18,7 @@ const MainAccordion = ({ items, title }) => {
 				expandIcon={<ExpandMoreIcon />}
 				aria-controls="panel1a-content"
 				id="panel1a-header">
-				<Typography variant="h5">{title}</Typography>
+				<Typography variant="h4">{title}</Typography>
 			</AccordionSummary>
 			<AccordionDetails>
 				<Grid2
@@ -28,13 +28,7 @@ const MainAccordion = ({ items, title }) => {
 					justifyContent="baseline"
 					spacing={3}>
 					{items.map((project) => (
-						<Grid2
-							item
-							xs={12}
-							sm={6}
-							md={4}
-							key={project.title}
-							sx={{ alignItems: "center", justifyContent: "center" }}>
+						<Grid2 key={project.key + project.title}>
 							<MainCard
 								imageURL={project.imageURL}
 								title={project.title}
diff --git a/src/components/main-card/MainCard.jsx b/src/components/main-card/MainCard.jsx
index 5776543..fcc5107 100644
--- a/src/components/main-card/MainCard.jsx
+++ b/src/components/main-card/MainCard.jsx
@@ -1,61 +1,61 @@
 import React from "react";
 
 import {
-  Card,
-  CardContent,
-  CardMedia,
-  CardActionArea,
-  Typography,
+	Card,
+	CardContent,
+	CardMedia,
+	CardActionArea,
+	Typography,
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 
 import { Tilt } from "./Tilt";
 
 const MainCard = ({ imageURL, title, description, url }) => {
-  const theme = useTheme();
+	const theme = useTheme();
 
-  const options = {
-    reverse: true,
-    speed: 1200,
-    easing: "cubic-bezier(.09,.67,.54,.76)",
-  };
+	const options = {
+		reverse: true,
+		speed: 1200,
+		easing: "cubic-bezier(.09,.67,.54,.76)",
+	};
 
-  return (
-    <Tilt
-      // style={{ padding: 0, margin: 0 }}
-      options={options}
-      children={
-        <Card
-          sx={{
-            maxWidth: "320px",
-            mx: "auto",
-            color: theme.palette.text.secondary,
-            backgroundColor: theme.palette.background.paper,
-          }}
-        >
-          <CardMedia
-            component="img"
-            height="150"
-            image={imageURL}
-            alt={title}
-          />
+	return (
+		<Tilt
+			// style={{ padding: 0, margin: 0 }}
+			options={options}
+			children={
+				<Card
+					sx={{
+						minWidth: "320px",
+						maxWidth: "320px",
+						marginLeft: "auto",
+						marginRight: "auto",
+						color: theme.palette.text.secondary,
+						backgroundColor: theme.palette.background.paper,
+					}}>
+					<CardMedia
+						component="img"
+						height="150"
+						image={imageURL}
+						alt={title}
+					/>
 
-          <Typography variant="body2">{description}</Typography>
+					<Typography variant="body2">{description}</Typography>
 
-          <CardActionArea>
-            <CardContent
-              color="white"
-              onClick={() => window.open(url, "_blank")}
-            >
-              <Typography gutterBottom variant="h6" component="div">
-                {title}
-              </Typography>
-            </CardContent>
-          </CardActionArea>
-        </Card>
-      }
-    />
-  );
+					<CardActionArea>
+						<CardContent
+							color="white"
+							onClick={() => window.open(url, "_blank")}>
+							<Typography gutterBottom variant="h5" component="div">
+								{title}
+							</Typography>
+						</CardContent>
+					</CardActionArea>
+				</Card>
+			}
+		/>
+	);
 };
 
 export default MainCard;
diff --git a/src/layouts/common/darkModeToggle/DarkModeToggle.jsx b/src/layouts/common/darkModeToggle/DarkModeToggle.jsx
index ee38aae..c75b538 100644
--- a/src/layouts/common/darkModeToggle/DarkModeToggle.jsx
+++ b/src/layouts/common/darkModeToggle/DarkModeToggle.jsx
@@ -11,8 +11,15 @@ const DarkModeToggle = () => {
 
 	return (
 		<IconButton
+			aria-label="Dark Mode Toggle"
 			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" ? (
 				<WbSunnyOutlinedIcon />
 			) : (
diff --git a/src/layouts/common/languageSwitcher/LanguageSwitcher.jsx b/src/layouts/common/languageSwitcher/LanguageSwitcher.jsx
index 3cfd823..74cbdba 100644
--- a/src/layouts/common/languageSwitcher/LanguageSwitcher.jsx
+++ b/src/layouts/common/languageSwitcher/LanguageSwitcher.jsx
@@ -10,15 +10,20 @@ const LanguageSwitcher = () => {
 	const appContext = useContext(AppContext);
 	return (
 		<IconButton
+			aria-label="Language Switcher"
 			onClick={() => {
 				const setLocale = appContext && appContext.setLocale;
 				if (typeof setLocale === "function") {
 					setLocale(appContext.locale === "en" ? "nl" : "en");
 				}
 			}}
+			size="large"
 			sx={{
-				color: theme.palette.text.secondary,
 				alignSelf: "right",
+				mr: 1,
+				ml: 1,
+				color: theme.palette.text.secondary,
+				fontSize: "24px",
 			}}>
 			{<LanguageOutlinedIcon />}
 		</IconButton>
diff --git a/src/layouts/landing/components/header/Header.jsx b/src/layouts/landing/components/header/Header.jsx
index 0be1c3a..36aea8b 100644
--- a/src/layouts/landing/components/header/Header.jsx
+++ b/src/layouts/landing/components/header/Header.jsx
@@ -9,11 +9,11 @@ import {
 	Typography,
 	Breadcrumbs,
 	Link as MaterialLink,
-	Grid2,
 	IconButton,
+	Box,
 } from "@mui/material";
 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 DarkModeToggle from "layouts/common/darkModeToggle";
@@ -28,6 +28,7 @@ const Header = () => {
 			<HideOnScroll>
 				<AppBar
 					position="fixed"
+					component="nav"
 					sx={{
 						background: "transparent",
 						zIndex: 1301,
@@ -37,47 +38,43 @@ const Header = () => {
 					}}
 					elevation={0}>
 					<Toolbar>
-						<Grid2
-							container
-							sx={{
-								width: "100%",
-								justifyContent: "space-between",
-								alignItems: "center",
-							}}>
-							<Grid2 item>
-								<Breadcrumbs aria-label="breadcrumb">
-									<Typography
-										variant="h5"
-										sx={{
-											textTransform: "uppercase",
-											letterSpacing: ".2rem",
-										}}>
-										Dan Dobos
-									</Typography>
-									{/*href="#about" is used to navigate within the page  */}
-									<MaterialLink
-										color="textPrimary"
-										href="#about"
-										sx={{ cursor: "pointer" }}>
-										About
-									</MaterialLink>
-								</Breadcrumbs>
-							</Grid2>
-							<Grid2 item>
-								<Grid2 container alignItems="center">
-									<Link to="/projects">
-										<IconButton
-											aria-label="Projects"
-											disableRipple
-											sx={{ mr: 1, color: theme.palette.text.secondary }}>
-											<ThreeSixtyOutlinedIcon />
-										</IconButton>
-									</Link>
-									<LanguageSwitcher />
-									<DarkModeToggle />
-								</Grid2>
-							</Grid2>
-						</Grid2>
+						<Typography component="div" sx={{ flexGrow: 1, display: "block" }}>
+							<Breadcrumbs aria-label="breadcrumb">
+								<Typography
+									component="span"
+									sx={{
+										textTransform: "uppercase",
+										letterSpacing: ".2rem",
+										fontSize: "1.6rem",
+									}}>
+									Dan Dobos
+								</Typography>
+								{/*href="#about" is used to navigate within the page  */}
+								<MaterialLink
+									color="textPrimary"
+									href="#about"
+									sx={{ cursor: "pointer" }}>
+									About
+								</MaterialLink>
+							</Breadcrumbs>
+						</Typography>
+
+						<Box sx={{ display: "block" }}>
+							<Link to="/projects">
+								<IconButton
+									aria-label="Projects"
+									size="large"
+									sx={{
+										// px: 2,
+										mx: 2,
+										color: theme.palette.text.secondary,
+									}}>
+									<ThreeSixtyIcon />
+								</IconButton>
+							</Link>
+							<LanguageSwitcher />
+							<DarkModeToggle />
+						</Box>
 					</Toolbar>
 				</AppBar>
 			</HideOnScroll>
diff --git a/src/layouts/main/components/footer/Footer.jsx b/src/layouts/main/components/footer/Footer.jsx
index a809cbb..d14901f 100644
--- a/src/layouts/main/components/footer/Footer.jsx
+++ b/src/layouts/main/components/footer/Footer.jsx
@@ -15,7 +15,7 @@ const Footer = () => {
 				minHeight: "24px",
 			}}
 			justifyContent="center">
-			<Grid2 item>
+			<Grid2>
 				<Typography
 					inline="true"
 					variant="body1"
diff --git a/src/pages/about/About.jsx b/src/pages/about/About.jsx
index 7740d63..acb6ec9 100644
--- a/src/pages/about/About.jsx
+++ b/src/pages/about/About.jsx
@@ -24,12 +24,12 @@ const About = () => {
 						alignItems="flex-end"
 						justifyContent="flex-end"
 						spacing={3}>
-						<Grid2 item>
-							<Typography variant="h4" align="right" inline="true">
+						<Grid2>
+							<Typography align="right" inline="true" sx={{ fontSize: "32px" }}>
 								Software Developer
 							</Typography>
 						</Grid2>
-						<Grid2 item>
+						<Grid2>
 							<Typography
 								variant="h1"
 								gutterBottom
@@ -48,14 +48,14 @@ const About = () => {
 							</Typography>
 						</Grid2>
 
-						<Grid2 item>
-							<Typography align="right" inline="true" variant="h6">
+						<Grid2>
+							<Typography align="right" inline="true" sx={{ fontSize: "22px" }}>
 								Characterized by the desire of understanding and implementing
 								technological innovations.
 							</Typography>
 						</Grid2>
 
-						<Grid2 item>
+						<Grid2>
 							<Typography align="right" inline="true">
 								Contact
 							</Typography>
diff --git a/src/pages/landing/Landing.jsx b/src/pages/landing/Landing.jsx
index 0bc9ce1..043d05c 100644
--- a/src/pages/landing/Landing.jsx
+++ b/src/pages/landing/Landing.jsx
@@ -10,9 +10,9 @@ const Home = () => {
 	const t = useIntl();
 	return (
 		<Grid2 container direction="column" alignItems="stretch">
-			<Grid2 item container direction="column">
-				<Grid2 item>
-					<Typography variant="h3">
+			<Grid2 container direction="column">
+				<Grid2>
+					<Typography variant="h3" marginTop={4} marginBottom={2}>
 						{t.formatMessage({
 							id: "navigation.projects",
 							defaultMessage: "Projects",
@@ -20,14 +20,14 @@ const Home = () => {
 					</Typography>
 					<Divider variant="inset" />
 				</Grid2>
-				<Grid2 item>
+				<Grid2>
 					<Projects />
 				</Grid2>
 			</Grid2>
 
-			<Grid2 item container direction="column">
-				<Grid2 item>
-					<Typography variant="h3">
+			<Grid2 container direction="column">
+				<Grid2>
+					<Typography variant="h3" marginTop={4} marginBottom={2}>
 						{t.formatMessage({
 							id: "navigation.best-practices",
 							defaultMessage: "Best Practices",
@@ -35,14 +35,14 @@ const Home = () => {
 					</Typography>
 					<Divider variant="inset" />
 				</Grid2>
-				<Grid2 item>
+				<Grid2>
 					<BestPractices />
 				</Grid2>
 			</Grid2>
 
-			<Grid2 item container direction="column">
-				<Grid2 item>
-					<Typography variant="h3">
+			<Grid2 container direction="column">
+				<Grid2>
+					<Typography variant="h3" marginTop={4} marginBottom={2}>
 						{t.formatMessage({
 							id: "navigation.blog",
 							defaultMessage: "Blog",
@@ -50,13 +50,13 @@ const Home = () => {
 					</Typography>
 					<Divider variant="inset" />
 				</Grid2>
-				<Grid2 item>
+				<Grid2>
 					<Blog />
 				</Grid2>
 			</Grid2>
 
-			<Grid2 item container justifyContent="flex-end">
-				<Grid2 item>
+			<Grid2 container justifyContent="flex-end">
+				<Grid2>
 					<About />
 				</Grid2>
 			</Grid2>