Skip to content

Commit fc389c9

Browse files
davinash97davinash97
authored
merge dev branch (#17)
* package update * load the data dynamically * null check for data
1 parent 318b094 commit fc389c9

8 files changed

Lines changed: 246 additions & 251 deletions

File tree

‎package-lock.json‎

Lines changed: 8 additions & 8 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/page/achievements/Achievement.tsx‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -5,48 +5,50 @@ import { SectionTitle, useSectionData } from "@hooks/useSectionData";
55
import { easeInOut, motion, Variants } from "framer-motion";
66

77
const containerVariants: Variants = {
8-
hidden: {},
9-
visible: {
10-
transition: { staggerChildren: 0.4 },
11-
},
8+
hidden: {},
9+
visible: {
10+
transition: { staggerChildren: 0.4 },
11+
},
1212
};
1313

1414
const cardVariants: Variants = {
15-
hidden: { opacity: 0, y: 0, scale: 0.95 },
16-
visible: {
17-
opacity: 1,
18-
y: 0,
19-
scale: 1,
20-
transition: { duration: 0.3, ease: easeInOut },
21-
},
22-
exit: { opacity: 0, y: 30, scale: 0.95 },
15+
hidden: { opacity: 0, y: 0, scale: 0.95 },
16+
visible: {
17+
opacity: 1,
18+
y: 0,
19+
scale: 1,
20+
transition: { duration: 0.3, ease: easeInOut },
21+
},
22+
exit: { opacity: 0, y: 30, scale: 0.95 },
2323
};
2424

2525
export default function Achievement() {
26-
const title = "Achievement";
27-
const data = useSectionData(title);
26+
const title = "Achievement";
27+
const data = useSectionData(title);
28+
if (!data || data.length === 0) return null;
2829

29-
return (
30-
<section className="flex flex-col p-10 gap-10 justify-center items-center">
31-
<SectionTitle title={title} />
30+
return (
31+
<section className="flex flex-col p-10 gap-10 justify-center items-center">
32+
<SectionTitle title={title} />
3233

33-
<AnimatedSection>
34-
<motion.div
35-
className="max-w-screen-xl grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 justify-around gap-6"
36-
variants={containerVariants}
37-
initial="hidden"
38-
whileInView="visible"
39-
exit="exit"
40-
viewport={{ amount: 0.1, once: false }}>
41-
{data.map((item, index) => (
42-
<motion.div variants={cardVariants} key={index}>
43-
<Card {...item} />
44-
</motion.div>
45-
))}
46-
</motion.div>
47-
</AnimatedSection>
48-
</section>
49-
);
34+
<AnimatedSection>
35+
<motion.div
36+
className="max-w-screen-xl grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 justify-around gap-6"
37+
variants={containerVariants}
38+
initial="hidden"
39+
whileInView="visible"
40+
exit="exit"
41+
viewport={{ amount: 0.1, once: false }}
42+
>
43+
{data.map((item, index) => (
44+
<motion.div variants={cardVariants} key={index}>
45+
<Card {...item} />
46+
</motion.div>
47+
))}
48+
</motion.div>
49+
</AnimatedSection>
50+
</section>
51+
);
5052
}
5153

5254
/*hover:shadow-2xl hover:shadow-black/40 */

‎src/app/page/education/Education.tsx‎

Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,45 +7,48 @@ import { SectionTitle, useSectionData } from "@hooks/useSectionData";
77
import { motion, Variants } from "framer-motion";
88

99
const containerVariants: Variants = {
10-
hidden: { opacity: 0 },
11-
visible: {
12-
opacity: 1,
13-
transition: { staggerChildren: 0.2 },
14-
},
10+
hidden: { opacity: 0 },
11+
visible: {
12+
opacity: 1,
13+
transition: { staggerChildren: 0.2 },
14+
},
1515
};
1616

1717
const cardVariants: Variants = {
18-
hidden: { opacity: 0, y: 50 },
19-
visible: {
20-
opacity: 1,
21-
y: 0,
22-
transition: { duration: 0.6, ease: [0.25, 0.1, 0.25, 1.0] },
23-
},
18+
hidden: { opacity: 0, y: 50 },
19+
visible: {
20+
opacity: 1,
21+
y: 0,
22+
transition: { duration: 0.6, ease: [0.25, 0.1, 0.25, 1.0] },
23+
},
2424
};
2525

2626
export default function Education() {
27-
const title = "Education";
28-
const data = useSectionData(title);
29-
30-
return (
31-
<section className="flex flex-col w-screen text-center items-center p-10 gap-10">
32-
<SectionTitle title={title} />
33-
34-
<AnimatedSection>
35-
<motion.div
36-
className="grid grid-cols-1 xl:grid-cols-2 gap-6 w-full max-w-6xl mx-auto justify-items-center"
37-
variants={containerVariants}
38-
initial="hidden"
39-
whileInView="visible"
40-
exit="hidden"
41-
viewport={{ once: false, amount: 0.3 }}>
42-
{data.map((value, index) => (
43-
<motion.div key={index} variants={cardVariants}>
44-
<Card {...value} />
45-
</motion.div>
46-
))}
47-
</motion.div>
48-
</AnimatedSection>
49-
</section>
50-
);
27+
const title = "Education";
28+
const data = useSectionData(title);
29+
30+
if (!data || data.length === 0) return null;
31+
32+
return (
33+
<section className="flex flex-col w-screen text-center items-center p-10 gap-10">
34+
<SectionTitle title={title} />
35+
36+
<AnimatedSection>
37+
<motion.div
38+
className="grid grid-cols-1 xl:grid-cols-2 gap-6 w-full max-w-6xl mx-auto justify-items-center"
39+
variants={containerVariants}
40+
initial="hidden"
41+
whileInView="visible"
42+
exit="hidden"
43+
viewport={{ once: false, amount: 0.3 }}
44+
>
45+
{data.map((value, index) => (
46+
<motion.div key={index} variants={cardVariants}>
47+
<Card {...value} />
48+
</motion.div>
49+
))}
50+
</motion.div>
51+
</AnimatedSection>
52+
</section>
53+
);
5154
}

‎src/app/page/experience/Experience.tsx‎

Lines changed: 43 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,49 +7,53 @@ import { SectionTitle, useSectionData } from "@hooks/useSectionData";
77
import { motion, Variants } from "framer-motion";
88

99
const containerVariants: Variants = {
10-
hidden: {},
11-
visible: {
12-
transition: { staggerChildren: 0.3 },
13-
},
10+
hidden: {},
11+
visible: {
12+
transition: { staggerChildren: 0.3 },
13+
},
1414
};
1515

1616
const cardVariants: Variants = {
17-
hidden: { opacity: 0, y: 40 },
18-
visible: {
19-
opacity: 1,
20-
y: 0,
21-
transition: { duration: 0.6, ease: [0.25, 0.1, 0.25, 1.0] },
22-
},
23-
exit: { opacity: 0, y: 40 },
17+
hidden: { opacity: 0, y: 40 },
18+
visible: {
19+
opacity: 1,
20+
y: 0,
21+
transition: { duration: 0.6, ease: [0.25, 0.1, 0.25, 1.0] },
22+
},
23+
exit: { opacity: 0, y: 40 },
2424
};
2525

2626
export default function Experience() {
27-
const title = "Experience";
28-
const data = useSectionData(title);
29-
30-
return (
31-
<section className="flex flex-col w-screen text-center items-center p-10 gap-10">
32-
<SectionTitle title={title} />
33-
34-
{/* Experience Grid */}
35-
<AnimatedSection>
36-
<motion.div
37-
className="grid grid-cols-1 xl:grid-cols-2 gap-6 w-full max-w-6xl mx-auto justify-items-center"
38-
variants={containerVariants}
39-
initial="hidden"
40-
whileInView="visible"
41-
exit="exit"
42-
viewport={{ once: false, amount: 0.3 }}>
43-
{data.map((value, index) => (
44-
<motion.div
45-
key={index}
46-
variants={cardVariants}
47-
className="w-full flex justify-center">
48-
<Card {...value} />
49-
</motion.div>
50-
))}
51-
</motion.div>
52-
</AnimatedSection>
53-
</section>
54-
);
27+
const title = "Experience";
28+
const data = useSectionData(title);
29+
30+
if (!data || data.length === 0) return null;
31+
32+
return (
33+
<section className="flex flex-col w-screen text-center items-center p-10 gap-10">
34+
<SectionTitle title={title} />
35+
36+
{/* Experience Grid */}
37+
<AnimatedSection>
38+
<motion.div
39+
className="grid grid-cols-1 xl:grid-cols-2 gap-6 w-full max-w-6xl mx-auto justify-items-center"
40+
variants={containerVariants}
41+
initial="hidden"
42+
whileInView="visible"
43+
exit="exit"
44+
viewport={{ once: false, amount: 0.3 }}
45+
>
46+
{data.map((value, index) => (
47+
<motion.div
48+
key={index}
49+
variants={cardVariants}
50+
className="w-full flex justify-center"
51+
>
52+
<Card {...value} />
53+
</motion.div>
54+
))}
55+
</motion.div>
56+
</AnimatedSection>
57+
</section>
58+
);
5559
}

‎src/app/page/other/Other.tsx‎

Lines changed: 35 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,44 +4,47 @@ import Card from "@components/Card";
44
import { easeInOut, motion, Variants } from "framer-motion";
55

66
const containerVariants: Variants = {
7-
hidden: {},
8-
visible: { transition: { staggerChildren: 0.4 } },
7+
hidden: {},
8+
visible: { transition: { staggerChildren: 0.4 } },
99
};
1010

1111
const cardVariants: Variants = {
12-
hidden: { opacity: 0, y: 50, scale: 0.95 },
13-
visible: {
14-
opacity: 1,
15-
y: 0,
16-
scale: 1,
17-
transition: { duration: 0.6, ease: easeInOut },
18-
},
19-
exit: { opacity: 0, y: 40, scale: 0.95 },
12+
hidden: { opacity: 0, y: 50, scale: 0.95 },
13+
visible: {
14+
opacity: 1,
15+
y: 0,
16+
scale: 1,
17+
transition: { duration: 0.6, ease: easeInOut },
18+
},
19+
exit: { opacity: 0, y: 40, scale: 0.95 },
2020
};
2121

2222
export default function Other() {
23-
const title = "Other";
24-
const data = useSectionData(title);
23+
const title = "Other";
24+
const data = useSectionData(title);
2525

26-
return (
27-
<section className="flex flex-col p-10 gap-10 justify-center items-center">
28-
<SectionTitle title={title} />
26+
if (!data || data.length === 0) return null;
2927

30-
<AnimatedSection>
31-
<motion.div
32-
className="max-w-screen-xl grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 justify-around gap-6"
33-
variants={containerVariants}
34-
initial="hidden"
35-
whileInView="visible"
36-
exit="exit"
37-
viewport={{ amount: 0.3, once: false }}>
38-
{data.map((item, index) => (
39-
<motion.div variants={cardVariants} key={index}>
40-
<Card {...item} />
41-
</motion.div>
42-
))}
43-
</motion.div>
44-
</AnimatedSection>
45-
</section>
46-
);
28+
return (
29+
<section className="flex flex-col p-10 gap-10 justify-center items-center">
30+
<SectionTitle title={title} />
31+
32+
<AnimatedSection>
33+
<motion.div
34+
className="max-w-screen-xl grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-2 xl:grid-cols-2 justify-around gap-6"
35+
variants={containerVariants}
36+
initial="hidden"
37+
whileInView="visible"
38+
exit="exit"
39+
viewport={{ amount: 0.3, once: false }}
40+
>
41+
{data.map((item, index) => (
42+
<motion.div variants={cardVariants} key={index}>
43+
<Card {...item} />
44+
</motion.div>
45+
))}
46+
</motion.div>
47+
</AnimatedSection>
48+
</section>
49+
);
4750
}

0 commit comments

Comments
 (0)