added redirect, changed card effect

package-lock.json

@@ -21,6 +21,7 @@
 				"react-scripts": "^5.0.1",
 				"react-spring": "^9.4.4",
 				"styled-components": "^5.3.5",
+				"vanilla-tilt": "^1.7.2",
 				"web-vitals": "^2.1.4"
 			},
 			"devDependencies": {
@@ -15934,6 +15935,11 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/vanilla-tilt": {
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.7.2.tgz",
+			"integrity": "sha512-arf2wY2Y65rP6Zxve9PnUUnRl9nQ1KenPNae6QRaVq/PEvaIto2bC4jYirNJ19U7nLkzI1H9O+nYtcQlX7BTsA=="
+		},
 		"node_modules/vary": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -28300,6 +28306,11 @@
 				}
 			}
 		},
+		"vanilla-tilt": {
+			"version": "1.7.2",
+			"resolved": "https://registry.npmjs.org/vanilla-tilt/-/vanilla-tilt-1.7.2.tgz",
+			"integrity": "sha512-arf2wY2Y65rP6Zxve9PnUUnRl9nQ1KenPNae6QRaVq/PEvaIto2bC4jYirNJ19U7nLkzI1H9O+nYtcQlX7BTsA=="
+		},
 		"vary": {
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

package.json

@@ -16,6 +16,7 @@
 		"react-scripts": "^5.0.1",
 		"react-spring": "^9.4.4",
 		"styled-components": "^5.3.5",
+		"vanilla-tilt": "^1.7.2",
 		"web-vitals": "^2.1.4"
 	},
 	"scripts": {

src/components/main-accordion/MainAccordion.jsx

@@ -40,6 +40,7 @@ const MainAccordion = ({items, title}) => {
 								imageURL={project.imageURL}
 								title={project.title}
 								description={project.description}
+								url={project.url}
 							/>
 						</Grid>
 					))}

