Skip to content

Commit 594d48f

Browse files
dacrabdacrab
committed
Update dependencies and enhance type definitions for improved animation consistency
- Upgraded various dependencies in package.json and package-lock.json for better performance and compatibility. - Refined type definitions in components to ensure consistent use of CubicBezier types for animation settings. - Improved animation configurations across multiple components, enhancing overall responsiveness and visual quality.
1 parent 5b771d4 commit 594d48f

16 files changed

+374
-269
lines changed

‎package-lock.json‎

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

‎package.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@
1010
"export": "next export"
1111
},
1212
"dependencies": {
13-
"framer-motion": "^12.6.2",
14-
"lucide-react": "^0.503.0",
15-
"next": "^15.2.4",
16-
"react": "^19.0.0",
17-
"react-dom": "^19.0.0",
13+
"framer-motion": "^12.18.1",
14+
"lucide-react": "^0.515.0",
15+
"next": "^15.3.3",
16+
"react": "^19.1.0",
17+
"react-dom": "^19.1.0",
1818
"react-intersection-observer": "^9.16.0"
1919
},
2020
"devDependencies": {
2121
"@eslint/eslintrc": "^3",
2222
"@tailwindcss/postcss": "^4",
23-
"@types/node": "^20",
23+
"@types/node": "^24",
2424
"@types/react": "^19",
2525
"@types/react-dom": "^19",
2626
"eslint": "^9",
27-
"eslint-config-next": "15.2.2",
27+
"eslint-config-next": "15.3.3",
2828
"tailwindcss": "^4",
29-
"tsx": "^4.19.4",
29+
"tsx": "^4.20.3",
3030
"typescript": "^5"
3131
}
3232
}

‎src/components/About/ProfileImage.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import SwissMotion from "@/components/SwissMotion";
55
import ShapeAnimation from "@/components/ShapeAnimation";
66
import TextAnimation from "@/components/TextAnimation";
77

