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}" "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/). You can view it live [here](https://dadobos.github.io/me/).
## Installation ## Installation
#### First you have to clone the repository #### First you have to clone the repository
<code>git clone https://github.com/dadobos/me.git</code> <code>git clone https://github.com/dadobos/me.git</code>
#### In the project directory, you can run: #### In the project directory, you can run:
<code>npm run start</code> or just <code>npm start</code> <code>npm run start</code> or just <code>npm start</code>
Runs the app in the development mode.\ Runs the app in the development mode.\
jsconfig.json
+8 -7
View File
@@ -1,9 +1,10 @@
{ {
"compilerOptions": { "compilerOptions": {
"baseUrl": "src", "jsx": "react",
"module": "commonjs", "baseUrl": "src",
"target": "es6" "module": "commonjs",
}, "target": "es6"
"include": ["src"], },
"exclude": ["node_modules"] "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", "name": "react-page",
"homepage": "https://dadobos.github.io/me/", "homepage": "https://dadobos.github.io/me/",
"version": "0.1.0", "version": "0.1.0",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.4.12", "@mui/icons-material": "^6.4.12",
"@mui/material": "^7.3.4", "@mui/material": "^7.3.4",
"@mui/styles": "^6.0.0", "@mui/styles": "^6.0.0",
"@testing-library/jest-dom": "^6.9.1", "@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.0", "@testing-library/react": "^16.3.0",
"@testing-library/user-event": "^14.6.1", "@testing-library/user-event": "^14.6.1",
"react": "^19.2.0", "react": "^19.2.0",
"react-dom": "^19.2.0", "react-dom": "^19.2.0",
"react-router-dom": "^7.9.4", "react-router-dom": "^7.9.4",
"react-scripts": "^5.0.1", "react-scripts": "^5.0.1",
"react-spring": "^10.0.3", "react-spring": "^10.0.3",
"styled-components": "^6.1.11", "styled-components": "^6.1.11",
"vanilla-tilt": "^1.8.1", "vanilla-tilt": "^1.8.1",
"web-vitals": "^5.1.0" "web-vitals": "^5.1.0"
}, },
"scripts": { "scripts": {
"start": "react-scripts start", "start": "react-scripts start",
"build": "react-scripts build", "build": "react-scripts build",
"test": "react-scripts test", "test": "react-scripts test",
"eject": "react-scripts eject", "eject": "react-scripts eject",
"predeploy": "npm run build", "predeploy": "npm run build",
"deploy": "gh-pages -d build" "deploy": "gh-pages -d build"
}, },
"eslintConfig": { "eslintConfig": {
"extends": [ "extends": [
"react-app", "react-app",
"react-app/jest" "react-app/jest"
] ]
}, },
"browserslist": { "browserslist": {
"production": [ "production": [
">0.2%", ">0.2%",
"not dead", "not dead",
"not op_mini all" "not op_mini all"
], ],
"development": [ "development": [
"last 1 chrome version", "last 1 chrome version",
"last 1 firefox version", "last 1 firefox version",
"last 1 safari version" "last 1 safari version"
] ]
}, },
"devDependencies": { "devDependencies": {
"gh-pages": "^6.1.1" "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.", "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", "main": "index.js",
"repository": { "repository": {
"type": "git", "type": "git",
"url": "git+https://github.com/dadobos/me.git" "url": "git+https://github.com/dadobos/me.git"
}, },
"author": "Dan Andrei Dobos", "author": "Dan Andrei Dobos",
"license": "ISC", "license": "ISC",
"bugs": { "bugs": {
"url": "https://github.com/dadobos/me/issues" "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"> <html lang="en" style="scroll-behavior: smooth">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link <link
rel="icon" rel="icon"
href="https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/favicon_ugvc88.ico" href="https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/favicon_ugvc88.ico"
type="image/x-icon" type="image/x-icon"
/> />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <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" 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" rel="stylesheet"
/> />
<link <link
rel="stylesheet" rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons" href="https://fonts.googleapis.com/icon?family=Material+Icons"
/> />
<title>DAD</title> <title>DAD</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. 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 begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html> </html>
src/App.js
+30 -30
View File
@@ -1,41 +1,41 @@
import React, { useState, useMemo, createContext } from 'react'; import React, { useState, useMemo, createContext } from "react";
import { BrowserRouter as Router } from 'react-router-dom'; import { BrowserRouter as Router } from "react-router-dom";
import { import {
responsiveFontSizes, responsiveFontSizes,
ThemeProvider, ThemeProvider,
createTheme, createTheme,
} from '@mui/material/styles'; } from "@mui/material/styles";
import { MainTheme } from './themes/Theme'; import { MainTheme } from "./themes/Theme";
import { CustomRoutes } from './routes/Routes'; import { CustomRoutes } from "./routes/Routes";
export const ColorModeContext = createContext({ toggleColorMode: () => {} }); export const ColorModeContext = createContext({ toggleColorMode: () => {} });
const App = () => { const App = () => {
const [mode, setMode] = useState('dark'); const [mode, setMode] = useState("dark");
const colorMode = useMemo( const colorMode = useMemo(
() => ({ () => ({
toggleColorMode: () => { toggleColorMode: () => {
setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light')); setMode((prevMode) => (prevMode === "light" ? "dark" : "light"));
}, },
}), }),
[] [],
); );
const theme = useMemo( const theme = useMemo(
() => responsiveFontSizes(createTheme(MainTheme(mode))), () => responsiveFontSizes(createTheme(MainTheme(mode))),
[mode] [mode],
); );
return ( return (
<ColorModeContext.Provider value={colorMode}> <ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}> <ThemeProvider theme={theme}>
<Router basename={process.env.PUBLIC_URL}> <Router basename={process.env.PUBLIC_URL}>
<CustomRoutes /> <CustomRoutes />
</Router> </Router>
</ThemeProvider> </ThemeProvider>
</ColorModeContext.Provider> </ColorModeContext.Provider>
); );
}; };
export default App; export default App;
src/App.test.js
+3 -3
View File
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from "@testing-library/react";
import App from './App'; import App from "./App";
test('renders learn react link', () => { test("renders learn react link", () => {
render(<App />); render(<App />);
const linkElement = screen.getByText(/learn react/i); const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); 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 { import {
Accordion, Accordion,
AccordionSummary, AccordionSummary,
AccordionDetails, AccordionDetails,
Typography, Typography,
} from '@mui/material'; } from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
const BlogAccordion = ({blogContent}) => { const BlogAccordion = ({ blogContent }) => {
return ( return blogContent.map(({ title, description }) => (
blogContent.map(({title, description}) => ( <Accordion
<Accordion // defaultExpanded
// defaultExpanded // slotProps={{ unmountOnExit: true }}
// slotProps={{ unmountOnExit: true }} key={title}
key={title} sx={{ background: "transparent" }}
sx={{ background: 'transparent' }}> >
<AccordionSummary <AccordionSummary
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content' aria-controls="panel1a-content"
id='panel1a-header'> id="panel1a-header"
<Typography variant='h5'>{ title }</Typography> >
</AccordionSummary> <Typography variant="h5">{title}</Typography>
<AccordionDetails> </AccordionSummary>
{description.map((lineContent, idx) => ( <AccordionDetails>
<Typography {description.map((lineContent, idx) => (
key={idx} paragraph>{lineContent}</Typography> <Typography key={idx} paragraph>
))} {lineContent}
</AccordionDetails> </Typography>
</Accordion> ))}
))); </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 { import {
Grid, Grid,
Accordion, Accordion,
AccordionSummary, AccordionSummary,
AccordionDetails, AccordionDetails,
Typography, Typography,
} from '@mui/material'; } from "@mui/material";
import MainCard from 'components/main-card/MainCard'; import MainCard from "components/main-card/MainCard";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
const MainAccordion = ({items, title}) => { const MainAccordion = ({ items, title }) => {
return ( return (
<Accordion <Accordion
defaultExpanded defaultExpanded
TransitionProps={{ unmountOnExit: true }} TransitionProps={{ unmountOnExit: true }}
sx={{ background: 'transparent' }}> sx={{ background: "transparent" }}
<AccordionSummary >
expandIcon={<ExpandMoreIcon />} <AccordionSummary
aria-controls='panel1a-content' expandIcon={<ExpandMoreIcon />}
id='panel1a-header'> aria-controls="panel1a-content"
<Typography variant='h5'>{ title }</Typography> id="panel1a-header"
</AccordionSummary> >
<AccordionDetails> <Typography variant="h5">{title}</Typography>
<Grid </AccordionSummary>
container <AccordionDetails>
direction='row' <Grid
alignItems='flex-start' container
justifyContent='baseline' direction="row"
spacing={3}> alignItems="flex-start"
{items.map((project) => ( justifyContent="baseline"
<Grid spacing={3}
item >
xs={12} {items.map((project) => (
sm={6} <Grid
md={4} item
key={project.title} xs={12}
sx={{ alignItems: 'center', justifyContent: 'center' }}> sm={6}
<MainCard md={4}
imageURL={project.imageURL} key={project.title}
title={project.title} sx={{ alignItems: "center", justifyContent: "center" }}
description={project.description} >
url={project.url} <MainCard
/> imageURL={project.imageURL}
</Grid> title={project.title}
))} description={project.description}
</Grid> url={project.url}
</AccordionDetails> />
</Accordion> </Grid>
); ))}
</Grid>
</AccordionDetails>
</Accordion>
);
}; };
export default MainAccordion; 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 { import {
Card, Card,
CardContent, CardContent,
CardMedia, CardMedia,
CardActionArea, CardActionArea,
Typography, Typography,
} from '@mui/material'; } from "@mui/material";
import { useTheme } from '@mui/material/styles'; import { useTheme } from "@mui/material/styles";
import { Tilt } from './Tilt'; import { Tilt } from "./Tilt";
const MainCard = ({ imageURL, title, description, url }) => { const MainCard = ({ imageURL, title, description, url }) => {
const theme = useTheme(); const theme = useTheme();
const options = { const options = {
reverse: true, reverse: true,
speed: 1200, speed: 1200,
easing: 'cubic-bezier(.09,.67,.54,.76)', easing: "cubic-bezier(.09,.67,.54,.76)",
}; };
return ( return (
<Tilt <Tilt
// style={{ padding: 0, margin: 0 }} // style={{ padding: 0, margin: 0 }}
options={options} options={options}
children={ children={
<Card <Card
sx={{ sx={{
maxWidth: '320px', maxWidth: "320px",
mx: 'auto', mx: "auto",
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
}}> }}
<CardMedia >
component='img' <CardMedia
height='150' component="img"
image={imageURL} height="150"
alt={title} image={imageURL}
/> alt={title}
/>
<Typography variant='body2'>{description}</Typography> <Typography variant="body2">{description}</Typography>
<CardActionArea> <CardActionArea>
<CardContent <CardContent
color='white' color="white"
onClick={() => window.open(url, '_blank')}> onClick={() => window.open(url, "_blank")}
<Typography gutterBottom variant='h6' component='div'> >
{title} <Typography gutterBottom variant="h6" component="div">
</Typography> {title}
</CardContent> </Typography>
</CardActionArea> </CardContent>
</Card> </CardActionArea>
} </Card>
/> }
); />
);
}; };
export default MainCard; 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) => { export const Tilt = (props) => {
const { options, children } = props; const { options, children } = props;
const tilt = useRef(null); const tilt = useRef(null);
useEffect(() => { useEffect(() => {
VanillaTilt.init(tilt.current, options); VanillaTilt.init(tilt.current, options);
}, [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 = [ export const ReactData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673023170/web/uxfuyzap5kbs1si34g29.png', "https://res.cloudinary.com/dadobos/image/upload/v1673023170/web/uxfuyzap5kbs1si34g29.png",
title: 'React Shop', title: "React Shop",
description: '', description: "",
url: 'https://dadobos.github.io/react-shop/', url: "https://dadobos.github.io/react-shop/",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1685729092/web/tzoxavfsfa44z2o9wrgi.png', "https://res.cloudinary.com/dadobos/image/upload/v1685729092/web/tzoxavfsfa44z2o9wrgi.png",
title: 'React Quiz App', title: "React Quiz App",
description: '', description: "",
url: 'https://dadobos.github.io/react-quiz-app/', url: "https://dadobos.github.io/react-quiz-app/",
}, },
]; ];
export const GoData = [ export const GoData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1669538934/web/ng0ghejmlsmzhrgyuiz4.png', "https://res.cloudinary.com/dadobos/image/upload/v1669538934/web/ng0ghejmlsmzhrgyuiz4.png",
title: 'Pokemon GO Templates', title: "Pokemon GO Templates",
description: '', description: "",
url: 'https://github.com/dadobos/pokemongotemplates', url: "https://github.com/dadobos/pokemongotemplates",
}, },
]; ];
export const WebsitesData = [ export const WebsitesData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1653850879/web/TheSquareProject_sgflcj.png', "https://res.cloudinary.com/dadobos/image/upload/v1653850879/web/TheSquareProject_sgflcj.png",
title: 'The Square Project', title: "The Square Project",
description: '', description: "",
url: 'https://dadobos.github.io/The-Square-Project/', url: "https://dadobos.github.io/The-Square-Project/",
}, },
]; ];
export const JavaData = [ export const JavaData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png', "https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png",
title: 'Restaurant Billing System', title: "Restaurant Billing System",
description: '', description: "",
url: 'https://github.com/dadobos/Restaurant', url: "https://github.com/dadobos/Restaurant",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png', "https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png",
title: 'Billing System', title: "Billing System",
description: '', description: "",
url: 'https://github.com/dadobos/Billing-System', url: "https://github.com/dadobos/Billing-System",
}, },
]; ];
export const VueData = [ export const VueData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1654030260/web/WorldCountries_ekx2of.png', "https://res.cloudinary.com/dadobos/image/upload/v1654030260/web/WorldCountries_ekx2of.png",
title: 'World Countries', title: "World Countries",
description: '', description: "",
url: 'https://dadobos.github.io/worldcountries/', url: "https://dadobos.github.io/worldcountries/",
}, },
]; ];
export const CSSData = [ export const CSSData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/msvc649ua0gahqegu31o.png', "https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/msvc649ua0gahqegu31o.png",
title: 'Anchor Tag Hide Components', title: "Anchor Tag Hide Components",
description: '', description: "",
url: 'https://codepen.io/diaid/full/MWOOogX', url: "https://codepen.io/diaid/full/MWOOogX",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/dprvsa15ocx3l34dxogo.png', "https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/dprvsa15ocx3l34dxogo.png",
title: 'Radio Hide Components', title: "Radio Hide Components",
description: '', description: "",
url: 'https://codepen.io/diaid/full/qBVdgWW', url: "https://codepen.io/diaid/full/qBVdgWW",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673025125/web/anidcin5lbxo2hced5i4.png', "https://res.cloudinary.com/dadobos/image/upload/v1673025125/web/anidcin5lbxo2hced5i4.png",
title: 'Rounded Paragraph', title: "Rounded Paragraph",
description: '', description: "",
url: 'https://codepen.io/diaid/full/QWxOgVm', url: "https://codepen.io/diaid/full/QWxOgVm",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673027940/web/z9qn4wstdtzpr4cf5xtx.png', "https://res.cloudinary.com/dadobos/image/upload/v1673027940/web/z9qn4wstdtzpr4cf5xtx.png",
title: 'Responsive Table', title: "Responsive Table",
description: '', description: "",
url: 'https://codepen.io/diaid/full/xxJRGMB', url: "https://codepen.io/diaid/full/xxJRGMB",
}, },
]; ];
export const PantoneBlog = [
export const PantoneBlog = [`For 2025, the Pantone Color Institute selects PANTONE 17-1230 Mocha Mousse, `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 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 = [ "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: '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.', 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 React from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from "react-dom/client";
import App from './App'; import App from "./App";
import reportWebVitals from './reportWebVitals'; import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode> </React.StrictMode>,
); );
// If you want to start measuring performance in your app, pass a function // 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 { Grid, Grow, useScrollTrigger } from "@mui/material";
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
import { useTheme } from '@mui/material/styles'; import { useTheme } from "@mui/material/styles";
function ScrollTop(props) { 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 // Note that you normally won't need to set the window ref as useScrollTrigger
// will default to window. // will default to window.
// This is only being set here because the demo is in an iframe. // This is only being set here because the demo is in an iframe.
const trigger = useScrollTrigger({ const trigger = useScrollTrigger({
target: window ? window() : undefined, target: window ? window() : undefined,
disableHysteresis: true, disableHysteresis: true,
threshold: 100, threshold: 100,
}); });
const handleClick = (event) => { const handleClick = (event) => {
const anchor = (event.target.ownerDocument || document).querySelector( const anchor = (event.target.ownerDocument || document).querySelector(
'#back-to-top-anchor' "#back-to-top-anchor",
); );
if (anchor) { if (anchor) {
anchor.scrollIntoView({ behavior: 'smooth', block: 'center' }); anchor.scrollIntoView({ behavior: "smooth", block: "center" });
} }
}; };
return ( return (
<Grow in={trigger}> <Grow in={trigger}>
<div onClick={handleClick} role='presentation'> <div onClick={handleClick} role="presentation">
{children} {children}
</div> </div>
</Grow> </Grow>
); );
} }
const BackToTop = (props) => { const BackToTop = (props) => {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Grid <Grid
sx={{ sx={{
position: 'fixed', position: "fixed",
bottom: theme.spacing(2), bottom: theme.spacing(2),
left: theme.spacing(1), left: theme.spacing(1),
}} }}
id='footer'> id="footer"
<ScrollTop {...props}> >
<KeyboardArrowUpIcon <ScrollTop {...props}>
sx={{ <KeyboardArrowUpIcon
width: '5rem', sx={{
height: '5rem', width: "5rem",
[theme.breakpoints.down('md')]: { width: '3rem', height: '3rem' }, height: "5rem",
}} [theme.breakpoints.down("md")]: { width: "3rem", height: "3rem" },
/> }}
</ScrollTop> />
</Grid> </ScrollTop>
); </Grid>
);
}; };
export default BackToTop; 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 React, { useContext } from "react";
import { IconButton } from '@mui/material'; import { IconButton } from "@mui/material";
import { useTheme } from '@mui/material/styles'; import { useTheme } from "@mui/material/styles";
import { ColorModeContext } from 'App'; import { ColorModeContext } from "App";
import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined'; import WbSunnyOutlinedIcon from "@mui/icons-material/WbSunnyOutlined";
import NightsStayOutlinedIcon from '@mui/icons-material/NightsStayOutlined'; import NightsStayOutlinedIcon from "@mui/icons-material/NightsStayOutlined";
const DarkModeToggle = () => { const DarkModeToggle = () => {
const theme = useTheme(); const theme = useTheme();
const colorMode = useContext(ColorModeContext); const colorMode = useContext(ColorModeContext);
return ( return (
<IconButton onClick={colorMode.toggleColorMode} sx={{ color: theme.palette.text.secondary }} > <IconButton
{theme.palette.mode === 'dark' ? ( onClick={colorMode.toggleColorMode}
<WbSunnyOutlinedIcon /> sx={{ color: theme.palette.text.secondary }}
) : ( >
<NightsStayOutlinedIcon /> {theme.palette.mode === "dark" ? (
)} <WbSunnyOutlinedIcon />
</IconButton> ) : (
); <NightsStayOutlinedIcon />
)}
</IconButton>
);
}; };
export default DarkModeToggle; 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 React from "react";
import { Container } from '@mui/material'; import { Container } from "@mui/material";
const FullScreenContainer = (props) => { const FullScreenContainer = (props) => {
const { children } = props; const { children } = props;
// const theme = useTheme(); // const theme = useTheme();
return ( return (
<Container <Container
maxWidth='lg' maxWidth="lg"
sx={{ sx={{
minHeight: 'calc(100vh - 24px )', minHeight: "calc(100vh - 24px )",
paddingTop: '6rem', paddingTop: "6rem",
paddingBottom: '2rem', paddingBottom: "2rem",
flex: 1, flex: 1,
fallbacks: [ fallbacks: [
{ minHeight: '-moz-calc(100% - 24px)' }, { minHeight: "-moz-calc(100% - 24px)" },
{ minHeight: '-webkit-calc(100% - 24px)' }, { minHeight: "-webkit-calc(100% - 24px)" },
{ minHeight: '-o-calc(100% - 24px)' }, { minHeight: "-o-calc(100% - 24px)" },
], ],
}}> }}
{children} >
</Container> {children}
); </Container>
);
}; };
export default FullScreenContainer; 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 React from "react";
import { useScrollTrigger, Slide } from '@mui/material'; import { useScrollTrigger, Slide } from "@mui/material";
const HideOnScroll = (props) => { const HideOnScroll = (props) => {
const { children, window } = props; const { children, window } = props;
const trigger = useScrollTrigger({ const trigger = useScrollTrigger({
target: window ? window() : undefined, target: window ? window() : undefined,
}); });
return ( return (
<Slide appear={false} direction='down' in={!trigger}> <Slide appear={false} direction="down" in={!trigger}>
{children} {children}
</Slide> </Slide>
); );
}; };
export default HideOnScroll; 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 { ColorModeContext } from "App";
import { LandingWhite } from 'themes/Theme'; import { LandingWhite } from "themes/Theme";
import FullScreenContainer from 'layouts/common/fullScreenContainer'; import FullScreenContainer from "layouts/common/fullScreenContainer";
import BackToTop from '../common/backToTop'; import BackToTop from "../common/backToTop";
import Header from './components/header'; import Header from "./components/header";
const LandingLayout = (props) => { const LandingLayout = (props) => {
const { children } = props; const { children } = props;
const colorMode = useContext(ColorModeContext); const colorMode = useContext(ColorModeContext);
return ( return (
<ColorModeContext.Provider value={colorMode}> <ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={LandingWhite}> <ThemeProvider theme={LandingWhite}>
<div id='back-to-top-anchor' /> <div id="back-to-top-anchor" />
<Header /> <Header />
<FullScreenContainer> <FullScreenContainer>
{children} {children}
<BackToTop /> <BackToTop />
</FullScreenContainer> </FullScreenContainer>
</ThemeProvider> </ThemeProvider>
</ColorModeContext.Provider> </ColorModeContext.Provider>
); );
}; };
export default LandingLayout; 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 { import {
AppBar, AppBar,
Toolbar, Toolbar,
CssBaseline, CssBaseline,
Typography, Typography,
Breadcrumbs, Breadcrumbs,
Link as MaterialLink, Link as MaterialLink,
Grid, Grid,
IconButton, IconButton,
} from '@mui/material'; } from "@mui/material";
import { useTheme } from '@mui/material/styles'; import { useTheme } from "@mui/material/styles";
import ThreeSixtyOutlinedIcon from '@mui/icons-material/ThreeSixtyOutlined'; import ThreeSixtyOutlinedIcon from "@mui/icons-material/ThreeSixtyOutlined";
import DarkModeToggle from 'layouts/common/darkModeToggle'; import DarkModeToggle from "layouts/common/darkModeToggle";
import HideOnScroll from 'layouts/common/hideOnScroll'; import HideOnScroll from "layouts/common/hideOnScroll";
const Header = () => { const Header = () => {
const theme = useTheme(); const theme = useTheme();
return ( return (
<> <>
<CssBaseline /> <CssBaseline />
<HideOnScroll> <HideOnScroll>
<AppBar <AppBar
position='fixed' position="fixed"
sx={{ sx={{
background: 'transparent', background: "transparent",
zIndex: 1301, zIndex: 1301,
[theme.breakpoints.down('lg')]: { [theme.breakpoints.down("lg")]: {
backgroundColor: theme.palette.background.default, backgroundColor: theme.palette.background.default,
}, },
}} }}
elevation={0}> elevation={0}
<Toolbar> >
<Grid container justifyContent='space-between' alignItems='center'> <Toolbar>
<Grid item> <Grid
<Breadcrumbs aria-label='breadcrumb'> container
<Typography sx={{
variant='h5' width: "100%",
sx={{ justifyContent: "space-between",
textTransform: 'uppercase', alignItems: "center",
letterSpacing: '.2rem', }}
}}> >
Dan Dobos <Grid item>
</Typography> <Breadcrumbs aria-label="breadcrumb">
<Typography
<MaterialLink variant="h5"
color='textPrimary' sx={{
href='#about' textTransform: "uppercase",
style={{ cursor: 'pointer' }}> letterSpacing: ".2rem",
About }}
</MaterialLink> >
</Breadcrumbs> Dan Dobos
</Grid> </Typography>
<Grid item> {/*href="#about" is used to navigate within the page */}
<Grid container alignItems='center'> <MaterialLink
<Link to='/projects'> color="textPrimary"
<IconButton disableRipple sx={{ mr: 1 }}> href="#about"
<ThreeSixtyOutlinedIcon /> sx={{ cursor: "pointer" }}
</IconButton> >
</Link> About
<DarkModeToggle /> </MaterialLink>
</Grid> </Breadcrumbs>
</Grid> </Grid>
</Grid> <Grid item>
</Toolbar> <Grid container alignItems="center">
</AppBar> <Link to="/projects">
</HideOnScroll> <IconButton
</> aria-label="Projects"
); disableRipple
sx={{ mr: 1 }}
>
<ThreeSixtyOutlinedIcon />
</IconButton>
</Link>
<DarkModeToggle />
</Grid>
</Grid>
</Grid>
</Toolbar>
</AppBar>
</HideOnScroll>
</>
);
}; };
export default Header; 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 Header from "./components/header";
import Footer from './components/footer'; import Footer from "./components/footer";
import FullScreenContainer from 'layouts/common/fullScreenContainer'; import FullScreenContainer from "layouts/common/fullScreenContainer";
import BackToTop from '../common/backToTop'; import BackToTop from "../common/backToTop";
const MainLayout = (props) => { const MainLayout = (props) => {
const { children } = props; const { children } = props;
return ( return (
<> <>
<div id='back-to-top-anchor' /> <div id="back-to-top-anchor" />
<Header /> <Header />
<FullScreenContainer> <FullScreenContainer>
{children} {children}
<BackToTop /> <BackToTop />
</FullScreenContainer> </FullScreenContainer>
<Footer /> <Footer />
</> </>
); );
}; };
export default MainLayout; export default MainLayout;
src/layouts/main/components/footer/Footer.jsx
+26 -24
View File
@@ -1,30 +1,32 @@
import React from 'react'; import React from "react";
import { Grid, Typography } from '@mui/material'; import { Grid, Typography } from "@mui/material";
const Footer = () => { const Footer = () => {
const getCurrentYear = () => { const getCurrentYear = () => {
return new Date().getFullYear(); return new Date().getFullYear();
}; };
return ( return (
<Grid <Grid
container container
sx={{ sx={{
marginTop: 'auto', marginTop: "auto",
zIndex: 1300, zIndex: 1300,
minHeight: '24px', minHeight: "24px",
}} }}
justifyContent='center'> justifyContent="center"
<Grid item> >
<Typography <Grid item>
inline='true' <Typography
variant='body1' inline="true"
fontFamily='Nanum Gothic Coding'> variant="body1"
Dan Dobos &copy; {getCurrentYear()} fontFamily="Nanum Gothic Coding"
</Typography> >
</Grid> Dan Dobos &copy; {getCurrentYear()}
</Grid> </Typography>
); </Grid>
</Grid>
);
}; };
export default Footer; 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 DarkModeToggle from "layouts/common/darkModeToggle";
import HideOnScroll from 'layouts/common/hideOnScroll'; import HideOnScroll from "layouts/common/hideOnScroll";
import Navigation from './navigation'; import Navigation from "./navigation";
const Header = () => { const Header = () => {
return ( return (
<> <>
<CssBaseline /> <CssBaseline />
<HideOnScroll> <HideOnScroll>
<AppBar sx={{ position: 'fixed', zIndex: 1301 }} elevation={0}> <AppBar sx={{ position: "fixed", zIndex: 1301 }} elevation={0}>
<Toolbar> <Toolbar>
<Navigation /> <Navigation />
<Box sx={{ display: { sm: 'block', xs: 'none' } }}> <Box sx={{ display: { sm: "block", xs: "none" } }}>
<DarkModeToggle /> <DarkModeToggle />
</Box> </Box>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</HideOnScroll> </HideOnScroll>
</> </>
); );
}; };
export default Header; 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 React, { useState, useEffect, createRef, useMemo, useRef } from "react";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { import {
Container, Container,
Tabs, Tabs,
Tab, Tab,
useMediaQuery, useMediaQuery,
IconButton, IconButton,
SwipeableDrawer, SwipeableDrawer,
Paper, Paper,
ListItem, ListItem,
ListItemText, ListItemText,
List, List,
} from '@mui/material'; } from "@mui/material";
import { useTheme } from '@mui/material/styles'; import { useTheme } from "@mui/material/styles";
import MenuIcon from '@mui/icons-material/Menu'; import MenuIcon from "@mui/icons-material/Menu";
import MenuOpenIcon from '@mui/icons-material/MenuOpen'; import MenuOpenIcon from "@mui/icons-material/MenuOpen";
import DarkModeToggle from 'layouts/common/darkModeToggle'; import DarkModeToggle from "layouts/common/darkModeToggle";
const Navigation = () => { const Navigation = () => {
const theme = useTheme(); const theme = useTheme();
const matches = useMediaQuery(theme.breakpoints.down('sm')); const matches = useMediaQuery(theme.breakpoints.down("sm"));
const iOS = const iOS =
typeof navigator !== 'undefined' && typeof navigator !== "undefined" &&
/iPad|iPhone|iPod/.test(navigator.userAgent); /iPad|iPhone|iPod/.test(navigator.userAgent);
const [value, setValue] = useState(1); const [value, setValue] = useState(1);
const [openDrawer, setOpenDrawer] = useState(false); const [openDrawer, setOpenDrawer] = useState(false);
const tabsActions = useRef(null); const tabsActions = useRef(null);
const wrapper = createRef(); const wrapper = createRef();
const handleTabsChange = (e, newValue) => { const handleTabsChange = (e, newValue) => {
setValue(newValue); setValue(newValue);
}; };
const handleDrawerClose = () => { const handleDrawerClose = () => {
setTimeout(() => { setTimeout(() => {
setOpenDrawer(false); setOpenDrawer(false);
}, 100); }, 100);
}; };
const routes = useMemo( const routes = useMemo(
() => [ () => [
{ {
name: 'Home', name: "Home",
link: '/', link: "/",
activeIndex: 0, activeIndex: 0,
}, },
{ {
name: 'Projects', name: "Projects",
link: '/projects', link: "/projects",
activeIndex: 1, activeIndex: 1,
}, },
{ {
name: 'Best Practices', name: "Best Practices",
link: '/best-practices', link: "/best-practices",
activeIndex: 2, activeIndex: 2,
}, },
{ {
name: 'Blog', name: "Blog",
link: '/blog', link: "/blog",
activeIndex: 3, activeIndex: 3,
}, },
{ {
name: 'About', name: "About",
link: '/about', link: "/about",
activeIndex: 4, activeIndex: 4,
}, },
], ],
[] [],
); );
useEffect(() => { useEffect(() => {
routes.forEach((route) => { routes.forEach((route) => {
switch (window.location.pathname) { switch (window.location.pathname) {
case `${route.link}`: case `${route.link}`:
if (value !== route.activeIndex) { if (value !== route.activeIndex) {
setValue(route.activeIndex); setValue(route.activeIndex);
} }
break; break;
default: default:
return false; return false;
} }
}); });
}, [value, routes]); }, [value, routes]);
return ( return (
<Container ref={wrapper}> <Container ref={wrapper}>
<Paper <Paper
elevation={0} elevation={0}
sx={{ sx={{
display: { sm: 'none', xs: 'flex' }, display: { sm: "none", xs: "flex" },
justifyContent: 'space-between', justifyContent: "space-between",
alignItems: 'center', alignItems: "center",
backgroundColor: 'inherit', backgroundColor: "inherit",
color: theme.palette.secondary.contrastText, color: theme.palette.secondary.contrastText,
boxShadow: 'none', boxShadow: "none",
}}> }}
<IconButton >
size='large' <IconButton
onClick={() => setOpenDrawer(!openDrawer)} size="large"
color='inherit'> onClick={() => setOpenDrawer(!openDrawer)}
{openDrawer ? ( color="inherit"
<MenuOpenIcon fontSize='inherit' /> >
) : ( {openDrawer ? (
<MenuIcon fontSize='inherit' /> <MenuOpenIcon fontSize="inherit" />
)} ) : (
</IconButton> <MenuIcon fontSize="inherit" />
<DarkModeToggle style={{ alignSelf: 'right', color: 'inherit' }} /> )}
</Paper> </IconButton>
<DarkModeToggle style={{ alignSelf: "right", color: "inherit" }} />
</Paper>
{matches ? ( {matches ? (
<SwipeableDrawer <SwipeableDrawer
disableBackdropTransition={!iOS} disableBackdropTransition={!iOS}
disableDiscovery={iOS} disableDiscovery={iOS}
disableSwipeToOpen={false} disableSwipeToOpen={false}
open={openDrawer} open={openDrawer}
onOpen={() => setOpenDrawer(true)} onOpen={() => setOpenDrawer(true)}
onClose={() => setOpenDrawer(false)} onClose={() => setOpenDrawer(false)}
sx={{ sx={{
backgroundColor: 'transparent', backgroundColor: "transparent",
}}> }}
<List sx={{ paddingTop: '4rem' }}> >
{routes.map((route) => ( <List sx={{ paddingTop: "4rem" }}>
<ListItem {routes.map((route) => (
sx={{ <ListItem
padding: '1.5rem 2rem ', sx={{
color: theme.palette.text.secondary, padding: "1.5rem 2rem ",
width: '100%', color: theme.palette.text.secondary,
'&.Mui-selected': { width: "100%",
backgroundColor: theme.palette.background.paper, "&.Mui-selected": {
}, backgroundColor: theme.palette.background.paper,
}} },
key={`${route}${route.activeIndex}`} }}
button key={`${route}${route.activeIndex}`}
component={Link} button
to={route.link} component={Link}
value={route.activeIndex} to={route.link}
selected={value === route.activeIndex} value={route.activeIndex}
onClick={() => { selected={value === route.activeIndex}
setValue(route.activeIndex); onClick={() => {
setValue(route.activeIndex);
handleDrawerClose(); handleDrawerClose();
}}> }}
<ListItemText >
disableTypography <ListItemText
sx={{ disableTypography
alignItems: 'flex-start', sx={{
fontSize: '1.2rem', alignItems: "flex-start",
textTransform: 'capitalize', fontSize: "1.2rem",
}}> textTransform: "capitalize",
{route.name} }}
</ListItemText> >
</ListItem> {route.name}
))} </ListItemText>
</List> </ListItem>
</SwipeableDrawer> ))}
) : ( </List>
<Paper </SwipeableDrawer>
elevation={0} ) : (
sx={{ <Paper
display: { sm: 'block', xs: 'none' }, elevation={0}
}}> sx={{
<Tabs display: { sm: "block", xs: "none" },
action={tabsActions} }}
value={value} >
onChange={handleTabsChange} <Tabs
centered action={tabsActions}
TabIndicatorProps={{ value={value}
style: { onChange={handleTabsChange}
background: theme.palette.secondary.contrastText, centered
height: '3px', TabIndicatorProps={{
}, style: {
}}> background: theme.palette.secondary.contrastText,
{routes.map((route) => ( height: "3px",
<Tab },
disableRipple }}
key={`${route.activeIndex}`} >
label={route.name} {routes.map((route) => (
component={Link} <Tab
to={route.link} disableRipple
sx={{ key={`${route.activeIndex}`}
fontSize: '1.2rem', label={route.name}
'&.Mui-selected': { component={Link}
color: theme.palette.secondary.contrastText, to={route.link}
}, sx={{
}} fontSize: "1.2rem",
/> "&.Mui-selected": {
))} color: theme.palette.secondary.contrastText,
</Tabs> },
</Paper> }}
)} />
</Container> ))}
); </Tabs>
</Paper>
)}
</Container>
);
}; };
export default Navigation; 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 React from "react";
import { Container, Grid, Typography, Link } from '@mui/material'; import { Container, Grid, Typography, Link } from "@mui/material";
import { useTheme } from '@mui/material/styles'; import { useTheme } from "@mui/material/styles";
const About = () => { const About = () => {
const theme = useTheme(); const theme = useTheme();
return ( return (
<Container id='about'> <Container id="about">
<Grid <Grid
container container
direction='row' direction="row"
alignItems='stretch' alignItems="stretch"
justifyContent='flex-end'> justifyContent="flex-end"
<div >
style={{ <div
minHeight: '70vh', style={{
display: 'flex', minHeight: "70vh",
alignItems: 'flex-end', display: "flex",
}}> alignItems: "flex-end",
<Grid }}
container >
direction='column' <Grid
alignItems='flex-end' container
justifyContent='flex-end' direction="column"
spacing={3}> alignItems="flex-end"
<Grid item> justifyContent="flex-end"
<Typography variant='h4' align='right' inline='true'> spacing={3}
Software Developer >
</Typography> <Grid item>
</Grid> <Typography variant="h4" align="right" inline="true">
<Grid item> Software Developer
<Typography </Typography>
variant='h1' </Grid>
gutterBottom <Grid item>
inline='true' <Typography
sx={{ variant="h1"
fontFamily: 'Chilanka', gutterBottom
textTransform: 'uppercase', inline="true"
letterSpacing: '2rem', sx={{
textAlign: 'left', fontFamily: "Chilanka",
[theme.breakpoints.down('md')]: { textTransform: "uppercase",
textAlign: 'right', letterSpacing: "2rem",
letterSpacing: '1rem', textAlign: "left",
}, [theme.breakpoints.down("md")]: {
}}> textAlign: "right",
Dan Dobos letterSpacing: "1rem",
</Typography> },
</Grid> }}
>
Dan Dobos
</Typography>
</Grid>
<Grid item> <Grid item>
<Typography align='right' inline='true' variant='h6'> <Typography align="right" inline="true" variant="h6">
Characterized by the desire of understanding and implementing Characterized by the desire of understanding and implementing
technological innovations. technological innovations.
</Typography> </Typography>
</Grid> </Grid>
<Grid item> <Grid item>
<Typography align='right' inline='true'> <Typography align="right" inline="true">
Contact Contact
</Typography> </Typography>
<Link <Link
variant='h6' variant="h6"
href='mailto:danandreidobos@gmail.com' href="mailto:danandreidobos@gmail.com"
target='_blank' target="_blank"
color='inherit'> color="inherit"
danandreidobos@gmail.com >
</Link> danandreidobos@gmail.com
</Grid> </Link>
</Grid> </Grid>
</div> </Grid>
</Grid> </div>
</Container> </Grid>
); </Container>
);
}; };
export default About; 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 React from "react";
import { CSSData } from 'data/Data'; import { CSSData } from "data/Data";
import MainAccordion from 'components/main-accordion/MainAccordion'; import MainAccordion from "components/main-accordion/MainAccordion";
const BestPractices = () => { const BestPractices = () => {
return (<MainAccordion items={CSSData} title='CSS Only' />); return <MainAccordion items={CSSData} title="CSS Only" />;
}; };
export default BestPractices; 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 { BlogContent } from "data/Data";
import BlogAccordion from 'components/blog-accordion/BlogAccordion';
import BlogAccordion from "components/blog-accordion/BlogAccordion";
const Blog = () => { const Blog = () => {
return ( return (
// <div style={{ minHeight: 'calc(100vh-128px)' }}>Blog ...in progress</div> // <div style={{ minHeight: 'calc(100vh-128px)' }}>Blog ...in progress</div>
<> <>
<BlogAccordion blogContent={BlogContent} /> <BlogAccordion blogContent={BlogContent} />
</>
</> );
);
}; };
export default Blog; 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 React from "react";
import { Grid, Typography, Divider } from '@mui/material'; import { Grid, Typography, Divider } from "@mui/material";
import About from '../about'; import About from "../about";
import Blog from '../blog'; import Blog from "../blog";
import BestPractices from '../best-practices'; import BestPractices from "../best-practices";
import Projects from '../projects'; import Projects from "../projects";
const Home = () => { const Home = () => {
return ( return (
<Grid container direction='row' alignItems='stretch' spacing={3}> <Grid container direction="row" alignItems="stretch" spacing={3}>
<Grid item container direction='column'> <Grid item container direction="column">
<Grid item> <Grid item>
<Typography variant='h3'>Projects</Typography> <Typography variant="h3">Projects</Typography>
<Divider variant='inset' /> <Divider variant="inset" />
</Grid> </Grid>
<Grid item> <Grid item>
<Projects /> <Projects />
</Grid> </Grid>
</Grid> </Grid>
<Grid item container direction='column'> <Grid item container direction="column">
<Grid item> <Grid item>
<Typography variant='h3'>Best Practices</Typography> <Typography variant="h3">Best Practices</Typography>
<Divider variant='inset' /> <Divider variant="inset" />
</Grid> </Grid>
<Grid item> <Grid item>
<BestPractices /> <BestPractices />
</Grid> </Grid>
</Grid> </Grid>
<Grid item container direction='column'> <Grid item container direction="column">
<Grid item> <Grid item>
<Typography variant='h3'>Blog</Typography> <Typography variant="h3">Blog</Typography>
<Divider variant='inset' /> <Divider variant="inset" />
</Grid> </Grid>
<Grid item> <Grid item>
<Blog /> <Blog />
</Grid> </Grid>
</Grid> </Grid>
<Grid item container justifyContent='flex-end'> <Grid item container justifyContent="flex-end">
<Grid item> <Grid item>
<About /> <About />
</Grid> </Grid>
</Grid> </Grid>
</Grid> </Grid>
); );
}; };
export default Home; 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 { import {
// AngularData, // AngularData,
ReactData, ReactData,
WebsitesData, WebsitesData,
VueData, VueData,
GoData, GoData,
JavaData, JavaData,
} from 'data/Data'; } from "data/Data";
import MainAccordion from 'components/main-accordion/MainAccordion'; import MainAccordion from "components/main-accordion/MainAccordion";
const Projects = () => { const Projects = () => {
return ( return (
<> <>
{/* <MainAccordion items={AngularData} title='Angular' /> */} {/* <MainAccordion items={AngularData} title='Angular' /> */}
<MainAccordion items={ReactData} title='React' /> <MainAccordion items={ReactData} title="React" />
<MainAccordion items={WebsitesData} title='HTML' /> <MainAccordion items={WebsitesData} title="HTML" />
<MainAccordion items={VueData} title='Vue' /> <MainAccordion items={VueData} title="Vue" />
<MainAccordion items={GoData} title='Golang' /> <MainAccordion items={GoData} title="Golang" />
<MainAccordion items={JavaData} title='Java' /> <MainAccordion items={JavaData} title="Java" />
</> </>
); );
}; };
export default Projects; 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) { 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); getCLS(onPerfEntry);
getFID(onPerfEntry); getFID(onPerfEntry);
getFCP(onPerfEntry); getFCP(onPerfEntry);
src/routes/Routes.js
+59 -59
View File
@@ -1,70 +1,70 @@
import React, { Suspense, lazy } from 'react'; import React, { Suspense, lazy } from "react";
import { Routes, Route } from 'react-router-dom'; import { Routes, Route } from "react-router-dom";
import CircularProgress from '@mui/material/CircularProgress'; import CircularProgress from "@mui/material/CircularProgress";
import ErrorBoundary from './components/errorBoundary'; import ErrorBoundary from "./components/errorBoundary";
import MainLayout from '../layouts/main'; import MainLayout from "../layouts/main";
import LandingLayout from '../layouts/landing'; import LandingLayout from "../layouts/landing";
const Home = lazy(() => import('../pages/landing')); const Home = lazy(() => import("../pages/landing"));
const About = lazy(() => import('../pages/about')); const About = lazy(() => import("../pages/about"));
const Projects = lazy(() => import('../pages/projects')); const Projects = lazy(() => import("../pages/projects"));
const Blog = lazy(() => import('../pages/blog')); const Blog = lazy(() => import("../pages/blog"));
const BestPractices = lazy(() => import('../pages/best-practices')); const BestPractices = lazy(() => import("../pages/best-practices"));
export const CustomRoutes = () => { export const CustomRoutes = () => {
return ( return (
<Suspense fallback={<CircularProgress color='secondary' />}> <Suspense fallback={<CircularProgress color="secondary" />}>
<ErrorBoundary> <ErrorBoundary>
<Routes> <Routes>
<Route <Route
path='/' path="/"
element={ element={
<LandingLayout> <LandingLayout>
<Home /> <Home />
</LandingLayout> </LandingLayout>
} }
/> />
<Route <Route
path='about' path="about"
element={ element={
<MainLayout> <MainLayout>
<About /> <About />
</MainLayout> </MainLayout>
} }
/> />
<Route <Route
path='projects' path="projects"
element={ element={
<MainLayout> <MainLayout>
<Projects /> <Projects />
</MainLayout> </MainLayout>
} }
/> />
<Route <Route
path='blog' path="blog"
element={ element={
<MainLayout> <MainLayout>
<Blog /> <Blog />
</MainLayout> </MainLayout>
} }
/> />
<Route <Route
path='best-practices' path="best-practices"
element={ element={
<MainLayout> <MainLayout>
<BestPractices /> <BestPractices />
</MainLayout> </MainLayout>
} }
/> />
</Routes> </Routes>
</ErrorBoundary> </ErrorBoundary>
</Suspense> </Suspense>
); );
}; };
// export default CustomRoutes; // 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 { class ErrorBoundary extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { error: null, errorInfo: null }; this.state = { error: null, errorInfo: null };
} }
componentDidCatch(error, errorInfo) { componentDidCatch(error, errorInfo) {
// Catch errors in any components below and re-render with error message // Catch errors in any components below and re-render with error message
this.setState({ this.setState({
error: error, error: error,
errorInfo: errorInfo, errorInfo: errorInfo,
}); });
// You can also log error messages to an error reporting service here // You can also log error messages to an error reporting service here
} }
render() { render() {
if (this.state.errorInfo) { if (this.state.errorInfo) {
// Error path // Error path
return ( return (
<div> <div>
<h2>Something went wrong.</h2> <h2>Something went wrong.</h2>
<details sx={{ whiteSpace: 'pre-wrap' }}> <details sx={{ whiteSpace: "pre-wrap" }}>
{this.state.error && this.state.error.toString()} {this.state.error && this.state.error.toString()}
<br /> <br />
{this.state.errorInfo.componentStack} {this.state.errorInfo.componentStack}
</details> </details>
</div> </div>
); );
} }
// Normally, just render children // Normally, just render children
return this.props.children; return this.props.children;
} }
} }
export default ErrorBoundary; 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: // allows you to do things like:
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // 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 AcidGreen = "#BDBF09";
export const AntiqueFuchsia = '#875C74'; export const AntiqueFuchsia = "#875C74";
export const Black = '#000000'; export const Black = "#000000";
export const BlueGreen = '#004d40'; export const BlueGreen = "#004d40";
export const BrandyPunch = '#ce8f28'; export const BrandyPunch = "#ce8f28";
export const BrownSugar = '#B4654A'; export const BrownSugar = "#B4654A";
export const Cadet = '#5A7881'; export const Cadet = "#5A7881";
export const Capri = '#5CC8FF'; export const Capri = "#5CC8FF";
export const Celeste = '#CDFFF9'; export const Celeste = "#CDFFF9";
export const Cerise = '#D1345B'; export const Cerise = "#D1345B";
export const Charcoal = '#37474f'; export const Charcoal = "#37474f";
export const ChartreuseTraditional = '#E4FF1A'; export const ChartreuseTraditional = "#E4FF1A";
export const Citron = '#9EA93F'; export const Citron = "#9EA93F";
export const Cultured = '#eceff1'; export const Cultured = "#eceff1";
export const DarkOrange = '#FF8811'; export const DarkOrange = "#FF8811";
export const DarkPurple = '#0F0326'; export const DarkPurple = "#0F0326";
export const DeepSpaceSparkle = '#335C67'; export const DeepSpaceSparkle = "#335C67";
export const Eggplant = '#75485E'; export const Eggplant = "#75485E";
export const EnglishVermillion = '#D64045'; export const EnglishVermillion = "#D64045";
export const Flame = '#cf5c36'; export const Flame = "#cf5c36";
export const FruitSalad = '#509f60'; export const FruitSalad = "#509f60";
export const GrannySmithApple = '#ADF6B1'; export const GrannySmithApple = "#ADF6B1";
export const Grullo = '#A69888'; export const Grullo = "#A69888";
export const IlluminatingEmerald = '#3E9276'; export const IlluminatingEmerald = "#3E9276";
export const ImperialRed = '#EF233C'; export const ImperialRed = "#EF233C";
export const InternationalGoldenGateBridge = '#BB4430'; export const InternationalGoldenGateBridge = "#BB4430";
export const Magnolia = '#F3EFF5'; export const Magnolia = "#F3EFF5";
export const MaizeCrayola = '#E8C547'; export const MaizeCrayola = "#E8C547";
export const Mango = '#F7B801'; export const Mango = "#F7B801";
export const MangoTango = '#F5853F'; export const MangoTango = "#F5853F";
export const MaximumBlue = '#42BFDD'; export const MaximumBlue = "#42BFDD";
export const MiddleRedPurple = '#AF5D63'; export const MiddleRedPurple = "#AF5D63";
export const OuterSpaceCrayola = '#22363C'; export const OuterSpaceCrayola = "#22363C";
export const PersianGreen = '#009688'; export const PersianGreen = "#009688";
export const Platinum = '#E5E5E5'; export const Platinum = "#E5E5E5";
export const Pomegranate = '#f44336'; export const Pomegranate = "#f44336";
export const RedRYB = '#FF220C'; export const RedRYB = "#FF220C";
export const Rosewood = '#5E0B15'; export const Rosewood = "#5E0B15";
export const Ruby = '#D81E5B'; export const Ruby = "#D81E5B";
export const RubyRed = '#A31621'; export const RubyRed = "#A31621";
export const RussianGreen = '#678D58'; export const RussianGreen = "#678D58";
export const Safron = '#EAC435'; export const Safron = "#EAC435";
export const SeaGreenCrayola = '#0FFFC1'; export const SeaGreenCrayola = "#0FFFC1";
export const SlimyGreen = '#2B9720'; export const SlimyGreen = "#2B9720";
export const SpanishGreen = '#058E3F'; export const SpanishGreen = "#058E3F";
export const Spectra = '#315460'; export const Spectra = "#315460";
export const TeaGreen = '#CAE7B9'; export const TeaGreen = "#CAE7B9";
export const TucanRed = '#754043'; export const TucanRed = "#754043";
export const TumbleWeed = '#CEA07E'; export const TumbleWeed = "#CEA07E";
export const TwilightLavander = '#754668'; export const TwilightLavander = "#754668";
export const UARed = '#E01A4F'; export const UARed = "#E01A4F";
export const VioletColorWheel = '#7E0FFF'; export const VioletColorWheel = "#7E0FFF";
export const White = '#ffffff'; export const White = "#ffffff";
export const WildBlueYonder = '#99B2DD'; export const WildBlueYonder = "#99B2DD";
export const DavysGray = '#565656'; export const DavysGray = "#565656";
export const Periwinkle = '#B7B5E4'; export const Periwinkle = "#B7B5E4";
//The Pantone Color of the Year 2025, PANTONE 17-1230 Mocha Mousse aka Chamoisee //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 { import {
AcidGreen, AcidGreen,
SeaGreenCrayola, SeaGreenCrayola,
UARed, UARed,
VioletColorWheel, VioletColorWheel,
DavysGray, DavysGray,
Chamoisee, Chamoisee,
White, White,
} from './Colors'; } from "./Colors";
// Main layout // Main layout
export const MainTheme = (mode) => ({ export const MainTheme = (mode) => ({
palette: { palette: {
mode, mode,
...(mode === 'light' ...(mode === "light"
? { ? {
// palette values for light mode // 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,
},
}), primary: {
lightAccent: { main: VioletColorWheel }, main: Chamoisee,
darkAccent: { main: SeaGreenCrayola }, contrastText: White,
contrastThreshold: 3, },
tonalOffset: 0.2, secondary: {
}, main: UARed,
components: { contrastText: White,
...overrides, },
}, 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 // Landing page
export const LandingWhite = (theme) => export const LandingWhite = (theme) =>
responsiveFontSizes( responsiveFontSizes(
createTheme({ createTheme({
typography: { typography: {
fontFamily: 'Yeon Sung', fontFamily: "Yeon Sung",
transform: 'matrix(1, 0, 0, 1, 0, 0)', transform: "matrix(1, 0, 0, 1, 0, 0)",
}, },
palette: { palette: {
mode: theme.palette.mode, mode: theme.palette.mode,
}, },
components: { components: {
...overrides, ...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 = { const MuiAlert = {
root: { root: {
fontSize: '16px', fontSize: "16px",
borderRadius: 0, borderRadius: 0,
}, },
standardError: { standardError: {
color: White, color: White,
fontWeight: 300, fontWeight: 300,
backgroundColor: Pomegranate, backgroundColor: Pomegranate,
}, },
standardWarning: { standardWarning: {
color: White, color: White,
fontWeight: 300, fontWeight: 300,
backgroundColor: BrandyPunch, backgroundColor: BrandyPunch,
}, },
standardInfo: { standardInfo: {
color: White, color: White,
fontWeight: 300, fontWeight: 300,
backgroundColor: Spectra, backgroundColor: Spectra,
}, },
standardSuccess: { standardSuccess: {
color: White, color: White,
fontWeight: 300, fontWeight: 300,
backgroundColor: FruitSalad, backgroundColor: FruitSalad,
}, },
icon: { icon: {
display: 'flex', display: "flex",
opacity: 1, opacity: 1,
fontsize: '16px', fontsize: "16px",
marginLeft: '3rem', marginLeft: "3rem",
marginRight: '1rem', marginRight: "1rem",
}, },
message: { message: {
padding: '16px 0 8px 0', padding: "16px 0 8px 0",
}, },
}; };
export default MuiAlert; export default MuiAlert;
src/themes/overrides/MuiButtonBase.js
+4 -4
View File
@@ -1,8 +1,8 @@
const MuiButtonBase = { const MuiButtonBase = {
defaultProps: { defaultProps: {
// The props to change the default for. // The props to change the default for.
disableRipple: true, // No more ripple, on the whole application 💣! disableRipple: true, // No more ripple, on the whole application 💣!
}, },
}; };
export default MuiButtonBase; export default MuiButtonBase;
src/themes/overrides/MuiCard.js
+11 -11
View File
@@ -1,15 +1,15 @@
const MuiCard = { const MuiCard = {
styleOverrides: { styleOverrides: {
root: { root: {
// maxWidth: '420px', // maxWidth: '420px',
// marginLeft: 'auto', // marginLeft: 'auto',
// marginRight: 'auto', // marginRight: 'auto',
// '&:hover': { // '&:hover': {
// transition: 'all .7s ease', // transition: 'all .7s ease',
// boxShadow: '1px 1px 20px 10px rgba(15,255,193,0.75)', // boxShadow: '1px 1px 20px 10px rgba(15,255,193,0.75)',
// }, // },
}, },
}, },
}; };
export default MuiCard; export default MuiCard;
src/themes/overrides/MuiCardActionArea.js
+11 -11
View File
@@ -1,15 +1,15 @@
const MuiCardActionArea = { const MuiCardActionArea = {
styleOverrides: { styleOverrides: {
root: { root: {
'@media (min-width: 900px)': { "@media (min-width: 900px)": {
filter: 'grayscale(1);', filter: "grayscale(1);",
'&:hover': { "&:hover": {
filter: 'grayscale(0);', filter: "grayscale(0);",
transition: 'all .3s ease', transition: "all .3s ease",
}, },
}, },
}, },
}, },
}; };
export default MuiCardActionArea; 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 = { const MuiInputBase = {
input: { input: {
height: '1.3rem', height: "1.3rem",
'&:disabled': { "&:disabled": {
background: Cultured, background: Cultured,
color: Charcoal, color: Charcoal,
}, },
}, },
}; };
export default MuiInputBase; 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 = { const MuiMenuItem = {
root: { root: {
// fontFamily: 'Poppins', // fontFamily: 'Poppins',
fontSize: '14px', fontSize: "14px",
lineHeight: '19px', lineHeight: "19px",
textAlign: 'left', textAlign: "left",
color: RussianGreen, color: RussianGreen,
padding: '.5rem', padding: ".5rem",
}, },
}; };
export default MuiMenuItem; 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 = { const MuiOutlinedInput = {
root: { root: {
position: 'relative', position: "relative",
'&:hover:not($disabled):not($focused):not($error) $notchedOutline': { "&:hover:not($disabled):not($focused):not($error) $notchedOutline": {
border: `1px solid ${RussianGreen}`, border: `1px solid ${RussianGreen}`,
// Reset on touch devices, it doesn't add specificity // Reset on touch devices, it doesn't add specificity
'@media (hover: none)': { "@media (hover: none)": {
borderColor: RussianGreen, borderColor: RussianGreen,
}, },
}, },
// border focused // border focused
'&$focused $notchedOutline': { "&$focused $notchedOutline": {
borderColor: RussianGreen, borderColor: RussianGreen,
}, },
'&$disabled $notchedOutline': { "&$disabled $notchedOutline": {
background: Cultured, background: Cultured,
borderColor: Platinum, borderColor: Platinum,
opacity: 0.8, opacity: 0.8,
color: Charcoal, color: Charcoal,
}, },
}, },
//border before //border before
notchedOutline: { notchedOutline: {
borderColor: Cultured, borderColor: Cultured,
}, },
input: { input: {
background: White, background: White,
padding: '.5rem', padding: ".5rem",
borderRadius: '3px', borderRadius: "3px",
fontFamily: 'Poppins', fontFamily: "Poppins",
fontSize: ' 14px', fontSize: " 14px",
lineHeight: '19px', lineHeight: "19px",
color: Charcoal, color: Charcoal,
'&:disabled': { "&:disabled": {
background: Cultured, background: Cultured,
opacity: 0.8, opacity: 0.8,
color: Charcoal, color: Charcoal,
}, },
notchedOutline: { notchedOutline: {
border: 'transparent', border: "transparent",
}, },
}, },
multiline: { multiline: {
padding: '.5rem !important', padding: ".5rem !important",
border: '0px', border: "0px",
margin: 0, margin: 0,
}, },
}; };
export default MuiOutlinedInput; 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 = { const MuiSelect = {
root: { root: {
background: White, background: White,
padding: '.5rem', padding: ".5rem",
borderRadius: '3px', borderRadius: "3px",
fontFamily: 'Poppins', fontFamily: "Poppins",
fontSize: '14px', fontSize: "14px",
lineHeight: '19px', lineHeight: "19px",
textAlign: 'left', textAlign: "left",
color: Charcoal, color: Charcoal,
border: `1px solid ${Cultured}`, border: `1px solid ${Cultured}`,
'&:focus': { "&:focus": {
borderRadius: '3px', borderRadius: "3px",
borderColor: 'transparent', borderColor: "transparent",
background: White, background: White,
}, },
}, },
select: { select: {
minWidth: '5.5rem', minWidth: "5.5rem",
borderRadius: '3px', borderRadius: "3px",
border: `1px solid ${RussianGreen}`, border: `1px solid ${RussianGreen}`,
fontSize: '16px', fontSize: "16px",
lineHeight: '19px', lineHeight: "19px",
'&:focus': { "&:focus": {
borderRadius: '3px', borderRadius: "3px",
borderColor: RussianGreen, borderColor: RussianGreen,
background: White, background: White,
}, },
}, },
selectMenu: { selectMenu: {
background: White, background: White,
color: RussianGreen, color: RussianGreen,
'&:notchedOutline': { "&:notchedOutline": {
borderColor: 'transparent !important', borderColor: "transparent !important",
}, },
}, },
outlined: { outlined: {
color: `${Charcoal} !important`, color: `${Charcoal} !important`,
borderColor: 'transparent', borderColor: "transparent",
fontSize: '14px', fontSize: "14px",
lineHeight: '19px', lineHeight: "19px",
'&:hover ': { "&:hover ": {
borderColor: 'transparent', borderColor: "transparent",
outline: 'none', outline: "none",
}, },
'&:focus': { "&:focus": {
background: White, background: White,
borderColor: 'transparent', borderColor: "transparent",
}, },
}, },
iconOutlined: { iconOutlined: {
color: BlueGreen, color: BlueGreen,
}, },
icon: { icon: {
color: RussianGreen, color: RussianGreen,
}, },
}; };
export default MuiSelect; 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 = { const MuiSwitch = {
root: { root: {
overflow: 'visible', overflow: "visible",
width: '4rem', width: "4rem",
}, },
switchBase: { switchBase: {
background: 'transparent', background: "transparent",
'&$checked': { "&$checked": {
transform: 'translateX(26px)', transform: "translateX(26px)",
'&$checked + $track': { "&$checked + $track": {
backgroundColor: Cultured, backgroundColor: Cultured,
border: 'none', border: "none",
boxShadow: 'none', boxShadow: "none",
width: 36, width: 36,
}, },
'& $thumb': { "& $thumb": {
backgroundColor: BlueGreen, backgroundColor: BlueGreen,
boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)', boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.25)",
}, },
}, },
}, },
thumb: { thumb: {
backgroundColor: Charcoal, backgroundColor: Charcoal,
boxShadow: '0px 2px 5px rgba(0, 0, 0, 0.25)', boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.25)",
width: 20, width: 20,
height: 20, height: 20,
}, },
track: { backgroundColor: Cultured, width: 36 }, track: { backgroundColor: Cultured, width: 36 },
checked: {}, checked: {},
}; };
export default MuiSwitch; export default MuiSwitch;
src/themes/overrides/index.js
+12 -12
View File
@@ -1,6 +1,6 @@
import MuiCard from './MuiCard'; import MuiCard from "./MuiCard";
import MuiCardActionArea from './MuiCardActionArea'; import MuiCardActionArea from "./MuiCardActionArea";
import MuiButtonBase from './MuiButtonBase'; import MuiButtonBase from "./MuiButtonBase";
// import MuiAlert from './MuiAlert'; // import MuiAlert from './MuiAlert';
// import MuiInputBase from './MuiInputBase'; // import MuiInputBase from './MuiInputBase';
// import MuiMenuItem from './MuiMenuItem'; // import MuiMenuItem from './MuiMenuItem';
@@ -10,13 +10,13 @@ import MuiButtonBase from './MuiButtonBase';
/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */ /* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */
export default { export default {
MuiCard, MuiCard,
MuiCardActionArea, MuiCardActionArea,
MuiButtonBase, MuiButtonBase,
// MuiAlert, // MuiAlert,
// MuiInputBase, // MuiInputBase,
// MuiMenuItem, // MuiMenuItem,
// MuiOutlinedInput, // MuiOutlinedInput,
// MuiSelect, // MuiSelect,
// MuiSwitch, // MuiSwitch,
}; };