From 1b2a7ab06ecea3ece8ba53e0762efba850abb141 Mon Sep 17 00:00:00 2001
From: Ashwani Senapati <senapatiashwani47@gmail.com>
Date: Sun, 11 Jan 2026 18:35:15 +0530
Subject: [PATCH] fix:build errors and minor changes

---
 next.config.ts                |  25 ++-
 package-lock.json             |  94 ++++----
 package.json                  |   2 +-
 src/app/components/Footer.jsx |   1 +
 src/app/components/Home.jsx   | 399 +++++++++++++++++++++++++---------
 src/app/components/Navbar.jsx |   2 +-
 src/app/globals.css           |   3 +
 src/app/layout.tsx            |   2 +
 src/app/page.tsx              |   1 -
 src/app/projects/page.tsx     | 169 +++++++++++---
 src/lib/achievementsDB.js     |   1 +
 tsconfig.json                 |  26 ++-
 12 files changed, 531 insertions(+), 194 deletions(-)

diff --git a/next.config.ts b/next.config.ts
index 632c71d..07f645e 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -1,25 +1,30 @@
-import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
+const nextConfig = {
   eslint: {
-    ignoreDuringBuilds: true, 
+    ignoreDuringBuilds: true,
   },
+
   images: {
     remotePatterns: [
-      
       {
         protocol: "https",
-        hostname: "res.cloudinary.com", 
+        hostname: "res.cloudinary.com",
+      },
+      {
+        protocol: "https",
+        hostname: "picsum.photos",
       },
-      { protocol: "https", hostname: "picsum.photos" },
     ],
   },
-   async headers() {
+
+  async headers() {
     return [
       {
-        source: '/team/:path*',
+        source: "/team/:path*",
         headers: [
-          { key: 'Access-Control-Allow-Origin', value: '*' },
+          {
+            key: "Access-Control-Allow-Origin",
+            value: "*",
+          },
         ],
       },
     ];
diff --git a/package-lock.json b/package-lock.json
index 48f8728..9442df2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "lucide-react": "^0.548.0",
         "mongoose": "^8.19.1",
         "motion": "^12.23.24",
-        "next": "15.5.4",
+        "next": "^16.1.1",
         "react": "19.1.0",
         "react-awesome-reveal": "^4.3.1",
         "react-dom": "19.1.0",
@@ -1100,9 +1100,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.4.tgz",
-      "integrity": "sha512-27SQhYp5QryzIT5uO8hq99C69eLQ7qkzkDPsk3N+GuS2XgOgoYEeOav7Pf8Tn4drECOVDsDg8oj+/DVy8qQL2A==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-16.1.1.tgz",
+      "integrity": "sha512-3oxyM97Sr2PqiVyMyrZUtrtM3jqqFxOQJVuKclDsgj/L728iZt/GyslkN4NwarledZATCenbk4Offjk1hQmaAA==",
       "license": "MIT"
     },
     "node_modules/@next/eslint-plugin-next": {
@@ -1116,9 +1116,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-15.5.4.tgz",
-      "integrity": "sha512-nopqz+Ov6uvorej8ndRX6HlxCYWCO3AHLfKK2TYvxoSB2scETOcfm/HSS3piPqc3A+MUgyHoqE6je4wnkjfrOA==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-16.1.1.tgz",
+      "integrity": "sha512-JS3m42ifsVSJjSTzh27nW+Igfha3NdBOFScr9C80hHGrWx55pTrVL23RJbqir7k7/15SKlrLHhh/MQzqBBYrQA==",
       "cpu": [
         "arm64"
       ],
@@ -1132,9 +1132,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-15.5.4.tgz",
-      "integrity": "sha512-QOTCFq8b09ghfjRJKfb68kU9k2K+2wsC4A67psOiMn849K9ZXgCSRQr0oVHfmKnoqCbEmQWG1f2h1T2vtJJ9mA==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-16.1.1.tgz",
+      "integrity": "sha512-hbyKtrDGUkgkyQi1m1IyD3q4I/3m9ngr+V93z4oKHrPcmxwNL5iMWORvLSGAf2YujL+6HxgVvZuCYZfLfb4bGw==",
       "cpu": [
         "x64"
       ],
@@ -1148,9 +1148,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-15.5.4.tgz",
-      "integrity": "sha512-eRD5zkts6jS3VfE/J0Kt1VxdFqTnMc3QgO5lFE5GKN3KDI/uUpSyK3CjQHmfEkYR4wCOl0R0XrsjpxfWEA++XA==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-16.1.1.tgz",
+      "integrity": "sha512-/fvHet+EYckFvRLQ0jPHJCUI5/B56+2DpI1xDSvi80r/3Ez+Eaa2Yq4tJcRTaB1kqj/HrYKn8Yplm9bNoMJpwQ==",
       "cpu": [
         "arm64"
       ],
@@ -1164,9 +1164,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-15.5.4.tgz",
-      "integrity": "sha512-TOK7iTxmXFc45UrtKqWdZ1shfxuL4tnVAOuuJK4S88rX3oyVV4ZkLjtMT85wQkfBrOOvU55aLty+MV8xmcJR8A==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-16.1.1.tgz",
+      "integrity": "sha512-MFHrgL4TXNQbBPzkKKur4Fb5ICEJa87HM7fczFs2+HWblM7mMLdco3dvyTI+QmLBU9xgns/EeeINSZD6Ar+oLg==",
       "cpu": [
         "arm64"
       ],
@@ -1180,9 +1180,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-15.5.4.tgz",
-      "integrity": "sha512-7HKolaj+481FSW/5lL0BcTkA4Ueam9SPYWyN/ib/WGAFZf0DGAN8frNpNZYFHtM4ZstrHZS3LY3vrwlIQfsiMA==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-16.1.1.tgz",
+      "integrity": "sha512-20bYDfgOQAPUkkKBnyP9PTuHiJGM7HzNBbuqmD0jiFVZ0aOldz+VnJhbxzjcSabYsnNjMPsE0cyzEudpYxsrUQ==",
       "cpu": [
         "x64"
       ],
@@ -1196,9 +1196,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-15.5.4.tgz",
-      "integrity": "sha512-nlQQ6nfgN0nCO/KuyEUwwOdwQIGjOs4WNMjEUtpIQJPR2NUfmGpW2wkJln1d4nJ7oUzd1g4GivH5GoEPBgfsdw==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-16.1.1.tgz",
+      "integrity": "sha512-9pRbK3M4asAHQRkwaXwu601oPZHghuSC8IXNENgbBSyImHv/zY4K5udBusgdHkvJ/Tcr96jJwQYOll0qU8+fPA==",
       "cpu": [
         "x64"
       ],
@@ -1212,9 +1212,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-15.5.4.tgz",
-      "integrity": "sha512-PcR2bN7FlM32XM6eumklmyWLLbu2vs+D7nJX8OAIoWy69Kef8mfiN4e8TUv2KohprwifdpFKPzIP1njuCjD0YA==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-16.1.1.tgz",
+      "integrity": "sha512-bdfQkggaLgnmYrFkSQfsHfOhk/mCYmjnrbRCGgkMcoOBZ4n+TRRSLmT/CU5SATzlBJ9TpioUyBW/vWFXTqQRiA==",
       "cpu": [
         "arm64"
       ],
@@ -1228,9 +1228,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-15.5.4.tgz",
-      "integrity": "sha512-1ur2tSHZj8Px/KMAthmuI9FMp/YFusMMGoRNJaRZMOlSkgvLjzosSdQI0cJAKogdHl3qXUQKL9MGaYvKwA7DXg==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-16.1.1.tgz",
+      "integrity": "sha512-Ncwbw2WJ57Al5OX0k4chM68DKhEPlrXBaSXDCi2kPi5f4d8b3ejr3RRJGfKBLrn2YJL5ezNS7w2TZLHSti8CMw==",
       "cpu": [
         "x64"
       ],
@@ -3223,6 +3223,15 @@
       ],
       "license": "MIT"
     },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.14",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.14.tgz",
+      "integrity": "sha512-B0xUquLkiGLgHhpPBqvl7GWegWBUNuujQ6kXd/r1U38ElPT6Ok8KZ8e+FpUGEc2ZoRQUzq/aUnaKFc/svWUGSg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
     "node_modules/bidi-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
@@ -6153,13 +6162,14 @@
       "license": "MIT"
     },
     "node_modules/next": {
-      "version": "15.5.4",
-      "resolved": "https://registry.npmjs.org/next/-/next-15.5.4.tgz",
-      "integrity": "sha512-xH4Yjhb82sFYQfY3vbkJfgSDgXvBB6a8xPs9i35k6oZJRoQRihZH+4s9Yo2qsWpzBmZ3lPXaJ2KPXLfkvW4LnA==",
+      "version": "16.1.1",
+      "resolved": "https://registry.npmjs.org/next/-/next-16.1.1.tgz",
+      "integrity": "sha512-QI+T7xrxt1pF6SQ/JYFz95ro/mg/1Znk5vBebsWwbpejj1T0A23hO7GYEaVac9QUOT2BIMiuzm0L99ooq7k0/w==",
       "license": "MIT",
       "dependencies": {
-        "@next/env": "15.5.4",
+        "@next/env": "16.1.1",
         "@swc/helpers": "0.5.15",
+        "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001579",
         "postcss": "8.4.31",
         "styled-jsx": "5.1.6"
@@ -6168,18 +6178,18 @@
         "next": "dist/bin/next"
       },
       "engines": {
-        "node": "^18.18.0 || ^19.8.0 || >= 20.0.0"
+        "node": ">=20.9.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "15.5.4",
-        "@next/swc-darwin-x64": "15.5.4",
-        "@next/swc-linux-arm64-gnu": "15.5.4",
-        "@next/swc-linux-arm64-musl": "15.5.4",
-        "@next/swc-linux-x64-gnu": "15.5.4",
-        "@next/swc-linux-x64-musl": "15.5.4",
-        "@next/swc-win32-arm64-msvc": "15.5.4",
-        "@next/swc-win32-x64-msvc": "15.5.4",
-        "sharp": "^0.34.3"
+        "@next/swc-darwin-arm64": "16.1.1",
+        "@next/swc-darwin-x64": "16.1.1",
+        "@next/swc-linux-arm64-gnu": "16.1.1",
+        "@next/swc-linux-arm64-musl": "16.1.1",
+        "@next/swc-linux-x64-gnu": "16.1.1",
+        "@next/swc-linux-x64-musl": "16.1.1",
+        "@next/swc-win32-arm64-msvc": "16.1.1",
+        "@next/swc-win32-x64-msvc": "16.1.1",
+        "sharp": "^0.34.4"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
diff --git a/package.json b/package.json
index 6371f3c..33755f4 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     "lucide-react": "^0.548.0",
     "mongoose": "^8.19.1",
     "motion": "^12.23.24",
-    "next": "15.5.4",
+    "next": "^16.1.1",
     "react": "19.1.0",
     "react-awesome-reveal": "^4.3.1",
     "react-dom": "19.1.0",
diff --git a/src/app/components/Footer.jsx b/src/app/components/Footer.jsx
index a46e50b..885c1fe 100644
--- a/src/app/components/Footer.jsx
+++ b/src/app/components/Footer.jsx
@@ -13,6 +13,7 @@ export default function Footer() {
 
   return (
     <footer
+    id="contact"
       className="
         relative z-30 w-full overflow-hidden
         bg-[#0b1117] text-slate-200 isolate flex flex-col items-center
diff --git a/src/app/components/Home.jsx b/src/app/components/Home.jsx
index ec035a2..d8167e8 100644
--- a/src/app/components/Home.jsx
+++ b/src/app/components/Home.jsx
@@ -241,11 +241,10 @@
 import { Canvas } from "@react-three/fiber";
 import { OrbitControls } from "@react-three/drei";
 import { Sphere, Line } from "@react-three/drei";
-import { useRef } from "react";
+import { useRef, useMemo } from "react";
 import { useFrame } from "@react-three/fiber";
 import { EffectComposer, Bloom } from "@react-three/postprocessing";
 import { motion } from "framer-motion";
-import { ReactTyped } from "react-typed";
 import Navbar from "./Navbar";
 
 const Glow = ({ className = "" }) => (
@@ -255,20 +254,24 @@ const Glow = ({ className = "" }) => (
   />
 );
 
-function AnimatedNeuralNode({ position, color, size = 0.08 }) {
+// Navbar placeholder
+
+
+function AnimatedNeuralNode({ position, color, size = 0.08, delay = 0 }) {
   const ref = useRef();
 
   useFrame((state) => {
     if (ref.current) {
-      // Subtle pulsing animation
-      ref.current.scale.x = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
-      ref.current.scale.y = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
-      ref.current.scale.z = 1 + Math.sin(state.clock.elapsedTime * 2) * 0.1;
+      // Subtle pulsing animation with individual delay
+      const time = state.clock.elapsedTime + delay;
+      ref.current.scale.x = 1 + Math.sin(time * 2) * 0.15;
+      ref.current.scale.y = 1 + Math.sin(time * 2) * 0.15;
+      ref.current.scale.z = 1 + Math.sin(time * 2) * 0.15;
     }
   });
 
   return (
-    <Sphere ref={ref} args={[size, 64, 64]} position={position}>
+    <Sphere ref={ref} args={[size, 32, 32]} position={position}>
       <meshStandardMaterial
         color={color}
         emissive={color}
@@ -278,55 +281,127 @@ function AnimatedNeuralNode({ position, color, size = 0.08 }) {
     </Sphere>
   );
 }
-
+// Add this component after the imports
+function ElectricCircuitBackground() {
+  return (
+    <group position={[0, 0, -10]}>
+      {/* Main circuit grid */}
+      <gridHelper 
+        args={[50, 100, '#00faff', '#00a8ff']} 
+        rotation={[0, 0, Math.PI / 4]}
+      />
+      
+      {/* Floating circuit lines */}
+      {Array.from({ length: 20 }).map((_, i) => {
+        const x = (Math.random() - 0.5) * 40;
+        const y = (Math.random() - 0.5) * 40;
+        const length = 3 + Math.random() * 5;
+        
+        return (
+          <Line
+            key={i}
+            points={[
+              [x, y, 0],
+              [x + length, y + (Math.random() - 0.5) * 2, 0]
+            ]}
+            color="#00faff"
+            lineWidth={0.5}
+            transparent
+            opacity={0.3 + Math.random() * 0.3}
+          />
+        );
+      })}
+      
+      {/* Circuit nodes */}
+      {Array.from({ length: 30 }).map((_, i) => (
+        <Sphere
+          key={`node-${i}`}
+          args={[0.05, 16, 16]}
+          position={[
+            (Math.random() - 0.5) * 40,
+            (Math.random() - 0.5) * 40,
+            0
+          ]}
+        >
+          <meshBasicMaterial color="#00faff" toneMapped={false} />
+        </Sphere>
+      ))}
+    </group>
+  );
+}
 function NeuralStructure({
   position = [0, 0, 0],
   color = "#00faff",
-  nodeCount = 18, // Fixed node count instead of random
+  structureIndex = 0,
 }) {
-  const nodes = useRef([]);
-
-  if (nodes.current.length === 0) {
+  // Generate fixed node positions based on structure index
+  const nodes = useMemo(() => {
+    const nodePositions = [];
+    const nodeCount = 12;
+    const radius = 1.2;
+    
+    // Create a spherical distribution of nodes
     for (let i = 0; i < nodeCount; i++) {
-      nodes.current.push([
-        (Math.random() - 0.5) * 3,
-        (Math.random() - 0.5) * 3,
-        (Math.random() - 0.5) * 3,
+      const phi = Math.acos(-1 + (2 * i) / nodeCount);
+      const theta = Math.sqrt(nodeCount * Math.PI) * phi + structureIndex;
+      
+      nodePositions.push([
+        radius * Math.cos(theta) * Math.sin(phi),
+        radius * Math.sin(theta) * Math.sin(phi),
+        radius * Math.cos(phi),
       ]);
     }
-  }
+    return nodePositions;
+  }, [structureIndex]);
 
-  const connections = [];
-  for (let i = 0; i < nodeCount; i++) {
-    const connectionCount = 2 + Math.floor(Math.random() * 2);
-    const connectedIndices = new Set();
-
-    while (connectedIndices.size < connectionCount) {
-      const targetIndex = Math.floor(Math.random() * nodeCount);
-      if (targetIndex !== i) {
-        connectedIndices.add(targetIndex);
+  // Generate fixed connections
+  const connections = useMemo(() => {
+    const conns = [];
+    const nodeCount = nodes.length;
+    
+    for (let i = 0; i < nodeCount; i++) {
+      // Connect to nearest neighbors
+      const distances = nodes.map((node, j) => ({
+        index: j,
+        distance: Math.hypot(
+          node[0] - nodes[i][0],
+          node[1] - nodes[i][1],
+          node[2] - nodes[i][2]
+        ),
+      }));
+      
+      distances.sort((a, b) => a.distance - b.distance);
+      
+      // Connect to 3 nearest neighbors
+      for (let j = 1; j <= 3 && j < distances.length; j++) {
+        const targetIndex = distances[j].index;
+        if (i < targetIndex) { // Avoid duplicate connections
+          conns.push([i, targetIndex]);
+        }
       }
     }
-
-    connectedIndices.forEach((targetIndex) => {
-      connections.push([i, targetIndex]);
-    });
-  }
+    return conns;
+  }, [nodes]);
 
   return (
     <group position={position}>
-      {nodes.current.map((pos, i) => (
-        <AnimatedNeuralNode key={i} position={pos} color={color} />
+      {nodes.map((pos, i) => (
+        <AnimatedNeuralNode 
+          key={i} 
+          position={pos} 
+          color={color}
+          delay={i * 0.1}
+        />
       ))}
 
       {connections.map(([start, end], i) => (
         <Line
           key={i}
-          points={[nodes.current[start], nodes.current[end]]}
+          points={[nodes[start], nodes[end]]}
           color={color}
-          lineWidth={1}
+          lineWidth={1.5}
           transparent
-          opacity={0.6}
+          opacity={0.4}
           toneMapped={false}
         />
       ))}
@@ -335,100 +410,221 @@ function NeuralStructure({
 }
 
 export default function Home() {
-  const structures = [];
   const colors = [
-    "#00faff",
-    "#00d9ff",
-    "#00bfff",
-    "#1e90ff",
-    "#007fff",
-    "#4dffff",
+    "#00faff", // Cyan
+    "#00d9ff", // Light blue
+    "#00bfff", // Sky blue
+    "#1e90ff", // Dodger blue
+    "#007fff", // Azure
+    "#4dffff", // Electric cyan
   ];
 
-  // Fixed number of structures (18 as requested between 12-24)
-  const fixedStructureCount = 18;
-  
-  for (let i = 0; i < fixedStructureCount; i++) {
-    structures.push({
-      position: [
-        (Math.random() - 0.5) * 15,
-        (Math.random() - 0.5) * 15,
-        (Math.random() - 0.5) * 15,
-      ],
+  // Fixed positions covering entire viewport in 3D space
+  const structures = useMemo(() => {
+    const positions = [
+      // Top row - Front layer
+      [-8, 5, 2],
+      [-4, 6, 2],
+      [0, 5.5, 2],
+      [4, 6, 2],
+      [8, 5, 2],
+      
+      // Middle-top row
+      [-7, 3, 0],
+      [-3.5, 3.5, 0],
+      [0, 3, 0],
+      [3.5, 3.5, 0],
+      [7, 3, 0],
+      
+      // Center row
+      [-8, 0, -1],
+      [-4, 0, -1],
+      [0, 0, -1],
+      [4, 0, -1],
+      [8, 0, -1],
+      
+      // Middle-bottom row
+      [-7, -3, 0],
+      [-3.5, -3.5, 0],
+      [0, -3, 0],
+      [3.5, -3.5, 0],
+      [7, -3, 0],
+      
+      // Bottom row - Front layer
+      [-8, -5, 2],
+      [-4, -6, 2],
+      [0, -5.5, 2],
+      [4, -6, 2],
+      [8, -5, 2],
+      
+      // Back layer scattered
+      [-6, 4, -4],
+      [6, 4, -4],
+      [-6, -4, -4],
+      [6, -4, -4],
+      [0, 5, -4],
+      [0, -5, -4],
+
+     
+    ];
+
+    return positions.map((position, i) => ({
+      position,
       color: colors[i % colors.length],
-      nodeCount: 18, // Fixed node count for all structures
-    });
-  }
+      structureIndex: i,
+    }));
+  }, []);
+  function CyberGridBackground() {
+  const gridRef = useRef();
+  
+  useFrame((state) => {
+    if (gridRef.current) {
+      // Subtle movement
+      gridRef.current.position.x = Math.sin(state.clock.elapsedTime * 0.1) * 0.5;
+      gridRef.current.position.y = Math.cos(state.clock.elapsedTime * 0.08) * 0.5;
+    }
+  });
+
+  return (
+    <group ref={gridRef} position={[0, 0, -8]}>
+      {/* Main grid plane */}
+      <mesh rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[60, 60, 60, 60]} />
+        <meshBasicMaterial
+          color="#001122"
+          wireframe
+          wireframeLinewidth={1}
+          transparent
+          opacity={0.2}
+        />
+      </mesh>
+      
+      {/* Vertical grid lines */}
+      <mesh rotation={[0, 0, 0]} position={[0, 0, 0]}>
+        <planeGeometry args={[60, 60, 60, 60]} />
+        <meshBasicMaterial
+          color="#003344"
+          wireframe
+          wireframeLinewidth={1}
+          transparent
+          opacity={0.15}
+        />
+      </mesh>
+      
+      {/* Glowing data points */}
+      {Array.from({ length: 50 }).map((_, i) => (
+        <mesh
+          key={i}
+          position={[
+            (Math.random() - 0.5) * 50,
+            (Math.random() - 0.5) * 50,
+            (Math.random() - 0.5) * 10
+          ]}
+        >
+          <sphereGeometry args={[0.03, 8, 8]} />
+          <meshBasicMaterial
+            color="#00faff"
+            toneMapped={false}
+            transparent
+            opacity={0.6}
+          />
+        </mesh>
+      ))}
+    </group>
+  );
+}
 
   return (
     <div className="w-screen min-h-screen border-t border-cyan-500/20 bg-[#0b1117] overflow-y-auto">
       <Navbar/>
       
-      {/* Content Section - Now scrollable on mobile */}
+      {/* Content Section */}
       <div className="relative min-h-screen">
-        <div className="absolute inset-0 flex md:left-10 items-center justify-center z-10 pointer-events-none">
+        <div className="absolute inset-0 flex md:left-10 items-center justify-center z-10 pointer-events-none pt-20">
           <Glow />
           <motion.div
-            initial={{ opacity: 0, scale: 0.9 }}
-            animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 1, ease: "easeOut" }}
-            className="px-8 py-6 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 shadow-lg text-center pointer-events-auto mx-4"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 1.5, ease: "easeOut", delay: 0.5 }}
+            className="px-8 py-6 rounded-2xl bg-slate-900/40 backdrop-blur-xl border border-cyan-500/30 shadow-2xl text-center pointer-events-auto mx-4 max-w-4xl"
           >
-            <motion.h1
-              initial={{ opacity: 0, y: -20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ duration: 1, ease: "easeOut" }}
-              className="text-4xl md:text-8xl font-bold text-cyan-200 drop-shadow-[0_0_15px_#00faff] special-font"
+            <motion.div
+              initial="hidden"
+              animate="visible"
+              variants={{
+                hidden: { opacity: 0 },
+                visible: {
+                  opacity: 1,
+                  transition: {
+                    staggerChildren: 0.3,
+                    delayChildren: 0.2
+                  }
+                }
+              }}
             >
-              <b>MACHINE LEARNING FOR EVERYONE</b> (<b>ML4E</b>)
-            </motion.h1>
+              <motion.h1
+                variants={{
+                  hidden: { opacity: 0, y: -20 },
+                  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
+                }}
+                className="text-3xl md:text-7xl font-bold text-cyan-200 drop-shadow-[0_0_20px_#00faff] mb-4 special-font"
+                style={{ fontFamily: "Orbitron, sans-serif" }}
+              >
+                <b>MACHINE LEARNING FOR EVERYONE</b>
+              </motion.h1>
+              
+              <motion.div
+                variants={{
+                  hidden: { opacity: 0, scale: 0.9 },
+                  visible: { opacity: 1, scale: 1, transition: { duration: 0.8, ease: "easeOut" } }
+                }}
+                className="text-2xl md:text-5xl font-bold text-cyan-300 drop-shadow-[0_0_15px_#00d9ff] mb-4"
+                style={{ fontFamily: "Orbitron, sans-serif" }}
+              >
+                (ML4E)
+              </motion.div>
 
-            <motion.p
-              initial={{ opacity: 0, y: 20 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.5, duration: 1, ease: "easeOut" }}
-              className="mt-2 text-lg md:text-2xl text-blue-300 drop-shadow-[0_0_10px_#00d9ff]"
-              style={{ fontFamily: "Roboto, sans-serif" }}
-            >
-              <ReactTyped
-                strings={["THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA"]}
-                typeSpeed={50}
-                backSpeed={30}
-                backDelay={1500}
-                loop={false} 
-                showCursor={true} 
-              />
-            </motion.p>
+              <motion.p
+                variants={{
+                  hidden: { opacity: 0, y: 20 },
+                  visible: { opacity: 1, y: 0, transition: { duration: 0.8, ease: "easeOut" } }
+                }}
+                className="mt-2 text-base md:text-xl text-blue-300 drop-shadow-[0_0_10px_#00d9ff]"
+                style={{ fontFamily: "Roboto, sans-serif" }}
+              >
+                THE OFFICIAL MACHINE LEARNING CLUB OF NIT ROURKELA
+              </motion.p>
+            </motion.div>
           </motion.div>
         </div>
 
-        {/* Canvas with fixed height and proper z-index */}
+        {/* 3D Canvas */}
         <div className="fixed inset-0 z-0">
-          <Canvas camera={{ position: [0, 0, 10], fov: 30 }}>
+          <Canvas camera={{ position: [0, 0, 15], fov: 60 }}>
             <color attach="background" args={["#000000"]} />
-            <ambientLight intensity={0.3} />
-            <pointLight position={[10, 10, 10]} intensity={2} />
+            <CyberGridBackground />
+            <ambientLight intensity={0.5} />
+            <pointLight position={[10, 10, 10]} intensity={1.5} />
+            <pointLight position={[-10, -10, -10]} intensity={0.8} color="#00faff" />
 
             {structures.map((props, i) => (
               <NeuralStructure key={i} {...props} />
             ))}
 
             <OrbitControls
-              enableZoom={false} // Disabled zoom completely
-              autoRotate={false} // Disabled auto rotation
+              enableZoom={false}
+              autoRotate={false}
               enablePan={false}
-              enableRotate={window.innerWidth > 768}
-              minDistance={8} // Prevent zoom out
-              maxDistance={12} // Prevent zoom in
-              touches={{
-                ONE: null,
-                TWO: null
-              }}
+              enableRotate={false}
+              minPolarAngle={Math.PI / 2}
+              maxPolarAngle={Math.PI / 2}
+              minDistance={10}
+              maxDistance={14}
             />
 
             <EffectComposer>
               <Bloom
-                intensity={2.5}
+                intensity={2}
                 kernelSize={3}
                 luminanceThreshold={0.1}
                 luminanceSmoothing={0.9}
@@ -436,9 +632,6 @@ export default function Home() {
             </EffectComposer>
           </Canvas>
         </div>
-
-        {/* Add some scrollable content to demonstrate scrolling */}
-      
       </div>
     </div>
   );
diff --git a/src/app/components/Navbar.jsx b/src/app/components/Navbar.jsx
index 5776cf4..1b40a9c 100644
--- a/src/app/components/Navbar.jsx
+++ b/src/app/components/Navbar.jsx
@@ -51,7 +51,7 @@ const DIRECT_LINKS = {
   Projects: "/projects",
   Achievements: "/achievements",
   Events: "/events",
-  Contact: "/contact",
+  Contact: "#contact",
 };
 
 export default function Navbar() {
diff --git a/src/app/globals.css b/src/app/globals.css
index 206accb..5b8fc67 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -72,3 +72,6 @@ body {
 .pointer-events-none > .breath {
   animation: soft-breath 5.5s ease-in-out infinite;
 }
+html {
+  scroll-behavior: smooth;
+}
\ No newline at end of file
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4a4d176..76e9b11 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { roboto,orbitron } from "./font";
+import Footer from "./components/Footer";
 
 
 const geistSans = Geist({
@@ -30,6 +31,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} ${roboto.variable} ${orbitron.variable} antialiased`}
       >
         {children}
+        <Footer/>
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index bebfa14..fa31ff9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -182,7 +182,6 @@ export default function App() {
         {showHome && (
           <>
             <Home />
-            <Footer />
           </>
         )}
       </div>
diff --git a/src/app/projects/page.tsx b/src/app/projects/page.tsx
index ae14542..1d95bb0 100644
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -7,7 +7,6 @@ import { Orbitron, JetBrains_Mono } from "next/font/google";
 import { FaGithub } from "react-icons/fa";
 import { FiArrowUpRight } from "react-icons/fi";
 import NeuralBackground from "@/app/components/NeuralBackground";
-import { TypeAnimation } from "react-type-animation";
 import { motion, AnimatePresence } from "framer-motion"; 
 import DescriptionModal from "@/app/components/DescriptionModal";
 import Navbar from "../components/Navbar";
@@ -41,6 +40,8 @@ type MenuItem = {
   description: string;
 };
 
+type AnimationType = "fastTyping" | "fadeIn" | "staggeredFade";
+
 const DUMMY_PROJECTS: Project[] = [];
 
 const cardThemes = [
@@ -115,6 +116,97 @@ const truncateDescription = (description?: string, wordLimit: number = 40): { tr
   };
 };
 
+// === OPTION 1: Fade-in Typing Animation (Very Fast) ===
+const FastTypingText = ({ text, className = "", delay = 0 }: { text: string, className?: string, delay?: number }) => {
+  const [displayedText, setDisplayedText] = useState("");
+  
+  useEffect(() => {
+    if (!text) return;
+    
+    const timer = setTimeout(() => {
+      // Fast typing effect - shows all text almost instantly with slight character-by-character feel
+      let currentIndex = 0;
+      const speed = 10; // Very fast (lower = faster)
+      
+      const typeCharacter = () => {
+        if (currentIndex <= text.length) {
+          setDisplayedText(text.substring(0, currentIndex));
+          currentIndex++;
+          setTimeout(typeCharacter, speed);
+        }
+      };
+      
+      typeCharacter();
+    }, delay * 1000);
+    
+    return () => clearTimeout(timer);
+  }, [text, delay]);
+  
+  return <span className={className}>{displayedText}</span>;
+};
+
+// === OPTION 2: Simple Fade In Animation ===
+const FadeInText = ({ text, className = "", delay = 0 }: { text: string, className?: string, delay?: number }) => {
+  return (
+    <motion.span
+      className={className}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      transition={{ duration: 0.3, delay: delay, ease: "easeOut" }}
+    >
+      {text}
+    </motion.span>
+  );
+};
+
+// === OPTION 3: Staggered Fade In (Character by Character) ===
+const StaggeredFadeText = ({ text, className = "", delay = 0 }: { text: string, className?: string, delay?: number }) => {
+  const characters = text.split('');
+  
+  return (
+    <span className={className}>
+      {characters.map((char, index) => (
+        <motion.span
+          key={index}
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ 
+            duration: 0.05, 
+            delay: delay + (index * 0.01), // Very fast staggered effect
+            ease: "easeOut" 
+          }}
+        >
+          {char}
+        </motion.span>
+      ))}
+    </span>
+  );
+};
+
+// === ANIMATED TEXT COMPONENT (Handles all animation types) ===
+const AnimatedText = ({ 
+  text, 
+  className = "", 
+  delay = 0, 
+  animationType = "fastTyping" 
+}: { 
+  text: string, 
+  className?: string, 
+  delay?: number,
+  animationType?: AnimationType
+}) => {
+  if (animationType === "fastTyping") {
+    return <FastTypingText text={text} className={className} delay={delay} />;
+  } else if (animationType === "fadeIn") {
+    return <FadeInText text={text} className={className} delay={delay} />;
+  } else if (animationType === "staggeredFade") {
+    return <StaggeredFadeText text={text} className={className} delay={delay} />;
+  }
+  
+  // Default fallback
+  return <FadeInText text={text} className={className} delay={delay} />;
+};
+
 // === MAIN COMPONENT ===
 export default function ViewProjectsPage() {
   const [projects, setProjects] = useState<Project[]>([]);
@@ -123,6 +215,9 @@ export default function ViewProjectsPage() {
   const [activeIndex, setActiveIndex] = useState(0);
   const [selectedProject, setSelectedProject] = useState<Project | null>(null);
   const [expandedDescriptions, setExpandedDescriptions] = useState<Set<string>>(new Set());
+  
+  // Animation type - choose one
+  const animationType: AnimationType = "fadeIn";
 
   // === FETCH PROJECTS FROM BACKEND ===
   useEffect(() => {
@@ -243,31 +338,30 @@ export default function ViewProjectsPage() {
                   transition={{ duration: 0.8, delay: 0.4 }}
                   viewport={{ once: true }}
                 >
-                  {/* === PROJECT TITLE - Typing Effect === */}
+                  {/* === PROJECT TITLE - Fast Animation === */}
                   <motion.div
                     className="w-full text-center"
                     initial={{ opacity: 0 }}
                     whileInView={{ opacity: 1 }}
-                    transition={{ duration: 0.2, delay: 0.5 }}
+                    transition={{ duration: 0.1, delay: 0.3 }}
                     viewport={{ once: true }}
                   >
-                    <TypeAnimation
-                      sequence={[project.name || "Untitled Project"]}
-                      wrapper="h2"
-                      speed={90}
-                      className={`text-3xl font-bold text-white font-[Orbitron] `}
-                      cursor={false}
+                    <AnimatedText
+                      text={project.name || "Untitled Project"}
+                      className={`text-3xl font-bold text-white font-[Orbitron]`}
+                      delay={0.3}
+                      animationType={animationType}
                     />
                   </motion.div>
 
-                  {/* === DESCRIPTION BOX - Typing Effect === */}
+                  {/* === DESCRIPTION BOX - Fast Animation === */}
                   {project.description && (
                     <motion.div
                       className="bg-slate-800/60 backdrop-blur-md rounded-lg border border-slate-700 w-full cursor-pointer hover:border-cyan-600/50 transition-all overflow-hidden"
                       onClick={() => setSelectedProject(project)}
                       initial={{ opacity: 0, y: 10 }}
                       whileInView={{ opacity: 1, y: 0 }}
-                      transition={{ duration: 0.6, delay: 0.6 }}
+                      transition={{ duration: 0.3, delay: 0.3 }}
                       viewport={{ once: true }}
                     >
                       {/* Window Header Style Dots */}
@@ -277,19 +371,13 @@ export default function ViewProjectsPage() {
                         <span className="block w-3 h-3 rounded-full bg-green-500"></span>
                       </div>
 
-                      {/* Typing Animation Description */}
+                      {/* Animated Description */}
                       <div className="p-6">
-                        <TypeAnimation
-                          sequence={[
-                            isDescriptionExpanded ? project.description : truncatedDesc,
-                            500
-                          ]}
-                          wrapper="p"
-                          speed={30}
+                        <AnimatedText
+                          text={isDescriptionExpanded ? project.description : truncatedDesc}
                           className={`text-gray-300 text-base ${jetbrainsMono.className}`}
-                          style={{ whiteSpace: "pre-line" }}
-                          repeat={0}
-                          cursor={false}
+                          delay={0.4}
+                          animationType={animationType}
                         />
                         
                         {/* View More for Description */}
@@ -322,20 +410,31 @@ export default function ViewProjectsPage() {
                       </p>
                       <div className="flex flex-wrap gap-2 justify-start">
                         {displayedTech.map((tech, techIndex) => (
-                          <span
+                          <motion.span
                             key={techIndex}
                             className="px-3 py-1 bg-slate-700/50 rounded-full text-sm text-cyan-200 border border-cyan-500/30"
+                            initial={{ opacity: 0, scale: 0.8 }}
+                            whileInView={{ opacity: 1, scale: 1 }}
+                            transition={{ 
+                              duration: 0.3, 
+                              delay: 0.7 + (techIndex * 0.05) 
+                            }}
+                            viewport={{ once: true }}
                           >
                             {tech}
-                          </span>
+                          </motion.span>
                         ))}
                         {remainingTech > 0 && (
-                          <button
+                          <motion.button
                             onClick={() => setSelectedProject(project)}
                             className="px-3 py-1 bg-cyan-600/20 rounded-full text-sm text-cyan-300 border border-cyan-400/30 hover:bg-cyan-600/30 transition-colors"
+                            initial={{ opacity: 0, scale: 0.8 }}
+                            whileInView={{ opacity: 1, scale: 1 }}
+                            transition={{ duration: 0.3, delay: 0.9 }}
+                            viewport={{ once: true }}
                           >
                             +{remainingTech} more
-                          </button>
+                          </motion.button>
                         )}
                       </div>
                     </motion.div>
@@ -352,27 +451,35 @@ export default function ViewProjectsPage() {
                     viewport={{ once: true }}
                   >
                     {project.deployedLink && (
-                      <a
+                      <motion.a
                         href={project.deployedLink}
                         target="_blank"
                         rel="noopener noreferrer"
                         style={{ color: theme.accent }}
                         className="flex items-center gap-2 text-lg hover:underline"
+                        initial={{ opacity: 0, x: -10 }}
+                        whileInView={{ opacity: 1, x: 0 }}
+                        transition={{ duration: 0.3, delay: 0.9 }}
+                        viewport={{ once: true }}
                       >
                         View Project
                         <FiArrowUpRight />
-                      </a>
+                      </motion.a>
                     )}
                     {project.githubLink && (
-                      <a
+                      <motion.a
                         href={project.githubLink}
                         target="_blank"
                         rel="noopener noreferrer"
                         className="text-2xl hover:scale-110 transition-transform"
                         style={{ color: theme.accent }}
+                        initial={{ opacity: 0, scale: 0.8 }}
+                        whileInView={{ opacity: 1, scale: 1 }}
+                        transition={{ duration: 0.3, delay: 1.0 }}
+                        viewport={{ once: true }}
                       >
                         <FaGithub />
-                      </a>
+                      </motion.a>
                     )}
                   </motion.div>
                 </motion.div>
@@ -382,7 +489,7 @@ export default function ViewProjectsPage() {
         </div>
       </div>
 
-      {/* === DESCRIPTION MODAL - Updated to include Tech Stack === */}
+      {/* === DESCRIPTION MODAL === */}
       <AnimatePresence>
         {selectedProject && (
           <DescriptionModal
diff --git a/src/lib/achievementsDB.js b/src/lib/achievementsDB.js
index 50717b4..9185c3e 100644
--- a/src/lib/achievementsDB.js
+++ b/src/lib/achievementsDB.js
@@ -24,6 +24,7 @@ const connectToAchievementsDB = async () => {
     await mongoose.connect(process.env.MongoURL, {
       dbName: "achievementDB", 
     });
+    
     console.log("✅ Connected to Achievements MongoDB");
   } catch (error) {
     console.error("❌ MongoDB Achievements connection error:", error);
diff --git a/tsconfig.json b/tsconfig.json
index c7f3597..c4081af 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -11,7 +15,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -19,9 +23,21 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/components/Home.jsx", "src/app/components/Navbar.jsx"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "src/app/components/Home.jsx",
+    "src/app/components/Navbar.jsx",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }