Skip to content

Commit 8770395

Browse files
druvkotwanidruvkotwani
committed
added framer motion to every div
1 parent 548ec06 commit 8770395

File tree

4 files changed

+116
-68
lines changed

4 files changed

+116
-68
lines changed

‎client/src/App.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ export default function App() {
7676
viewport={{ once: true }}
7777
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.3 }}
7878
>
79-
<Stat key={data.username} data={data} />
79+
<Stat key={data.username} data={data} index={index} />
8080
</motion.div>
8181

8282
</>

‎client/src/components/About.jsx‎

Lines changed: 57 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
2-
const About = ({ result }) => {
1+
import { motion } from 'framer-motion'
2+
const About = ({ result, index }) => {
3+
const random = Math.floor(Math.random() * 1)
34
return (
45
<div className="mt-4 mb-2 justify-self-start">
56

@@ -8,37 +9,66 @@ const About = ({ result }) => {
89
<span className='text-sm text-[#BDBEC3] '>India</span>
910
</p> */}
1011
{
11-
result?.website?.link && (<a target="_blank" rel='noreferrer' href={result?.website?.link} className="flex">
12-
<iconify-icon icon="streamline-emojis:globe-showing-americas" style={{ color: 'white', marginRight: '1px' }} width="19" height="19"></iconify-icon>
13-
<span className='text-sm text-[#BDBEC3] '>
14-
<p className="">{result?.website?.text}</p>
15-
</span>
16-
</a>)
12+
result?.website?.link && (<motion.div
13+
initial={{ opacity: 0, x: -50 }}
14+
whileInView={{ opacity: 1, x: 0 }}
15+
viewport={{ once: true }}
16+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.1 + 0.3 }}
17+
>
18+
<a target="_blank" rel='noreferrer' href={result?.website?.link} className="flex">
19+
<iconify-icon icon="streamline-emojis:globe-showing-americas" style={{ color: 'white', marginRight: '1px' }} width="19" height="19"></iconify-icon>
20+
<span className='text-sm text-[#BDBEC3] '>
21+
<p className="">{result?.website?.text}</p>
22+
</span>
23+
</a>
24+
</motion.div>)
1725
}
1826
{
19-
result?.github?.link && (<a target="_blank" rel='noreferrer' href={result?.github?.link} className="flex">
20-
<iconify-icon icon="mdi:github" style={{ color: 'white', marginRight: '5px' }} width="17" height="19"></iconify-icon>
21-
<span className='text-sm text-[#BDBEC3] '>
22-
<p className="">{result?.github?.text}</p>
23-
</span>
24-
</a>)
27+
result?.github?.link && (
28+
<motion.div
29+
initial={{ opacity: 0, x: -50 }}
30+
whileInView={{ opacity: 1, x: 0 }}
31+
viewport={{ once: true }}
32+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.2 + 0.2 }}
33+
><a target="_blank" rel='noreferrer' href={result?.github?.link} className="flex">
34+
<iconify-icon icon="mdi:github" style={{ color: 'white', marginRight: '5px' }} width="17" height="19"></iconify-icon>
35+
<span className='text-sm text-[#BDBEC3] '>
36+
<p className="">{result?.github?.text}</p>
37+
</span>
38+
</a>
39+
</motion.div>)
2540
}
2641
{
27-
result?.twitter?.link && (<a target="_blank" rel='noreferrer' href={result?.twitter?.link} className="flex">
28-
<iconify-icon icon="fa6-brands:square-x-twitter" style={{ color: 'white', marginRight: '5px' }} width="17" height="19"></iconify-icon>
29-
<span className='text-sm text-[#BDBEC3] '>
30-
<p className="">{result?.twitter?.text}</p>
31-
</span>
32-
</a>)
42+
result?.twitter?.link && (
43+
<motion.div
44+
initial={{ opacity: 0, x: -50 }}
45+
whileInView={{ opacity: 1, x: 0 }}
46+
viewport={{ once: true }}
47+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.3 + 0.1 }}
48+
>
49+
<a target="_blank" rel='noreferrer' href={result?.twitter?.link} className="flex">
50+
<iconify-icon icon="fa6-brands:square-x-twitter" style={{ color: 'white', marginRight: '5px' }} width="17" height="19"></iconify-icon>
51+
<span className='text-sm text-[#BDBEC3] '>
52+
<p className="">{result?.twitter?.text}</p>
53+
</span>
54+
</a>
55+
</motion.div>)
3356
}
3457
{
35-
result?.linkedin?.link && (<a target="_blank" rel='noreferrer' href={result?.linkedin?.link} className="flex">
36-
<iconify-icon icon="devicon:linkedin" style={{ color: 'white', marginRight: '5px' }} width="17" height="19 "></iconify-icon>
37-
<span className='text-sm text-[#BDBEC3] '>
38-
<p className="">{result?.linkedin?.text}</p>
39-
</span>
40-
</a>
41-
)
58+
result?.linkedin?.link && (
59+
<motion.div
60+
initial={{ opacity: 0, x: -50 }}
61+
whileInView={{ opacity: 1, x: 0 }}
62+
viewport={{ once: true }}
63+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.2 + 0.3 }}
64+
>
65+
<a target="_blank" rel='noreferrer' href={result?.linkedin?.link} className="flex">
66+
<iconify-icon icon="devicon:linkedin" style={{ color: 'white', marginRight: '5px' }} width="17" height="19 "></iconify-icon>
67+
<span className='text-sm text-[#BDBEC3] '>
68+
<p className="">{result?.linkedin?.text}</p>
69+
</span>
70+
</a>
71+
</motion.div>)
4272
}
4373
</div>
4474
)

