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
+45 -45
View File
@@ -1,61 +1,61 @@
import React from "react"; import React from "react";
import { import {
Card, Card,
CardContent, CardContent,
CardMedia, CardMedia,
CardActionArea, CardActionArea,
Typography, Typography,
} from "@mui/material"; } from "@mui/material";
import { useTheme } from "@mui/material/styles"; import { useTheme } from "@mui/material/styles";
import { Tilt } from "./Tilt"; import { Tilt } from "./Tilt";
const MainCard = ({ imageURL, title, description, url }) => { const MainCard = ({ imageURL, title, description, url }) => {
const theme = useTheme(); const theme = useTheme();
const options = { const options = {
reverse: true, reverse: true,
speed: 1200, speed: 1200,
easing: "cubic-bezier(.09,.67,.54,.76)", easing: "cubic-bezier(.09,.67,.54,.76)",
}; };
return ( return (
<Tilt <Tilt
// style={{ padding: 0, margin: 0 }} // style={{ padding: 0, margin: 0 }}
options={options} options={options}
children={ children={
<Card <Card
sx={{ sx={{
maxWidth: "320px", minWidth: "320px",
mx: "auto", maxWidth: "320px",
color: theme.palette.text.secondary, marginLeft: "auto",
backgroundColor: theme.palette.background.paper, marginRight: "auto",
}} color: theme.palette.text.secondary,
> backgroundColor: theme.palette.background.paper,
<CardMedia }}>
component="img" <CardMedia
height="150" component="img"
image={imageURL} height="150"
alt={title} image={imageURL}
/> alt={title}
/>
<Typography variant="body2">{description}</Typography> <Typography variant="body2">{description}</Typography>
<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> </CardActionArea>
</CardActionArea> </Card>
</Card> }
} />
/> );
);
}; };
export default MainCard; export default MainCard;
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
+40 -43
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,47 +38,43 @@ const Header = () => {
}} }}
elevation={0}> elevation={0}>
<Toolbar> <Toolbar>
<Grid2 <Typography component="div" sx={{ flexGrow: 1, display: "block" }}>
container <Breadcrumbs aria-label="breadcrumb">
sx={{ <Typography
width: "100%", component="span"
justifyContent: "space-between", sx={{
alignItems: "center", textTransform: "uppercase",
}}> letterSpacing: ".2rem",
<Grid2 item> fontSize: "1.6rem",
<Breadcrumbs aria-label="breadcrumb"> }}>
<Typography Dan Dobos
variant="h5" </Typography>
sx={{ {/*href="#about" is used to navigate within the page */}
textTransform: "uppercase", <MaterialLink
letterSpacing: ".2rem", color="textPrimary"
}}> href="#about"
Dan Dobos sx={{ cursor: "pointer" }}>
</Typography> About
{/*href="#about" is used to navigate within the page */} </MaterialLink>
<MaterialLink </Breadcrumbs>
color="textPrimary" </Typography>
href="#about"
sx={{ cursor: "pointer" }}> <Box sx={{ display: "block" }}>
About <Link to="/projects">
</MaterialLink> <IconButton
</Breadcrumbs> aria-label="Projects"
</Grid2> size="large"
<Grid2 item> sx={{
<Grid2 container alignItems="center"> // px: 2,
<Link to="/projects"> mx: 2,
<IconButton color: theme.palette.text.secondary,
aria-label="Projects" }}>
disableRipple <ThreeSixtyIcon />
sx={{ mr: 1, color: theme.palette.text.secondary }}> </IconButton>
<ThreeSixtyOutlinedIcon /> </Link>
</IconButton> <LanguageSwitcher />
</Link> <DarkModeToggle />
<LanguageSwitcher /> </Box>
<DarkModeToggle />
</Grid2>
</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>