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

Refactor code style for consistency and readability

Browse Source 
- Updated import statements to use double quotes instead of single quotes across multiple files.
- Reformatted JSX return statements for better alignment and readability.
- Added missing newlines at the end of files where necessary.
- Adjusted component structure for improved clarity in the Landing, Blog, BestPractices, and Projects pages.
- Enhanced error boundary component for better error handling.
- Updated theme overrides for Material-UI components to maintain consistent styling.
This commit is contained in:
Dan Dobos
2025-10-17 17:13:54 +02:00
parent 00324b9667
commit 4aa5040ef5
64 changed files with 20206 additions and 22302 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.vscode/settings.json
Vendored
+2 -1
View File
@@ -1,3 +1,4 @@
{ {
"typescript.validate.enable": false "typescript.validate.enable": false,
"editor.formatOnSave": true
} }
README.md
+3
View File
@@ -5,10 +5,13 @@ This project is build with React and Material UI, and it holds a collection of p
You can view it live [here](https://dadobos.github.io/me/). You can view it live [here](https://dadobos.github.io/me/).
## Installation ## Installation
#### First you have to clone the repository #### First you have to clone the repository
<code>git clone https://github.com/dadobos/me.git</code> <code>git clone https://github.com/dadobos/me.git</code>
#### In the project directory, you can run: #### In the project directory, you can run:
<code>npm run start</code> or just <code>npm start</code> <code>npm run start</code> or just <code>npm start</code>
Runs the app in the development mode.\ Runs the app in the development mode.\
jsconfig.json
+1
View File
@@ -1,5 +1,6 @@
{ {
"compilerOptions": { "compilerOptions": {
"jsx": "react",
"baseUrl": "src", "baseUrl": "src",
"module": "commonjs", "module": "commonjs",
"target": "es6" "target": "es6"
package-lock.json
Generated
+359 -2492
View File
File diff suppressed because it is too large Load Diff
public/index.html
+1 -1
View File
@@ -1,4 +1,4 @@
<!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" />
src/App.js
+9 -9
View File
@@ -1,30 +1,30 @@
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 (
src/App.test.js
+3 -3
View File
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react'; import { render, screen } from "@testing-library/react";
import App from './App'; import App from "./App";
test('renders learn react link', () => { test("renders learn react link", () => {
render(<App />); render(<App />);
const linkElement = screen.getByText(/learn react/i); const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument(); expect(linkElement).toBeInTheDocument();
src/components/blog-accordion/BlogAccordion.jsx
+14 -12
View File
@@ -1,35 +1,37 @@
import React from 'react'; import React from "react";
import { import {
Accordion, Accordion,
AccordionSummary, AccordionSummary,
AccordionDetails, AccordionDetails,
Typography, Typography,
} from '@mui/material'; } from "@mui/material";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
const BlogAccordion = ({ blogContent }) => { const BlogAccordion = ({ blogContent }) => {
return ( return blogContent.map(({ title, description }) => (
blogContent.map(({title, description}) => (
<Accordion <Accordion
// defaultExpanded // defaultExpanded
// slotProps={{ unmountOnExit: true }} // slotProps={{ unmountOnExit: true }}
key={title} key={title}
sx={{ background: 'transparent' }}> sx={{ background: "transparent" }}
>
<AccordionSummary <AccordionSummary
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content' aria-controls="panel1a-content"
id='panel1a-header'> id="panel1a-header"
<Typography variant='h5'>{ title }</Typography> >
<Typography variant="h5">{title}</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
{description.map((lineContent, idx) => ( {description.map((lineContent, idx) => (
<Typography <Typography key={idx} paragraph>
key={idx} paragraph>{lineContent}</Typography> {lineContent}
</Typography>
))} ))}
</AccordionDetails> </AccordionDetails>
</Accordion> </Accordion>
))); ));
}; };
export default BlogAccordion; export default BlogAccordion;
src/components/main-accordion/MainAccordion.jsx
+17 -13
View File
@@ -1,33 +1,36 @@
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 <AccordionSummary
expandIcon={<ExpandMoreIcon />} expandIcon={<ExpandMoreIcon />}
aria-controls='panel1a-content' aria-controls="panel1a-content"
id='panel1a-header'> id="panel1a-header"
<Typography variant='h5'>{ title }</Typography> >
<Typography variant="h5">{title}</Typography>
</AccordionSummary> </AccordionSummary>
<AccordionDetails> <AccordionDetails>
<Grid <Grid
container container
direction='row' direction="row"
alignItems='flex-start' alignItems="flex-start"
justifyContent='baseline' justifyContent="baseline"
spacing={3}> spacing={3}
>
{items.map((project) => ( {items.map((project) => (
<Grid <Grid
item item
@@ -35,7 +38,8 @@ const MainAccordion = ({items, title}) => {
sm={6} sm={6}
md={4} md={4}
key={project.title} key={project.title}
sx={{ alignItems: 'center', justifyContent: 'center' }}> sx={{ alignItems: "center", justifyContent: "center" }}
>
<MainCard <MainCard
imageURL={project.imageURL} imageURL={project.imageURL}
title={project.title} title={project.title}
src/components/main-card/MainCard.jsx
+16 -14
View File
@@ -1,4 +1,4 @@
import React from 'react'; import React from "react";
import { import {
Card, Card,
@@ -6,10 +6,10 @@ import {
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();
@@ -17,7 +17,7 @@ const MainCard = ({ imageURL, title, description, url }) => {
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 (
@@ -27,25 +27,27 @@ const MainCard = ({ imageURL, title, description, url }) => {
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 <CardMedia
component='img' component="img"
height='150' height="150"
image={imageURL} image={imageURL}
alt={title} 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'> >
<Typography gutterBottom variant="h6" component="div">
{title} {title}
</Typography> </Typography>
</CardContent> </CardContent>
src/components/main-card/Tilt.jsx
+2 -2
View File
@@ -1,6 +1,6 @@
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;
src/components/main-card/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './MainCard'; export { default } from "./MainCard";
src/data/Data.jsx
+54 -55
View File
@@ -1,116 +1,115 @@
export const ReactData = [ export const ReactData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673023170/web/uxfuyzap5kbs1si34g29.png', "https://res.cloudinary.com/dadobos/image/upload/v1673023170/web/uxfuyzap5kbs1si34g29.png",
title: 'React Shop', title: "React Shop",
description: '', description: "",
url: 'https://dadobos.github.io/react-shop/', url: "https://dadobos.github.io/react-shop/",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1685729092/web/tzoxavfsfa44z2o9wrgi.png', "https://res.cloudinary.com/dadobos/image/upload/v1685729092/web/tzoxavfsfa44z2o9wrgi.png",
title: 'React Quiz App', title: "React Quiz App",
description: '', description: "",
url: 'https://dadobos.github.io/react-quiz-app/', url: "https://dadobos.github.io/react-quiz-app/",
}, },
]; ];
export const GoData = [ export const GoData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1669538934/web/ng0ghejmlsmzhrgyuiz4.png', "https://res.cloudinary.com/dadobos/image/upload/v1669538934/web/ng0ghejmlsmzhrgyuiz4.png",
title: 'Pokemon GO Templates', title: "Pokemon GO Templates",
description: '', description: "",
url: 'https://github.com/dadobos/pokemongotemplates', url: "https://github.com/dadobos/pokemongotemplates",
}, },
]; ];
export const WebsitesData = [ export const WebsitesData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1653850879/web/TheSquareProject_sgflcj.png', "https://res.cloudinary.com/dadobos/image/upload/v1653850879/web/TheSquareProject_sgflcj.png",
title: 'The Square Project', title: "The Square Project",
description: '', description: "",
url: 'https://dadobos.github.io/The-Square-Project/', url: "https://dadobos.github.io/The-Square-Project/",
}, },
]; ];
export const JavaData = [ export const JavaData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png', "https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png",
title: 'Restaurant Billing System', title: "Restaurant Billing System",
description: '', description: "",
url: 'https://github.com/dadobos/Restaurant', url: "https://github.com/dadobos/Restaurant",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png', "https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png",
title: 'Billing System', title: "Billing System",
description: '', description: "",
url: 'https://github.com/dadobos/Billing-System', url: "https://github.com/dadobos/Billing-System",
}, },
]; ];
export const VueData = [ export const VueData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1654030260/web/WorldCountries_ekx2of.png', "https://res.cloudinary.com/dadobos/image/upload/v1654030260/web/WorldCountries_ekx2of.png",
title: 'World Countries', title: "World Countries",
description: '', description: "",
url: 'https://dadobos.github.io/worldcountries/', url: "https://dadobos.github.io/worldcountries/",
}, },
]; ];
export const CSSData = [ export const CSSData = [
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/msvc649ua0gahqegu31o.png', "https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/msvc649ua0gahqegu31o.png",
title: 'Anchor Tag Hide Components', title: "Anchor Tag Hide Components",
description: '', description: "",
url: 'https://codepen.io/diaid/full/MWOOogX', url: "https://codepen.io/diaid/full/MWOOogX",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/dprvsa15ocx3l34dxogo.png', "https://res.cloudinary.com/dadobos/image/upload/v1673027279/web/dprvsa15ocx3l34dxogo.png",
title: 'Radio Hide Components', title: "Radio Hide Components",
description: '', description: "",
url: 'https://codepen.io/diaid/full/qBVdgWW', url: "https://codepen.io/diaid/full/qBVdgWW",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673025125/web/anidcin5lbxo2hced5i4.png', "https://res.cloudinary.com/dadobos/image/upload/v1673025125/web/anidcin5lbxo2hced5i4.png",
title: 'Rounded Paragraph', title: "Rounded Paragraph",
description: '', description: "",
url: 'https://codepen.io/diaid/full/QWxOgVm', url: "https://codepen.io/diaid/full/QWxOgVm",
}, },
{ {
imageURL: imageURL:
'https://res.cloudinary.com/dadobos/image/upload/v1673027940/web/z9qn4wstdtzpr4cf5xtx.png', "https://res.cloudinary.com/dadobos/image/upload/v1673027940/web/z9qn4wstdtzpr4cf5xtx.png",
title: 'Responsive Table', title: "Responsive Table",
description: '', description: "",
url: 'https://codepen.io/diaid/full/xxJRGMB', url: "https://codepen.io/diaid/full/xxJRGMB",
}, },
]; ];
export const PantoneBlog = [
export const PantoneBlog = [`For 2025, the Pantone Color Institute selects PANTONE 17-1230 Mocha Mousse, `For 2025, the Pantone Color Institute selects PANTONE 17-1230 Mocha Mousse,
a warming, brown hue imbued with richness. It nurtures us with its suggestion of the delectable qualities a warming, brown hue imbued with richness. It nurtures us with its suggestion of the delectable qualities
of chocolate and coffee, answering our desire for comfort.`] of chocolate and coffee, answering our desire for comfort.`,
];
export const BlogContent = [ 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', title: "How I achieved 100% on Lighthouse Audit",
description: [ description: ["TBA"],
'TBA' ]
}, },
]; ];
src/index.js
+6 -7
View File
@@ -1,14 +1,13 @@
import React from 'react'; import React from "react";
import ReactDOM from 'react-dom/client'; import ReactDOM from "react-dom/client";
import App from './App'; import App from "./App";
import reportWebVitals from './reportWebVitals'; import reportWebVitals from "./reportWebVitals";
const root = ReactDOM.createRoot(document.getElementById("root"));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
<React.StrictMode> <React.StrictMode>
<App /> <App />
</React.StrictMode> </React.StrictMode>,
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function
src/layouts/common/backToTop/BackToTop.jsx
+13 -12
View File
@@ -1,8 +1,8 @@
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;
@@ -18,17 +18,17 @@ function ScrollTop(props) {
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>
@@ -40,17 +40,18 @@ const BackToTop = (props) => {
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}> <ScrollTop {...props}>
<KeyboardArrowUpIcon <KeyboardArrowUpIcon
sx={{ sx={{
width: '5rem', width: "5rem",
height: '5rem', height: "5rem",
[theme.breakpoints.down('md')]: { width: '3rem', height: '3rem' }, [theme.breakpoints.down("md")]: { width: "3rem", height: "3rem" },
}} }}
/> />
</ScrollTop> </ScrollTop>
src/layouts/common/backToTop/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './BackToTop'; export { default } from "./BackToTop";
src/layouts/common/darkModeToggle/DarkModeToggle.jsx
+11 -8
View File
@@ -1,17 +1,20 @@
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}
sx={{ color: theme.palette.text.secondary }}
>
{theme.palette.mode === "dark" ? (
<WbSunnyOutlinedIcon /> <WbSunnyOutlinedIcon />
) : ( ) : (
<NightsStayOutlinedIcon /> <NightsStayOutlinedIcon />
src/layouts/common/darkModeToggle/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './DarkModeToggle'; export { default } from "./DarkModeToggle";
src/layouts/common/fullScreenContainer/FullScreenContainer.jsx
+11 -10
View File
@@ -1,23 +1,24 @@
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} {children}
</Container> </Container>
); );
src/layouts/common/fullScreenContainer/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './FullScreenContainer'; export { default } from "./FullScreenContainer";
src/layouts/common/hideOnScroll/HideOnScroll.jsx
+3 -3
View File
@@ -1,5 +1,5 @@
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;
@@ -8,7 +8,7 @@ const HideOnScroll = (props) => {
}); });
return ( return (
<Slide appear={false} direction='down' in={!trigger}> <Slide appear={false} direction="down" in={!trigger}>
{children} {children}
</Slide> </Slide>
); );
src/layouts/common/hideOnScroll/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './HideOnScroll.jsx'; export { default } from "./HideOnScroll.jsx";
src/layouts/landing/LandingLayout.jsx
+8 -8
View File
@@ -1,13 +1,13 @@
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;
@@ -17,7 +17,7 @@ const LandingLayout = (props) => {
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}
src/layouts/landing/components/header/Header.jsx
+40 -26
View File
@@ -1,6 +1,6 @@
import React from 'react'; import React from "react";
import { Link } from 'react-router-dom'; import { Link } from "react-router-dom";
import { import {
AppBar, AppBar,
@@ -11,12 +11,12 @@ import {
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();
@@ -26,40 +26,54 @@ const Header = () => {
<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> <Toolbar>
<Grid container justifyContent='space-between' alignItems='center'> <Grid
<Grid item> container
<Breadcrumbs aria-label='breadcrumb'>
<Typography
variant='h5'
sx={{ sx={{
textTransform: 'uppercase', width: "100%",
letterSpacing: '.2rem', justifyContent: "space-between",
}}> alignItems: "center",
}}
>
<Grid item>
<Breadcrumbs aria-label="breadcrumb">
<Typography
variant="h5"
sx={{
textTransform: "uppercase",
letterSpacing: ".2rem",
}}
>
Dan Dobos Dan Dobos
</Typography> </Typography>
{/*href="#about" is used to navigate within the page */}
<MaterialLink <MaterialLink
color='textPrimary' color="textPrimary"
href='#about' href="#about"
style={{ cursor: 'pointer' }}> sx={{ cursor: "pointer" }}
>
About About
</MaterialLink> </MaterialLink>
</Breadcrumbs> </Breadcrumbs>
</Grid> </Grid>
<Grid item> <Grid item>
<Grid container alignItems='center'> <Grid container alignItems="center">
<Link to='/projects'> <Link to="/projects">
<IconButton disableRipple sx={{ mr: 1 }}> <IconButton
aria-label="Projects"
disableRipple
sx={{ mr: 1 }}
>
<ThreeSixtyOutlinedIcon /> <ThreeSixtyOutlinedIcon />
</IconButton> </IconButton>
</Link> </Link>
src/layouts/landing/components/header/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Header'; export { default } from "./Header";
src/layouts/landing/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './LandingLayout.jsx' export { default } from "./LandingLayout.jsx";
src/layouts/main/MainLayout.jsx
+6 -6
View File
@@ -1,16 +1,16 @@
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}
src/layouts/main/components/footer/Footer.jsx
+10 -8
View File
@@ -1,5 +1,5 @@
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 = () => {
@@ -10,16 +10,18 @@ const Footer = () => {
<Grid <Grid
container container
sx={{ sx={{
marginTop: 'auto', marginTop: "auto",
zIndex: 1300, zIndex: 1300,
minHeight: '24px', minHeight: "24px",
}} }}
justifyContent='center'> justifyContent="center"
>
<Grid item> <Grid item>
<Typography <Typography
inline='true' inline="true"
variant='body1' variant="body1"
fontFamily='Nanum Gothic Coding'> fontFamily="Nanum Gothic Coding"
>
Dan Dobos &copy; {getCurrentYear()} Dan Dobos &copy; {getCurrentYear()}
</Typography> </Typography>
</Grid> </Grid>
src/layouts/main/components/footer/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Footer'; export { default } from "./Footer";
src/layouts/main/components/header/Header.jsx
+7 -7
View File
@@ -1,20 +1,20 @@
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>
src/layouts/main/components/header/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Header'; export { default } from "./Header";
src/layouts/main/components/header/navigation/Navigation.jsx
+55 -48
View File
@@ -1,5 +1,5 @@
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,
@@ -11,19 +11,19 @@ import {
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);
@@ -45,32 +45,32 @@ const Navigation = () => {
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(() => {
@@ -92,24 +92,26 @@ const Navigation = () => {
<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 <IconButton
size='large' size="large"
onClick={() => setOpenDrawer(!openDrawer)} onClick={() => setOpenDrawer(!openDrawer)}
color='inherit'> color="inherit"
>
{openDrawer ? ( {openDrawer ? (
<MenuOpenIcon fontSize='inherit' /> <MenuOpenIcon fontSize="inherit" />
) : ( ) : (
<MenuIcon fontSize='inherit' /> <MenuIcon fontSize="inherit" />
)} )}
</IconButton> </IconButton>
<DarkModeToggle style={{ alignSelf: 'right', color: 'inherit' }} /> <DarkModeToggle style={{ alignSelf: "right", color: "inherit" }} />
</Paper> </Paper>
{matches ? ( {matches ? (
@@ -121,16 +123,17 @@ const Navigation = () => {
onOpen={() => setOpenDrawer(true)} onOpen={() => setOpenDrawer(true)}
onClose={() => setOpenDrawer(false)} onClose={() => setOpenDrawer(false)}
sx={{ sx={{
backgroundColor: 'transparent', backgroundColor: "transparent",
}}> }}
<List sx={{ paddingTop: '4rem' }}> >
<List sx={{ paddingTop: "4rem" }}>
{routes.map((route) => ( {routes.map((route) => (
<ListItem <ListItem
sx={{ sx={{
padding: '1.5rem 2rem ', padding: "1.5rem 2rem ",
color: theme.palette.text.secondary, color: theme.palette.text.secondary,
width: '100%', width: "100%",
'&.Mui-selected': { "&.Mui-selected": {
backgroundColor: theme.palette.background.paper, backgroundColor: theme.palette.background.paper,
}, },
}} }}
@@ -144,14 +147,16 @@ const Navigation = () => {
setValue(route.activeIndex); setValue(route.activeIndex);
handleDrawerClose(); handleDrawerClose();
}}> }}
>
<ListItemText <ListItemText
disableTypography disableTypography
sx={{ sx={{
alignItems: 'flex-start', alignItems: "flex-start",
fontSize: '1.2rem', fontSize: "1.2rem",
textTransform: 'capitalize', textTransform: "capitalize",
}}> }}
>
{route.name} {route.name}
</ListItemText> </ListItemText>
</ListItem> </ListItem>
@@ -162,8 +167,9 @@ const Navigation = () => {
<Paper <Paper
elevation={0} elevation={0}
sx={{ sx={{
display: { sm: 'block', xs: 'none' }, display: { sm: "block", xs: "none" },
}}> }}
>
<Tabs <Tabs
action={tabsActions} action={tabsActions}
value={value} value={value}
@@ -172,9 +178,10 @@ const Navigation = () => {
TabIndicatorProps={{ TabIndicatorProps={{
style: { style: {
background: theme.palette.secondary.contrastText, background: theme.palette.secondary.contrastText,
height: '3px', height: "3px",
}, },
}}> }}
>
{routes.map((route) => ( {routes.map((route) => (
<Tab <Tab
disableRipple disableRipple
@@ -183,8 +190,8 @@ const Navigation = () => {
component={Link} component={Link}
to={route.link} to={route.link}
sx={{ sx={{
fontSize: '1.2rem', fontSize: "1.2rem",
'&.Mui-selected': { "&.Mui-selected": {
color: theme.palette.secondary.contrastText, color: theme.palette.secondary.contrastText,
}, },
}} }}
src/layouts/main/components/header/navigation/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Navigation'; export { default } from "./Navigation";
src/layouts/main/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './MainLayout'; export { default } from "./MainLayout";
src/pages/about/About.jsx
+37 -32
View File
@@ -1,69 +1,74 @@
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 <div
style={{ style={{
minHeight: '70vh', minHeight: "70vh",
display: 'flex', display: "flex",
alignItems: 'flex-end', alignItems: "flex-end",
}}> }}
>
<Grid <Grid
container container
direction='column' direction="column"
alignItems='flex-end' alignItems="flex-end"
justifyContent='flex-end' justifyContent="flex-end"
spacing={3}> spacing={3}
>
<Grid item> <Grid item>
<Typography variant='h4' align='right' inline='true'> <Typography variant="h4" align="right" inline="true">
Software Developer Software Developer
</Typography> </Typography>
</Grid> </Grid>
<Grid item> <Grid item>
<Typography <Typography
variant='h1' variant="h1"
gutterBottom gutterBottom
inline='true' inline="true"
sx={{ sx={{
fontFamily: 'Chilanka', fontFamily: "Chilanka",
textTransform: 'uppercase', textTransform: "uppercase",
letterSpacing: '2rem', letterSpacing: "2rem",
textAlign: 'left', textAlign: "left",
[theme.breakpoints.down('md')]: { [theme.breakpoints.down("md")]: {
textAlign: 'right', textAlign: "right",
letterSpacing: '1rem', letterSpacing: "1rem",
}, },
}}> }}
>
Dan Dobos Dan Dobos
</Typography> </Typography>
</Grid> </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 danandreidobos@gmail.com
</Link> </Link>
</Grid> </Grid>
src/pages/about/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './About'; export { default } from "./About";
src/pages/best-practices/BestPractices.jsx
+4 -4
View File
@@ -1,9 +1,9 @@
import React from 'react'; import React from "react";
import { CSSData } from 'data/Data'; import { CSSData } from "data/Data";
import MainAccordion from 'components/main-accordion/MainAccordion'; import MainAccordion from "components/main-accordion/MainAccordion";
const BestPractices = () => { const BestPractices = () => {
return (<MainAccordion items={CSSData} title='CSS Only' />); return <MainAccordion items={CSSData} title="CSS Only" />;
}; };
export default BestPractices; export default BestPractices;
src/pages/best-practices/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './BestPractices' export { default } from "./BestPractices";
src/pages/blog/Blog.jsx
+3 -7
View File
@@ -1,19 +1,15 @@
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} />
</> </>
); );
}; };
src/pages/blog/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './Blog' export { default } from "./Blog";
src/pages/landing/Landing.jsx
+17 -17
View File
@@ -1,44 +1,44 @@
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>
src/pages/landing/index.js
+1 -1
View File
@@ -1 +1 @@
export { default } from './Landing'; export { default } from "./Landing";
src/pages/projects/Projects.jsx
+8 -8
View File
@@ -1,4 +1,4 @@
import React from 'react'; import React from "react";
import { import {
// AngularData, // AngularData,
ReactData, ReactData,
@@ -6,18 +6,18 @@ import {
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" />
</> </>
); );
}; };
src/pages/projects/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './Projects' export { default } from "./Projects";
src/reportWebVitals.js
+2 -2
View File
@@ -1,6 +1,6 @@
const reportWebVitals = onPerfEntry => { const reportWebVitals = (onPerfEntry) => {
if (onPerfEntry && onPerfEntry instanceof Function) { if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry); getCLS(onPerfEntry);
getFID(onPerfEntry); getFID(onPerfEntry);
getFCP(onPerfEntry); getFCP(onPerfEntry);
src/routes/Routes.js
+17 -17
View File
@@ -1,24 +1,24 @@
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 />
@@ -27,7 +27,7 @@ export const CustomRoutes = () => {
/> />
<Route <Route
path='about' path="about"
element={ element={
<MainLayout> <MainLayout>
<About /> <About />
@@ -36,7 +36,7 @@ export const CustomRoutes = () => {
/> />
<Route <Route
path='projects' path="projects"
element={ element={
<MainLayout> <MainLayout>
<Projects /> <Projects />
@@ -45,7 +45,7 @@ export const CustomRoutes = () => {
/> />
<Route <Route
path='blog' path="blog"
element={ element={
<MainLayout> <MainLayout>
<Blog /> <Blog />
@@ -54,7 +54,7 @@ export const CustomRoutes = () => {
/> />
<Route <Route
path='best-practices' path="best-practices"
element={ element={
<MainLayout> <MainLayout>
<BestPractices /> <BestPractices />
src/routes/components/customRoute/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './CustomRoute' export { default } from "./CustomRoute";
src/routes/components/errorBoundary/ErrorBoundary.jsx
+2 -2
View File
@@ -1,4 +1,4 @@
import React, { Component } from 'react'; import React, { Component } from "react";
class ErrorBoundary extends Component { class ErrorBoundary extends Component {
constructor(props) { constructor(props) {
@@ -21,7 +21,7 @@ class ErrorBoundary extends Component {
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}
src/routes/components/errorBoundary/index.js
+1 -1
View File
@@ -1 +1 @@
export {default} from './ErrorBoundary' export { default } from "./ErrorBoundary";
src/setupTests.js
+1 -1
View File
@@ -2,4 +2,4 @@
// allows you to do things like: // allows you to do things like:
// expect(element).toHaveTextContent(/react/i) // expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom // learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom'; import "@testing-library/jest-dom";
src/themes/Colors.js
+57 -57
View File
@@ -1,58 +1,58 @@
export const AcidGreen = '#BDBF09'; export const AcidGreen = "#BDBF09";
export const AntiqueFuchsia = '#875C74'; export const AntiqueFuchsia = "#875C74";
export const Black = '#000000'; export const Black = "#000000";
export const BlueGreen = '#004d40'; export const BlueGreen = "#004d40";
export const BrandyPunch = '#ce8f28'; export const BrandyPunch = "#ce8f28";
export const BrownSugar = '#B4654A'; export const BrownSugar = "#B4654A";
export const Cadet = '#5A7881'; export const Cadet = "#5A7881";
export const Capri = '#5CC8FF'; export const Capri = "#5CC8FF";
export const Celeste = '#CDFFF9'; export const Celeste = "#CDFFF9";
export const Cerise = '#D1345B'; export const Cerise = "#D1345B";
export const Charcoal = '#37474f'; export const Charcoal = "#37474f";
export const ChartreuseTraditional = '#E4FF1A'; export const ChartreuseTraditional = "#E4FF1A";
export const Citron = '#9EA93F'; export const Citron = "#9EA93F";
export const Cultured = '#eceff1'; export const Cultured = "#eceff1";
export const DarkOrange = '#FF8811'; export const DarkOrange = "#FF8811";
export const DarkPurple = '#0F0326'; export const DarkPurple = "#0F0326";
export const DeepSpaceSparkle = '#335C67'; export const DeepSpaceSparkle = "#335C67";
export const Eggplant = '#75485E'; export const Eggplant = "#75485E";
export const EnglishVermillion = '#D64045'; export const EnglishVermillion = "#D64045";
export const Flame = '#cf5c36'; export const Flame = "#cf5c36";
export const FruitSalad = '#509f60'; export const FruitSalad = "#509f60";
export const GrannySmithApple = '#ADF6B1'; export const GrannySmithApple = "#ADF6B1";
export const Grullo = '#A69888'; export const Grullo = "#A69888";
export const IlluminatingEmerald = '#3E9276'; export const IlluminatingEmerald = "#3E9276";
export const ImperialRed = '#EF233C'; export const ImperialRed = "#EF233C";
export const InternationalGoldenGateBridge = '#BB4430'; export const InternationalGoldenGateBridge = "#BB4430";
export const Magnolia = '#F3EFF5'; export const Magnolia = "#F3EFF5";
export const MaizeCrayola = '#E8C547'; export const MaizeCrayola = "#E8C547";
export const Mango = '#F7B801'; export const Mango = "#F7B801";
export const MangoTango = '#F5853F'; export const MangoTango = "#F5853F";
export const MaximumBlue = '#42BFDD'; export const MaximumBlue = "#42BFDD";
export const MiddleRedPurple = '#AF5D63'; export const MiddleRedPurple = "#AF5D63";
export const OuterSpaceCrayola = '#22363C'; export const OuterSpaceCrayola = "#22363C";
export const PersianGreen = '#009688'; export const PersianGreen = "#009688";
export const Platinum = '#E5E5E5'; export const Platinum = "#E5E5E5";
export const Pomegranate = '#f44336'; export const Pomegranate = "#f44336";
export const RedRYB = '#FF220C'; export const RedRYB = "#FF220C";
export const Rosewood = '#5E0B15'; export const Rosewood = "#5E0B15";
export const Ruby = '#D81E5B'; export const Ruby = "#D81E5B";
export const RubyRed = '#A31621'; export const RubyRed = "#A31621";
export const RussianGreen = '#678D58'; export const RussianGreen = "#678D58";
export const Safron = '#EAC435'; export const Safron = "#EAC435";
export const SeaGreenCrayola = '#0FFFC1'; export const SeaGreenCrayola = "#0FFFC1";
export const SlimyGreen = '#2B9720'; export const SlimyGreen = "#2B9720";
export const SpanishGreen = '#058E3F'; export const SpanishGreen = "#058E3F";
export const Spectra = '#315460'; export const Spectra = "#315460";
export const TeaGreen = '#CAE7B9'; export const TeaGreen = "#CAE7B9";
export const TucanRed = '#754043'; export const TucanRed = "#754043";
export const TumbleWeed = '#CEA07E'; export const TumbleWeed = "#CEA07E";
export const TwilightLavander = '#754668'; export const TwilightLavander = "#754668";
export const UARed = '#E01A4F'; export const UARed = "#E01A4F";
export const VioletColorWheel = '#7E0FFF'; export const VioletColorWheel = "#7E0FFF";
export const White = '#ffffff'; export const White = "#ffffff";
export const WildBlueYonder = '#99B2DD'; export const WildBlueYonder = "#99B2DD";
export const DavysGray = '#565656'; export const DavysGray = "#565656";
export const Periwinkle = '#B7B5E4'; export const Periwinkle = "#B7B5E4";
//The Pantone Color of the Year 2025, PANTONE 17-1230 Mocha Mousse aka Chamoisee //The Pantone Color of the Year 2025, PANTONE 17-1230 Mocha Mousse aka Chamoisee
export const Chamoisee = '#A47864'; export const Chamoisee = "#A47864";
src/themes/Theme.js
+7 -10
View File
@@ -1,6 +1,6 @@
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,
@@ -9,13 +9,13 @@ import {
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
@@ -36,8 +36,6 @@ export const MainTheme = (mode) => ({
primary: White, primary: White,
secondary: White, secondary: White,
}, },
} }
: { : {
// palette values for dark mode // palette values for dark mode
@@ -58,7 +56,6 @@ export const MainTheme = (mode) => ({
primary: AcidGreen, primary: AcidGreen,
secondary: AcidGreen, secondary: AcidGreen,
}, },
}), }),
lightAccent: { main: VioletColorWheel }, lightAccent: { main: VioletColorWheel },
darkAccent: { main: SeaGreenCrayola }, darkAccent: { main: SeaGreenCrayola },
@@ -75,8 +72,8 @@ 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,
@@ -84,5 +81,5 @@ export const LandingWhite = (theme) =>
components: { components: {
...overrides, ...overrides,
}, },
}) }),
); );
src/themes/overrides/MuiAlert.js
+7 -7
View File
@@ -1,8 +1,8 @@
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: {
@@ -26,14 +26,14 @@ const MuiAlert = {
backgroundColor: FruitSalad, backgroundColor: FruitSalad,
}, },
icon: { icon: {
display: 'flex', display: "flex",
opacity: 1, opacity: 1,
fontsize: '16px', fontsize: "16px",
marginLeft: '3rem', marginLeft: "3rem",
marginRight: '1rem', marginRight: "1rem",
}, },
message: { message: {
padding: '16px 0 8px 0', padding: "16px 0 8px 0",
}, },
}; };
export default MuiAlert; export default MuiAlert;
src/themes/overrides/MuiCardActionArea.js
+5 -5
View File
@@ -1,11 +1,11 @@
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",
}, },
}, },
}, },
src/themes/overrides/MuiInputBase.js
+3 -3
View File
@@ -1,9 +1,9 @@
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,
}, },
src/themes/overrides/MuiMenuItem.js
+5 -5
View File
@@ -1,13 +1,13 @@
import { RussianGreen } from '../Theme'; import { RussianGreen } from "../Theme";
const MuiMenuItem = { const MuiMenuItem = {
root: { root: {
// fontFamily: 'Poppins', // fontFamily: 'Poppins',
fontSize: '14px', fontSize: "14px",
lineHeight: '19px', lineHeight: "19px",
textAlign: 'left', textAlign: "left",
color: RussianGreen, color: RussianGreen,
padding: '.5rem', padding: ".5rem",
}, },
}; };
export default MuiMenuItem; export default MuiMenuItem;
src/themes/overrides/MuiOutlinedInput.js
+15 -15
View File
@@ -1,21 +1,21 @@
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,
@@ -28,26 +28,26 @@ const MuiOutlinedInput = {
}, },
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,
}, },
}; };
src/themes/overrides/MuiSelect.js
+26 -26
View File
@@ -1,30 +1,30 @@
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,
}, },
@@ -33,23 +33,23 @@ const MuiSelect = {
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: {
src/themes/overrides/MuiSwitch.js
+12 -12
View File
@@ -1,30 +1,30 @@
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,
}, },
src/themes/overrides/index.js
+3 -3
View File
@@ -1,6 +1,6 @@
import MuiCard from './MuiCard'; import MuiCard from "./MuiCard";
import MuiCardActionArea from './MuiCardActionArea'; import MuiCardActionArea from "./MuiCardActionArea";
import MuiButtonBase from './MuiButtonBase'; import MuiButtonBase from "./MuiButtonBase";
// import MuiAlert from './MuiAlert'; // import MuiAlert from './MuiAlert';
// import MuiInputBase from './MuiInputBase'; // import MuiInputBase from './MuiInputBase';
// import MuiMenuItem from './MuiMenuItem'; // import MuiMenuItem from './MuiMenuItem';