Skip to content

Commit 688edfe

Browse files
kevish-is-learningkevish-is-learning
committed
extra animation fixes
1 parent 18e3bff commit 688edfe

5 files changed

Lines changed: 97 additions & 230 deletions

File tree

‎src/components/Profile/ProfileCard.jsx‎

Lines changed: 18 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -126,13 +126,11 @@ const ProfileCard = ({
126126
].filter(({ link }) => link);
127127

128128
return (
129-
<>
129+
<div className="flex flex-col gap-5">
130130
<motion.div
131131
className="bg-[#FFFFFF05] rounded-md px-2 flex flex-col items-center shadow border border-[#23252B] w-full backdrop-blur-sm"
132-
variants={scaleVariants}
133132
initial="hidden"
134133
animate="visible"
135-
whileHover={{ y: -4, transition: { duration: 0.3 } }}
136134
>
137135
<motion.div
138136
className="py-10 px-14 flex flex-col items-center w-full"
@@ -176,7 +174,7 @@ const ProfileCard = ({
176174
a 15.9155 15.9155 0 0 1 0 -31.831"
177175
initial={{ strokeDasharray: "0, 100" }}
178176
animate={{ strokeDasharray: `${animatedPercentage}, 100` }}
179-
transition={{ duration: 2, delay: 0.5, ease: "easeOut" }}
177+
transition={{ ease: "easeOut" }}
180178
/>
181179
</svg>
182180
<motion.span
@@ -195,14 +193,13 @@ const ProfileCard = ({
195193
src={user.avatar}
196194
alt={user.name}
197195
className="w-28 h-28 rounded-full object-cover border-2 border-[#C6FF3D]"
198-
initial={{ scale: 0, rotate: -180 }}
199-
animate={{ scale: 1, rotate: 0 }}
196+
initial={{ scale: 0 }}
197+
animate={{ scale: 1 }}
200198
transition={{
201-
delay: 0.2,
199+
delay: 1,
202200
duration: 0.6,
203201
ease: [0.6, -0.05, 0.01, 0.99],
204202
}}
205-
whileHover={{ scale: 1.05 }}
206203
/>
207204
</motion.div>
208205

@@ -242,18 +239,7 @@ const ProfileCard = ({
242239
animate={{ opacity: 1, x: 0 }}
243240
transition={{ delay: 0.6 }}
244241
>
245-
<motion.div
246-
animate={{
247-
y: [0, -2, 0],
248-
}}
249-
transition={{
250-
duration: 2,
251-
repeat: Infinity,
252-
delay: 3,
253-
}}
254-
>
255-
<MapPin color="#A1A1AA" className="w-4 h-4" />
256-
</motion.div>
242+
<MapPin color="#A1A1AA" className="w-4 h-4" />
257243
{user.location}
258244
</motion.div>
259245
)}
@@ -319,26 +305,8 @@ const ProfileCard = ({
319305
initial="hidden"
320306
animate="visible"
321307
>
322-
<motion.div
323-
className="text-center"
324-
variants={fadeLeftVariants}
325-
whileHover={{ scale: 1.05 }}
326-
>
327-
<motion.div
328-
className="text-[#C6FF3D] text-xl font-semibold"
329-
animate={{
330-
textShadow: [
331-
"0 0 0px #C6FF3D",
332-
"0 0 10px #C6FF3D40",
333-
"0 0 0px #C6FF3D",
334-
],
335-
}}
336-
transition={{
337-
duration: 2,
338-
repeat: Infinity,
339-
delay: 4,
340-
}}
341-
>
308+
<motion.div className="text-center" variants={fadeLeftVariants}>
309+
<motion.div className="text-[#C6FF3D] text-xl font-semibold">
342310
{animatedContributions.toLocaleString()}
343311
</motion.div>
344312
<motion.div
@@ -351,26 +319,8 @@ const ProfileCard = ({
351319
</motion.div>
352320
</motion.div>
353321

354-
<motion.div
355-
className="text-center"
356-
variants={fadeRightVariants}
357-
whileHover={{ scale: 1.05 }}
358-
>
359-
<motion.div
360-
className="text-[#FACC15] text-xl font-semibold"
361-
animate={{
362-
textShadow: [
363-
"0 0 0px #FACC15",
364-
"0 0 10px #FACC1540",
365-
"0 0 0px #FACC15",
366-
],
367-
}}
368-
transition={{
369-
duration: 2,
370-
repeat: Infinity,
371-
delay: 5,
372-
}}
373-
>
322+
<motion.div className="text-center" variants={fadeRightVariants}>
323+
<motion.div className="text-[#FACC15] text-xl font-semibold">
374324
{animatedLinesOfCode.toLocaleString()}
375325
</motion.div>
376326
<motion.div
@@ -397,30 +347,15 @@ const ProfileCard = ({
397347
initial={{ opacity: 0, y: 20, scale: 0.95 }}
398348
animate={{ opacity: 1, y: 0, scale: 1 }}
399349
transition={{ delay: 1.2, duration: 0.5 }}
400-
whileHover={{ y: -2, transition: { duration: 0.2 } }}
401350
>
402351
<motion.div
403352
className="flex items-center mb-2 gap-2 justify-between"
404353
initial={{ opacity: 0, x: -20 }}
405354
animate={{ opacity: 1, x: 0 }}
406355
transition={{ delay: 1.4 }}
407356
>
408-
<motion.div
409-
className="flex items-center gap-2"
410-
whileHover={{ scale: 1.02 }}
411-
>
412-
<motion.div
413-
animate={{
414-
rotate: [0, 5, -5, 0],
415-
}}
416-
transition={{
417-
duration: 3,
418-
repeat: Infinity,
419-
delay: 2,
420-
}}
421-
>
422-
<GraduationCap color="#C6FF3D" />
423-
</motion.div>
357+
<motion.div className="flex items-center gap-2">
358+
<GraduationCap color="#C6FF3D" />
424359
<h3 className="text-white font-semibold text-lg">Education</h3>
425360
</motion.div>
426361
{(user.collegeInfo?.currentYear ||
@@ -434,21 +369,8 @@ const ProfileCard = ({
434369
duration: 0.6,
435370
ease: [0.6, -0.05, 0.01, 0.99],
436371
}}
437-
whileHover={{ scale: 1.05 }}
438372
>
439-
<motion.span
440-
className="w-2 h-2 mr-1.5 bg-[#7CFF79] rounded-full"
441-
animate={{
442-
scale: 1.2,
443-
opacity: 0.7,
444-
}}
445-
transition={{
446-
duration: 2,
447-
repeat: Infinity,
448-
repeatType: "reverse",
449-
delay: 3,
450-
}}
451-
/>
373+
<motion.span className="w-2 h-2 mr-1.5 bg-[#7CFF79] rounded-full" />
452374
{(() => {
453375
const year =
454376
user.collegeInfo?.currentYear ||
@@ -503,49 +425,21 @@ const ProfileCard = ({
503425
initial={{ opacity: 0, y: 20, scale: 0.95 }}
504426
animate={{ opacity: 1, y: 0, scale: 1 }}
505427
transition={{ delay: 1.8, duration: 0.5 }}
506-
whileHover={{ y: -2, transition: { duration: 0.2 } }}
507428
>
508429
<motion.div
509-
className="flex items-center mb-2 gap-2"
430+
className="flex items-center gap-2"
510431
initial={{ opacity: 0, x: -20 }}
511432
animate={{ opacity: 1, x: 0 }}
512433
transition={{ delay: 2 }}
513434
>
514-
<motion.div
515-
animate={{
516-
y: [0, -2, 0],
517-
}}
518-
transition={{
519-
duration: 2,
520-
repeat: Infinity,
521-
delay: 4,
522-
}}
523-
>
524-
<Mail color="#C6FF3D" className="w-6 h-6" />
525-
</motion.div>
526-
<h3 className="text-white font-semibold text-lg">Email</h3>
527-
</motion.div>
528-
<motion.div
529-
initial={{ opacity: 0, y: 10 }}
530-
animate={{ opacity: 1, y: 0 }}
531-
transition={{ delay: 2.1 }}
532-
>
533-
<motion.div
534-
className="flex gap-2 items-center mt-[1rem] bg-white/3 rounded-lg border-white/10 border p-4"
535-
whileHover={{
536-
backgroundColor: "rgba(255, 255, 255, 0.08)",
537-
borderColor: "#C6FF3D40",
538-
transition: { duration: 0.2 },
539-
}}
540-
>
541-
<Mail color="#99a1af" className="w-4 h-4" />
542-
<p className="text-gray-400 text-sm">{user.email}</p>
543-
</motion.div>
435+
<Mail color="#C6FF3D" className="w-6 h-6" />
436+
{/* <h3 className="text-white font-semibold text-lg">Email</h3> */}
437+
<p className="text-gray-400 text-sm">{user.email}</p>
544438
</motion.div>
545439
</motion.div>
546440
)}
547441
</AnimatePresence>
548-
</>
442+
</div>
549443
);
550444
};
551445

‎src/components/Profile/SkillSummaryCard.jsx‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -198,7 +198,6 @@ const SkillsSummaryCard = ({ skills }) => {
198198
initial={{ opacity: 0, y: 20 }}
199199
animate={{ opacity: 1, y: 0 }}
200200
transition={{ duration: 0.6 }}
201-
whileHover={{ y: -4, transition: { duration: 0.3 } }}
202201
>
203202
<motion.div
204203
className="flex justify-between items-center mb-4 sm:mb-6"
@@ -213,18 +212,6 @@ const SkillsSummaryCard = ({ skills }) => {
213212
Skills{" "}
214213
<motion.span
215214
className="text-[#BCDD19]"
216-
animate={{
217-
textShadow: [
218-
"0 0 0px #BCDD19",
219-
"0 0 8px #BCDD1940",
220-
"0 0 0px #BCDD19",
221-
],
222-
}}
223-
transition={{
224-
duration: 2,
225-
repeat: Infinity,
226-
delay: 2,
227-
}}
228215
>
229216
Summary
230217
</motion.span>
@@ -245,21 +232,21 @@ const SkillsSummaryCard = ({ skills }) => {
245232

246233
{/* Radar Chart and Skills Grid */}
247234
<motion.div
248-
className="flex justify-between h-full"
235+
className="flex h-full"
249236
variants={containerVariants}
250237
initial="hidden"
251238
animate="visible"
252239
>
253240
<motion.div
254-
className="relative ml-20 flex-shrink-0"
241+
className="relative flex-shrink-0"
255242
variants={fadeLeftVariants}
256243
>
257244
<RadarChart data={skills.slice(0, 5)} />
258245
</motion.div>
259246

260247
{/* Language percentages */}
261248
<motion.div
262-
className="space-y-1 sm:space-y-2 h-fit w-1/2 grid grid-cols-2 gap-3"
249+
className="space-y-1 sm:space-y-2 h-fit w-1/2 grid grid-cols-2 gap-3 w-fit"
263250
variants={fadeRightVariants}
264251
>
265252
<AnimatePresence>
@@ -274,12 +261,6 @@ const SkillsSummaryCard = ({ skills }) => {
274261
duration: 0.6,
275262
ease: [0.6, -0.05, 0.01, 0.99],
276263
}}
277-
whileHover={{
278-
backgroundColor: "rgba(255, 255, 255, 0.05)",
279-
scale: 1.02,
280-
transition: { duration: 0.2 },
281-
}}
282-
whileTap={{ scale: 0.98 }}
283264
>
284265
<motion.div
285266
className="flex items-center gap-2"

‎src/components/dashboard/DashboardHeader.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
const DashboardHeader = ({ stats, user }) => {
4-
console.log("user------", user);
4+
// console.log("user------", user);
55
return (
66
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 sm:gap-0">
77
<div className="text-center sm:text-left">

0 commit comments

Comments
 (0)