‎client/src/components/Profile.jsx‎

Lines changed: 51 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,63 @@
1+
import { motion } from 'framer-motion'
12

3+
const Profile = ({ userData, index }) => {
24

3-
const Profile = ({ userData }) => {
45
return (
56
<div className="mt-4 mb-2">
67
<div className="flex justify-center gap-2">
78
{/* Image */}
8-
<div className="relative flex h-20 w-[70px] shrink-0 flex-nowrap">
9-
<img src={userData?.image} alt="Avatar" className="h-[70px] w-[70px] rounded-lg object-cover" />
10-
</div>
9+
<motion.div
10+
initial={{ opacity: 0, x: -50 }}
11+
whileInView={{ opacity: 1, x: 0 }}
12+
viewport={{ once: true }}
13+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.2 + 0.2 }}
14+
>
15+
<div className="relative flex h-20 w-[70px] shrink-0 flex-nowrap">
16+
<img src={userData?.image} alt="Avatar" className="h-[70px] w-[70px] rounded-lg object-cover" />
17+
</div>
18+
</motion.div>
1119

1220
{/* Name/username/rank*/}
1321
<div className="flex flex-col">
14-
<div className="flex items-center" >
15-
<p className=" break-all text-sm font-semibold text-[#FFFEFE]">{userData?.fullName}</p>
16-
</div>
17-
<div className="flex items-center flex-nowrap" >
18-
<p className="text-xs text-[#9FA1A4]">{userData?.username}</p>
19-
{userData?.badgeImg && (<div className="ml-1">
20-
<img src={userData.badgeImg} className="h-[14px] w-[14px]" />
21-
</div>)}
22-
</div>
23-
<p className="flex mt-3 items-end space-x-[5px] text-base">
24-
<span className="text-sm text-[#9FA1A4] ">Rank</span>
25-
<span className=" text-sm font-medium text-[#FFFFF8]">{userData?.rank}</span>
26-
</p>
22+
{/* fullname */}
23+
<motion.div
24+
initial={{ opacity: 0, x: -20 }}
25+
whileInView={{ opacity: 1, x: 0 }}
26+
viewport={{ once: true }}
27+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.3 + 0.2 }}
28+
>
29+
<div className="flex items-center" >
30+
<p className=" break-all text-sm font-semibold text-[#FFFEFE]">{userData?.fullName}</p>
31+
</div>
32+
</motion.div>
33+
34+
{/* username */}
35+
<motion.div
36+
initial={{ opacity: 0, x: -30 }}
37+
whileInView={{ opacity: 1, x: 0 }}
38+
viewport={{ once: true }}
39+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.2 + 0.3 }}
40+
>
41+
<div className="flex items-center flex-nowrap" >
42+
<p className="text-xs text-[#9FA1A4]">{userData?.username}</p>
43+
{userData?.badgeImg && (<div className="ml-1">
44+
<img src={userData.badgeImg} className="h-[14px] w-[14px]" />
45+
</div>)}
46+
</div>
47+
</motion.div>
48+
49+
{/* rank */}
50+
<motion.div
51+
initial={{ opacity: 0, x: -50 }}
52+
whileInView={{ opacity: 1, x: 0 }}
53+
viewport={{ once: true }}
54+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.3 + 0.3 }}
55+
>
56+
<p className="flex mt-3 items-end space-x-[5px] text-base">
57+
<span className="text-sm text-[#9FA1A4] ">Rank</span>
58+
<span className=" text-sm font-medium text-[#FFFFF8]">{userData?.rank}</span>
59+
</p>
60+
</motion.div>
2761
</div>
2862
</div>
2963
</div>

