From c5bb4b146b6af90c488f261ab539bdb974d30712 Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Sat, 3 Jan 2026 07:55:29 +0000 Subject: [PATCH] feat: Upgrade React 19, Framer Motion 12, and optimize animations - Upgrade `react` and `react-dom` to v19. - Upgrade `framer-motion` to v12.23.26. - Upgrade `typescript` and `@types/node` to latest to support new definitions. - Add `will-change: transform, opacity` to `motion` components for performance optimization. - Fix typo `type: "twean"` to `type: "tween"` in multiple animation transitions. - Replace deprecated `React.ReactNodeArray` with `React.ReactNode[]`. - Update `tsconfig.ui.json` to handle library checks and JSX settings. --- .../src/components/footer/Footer.tsx | 1 + .../StartupProjects/StartupProject.tsx | 3 +- .../containers/achievement/Achievement.tsx | 3 +- .../src/containers/blogs/Blogs.tsx | 3 +- .../src/containers/contact/Contact.tsx | 3 +- .../src/containers/education/Education.tsx | 3 +- .../src/containers/greeting/Greeting.tsx | 3 +- .../src/containers/loading/Loading.tsx | 2 +- .../src/containers/projects/Projects.tsx | 3 +- .../skillProgress/skillProgress.tsx | 2 + .../src/containers/skills/Skills.tsx | 2 + .../workExperience/WorkExperience.tsx | 3 +- package-lock.json | 170 +++++++++--------- package.json | 18 +- tsconfig.ui.json | 3 + 15 files changed, 119 insertions(+), 103 deletions(-) diff --git a/apps/portfolio-ui/src/components/footer/Footer.tsx b/apps/portfolio-ui/src/components/footer/Footer.tsx index c00b88b..e64ca58 100644 --- a/apps/portfolio-ui/src/components/footer/Footer.tsx +++ b/apps/portfolio-ui/src/components/footer/Footer.tsx @@ -13,6 +13,7 @@ const Footer: React.FC = () => { whileInView={{ y: 0 }} transition={{ duration: 0.8, type: "tween", stiffness: 100 }} viewport={{ once: true }} + style={{ willChange: "transform, opacity" }} >
diff --git a/apps/portfolio-ui/src/containers/StartupProjects/StartupProject.tsx b/apps/portfolio-ui/src/containers/StartupProjects/StartupProject.tsx
index b9b86c1..12f981c 100644
--- a/apps/portfolio-ui/src/containers/StartupProjects/StartupProject.tsx
+++ b/apps/portfolio-ui/src/containers/StartupProjects/StartupProject.tsx
@@ -25,8 +25,9 @@ const StartupProject = (): React.ReactElement | null => {
Education
diff --git a/apps/portfolio-ui/src/containers/greeting/Greeting.tsx b/apps/portfolio-ui/src/containers/greeting/Greeting.tsx
index bc65ac7..cc47402 100644
--- a/apps/portfolio-ui/src/containers/greeting/Greeting.tsx
+++ b/apps/portfolio-ui/src/containers/greeting/Greeting.tsx
@@ -19,8 +19,9 @@ const Greeting: React.FC = () => {
Open Source Projects
diff --git a/apps/portfolio-ui/src/containers/skillProgress/skillProgress.tsx b/apps/portfolio-ui/src/containers/skillProgress/skillProgress.tsx
index 1591f8a..61675e2 100644
--- a/apps/portfolio-ui/src/containers/skillProgress/skillProgress.tsx
+++ b/apps/portfolio-ui/src/containers/skillProgress/skillProgress.tsx
@@ -14,6 +14,7 @@ const StackProgress: React.FC = (): React.ReactElement | null => {
whileInView={{ x: 0 }}
transition={{ duration: 0.9, type: "tween", stiffness: 100 }}
viewport={{ once: true }}
+ style={{ willChange: "transform, opacity" }}
className="skills-bar">
Proficiency
{techStack.experience.map((exp, i) => {
@@ -35,6 +36,7 @@ const StackProgress: React.FC = (): React.ReactElement | null => {
whileInView={{ x: 0 }}
transition={{ duration: 0.9, type: "tween", stiffness: 100 }}
viewport={{ once: true }}
+ style={{ willChange: "transform, opacity" }}
className="skills-image"
>
{illustration.animated ? (
diff --git a/apps/portfolio-ui/src/containers/skills/Skills.tsx b/apps/portfolio-ui/src/containers/skills/Skills.tsx
index bd5d242..c96567f 100644
--- a/apps/portfolio-ui/src/containers/skills/Skills.tsx
+++ b/apps/portfolio-ui/src/containers/skills/Skills.tsx
@@ -22,6 +22,7 @@ const Skills: React.FC = (): React.ReactElement | null => {
whileInView={{ x: 0, y: "-12%" }}
transition={{ delay: 1, type: "tween", stiffness: 100 }}
viewport={{ once: true }}
+ style={{ willChange: "transform, opacity" }}
>
{