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.
This commit is contained in:
Dan Dobos
Vendored
+4
-4
@@ -5,11 +5,11 @@
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
{
|
||||
"type": "pwa-chrome",
|
||||
"name": "Launch Chrome",
|
||||
"request": "launch",
|
||||
"name": "Launch Chrome against localhost",
|
||||
"url": "http://localhost:8080",
|
||||
"webRoot": "${workspaceFolder}"
|
||||
"type": "chrome",
|
||||
"url": "http://localhost:3000",
|
||||
"webRoot": "${workspaceFolder}/src"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Generated
+21029
-18756
File diff suppressed because it is too large
Load Diff
+63
-62
@@ -1,64 +1,65 @@
|
||||
{
|
||||
"name": "react-page",
|
||||
"homepage": "https://dadobos.github.io/me/",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^6.4.12",
|
||||
"@mui/material": "^7.3.4",
|
||||
"@mui/styles": "^6.0.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-dom": "^19.2.0",
|
||||
"react-router-dom": "^7.9.4",
|
||||
"react-scripts": "^5.0.1",
|
||||
"react-spring": "^10.0.3",
|
||||
"styled-components": "^6.1.11",
|
||||
"vanilla-tilt": "^1.8.1",
|
||||
"web-vitals": "^5.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"predeploy": "npm run build",
|
||||
"deploy": "gh-pages -d build"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"gh-pages": "^6.1.1"
|
||||
},
|
||||
"description": "This project is build with React and Material UI, and it holds a collection of projects, best practices, and technologies that I want to explore.",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/dadobos/me.git"
|
||||
},
|
||||
"author": "Dan Andrei Dobos",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/dadobos/me/issues"
|
||||
}
|
||||
"name": "react-page",
|
||||
"homepage": "https://dadobos.github.io/me/",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.14.0",
|
||||
"@emotion/styled": "^11.14.0",
|
||||
"@mui/icons-material": "^6.5.0",
|
||||
"@mui/material": "^6.5.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": "^18.0.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",
|
||||
"styled-components": "^6.1.11",
|
||||
"vanilla-tilt": "^1.8.1",
|
||||
"web-vitals": "^5.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject",
|
||||
"predeploy": "npm run build",
|
||||
"deploy": "gh-pages -d build"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"gh-pages": "^6.1.1"
|
||||
},
|
||||
"description": "This project is build with React and Material UI, and it holds a collection of projects, best practices, and technologies that I want to explore.",
|
||||
"main": "index.js",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/dadobos/me.git"
|
||||
},
|
||||
"author": "Dan Andrei Dobos",
|
||||
"license": "ISC",
|
||||
"bugs": {
|
||||
"url": "https://github.com/dadobos/me/issues"
|
||||
}
|
||||
}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.4 KiB |
+7
-23
@@ -1,25 +1,9 @@
|
||||
{
|
||||
"short_name": "DAD",
|
||||
"name": "Dan Andrei Dobos",
|
||||
"icons": [
|
||||
{
|
||||
"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"
|
||||
"short_name": "DAD",
|
||||
"name": "Dan Andrei Dobos",
|
||||
"icons": [],
|
||||
"start_url": "/me",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
}
|
||||
|
||||
+48
-10
@@ -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,20 +51,29 @@ 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}>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Router basename={process.env.PUBLIC_URL}>
|
||||
<CustomRoutes />
|
||||
</Router>
|
||||
</ThemeProvider>
|
||||
</ColorModeContext.Provider>
|
||||
<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>
|
||||
</AppContext.Provider>
|
||||
</IntlProvider>
|
||||
);
|
||||
};
|
||||
|
||||
export default App;
|
||||
export default App;
|
||||
@@ -1,37 +1,48 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
Typography,
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
|
||||
const BlogAccordion = ({ blogContent }) => {
|
||||
return blogContent.map(({ title, description }) => (
|
||||
<Accordion
|
||||
// defaultExpanded
|
||||
// slotProps={{ unmountOnExit: true }}
|
||||
key={title}
|
||||
sx={{ background: "transparent" }}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel1a-content"
|
||||
id="panel1a-header"
|
||||
>
|
||||
<Typography variant="h5">{title}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
{description.map((lineContent, idx) => (
|
||||
<Typography key={idx} paragraph>
|
||||
{lineContent}
|
||||
</Typography>
|
||||
))}
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
));
|
||||
// normalize blogContent to an array to avoid `map` errors
|
||||
const items = Array.isArray(blogContent)
|
||||
? blogContent
|
||||
: blogContent
|
||||
? [blogContent]
|
||||
: [];
|
||||
|
||||
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={`panel-${itemIdx}-content`}
|
||||
id={`panel-${itemIdx}-header`}>
|
||||
<Typography variant="h5">{title}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
{lines.map((lineContent, idx) => (
|
||||
<Typography key={`${itemIdx}-${idx}`} paragraph>
|
||||
{lineContent}
|
||||
</Typography>
|
||||
))}
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
export default BlogAccordion;
|
||||
|
||||
@@ -1,57 +1,52 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Grid,
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
Typography,
|
||||
Grid2,
|
||||
Accordion,
|
||||
AccordionSummary,
|
||||
AccordionDetails,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import MainCard from "components/main-card/MainCard";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
|
||||
const MainAccordion = ({ items, title }) => {
|
||||
return (
|
||||
<Accordion
|
||||
defaultExpanded
|
||||
TransitionProps={{ unmountOnExit: true }}
|
||||
sx={{ background: "transparent" }}
|
||||
>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel1a-content"
|
||||
id="panel1a-header"
|
||||
>
|
||||
<Typography variant="h5">{title}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
alignItems="flex-start"
|
||||
justifyContent="baseline"
|
||||
spacing={3}
|
||||
>
|
||||
{items.map((project) => (
|
||||
<Grid
|
||||
item
|
||||
xs={12}
|
||||
sm={6}
|
||||
md={4}
|
||||
key={project.title}
|
||||
sx={{ alignItems: "center", justifyContent: "center" }}
|
||||
>
|
||||
<MainCard
|
||||
imageURL={project.imageURL}
|
||||
title={project.title}
|
||||
description={project.description}
|
||||
url={project.url}
|
||||
/>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
return (
|
||||
<Accordion
|
||||
defaultExpanded
|
||||
slotProps={{ transition: { unmountOnExit: true } }}>
|
||||
<AccordionSummary
|
||||
expandIcon={<ExpandMoreIcon />}
|
||||
aria-controls="panel1a-content"
|
||||
id="panel1a-header">
|
||||
<Typography variant="h5">{title}</Typography>
|
||||
</AccordionSummary>
|
||||
<AccordionDetails>
|
||||
<Grid2
|
||||
container
|
||||
direction="row"
|
||||
alignItems="flex-start"
|
||||
justifyContent="baseline"
|
||||
spacing={3}>
|
||||
{items.map((project) => (
|
||||
<Grid2
|
||||
item
|
||||
xs={12}
|
||||
sm={6}
|
||||
md={4}
|
||||
key={project.title}
|
||||
sx={{ alignItems: "center", justifyContent: "center" }}>
|
||||
<MainCard
|
||||
imageURL={project.imageURL}
|
||||
title={project.title}
|
||||
description={project.description}
|
||||
url={project.url}
|
||||
/>
|
||||
</Grid2>
|
||||
))}
|
||||
</Grid2>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
);
|
||||
};
|
||||
|
||||
export default MainAccordion;
|
||||
|
||||
+77
-98
@@ -1,115 +1,94 @@
|
||||
export const ReactData = [
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673023170/web/uxfuyzap5kbs1si34g29.png",
|
||||
title: "React Shop",
|
||||
description: "",
|
||||
url: "https://dadobos.github.io/react-shop/",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1685729092/web/tzoxavfsfa44z2o9wrgi.png",
|
||||
title: "React Quiz App",
|
||||
description: "",
|
||||
url: "https://dadobos.github.io/react-quiz-app/",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673023170/web/uxfuyzap5kbs1si34g29.png",
|
||||
title: "React Shop",
|
||||
description: "",
|
||||
url: "https://dadobos.github.io/react-shop/",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1685729092/web/tzoxavfsfa44z2o9wrgi.png",
|
||||
title: "React Quiz App",
|
||||
description: "",
|
||||
url: "https://dadobos.github.io/react-quiz-app/",
|
||||
},
|
||||
];
|
||||
|
||||
export const GoData = [
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1669538934/web/ng0ghejmlsmzhrgyuiz4.png",
|
||||
title: "Pokemon GO Templates",
|
||||
description: "",
|
||||
url: "https://github.com/dadobos/pokemongotemplates",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1669538934/web/ng0ghejmlsmzhrgyuiz4.png",
|
||||
title: "Pokemon GO Templates",
|
||||
description: "",
|
||||
url: "https://github.com/dadobos/pokemongotemplates",
|
||||
},
|
||||
];
|
||||
|
||||
export const WebsitesData = [
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1653850879/web/TheSquareProject_sgflcj.png",
|
||||
title: "The Square Project",
|
||||
description: "",
|
||||
url: "https://dadobos.github.io/The-Square-Project/",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1653850879/web/TheSquareProject_sgflcj.png",
|
||||
title: "The Square Project",
|
||||
description: "",
|
||||
url: "https://dadobos.github.io/The-Square-Project/",
|
||||
},
|
||||
];
|
||||
|
||||
export const JavaData = [
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png",
|
||||
title: "Restaurant Billing System",
|
||||
description: "",
|
||||
url: "https://github.com/dadobos/Restaurant",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png",
|
||||
title: "Billing System",
|
||||
description: "",
|
||||
url: "https://github.com/dadobos/Billing-System",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png",
|
||||
title: "Restaurant Billing System",
|
||||
description: "",
|
||||
url: "https://github.com/dadobos/Restaurant",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png",
|
||||
title: "Billing System",
|
||||
description: "",
|
||||
url: "https://github.com/dadobos/Billing-System",
|
||||
},
|
||||
];
|
||||
|
||||
export const VueData = [
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1654030260/web/WorldCountries_ekx2of.png",
|
||||
title: "World Countries",
|
||||
description: "",
|
||||
url: "https://dadobos.github.io/worldcountries/",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1654030260/web/WorldCountries_ekx2of.png",
|
||||
title: "World Countries",
|
||||
description: "",
|
||||
url: "https://dadobos.github.io/worldcountries/",
|
||||
},
|
||||
];
|
||||
|
||||
export const CSSData = [
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/msvc649ua0gahqegu31o.png",
|
||||
title: "Anchor Tag Hide Components",
|
||||
description: "",
|
||||
url: "https://codepen.io/diaid/full/MWOOogX",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/dprvsa15ocx3l34dxogo.png",
|
||||
title: "Radio Hide Components",
|
||||
description: "",
|
||||
url: "https://codepen.io/diaid/full/qBVdgWW",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673025125/web/anidcin5lbxo2hced5i4.png",
|
||||
title: "Rounded Paragraph",
|
||||
description: "",
|
||||
url: "https://codepen.io/diaid/full/QWxOgVm",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673027940/web/z9qn4wstdtzpr4cf5xtx.png",
|
||||
title: "Responsive Table",
|
||||
description: "",
|
||||
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"],
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/msvc649ua0gahqegu31o.png",
|
||||
title: "Anchor Tag Hide Components",
|
||||
description: "",
|
||||
url: "https://codepen.io/diaid/full/MWOOogX",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/dprvsa15ocx3l34dxogo.png",
|
||||
title: "Radio Hide Components",
|
||||
description: "",
|
||||
url: "https://codepen.io/diaid/full/qBVdgWW",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673025125/web/anidcin5lbxo2hced5i4.png",
|
||||
title: "Rounded Paragraph",
|
||||
description: "",
|
||||
url: "https://codepen.io/diaid/full/QWxOgVm",
|
||||
},
|
||||
{
|
||||
imageURL:
|
||||
"https://res.cloudinary.com/dadobos/image/upload/v1673027940/web/z9qn4wstdtzpr4cf5xtx.png",
|
||||
title: "Responsive Table",
|
||||
description: "",
|
||||
url: "https://codepen.io/diaid/full/xxJRGMB",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -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."
|
||||
}
|
||||
@@ -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;
|
||||
@@ -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."
|
||||
}
|
||||
@@ -1,26 +1,25 @@
|
||||
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 theme = useTheme();
|
||||
const appContext = useContext(AppContext);
|
||||
|
||||
return (
|
||||
<IconButton
|
||||
onClick={colorMode.toggleColorMode}
|
||||
sx={{ color: theme.palette.text.secondary }}
|
||||
>
|
||||
{theme.palette.mode === "dark" ? (
|
||||
<WbSunnyOutlinedIcon />
|
||||
) : (
|
||||
<NightsStayOutlinedIcon />
|
||||
)}
|
||||
</IconButton>
|
||||
);
|
||||
return (
|
||||
<IconButton
|
||||
onClick={appContext.toggleColorMode}
|
||||
sx={{ color: theme.palette.text.secondary }}>
|
||||
{theme.palette.mode === "dark" ? (
|
||||
<WbSunnyOutlinedIcon />
|
||||
) : (
|
||||
<NightsStayOutlinedIcon />
|
||||
)}
|
||||
</IconButton>
|
||||
);
|
||||
};
|
||||
|
||||
export default DarkModeToggle;
|
||||
|
||||
@@ -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;
|
||||
@@ -0,0 +1 @@
|
||||
export { default } from "./LanguageSwitcher";
|
||||
@@ -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";
|
||||
|
||||
@@ -10,22 +10,22 @@ import BackToTop from "../common/backToTop";
|
||||
import Header from "./components/header";
|
||||
|
||||
const LandingLayout = (props) => {
|
||||
const { children } = props;
|
||||
const { children } = props;
|
||||
|
||||
const colorMode = useContext(ColorModeContext);
|
||||
const colorMode = useContext(AppContext);
|
||||
|
||||
return (
|
||||
<ColorModeContext.Provider value={colorMode}>
|
||||
<ThemeProvider theme={LandingWhite}>
|
||||
<div id="back-to-top-anchor" />
|
||||
<Header />
|
||||
<FullScreenContainer>
|
||||
{children}
|
||||
<BackToTop />
|
||||
</FullScreenContainer>
|
||||
</ThemeProvider>
|
||||
</ColorModeContext.Provider>
|
||||
);
|
||||
return (
|
||||
<AppContext.Provider value={colorMode}>
|
||||
<ThemeProvider theme={LandingWhite}>
|
||||
<div id="back-to-top-anchor" />
|
||||
<Header />
|
||||
<FullScreenContainer>
|
||||
{children}
|
||||
<BackToTop />
|
||||
</FullScreenContainer>
|
||||
</ThemeProvider>
|
||||
</AppContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default LandingLayout;
|
||||
|
||||
@@ -3,88 +3,85 @@ import React from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
CssBaseline,
|
||||
Typography,
|
||||
Breadcrumbs,
|
||||
Link as MaterialLink,
|
||||
Grid,
|
||||
IconButton,
|
||||
AppBar,
|
||||
Toolbar,
|
||||
CssBaseline,
|
||||
Typography,
|
||||
Breadcrumbs,
|
||||
Link as MaterialLink,
|
||||
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";
|
||||
|
||||
const Header = () => {
|
||||
const theme = useTheme();
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<HideOnScroll>
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
background: "transparent",
|
||||
zIndex: 1301,
|
||||
[theme.breakpoints.down("lg")]: {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
elevation={0}
|
||||
>
|
||||
<Toolbar>
|
||||
<Grid
|
||||
container
|
||||
sx={{
|
||||
width: "100%",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<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" }}
|
||||
>
|
||||
About
|
||||
</MaterialLink>
|
||||
</Breadcrumbs>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Grid container alignItems="center">
|
||||
<Link to="/projects">
|
||||
<IconButton
|
||||
aria-label="Projects"
|
||||
disableRipple
|
||||
sx={{ mr: 1 }}
|
||||
>
|
||||
<ThreeSixtyOutlinedIcon />
|
||||
</IconButton>
|
||||
</Link>
|
||||
<DarkModeToggle />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</HideOnScroll>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<HideOnScroll>
|
||||
<AppBar
|
||||
position="fixed"
|
||||
sx={{
|
||||
background: "transparent",
|
||||
zIndex: 1301,
|
||||
[theme.breakpoints.down("lg")]: {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
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>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</HideOnScroll>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Header;
|
||||
|
||||
@@ -1,32 +1,30 @@
|
||||
import React from "react";
|
||||
import { Grid, Typography } from "@mui/material";
|
||||
import { Grid2, Typography } from "@mui/material";
|
||||
|
||||
const Footer = () => {
|
||||
const getCurrentYear = () => {
|
||||
return new Date().getFullYear();
|
||||
};
|
||||
const getCurrentYear = () => {
|
||||
return new Date().getFullYear();
|
||||
};
|
||||
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
sx={{
|
||||
marginTop: "auto",
|
||||
zIndex: 1300,
|
||||
minHeight: "24px",
|
||||
}}
|
||||
justifyContent="center"
|
||||
>
|
||||
<Grid item>
|
||||
<Typography
|
||||
inline="true"
|
||||
variant="body1"
|
||||
fontFamily="Nanum Gothic Coding"
|
||||
>
|
||||
Dan Dobos © {getCurrentYear()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
return (
|
||||
<Grid2
|
||||
container
|
||||
sx={{
|
||||
marginTop: "auto",
|
||||
zIndex: 1300,
|
||||
minHeight: "24px",
|
||||
}}
|
||||
justifyContent="center">
|
||||
<Grid2 item>
|
||||
<Typography
|
||||
inline="true"
|
||||
variant="body1"
|
||||
fontFamily="Nanum Gothic Coding">
|
||||
Dan Dobos © {getCurrentYear()}
|
||||
</Typography>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
@@ -2,25 +2,27 @@ 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";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<HideOnScroll>
|
||||
<AppBar sx={{ position: "fixed", zIndex: 1301 }} elevation={0}>
|
||||
<Toolbar>
|
||||
<Navigation />
|
||||
<Box sx={{ display: { sm: "block", xs: "none" } }}>
|
||||
<DarkModeToggle />
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</HideOnScroll>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<CssBaseline />
|
||||
<HideOnScroll>
|
||||
<AppBar sx={{ position: "fixed", zIndex: 1301 }} elevation={0}>
|
||||
<Toolbar>
|
||||
<Navigation />
|
||||
<Box sx={{ display: { sm: "inline-flex", xs: "none" } }}>
|
||||
<LanguageSwitcher />
|
||||
<DarkModeToggle />
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
</HideOnScroll>
|
||||
</>
|
||||
);
|
||||
};
|
||||
export default Header;
|
||||
|
||||
@@ -1,206 +1,220 @@
|
||||
import React, { useState, useEffect, createRef, useMemo, useRef } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
Container,
|
||||
Tabs,
|
||||
Tab,
|
||||
useMediaQuery,
|
||||
IconButton,
|
||||
SwipeableDrawer,
|
||||
Paper,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
List,
|
||||
Container,
|
||||
Tabs,
|
||||
Tab,
|
||||
useMediaQuery,
|
||||
IconButton,
|
||||
SwipeableDrawer,
|
||||
Paper,
|
||||
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 theme = useTheme();
|
||||
const t = useIntl();
|
||||
|
||||
const matches = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const iOS =
|
||||
typeof navigator !== "undefined" &&
|
||||
/iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
const matches = useMediaQuery(theme.breakpoints.down("sm"));
|
||||
const iOS =
|
||||
typeof navigator !== "undefined" &&
|
||||
/iPad|iPhone|iPod/.test(navigator.userAgent);
|
||||
|
||||
const [value, setValue] = useState(1);
|
||||
const [openDrawer, setOpenDrawer] = useState(false);
|
||||
const [value, setValue] = useState(1);
|
||||
const [openDrawer, setOpenDrawer] = useState(false);
|
||||
|
||||
const tabsActions = useRef(null);
|
||||
const wrapper = createRef();
|
||||
const tabsActions = useRef(null);
|
||||
const wrapper = createRef();
|
||||
|
||||
const handleTabsChange = (e, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
const handleTabsChange = (e, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const handleDrawerClose = () => {
|
||||
setTimeout(() => {
|
||||
setOpenDrawer(false);
|
||||
}, 100);
|
||||
};
|
||||
const handleDrawerClose = () => {
|
||||
setTimeout(() => {
|
||||
setOpenDrawer(false);
|
||||
}, 100);
|
||||
};
|
||||
|
||||
const routes = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: "Home",
|
||||
link: "/",
|
||||
activeIndex: 0,
|
||||
},
|
||||
{
|
||||
name: "Projects",
|
||||
link: "/projects",
|
||||
activeIndex: 1,
|
||||
},
|
||||
{
|
||||
name: "Best Practices",
|
||||
link: "/best-practices",
|
||||
activeIndex: 2,
|
||||
},
|
||||
{
|
||||
name: "Blog",
|
||||
link: "/blog",
|
||||
activeIndex: 3,
|
||||
},
|
||||
{
|
||||
name: "About",
|
||||
link: "/about",
|
||||
activeIndex: 4,
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
const routes = useMemo(
|
||||
() => [
|
||||
{
|
||||
name: t.formatMessage({
|
||||
id: "navigation.home",
|
||||
defaultMessage: "Home",
|
||||
}),
|
||||
link: "/",
|
||||
activeIndex: 0,
|
||||
},
|
||||
{
|
||||
name: t.formatMessage({
|
||||
id: "navigation.projects",
|
||||
defaultMessage: "Projects",
|
||||
}),
|
||||
link: "/projects",
|
||||
activeIndex: 1,
|
||||
},
|
||||
{
|
||||
name: t.formatMessage({
|
||||
id: "navigation.best-practices",
|
||||
defaultMessage: "Best Practices",
|
||||
}),
|
||||
link: "/best-practices",
|
||||
activeIndex: 2,
|
||||
},
|
||||
{
|
||||
name: t.formatMessage({
|
||||
id: "navigation.blog",
|
||||
defaultMessage: "Blog",
|
||||
}),
|
||||
link: "/blog",
|
||||
activeIndex: 3,
|
||||
},
|
||||
{
|
||||
name: t.formatMessage({
|
||||
id: "navigation.about",
|
||||
defaultMessage: "About",
|
||||
}),
|
||||
link: "/about",
|
||||
activeIndex: 4,
|
||||
},
|
||||
],
|
||||
[t]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
routes.forEach((route) => {
|
||||
switch (window.location.pathname) {
|
||||
case `${route.link}`:
|
||||
if (value !== route.activeIndex) {
|
||||
setValue(route.activeIndex);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}, [value, routes]);
|
||||
useEffect(() => {
|
||||
routes.forEach((route) => {
|
||||
switch (window.location.pathname) {
|
||||
case `${route.link}`:
|
||||
if (value !== route.activeIndex) {
|
||||
setValue(route.activeIndex);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}, [value, routes]);
|
||||
|
||||
return (
|
||||
<Container ref={wrapper}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
display: { sm: "none", xs: "flex" },
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: "inherit",
|
||||
color: theme.palette.secondary.contrastText,
|
||||
boxShadow: "none",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
size="large"
|
||||
onClick={() => setOpenDrawer(!openDrawer)}
|
||||
color="inherit"
|
||||
>
|
||||
{openDrawer ? (
|
||||
<MenuOpenIcon fontSize="inherit" />
|
||||
) : (
|
||||
<MenuIcon fontSize="inherit" />
|
||||
)}
|
||||
</IconButton>
|
||||
<DarkModeToggle style={{ alignSelf: "right", color: "inherit" }} />
|
||||
</Paper>
|
||||
return (
|
||||
<Container ref={wrapper}>
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
display: { sm: "none", xs: "flex" },
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
backgroundColor: "inherit",
|
||||
color: theme.palette.secondary.contrastText,
|
||||
boxShadow: "none",
|
||||
}}>
|
||||
<IconButton
|
||||
size="large"
|
||||
onClick={() => setOpenDrawer(!openDrawer)}
|
||||
sx={{ color: theme.palette.text.secondary }}>
|
||||
{openDrawer ? <MenuOpenIcon /> : <MenuIcon />}
|
||||
</IconButton>
|
||||
<Box sx={{ display: "inline-flex" }}>
|
||||
<LanguageSwitcher />
|
||||
<DarkModeToggle />
|
||||
</Box>
|
||||
</Paper>
|
||||
|
||||
{matches ? (
|
||||
<SwipeableDrawer
|
||||
disableBackdropTransition={!iOS}
|
||||
disableDiscovery={iOS}
|
||||
disableSwipeToOpen={false}
|
||||
open={openDrawer}
|
||||
onOpen={() => setOpenDrawer(true)}
|
||||
onClose={() => setOpenDrawer(false)}
|
||||
sx={{
|
||||
backgroundColor: "transparent",
|
||||
}}
|
||||
>
|
||||
<List sx={{ paddingTop: "4rem" }}>
|
||||
{routes.map((route) => (
|
||||
<ListItem
|
||||
sx={{
|
||||
padding: "1.5rem 2rem ",
|
||||
color: theme.palette.text.secondary,
|
||||
width: "100%",
|
||||
"&.Mui-selected": {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
key={`${route}${route.activeIndex}`}
|
||||
button
|
||||
component={Link}
|
||||
to={route.link}
|
||||
value={route.activeIndex}
|
||||
selected={value === route.activeIndex}
|
||||
onClick={() => {
|
||||
setValue(route.activeIndex);
|
||||
|
||||
handleDrawerClose();
|
||||
}}
|
||||
>
|
||||
<ListItemText
|
||||
disableTypography
|
||||
sx={{
|
||||
alignItems: "flex-start",
|
||||
fontSize: "1.2rem",
|
||||
textTransform: "capitalize",
|
||||
}}
|
||||
>
|
||||
{route.name}
|
||||
</ListItemText>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
</SwipeableDrawer>
|
||||
) : (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
display: { sm: "block", xs: "none" },
|
||||
}}
|
||||
>
|
||||
<Tabs
|
||||
action={tabsActions}
|
||||
value={value}
|
||||
onChange={handleTabsChange}
|
||||
centered
|
||||
TabIndicatorProps={{
|
||||
style: {
|
||||
background: theme.palette.secondary.contrastText,
|
||||
height: "3px",
|
||||
},
|
||||
}}
|
||||
>
|
||||
{routes.map((route) => (
|
||||
<Tab
|
||||
disableRipple
|
||||
key={`${route.activeIndex}`}
|
||||
label={route.name}
|
||||
component={Link}
|
||||
to={route.link}
|
||||
sx={{
|
||||
fontSize: "1.2rem",
|
||||
"&.Mui-selected": {
|
||||
color: theme.palette.secondary.contrastText,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</Paper>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
{matches ? (
|
||||
<SwipeableDrawer
|
||||
disableBackdropTransition={!iOS}
|
||||
disableDiscovery={iOS}
|
||||
disableSwipeToOpen={false}
|
||||
open={openDrawer}
|
||||
onOpen={() => setOpenDrawer(true)}
|
||||
onClose={() => setOpenDrawer(false)}
|
||||
sx={{
|
||||
backgroundColor: "transparent",
|
||||
}}>
|
||||
<List sx={{ paddingTop: "4rem" }}>
|
||||
{routes.map((route) => (
|
||||
<ListItem
|
||||
sx={{
|
||||
// padding: "1.5rem 2rem ",
|
||||
color: theme.palette.text.secondary,
|
||||
width: "100%",
|
||||
"&.Mui-selected": {
|
||||
backgroundColor: theme.palette.background.paper,
|
||||
},
|
||||
}}
|
||||
key={`${route.activeIndex}`}
|
||||
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>
|
||||
</SwipeableDrawer>
|
||||
) : (
|
||||
<Paper
|
||||
elevation={0}
|
||||
sx={{
|
||||
display: { sm: "block", xs: "none" },
|
||||
}}>
|
||||
<Tabs
|
||||
action={tabsActions}
|
||||
value={value}
|
||||
onChange={handleTabsChange}
|
||||
centered
|
||||
TabIndicatorProps={{
|
||||
style: {
|
||||
background: theme.palette.secondary.contrastText,
|
||||
height: "3px",
|
||||
},
|
||||
}}>
|
||||
{routes.map((route) => (
|
||||
<Tab
|
||||
disableRipple
|
||||
key={`${route.activeIndex}`}
|
||||
label={route.name}
|
||||
component={Link}
|
||||
to={route.link}
|
||||
sx={{
|
||||
fontSize: "1.2rem",
|
||||
"&.Mui-selected": {
|
||||
color: theme.palette.secondary.contrastText,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</Tabs>
|
||||
</Paper>
|
||||
)}
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
export default Navigation;
|
||||
|
||||
+67
-72
@@ -1,82 +1,77 @@
|
||||
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 = () => {
|
||||
const theme = useTheme();
|
||||
const theme = useTheme();
|
||||
|
||||
return (
|
||||
<Container id="about">
|
||||
<Grid
|
||||
container
|
||||
direction="row"
|
||||
alignItems="stretch"
|
||||
justifyContent="flex-end"
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
minHeight: "70vh",
|
||||
display: "flex",
|
||||
alignItems: "flex-end",
|
||||
}}
|
||||
>
|
||||
<Grid
|
||||
container
|
||||
direction="column"
|
||||
alignItems="flex-end"
|
||||
justifyContent="flex-end"
|
||||
spacing={3}
|
||||
>
|
||||
<Grid item>
|
||||
<Typography variant="h4" align="right" inline="true">
|
||||
Software Developer
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Typography
|
||||
variant="h1"
|
||||
gutterBottom
|
||||
inline="true"
|
||||
sx={{
|
||||
fontFamily: "Chilanka",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "2rem",
|
||||
textAlign: "left",
|
||||
[theme.breakpoints.down("md")]: {
|
||||
textAlign: "right",
|
||||
letterSpacing: "1rem",
|
||||
},
|
||||
}}
|
||||
>
|
||||
Dan Dobos
|
||||
</Typography>
|
||||
</Grid>
|
||||
return (
|
||||
<Container id="about">
|
||||
<Grid2
|
||||
container
|
||||
direction="row"
|
||||
alignItems="stretch"
|
||||
justifyContent="flex-end">
|
||||
<div
|
||||
style={{
|
||||
minHeight: "70vh",
|
||||
display: "flex",
|
||||
alignItems: "flex-end",
|
||||
}}>
|
||||
<Grid2
|
||||
container
|
||||
direction="column"
|
||||
alignItems="flex-end"
|
||||
justifyContent="flex-end"
|
||||
spacing={3}>
|
||||
<Grid2 item>
|
||||
<Typography variant="h4" align="right" inline="true">
|
||||
Software Developer
|
||||
</Typography>
|
||||
</Grid2>
|
||||
<Grid2 item>
|
||||
<Typography
|
||||
variant="h1"
|
||||
gutterBottom
|
||||
inline="true"
|
||||
sx={{
|
||||
fontFamily: "Chilanka",
|
||||
textTransform: "uppercase",
|
||||
letterSpacing: "2rem",
|
||||
textAlign: "left",
|
||||
[theme.breakpoints.down("md")]: {
|
||||
textAlign: "right",
|
||||
letterSpacing: "1rem",
|
||||
},
|
||||
}}>
|
||||
Dan Dobos
|
||||
</Typography>
|
||||
</Grid2>
|
||||
|
||||
<Grid item>
|
||||
<Typography align="right" inline="true" variant="h6">
|
||||
Characterized by the desire of understanding and implementing
|
||||
technological innovations.
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid2 item>
|
||||
<Typography align="right" inline="true" variant="h6">
|
||||
Characterized by the desire of understanding and implementing
|
||||
technological innovations.
|
||||
</Typography>
|
||||
</Grid2>
|
||||
|
||||
<Grid item>
|
||||
<Typography align="right" inline="true">
|
||||
Contact
|
||||
</Typography>
|
||||
<Link
|
||||
variant="h6"
|
||||
href="mailto:danandreidobos@gmail.com"
|
||||
target="_blank"
|
||||
color="inherit"
|
||||
>
|
||||
danandreidobos@gmail.com
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</div>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
<Grid2 item>
|
||||
<Typography align="right" inline="true">
|
||||
Contact
|
||||
</Typography>
|
||||
<Link
|
||||
variant="h6"
|
||||
href="mailto:danandreidobos@gmail.com"
|
||||
target="_blank"
|
||||
color="inherit">
|
||||
danandreidobos@gmail.com
|
||||
</Link>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</div>
|
||||
</Grid2>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
|
||||
+27
-7
@@ -1,16 +1,36 @@
|
||||
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 = () => {
|
||||
return (
|
||||
// <div style={{ minHeight: 'calc(100vh-128px)' }}>Blog ...in progress</div>
|
||||
<>
|
||||
<BlogAccordion blogContent={BlogContent} />
|
||||
</>
|
||||
);
|
||||
const t = useIntl();
|
||||
return (
|
||||
// <div style={{ minHeight: 'calc(100vh-128px)' }}>Blog ...in progress</div>
|
||||
<>
|
||||
<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" }),
|
||||
],
|
||||
}}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blog;
|
||||
|
||||
@@ -1,50 +1,67 @@
|
||||
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 = () => {
|
||||
return (
|
||||
<Grid container direction="row" alignItems="stretch" spacing={3}>
|
||||
<Grid item container direction="column">
|
||||
<Grid item>
|
||||
<Typography variant="h3">Projects</Typography>
|
||||
<Divider variant="inset" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Projects />
|
||||
</Grid>
|
||||
</Grid>
|
||||
const t = useIntl();
|
||||
return (
|
||||
<Grid2 container direction="row" alignItems="stretch" spacing={3}>
|
||||
<Grid2 item container direction="column">
|
||||
<Grid2 item>
|
||||
<Typography variant="h3">
|
||||
{t.formatMessage({
|
||||
id: "navigation.projects",
|
||||
defaultMessage: "Projects",
|
||||
})}
|
||||
</Typography>
|
||||
<Divider variant="inset" />
|
||||
</Grid2>
|
||||
<Grid2 item>
|
||||
<Projects />
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
|
||||
<Grid item container direction="column">
|
||||
<Grid item>
|
||||
<Typography variant="h3">Best Practices</Typography>
|
||||
<Divider variant="inset" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<BestPractices />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid2 item container direction="column">
|
||||
<Grid2 item>
|
||||
<Typography variant="h3">
|
||||
{t.formatMessage({
|
||||
id: "navigation.best-practices",
|
||||
defaultMessage: "Best Practices",
|
||||
})}
|
||||
</Typography>
|
||||
<Divider variant="inset" />
|
||||
</Grid2>
|
||||
<Grid2 item>
|
||||
<BestPractices />
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
|
||||
<Grid item container direction="column">
|
||||
<Grid item>
|
||||
<Typography variant="h3">Blog</Typography>
|
||||
<Divider variant="inset" />
|
||||
</Grid>
|
||||
<Grid item>
|
||||
<Blog />
|
||||
</Grid>
|
||||
</Grid>
|
||||
<Grid2 item container direction="column">
|
||||
<Grid2 item>
|
||||
<Typography variant="h3">
|
||||
{t.formatMessage({
|
||||
id: "navigation.blog",
|
||||
defaultMessage: "Blog",
|
||||
})}
|
||||
</Typography>
|
||||
<Divider variant="inset" />
|
||||
</Grid2>
|
||||
<Grid2 item>
|
||||
<Blog />
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
|
||||
<Grid item container justifyContent="flex-end">
|
||||
<Grid item>
|
||||
<About />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
<Grid2 item container justifyContent="flex-end">
|
||||
<Grid2 item>
|
||||
<About />
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
</Grid2>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
Reference in New Issue
Block a user