Skip to content

Commit 09a3239

Browse files
JoHoopJoHoop
committed
Add sponsor button
1 parent 957e639 commit 09a3239

File tree

7 files changed

+358
-298
lines changed

7 files changed

+358
-298
lines changed

‎src/components/content/SocialIcons.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { Link, Tooltip, IconButton, Zoom } from '@material-ui/core';
3+
import { makeStyles } from '@material-ui/core/styles';
4+
import Resume from '../../settings/resume.json';
5+
6+
const useStyles = makeStyles((theme) => ({
7+
socialIcons: {
8+
position: 'absolute',
9+
top: theme.spacing(6),
10+
right: theme.spacing(6),
11+
},
12+
iconButton: {
13+
height: '2.5rem',
14+
width: '2.5rem',
15+
display: 'block',
16+
marginBottom: theme.spacing(2),
17+
},
18+
icon: {
19+
fontSize: '1.25rem',
20+
},
21+
}));
22+
23+
export const SocialIcons = () => {
24+
const classes = useStyles();
25+
26+
const socialItems = Resume.basics.profiles.map((socialItem) => (
27+
<Link
28+
href={socialItem.url}
29+
key={socialItem.network.toLowerCase()}
30+
target='_blank'
31+
rel='noopener noreferrer'
32+
underline='none'
33+
color='inherit'
34+
>
35+
<Tooltip
36+
title={socialItem.username}
37+
placement='left'
38+
TransitionComponent={Zoom}
39+
>
40+
<IconButton
41+
color='inherit'
42+
aria-label={socialItem.network}
43+
className={classes.iconButton}
44+
>
45+
<i className={`${classes.icon} ${socialItem.x_icon}`}></i>
46+
</IconButton>
47+
</Tooltip>
48+
</Link>
49+
));
50+
51+
return <div className={classes.socialIcons}>{socialItems}</div>;
52+
};

‎src/components/content/SponsorButton.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
4+
const useStyles = makeStyles((theme) => ({
5+
svgHover: {
6+
fill: theme.palette.secondary.main,
7+
'&:hover': {
8+
transform: 'scale(1.1)',
9+
},
10+
'&:focus': {
11+
transform: 'scale(1.1)',
12+
},
13+
transition: 'transform 0.15s cubic-bezier(0.2, 0, 0.13, 2)',
14+
transform: 'scale(1)',
15+
overflow: 'visible !important',
16+
},
17+
}));
18+
19+
export const HeartIcon = () => {
20+
const classes = useStyles();
21+
22+
return (
23+
<svg
24+
xmlns='http://www.w3.org/2000/svg'
25+
viewBox='0 0 16 16'
26+
width='16'
27+
height='16'
28+
className={classes.svgHover}
29+
>
30+
<path
31+
fill-rule='evenodd'
32+
d='M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z'
33+
></path>
34+
</svg>
35+
);
36+
};
37+
38+
export const HeartIconFilled = () => {
39+
const classes = useStyles();
40+
41+
return (
42+
<svg
43+
xmlns='http://www.w3.org/2000/svg'
44+
viewBox='0 0 16 16'
45+
width='16'
46+
height='16'
47+
className={classes.svgHover}
48+
>
49+
<path
50+
fill-rule='evenodd'
51+
d='M7.655 14.916L8 14.25l.345.666a.752.752 0 01-.69 0zm0 0L8 14.25l.345.666.002-.001.006-.003.018-.01a7.643 7.643 0 00.31-.17 22.08 22.08 0 003.433-2.414C13.956 10.731 16 8.35 16 5.5 16 2.836 13.914 1 11.75 1 10.203 1 8.847 1.802 8 3.02 7.153 1.802 5.797 1 4.25 1 2.086 1 0 2.836 0 5.5c0 2.85 2.045 5.231 3.885 6.818a22.075 22.075 0 003.744 2.584l.018.01.006.003h.002z'
52+
></path>
53+
</svg>
54+
);
55+
};

‎src/components/footer/FooterIcons.js

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎src/components/footer/FooterText.js

Lines changed: 37 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,45 @@
1-
import React from "react";
2-
import { makeStyles } from "@material-ui/core/styles";
3-
import { Typography, Link, Tooltip, Zoom } from "@material-ui/core";
4-
import Resume from "../../settings/resume.json";
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import { Typography, Link } from '@material-ui/core';
4+
import { TextDecrypt } from '../content/TextDecrypt';
5+
import Resume from '../../settings/resume.json';
6+
import {
7+
HeartIcon,
8+
HeartIconFilled,
9+
SponsorButton,
10+
} from '../content/SponsorButton';
511

612
const useStyles = makeStyles((theme) => ({
7-
footerText: {
8-
position: "absolute",
9-
bottom: theme.spacing(6),
10-
left: theme.spacing(6),
11-
"&:hover": {
12-
color: theme.palette.primary.main,
13-
},
14-
transition: "all 0.5s ease",
13+
footerText: {
14+
position: 'absolute',
15+
bottom: theme.spacing(6),
16+
left: theme.spacing(6),
17+
'&:hover': {
18+
color: theme.palette.primary.main,
1519
},
20+
transition: 'all 0.5s ease',
21+
display: 'flex',
22+
alignItems: 'center',
23+
flexWrap: 'wrap',
24+
},
1625
}));
1726

1827
export const FooterText = () => {
19-
const classes = useStyles();
28+
const classes = useStyles();
2029

21-
return (
22-
<Tooltip
23-
title={"GitHub repo"}
24-
placement="top"
25-
TransitionComponent={Zoom}
26-
>
27-
<Link
28-
color="inherit"
29-
underline="none"
30-
href="https://github.com/JoHoop/personal-website-react"
31-
target="_blank"
32-
rel="noopener noreferrer"
33-
className={classes.footerText}
34-
>
35-
<Typography variant="body1">
36-
<i className="fas fa-code fa-sm" /> at{" "}
37-
<i className="fas fa-moon fa-sm" /> by {Resume.basics.name}
38-
</Typography>
39-
</Link>
40-
</Tooltip>
41-
);
30+
return (
31+
<Link
32+
color='inherit'
33+
underline='none'
34+
href='https://github.com/sponsors/JoHoop'
35+
target='_blank'
36+
rel='noopener noreferrer'
37+
className={classes.footerText}
38+
>
39+
<HeartIcon />
40+
<Typography variant='body1'>
41+
<TextDecrypt text={' Sponsor'} />
42+
</Typography>
43+
</Link>
44+
);
4245
};

0 commit comments

Comments
 (0)