Refactor code style for consistency and readability
- 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
Vendored
+2
-1
@@ -1,3 +1,4 @@
|
||||
{
|
||||
"typescript.validate.enable": false
|
||||
"typescript.validate.enable": false,
|
||||
"editor.formatOnSave": true
|
||||
}
|
||||
|
||||
@@ -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.\
|
||||
|
||||
+8
-7
@@ -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"]
|
||||
}
|
||||
|
||||
Generated
+18756
-20889
File diff suppressed because it is too large
Load Diff
+62
-62
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
+28
-28
@@ -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>
|
||||
|
||||
+30
-30
@@ -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;
|
||||
|
||||
+3
-3
@@ -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();
|
||||
|
||||
@@ -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;
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>;
|
||||
};
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './MainCard';
|
||||
export { default } from "./MainCard";
|
||||
|
||||
+95
-96
@@ -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.`]
|
||||
|
||||
|
||||
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' ]
|
||||
},
|
||||
|
||||
of chocolate and coffee, answering our desire for comfort.`,
|
||||
];
|
||||
|
||||
export const BlogContent = [
|
||||
{
|
||||
title: "Pantone color 2025",
|
||||
description: [
|
||||
"A Pantone color is a standardized, proprietary color created by the Pantone company, which assigns a unique code to each color. These colors are used in various industries to ensure color consistency across different materials and locations, as they provide a shared language for specifying and reproducing colors accurately. Pantone colors are often more vibrant and consistent than colors created with the standard CMYK or RGB color models.",
|
||||
|
||||
"For 2025, the Pantone Color Institute selects PANTONE 17-1230 Mocha Mousse, a warming, brown hue imbued with richness. It nurtures us with its suggestion of the delectable qualities of chocolate and coffee, answering our desire for comfort.",
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "How I achieved 100% on Lighthouse Audit",
|
||||
description: ["TBA"],
|
||||
},
|
||||
];
|
||||
+8
-9
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './BackToTop';
|
||||
export { default } from "./BackToTop";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './DarkModeToggle';
|
||||
export { default } from "./DarkModeToggle";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './FullScreenContainer';
|
||||
export { default } from "./FullScreenContainer";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './HideOnScroll.jsx';
|
||||
export { default } from "./HideOnScroll.jsx";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './Header';
|
||||
export { default } from "./Header";
|
||||
|
||||
@@ -1 +1 @@
|
||||
export {default} from './LandingLayout.jsx'
|
||||
export { default } from "./LandingLayout.jsx";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 © {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 © {getCurrentYear()}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './Footer';
|
||||
export { default } from "./Footer";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './Header';
|
||||
export { default } from "./Header";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './Navigation';
|
||||
export { default } from "./Navigation";
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './MainLayout';
|
||||
export { default } from "./MainLayout";
|
||||
|
||||
+74
-69
@@ -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" 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">
|
||||
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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './About';
|
||||
export { default } from "./About";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export {default} from './BestPractices'
|
||||
export { default } from "./BestPractices";
|
||||
|
||||
+9
-13
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export {default} from './Blog'
|
||||
export { default } from "./Blog";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export { default } from './Landing';
|
||||
export { default } from "./Landing";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export {default} from './Projects'
|
||||
export { default } from "./Projects";
|
||||
|
||||
@@ -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);
|
||||
|
||||
+59
-59
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export {default} from './CustomRoute'
|
||||
export { default } from "./CustomRoute";
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -1 +1 @@
|
||||
export {default} from './ErrorBoundary'
|
||||
export { default } from "./ErrorBoundary";
|
||||
|
||||
+1
-1
@@ -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";
|
||||
|
||||
+57
-57
@@ -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";
|
||||
|
||||
+75
-78
@@ -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
|
||||
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,
|
||||
},
|
||||
|
||||
}),
|
||||
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,
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user