added card

README.md

@@ -12,4 +12,4 @@ You can view it live [here](https://dadobos.github.io/me/).
 <code>npm run start</code> or just <code>npm start</code>
 
 Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+Open [http://localhost:3000](http://localhost:3000/me) to view it in the browser.

jsconfig.json

@@ -1,6 +1,9 @@
 {
 	"compilerOptions": {
-		"baseUrl": "src"
+		"baseUrl": "src",
+		"module": "commonjs",
+		"target": "es6"
 	},
-	"include": ["src"]
+	"include": ["src"],
+	"exclude": ["node_modules"]
 }

package.json

@@ -4,8 +4,6 @@
 	"version": "0.1.0",
 	"private": true,
 	"dependencies": {
-		"@emotion/react": "^11.9.0",
-		"@emotion/styled": "^11.8.1",
 		"@mui/icons-material": "^5.6.2",
 		"@mui/material": "^5.6.4",
 		"@mui/styles": "^5.6.2",
@@ -17,6 +15,7 @@
 		"react-router-dom": "^6.3.0",
 		"react-scripts": "^5.0.1",
 		"react-spring": "^9.4.4",
+		"styled-components": "^5.3.5",
 		"web-vitals": "^2.1.4"
 	},
 	"scripts": {

src/components/main-card/MainCard.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Card from '@mui/material/Card';
+import {
+	CardContent,
+	CardMedia,
+	CardActionArea,
+	Typography,
+} from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+import { VioletColorWheel, SeaGreenCrayola } from 'themes/Theme';
+
+const MainCard = ({ imageURL, title, description }) => {
+	const theme = useTheme();
+	const shadowColor =
+		theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel;
+
+	return (
+		<Card
+			sx={{
+				maxWidth: '320px',
+				mx: 'auto',
+				color: theme.palette.text.secondary,
+				backgroundColor: theme.palette.background.paper,
+				'&:hover': {
+					transition: 'all .7s ease',
+					boxShadow: `1px 1px 20px 10px ${shadowColor}`,
+				},
+			}}>
+			<CardActionArea>
+				<CardMedia component='img' height='180' image={imageURL} alt={title} />
+				<CardContent color='white'>
+					<Typography gutterBottom variant='h6' component='div'>
+						{title}
+					</Typography>
+					{/* <Typography variant='body2'>{description}</Typography> */}
+				</CardContent>
+			</CardActionArea>
+		</Card>
+	);
+};
+
+export default MainCard;

src/components/main-card/index.js

@@ -0,0 +1 @@
+export { default } from './MainCard';

src/data/Data.jsx

@@ -0,0 +1,60 @@
+const ProjectData = [
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1642766522/web/Technical_Documentation_Page_v8ez8t.png',
+		title: 'Technical Documentation',
+		description: '0',
+		url: '',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1642766522/web/Tribute_Page_xftlcx.png',
+		title: 'Tribut Page',
+		description: '0',
+		url: '',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Survey_Form_de2ebp.png',
+		title: 'Survey Form',
+		description: '0',
+		url: '',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/Product_Landing_Page_x6v5qg.png',
+		title: 'Product Landing Page',
+		description: '0',
+		url: '',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1642766520/web/Personal_Portofolio_x9evp9.png',
+		title: 'Personal Portofolio',
+		description: '0',
+		url: '',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Square_orlybg.png',
+		title: 'Square',
+		description: '0',
+		url: '',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Restaurant_Billing_System_rgpsif.png',
+		title: 'Restaurant Billing System',
+		description: '0',
+		url: '',
+	},
+	{
+		imageURL:
+			'https://res.cloudinary.com/dadobos/image/upload/v1642766521/web/Billing_System_bazap1.png',
+		title: 'Billing System',
+		description: '0',
+		url: '',
+	},
+];
+
+export default ProjectData

src/data/index.js

@@ -0,0 +1 @@
+export { ProjectData } from './Data';

src/layouts/common/fullScreenContainer/FullScreenContainer.jsx

@@ -9,7 +9,7 @@ const FullScreenContainer = (props) => {
 			maxWidth='lg'
 			sx={{
 				minHeight: 'calc(100vh - 24px )',
-				paddingTop: '4rem',
+				paddingTop: '6rem',
 				paddingBottom: '2rem',
 				flex: 1,
 				fallbacks: [

src/layouts/main/components/header/navigation/Navigation.jsx

@@ -102,7 +102,6 @@ const Navigation = () => {
 				<IconButton
 					size='large'
 					onClick={() => setOpenDrawer(!openDrawer)}
-					disableRipple
 					color='inherit'>
 					{openDrawer ? (
 						<MenuOpenIcon fontSize='inherit' />

src/pages/landing/Landing.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Grid, Typography, Divider } from '@mui/material';
 import About from '../about';
 import Games from '../games';
-import BestPractices from '../bestPractices';
+import BestPractices from '../best-practices';
 import Projects from '../projects';
 
 const Home = () => {

src/pages/projects/Projects.jsx

@@ -1,21 +1,33 @@
 import React from 'react';
-import Box from '@mui/material/Box';
+import { Grid } from '@mui/material';
+import ProjectData from 'data/Data';
+import MainCard from 'components/main-card/MainCard';
 
 const Projects = () => {
 	return (
-		<div >
+		<Grid
-			Projects ...in progress
+			container
-			<Box>
+			direction='row'
-				{[...new Array(52)]
+			alignItems='flex-start'
-					.map(
+			justifyContent='baseline'
-						() => `Cras mattis consectetur purus sit amet fermentum.
+			spacing={4}
-Cras justo odio, dapibus ac facilisis in, egestas eget quam.
+			sx={{ my: 1 }}>
-Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+			{ProjectData.map((project) => (
-Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`
+				<Grid
-					)
+					item
-					.join('\n')}
+					xs={12}
-			</Box>
+					sm={6}
-		</div>
+					md={4}
+					key={project.title}
+					sx={{ alignItems: 'center', justifyContent: 'center' }}>
+					<MainCard
+						imageURL={project.imageURL}
+						title={project.title}
+						description={project.description}
+					/>
+				</Grid>
+			))}
+		</Grid>
 	);
 };
 

src/routes/Routes.js

@@ -10,7 +10,7 @@ const Home = lazy(() => import('../pages/landing'));
 const About = lazy(() => import('../pages/about'));
 const Projects = lazy(() => import('../pages/projects'));
 const Games = lazy(() => import('../pages/games'));
-const BestPractices = lazy(() => import('../pages/bestPractices'));
+const BestPractices = lazy(() => import('../pages/best-practices'));
 
 export const CustomRoutes = () => {
 	return (

src/themes/Theme.js

@@ -33,6 +33,8 @@ export const TumbleWeed = '#CEA07E';
 export const TwilightLavander = '#754668';
 export const UARed = '#E01A4F';
 export const White = '#ffffff';
+export const VioletColorWheel = '#7E0FFF';
+export const SeaGreenCrayola = '#0FFFC1';
 
 // Main layout
 export const MainTheme = (mode) => ({
@@ -55,7 +57,10 @@ export const MainTheme = (mode) => ({
 			  }
 			: {
 					// palette values for dark mode
-					primary: { main: GrannySmithApple },
+					primary: {
+						main: GrannySmithApple,
+						contrastText: White,
+					},
 					secondary: {
 						main: UARed,
 						contrastText: White,
@@ -75,7 +80,9 @@ export const MainTheme = (mode) => ({
 		contrastThreshold: 3,
 		tonalOffset: 0.2,
 	},
-	overrides,
+	components: {
+		...overrides,
+	},
 });
 
 // Landing page
@@ -89,6 +96,8 @@ export const LandingWhite = (theme) =>
 			palette: {
 				mode: theme.palette.mode,
 			},
-			overrides,
+			components: {
+				...overrides,
+			},
 		})
 	);

src/themes/overrides/MuiButtonBase.js

@@ -0,0 +1,8 @@
+const MuiButtonBase = {
+	defaultProps: {
+		// The props to change the default for.
+		disableRipple: true, // No more ripple, on the whole application 💣!
+	},
+};
+
+export default MuiButtonBase;

src/themes/overrides/MuiCard.js

@@ -0,0 +1,15 @@
+const MuiCard = {
+	styleOverrides: {
+		root: {
+			// maxWidth: '420px',
+			// marginLeft: 'auto',
+			// marginRight: 'auto',
+			// '&:hover': {
+			// 	transition: 'all .7s ease',
+			// 	boxShadow: '1px 1px 20px 10px rgba(15,255,193,0.75)',
+			// },
+		},
+	},
+};
+
+export default MuiCard;

src/themes/overrides/MuiCardActionArea.js

@@ -0,0 +1,14 @@
+const MuiCardActionArea = {
+	styleOverrides: {
+		root: {
+			filter: 'grayscale(1);',
+			'&:hover': {
+				filter: 'grayscale(0);',
+				transition: 'all .3s ease',
+			
+			},
+		},
+	},
+};
+
+export default MuiCardActionArea;

src/themes/overrides/index.js

@@ -1,3 +1,6 @@
+import MuiCard from './MuiCard';
+import MuiCardActionArea from './MuiCardActionArea';
+import MuiButtonBase from './MuiButtonBase';
 // import MuiAlert from './MuiAlert';
 // import MuiInputBase from './MuiInputBase';
 // import MuiMenuItem from './MuiMenuItem';
@@ -5,11 +8,15 @@
 // import MuiSelect from './MuiSelect';
 // import MuiSwitch from './MuiSwitch';
 
-// export default {
+/* eslint import/no-anonymous-default-export: [2, {"allowObject": true}] */
-//   MuiAlert,
+export default {
-//   MuiInputBase,
+	MuiCard,
-//   MuiMenuItem,
+	MuiCardActionArea,
-//   MuiOutlinedInput,
+	MuiButtonBase,
-//   MuiSelect,
+	// MuiAlert,
-//   MuiSwitch,
+	// MuiInputBase,
-// };
+	// MuiMenuItem,
+	// MuiOutlinedInput,
+	// MuiSelect,
+	// MuiSwitch,
+};