TorresjDev · TorresjDev · Dec 22, 2025 · Dec 22, 2025 · Dec 22, 2025 · Dec 22, 2025
diff --git a/.github/workflows/azure-static-web-apps-mango-pebble-08050a31e.yml b/.github/workflows/azure-static-web-apps-mango-pebble-08050a31e.yml
@@ -24,6 +24,7 @@ jobs:
       with:
           submodules: true
           lfs: false
+          persist-credentials: false
 
     - name: Build and Deploy to Azure
       uses: Azure/static-web-apps-deploy@v1

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en">
+		<html lang="en" suppressHydrationWarning>
 			<body className={inter.className}>
 				<ThemeProvider
 					attribute="class"

diff --git a/components/Approach.tsx b/components/Approach.tsx
@@ -1,8 +1,16 @@
 "use client";
 import React from "react";
-
+import dynamic from "next/dynamic";
 import { AnimatePresence, motion } from "framer-motion";
-import { CanvasRevealEffect } from "@/components/ui/CanvasRevealEffect";
+
+// Lazy load heavy WebGL component
+const CanvasRevealEffect = dynamic(
+	() =>
+		import("@/components/ui/CanvasRevealEffect").then(
+			(m) => m.CanvasRevealEffect
+		),
+	{ ssr: false }
+);
 
 const Approach = () => {
 	return (

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -5,7 +5,14 @@ import MagicButton from "./ui/MagicButton";
 import animationData from "@/data/confetti.json";
 import { assetUrl, socialMedia } from "@/data";
 import { MdDownload, MdDownloadDone } from "react-icons/md";
-import Lottie from "react-lottie";
+import dynamic from "next/dynamic";
+
+// Lazy load Lottie for better performance
+const Lottie = dynamic(
+	() => import("lottie-react").then((mod) => ({ default: mod.default })),
+	{ ssr: false }
+);
+
 
 const Footer = () => {
 	const [downloaded, setDownloaded] = useState(false);
@@ -41,14 +48,9 @@ const Footer = () => {
 							className={`absolute bottom-[19rem] right-[16rem] z-40 w-44 h-44`}
 						>
 							<Lottie
-								options={{
-									loop: downloaded,
-									autoplay: downloaded,
-									animationData: animationData,
-									rendererSettings: {
-										preserveAspectRatio: "xMidYMid slice",
-									},
-								}}
+								animationData={animationData}
+								loop={downloaded}
+								autoPlay={downloaded}
 							/>
 						</span>
 						<a
@@ -116,7 +118,7 @@ const Footer = () => {
 									key={profile.id}
 									href={profile.link}
 									target="_blank"
-									rel="noreferrer"
+									rel="noopener noreferrer"
 									className="w-10 h-10 flex items-center justify-center bg-black-300 rounded-lg hover:bg-cyan-400 transition"
 								>
 									<img

diff --git a/components/RecentProjects.tsx b/components/RecentProjects.tsx
@@ -9,12 +9,12 @@ const RecentProjects = () => {
 			<h1 className="heading text-center">
 				Highlighting Recent <span className="text-cyan-400">Innovations</span>
 			</h1>
-			<div className="flex flex-wrap items-center justify-center p-4 mt-10 gap-x-10 lg:gap-x-16 gap-y-20 xl:gap-y-10 2xl:gap-y-6">
+			<div className="flex flex-wrap items-center justify-center p-4 mt-10 gap-x-10  md:gap-x-20 lg:gap-x-15 gap-y-20 sm:gap-y-1 md:gap-y-28 xl:gap-y-15 2xl:gap-y-12">
 				{projects.map(
 					({ id, title, des, img, lngIconLts, toolsIconLts, link }) => (
 						<div
 							key={id}
-							className="h-[39rem] sm:h-[36rem] lg:h-[24rem] xl:h-[27rem] 2xl:h-[30rem] 3xl:h-[33rem] flex items-center justify-center w-full max-w-[40vw] lg:max-w-[36vw] xl:max-w-[38vw]  my-4 sm:my-14"
+							className="h-[39rem] sm:h-[36rem] lg:h-[24rem] xl:h-[27rem] 2xl:h-[30rem] 3xl:h-[33rem] flex items-center justify-center w-full max-w-[40vw] lg:max-w-[36vw] xl:max-w-[38vw]  my-4 sm:my-2"
 						>
 							<PinContainer
 								title={link}

diff --git a/components/ui/3d-pin.tsx b/components/ui/3d-pin.tsx
@@ -70,18 +70,15 @@ export const PinPerspective = ({
 		<motion.div className="pointer-events-none  w-full h-80 flex items-center justify-center opacity-0 group-hover/pin:opacity-100 z-[60] transition duration-500">
 			<div className=" w-full h-full -mt-7 flex-none  inset-0">
 				<div className="absolute top-0 inset-x-0  flex justify-center">
-					<a
-						href={href}
-						target="_blank"
-						rel="noopener noreferrer"
+					<span
 						className="relative flex space-x-2 items-center z-10 rounded-full bg-zinc-950 pb-1 px-4 mb-2 ring-1 ring-white/10 whitespace-nowrap"
 					>
 						<span className="relative z-20 text-white text-xs font-bold inline-block py-0.5">
 							{title}
 						</span>
 
 						<span className="absolute -bottom-0 left-[1.125rem] h-px w-[calc(100%-2.25rem)] bg-gradient-to-r from-emerald-400/0 via-emerald-400/90 to-emerald-400/0 transition-opacity duration-500 group-hover/btn:opacity-40"></span>
-					</a>
+					</span>
 				</div>
 
 				<div

diff --git a/components/ui/BentoGrid.tsx b/components/ui/BentoGrid.tsx
@@ -6,7 +6,11 @@ import { cn } from "@/lib/utils";
 import animationData from "@/data/confetti.json";
 import { GlobeDemo } from "./GridGlobe";
 import { useState } from "react";
-import Lottie from "react-lottie";
+// Lazy load Lottie for better performance
+const Lottie = dynamic(
+	() => import("lottie-react").then((mod) => ({ default: mod.default })),
+	{ ssr: false }
+);
 import MagicButton from "./MagicButton";
 import { MdDownload, MdDownloadDone } from "react-icons/md";
 
@@ -130,14 +134,9 @@ export const BentoGridItem = ({
 						<div className="mt-5 relative -b">
 							<div className={`absolute -bottom-16 right-0 z-40`}>
 								<Lottie
-									options={{
-										loop: downloaded,
-										autoplay: downloaded,
-										animationData: animationData,
-										rendererSettings: {
-											preserveAspectRatio: "xMidYMid slice",
-										},
-									}}
+									animationData={animationData}
+									loop={downloaded}
+									autoPlay={downloaded}
 								/>
 							</div>
 							<a

diff --git a/components/ui/BentoGridV1.tsx b/components/ui/BentoGridV1.tsx
diff --git a/components/ui/CanvasRevealEffect.tsx b/components/ui/CanvasRevealEffect.tsx
@@ -192,7 +192,7 @@ const ShaderMaterial = ({
 	uniforms: Uniforms;
 }) => {
 	const { size } = useThree();
-	const ref = useRef<THREE.Mesh>();
+	const ref = useRef<THREE.Mesh>(null);
 	let lastFrameTime = 0;
 
 	useFrame(({ clock }) => {

diff --git a/components/ui/FloatingNav.tsx b/components/ui/FloatingNav.tsx
@@ -14,6 +14,7 @@ import {
 	FaQuoteRight,
 	FaAddressBook,
 } from "react-icons/fa";
+import { IconType } from "react-icons";
 
 export const FloatingNav = ({
 	navItems,
@@ -30,7 +31,7 @@ export const FloatingNav = ({
 	const [visible, setVisible] = useState(true);
 	const [lastScrollY, setLastScrollY] = useState(0);
 
-	const iconMapping: { [key: string]: React.ElementType } = {
+	const iconMapping: { [key: string]: IconType } = {
 		FaInfoCircle,
 		FaBook,
 		FaQuoteRight,