Refactor project data structure, add internationalization support, and enhance UI components

- Updated project data files to improve formatting and consistency.
- Introduced language support with English and Dutch translations.
- Implemented language switcher and dark mode toggle in the header and footer.
- Enhanced navigation components to utilize internationalized strings.
- Refactored layout components to use Grid2 for better responsiveness.
- Improved accessibility and usability across various components.

.vscode/launch.json

@@ -5,11 +5,11 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "type": "pwa-chrome",
+      "name": "Launch Chrome",
       "request": "launch",
-      "name": "Launch Chrome against localhost",
+      "type": "chrome",
-      "url": "http://localhost:8080",
+      "url": "http://localhost:3000",
-      "webRoot": "${workspaceFolder}"
+      "webRoot": "${workspaceFolder}/src"
     }
   ]
 }

package.json

@@ -6,14 +6,15 @@
 	"dependencies": {
 		"@emotion/react": "^11.14.0",
 		"@emotion/styled": "^11.14.0",
-    "@mui/icons-material": "^6.4.12",
+		"@mui/icons-material": "^6.5.0",
-    "@mui/material": "^7.3.4",
+		"@mui/material": "^6.5.0",
-    "@mui/styles": "^6.0.0",
+		"@mui/styles": "^6.5.0",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.6.1",
-    "react": "^19.2.0",
+		"react": "^18.0.0",
-    "react-dom": "^19.2.0",
+		"react-dom": "^18.0.0",
+		"react-intl": "^7.1.14",
 		"react-router-dom": "^7.9.4",
 		"react-scripts": "^5.0.1",
 		"react-spring": "^10.0.3",

public/manifest.json

@@ -1,24 +1,8 @@
 {
 	"short_name": "DAD",
 	"name": "Dan Andrei Dobos",
-  "icons": [
+	"icons": [],
-    {
+	"start_url": "/me",
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
 	"display": "standalone",
 	"theme_color": "#000000",
 	"background_color": "#ffffff"

src/App.js

@@ -1,5 +1,6 @@
-import React, { useState, useMemo, createContext } from "react";
+import React, { useState, useMemo, createContext, useCallback } from "react";
 import { BrowserRouter as Router } from "react-router-dom";
+import { IntlProvider } from "react-intl";
 
 import {
   responsiveFontSizes,
@@ -9,10 +10,38 @@ import {
 import { MainTheme } from "./themes/Theme";
 import { CustomRoutes } from "./routes/Routes";
 
-export const ColorModeContext = createContext({ toggleColorMode: () => {} });
+import messages from "./lang/index"; // new import
+// import LanguageSwitcher from "./components/LanguageSwitcher"; // new small component
+
+export const AppContext = createContext({
+  toggleColorMode: () => {},
+  locale: "en",
+  setLocale: () => {},
+});
 
 const App = () => {
   const [mode, setMode] = useState("dark");
+
+  const [localeState, setLocaleState] = useState(() => {
+    try {
+      const saved = localStorage.getItem("locale");
+      if (saved) return saved;
+    } catch (e) {
+      /* ignore (SSR or disabled storage) */
+    }
+    const nav = typeof navigator !== "undefined" ? navigator.language?.split("-")[0] : null;
+    return messages[nav] ? nav : "en";
+  });
+
+  const setLocale = useCallback((newLocale) => {
+    setLocaleState(newLocale);
+    try {
+      localStorage.setItem("locale", newLocale);
+    } catch (e) {
+      /* ignore write failures */
+    }
+  }, []);
+
   const colorMode = useMemo(
     () => ({
       toggleColorMode: () => {
@@ -22,19 +51,28 @@ const App = () => {
     [],
   );
 
+  const contextValue = useMemo(
+    () => ({ ...colorMode, locale: localeState, setLocale }),
+    [colorMode, localeState, setLocale],
+  );
+
   const theme = useMemo(
     () => responsiveFontSizes(createTheme(MainTheme(mode))),
     [mode],
   );
 
   return (
-    <ColorModeContext.Provider value={colorMode}>
+    <IntlProvider locale={localeState} messages={messages[localeState]} defaultLocale="en">
+      <AppContext.Provider value={contextValue}>
         <ThemeProvider theme={theme}>
+          {/* quick language switcher; move or style as needed */}
+          {/* <LanguageSwitcher locale={localeState} setLocale={setLocale} /> */}
           <Router basename={process.env.PUBLIC_URL}>
             <CustomRoutes />
           </Router>
         </ThemeProvider>
-    </ColorModeContext.Provider>
+      </AppContext.Provider>
+    </IntlProvider>
   );
 };
 

src/components/blog-accordion/BlogAccordion.jsx

@@ -9,29 +9,40 @@ import {
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 const BlogAccordion = ({ blogContent }) => {
-  return blogContent.map(({ title, description }) => (
+	// normalize blogContent to an array to avoid `map` errors
-    <Accordion
+	const items = Array.isArray(blogContent)
-      // defaultExpanded
+		? blogContent
-      // slotProps={{ unmountOnExit: true }}
+		: blogContent
-      key={title}
+		? [blogContent]
-      sx={{ background: "transparent" }}
+		: [];
-    >
+
+	if (items.length === 0) return null;
+
+	return items.map(({ title, description }, itemIdx) => {
+		const lines = Array.isArray(description)
+			? description
+			: description
+			? [description]
+			: [];
+
+		return (
+			<Accordion key={title ?? itemIdx}>
 				<AccordionSummary
 					expandIcon={<ExpandMoreIcon />}
-        aria-controls="panel1a-content"
+					aria-controls={`panel-${itemIdx}-content`}
-        id="panel1a-header"
+					id={`panel-${itemIdx}-header`}>
-      >
 					<Typography variant="h5">{title}</Typography>
 				</AccordionSummary>
 				<AccordionDetails>
-        {description.map((lineContent, idx) => (
+					{lines.map((lineContent, idx) => (
-          <Typography key={idx} paragraph>
+						<Typography key={`${itemIdx}-${idx}`} paragraph>
 							{lineContent}
 						</Typography>
 					))}
 				</AccordionDetails>
 			</Accordion>
-  ));
+		);
+	});
 };
 
 export default BlogAccordion;

src/components/main-accordion/MainAccordion.jsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {
-  Grid,
+	Grid2,
 	Accordion,
 	AccordionSummary,
 	AccordionDetails,
@@ -13,42 +13,37 @@ const MainAccordion = ({ items, title }) => {
 	return (
 		<Accordion
 			defaultExpanded
-      TransitionProps={{ unmountOnExit: true }}
+			slotProps={{ transition: { unmountOnExit: true } }}>
-      sx={{ background: "transparent" }}
-    >
 			<AccordionSummary
 				expandIcon={<ExpandMoreIcon />}
 				aria-controls="panel1a-content"
-        id="panel1a-header"
+				id="panel1a-header">
-      >
 				<Typography variant="h5">{title}</Typography>
 			</AccordionSummary>
 			<AccordionDetails>
-        <Grid
+				<Grid2
 					container
 					direction="row"
 					alignItems="flex-start"
 					justifyContent="baseline"
-          spacing={3}
+					spacing={3}>
-        >
 					{items.map((project) => (
-            <Grid
+						<Grid2
 							item
 							xs={12}
 							sm={6}
 							md={4}
 							key={project.title}
-              sx={{ alignItems: "center", justifyContent: "center" }}
+							sx={{ alignItems: "center", justifyContent: "center" }}>
-            >
 							<MainCard
 								imageURL={project.imageURL}
 								title={project.title}
 								description={project.description}
 								url={project.url}
 							/>
-            </Grid>
+						</Grid2>
 					))}
-        </Grid>
+				</Grid2>
 			</AccordionDetails>
 		</Accordion>
 	);

src/data/Data.jsx

@@ -92,24 +92,3 @@ export const CSSData = [
 		url: "https://codepen.io/diaid/full/xxJRGMB",
 	},
 ];
-
-export const PantoneBlog = [
-  `For 2025, the Pantone Color Institute selects PANTONE 17-1230 Mocha Mousse, 
-a warming, brown hue imbued with richness. It nurtures us with its suggestion of the delectable qualities 
-of chocolate and coffee, answering our desire for comfort.`,
-];
-
-export const BlogContent = [
-  {
-    title: "Pantone color 2025",
-    description: [
-      "A Pantone color is a standardized, proprietary color created by the Pantone company, which assigns a unique code to each color. These colors are used in various industries to ensure color consistency across different materials and locations, as they provide a shared language for specifying and reproducing colors accurately. Pantone colors are often more vibrant and consistent than colors created with the standard CMYK or RGB color models.",
-
-      "For 2025, the Pantone Color Institute selects PANTONE 17-1230 Mocha Mousse, a warming, brown hue imbued with richness. It nurtures us with its suggestion of the delectable qualities of chocolate and coffee, answering our desire for comfort.",
-    ],
-  },
-  {
-    title: "How I achieved 100% on Lighthouse Audit",
-    description: ["TBA"],
-  },
-];

src/lang/en.json

@@ -0,0 +1,15 @@
+{
+	"navigation.home": "home",
+	"navigation.projects": "Projects",
+	"navigation.best-practices": "Best Practices",
+	"navigation.blog": "Blog",
+	"navigation.about": "About",
+	"blog.pantone.title": "Exploring Pantone Colors: A Journey Through Shades and Hues",
+	"blog.pantone.description.line1": "A Pantone color is a standardized, proprietary color created by the Pantone company, which assigns a unique code to each color. These colors are used in various industries to ensure color consistency across different materials and locations, as they provide a shared language for specifying and reproducing colors accurately. Pantone colors are often more vibrant and consistent than colors created with the standard CMYK or RGB color models.",
+
+	"blog.pantone.description.line2": "For 2025, the Pantone Color Institute selects PANTONE 17-1230 Mocha Mousse, a warming, brown hue imbued with richness. It nurtures us with its suggestion of the delectable qualities of chocolate and coffee, answering our desire for comfort.",
+
+	"blog.lighthouse.title": "How to achieve 100% on Lighthouse Audit",
+	"blog.lighthouse.description.line1": "Achieving a perfect score of 100% on a Lighthouse audit is a significant accomplishment that reflects a website's excellence in performance, accessibility, best practices, SEO, and progressive web app (PWA) standards. Lighthouse is an open-source tool developed by Google that helps developers improve the quality of their web pages by providing audits and recommendations across these key areas.",
+	"blog.lighthouse.description.line2": "The secret to achieving a perfect score of 100% on a Lighthouse audit lies in meticulous attention to detail and adherence to best practices across all evaluated categories. By optimizing performance through techniques such as lazy loading, minimizing render-blocking resources, and leveraging browser caching, you can significantly enhance page load times. Ensuring accessibility involves implementing semantic HTML, providing alternative text for images, and ensuring keyboard navigability. Following best practices includes using HTTPS, avoiding deprecated APIs, and ensuring responsive design. For SEO, optimizing meta tags, using descriptive URLs, and ensuring mobile-friendliness are crucial. Lastly, adhering to PWA standards by enabling service workers and providing a web app manifest can further boost the score. Continuous testing and iteration based on Lighthouse feedback are essential to maintain and improve the score over time."
+}

src/lang/index.js

@@ -0,0 +1,9 @@
+export { default as en } from "./en.json";
+export { default as es } from "./nl.json";
+
+const messages = {
+  en: require("./en.json"),
+  nl: require("./nl.json"),
+};
+
+export default messages;

src/lang/nl.json

@@ -0,0 +1,14 @@
+{
+	"navigation.home": "Startpagina",
+	"navigation.projects": "Projecten",
+	"navigation.best-practices": "Beste praktijken",
+	"navigation.blog": "Blog",
+	"navigation.about": "Over",
+	"blog.pantone.title": "Pantone-kleuren verkennen: een reis door tinten en nuances",
+	"blog.pantone.description.line1": "Een Pantone-kleur is een gestandaardiseerde, propriëtaire kleur die is ontwikkeld door het bedrijf Pantone, dat elke kleur een unieke code toekent. Deze kleuren worden in diverse sectoren gebruikt om kleurconsistentie te waarborgen over verschillende materialen en locaties, omdat ze een gemeenschappelijke taal bieden voor het nauwkeurig specificeren en reproduceren van kleuren. Pantone-kleuren zijn vaak levendiger en consistenter dan kleuren die met de standaard CMYK- of RGB-kleurmodellen worden gemaakt.",
+
+	"blog.pantone.description.line2": "Voor 2025 kiest het Pantone Color Institute PANTONE 17-1230 Mocha Mousse, een verwarmende bruine tint vol diepte. Hij omhult ons met zijn suggestie van de verrukkelijke eigenschappen van chocolade en koffie en spreekt onze behoefte aan troost aan.",
+	"blog.lighthouse.title": "Hoe 100% behalen op Lighthouse Audit",
+	"blog.lighthouse.description.line1": "Het behalen van een perfecte score van 100% op een Lighthouse-audit is een belangrijke prestatie die de uitmuntendheid van een website weerspiegelt op het gebied van prestaties, toegankelijkheid, best practices, SEO en progressive web app (PWA) standaarden. Lighthouse is een open-source tool ontwikkeld door Google die ontwikkelaars helpt de kwaliteit van hun webpagina's te verbeteren door audits en aanbevelingen te geven op deze belangrijke gebieden.",
+	"blog.lighthouse.description.line2": "Het geheim om een perfecte score van 100% te behalen op een Lighthouse-audit ligt in nauwgezette aandacht voor detail en het naleven van best practices in alle geëvalueerde categorieën. Door de prestaties te optimaliseren met technieken zoals lazy loading, het minimaliseren van render-blockerende bronnen en het benutten van browsercaching, kun je de laadtijden aanzienlijk verbeteren. Toegankelijkheid waarborgen betekent het implementeren van semantische HTML, alternatieve tekst voor afbeeldingen bieden en zorgen voor toetsenbordnavigatie. Best practices volgen omvat het gebruik van HTTPS, het vermijden van verouderde API's en het zorgen voor een responsief ontwerp. Voor SEO is het optimaliseren van metatags, het gebruiken van beschrijvende URL's en het waarborgen van mobielvriendelijkheid cruciaal. Tot slot kan het naleven van PWA-standaarden door service workers in te schakelen en een webapp-manifest te bieden de score verder verhogen. Voortdurend testen en itereren op basis van Lighthouse-feedback is essentieel om de score in de loop van de tijd te behouden en te verbeteren."
+}

src/layouts/common/darkModeToggle/DarkModeToggle.jsx

@@ -1,19 +1,18 @@
 import React, { useContext } from "react";
 import { IconButton } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import { ColorModeContext } from "App";
+import { AppContext } from "App";
 import WbSunnyOutlinedIcon from "@mui/icons-material/WbSunnyOutlined";
 import NightsStayOutlinedIcon from "@mui/icons-material/NightsStayOutlined";
 
 const DarkModeToggle = () => {
 	const theme = useTheme();
-  const colorMode = useContext(ColorModeContext);
+	const appContext = useContext(AppContext);
 
 	return (
 		<IconButton
-      onClick={colorMode.toggleColorMode}
+			onClick={appContext.toggleColorMode}
-      sx={{ color: theme.palette.text.secondary }}
+			sx={{ color: theme.palette.text.secondary }}>
-    >
 			{theme.palette.mode === "dark" ? (
 				<WbSunnyOutlinedIcon />
 			) : (

src/layouts/common/languageSwitcher/LanguageSwitcher.jsx

@@ -0,0 +1,28 @@
+import React, { useContext } from "react";
+import { AppContext } from "App";
+import { useTheme } from "@mui/material/styles";
+import { IconButton } from "@mui/material";
+// import { FormattedMessage } from "react-intl";
+import LanguageOutlinedIcon from "@mui/icons-material/LanguageOutlined";
+
+const LanguageSwitcher = () => {
+	const theme = useTheme();
+	const appContext = useContext(AppContext);
+	return (
+		<IconButton
+			onClick={() => {
+				const setLocale = appContext && appContext.setLocale;
+				if (typeof setLocale === "function") {
+					setLocale(appContext.locale === "en" ? "nl" : "en");
+				}
+			}}
+			sx={{
+				color: theme.palette.text.secondary,
+				alignSelf: "right",
+			}}>
+			{<LanguageOutlinedIcon />}
+		</IconButton>
+	);
+};
+
+export default LanguageSwitcher;

src/layouts/common/languageSwitcher/index.js

@@ -0,0 +1 @@
+export { default } from "./LanguageSwitcher";

src/layouts/landing/LandingLayout.jsx

@@ -2,7 +2,7 @@ import React, { useContext } from "react";
 
 import { ThemeProvider } from "@mui/material/styles";
 
-import { ColorModeContext } from "App";
+import { AppContext } from "App";
 import { LandingWhite } from "themes/Theme";
 import FullScreenContainer from "layouts/common/fullScreenContainer";
 
@@ -12,10 +12,10 @@ import Header from "./components/header";
 const LandingLayout = (props) => {
 	const { children } = props;
 
-  const colorMode = useContext(ColorModeContext);
+	const colorMode = useContext(AppContext);
 
 	return (
-    <ColorModeContext.Provider value={colorMode}>
+		<AppContext.Provider value={colorMode}>
 			<ThemeProvider theme={LandingWhite}>
 				<div id="back-to-top-anchor" />
 				<Header />
@@ -24,7 +24,7 @@ const LandingLayout = (props) => {
 					<BackToTop />
 				</FullScreenContainer>
 			</ThemeProvider>
-    </ColorModeContext.Provider>
+		</AppContext.Provider>
 	);
 };
 

src/layouts/landing/components/header/Header.jsx

@@ -9,12 +9,13 @@ import {
 	Typography,
 	Breadcrumbs,
 	Link as MaterialLink,
-  Grid,
+	Grid2,
 	IconButton,
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import ThreeSixtyOutlinedIcon from "@mui/icons-material/ThreeSixtyOutlined";
 
+import LanguageSwitcher from "layouts/common/languageSwitcher";
 import DarkModeToggle from "layouts/common/darkModeToggle";
 import HideOnScroll from "layouts/common/hideOnScroll";
 
@@ -34,53 +35,49 @@ const Header = () => {
 							backgroundColor: theme.palette.background.default,
 						},
 					}}
-          elevation={0}
+					elevation={0}>
-        >
 					<Toolbar>
-            <Grid
+						<Grid2
 							container
 							sx={{
 								width: "100%",
 								justifyContent: "space-between",
 								alignItems: "center",
-              }}
+							}}>
-            >
+							<Grid2 item>
-              <Grid 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" }}
+										sx={{ cursor: "pointer" }}>
-                  >
 										About
 									</MaterialLink>
 								</Breadcrumbs>
-              </Grid>
+							</Grid2>
-              <Grid item>
+							<Grid2 item>
-                <Grid container alignItems="center">
+								<Grid2 container alignItems="center">
 									<Link to="/projects">
 										<IconButton
 											aria-label="Projects"
 											disableRipple
-                      sx={{ mr: 1 }}
+											sx={{ mr: 1, color: theme.palette.text.secondary }}>
-                    >
 											<ThreeSixtyOutlinedIcon />
 										</IconButton>
 									</Link>
+									<LanguageSwitcher />
 									<DarkModeToggle />
-                </Grid>
+								</Grid2>
-              </Grid>
+							</Grid2>
-            </Grid>
+						</Grid2>
 					</Toolbar>
 				</AppBar>
 			</HideOnScroll>

src/layouts/main/components/footer/Footer.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Grid, Typography } from "@mui/material";
+import { Grid2, Typography } from "@mui/material";
 
 const Footer = () => {
 	const getCurrentYear = () => {
@@ -7,25 +7,23 @@ const Footer = () => {
 	};
 
 	return (
-    <Grid
+		<Grid2
 			container
 			sx={{
 				marginTop: "auto",
 				zIndex: 1300,
 				minHeight: "24px",
 			}}
-      justifyContent="center"
+			justifyContent="center">
-    >
+			<Grid2 item>
-      <Grid item>
 				<Typography
 					inline="true"
 					variant="body1"
-          fontFamily="Nanum Gothic Coding"
+					fontFamily="Nanum Gothic Coding">
-        >
 					Dan Dobos &copy; {getCurrentYear()}
 				</Typography>
-      </Grid>
+			</Grid2>
-    </Grid>
+		</Grid2>
 	);
 };
 

src/layouts/main/components/header/Header.jsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { AppBar, Toolbar, CssBaseline, Box } from "@mui/material";
 
+import LanguageSwitcher from "layouts/common/languageSwitcher";
 import DarkModeToggle from "layouts/common/darkModeToggle";
 import HideOnScroll from "layouts/common/hideOnScroll";
 import Navigation from "./navigation";
@@ -14,7 +15,8 @@ const Header = () => {
 				<AppBar sx={{ position: "fixed", zIndex: 1301 }} elevation={0}>
 					<Toolbar>
 						<Navigation />
-            <Box sx={{ display: { sm: "block", xs: "none" } }}>
+						<Box sx={{ display: { sm: "inline-flex", xs: "none" } }}>
+							<LanguageSwitcher />
 							<DarkModeToggle />
 						</Box>
 					</Toolbar>

src/layouts/main/components/header/navigation/Navigation.jsx

@@ -11,15 +11,20 @@ import {
 	ListItem,
 	ListItemText,
 	List,
+	ListItemButton,
+	Box,
 } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import MenuIcon from "@mui/icons-material/Menu";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
 
+import { useIntl } from "react-intl";
+import LanguageSwitcher from "layouts/common/languageSwitcher";
 import DarkModeToggle from "layouts/common/darkModeToggle";
 
 const Navigation = () => {
 	const theme = useTheme();
+	const t = useIntl();
 
 	const matches = useMediaQuery(theme.breakpoints.down("sm"));
 	const iOS =
@@ -45,32 +50,47 @@ const Navigation = () => {
 	const routes = useMemo(
 		() => [
 			{
-        name: "Home",
+				name: t.formatMessage({
+					id: "navigation.home",
+					defaultMessage: "Home",
+				}),
 				link: "/",
 				activeIndex: 0,
 			},
 			{
-        name: "Projects",
+				name: t.formatMessage({
+					id: "navigation.projects",
+					defaultMessage: "Projects",
+				}),
 				link: "/projects",
 				activeIndex: 1,
 			},
 			{
-        name: "Best Practices",
+				name: t.formatMessage({
+					id: "navigation.best-practices",
+					defaultMessage: "Best Practices",
+				}),
 				link: "/best-practices",
 				activeIndex: 2,
 			},
 			{
-        name: "Blog",
+				name: t.formatMessage({
+					id: "navigation.blog",
+					defaultMessage: "Blog",
+				}),
 				link: "/blog",
 				activeIndex: 3,
 			},
 			{
-        name: "About",
+				name: t.formatMessage({
+					id: "navigation.about",
+					defaultMessage: "About",
+				}),
 				link: "/about",
 				activeIndex: 4,
 			},
 		],
-    [],
+		[t]
 	);
 
 	useEffect(() => {
@@ -98,20 +118,17 @@ const Navigation = () => {
 					backgroundColor: "inherit",
 					color: theme.palette.secondary.contrastText,
 					boxShadow: "none",
-        }}
+				}}>
-      >
 				<IconButton
 					size="large"
 					onClick={() => setOpenDrawer(!openDrawer)}
-          color="inherit"
+					sx={{ color: theme.palette.text.secondary }}>
-        >
+					{openDrawer ? <MenuOpenIcon /> : <MenuIcon />}
-          {openDrawer ? (
-            <MenuOpenIcon fontSize="inherit" />
-          ) : (
-            <MenuIcon fontSize="inherit" />
-          )}
 				</IconButton>
-        <DarkModeToggle style={{ alignSelf: "right", color: "inherit" }} />
+				<Box sx={{ display: "inline-flex" }}>
+					<LanguageSwitcher />
+					<DarkModeToggle />
+				</Box>
 			</Paper>
 
 			{matches ? (
@@ -124,41 +141,40 @@ const Navigation = () => {
 					onClose={() => setOpenDrawer(false)}
 					sx={{
 						backgroundColor: "transparent",
-          }}
+					}}>
-        >
 					<List sx={{ paddingTop: "4rem" }}>
 						{routes.map((route) => (
 							<ListItem
 								sx={{
-                  padding: "1.5rem 2rem ",
+									// padding: "1.5rem 2rem ",
 									color: theme.palette.text.secondary,
 									width: "100%",
 									"&.Mui-selected": {
 										backgroundColor: theme.palette.background.paper,
 									},
 								}}
-                key={`${route}${route.activeIndex}`}
+								key={`${route.activeIndex}`}
-                button
+								disablePadding>
+								<ListItemButton
 									component={Link}
 									to={route.link}
 									value={route.activeIndex}
 									selected={value === route.activeIndex}
 									onClick={() => {
 										setValue(route.activeIndex);
-
 										handleDrawerClose();
 									}}
-              >
+									sx={{ padding: "1.5rem 2rem" }}>
 									<ListItemText
 										disableTypography
 										sx={{
 											alignItems: "flex-start",
 											fontSize: "1.2rem",
 											textTransform: "capitalize",
-                  }}
+										}}>
-                >
 										{route.name}
 									</ListItemText>
+								</ListItemButton>
 							</ListItem>
 						))}
 					</List>
@@ -168,8 +184,7 @@ const Navigation = () => {
 					elevation={0}
 					sx={{
 						display: { sm: "block", xs: "none" },
-          }}
+					}}>
-        >
 					<Tabs
 						action={tabsActions}
 						value={value}
@@ -180,8 +195,7 @@ const Navigation = () => {
 								background: theme.palette.secondary.contrastText,
 								height: "3px",
 							},
-            }}
+						}}>
-          >
 						{routes.map((route) => (
 							<Tab
 								disableRipple

src/pages/about/About.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Container, Grid, Typography, Link } from "@mui/material";
+import { Container, Grid2, Typography, Link } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 
 const About = () => {
@@ -7,32 +7,29 @@ const About = () => {
 
 	return (
 		<Container id="about">
-      <Grid
+			<Grid2
 				container
 				direction="row"
 				alignItems="stretch"
-        justifyContent="flex-end"
+				justifyContent="flex-end">
-      >
 				<div
 					style={{
 						minHeight: "70vh",
 						display: "flex",
 						alignItems: "flex-end",
-          }}
+					}}>
-        >
+					<Grid2
-          <Grid
 						container
 						direction="column"
 						alignItems="flex-end"
 						justifyContent="flex-end"
-            spacing={3}
+						spacing={3}>
-          >
+						<Grid2 item>
-            <Grid item>
 							<Typography variant="h4" align="right" inline="true">
 								Software Developer
 							</Typography>
-            </Grid>
+						</Grid2>
-            <Grid item>
+						<Grid2 item>
 							<Typography
 								variant="h1"
 								gutterBottom
@@ -46,20 +43,19 @@ const About = () => {
 										textAlign: "right",
 										letterSpacing: "1rem",
 									},
-                }}
+								}}>
-              >
 								Dan Dobos
 							</Typography>
-            </Grid>
+						</Grid2>
 
-            <Grid item>
+						<Grid2 item>
 							<Typography align="right" inline="true" variant="h6">
 								Characterized by the desire of understanding and implementing
 								technological innovations.
 							</Typography>
-            </Grid>
+						</Grid2>
 
-            <Grid item>
+						<Grid2 item>
 							<Typography align="right" inline="true">
 								Contact
 							</Typography>
@@ -67,14 +63,13 @@ const About = () => {
 								variant="h6"
 								href="mailto:danandreidobos@gmail.com"
 								target="_blank"
-                color="inherit"
+								color="inherit">
-              >
 								danandreidobos@gmail.com
 							</Link>
-            </Grid>
+						</Grid2>
-          </Grid>
+					</Grid2>
 				</div>
-      </Grid>
+			</Grid2>
 		</Container>
 	);
 };

src/pages/blog/Blog.jsx

@@ -1,14 +1,34 @@
 import React from "react";
 
-import { BlogContent } from "data/Data";
+import { useIntl } from "react-intl";
+
+// import { BlogContent } from "data/Data";
 
 import BlogAccordion from "components/blog-accordion/BlogAccordion";
 
 const Blog = () => {
+	const t = useIntl();
 	return (
 		// <div style={{ minHeight: 'calc(100vh-128px)' }}>Blog ...in progress</div>
 		<>
-      <BlogAccordion blogContent={BlogContent} />
+			<BlogAccordion
+				blogContent={{
+					title: t.formatMessage({ id: "blog.pantone.title" }),
+					description: [
+						t.formatMessage({ id: "blog.pantone.description.line1" }),
+						t.formatMessage({ id: "blog.pantone.description.line2" }),
+					],
+				}}
+			/>
+			<BlogAccordion
+				blogContent={{
+					title: t.formatMessage({ id: "blog.lighthouse.title" }),
+					description: [
+						t.formatMessage({ id: "blog.lighthouse.description.line1" }),
+						t.formatMessage({ id: "blog.lighthouse.description.line2" }),
+					],
+				}}
+			/>
 		</>
 	);
 };

src/pages/landing/Landing.jsx

@@ -1,49 +1,66 @@
 import React from "react";
-import { Grid, Typography, Divider } from "@mui/material";
+import { Grid2, Typography, Divider } from "@mui/material";
 import About from "../about";
 import Blog from "../blog";
 import BestPractices from "../best-practices";
 import Projects from "../projects";
+import { useIntl } from "react-intl";
 
 const Home = () => {
+	const t = useIntl();
 	return (
-    <Grid container direction="row" alignItems="stretch" spacing={3}>
+		<Grid2 container direction="row" alignItems="stretch" spacing={3}>
-      <Grid item container direction="column">
+			<Grid2 item container direction="column">
-        <Grid item>
+				<Grid2 item>
-          <Typography variant="h3">Projects</Typography>
+					<Typography variant="h3">
+						{t.formatMessage({
+							id: "navigation.projects",
+							defaultMessage: "Projects",
+						})}
+					</Typography>
 					<Divider variant="inset" />
-        </Grid>
+				</Grid2>
-        <Grid item>
+				<Grid2 item>
 					<Projects />
-        </Grid>
+				</Grid2>
-      </Grid>
+			</Grid2>
 
-      <Grid item container direction="column">
+			<Grid2 item container direction="column">
-        <Grid item>
+				<Grid2 item>
-          <Typography variant="h3">Best Practices</Typography>
+					<Typography variant="h3">
+						{t.formatMessage({
+							id: "navigation.best-practices",
+							defaultMessage: "Best Practices",
+						})}
+					</Typography>
 					<Divider variant="inset" />
-        </Grid>
+				</Grid2>
-        <Grid item>
+				<Grid2 item>
 					<BestPractices />
-        </Grid>
+				</Grid2>
-      </Grid>
+			</Grid2>
 
-      <Grid item container direction="column">
+			<Grid2 item container direction="column">
-        <Grid item>
+				<Grid2 item>
-          <Typography variant="h3">Blog</Typography>
+					<Typography variant="h3">
+						{t.formatMessage({
+							id: "navigation.blog",
+							defaultMessage: "Blog",
+						})}
+					</Typography>
 					<Divider variant="inset" />
-        </Grid>
+				</Grid2>
-        <Grid item>
+				<Grid2 item>
 					<Blog />
-        </Grid>
+				</Grid2>
-      </Grid>
+			</Grid2>
 
-      <Grid item container justifyContent="flex-end">
+			<Grid2 item container justifyContent="flex-end">
-        <Grid item>
+				<Grid2 item>
 					<About />
-        </Grid>
+				</Grid2>
-      </Grid>
+			</Grid2>
-    </Grid>
+		</Grid2>
 	);
 };