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