8+
type CubicBezier = [number, number, number, number];
9+
810
// Animation constants
9-
const EASING = {
11+
const EASING: { [key: string]: CubicBezier } = {
1012
swiss: [0.22, 0.9, 0.36, 0.95],
1113
crisp: [0.12, 0.8, 0.88, 0.58],
1214
explosive: [0, 0.9, 0.1, 1]

‎src/components/Experience/LottieVisualization.tsx‎

Lines changed: 10 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { motion, useInView, TargetAndTransition } from "framer-motion";
1+
import { motion, useInView, TargetAndTransition, Transition } from "framer-motion";
22
import { memo, useState, useEffect, useRef, useMemo } from "react";
33
import { useIsMobile } from "@/hooks/useIsMobile";
44
import NumberCounter from "./NumberCounter";
@@ -11,6 +11,8 @@ interface LottieVisualizationProps {
1111
isMobile?: boolean;
1212
}
1313

14+
type CubicBezier = [number, number, number, number];
15+
1416
interface TimelineProps {
1517
width: number;
1618
height: number;
@@ -36,30 +38,15 @@ interface StatsCardProps {
3638
isInView: boolean;
3739
}
3840

39-
interface AnimationTransition {
40-
duration: number;
41-
ease: number[] | string;
42-
repeat?: number;
43-
repeatType?: "mirror" | "reverse" | "loop";
44-
delay?: number;
45-
}
46-
4741
// ==========================================================================
4842
// Constants
4943
// ==========================================================================
50-
const ANIMATION_EASING = {
44+
const ANIMATION_EASING: { [key: string]: CubicBezier } = {
5145
swissEaseExplosive: [0, 0.9, 0.1, 1], // Extremely sharp, explosive curve
5246
swissEaseCrisp: [0.12, 0.8, 0.88, 0.58], // More explosive Swiss-style precision curve
5347
swissEaseSmooth: [0.25, 0.1, 0.25, 1.0], // Smoother cubic bezier curve for animations
5448
};
5549

56-
const DEFAULT_ANIMATION_TRANSITION: AnimationTransition = {
57-
duration: 5,
58-
ease: ANIMATION_EASING.swissEaseSmooth,
59-
repeat: Infinity,
60-
repeatType: "mirror"
61-
};
62-
6350
// Stats data
6451
const STATS = [
6552
{ value: 1, label: "Year", delay: 0.3 },
@@ -159,10 +146,13 @@ function detectLowEndDevice(): boolean {
159146
* Creates a standard infinite animation transition with customizable properties
160147
*/
161148
function createInfiniteTransition(
162-
options: Partial<AnimationTransition> = {}
163-
): AnimationTransition {
149+
options: Partial<Transition> = {}
150+
): Transition {
164151
return {
165-
...DEFAULT_ANIMATION_TRANSITION,
152+
duration: 5,
153+
ease: ANIMATION_EASING.swissEaseSmooth,
154+
repeat: Infinity,
155+
repeatType: "mirror",
166156
...options
167157
};
168158
}

‎src/components/Experience/NumberCounter.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@ import { motion } from "framer-motion";
44
// ==========================================================================
55
// Type Definitions
66
// ==========================================================================
7+
type CubicBezier = [number, number, number, number];
8+
79
interface NumberCounterProps {
810
end: number;
911
duration: number;
@@ -17,7 +19,7 @@ interface NumberCounterProps {
1719
// Constants
1820
// ==========================================================================
1921
const DEFAULT_CLASSNAME = "text-accent text-2xl font-bold";
20-
const EASING = [0.25, 0.1, 0.25, 1.0];
22+
const EASING: CubicBezier = [0.25, 0.1, 0.25, 1.0];
2123

2224
// ==========================================================================
2325
// Animation Helpers

‎src/components/Experience/SkillProgressions.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { motion } from "framer-motion";
1+
import { motion, Easing } from "framer-motion";
22
import { memo, useRef, useMemo } from "react";
33
import NumberCounter from "./NumberCounter";
44
import { SKILL_PROGRESSIONS } from "./types";
@@ -7,6 +7,8 @@ import SwissMotion from "@/components/SwissMotion";
77
// ==========================================================================
88
// Type Definitions
99
// ==========================================================================
10+
type CubicBezier = [number, number, number, number];
11+
1012
interface SkillProgressionsProps {
1113
isInView: boolean;
1214
isMobile: boolean;
@@ -15,7 +17,20 @@ interface SkillProgressionsProps {
1517
// ==========================================================================
1618
// Animation Constants
1719
// ==========================================================================
18-
const ANIMATION = {
20+
const ANIMATION: {
21+
DURATION: {
22+
MOBILE: { [key: string]: number };
23+
DESKTOP: { [key: string]: number };
24+
};
25+
DELAY: {
26+
BASE: { [key: string]: number };
27+
INCREMENT: { [key: string]: number };
28+
};
29+
EASING: {
30+
SMOOTH: { [key: string]: CubicBezier };
31+
EASE_OUT: Easing;
32+
};
33+
} = {
1934
DURATION: {
2035
MOBILE: { SHORT: 0.2, MEDIUM: 0.3, LONG: 0.5 },
2136
DESKTOP: { SHORT: 0.4, MEDIUM: 0.5, LONG: 1.0 }

‎src/components/Experience/Timeline.tsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { motion } from "framer-motion";
1+
import { motion, Transition, Variants } from "framer-motion";
22
import { memo, useMemo } from "react";
33
import TimelineEntry from "./TimelineEntry";
44
import { EXPERIENCES } from "./types";
@@ -12,6 +12,11 @@ interface TimelineProps {
1212
isMobile: boolean;
1313
}
1414

15+
type PulseAnimation = {
16+
scale: number[];
17+
opacity: number[];
18+
};
19+
1520
// ==========================================================================
1621
// Animation Constants
1722
// ==========================================================================
@@ -49,7 +54,15 @@ const Timeline = memo(function Timeline({ isInView, isMobile }: TimelineProps) {
4954
// ==========================================================================
5055
// Animation Configurations
5156
// ==========================================================================
52-
const animations = useMemo(() => ({
57+
const animations: {
58+
main: Variants;
59+
verticalLine: Transition;
60+
endMarker: Variants;
61+
endMarkerPulse: {
62+
animate: PulseAnimation;
63+
transition: Transition;
64+
};
65+
} = useMemo(() => ({
5366
main: {
5467
initial: { opacity: 0, y: isMobile ? 5 : 15 },
5568
animate: {
@@ -86,7 +99,7 @@ const Timeline = memo(function Timeline({ isInView, isMobile }: TimelineProps) {
8699
transition: {
87100
duration: isMobile ? ANIMATION.PULSE.MOBILE : ANIMATION.PULSE.DESKTOP,
88101
repeat: Infinity,
89-
repeatType: "reverse" as const
102+
repeatType: "reverse"
90103
}
91104
}
92105
}), [isInView, isMobile]);

‎src/components/Hero/HeroContent.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,14 +143,14 @@ const HeroContent = memo(function HeroContent({
143143
through thoughtful design and modern development techniques.
144144
<motion.span
145145
className="absolute right-0 -bottom-2 w-full h-[2px] block"
146-
initial={{ scaleX: 0, originX: 0 }}
146+
initial={{ scaleX: 0 }}
147147
animate={{ scaleX: 1 }}
148148
transition={{
149149
duration: ANIMATION.duration.long,
150150
delay: 1.2,
151151
ease: ANIMATION.easing.crisp
152152
}}
153-
style={{ background: 'var(--accent-secondary)', opacity: 0.3 }}
153+
style={{ background: 'var(--accent-secondary)', opacity: 0.3, transformOrigin: 'left' }}
154154
/>
155155
</span>
156156
</div>

‎src/components/Hero/constants.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
1+
type CubicBezier = [number, number, number, number];
2+
13
// Animation constants
2-
export const ANIMATION = {
4+
export const ANIMATION: {
5+
easing: {
6+
explosive: CubicBezier;
7+
crisp: CubicBezier;
8+
smooth: CubicBezier;
9+
};
10+
duration: {
11+
short: number;
12+
medium: number;
13+
long: number;
14+
fast: number;
15+
};
16+
delay: {
17+
stagger: number;
18+
};
19+
} = {
320
easing: {
421
explosive: [0, 0.9, 0.1, 1], // Extremely sharp, explosive curve
522
crisp: [0.12, 0.8, 0.88, 0.58], // More explosive Swiss-style precision curve

‎src/components/Navbar.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,23 +105,23 @@ export default function Navbar() {
105105
stiffness: isMobile ? 200 : 300,
106106
damping: isMobile ? 25 : 20,
107107
duration: isMobile ? 0.5 : 0.7
108-
}
108+
} as const
109109
}
110110
};
111111

112112
const menuVariants = {
113-
hidden: { opacity: 0, height: 0, y: -10, transition: { duration: 0.2, ease: "easeInOut" } },
113+
hidden: { opacity: 0, height: 0, y: -10, transition: { duration: 0.2, ease: "easeInOut" } as const },
114114
visible: {
115115
opacity: 1,
116116
height: "auto",
117117
y: 0,
118-
transition: { duration: 0.3, ease: "easeOut", staggerChildren: 0.05, delayChildren: 0.05 }
118+
transition: { duration: 0.3, ease: "easeOut", staggerChildren: 0.05, delayChildren: 0.05 } as const
119119
}
120120
};
121121

122122
const navItemVariants = {
123123
hidden: { opacity: 0, x: -10 },
124-
visible: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 200, damping: 20 } }
124+
visible: { opacity: 1, x: 0, transition: { type: "spring", stiffness: 200, damping: 20 } as const }
125125
};
126126

127127
const handleLogoClick = useCallback(() => {

0 commit comments

Comments
 (0)