‎client/src/components/Stat.jsx‎

Lines changed: 7 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import About from "./About";
66
import { motion } from "framer-motion";
77

88

9-
export default function Stat({ data }) {
9+
export default function Stat({ data, index }) {
1010
const [userData, setUserData] = useState({});
1111

1212
const setDataManually = () => {
@@ -51,31 +51,15 @@ export default function Stat({ data }) {
5151
}
5252
}, [data]);
5353

54-
const random1 = Math.random() * 1;
55-
const random2 = Math.random() * 2;
5654
return (
5755
<div className="flex justify-center flex-col items-center rounded-lg h-[280px] bg-[#292829]">
5856
<div>
5957
<div className="flex gap-1 xl:gap-4 items-center justify-between ">
6058
{/* Profile */}
61-
<motion.div
62-
initial={{ opacity: 0, x: -50 }}
63-
whileInView={{ opacity: 1, x: 0 }}
64-
viewport={{ once: true }}
65-
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random1 % 4) * 0.2 }}
66-
>
67-
<Profile userData={userData?.profileData} />
68-
</motion.div>
59+
<Profile userData={userData?.profileData} index={index} />
6960

7061
{/* About */}
71-
<motion.div
72-
initial={{ opacity: 0, x: -50 }}
73-
whileInView={{ opacity: 1, x: 0 }}
74-
viewport={{ once: true }}
75-
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random2 % 4) * 0.2 + 0.2 }}
76-
>
77-
<About result={userData?.aboutData} />
78-
</motion.div>
62+
<About result={userData?.aboutData} index={index} />
7963
</div>
8064
<div style={{ height: '0.5px', backgroundColor: '#E0E0E0' }} className="h-[0.5px] bg-white" />
8165

@@ -85,7 +69,7 @@ export default function Stat({ data }) {
8569
initial={{ opacity: 0, x: -40 }}
8670
whileInView={{ opacity: 1, x: 0 }}
8771
viewport={{ once: true }}
88-
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random1 % 4) * 0.3 }}
72+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.3 }}
8973
>
9074
<Circle total={data?.totalSolved} />
9175
</motion.div>
@@ -96,7 +80,7 @@ export default function Stat({ data }) {
9680
initial={{ opacity: 0, x: -20 }}
9781
whileInView={{ opacity: 1, x: 0 }}
9882
viewport={{ once: true }}
99-
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random2 % 4) * 0.4 }}
83+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.4 }}
10084
>
10185
<Questions
10286
type={'Easy'}
@@ -112,7 +96,7 @@ export default function Stat({ data }) {
11296
initial={{ opacity: 0, x: -30 }}
11397
whileInView={{ opacity: 1, x: 0 }}
11498
viewport={{ once: true }}
115-
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random2 % 4) * 0.3 }}
99+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.3 }}
116100
>
117101
<Questions
118102
type={'Medium'}
@@ -128,7 +112,7 @@ export default function Stat({ data }) {
128112
initial={{ opacity: 0, x: -50 }}
129113
whileInView={{ opacity: 1, x: 0 }}
130114
viewport={{ once: true }}
131-
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (random2 % 4) * 0.5 }}
115+
transition={{ duration: 0.3, type: "spring", stiffness: 110, delay: (index % 4) * 0.5 }}
132116
>
133117
<Questions
134118
type={'Hard'}

0 commit comments

Comments
 (0)