dadobos/me
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor code style for consistency and readability

Browse Source 
- Updated import statements to use double quotes instead of single quotes across multiple files.
- Reformatted JSX return statements for better alignment and readability.
- Added missing newlines at the end of files where necessary.
- Adjusted component structure for improved clarity in the Landing, Blog, BestPractices, and Projects pages.
- Enhanced error boundary component for better error handling.
- Updated theme overrides for Material-UI components to maintain consistent styling.
This commit is contained in:
Dan Dobos
2025-10-17 17:13:54 +02:00
parent 00324b9667
commit 4aa5040ef5
64 changed files with 20206 additions and 22302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/launch.json
Vendored
+1 -1
View File
@@ -12,4 +12,4 @@
"webRoot": "${workspaceFolder}"
}
]
}
}
.vscode/settings.json
Vendored
+2 -1
View File
@@ -1,3 +1,4 @@
{
"typescript.validate.enable": false
"typescript.validate.enable": false,
"editor.formatOnSave": true
}
README.md
+3
View File
@@ -5,10 +5,13 @@ This project is build with React and Material UI, and it holds a collection of p
You can view it live [here](https://dadobos.github.io/me/).
## Installation
#### First you have to clone the repository
<code>git clone https://github.com/dadobos/me.git</code>
#### In the project directory, you can run:
<code>npm run start</code> or just <code>npm start</code>
Runs the app in the development mode.\
jsconfig.json
+8 -7
View File
@@ -1,9 +1,10 @@
{
"compilerOptions": {
"baseUrl": "src",
"module": "commonjs",
"target": "es6"
},
"include": ["src"],
"exclude": ["node_modules"]
"compilerOptions": {
"jsx": "react",
"baseUrl": "src",
"module": "commonjs",
"target": "es6"
},
"include": ["src"],
"exclude": ["node_modules"]
}
package-lock.json
Generated
+18756 -20889
View File
File diff suppressed because it is too large Load Diff
package.json
+62 -62
View File
@@ -1,64 +1,64 @@
{
"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.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"
}
}
public/index.html
+28 -28
View File
@@ -1,31 +1,31 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en" style="scroll-behavior: smooth">
<head>
<meta charset="utf-8" />
<link
rel="icon"
href="https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/favicon_ugvc88.ico"
type="image/x-icon"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<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 />
<link
href="https://fonts.googleapis.com/css2?family=Chilanka&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Nanum+Gothic+Coding:wght@400;700&family=Press+Start+2P&family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Yeon+Sung&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<title>DAD</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<head>
<meta charset="utf-8" />
<link
rel="icon"
href="https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/favicon_ugvc88.ico"
type="image/x-icon"
/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<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 />
<link
href="https://fonts.googleapis.com/css2?family=Chilanka&family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Nanum+Gothic+Coding:wght@400;700&family=Press+Start+2P&family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Yeon+Sung&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<title>DAD</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
@@ -35,5 +35,5 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</body>
</html>
src/App.js
+30 -30
View File
@@ -1,41 +1,41 @@
import React, { useState, useMemo, createContext } from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import React, { useState, useMemo, createContext } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import {
responsiveFontSizes,
ThemeProvider,
createTheme,
} from '@mui/material/styles';
import { MainTheme } from './themes/Theme';
import { CustomRoutes } from './routes/Routes';
responsiveFontSizes,
ThemeProvider,
createTheme,
} from "@mui/material/styles";
import { MainTheme } from "./themes/Theme";
import { CustomRoutes } from "./routes/Routes";
export const ColorModeContext = createContext({ toggleColorMode: () => {} });
const App = () => {
const [mode, setMode] = useState('dark');
const colorMode = useMemo(
() => ({
toggleColorMode: () => {
setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
},
}),
[]
);
const [mode, setMode] = useState("dark");
const colorMode = useMemo(
() => ({
toggleColorMode: () => {
setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
},
}),
[],
);
const theme = useMemo(
() => responsiveFontSizes(createTheme(MainTheme(mode))),
[mode]
);
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>
);
return (
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>
<Router basename={process.env.PUBLIC_URL}>
<CustomRoutes />
</Router>
</ThemeProvider>
</ColorModeContext.Provider>
);
};
export default App;
src/App.test.js
+3 -3
View File
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react';
import App from './App';
import { render, screen } from "@testing-library/react";
import App from "./App";
test('renders learn react link', () => {
test("renders learn react link", () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
src/components/blog-accordion/BlogAccordion.jsx
+32 -30
View File
@@ -1,35 +1,37 @@
import React from 'react';
import React from "react";
import {
Accordion,
AccordionSummary,
AccordionDetails,
Typography,
} from '@mui/material';
Accordion,
AccordionSummary,
AccordionDetails,
Typography,
} from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
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>
)));
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>
));
};
export default BlogAccordion;
export default BlogAccordion;
src/components/main-accordion/MainAccordion.jsx
+52 -48
View File
@@ -1,53 +1,57 @@
import React from 'react';
import React from "react";
import {
Grid,
Accordion,
AccordionSummary,
AccordionDetails,
Typography,
} from '@mui/material';
import MainCard from 'components/main-card/MainCard';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
Grid,
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>
);
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>
);
};
export default MainAccordion;
src/components/main-card/MainCard.jsx
+49 -47
View File
@@ -1,59 +1,61 @@
import React from 'react';
import React from "react";
import {
Card,
CardContent,
CardMedia,
CardActionArea,
Typography,
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
Card,
CardContent,
CardMedia,
CardActionArea,
Typography,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { Tilt } from './Tilt';
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={{
maxWidth: "320px",
mx: "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="h6" component="div">
{title}
</Typography>
</CardContent>
</CardActionArea>
</Card>
}
/>
);
};
export default MainCard;
src/components/main-card/Tilt.jsx
+8 -8
View File
@@ -1,14 +1,14 @@
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef } from "react";
import VanillaTilt from 'vanilla-tilt';
import VanillaTilt from "vanilla-tilt";
export const Tilt = (props) => {
const { options, children } = props;
const tilt = useRef(null);
const { options, children } = props;
const tilt = useRef(null);
useEffect(() => {
VanillaTilt.init(tilt.current, options);
}, [options]);
useEffect(() => {
VanillaTilt.init(tilt.current, options);
}, [options]);
return <div ref={tilt}>{children}</div>;
return <div ref={tilt}>{children}</div>;
};
src/components/main-card/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './MainCard';
export { default } from "./MainCard";
src/data/Data.jsx
+94 -95
View File
@@ -1,116 +1,115 @@
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',
},
{
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,
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.`]
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.",
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' ]
},
];
"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/index.js
+8 -9
View File
@@ -1,14 +1,13 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById('root'));
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
<React.StrictMode>
<App />
</React.StrictMode>,
);
// If you want to start measuring performance in your app, pass a function
src/layouts/common/backToTop/BackToTop.jsx
+49 -48
View File
@@ -1,60 +1,61 @@
import React from 'react';
import React from "react";
import { Grid, Grow, useScrollTrigger } from '@mui/material';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import { useTheme } from '@mui/material/styles';
import { Grid, Grow, useScrollTrigger } from "@mui/material";
import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { useTheme } from "@mui/material/styles";
function ScrollTop(props) {
const { children, window } = props;
const { children, window } = props;
// Note that you normally won't need to set the window ref as useScrollTrigger
// will default to window.
// This is only being set here because the demo is in an iframe.
const trigger = useScrollTrigger({
target: window ? window() : undefined,
disableHysteresis: true,
threshold: 100,
});
// Note that you normally won't need to set the window ref as useScrollTrigger
// will default to window.
// This is only being set here because the demo is in an iframe.
const trigger = useScrollTrigger({
target: window ? window() : undefined,
disableHysteresis: true,
threshold: 100,
});
const handleClick = (event) => {
const anchor = (event.target.ownerDocument || document).querySelector(
'#back-to-top-anchor'
);
const handleClick = (event) => {
const anchor = (event.target.ownerDocument || document).querySelector(
"#back-to-top-anchor",
);
if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
};
if (anchor) {
anchor.scrollIntoView({ behavior: "smooth", block: "center" });
}
};
return (
<Grow in={trigger}>
<div onClick={handleClick} role='presentation'>
{children}
</div>
</Grow>
);
return (
<Grow in={trigger}>
<div onClick={handleClick} role="presentation">
{children}
</div>
</Grow>
);
}
const BackToTop = (props) => {
const theme = useTheme();
return (
<Grid
sx={{
position: 'fixed',
bottom: theme.spacing(2),
left: theme.spacing(1),
}}
id='footer'>
<ScrollTop {...props}>
<KeyboardArrowUpIcon
sx={{
width: '5rem',
height: '5rem',
[theme.breakpoints.down('md')]: { width: '3rem', height: '3rem' },
}}
/>
</ScrollTop>
</Grid>
);
const theme = useTheme();
return (
<Grid
sx={{
position: "fixed",
bottom: theme.spacing(2),
left: theme.spacing(1),
}}
id="footer"
>
<ScrollTop {...props}>
<KeyboardArrowUpIcon
sx={{
width: "5rem",
height: "5rem",
[theme.breakpoints.down("md")]: { width: "3rem", height: "3rem" },
}}
/>
</ScrollTop>
</Grid>
);
};
export default BackToTop;
src/layouts/common/backToTop/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './BackToTop';
export { default } from "./BackToTop";
src/layouts/common/darkModeToggle/DarkModeToggle.jsx
+20 -17
View File
@@ -1,23 +1,26 @@
import React, { useContext } from 'react';
import { IconButton } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { ColorModeContext } from 'App';
import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined';
import NightsStayOutlinedIcon from '@mui/icons-material/NightsStayOutlined';
import React, { useContext } from "react";
import { IconButton } from "@mui/material";
import { useTheme } from "@mui/material/styles";
import { ColorModeContext } 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 colorMode = useContext(ColorModeContext);
return (
<IconButton onClick={colorMode.toggleColorMode} sx={{ color: theme.palette.text.secondary }} >
{theme.palette.mode === 'dark' ? (
<WbSunnyOutlinedIcon />
) : (
<NightsStayOutlinedIcon />
)}
</IconButton>
);
return (
<IconButton
onClick={colorMode.toggleColorMode}
sx={{ color: theme.palette.text.secondary }}
>
{theme.palette.mode === "dark" ? (
<WbSunnyOutlinedIcon />
) : (
<NightsStayOutlinedIcon />
)}
</IconButton>
);
};
export default DarkModeToggle;
src/layouts/common/darkModeToggle/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './DarkModeToggle';
export { default } from "./DarkModeToggle";
src/layouts/common/fullScreenContainer/FullScreenContainer.jsx
+22 -21
View File
@@ -1,26 +1,27 @@
import React from 'react';
import { Container } from '@mui/material';
import React from "react";
import { Container } from "@mui/material";
const FullScreenContainer = (props) => {
const { children } = props;
// const theme = useTheme();
return (
<Container
maxWidth='lg'
sx={{
minHeight: 'calc(100vh - 24px )',
paddingTop: '6rem',
paddingBottom: '2rem',
flex: 1,
fallbacks: [
{ minHeight: '-moz-calc(100% - 24px)' },
{ minHeight: '-webkit-calc(100% - 24px)' },
{ minHeight: '-o-calc(100% - 24px)' },
],
}}>
{children}
</Container>
);
const { children } = props;
// const theme = useTheme();
return (
<Container
maxWidth="lg"
sx={{
minHeight: "calc(100vh - 24px )",
paddingTop: "6rem",
paddingBottom: "2rem",
flex: 1,
fallbacks: [
{ minHeight: "-moz-calc(100% - 24px)" },
{ minHeight: "-webkit-calc(100% - 24px)" },
{ minHeight: "-o-calc(100% - 24px)" },
],
}}
>
{children}
</Container>
);
};
export default FullScreenContainer;
src/layouts/common/fullScreenContainer/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './FullScreenContainer';
export { default } from "./FullScreenContainer";
src/layouts/common/hideOnScroll/HideOnScroll.jsx
+11 -11
View File
@@ -1,17 +1,17 @@
import React from 'react';
import { useScrollTrigger, Slide } from '@mui/material';
import React from "react";
import { useScrollTrigger, Slide } from "@mui/material";
const HideOnScroll = (props) => {
const { children, window } = props;
const trigger = useScrollTrigger({
target: window ? window() : undefined,
});
const { children, window } = props;
const trigger = useScrollTrigger({
target: window ? window() : undefined,
});
return (
<Slide appear={false} direction='down' in={!trigger}>
{children}
</Slide>
);
return (
<Slide appear={false} direction="down" in={!trigger}>
{children}
</Slide>
);
};
export default HideOnScroll;
src/layouts/common/hideOnScroll/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './HideOnScroll.jsx';
export { default } from "./HideOnScroll.jsx";
src/layouts/landing/LandingLayout.jsx
+21 -21
View File
@@ -1,31 +1,31 @@
import React, { useContext } from 'react';
import React, { useContext } from "react";
import { ThemeProvider } from '@mui/material/styles';
import { ThemeProvider } from "@mui/material/styles";
import { ColorModeContext } from 'App';
import { LandingWhite } from 'themes/Theme';
import FullScreenContainer from 'layouts/common/fullScreenContainer';
import { ColorModeContext } from "App";
import { LandingWhite } from "themes/Theme";
import FullScreenContainer from "layouts/common/fullScreenContainer";
import BackToTop from '../common/backToTop';
import Header from './components/header';
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(ColorModeContext);
return (
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={LandingWhite}>
<div id='back-to-top-anchor' />
<Header />
<FullScreenContainer>
{children}
<BackToTop />
</FullScreenContainer>
</ThemeProvider>
</ColorModeContext.Provider>
);
return (
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={LandingWhite}>
<div id="back-to-top-anchor" />
<Header />
<FullScreenContainer>
{children}
<BackToTop />
</FullScreenContainer>
</ThemeProvider>
</ColorModeContext.Provider>
);
};
export default LandingLayout;
src/layouts/landing/components/header/Header.jsx
+81 -67
View File
@@ -1,76 +1,90 @@
import React from 'react';
import React from "react";
import { Link } from 'react-router-dom';
import { Link } from "react-router-dom";
import {
AppBar,
Toolbar,
CssBaseline,
Typography,
Breadcrumbs,
Link as MaterialLink,
Grid,
IconButton,
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import ThreeSixtyOutlinedIcon from '@mui/icons-material/ThreeSixtyOutlined';
AppBar,
Toolbar,
CssBaseline,
Typography,
Breadcrumbs,
Link as MaterialLink,
Grid,
IconButton,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import ThreeSixtyOutlinedIcon from "@mui/icons-material/ThreeSixtyOutlined";
import DarkModeToggle from 'layouts/common/darkModeToggle';
import HideOnScroll from 'layouts/common/hideOnScroll';
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 justifyContent='space-between' alignItems='center'>
<Grid item>
<Breadcrumbs aria-label='breadcrumb'>
<Typography
variant='h5'
sx={{
textTransform: 'uppercase',
letterSpacing: '.2rem',
}}>
Dan Dobos
</Typography>
<MaterialLink
color='textPrimary'
href='#about'
style={{ cursor: 'pointer' }}>
About
</MaterialLink>
</Breadcrumbs>
</Grid>
<Grid item>
<Grid container alignItems='center'>
<Link to='/projects'>
<IconButton 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>
<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>
</>
);
};
export default Header;
src/layouts/landing/components/header/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Header';
export { default } from "./Header";
src/layouts/landing/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './LandingLayout.jsx'
export { default } from "./LandingLayout.jsx";
src/layouts/main/MainLayout.jsx
+17 -17
View File
@@ -1,24 +1,24 @@
import React from 'react';
import React from "react";
import Header from './components/header';
import Footer from './components/footer';
import FullScreenContainer from 'layouts/common/fullScreenContainer';
import BackToTop from '../common/backToTop';
import Header from "./components/header";
import Footer from "./components/footer";
import FullScreenContainer from "layouts/common/fullScreenContainer";
import BackToTop from "../common/backToTop";
const MainLayout = (props) => {
const { children } = props;
const { children } = props;
return (
<>
<div id='back-to-top-anchor' />
<Header />
<FullScreenContainer>
{children}
<BackToTop />
</FullScreenContainer>
<Footer />
</>
);
return (
<>
<div id="back-to-top-anchor" />
<Header />
<FullScreenContainer>
{children}
<BackToTop />
</FullScreenContainer>
<Footer />
</>
);
};
export default MainLayout;
src/layouts/main/components/footer/Footer.jsx
+26 -24
View File
@@ -1,30 +1,32 @@
import React from 'react';
import { Grid, Typography } from '@mui/material';
import React from "react";
import { Grid, 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 &copy; {getCurrentYear()}
</Typography>
</Grid>
</Grid>
);
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 &copy; {getCurrentYear()}
</Typography>
</Grid>
</Grid>
);
};
export default Footer;
src/layouts/main/components/footer/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Footer';
export { default } from "./Footer";
src/layouts/main/components/header/Header.jsx
+20 -20
View File
@@ -1,26 +1,26 @@
import React from 'react';
import React from "react";
import { AppBar, Toolbar, CssBaseline, Box } from '@mui/material';
import { AppBar, Toolbar, CssBaseline, Box } from "@mui/material";
import DarkModeToggle from 'layouts/common/darkModeToggle';
import HideOnScroll from 'layouts/common/hideOnScroll';
import Navigation from './navigation';
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: "block", xs: "none" } }}>
<DarkModeToggle />
</Box>
</Toolbar>
</AppBar>
</HideOnScroll>
</>
);
};
export default Header;
src/layouts/main/components/header/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Header';
export { default } from "./Header";
src/layouts/main/components/header/navigation/Navigation.jsx
+190 -183
View File
@@ -1,199 +1,206 @@
import React, { useState, useEffect, createRef, useMemo, useRef } from 'react';
import { Link } from 'react-router-dom';
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,
} from '@mui/material';
import { useTheme } from '@mui/material/styles';
import MenuIcon from '@mui/icons-material/Menu';
import MenuOpenIcon from '@mui/icons-material/MenuOpen';
Container,
Tabs,
Tab,
useMediaQuery,
IconButton,
SwipeableDrawer,
Paper,
ListItem,
ListItemText,
List,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import MenuIcon from "@mui/icons-material/Menu";
import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import DarkModeToggle from 'layouts/common/darkModeToggle';
import DarkModeToggle from "layouts/common/darkModeToggle";
const Navigation = () => {
const theme = useTheme();
const theme = useTheme();
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: "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,
},
],
[],
);
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)}
color="inherit"
>
{openDrawer ? (
<MenuOpenIcon fontSize="inherit" />
) : (
<MenuIcon fontSize="inherit" />
)}
</IconButton>
<DarkModeToggle style={{ alignSelf: "right", color: "inherit" }} />
</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);
{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>
);
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>
);
};
export default Navigation;
src/layouts/main/components/header/navigation/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Navigation';
export { default } from "./Navigation";
src/layouts/main/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './MainLayout';
export { default } from "./MainLayout";
src/pages/about/About.jsx
+75 -70
View File
@@ -1,77 +1,82 @@
import React from 'react';
import { Container, Grid, Typography, Link } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import React from "react";
import { Container, Grid, 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">
<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>
<Grid item>
<Typography align='right' inline='true' variant='h6'>
Characterized by the desire of understanding and implementing
technological innovations.
</Typography>
</Grid>
<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>
);
<Grid item>
<Typography align="right" inline="true" variant="h6">
Characterized by the desire of understanding and implementing
technological innovations.
</Typography>
</Grid>
<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>
);
};
export default About;
src/pages/about/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './About';
export { default } from "./About";
src/pages/best-practices/BestPractices.jsx
+4 -4
View File
@@ -1,9 +1,9 @@
import React from 'react';
import { CSSData } from 'data/Data';
import MainAccordion from 'components/main-accordion/MainAccordion';
import React from "react";
import { CSSData } from "data/Data";
import MainAccordion from "components/main-accordion/MainAccordion";
const BestPractices = () => {
return (<MainAccordion items={CSSData} title='CSS Only' />);
return <MainAccordion items={CSSData} title="CSS Only" />;
};
export default BestPractices;
src/pages/best-practices/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './BestPractices'
export { default } from "./BestPractices";
src/pages/blog/Blog.jsx
+9 -13
View File
@@ -1,20 +1,16 @@
import React from 'react';
import React from "react";
import { BlogContent } from 'data/Data';
import BlogAccordion from 'components/blog-accordion/BlogAccordion';
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} />
</>
);
return (
// <div style={{ minHeight: 'calc(100vh-128px)' }}>Blog ...in progress</div>
<>
<BlogAccordion blogContent={BlogContent} />
</>
);
};
export default Blog;
src/pages/blog/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './Blog'
export { default } from "./Blog";
src/pages/landing/Landing.jsx
+42 -42
View File
@@ -1,50 +1,50 @@
import React from 'react';
import { Grid, Typography, Divider } from '@mui/material';
import About from '../about';
import Blog from '../blog';
import BestPractices from '../best-practices';
import Projects from '../projects';
import React from "react";
import { Grid, Typography, Divider } from "@mui/material";
import About from "../about";
import Blog from "../blog";
import BestPractices from "../best-practices";
import Projects from "../projects";
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>
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>
<Grid item container direction='column'>
<Grid item>
<Typography variant='h3'>Best Practices</Typography>
<Divider variant='inset' />
</Grid>
<Grid item>
<BestPractices />
</Grid>
</Grid>
<Grid item container direction="column">
<Grid item>
<Typography variant="h3">Best Practices</Typography>
<Divider variant="inset" />
</Grid>
<Grid item>
<BestPractices />
</Grid>
</Grid>
<Grid item container direction='column'>
<Grid item>
<Typography variant='h3'>Blog</Typography>
<Divider variant='inset' />
</Grid>
<Grid item>
<Blog />
</Grid>
</Grid>
<Grid item container direction="column">
<Grid item>
<Typography variant="h3">Blog</Typography>
<Divider variant="inset" />
</Grid>
<Grid item>
<Blog />
</Grid>
</Grid>
<Grid item container justifyContent='flex-end'>
<Grid item>
<About />
</Grid>
</Grid>
</Grid>
);
<Grid item container justifyContent="flex-end">
<Grid item>
<About />
</Grid>
</Grid>
</Grid>
);
};
export default Home;
src/pages/landing/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Landing';
export { default } from "./Landing";
src/pages/projects/Projects.jsx
+19 -19
View File
@@ -1,25 +1,25 @@
import React from 'react';
import React from "react";
import {
// AngularData,
ReactData,
WebsitesData,
VueData,
GoData,
JavaData,
} from 'data/Data';
import MainAccordion from 'components/main-accordion/MainAccordion';
// AngularData,
ReactData,
WebsitesData,
VueData,
GoData,
JavaData,
} from "data/Data";
import MainAccordion from "components/main-accordion/MainAccordion";
const Projects = () => {
return (
<>
{/* <MainAccordion items={AngularData} title='Angular' /> */}
<MainAccordion items={ReactData} title='React' />
<MainAccordion items={WebsitesData} title='HTML' />
<MainAccordion items={VueData} title='Vue' />
<MainAccordion items={GoData} title='Golang' />
<MainAccordion items={JavaData} title='Java' />
</>
);
return (
<>
{/* <MainAccordion items={AngularData} title='Angular' /> */}
<MainAccordion items={ReactData} title="React" />
<MainAccordion items={WebsitesData} title="HTML" />
<MainAccordion items={VueData} title="Vue" />
<MainAccordion items={GoData} title="Golang" />
<MainAccordion items={JavaData} title="Java" />
</>
);
};
export default Projects;
src/pages/projects/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './Projects'
export { default } from "./Projects";
src/reportWebVitals.js
+2 -2
View File
@@ -1,6 +1,6 @@
const reportWebVitals = onPerfEntry => {
const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
src/routes/Routes.js
+59 -59
View File
@@ -1,70 +1,70 @@
import React, { Suspense, lazy } from 'react';
import { Routes, Route } from 'react-router-dom';
import CircularProgress from '@mui/material/CircularProgress';
import ErrorBoundary from './components/errorBoundary';
import React, { Suspense, lazy } from "react";
import { Routes, Route } from "react-router-dom";
import CircularProgress from "@mui/material/CircularProgress";
import ErrorBoundary from "./components/errorBoundary";
import MainLayout from '../layouts/main';
import LandingLayout from '../layouts/landing';
import MainLayout from "../layouts/main";
import LandingLayout from "../layouts/landing";
const Home = lazy(() => import('../pages/landing'));
const About = lazy(() => import('../pages/about'));
const Projects = lazy(() => import('../pages/projects'));
const Blog = lazy(() => import('../pages/blog'));
const BestPractices = lazy(() => import('../pages/best-practices'));
const Home = lazy(() => import("../pages/landing"));
const About = lazy(() => import("../pages/about"));
const Projects = lazy(() => import("../pages/projects"));
const Blog = lazy(() => import("../pages/blog"));
const BestPractices = lazy(() => import("../pages/best-practices"));
export const CustomRoutes = () => {
return (
<Suspense fallback={<CircularProgress color='secondary' />}>
<ErrorBoundary>
<Routes>
<Route
path='/'
element={
<LandingLayout>
<Home />
</LandingLayout>
}
/>
return (
<Suspense fallback={<CircularProgress color="secondary" />}>
<ErrorBoundary>
<Routes>
<Route
path="/"
element={
<LandingLayout>
<Home />
</LandingLayout>
}
/>
<Route
path='about'
element={
<MainLayout>
<About />
</MainLayout>
}
/>
<Route
path="about"
element={
<MainLayout>
<About />
</MainLayout>
}
/>
<Route
path='projects'
element={
<MainLayout>
<Projects />
</MainLayout>
}
/>
<Route
path="projects"
element={
<MainLayout>
<Projects />
</MainLayout>
}
/>
<Route
path='blog'
element={
<MainLayout>
<Blog />
</MainLayout>
}
/>
<Route
path="blog"
element={
<MainLayout>
<Blog />
</MainLayout>
}
/>
<Route
path='best-practices'
element={
<MainLayout>
<BestPractices />
</MainLayout>
}
/>
</Routes>
</ErrorBoundary>
</Suspense>
);
<Route
path="best-practices"
element={
<MainLayout>
<BestPractices />
</MainLayout>
}
/>
</Routes>
</ErrorBoundary>
</Suspense>
);
};
// export default CustomRoutes;
src/routes/components/customRoute/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './CustomRoute'
export { default } from "./CustomRoute";
src/routes/components/errorBoundary/ErrorBoundary.jsx
+30 -30
View File
@@ -1,37 +1,37 @@
import React, { Component } from 'react';
import React, { Component } from "react";
class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
}
componentDidCatch(error, errorInfo) {
// Catch errors in any components below and re-render with error message
this.setState({
error: error,
errorInfo: errorInfo,
});
// You can also log error messages to an error reporting service here
}
componentDidCatch(error, errorInfo) {
// Catch errors in any components below and re-render with error message
this.setState({
error: error,
errorInfo: errorInfo,
});
// You can also log error messages to an error reporting service here
}
render() {
if (this.state.errorInfo) {
// Error path
return (
<div>
<h2>Something went wrong.</h2>
<details sx={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo.componentStack}
</details>
</div>
);
}
// Normally, just render children
return this.props.children;
}
render() {
if (this.state.errorInfo) {
// Error path
return (
<div>
<h2>Something went wrong.</h2>
<details sx={{ whiteSpace: "pre-wrap" }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo.componentStack}
</details>
</div>
);
}
// Normally, just render children
return this.props.children;
}
}
export default ErrorBoundary;
src/routes/components/errorBoundary/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './ErrorBoundary'
export { default } from "./ErrorBoundary";
src/setupTests.js
+1 -1
View File
@@ -2,4 +2,4 @@
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
import "@testing-library/jest-dom";
src/themes/Colors.js
+57 -57
View File
@@ -1,58 +1,58 @@
export const AcidGreen = '#BDBF09';
export const AntiqueFuchsia = '#875C74';
export const Black = '#000000';
export const BlueGreen = '#004d40';
export const BrandyPunch = '#ce8f28';
export const BrownSugar = '#B4654A';
export const Cadet = '#5A7881';
export const Capri = '#5CC8FF';
export const Celeste = '#CDFFF9';
export const Cerise = '#D1345B';
export const Charcoal = '#37474f';
export const ChartreuseTraditional = '#E4FF1A';
export const Citron = '#9EA93F';
export const Cultured = '#eceff1';
export const DarkOrange = '#FF8811';
export const DarkPurple = '#0F0326';
export const DeepSpaceSparkle = '#335C67';
export const Eggplant = '#75485E';
export const EnglishVermillion = '#D64045';
export const Flame = '#cf5c36';
export const FruitSalad = '#509f60';
export const GrannySmithApple = '#ADF6B1';
export const Grullo = '#A69888';
export const IlluminatingEmerald = '#3E9276';
export const ImperialRed = '#EF233C';
export const InternationalGoldenGateBridge = '#BB4430';
export const Magnolia = '#F3EFF5';
export const MaizeCrayola = '#E8C547';
export const Mango = '#F7B801';
export const MangoTango = '#F5853F';
export const MaximumBlue = '#42BFDD';
export const MiddleRedPurple = '#AF5D63';
export const OuterSpaceCrayola = '#22363C';
export const PersianGreen = '#009688';
export const Platinum = '#E5E5E5';
export const Pomegranate = '#f44336';
export const RedRYB = '#FF220C';
export const Rosewood = '#5E0B15';
export const Ruby = '#D81E5B';
export const RubyRed = '#A31621';
export const RussianGreen = '#678D58';
export const Safron = '#EAC435';
export const SeaGreenCrayola = '#0FFFC1';
export const SlimyGreen = '#2B9720';
export const SpanishGreen = '#058E3F';
export const Spectra = '#315460';
export const TeaGreen = '#CAE7B9';
export const TucanRed = '#754043';
export const TumbleWeed = '#CEA07E';
export const TwilightLavander = '#754668';
export const UARed = '#E01A4F';
export const VioletColorWheel = '#7E0FFF';
export const White = '#ffffff';
export const WildBlueYonder = '#99B2DD';
export const DavysGray = '#565656';
export const Periwinkle = '#B7B5E4';
export const AcidGreen = "#BDBF09";
export const AntiqueFuchsia = "#875C74";
export const Black = "#000000";
export const BlueGreen = "#004d40";
export const BrandyPunch = "#ce8f28";
export const BrownSugar = "#B4654A";
export const Cadet = "#5A7881";
export const Capri = "#5CC8FF";
export const Celeste = "#CDFFF9";
export const Cerise = "#D1345B";
export const Charcoal = "#37474f";
export const ChartreuseTraditional = "#E4FF1A";
export const Citron = "#9EA93F";
export const Cultured = "#eceff1";
export const DarkOrange = "#FF8811";
export const DarkPurple = "#0F0326";
export const DeepSpaceSparkle = "#335C67";
export const Eggplant = "#75485E";
export const EnglishVermillion = "#D64045";
export const Flame = "#cf5c36";
export const FruitSalad = "#509f60";
export const GrannySmithApple = "#ADF6B1";
export const Grullo = "#A69888";
export const IlluminatingEmerald = "#3E9276";
export const ImperialRed = "#EF233C";
export const InternationalGoldenGateBridge = "#BB4430";
export const Magnolia = "#F3EFF5";
export const MaizeCrayola = "#E8C547";
export const Mango = "#F7B801";
export const MangoTango = "#F5853F";
export const MaximumBlue = "#42BFDD";
export const MiddleRedPurple = "#AF5D63";
export const OuterSpaceCrayola = "#22363C";
export const PersianGreen = "#009688";
export const Platinum = "#E5E5E5";
export const Pomegranate = "#f44336";
export const RedRYB = "#FF220C";
export const Rosewood = "#5E0B15";
export const Ruby = "#D81E5B";
export const RubyRed = "#A31621";
export const RussianGreen = "#678D58";
export const Safron = "#EAC435";
export const SeaGreenCrayola = "#0FFFC1";
export const SlimyGreen = "#2B9720";
export const SpanishGreen = "#058E3F";
export const Spectra = "#315460";
export const TeaGreen = "#CAE7B9";
export const TucanRed = "#754043";
export const TumbleWeed = "#CEA07E";
export const TwilightLavander = "#754668";
export const UARed = "#E01A4F";
export const VioletColorWheel = "#7E0FFF";
export const White = "#ffffff";
export const WildBlueYonder = "#99B2DD";
export const DavysGray = "#565656";
export const Periwinkle = "#B7B5E4";
//The Pantone Color of the Year 2025, PANTONE 17-1230 Mocha Mousse aka Chamoisee
export const Chamoisee = '#A47864';
export const Chamoisee = "#A47864";
src/themes/Theme.js
+75 -78
View File
@@ -1,88 +1,85 @@
import { createTheme, responsiveFontSizes } from '@mui/material/styles';
import { createTheme, responsiveFontSizes } from "@mui/material/styles";
import overrides from './overrides';
import overrides from "./overrides";
import {
AcidGreen,
SeaGreenCrayola,
UARed,
VioletColorWheel,
DavysGray,
Chamoisee,
White,
} from './Colors';
AcidGreen,
SeaGreenCrayola,
UARed,
VioletColorWheel,
DavysGray,
Chamoisee,
White,
} from "./Colors";
// Main layout
export const MainTheme = (mode) => ({
palette: {
mode,
...(mode === 'light'
? {
// palette values for light mode
primary: {
main: Chamoisee,
contrastText: White,
},
secondary: {
main: UARed,
contrastText: White,
},
divider: Chamoisee,
background: {
default: Chamoisee,
paper: Chamoisee,
},
text: {
primary: White,
secondary: White,
},
}
: {
// palette values for dark mode
primary: {
main: DavysGray,
contrastText: AcidGreen,
},
secondary: {
main: UARed,
contrastText: AcidGreen,
},
divider: AcidGreen,
background: {
default: DavysGray,
paper: DavysGray,
},
text: {
primary: AcidGreen,
secondary: AcidGreen,
},
palette: {
mode,
...(mode === "light"
? {
// palette values for light mode
}),
lightAccent: { main: VioletColorWheel },
darkAccent: { main: SeaGreenCrayola },
contrastThreshold: 3,
tonalOffset: 0.2,
},
components: {
...overrides,
},
primary: {
main: Chamoisee,
contrastText: White,
},
secondary: {
main: UARed,
contrastText: White,
},
divider: Chamoisee,
background: {
default: Chamoisee,
paper: Chamoisee,
},
text: {
primary: White,
secondary: White,
},
}
: {
// palette values for dark mode
primary: {
main: DavysGray,
contrastText: AcidGreen,
},
secondary: {
main: UARed,
contrastText: AcidGreen,
},
divider: AcidGreen,
background: {
default: DavysGray,
paper: DavysGray,
},
text: {
primary: AcidGreen,
secondary: AcidGreen,
},
}),
lightAccent: { main: VioletColorWheel },
darkAccent: { main: SeaGreenCrayola },
contrastThreshold: 3,
tonalOffset: 0.2,
},
components: {
...overrides,
},
});
// Landing page
export const LandingWhite = (theme) =>
responsiveFontSizes(
createTheme({
typography: {
fontFamily: 'Yeon Sung',
transform: 'matrix(1, 0, 0, 1, 0, 0)',
},
palette: {
mode: theme.palette.mode,
},
components: {
...overrides,
},
})
);
responsiveFontSizes(
createTheme({
typography: {
fontFamily: "Yeon Sung",
transform: "matrix(1, 0, 0, 1, 0, 0)",
},
palette: {
mode: theme.palette.mode,
},
components: {
...overrides,
},
}),
);
src/themes/overrides/MuiAlert.js
+35 -35
View File
@@ -1,39 +1,39 @@
import { Pomegranate, BrandyPunch, White, Spectra, FruitSalad } from '../Theme';
import { Pomegranate, BrandyPunch, White, Spectra, FruitSalad } from "../Theme";
const MuiAlert = {
root: {
fontSize: '16px',
borderRadius: 0,
},
standardError: {
color: White,
fontWeight: 300,
backgroundColor: Pomegranate,
},
standardWarning: {
color: White,
fontWeight: 300,
backgroundColor: BrandyPunch,
},
standardInfo: {
color: White,
fontWeight: 300,
backgroundColor: Spectra,
},
standardSuccess: {
color: White,
fontWeight: 300,
backgroundColor: FruitSalad,
},
icon: {
display: 'flex',
opacity: 1,
fontsize: '16px',
marginLeft: '3rem',
marginRight: '1rem',
},
message: {
padding: '16px 0 8px 0',
},
root: {
fontSize: "16px",
borderRadius: 0,
},
standardError: {
color: White,
fontWeight: 300,
backgroundColor: Pomegranate,
},
standardWarning: {
color: White,
fontWeight: 300,
backgroundColor: BrandyPunch,
},
standardInfo: {
color: White,
fontWeight: 300,
backgroundColor: Spectra,
},
standardSuccess: {
color: White,
fontWeight: 300,
backgroundColor: FruitSalad,
},
icon: {
display: "flex",
opacity: 1,
fontsize: "16px",
marginLeft: "3rem",
marginRight: "1rem",
},
message: {
padding: "16px 0 8px 0",
},
};
export default MuiAlert;
src/themes/overrides/MuiButtonBase.js
+4 -4
View File
@@ -1,8 +1,8 @@
const MuiButtonBase = {
defaultProps: {
// The props to change the default for.
disableRipple: true, // No more ripple, on the whole application 💣!
},
defaultProps: {
// The props to change the default for.
disableRipple: true, // No more ripple, on the whole application 💣!
},
};
export default MuiButtonBase;
src/themes/overrides/MuiCard.js
+11 -11
View File
@@ -1,15 +1,15 @@
const MuiCard = {
styleOverrides: {
root: {
// maxWidth: '420px',
// marginLeft: 'auto',
// marginRight: 'auto',
// '&:hover': {
// transition: 'all .7s ease',
// boxShadow: '1px 1px 20px 10px rgba(15,255,193,0.75)',
// },
},
},
styleOverrides: {
root: {
// maxWidth: '420px',
// marginLeft: 'auto',
// marginRight: 'auto',
// '&:hover': {
// transition: 'all .7s ease',
// boxShadow: '1px 1px 20px 10px rgba(15,255,193,0.75)',
// },
},
},
};
export default MuiCard;
src/themes/overrides/MuiCardActionArea.js
+11 -11
View File
@@ -1,15 +1,15 @@
const MuiCardActionArea = {
styleOverrides: {
root: {
'@media (min-width: 900px)': {
filter: 'grayscale(1);',
'&:hover': {
filter: 'grayscale(0);',
transition: 'all .3s ease',
},
},
},
},
styleOverrides: {
root: {
"@media (min-width: 900px)": {
filter: "grayscale(1);",
"&:hover": {
filter: "grayscale(0);",
transition: "all .3s ease",
},
},
},
},
};
export default MuiCardActionArea;
src/themes/overrides/MuiInputBase.js
+8 -8
View File
@@ -1,12 +1,12 @@
import { Cultured, Charcoal } from '../Theme';
import { Cultured, Charcoal } from "../Theme";
const MuiInputBase = {
input: {
height: '1.3rem',
'&:disabled': {
background: Cultured,
color: Charcoal,
},
},
input: {
height: "1.3rem",
"&:disabled": {
background: Cultured,
color: Charcoal,
},
},
};
export default MuiInputBase;
src/themes/overrides/MuiMenuItem.js
+9 -9
View File
@@ -1,13 +1,13 @@
import { RussianGreen } from '../Theme';
import { RussianGreen } from "../Theme";
const MuiMenuItem = {
root: {
// fontFamily: 'Poppins',
fontSize: '14px',
lineHeight: '19px',
textAlign: 'left',
color: RussianGreen,
padding: '.5rem',
},
root: {
// fontFamily: 'Poppins',
fontSize: "14px",
lineHeight: "19px",
textAlign: "left",
color: RussianGreen,
padding: ".5rem",
},
};
export default MuiMenuItem;
src/themes/overrides/MuiOutlinedInput.js
+47 -47
View File
@@ -1,54 +1,54 @@
import { RussianGreen, Cultured, Charcoal, White, Platinum } from '../Theme';
import { RussianGreen, Cultured, Charcoal, White, Platinum } from "../Theme";
const MuiOutlinedInput = {
root: {
position: 'relative',
'&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
border: `1px solid ${RussianGreen}`,
root: {
position: "relative",
"&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
border: `1px solid ${RussianGreen}`,
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
borderColor: RussianGreen,
},
},
// border focused
'&$focused $notchedOutline': {
borderColor: RussianGreen,
},
'&$disabled $notchedOutline': {
background: Cultured,
borderColor: Platinum,
opacity: 0.8,
color: Charcoal,
},
},
//border before
notchedOutline: {
borderColor: Cultured,
},
input: {
background: White,
padding: '.5rem',
borderRadius: '3px',
fontFamily: 'Poppins',
fontSize: ' 14px',
lineHeight: '19px',
color: Charcoal,
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
borderColor: RussianGreen,
},
},
// border focused
"&$focused $notchedOutline": {
borderColor: RussianGreen,
},
"&$disabled $notchedOutline": {
background: Cultured,
borderColor: Platinum,
opacity: 0.8,
color: Charcoal,
},
},
//border before
notchedOutline: {
borderColor: Cultured,
},
input: {
background: White,
padding: ".5rem",
borderRadius: "3px",
fontFamily: "Poppins",
fontSize: " 14px",
lineHeight: "19px",
color: Charcoal,
'&:disabled': {
background: Cultured,
opacity: 0.8,
color: Charcoal,
},
notchedOutline: {
border: 'transparent',
},
},
"&:disabled": {
background: Cultured,
opacity: 0.8,
color: Charcoal,
},
notchedOutline: {
border: "transparent",
},
},
multiline: {
padding: '.5rem !important',
border: '0px',
margin: 0,
},
multiline: {
padding: ".5rem !important",
border: "0px",
margin: 0,
},
};
export default MuiOutlinedInput;
src/themes/overrides/MuiSelect.js
+56 -56
View File
@@ -1,63 +1,63 @@
import { BlueGreen, RussianGreen, Cultured, Charcoal, White } from '../Theme';
import { BlueGreen, RussianGreen, Cultured, Charcoal, White } from "../Theme";
const MuiSelect = {
root: {
background: White,
padding: '.5rem',
borderRadius: '3px',
fontFamily: 'Poppins',
fontSize: '14px',
lineHeight: '19px',
textAlign: 'left',
color: Charcoal,
border: `1px solid ${Cultured}`,
'&:focus': {
borderRadius: '3px',
borderColor: 'transparent',
background: White,
},
},
select: {
minWidth: '5.5rem',
borderRadius: '3px',
border: `1px solid ${RussianGreen}`,
fontSize: '16px',
lineHeight: '19px',
'&:focus': {
borderRadius: '3px',
borderColor: RussianGreen,
background: White,
},
},
root: {
background: White,
padding: ".5rem",
borderRadius: "3px",
fontFamily: "Poppins",
fontSize: "14px",
lineHeight: "19px",
textAlign: "left",
color: Charcoal,
border: `1px solid ${Cultured}`,
"&:focus": {
borderRadius: "3px",
borderColor: "transparent",
background: White,
},
},
select: {
minWidth: "5.5rem",
borderRadius: "3px",
border: `1px solid ${RussianGreen}`,
fontSize: "16px",
lineHeight: "19px",
"&:focus": {
borderRadius: "3px",
borderColor: RussianGreen,
background: White,
},
},
selectMenu: {
background: White,
color: RussianGreen,
'&:notchedOutline': {
borderColor: 'transparent !important',
},
},
selectMenu: {
background: White,
color: RussianGreen,
"&:notchedOutline": {
borderColor: "transparent !important",
},
},
outlined: {
color: `${Charcoal} !important`,
borderColor: 'transparent',
fontSize: '14px',
lineHeight: '19px',
'&:hover ': {
borderColor: 'transparent',
outline: 'none',
},
'&:focus': {
background: White,
borderColor: 'transparent',
},
},
iconOutlined: {
color: BlueGreen,
},
icon: {
color: RussianGreen,
},
outlined: {
color: `${Charcoal} !important`,
borderColor: "transparent",
fontSize: "14px",
lineHeight: "19px",
"&:hover ": {
borderColor: "transparent",
outline: "none",
},
"&:focus": {
background: White,
borderColor: "transparent",
},
},
iconOutlined: {
color: BlueGreen,
},
icon: {
color: RussianGreen,
},
};
export default MuiSelect;
src/themes/overrides/MuiSwitch.js
+29 -29
View File
@@ -1,34 +1,34 @@
import { BlueGreen, Cultured, Charcoal } from '../Theme';
import { BlueGreen, Cultured, Charcoal } from "../Theme";
const MuiSwitch = {
root: {
overflow: 'visible',
width: '4rem',
},
switchBase: {
background: 'transparent',
'&$checked': {
transform: 'translateX(26px)',
'&$checked + $track': {
backgroundColor: Cultured,
border: 'none',
boxShadow: 'none',
width: 36,
},
'& $thumb': {
backgroundColor: BlueGreen,
boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)',
},
},
},
root: {
overflow: "visible",
width: "4rem",
},
switchBase: {
background: "transparent",
"&$checked": {
transform: "translateX(26px)",
"&$checked + $track": {
backgroundColor: Cultured,
border: "none",
boxShadow: "none",
width: 36,
},
"& $thumb": {
backgroundColor: BlueGreen,
boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.25)",
},
},
},
thumb: {
backgroundColor: Charcoal,
boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)',
width: 20,
height: 20,
},
track: { backgroundColor: Cultured, width: 36 },
checked: {},
thumb: {
backgroundColor: Charcoal,
boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.25)",
width: 20,
height: 20,
},
track: { backgroundColor: Cultured, width: 36 },
checked: {},
};
export default MuiSwitch;
src/themes/overrides/index.js
+12 -12
View File
@@ -1,6 +1,6 @@
import MuiCard from './MuiCard';
import MuiCardActionArea from './MuiCardActionArea';
import MuiButtonBase from './MuiButtonBase';
import MuiCard from "./MuiCard";
import MuiCardActionArea from "./MuiCardActionArea";
import MuiButtonBase from "./MuiButtonBase";
// import MuiAlert from './MuiAlert';
// import MuiInputBase from './MuiInputBase';
// import MuiMenuItem from './MuiMenuItem';
@@ -10,13 +10,13 @@ import MuiButtonBase from './MuiButtonBase';
/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */
export default {
MuiCard,
MuiCardActionArea,
MuiButtonBase,
// MuiAlert,
// MuiInputBase,
// MuiMenuItem,
// MuiOutlinedInput,
// MuiSelect,
// MuiSwitch,
MuiCard,
MuiCardActionArea,
MuiButtonBase,
// MuiAlert,
// MuiInputBase,
// MuiMenuItem,
// MuiOutlinedInput,
// MuiSelect,
// MuiSwitch,
};