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

added redirect, changed card effect

Browse Source
This commit is contained in:
dadobos
2022-05-31 21:51:34 +02:00
parent 623dc6f334
commit 7c17607c27
7 changed files with 103 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+11
View File
@@ -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
+1
View File
@@ -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
+1
View File
@@ -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
+55 -28
View File
@@ -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 =
theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel;
// const shadowColor =
// theme.palette.mode === 'dark' ? SeaGreenCrayola : VioletColorWheel;
const options = {
reverse: true,
speed: 1200,
reset: false,
};
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='150' image={imageURL} alt={title} />
<CardContent color='white'>
<Typography gutterBottom variant='h6' component='div'>
{title}
</Typography>
{{ description } !== '' && (
<Typography variant='body2'>{description}</Typography>
)}
</CardContent>
</CardActionArea>
</Card>
<a
href={url}
target='_blank'
rel='noopener noreferrer'
style={{ textDecoration: 'none' }}>
<Tilt
// onClick={(e) => handleClick(e)}
options={options}
children={
<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='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
+14
View File
@@ -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
+15 -15
View File
@@ -1,48 +1,48 @@
export const FreeCodeCampData = [
{
videoURL:
'https://res.cloudinary.com/dadobos/video/upload/v1653827756/web/TechnicalDocumentationPage_h03qkv',
// videoURL:
// '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:
'https://res.cloudinary.com/dadobos/video/upload/v1653827749/web/TributePage_iarfpr',
// videoURL:
// '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:
'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/SurveyForm_g0ornr',
// videoURL:
// '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:
'https://res.cloudinary.com/dadobos/video/upload/v1653827744/web/ProductLandingPage_fqwfjg',
// videoURL:
// '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:
'https://res.cloudinary.com/dadobos/video/upload/v1653827745/web/PersonalPortofolio_nibw6t',
// videoURL:
// '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
+6 -5
View File
@@ -1,11 +1,12 @@
const MuiCardActionArea = {
styleOverrides: {
root: {
filter: 'grayscale(1);',
'&:hover': {
filter: 'grayscale(0);',
transition: 'all .3s ease',
'@media (min-width: 900px)': {
filter: 'grayscale(1);',
'&:hover': {
filter: 'grayscale(0);',
transition: 'all .3s ease',
},
},
},
},