Skip to content

Commit db1dfc7

Browse files
codeaashucodeaashu
committed
Update Anjali profile and enhance social media links in Profile component
1 parent 1ffea90 commit db1dfc7

File tree

3 files changed

+279
-43
lines changed

3 files changed

+279
-43
lines changed

‎public/data/Anjali-ops156.json‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
11
{
22
"name": "Anjali Kumari",
3-
"location": "Vill Hussainpura,Near Green City,Ludhiana,Punjab",
3+
"location": "Vill Hussainpura, Near Green City, Ludhiana, Punjab",
44
"bio": "Engineering Student | Full Stack Web Development Enthusiast | Tech Explorer I began my journey in full-stack web development during my first year of studies and will continue my journey with software development in the future, focusing on creating robust applications. ",
55
"avatar": "https://github.com/Anjali-ops156.png",
66
"portfolio": "https://github.com/Anjali-ops156.png",
7-
"skills": ["GITHHUB", "C", "C++","Python","HTML","CSS","Corel Draw","Javascript","Node.js","React.js","MongoDB"],
7+
"skills": [
8+
"GITHHUB",
9+
"C",
10+
"C++",
11+
"Python",
12+
"HTML",
13+
"CSS",
14+
"Corel Draw",
15+
"Javascript",
16+
"Node.js",
17+
"React.js",
18+
"MongoDB"
19+
],
820
"social": {
921
"GitHub": "https://github.com/Anjali-ops156",
1022
"Discord": "https://discordapp.com/users/anjalikumari_",

‎src/components/Profile/Profile.jsx‎

Lines changed: 134 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,43 @@
11
import React from 'react';
2-
import { FaEnvelope, FaGithub, FaInstagram, FaLinkedin, FaUserCircle, FaCheckCircle } from 'react-icons/fa';
2+
import {
3+
FaEnvelope,
4+
FaGithub,
5+
FaInstagram,
6+
FaLinkedin,
7+
FaUserCircle,
8+
FaCheckCircle,
9+
FaStackOverflow,
10+
FaYoutube,
11+
FaDev,
12+
FaBehance,
13+
FaDribbble,
14+
FaFigma,
15+
FaCoffee,
16+
FaProductHunt,
17+
FaMedium,
18+
FaDiscord,
19+
FaReddit,
20+
} from 'react-icons/fa';
321
import { FaXTwitter, FaLocationDot } from 'react-icons/fa6';
22+
import { SiLeetcode, SiCodeforces, SiHashnode, SiReplit } from 'react-icons/si';
23+
24+
const UnstopIcon = () => (
25+
<svg width="24" height="24" viewBox="0 0 225 225" xmlns="http://www.w3.org/2000/svg">
26+
<circle cx="112.5" cy="112.5" r="112.5" fill="#15457B" />
27+
<text
28+
x="50%"
29+
y="50%"
30+
textAnchor="middle"
31+
fill="#FFFFFF"
32+
fontSize="140"
33+
fontFamily="Arial, sans-serif"
34+
fontWeight="bold"
35+
dy=".35em"
36+
>
37+
un
38+
</text>
39+
</svg>
40+
);
441

542
function isValidEmail(email) {
643
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -157,6 +194,102 @@ function Card({ data }) {
157194
</a>
158195
)}
159196

197+
{data.social?.Discord && (
198+
<a href={data.social.Discord} target="_blank" rel="noreferrer">
199+
<FaDiscord className="text-2xl text-blue-600 duration-300 hover:scale-125" />
200+
</a>
201+
)}
202+
203+
{data.social?.LeetCode && (
204+
<a href={data.social.LeetCode} target="_blank" rel="noreferrer">
205+
<SiLeetcode className="text-2xl text-blue-600 duration-300 hover:scale-125" />
206+
</a>
207+
)}
208+
209+
{data.social?.Codeforces && (
210+
<a href={data.social.Codeforces} target="_blank" rel="noreferrer">
211+
<SiCodeforces className="text-2xl text-blue-600 duration-300 hover:scale-125" />
212+
</a>
213+
)}
214+
215+
{data.social?.StackOverflow && (
216+
<a href={data.social.StackOverflow} target="_blank" rel="noreferrer">
217+
<FaStackOverflow className="text-2xl text-blue-600 duration-300 hover:scale-125" />
218+
</a>
219+
)}
220+
221+
{data.social?.YouTube && (
222+
<a href={data.social.YouTube} target="_blank" rel="noreferrer">
223+
<FaYoutube className="text-2xl text-blue-600 duration-300 hover:scale-125" />
224+
</a>
225+
)}
226+
227+
{data.social?.DevTo && (
228+
<a href={data.social.DevTo} target="_blank" rel="noreferrer">
229+
<FaDev className="text-2xl text-blue-600 duration-300 hover:scale-125" />
230+
</a>
231+
)}
232+
233+
{data.social?.Hashnode && (
234+
<a href={data.social.Hashnode} target="_blank" rel="noreferrer">
235+
<SiHashnode className="text-2xl text-blue-600 duration-300 hover:scale-125" />
236+
</a>
237+
)}
238+
239+
{data.social?.Behance && (
240+
<a href={data.social.Behance} target="_blank" rel="noreferrer">
241+
<FaBehance className="text-2xl text-blue-600 duration-300 hover:scale-125" />
242+
</a>
243+
)}
244+
245+
{data.social?.Dribbble && (
246+
<a href={data.social.Dribbble} target="_blank" rel="noreferrer">
247+
<FaDribbble className="text-2xl text-blue-600 duration-300 hover:scale-125" />
248+
</a>
249+
)}
250+
251+
{data.social?.Figma && (
252+
<a href={data.social.Figma} target="_blank" rel="noreferrer">
253+
<FaFigma className="text-2xl text-blue-600 duration-300 hover:scale-125" />
254+
</a>
255+
)}
256+
257+
{data.social?.Replit && (
258+
<a href={data.social.Replit} target="_blank" rel="noreferrer">
259+
<SiReplit className="text-2xl text-blue-600 duration-300 hover:scale-125" />
260+
</a>
261+
)}
262+
263+
{data.social?.BuyMeACoffee && (
264+
<a href={data.social.BuyMeACoffee} target="_blank" rel="noreferrer">
265+
<FaCoffee className="text-2xl text-blue-600 duration-300 hover:scale-125" />
266+
</a>
267+
)}
268+
269+
{data.social?.ProductHunt && (
270+
<a href={data.social.ProductHunt} target="_blank" rel="noreferrer">
271+
<FaProductHunt className="text-2xl text-blue-600 duration-300 hover:scale-125" />
272+
</a>
273+
)}
274+
275+
{data.social?.Medium && (
276+
<a href={data.social.Medium} target="_blank" rel="noreferrer">
277+
<FaMedium className="text-2xl text-blue-600 duration-300 hover:scale-125" />
278+
</a>
279+
)}
280+
281+
{data.social?.Reddit && (
282+
<a href={data.social.Reddit} target="_blank" rel="noreferrer">
283+
<FaReddit className="text-2xl text-blue-600 duration-300 hover:scale-125" />
284+
</a>
285+
)}
286+
287+
{data.social?.Unstop && (
288+
<a href={data.social.Unstop} target="_blank" rel="noreferrer">
289+
<UnstopIcon className="text-2xl text-blue-600 duration-300 hover:scale-125" />
290+
</a>
291+
)}
292+
160293
{data.social?.Email && isValidEmail(data.social.Email) && (
161294
<a href={`mailto:${data.social.Email}`} target="_blank" rel="noreferrer">
162295
<FaEnvelope className="text-2xl text-blue-600 duration-300 hover:scale-125" />

‎src/components/ProfileSkeleton/ProfileSkeleton.jsx‎

Lines changed: 131 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,57 @@
11
import React from 'react';
2-
import styled from 'styled-components';
2+
import styled, { keyframes } from 'styled-components';
3+
import {
4+
FaGithub,
5+
FaTwitter,
6+
FaLinkedin,
7+
FaInstagram,
8+
FaEnvelope,
9+
FaDiscord,
10+
FaStackOverflow,
11+
FaYoutube,
12+
FaDev,
13+
FaBehance,
14+
FaDribbble,
15+
FaFigma,
16+
FaCoffee,
17+
FaProductHunt,
18+
FaMedium,
19+
FaReddit,
20+
} from 'react-icons/fa';
21+
import { SiLeetcode, SiCodeforces, SiHashnode, SiReplit } from 'react-icons/si';
22+
23+
const UnstopIcon = () => (
24+
<svg width="24" height="24" viewBox="0 0 225 225" xmlns="http://www.w3.org/2000/svg">
25+
<circle cx="112.5" cy="112.5" r="112.5" fill="transparent" />
26+
<text
27+
x="50%"
28+
y="50%"
29+
textAnchor="middle"
30+
fill="transparent"
31+
fontSize="140"
32+
fontFamily="Arial, sans-serif"
33+
fontWeight="bold"
34+
dy=".35em"
35+
>
36+
un
37+
</text>
38+
</svg>
39+
);
40+
41+
const pulse = keyframes`
42+
0% {
43+
opacity: 1;
44+
transform: scale(1);
45+
}
46+
50% {
47+
opacity: 0.7;
48+
transform: scale(1.05);
49+
}
50+
100% {
51+
opacity: 1;
52+
transform: scale(1);
53+
}
54+
`;
355

456
const ProfileSkeletonWrapper = styled.div`
557
@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300&display=swap');
@@ -8,22 +60,61 @@ const ProfileSkeletonWrapper = styled.div`
860
961
.skeleton {
1062
background-color: rgb(13, 25, 53);
11-
animation: pulse 1.5s infinite ease-in-out;
63+
animation: ${pulse} 1.5s infinite ease-in-out;
64+
border-radius: 8px;
65+
}
66+
67+
.skeleton-circle {
68+
border-radius: 50%;
69+
}
70+
71+
.skeleton-line {
72+
height: 1rem;
73+
margin-bottom: 0.5rem;
1274
}
1375
14-
@keyframes pulse {
15-
0% {
16-
opacity: 1;
17-
}
18-
50% {
19-
opacity: 0.5;
20-
}
21-
100% {
22-
opacity: 1;
23-
}
76+
.skeleton-skill {
77+
height: 2rem;
78+
width: 4rem;
79+
margin-right: 0.5rem;
80+
}
81+
82+
.skeleton-icon {
83+
width: 2rem;
84+
height: 2rem;
85+
display: flex;
86+
align-items: center;
87+
justify-content: center;
88+
background-color: rgb(13, 25, 53);
89+
border-radius: 0.25rem;
90+
animation: ${pulse} 1.5s infinite ease-in-out;
2491
}
2592
`;
2693

94+
const socialIcons = {
95+
GitHub: <div className="skeleton-icon" />,
96+
Twitter: <div className="skeleton-icon" />,
97+
LinkedIn: <div className="skeleton-icon" />,
98+
Instagram: <div className="skeleton-icon" />,
99+
Email: <div className="skeleton-icon" />,
100+
Discord: <div className="skeleton-icon" />,
101+
LeetCode: <div className="skeleton-icon" />,
102+
Codeforces: <div className="skeleton-icon" />,
103+
StackOverflow: <div className="skeleton-icon" />,
104+
YouTube: <div className="skeleton-icon" />,
105+
DevTo: <div className="skeleton-icon" />,
106+
Hashnode: <div className="skeleton-icon" />,
107+
Behance: <div className="skeleton-icon" />,
108+
Dribbble: <div className="skeleton-icon" />,
109+
Figma: <div className="skeleton-icon" />,
110+
Replit: <div className="skeleton-icon" />,
111+
BuyMeACoffee: <div className="skeleton-icon" />,
112+
ProductHunt: <div className="skeleton-icon" />,
113+
Medium: <div className="skeleton-icon" />,
114+
Reddit: <div className="skeleton-icon" />,
115+
Unstop: <div className="skeleton-icon" />,
116+
};
117+
27118
function ProfileSkeleton() {
28119
const skeletonData = {
29120
name: '',
@@ -38,6 +129,22 @@ function ProfileSkeleton() {
38129
LinkedIn: '',
39130
Instagram: '',
40131
Email: '',
132+
Discord: '',
133+
LeetCode: '',
134+
Codeforces: '',
135+
StackOverflow: '',
136+
YouTube: '',
137+
DevTo: '',
138+
Hashnode: '',
139+
Behance: '',
140+
Dribbble: '',
141+
Figma: '',
142+
Replit: '',
143+
BuyMeACoffee: '',
144+
ProductHunt: '',
145+
Medium: '',
146+
Reddit: '',
147+
Unstop: '',
41148
},
42149
verified: false,
43150
};
@@ -46,9 +153,9 @@ function ProfileSkeleton() {
46153
<ProfileSkeletonWrapper>
47154
<div className="font-MerriweatherSans-Light mb-[1.5rem] h-auto rounded-[10px] pb-[0rem] pl-[1rem] pr-[1rem] pt-[1rem] shadow-lg">
48155
<div className="flex gap-[1rem]">
49-
<div className="skeleton h-[6.1rem] w-[6.1rem] flex-shrink-0 rounded"></div>
156+
<div className="skeleton skeleton-circle h-[6.1rem] w-[6.1rem] flex-shrink-0"></div>
50157
<div className="w-[80%] overflow-hidden">
51-
<h3 className="skeleton mb-[0.5rem] h-[1.6rem] w-full rounded-[0.25rem]">
158+
<h3 className="skeleton skeleton-line w-full">
52159
{skeletonData.name}
53160
{skeletonData.verified && (
54161
<svg
@@ -63,40 +170,24 @@ function ProfileSkeleton() {
63170
</svg>
64171
)}
65172
</h3>
66-
<p className="skeleton mb-[0.4rem] h-[1.2rem] w-full rounded-[0.25rem]">{skeletonData.location}</p>
173+
<p className="skeleton skeleton-line w-full">{skeletonData.location}</p>
67174
<div className="flex gap-[1rem] overflow-hidden">
68175
{skeletonData.skills &&
69-
skeletonData.skills.map((skill, index) => {
70-
return (
71-
<div className="skeleton h-[2rem] w-full rounded-[0.25rem]" key={index}>
72-
{skill}
73-
</div>
74-
);
75-
})}
176+
skeletonData.skills.map((skill, index) => (
177+
<div className="skeleton skeleton-skill" key={index}>
178+
{skill}
179+
</div>
180+
))}
76181
</div>
77182
</div>
78183
<div className="w-[10%] justify-end overflow-hidden">
79-
<div className="skeleton mb-[0.5rem] h-[6rem] w-[4rem] rounded-[0.25rem]"></div>
184+
<div className="skeleton skeleton-line h-[6rem] w-[4rem]"></div>
80185
</div>
81186
</div>
82187
<div className="mt-[1rem]">
83-
<div className="skeleton mb-[0.4rem] h-[1.2rem] w-full rounded-[0.25rem]">{skeletonData.bio}</div>
84-
<div className="mt-[0.5rem] flex h-[3rem] gap-[1rem]">
85-
<div className="skeleton mt-[0.4rem] flex h-[2rem] w-[2rem] rounded-[0.25rem]">
86-
{skeletonData.social.GitHub}
87-
</div>
88-
<div className="skeleton mt-[0.4rem] flex h-[2rem] w-[2rem] rounded-[0.25rem]">
89-
{skeletonData.social.GitHub}
90-
</div>
91-
<div className="skeleton mt-[0.4rem] flex h-[2rem] w-[2rem] rounded-[0.25rem]">
92-
{skeletonData.social.GitHub}
93-
</div>
94-
<div className="skeleton mt-[0.4rem] flex h-[2rem] w-[2rem] rounded-[0.25rem]">
95-
{skeletonData.social.GitHub}
96-
</div>
97-
<div className="skeleton mt-[0.4rem] flex h-[2rem] w-[2rem] rounded-[0.25rem]">
98-
{skeletonData.social.GitHub}
99-
</div>
188+
<div className="skeleton skeleton-line w-full">{skeletonData.bio}</div>
189+
<div className="mt-[0.5rem] flex h-[3rem] flex-wrap gap-[1rem]">
190+
{Object.keys(skeletonData.social).map((platform, index) => socialIcons[platform])}
100191
</div>
101192
</div>
102193
</div>

0 commit comments

Comments
 (0)