src/components/main-card/MainCard.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import {
 	Card,
 	CardContent,
@@ -6,39 +7,65 @@ import {
 	CardActionArea,
 	Typography,
 } from '@mui/material';
-
 import { useTheme } from '@mui/material/styles';
-import { VioletColorWheel, SeaGreenCrayola } from 'themes/Colors';
 
-const MainCard = ({  imageURL, title, description, url }) => {
+import { Tilt } from './Tilt';
+
+// import { VioletColorWheel, SeaGreenCrayola } from 'themes/Colors';
+
+const MainCard = ({ imageURL, title, description, url }) => {
 	const theme = useTheme();
-	const shadowColor =
+	// const shadowColor =
-		theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel;
+	// 	theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel;
+	const options = {
+		reverse: true,
+		speed: 1200,
+		reset: false,
+	};
 
 	return (
-		<Card
+		<a
-			sx={{
+			href={url}
-				maxWidth: '320px',
+			target='_blank'
-				mx: 'auto',
+			rel='noopener noreferrer'
-				color: theme.palette.text.secondary,
+			style={{ textDecoration: 'none' }}>
-				backgroundColor: theme.palette.background.paper,
+			<Tilt
-				'&:hover': {
+				// onClick={(e) => handleClick(e)}
-					transition: 'all .7s ease',
+				options={options}
-					boxShadow: `1px 1px 20px 10px ${shadowColor}`,
+				children={
-				},
+					<Card
-			}}>
+						sx={{
-			<CardActionArea>
+							maxWidth: '320px',
-			<CardMedia component='img' height='150' image={imageURL} alt={title} />
+							mx: 'auto',
-				<CardContent color='white'>
+							color: theme.palette.text.secondary,
-					<Typography gutterBottom variant='h6' component='div'>
+							backgroundColor: theme.palette.background.paper,
-						{title}
+							// '&:hover': {
-					</Typography>
+							// 	transition: 'all .7s ease',
-					{{ description } !== '' && (
+							// 	boxShadow: `1px 1px 20px 10px ${shadowColor}`,
-						<Typography variant='body2'>{description}</Typography>
+							// },
-					)}
+						}}>
-				</CardContent>
+						<CardActionArea>
-			</CardActionArea>
+							<CardMedia
-		</Card>
+								component='img'
+								height='150'
+								image={imageURL}
+								alt={title}
+							/>
+							<CardContent color='white'>
+								<Typography gutterBottom variant='h6' component='div'>
+									{title}
+								</Typography>
+								<Typography></Typography>
+								{{ description } !== '' && (
+									<Typography variant='body2'>{description}</Typography>
+								)}
+							</CardContent>
+						</CardActionArea>
+					</Card>
+				}
+				style={{ padding: 0, margin: 0 }}
+			/>
+		</a>
 	);
 };
 

src/components/main-card/Tilt.jsx

@@ -0,0 +1,14 @@
+import React, { useEffect, useRef } from 'react';
+
+import VanillaTilt from 'vanilla-tilt';
+
+export const Tilt = (props) => {
+	const { options, children } = props;
+	const tilt = useRef(null);
+
+	useEffect(() => {
+		VanillaTilt.init(tilt.current, options);
+	}, [options]);
+
+	return <div ref={tilt}>{children}</div>;
+};

src/data/Data.jsx

@@ -1,48 +1,48 @@
 export const FreeCodeCampData = [
 	{
-		videoURL:
+		// videoURL:
-			'https://res.cloudinary.com/dadobos/video/upload/v1653827756/web/TechnicalDocumentationPage_h03qkv',
+		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827756/web/TechnicalDocumentationPage_h03qkv',
 		imageURL:
 			'https://res.cloudinary.com/dadobos/image/upload/v1653827744/web/TechnicalDocumentationPage_pbudut',
 		title: 'Technical Documentation',
 		description: '',
-		url: 'https://codepen.io/diaid/pen/PoopdWd',
+		url: 'https://codepen.io/diaid/full/PoopdWd',
 	},
 	{
-		videoURL:
+		// videoURL:
-			'https://res.cloudinary.com/dadobos/video/upload/v1653827749/web/TributePage_iarfpr',
+		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827749/web/TributePage_iarfpr',
 		imageURL:
 			'https://res.cloudinary.com/dadobos/image/upload/v1653827749/web/TributePage_hpxmr6',
 		title: 'Tribut Page',
 		description: '',
-		url: 'https://codepen.io/diaid/pen/MWWeorj',
+		url: 'https://codepen.io/diaid/full/MWWeorj',
 	},
 	{
-		videoURL:
+		// videoURL:
-			'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/SurveyForm_g0ornr',
+		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/SurveyForm_g0ornr',
 		imageURL:
 			'https://res.cloudinary.com/dadobos/image/upload/v1653827742/web/SurveyForm_upho4b',
 		title: 'Survey Form',
 		description: '',
-		url: 'https://codepen.io/diaid/pen/jOOMBeL',
+		url: 'https://codepen.io/diaid/full/jOOMBeL',
 	},
 	{
-		videoURL:
+		// videoURL:
-			'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/ProductLandingPage_fqwfjg',
+		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/ProductLandingPage_fqwfjg',
 		imageURL:
 			'https://res.cloudinary.com/dadobos/image/upload/v1653827745/web/ProductLandingPage_hebmnn',
 		title: 'Product Landing Page',
 		description: '',
-		url: 'https://codepen.io/diaid/pen/GRRrKLW',
+		url: 'https://codepen.io/diaid/full/GRRrKLW',
 	},
 	{
-		videoURL:
+		// videoURL:
-			'https://res.cloudinary.com/dadobos/video/upload/v1653827745/web/PersonalPortofolio_nibw6t',
+		// 	'https://res.cloudinary.com/dadobos/video/upload/v1653827745/web/PersonalPortofolio_nibw6t',
 		imageURL:
 			'https://res.cloudinary.com/dadobos/image/upload/v1653827743/web/PersonalPortofolio_exblcg',
 		title: 'Personal Portofolio',
 		description: '',
-		url: 'https://codepen.io/diaid/pen/YzzVgwK',
+		url: 'https://codepen.io/diaid/full/YzzVgwK',
 	},
 ];
 

src/themes/overrides/MuiCardActionArea.js

@@ -1,11 +1,12 @@
 const MuiCardActionArea = {
 	styleOverrides: {
 		root: {
-			filter: 'grayscale(1);',
+			'@media (min-width: 900px)': {
-			'&:hover': {
+				filter: 'grayscale(1);',
-				filter: 'grayscale(0);',
+				'&:hover': {
-				transition: 'all .3s ease',
+					filter: 'grayscale(0);',
-			
+					transition: 'all .3s ease',
+				},
 			},
 		},
 	},