Skip to content

Commit 3687a35

Browse files
Darkcode-itDarkcode-it
committed
Update package dependencies to version 12.23.24 for motion and framer-motion; enhance About, Education, Services, Skills, Certifications, and Portfolio components with motion effects for improved user interaction.
1 parent 7342e3e commit 3687a35

8 files changed

Lines changed: 88 additions & 29 deletions

File tree

‎package-lock.json‎

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

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
"i18next-http-backend": "^2.2.0",
2626
"lodash": "^4.17.21",
2727
"lucide-react": "^0.544.0",
28-
"motion": "^12.23.22",
28+
"motion": "^12.23.24",
2929
"prop-types": "^15.8.1",
3030
"react": "^19.0.0",
3131
"react-dom": "^19.0.0",

‎src/Components/About/About.jsx‎

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ import React from 'react';
122122
import PropTypes from 'prop-types';
123123
import { FaDownload, FaEye } from 'react-icons/fa6';
124124
import { useTranslation } from 'react-i18next';
125+
import { motion } from 'framer-motion';
125126

126127
function About() {
127128
const { t } = useTranslation();
@@ -168,25 +169,41 @@ function About() {
168169
{/* Text Content */}
169170
<div className="lg:col-span-2 space-y-6">
170171
{t('about.description', { returnObjects: true }).map((paragraph, index) => (
171-
<div
172+
<motion.div
172173
key={`para-${index}`}
173174
className="relative bg-white/20 backdrop-blur-lg border border-white/30
174175
rounded-2xl p-6 shadow-xl hover:shadow-2xl transition-all duration-500
175176
hover:-translate-y-2 group"
177+
whileHover={{
178+
scale: 1.02,
179+
transition: { duration: 0.1 }
180+
}}
181+
transition={{ duration: 0.5 }}
182+
onHoverStart={() => console.log('Hover starts')}
183+
onHoverEnd={() => console.log('Hover ends')}
176184
>
177185
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
178186
opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl"></div>
179187
<p className="text-lg leading-relaxed text-gray-800 relative z-10">
180188
{paragraph}
181189
</p>
182-
</div>
190+
</motion.div>
183191
))}
184192
</div>
185193

186194
{/* Download Card */}
187-
<div className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl
195+
<motion.div
196+
className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl
188197
p-8 shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2
189-
group overflow-hidden">
198+
group overflow-hidden"
199+
whileHover={{
200+
scale: 1.05,
201+
transition: { duration: 0.1 }
202+
}}
203+
transition={{ duration: 0.5 }}
204+
onHoverStart={() => console.log('Hover starts')}
205+
onHoverEnd={() => console.log('Hover ends')}
206+
>
190207
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
191208
opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl"></div>
192209
<div className="absolute top-0 right-0 w-16 h-16 bg-gradient-to-br from-blue-400/20 to-purple-400/20
@@ -229,7 +246,7 @@ function About() {
229246
</a>
230247
</div>
231248
</div>
232-
</div>
249+
</motion.div>
233250
</div>
234251
</div>
235252
</section>

‎src/Components/Education/Education.jsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { AcademicCapIcon, TrophyIcon } from '@heroicons/react/24/outline';
44
import { useTranslation } from 'react-i18next';
5+
import { motion } from 'framer-motion';
56

67
function EducationTimeline() {
78
const { t } = useTranslation();
@@ -60,9 +61,18 @@ const EducationCard = ({ edu, index, totalItems }) => {
6061

6162
{/* Content Container */}
6263
<div className={`md:w-1/2 ${index % 2 === 0 ? 'md:pr-8' : 'md:pl-8'} relative`}>
63-
<div className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl
64+
<motion.div
65+
className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl
6466
p-8 shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2
65-
group-hover:bg-white/30 overflow-hidden">
67+
group-hover:bg-white/30 overflow-hidden"
68+
whileHover={{
69+
scale: 1.02,
70+
transition: { duration: 0.1 }
71+
}}
72+
transition={{ duration: 0.5 }}
73+
onHoverStart={() => console.log('Hover starts')}
74+
onHoverEnd={() => console.log('Hover ends')}
75+
>
6676

6777
{/* Gradient Overlays */}
6878
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
@@ -114,7 +124,7 @@ const EducationCard = ({ edu, index, totalItems }) => {
114124
))}
115125
</ul>
116126
</div>
117-
</div>
127+
</motion.div>
118128
</div>
119129
</article>
120130
);

‎src/Components/Services/Services.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import { FiCode, FiLayers, FiBookOpen } from 'react-icons/fi';
44
import { useTranslation } from 'react-i18next';
5+
import { motion } from 'framer-motion';
56

67
function Services() {
78
const { t } = useTranslation();
@@ -39,14 +40,21 @@ function Services() {
3940
{/* Services Grid */}
4041
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
4142
{t('services.items', { returnObjects: true }).map((service, index) => (
42-
<div
43+
<motion.div
4344
key={service.id}
4445
className="group relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-xl p-6
4546
shadow-xl hover:shadow-2xl transition-all duration-500
4647
hover:-translate-y-3 hover:bg-white/30 overflow-hidden"
4748
style={{
4849
animationDelay: `${index * 100}ms` // تأخیر انیمیشن برای هر کارت
4950
}}
51+
whileHover={{
52+
scale: 1.05,
53+
transition: { duration: 0.1 }
54+
}}
55+
transition={{ duration: 0.5 }}
56+
onHoverStart={() => console.log('Hover starts')}
57+
onHoverEnd={() => console.log('Hover ends')}
5058
>
5159
{/* افکت گرادیان هنگام هاور */}
5260
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
@@ -84,7 +92,7 @@ function Services() {
8492
rounded-bl-2xl opacity-50"></div>
8593
<div className="absolute bottom-0 left-0 w-12 h-12 bg-gradient-to-tr from-pink-400/20 to-orange-400/20
8694
rounded-tr-2xl opacity-50"></div>
87-
</div>
95+
</motion.div>
8896
))}
8997
</div>
9098
</div>

‎src/Components/Skill/Skill.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState, useEffect } from 'react';
22
import { useTranslation } from 'react-i18next';
3+
import { motion } from 'framer-motion';
34
import skillsData from './Skill.json';
45

56
function Skills() {
@@ -42,12 +43,19 @@ function Skills() {
4243

4344
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7 gap-4">
4445
{skills.map((skill, index) => (
45-
<div
46+
<motion.div
4647
key={skill.id}
4748
className="group relative"
4849
style={{
4950
animationDelay: `${index * 100}ms`
5051
}}
52+
whileHover={{
53+
scale: 1.05,
54+
transition: { duration: 0.1 }
55+
}}
56+
transition={{ duration: 0.5 }}
57+
onHoverStart={() => console.log('Hover starts')}
58+
onHoverEnd={() => console.log('Hover ends')}
5159
>
5260
<div className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-xl p-3
5361
shadow-xl hover:shadow-2xl transition-all duration-500
@@ -121,7 +129,7 @@ function Skills() {
121129
<div className="absolute bottom-0 left-0 w-10 h-10 bg-gradient-to-tr from-pink-400/20 to-orange-400/20
122130
rounded-tr-xl opacity-50"></div>
123131
</div>
124-
</div>
132+
</motion.div>
125133
))}
126134

127135
</div>

‎src/Components/certifica/Certifications.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import certifications from './Certifications.json'; // Fix problem for Vercel server
33
import { useTranslation } from 'react-i18next';
4+
import { motion } from 'framer-motion';
45

56
function Certifications() {
67
const { t } = useTranslation();
@@ -20,10 +21,17 @@ function Certifications() {
2021

2122
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
2223
{certifications.map((certification, index) => (
23-
<div
24+
<motion.div
2425
key={certification.id || index}
2526
className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-2xl p-6
2627
shadow-xl hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 group overflow-hidden"
28+
whileHover={{
29+
scale: 1.05,
30+
transition: { duration: 0.1 }
31+
}}
32+
transition={{ duration: 0.5 }}
33+
onHoverStart={() => console.log('Hover starts')}
34+
onHoverEnd={() => console.log('Hover ends')}
2735
>
2836
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10
2937
opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl"></div>
@@ -54,7 +62,7 @@ function Certifications() {
5462
{certification.issuedDate}
5563
</p>
5664
</div>
57-
</div>
65+
</motion.div>
5866
))}
5967
</div>
6068
</div>

‎src/Components/portfolio/Portfolio.jsx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
33
import projectsData from './Portfolio.json';
44
import { CiWarning } from "react-icons/ci";
55
import { useTranslation } from 'react-i18next';
6+
import { motion } from 'framer-motion';
67

78
const Portfolio = () => {
89
const { t, i18n } = useTranslation();
@@ -62,11 +63,18 @@ const Portfolio = () => {
6263
const ProjectCard = ({ project, onError, index }) => {
6364
const { t } = useTranslation();
6465
return (
65-
<div
66+
<motion.div
6667
className="group relative h-[310px]"
6768
style={{
6869
animationDelay: `${index * 100}ms` // تأخیر انیمیشن برای هر کارت
6970
}}
71+
whileHover={{
72+
scale: 1.05,
73+
transition: { duration: 0.1 }
74+
}}
75+
transition={{ duration: 0.5 }}
76+
onHoverStart={() => console.log('Hover starts')}
77+
onHoverEnd={() => console.log('Hover ends')}
7078
>
7179
<div className="relative bg-white/20 backdrop-blur-lg border border-white/30 rounded-xl p-2
7280
shadow-md hover:shadow-xl transition-all duration-500
@@ -115,7 +123,7 @@ const ProjectCard = ({ project, onError, index }) => {
115123
</div>
116124
</div>
117125
</div>
118-
</div>
126+
</motion.div>
119127
);
120128
};
121129

0 commit comments

Comments
 (0)