projectspagebg

2025-10-27 12:37:36 +05:30
parent 7cb13ccba8
commit 0914edee60
2 changed files with 186 additions and 131 deletions
--- a/src/app/projects/page.tsx
+++ b/src/app/projects/page.tsx
@@ -5,12 +5,37 @@ import Link from "next/link";
 import Image from "next/image";
 import { Orbitron } from "next/font/google";
 import { FaGithub } from "react-icons/fa";
+import NeuralBackground from "@/app/components/NeuralBackground"; 

 const orbitron = Orbitron({
  subsets: ["latin"],
  weight: ["400", "700"],
 });

+// --- PLACEHOLDER TYPES & DATA ---
+// These are needed for the code to run
+type Project = {
+  _id: string;
+  name: string;
+  imageUrl?: string;
+  techStack?: string;
+  description?: string;
+  deployedLink?: string;
+  githubLink?: string;
+};
+
+type MenuItem = {
+  image: string;
+  link: string;
+  title: string;
+  description: string;
+};
+
+// Dummy data for fallback
+const DUMMY_PROJECTS: Project[] = [];
+// --- END PLACEHOLDERS ---
+
+// 1. REVERTED TO YOUR SINGLE-THEME ARRAY
 const cardThemes = [
  {
    bg: "from-[#0F172A] to-[#1E293B]",
@@ -99,83 +124,91 @@ export default function ViewProjectsPage() {
  if (loading) return <LoadingScreen />;

  return (
-    <div className="min-h-screen w-full bg-gradient-to-b from-[#050816] via-[#0A0F1E] to-[#0F172A] py-16 px-4 sm:px-8">
-      <h1
-        className={`text-4xl sm:text-5xl font-bold text-center text-cyan-400 mb-12 ${orbitron.className}`}
-      >
-        PROJECTS
-      </h1>
+    <div className="relative min-h-screen w-full bg-gradient-to-b from-[#050816] via-[#0A0F1E] to-[#0F172A] py-16 px-4 sm:px-8">
+      
+      <NeuralBackground /> {/* <-- This is kept */}

-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
-        {projects.map((project, index) => {
-          const theme = cardThemes[index % cardThemes.length];
-          return (
-            <div
-              key={project._id || index}
-              className={`rounded-xl overflow-hidden border border-cyan-500/20 shadow-[0_0_25px_rgba(0,255,255,0.1)] hover:shadow-[0_0_35px_rgba(0,255,255,0.25)] transition duration-300 bg-gradient-to-br ${theme.bg}`}
-            >
-              <div className={`${theme.headerBg} py-4 px-6 text-center border-b border-cyan-400/30`}>
-                <h2
-                  className={`text-2xl font-bold text-white tracking-wide ${orbitron.className}`}
+      <div className="relative z-10">
+        <h1
+          className={`text-4xl sm:text-5xl font-bold text-center text-cyan-400 mb-12 ${orbitron.className}`}
+        >
+          PROJECTS
+        </h1>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
+          {projects.map((project, index) => {
+            const theme = cardThemes[index % cardThemes.length]; 
+            return (
+              <div
+                key={project._id || index}
+                //  HOVER EFFEC
+                className={`rounded-xl overflow-hidden border border-cyan-500/20 shadow-[0_0_25px_rgba(0,255,255,0.1)] hover:shadow-[0_0_35px_rgba(0,255,255,0.25)] transform transition-all duration-300 hover:-translate-y-2 bg-gradient-to-br ${theme.bg}`}
+              >
+                <div
+                  className={`${theme.headerBg} py-4 px-6 text-center border-b border-cyan-400/30`}
                >
-                  {project.name}
-                </h2>
-              </div>
-
-              {project.imageUrl && (
-                <div className="relative w-full h-40 sm:h-48 border-b border-cyan-400/20">
-                  <Image
-                    src={project.imageUrl}
-                    alt={project.name}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 768px) 100vw, 33vw"
-                    priority={false}
-                  />
+                  <h2
+                    className={`text-2xl font-bold text-white tracking-wide ${orbitron.className}`}
+                  >
+                    {project.name}
+                  </h2>
                </div>
-              )}

-              <div className="p-6 text-white flex flex-col gap-3">
-                <p className="text-gray-300">
-                  <strong>Tech Stack:</strong> {project.techStack}
-                </p>
-
-                {project.description && (
-                  <p className="text-gray-400 text-sm italic">{project.description}</p>
+                {project.imageUrl && (
+                  <div className="relative w-full h-40 sm:h-48 border-b border-cyan-400/20">
+                    <Image
+                      src={project.imageUrl}
+                      alt={project.name}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 768px) 100vw, 33vw"
+                      priority={false}
+                    />
+                  </div>
                )}

-                <div className="flex items-center justify-between mt-4">
-                  {project.deployedLink && (
-                    <a
-                      href={project.deployedLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ color: theme.accent }}
-                      className="underline hover:opacity-80 transition duration-200"
-                    >
-                      View Project
-                    </a>
+                <div className="p-6 text-white flex flex-col gap-3">
+                  <p className="text-gray-300">
+                    <strong>Tech Stack:</strong> {project.techStack}
+                  </p>
+
+                  {project.description && (
+                    <p className="text-gray-400 text-sm italic">
+                      {project.description}
+                    </p>
                  )}

-                  {project.githubLink && (
-                    <a
-                      href={project.githubLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-2xl hover:scale-110 transition-transform"
-                      style={{ color: theme.accent }}
-                    >
-                      <FaGithub />
-                    </a>
-                  )}
+                  <div className="flex items-center justify-between mt-4">
+                    {project.deployedLink && (
+                      <a
+                        href={project.deployedLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: theme.accent }}
+                        className="underline hover:opacity-80 transition duration-200"
+                      >
+                        View Project
+                      </a>
+                    )}
+
+                    {project.githubLink && (
+                      <a
+                        href={project.githubLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-2xl hover:scale-110 transition-transform"
+                        style={{ color: theme.accent }}
+                      >
+                        <FaGithub />
+                      </a>
+                    )}
+                  </div>
                </div>
              </div>
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
      </div>
    </div>
  );
-};
-
-export default ProjectsPage;
+}
--- a/src/app/projects_legacy/page.tsx
+++ b/src/app/projects_legacy/page.tsx
@@ -4,6 +4,7 @@ import React, { useEffect, useState } from "react";
 import Image from "next/image";
 import { Orbitron } from "next/font/google";
 import { FaGithub } from "react-icons/fa";
+import NeuralBackground from "@/app/components/NeuralBackground"; // <-- 1. ADD THIS IMPORT

 const orbitron = Orbitron({
  subsets: ["latin"],
@@ -67,80 +68,101 @@ const ProjectsPage: React.FC = () => {
  }

  return (
-    <div className="min-h-screen w-full bg-gradient-to-b from-[#050816] via-[#0A0F1E] to-[#0F172A] py-16 px-4 sm:px-8">
-      <h1
-        className={`text-4xl sm:text-5xl font-bold text-center text-cyan-400 mb-12 ${orbitron.className}`}
-      >
-        PROJECTS
-      </h1>
+    <div className="relative min-h-screen w-full overflow-hidden">
+      {/* Dark blue background */}
+      <div className="absolute inset-0 bg-gradient-to-b from-[#020617] via-[#0A0F1E] to-[#0F172A]" />

-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
-        {projects.map((project, index) => {
-          const theme = cardThemes[index % cardThemes.length];
-          return (
-            <div
-              key={project._id || index}
-              className={`rounded-xl overflow-hidden border border-cyan-500/20 shadow-[0_0_25px_rgba(0,255,255,0.1)] hover:shadow-[0_0_35px_rgba(0,255,255,0.25)] transition duration-300 bg-gradient-to-br ${theme.bg}`}
-            >
-              <div className={`${theme.headerBg} py-4 px-6 text-center border-b border-cyan-400/30`}>
-                <h2
-                  className={`text-2xl font-bold text-white tracking-wide ${orbitron.className}`}
+      {/* 2. REPLACE THE OLD ANIMATED BACKGROUND... */}
+      {/* <div className="pointer-events-none absolute inset-0 overflow-hidden">
+        <div className="absolute top-[10%] left-[20%] w-[250px] h-[250px] bg-white/10 rounded-full blur-3xl animate-pulse" />
+        <div className="absolute top-[50%] left-[70%] w-[350px] h-[350px] bg-white/10 rounded-full blur-3xl animate-pulse delay-1000" />
+        <div className="absolute bottom-[10%] left-[40%] w-[200px] h-[200px] bg-white/10 rounded-full blur-3xl animate-pulse delay-500" />
+      </div> 
+      */}
+
+      {/* ...WITH THE NEW COMPONENT */}
+      <NeuralBackground />
+
+      {/* Content */}
+      <div className="relative z-10 py-16 px-4 sm:px-8">
+        <h1
+          className={`text-4xl sm:text-5xl font-bold text-center text-cyan-400 mb-12 ${orbitron.className}`}
+        >
+          PROJECTS
+        </h1>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-7xl mx-auto">
+          {projects.map((project, index) => {
+            const theme = cardThemes[index % cardThemes.length];
+            return (
+              <div
+                key={project._id || index}
+                className={`rounded-xl overflow-hidden border border-cyan-500/20 shadow-[0_0_25px_rgba(0,255,255,0.1)] bg-gradient-to-br ${theme.bg} transform transition-all duration-300 hover:-translate-y-2 hover:shadow-[0_0_40px_rgba(0,255,255,0.3)] hover:border-cyan-400/40`}
+              >
+                <div
+                  className={`${theme.headerBg} py-4 px-6 text-center border-b border-cyan-400/30`}
                >
-                  {project.name}
-                </h2>
-              </div>
-
-              {project.imageUrl && (
-                <div className="relative w-full h-40 sm:h-48 border-b border-cyan-400/20">
-                  <Image
-                    src={project.imageUrl}
-                    alt={project.name}
-                    fill
-                    className="object-cover"
-                    sizes="(max-width: 768px) 100vw, 33vw"
-                    priority={false}
-                  />
+                  <h2
+                    className={`text-2xl font-bold text-white tracking-wide ${orbitron.className}`}
+                  >
+                    {project.name}
+                  </h2>
                </div>
-              )}

-              <div className="p-6 text-white flex flex-col gap-3">
-                <p className="text-gray-300">
-                  <strong>Tech Stack:</strong> {project.techStack}
-                </p>
-
-                {project.description && (
-                  <p className="text-gray-400 text-sm italic">{project.description}</p>
+                {project.imageUrl && (
+                  <div className="relative w-full h-40 sm:h-48 border-b border-cyan-400/20">
+                    <Image
+                      src={project.imageUrl}
+                      alt={project.name}
+                      fill
+                      className="object-cover"
+                      sizes="(max-width: 768px) 100vw, 33vw"
+                      priority={false}
+                    />
+                  </div>
                )}

-                <div className="flex items-center justify-between mt-4">
-                  {project.deployedLink && (
-                    <a
-                      href={project.deployedLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      style={{ color: theme.accent }}
-                      className="underline hover:opacity-80 transition duration-200"
-                    >
-                      View Project
-                    </a>
+                <div className="p-6 text-white flex flex-col gap-3">
+                  <p className="text-gray-300">
+                    <strong>Tech Stack:</strong> {project.techStack}
+                  </p>
+
+                  {project.description && (
+                    <p className="text-gray-400 text-sm italic">
+                      {project.description}
+                    </p>
                  )}

-                  {project.githubLink && (
-                    <a
-                      href={project.githubLink}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="text-2xl hover:scale-110 transition-transform"
-                      style={{ color: theme.accent }}
-                    >
-                      <FaGithub />
-                    </a>
-                  )}
+                  <div className="flex items-center justify-between mt-4">
+                    {project.deployedLink && (
+                      <a
+                        href={project.deployedLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: theme.accent }}
+                        className="underline hover:opacity-80 transition duration-200"
+                      >
+                        View Project
+                      </a>
+                    )}
+
+                    {project.githubLink && (
+                      <a
+                        href={project.githubLink}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-2xl hover:scale-110 transition-transform"
+                        style={{ color: theme.accent }}
+                      >
+                        <FaGithub />
+                      </a>
+                    )}
+                  </div>
                </div>
              </div>
-            </div>
-          );
-        })}
+            );
+          })}
+        </div>
      </div>
    </div>
  );