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="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 />
src/components/blog-accordion/BlogAccordion.jsx
+6 -2
View File
@@ -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>
))}
src/components/main-accordion/MainAccordion.jsx
+2 -8
View File
@@ -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}
src/components/main-card/MainCard.jsx
+45 -45
View File
@@ -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;
src/layouts/common/darkModeToggle/DarkModeToggle.jsx
+8 -1
View File
@@ -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 />
) : (
src/layouts/common/languageSwitcher/LanguageSwitcher.jsx
+6 -1
View File
@@ -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>
src/layouts/landing/components/header/Header.jsx
+40 -43
View File
@@ -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>
src/layouts/main/components/footer/Footer.jsx
+1 -1
View File
@@ -15,7 +15,7 @@ const Footer = () => {
minHeight: "24px",
}}
justifyContent="center">
<Grid2 item>
<Grid2>
<Typography
inline="true"
variant="body1"
src/pages/about/About.jsx
+6 -6
View File
@@ -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>
src/pages/landing/Landing.jsx
+14 -14
View File
@@ -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>