Skip to content

Commit 33b4518

Browse files
vigneshshettyinvigneshshettyin
authored
Merge pull request #1 from vigneshshettyin/DataChanges
Data Field
2 parents 1f1927f + c0a1128 commit 33b4518

File tree

7 files changed

+199
-45
lines changed

7 files changed

+199
-45
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"@testing-library/user-event": "^12.1.10",
99
"react": "^17.0.2",
1010
"react-dom": "^17.0.2",
11+
"react-lazy-load-image-component": "^1.5.1",
1112
"react-reveal": "^1.2.2",
1213
"react-scripts": "4.0.3",
1314
"react-social-icons": "^5.6.1",

‎public/index.html‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
5+
<link
6+
rel="icon"
7+
href="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,f_auto,q_auto:eco,dpr_1/h90nveymaytblh5fldz8"
8+
/>
69
<meta name="viewport" content="width=device-width, initial-scale=1" />
710
<meta name="theme-color" content="#000000" />
8-
<meta
9-
name="description"
10-
content="Web site created using create-react-app"
11+
<meta name="description" content="Linktree. Make your link do more." />
12+
<link
13+
rel="apple-touch-icon"
14+
href="https://res.cloudinary.com/crunchbase-production/image/upload/c_lpad,f_auto,q_auto:eco,dpr_1/h90nveymaytblh5fldz8"
1115
/>
12-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
1316
<link rel="preconnect" href="https://fonts.googleapis.com" />
1417
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
1518
<link
@@ -29,8 +32,10 @@
2932
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
3033
<title>Linktree Clone</title>
3134
<style>
35+
@import url("https://fonts.googleapis.com/css2?family=Handlee&display=swap");
36+
3237
body {
33-
font-family: "Nunito", sans-serif;
38+
font-family: "Handlee", cursive;
3439
font-weight: bold;
3540
overflow-x: hidden;
3641
scroll-behavior: smooth;

‎src/components/footer/footer.js‎

Lines changed: 26 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
import styled from "styled-components";
22
import { SocialIcon } from "react-social-icons";
33
import { Flip, Rotate } from "react-reveal";
4-
4+
import { socialLinks } from "../../data/data";
55
const Footer = () => {
66
return (
77
<>
88
<div className="bottom">
9+
<hr />
910
<Rotate bottom>
1011
<FooterContainer>
11-
<FooterContent>
12-
<SocialIcon
13-
style={SocialIconStyle}
14-
url="https://www.linkedin.com"
15-
/>
16-
</FooterContent>
17-
<FooterContent>
18-
<SocialIcon
19-
style={SocialIconStyle}
20-
url="https://www.instagram.com"
21-
/>
22-
</FooterContent>
23-
<FooterContent>
24-
<SocialIcon
25-
style={SocialIconStyle}
26-
url="https://www.github.com"
27-
/>
28-
</FooterContent>
12+
{socialLinks.map((link) => {
13+
return (
14+
<FooterContent>
15+
<SocialIcon
16+
className="shadow"
17+
style={SocialIconStyle}
18+
url={link}
19+
/>
20+
</FooterContent>
21+
);
22+
})}
2923
</FooterContainer>
3024
</Rotate>
3125
<Flip bottom>
32-
<Copyright className="text-center">Inspired From Linktree</Copyright>
26+
<Copyright
27+
onClick={() => {
28+
window.open(
29+
"https://github.com/vigneshshettyin/Linktree",
30+
"_blank"
31+
);
32+
}}
33+
className="text-center"
34+
>
35+
Inspired From Linktree
36+
</Copyright>
3337
</Flip>
3438
</div>
3539
</>
@@ -41,6 +45,8 @@ export default Footer;
4145
const SocialIconStyle = {
4246
width: "30px",
4347
height: "30px",
48+
borderRadius: "50%",
49+
backgroundColor: "white",
4450
};
4551

4652
const FooterContainer = styled.div`

‎src/components/header/header.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,19 @@
11
import styled from "styled-components";
22
import { Zoom } from "react-reveal";
3+
import { profileData, themeData } from "../../data/data";
4+
import { LazyLoadImage } from "react-lazy-load-image-component";
5+
import "react-lazy-load-image-component/src/effects/blur.css";
36

47
const Header = () => {
8+
const { userName, photoLink } = profileData;
9+
document.body.style.backgroundColor = themeData.backgroundColor;
10+
document.body.style.color = themeData.textColor;
511
return (
612
<>
713
<Zoom>
814
<HeaderWrapper>
9-
<CustomImage src="https://github.com/vigneshshettyin.png" />
10-
<UserNameText>@vigneshshettyin</UserNameText>
15+
<CustomImage effect="blur" src={photoLink} />
16+
<UserNameText>@{userName}</UserNameText>
1117
</HeaderWrapper>
1218
</Zoom>
1319
</>
@@ -22,7 +28,7 @@ const HeaderWrapper = styled.div`
2228
justify-content: center;
2329
`;
2430

25-
const CustomImage = styled.img`
31+
const CustomImage = styled(LazyLoadImage)`
2632
border-radius: 50%;
2733
width: 100px;
2834
height: 100px;

‎src/components/link/link.js‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,29 @@
11
import { Bounce } from "react-reveal";
22
import styled from "styled-components";
3-
const myDemoList = [1, 2, 3, 4];
3+
import { linkData, themeData } from "../../data/data";
4+
import { LazyLoadImage } from "react-lazy-load-image-component";
5+
import "react-lazy-load-image-component/src/effects/blur.css";
46
const Link = () => {
57
return (
68
<>
79
<Bounce>
810
<ParentWrapper>
9-
{myDemoList.map((item, index) => (
10-
<CustomDiv>
11-
<img
12-
src="https://github.com/vigneshshettyin.png"
11+
{linkData.map((item, index) => (
12+
<CustomDiv
13+
className="shadow"
14+
props={themeData}
15+
onClick={() => {
16+
window.open(item.link, "_blank");
17+
}}
18+
key={index}
19+
>
20+
<LazyLoadImage
21+
id="image"
22+
effect="blur"
23+
src={item.image}
1324
alt="my_profile_image"
1425
/>
15-
<p className="text-center">This is a sample link text.</p>
26+
<p className="text-center">{item.name}</p>
1627
</CustomDiv>
1728
))}
1829
</ParentWrapper>
@@ -28,25 +39,35 @@ const CustomDiv = styled.div`
2839
border-radius: 5px;
2940
cursor: pointer;
3041
align-items: center;
31-
width: 70vw;
42+
width: 50vw;
43+
padding: 5px;
44+
background-color: white;
3245
display: flex;
33-
border: 1px solid black;
34-
height: 50px;
46+
border: 2px solid white;
47+
height: max-content;
48+
p {
49+
font-size: 1.3rem;
50+
}
51+
@media (max-width: 768px) {
52+
width: 90vw;
53+
text-align: center;
54+
}
3555
:hover {
36-
background-color: aqua;
37-
color: white;
56+
background-color: ${(props) => props.props.backgroundColor};
57+
color: ${(props) => props.props.linkHoverTextColor};
3858
}
3959
p {
4060
flex: 1;
4161
}
42-
img {
62+
#image {
63+
background-color: white;
4364
:hover {
44-
transform: scale(4);
65+
transform: scale(2);
4566
}
4667
margin-left: 10px;
47-
max-width: 40px;
48-
max-height: 40px;
49-
border-radius: 8px;
68+
max-width: 60px;
69+
max-height: 60px;
70+
border-radius: 2px;
5071
}
5172
`;
5273

‎src/data/data.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
const socialLinks = [
2+
"https://github.com/vigneshshettyin",
3+
"https://linkedin.com/vigneshshettyin",
4+
"https://twitter.com/vigneshshettyin",
5+
"https://instagram.com/vigneshshettyin",
6+
"https://facebook.com/vigneshshettyin",
7+
];
8+
9+
const profileData = {
10+
userName: "vigneshshettyin",
11+
photoLink: "https://github.com/vigneshshettyin.png",
12+
};
13+
14+
const themeData = {
15+
backgroundColor: "#9cdbfb",
16+
textColor: "#212121",
17+
linkColor: "#212121",
18+
linkHoverColor: "yellow",
19+
linkHoverTextColor: "white",
20+
};
21+
const linkData = [
22+
{
23+
id: 1,
24+
link: "https://go.vigneshcodes.in/meetly",
25+
name: "Meetly - Free Video Conferencing App",
26+
image:
27+
"https://play-lh.googleusercontent.com/QYc9QNf0_c-M7rhF4eo8daWbIRg_ukwzabR3Xj9TX_6zxG-AbzhKF5NS3CAd2X79fm0=s360-rw",
28+
},
29+
{
30+
id: 2,
31+
link: "https://go.vigneshcodes.in/certify",
32+
name: "Certify - Free Online Certification App",
33+
image:
34+
"https://camo.githubusercontent.com/ba0a1b28b9fb8e428a69d5ddcfc56b4b0425fb96202b40ab3b802489f424b286/68747470733a2f2f736f6369616c6966792e6769742e63692f7669676e657368736865747479696e2f466c61736b2d47656e65726174652d43657274696669636174652f696d6167653f6465736372697074696f6e3d3126666f6e743d4b6f486f26666f726b733d31266973737565733d31266c616e67756167653d31266c6f676f3d68747470732533412532462532467265732e636c6f7564696e6172792e636f6d2532467669676e657368736865747479696e253246696d61676525324675706c6f616425324676313632323830313230352532466c793370736e643139357a7570776b65377064342e706e67266f776e65723d31267061747465726e3d427269636b25323057616c6c2670756c6c733d31267374617267617a6572733d31267468656d653d4c69676874",
35+
},
36+
{
37+
id: 3,
38+
link: "https://react.eatmyurl.ml",
39+
name: "EatMyUrl - Free URL Shortener",
40+
image:
41+
"https://res.cloudinary.com/vigneshshettyin/image/upload/v1631588908/oia0inntihtas3ymsvgi.png",
42+
},
43+
{
44+
id: 4,
45+
link: "https://go.vigneshcodes.in/bulkmailer",
46+
name: "BulkMailer - Free Bulk Mailer App",
47+
image:
48+
"https://camo.githubusercontent.com/a7556597ba335122c647a45408d13680680225ce1500c33f6dda02c9e8564a04/68747470733a2f2f7265732e636c6f7564696e6172792e636f6d2f7669676e657368736865747479696e2f696d6167652f75706c6f61642f76313632323231303237342f776c63657864676862683976693177647a7a716e2e706e67",
49+
},
50+
{
51+
id: 5,
52+
link: "https://testla.vigneshcodes.in",
53+
name: "Testla UI Clone Using ReactJS",
54+
image: "https://tesla.vigneshcodes.in/images/logo.svg",
55+
},
56+
{
57+
id: 6,
58+
link: "https://webscraper.vigneshin.ml/",
59+
name: "WebScraper - Free S.E.O Scrapper / API",
60+
image: "https://www.webharvy.com/images/web%20scraping.png",
61+
},
62+
{
63+
id: 7,
64+
link: "https://react-blog.vigneshcodes.in",
65+
name: "Free Blogging Application (MERN STACK)",
66+
image:
67+
"https://www.thebalancesmb.com/thmb/ro9ebSW5IBz4iLytEqsZAcDyI9U=/3000x2000/filters:no_upscale():max_bytes(150000):strip_icc()/blogging-what-is-it-1794405-v2-5b60d316c9e77c0050f7eb9e.png",
68+
},
69+
{
70+
id: 8,
71+
link: "https://blog.vigneshin.ml",
72+
name: "Free Blogging Application (Flask)",
73+
image: "https://www.whizsky.com/wp-content/uploads/2020/06/blog2.png",
74+
},
75+
{
76+
id: 9,
77+
link: "https://react-opensource.vigneshcodes.in/",
78+
name: "Open Source React (Promote Open Source Contributions)",
79+
image:
80+
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1200px-React-icon.svg.png",
81+
},
82+
{
83+
id: 10,
84+
link: "https://linktree.vigneshcodes.in",
85+
name: "LinkTree (Clone) - Display Links Uniquely ",
86+
image: "https://cdn.worldvectorlogo.com/logos/linktree-1.svg",
87+
},
88+
{
89+
id: 11,
90+
link: "https://blog.vigneshcodes.in/quick-guide-to-deploy-using-docker",
91+
name: "Quick Guide To Deploy Using Docker (Blog)",
92+
image:
93+
"https://blog.vigneshcodes.in/_next/image?url=https%3A%2F%2Fcdn.hashnode.com%2Fres%2Fhashnode%2Fimage%2Fupload%2Fv1630990172036%2Fv9olxXXUI.png%3Fw%3D1600%26h%3D840%26fit%3Dcrop%26crop%3Dentropy%26auto%3Dcompress%2Cformat%26format%3Dwebp&w=3840&q=75",
94+
},
95+
];
96+
97+
export { socialLinks, profileData, linkData, themeData };

‎yarn.lock‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7095,6 +7095,11 @@ lodash._reinterpolate@^3.0.0:
70957095
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
70967096
integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
70977097

7098+
lodash.debounce@^4.0.8:
7099+
version "4.0.8"
7100+
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
7101+
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
7102+
70987103
lodash.memoize@^4.1.2:
70997104
version "4.1.2"
71007105
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -7120,6 +7125,11 @@ lodash.templatesettings@^4.0.0:
71207125
dependencies:
71217126
lodash._reinterpolate "^3.0.0"
71227127

7128+
lodash.throttle@^4.1.1:
7129+
version "4.1.1"
7130+
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
7131+
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
7132+
71237133
lodash.uniq@^4.5.0:
71247134
version "4.5.0"
71257135
resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
@@ -9195,6 +9205,14 @@ react-is@^17.0.1:
91959205
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339"
91969206
integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
91979207

9208+
react-lazy-load-image-component@^1.5.1:
9209+
version "1.5.1"
9210+
resolved "https://registry.yarnpkg.com/react-lazy-load-image-component/-/react-lazy-load-image-component-1.5.1.tgz#59cc92326ba5604e9c4a86805a2cf1667fafbc71"
9211+
integrity sha512-grTEZzURLHPkq7JoipcBBQU44ijdF4fH3Cb+eSD5eSAaMsjugbXqTaVWm5ruPUNLduoNR9KKQF6bOR9h2WphEg==
9212+
dependencies:
9213+
lodash.debounce "^4.0.8"
9214+
lodash.throttle "^4.1.1"
9215+
91989216
react-refresh@^0.8.3:
91999217
version "0.8.3"
92009218
resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"

0 commit comments

Comments
 (0)