Updated UI

src/app/(auth)/onboarding/_components/PageWrapper.tsx

@@ -20,23 +20,18 @@ function PageWrapper({ children }: PageWrapperProps) {
         return () => clearTimeout(timer)
     }, [])
 
-    if (isLoading) {
-        return (
-            <div className="fixed inset-0 z-50 flex items-center justify-center">
-                <div className="fixed -z-10 h-full w-screen">
-                    <DemoOne />
-                </div>
-                <Loader />
-            </div>
-        )
-    }
-
     return (
         <>
             <div className="fixed -z-10 h-full w-screen">
                 <DemoOne />
             </div>
-            {children}
+            {isLoading ? (
+                <div className="fixed inset-0 z-50 flex items-center justify-center">
+                    <Loader />
+                </div>
+            ) : (
+                children
+            )}
         </>
     )
 }

src/app/(user)/home/page.tsx

@@ -1,5 +1,4 @@
 import ProjectCard from "@/components/ProjectCard";
-import DemoOne from "@/components/ShaderBackground";
 import CollapsibleHeader from "@/components/CollapseHeadbar"; // Ensure this path is correct
 
 export default function Home() {
@@ -9,9 +8,6 @@ export default function Home() {
         title="Projects"
         subheading="Projects the community is building"
       />
-      <div className="fixed -z-10 h-full w-screen">
-        <DemoOne />
-      </div>
       <main className="relative z-10 mt-40 flex min-h-screen flex-col">
         <div className="p-4 md:p-12">
           <ProjectCard />

src/app/(user)/profile/[profileId]/_components/ProfileContent.tsx

@@ -25,6 +25,7 @@ import { signOut, useSession } from "next-auth/react";
 import { getUserContributions } from "../../../../../../actions/applications";
 import { Project, Profile, Contribution } from "@/types/profile";
 import Loader from "@/components/Loader";
+import { getSkillIcon } from "@/lib/skillIcons";
 
 interface ProfileContentProps {
   profileId?: string;
@@ -251,21 +252,25 @@ function ProfileContent({ profileId }: ProfileContentProps) {
                         Skills
                       </h3>
                       <div className="flex flex-wrap gap-2">
-                        {profile.skills.map((skill, index) => (
-                          <motion.div
-                            key={skill}
-                            initial={{ opacity: 0, scale: 0 }}
-                            animate={{ opacity: 1, scale: 1 }}
-                            transition={{ delay: 0.8 + index * 0.05 }}
-                          >
-                            <Badge
-                              variant="secondary"
-                              className="bg-primary/20 text-foreground border border-border/20 backdrop-blur-sm"
+                        {profile.skills.map((skill, index) => {
+                          const Icon = getSkillIcon(skill);
+                          return (
+                            <motion.div
+                              key={skill}
+                              initial={{ opacity: 0, scale: 0 }}
+                              animate={{ opacity: 1, scale: 1 }}
+                              transition={{ delay: 0.8 + index * 0.05 }}
                             >
-                              {skill}
-                            </Badge>
-                          </motion.div>
-                        ))}
+                              <Badge
+                                variant="secondary"
+                                className="bg-primary/20 text-foreground border border-border/20 backdrop-blur-sm flex items-center gap-2"
+                              >
+                                {Icon && <Icon className="w-4 h-4" />}
+                                {skill}
+                              </Badge>
+                            </motion.div>
+                          );
+                        })}
                       </div>
                     </motion.div>
                   )}

src/app/(user)/profile/[profileId]/_components/ProfilePageWrapper.tsx

@@ -1,7 +1,6 @@
 "use client"
 
 import { useState, useEffect } from "react"
-import DemoOne from "@/components/ShaderBackground"
 import Loader from "@/components/Loader"
 import ProfileContent from "./ProfileContent";
 
@@ -24,21 +23,11 @@ function ProfilePageWrapper({ profileId }: ProfilePageWrapperProps) {
     return (
       <div className="fixed inset-0 z-50 flex items-center justify-center">
         <Loader />
-        <div className="fixed -z-10 h-full w-screen">
-            <DemoOne />
-        </div>
       </div>
     )
   }
 
-  return (
-    <>
-      <div className="fixed -z-10 h-full w-screen">
-        <DemoOne />
-      </div>
-      <ProfileContent profileId={profileId} />
-    </>
-  )
+  return <ProfileContent profileId={profileId} />
 }
 
 export default ProfilePageWrapper;

src/app/(user)/profile/[profileId]/test/page.tsx

@@ -1,4 +1,3 @@
-import DemoOne from "@/components/ShaderBackground";
 import { ExternalLink, Github, Calendar, Users } from "lucide-react";
 import { notFound } from "next/navigation";
 import Link from "next/link";
@@ -141,10 +140,6 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
 
   return (
     <>
-      <div className="fixed -z-10 h-full w-screen">
-        <DemoOne />
-      </div>
-
       <main className="relative min-h-screen pb-20">
         <header className="border-b border-border bg-card/80 backdrop-blur-md sticky top-0 z-10">
           <div className="w-full px-4 py-4 sm:px-6 lg:px-8">

src/app/(user)/profile/applications/page.tsx

@@ -1,5 +1,4 @@
 // app/(user)/profile/applications/page.tsx
-import DemoOne from "@/components/ShaderBackground";
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/lib/authOptions";
 import { redirect } from "next/navigation";
@@ -31,10 +30,6 @@ export default async function MyApplicationsPage() {
 
     return (
         <>
-            <div className="fixed -z-10 h-full w-screen">
-                <DemoOne />
-            </div>
-
             <main className="relative z-0 min-h-screen pb-20">
                 <div className="mx-auto max-w-6xl px-4 py-12 sm:px-6 lg:px-8">
                     <div className="mb-8">

src/app/(user)/projects/[id]/applications/page.tsx

@@ -1,4 +1,4 @@
-import DemoOne from "@/components/ShaderBackground";
+
 import { getServerSession } from "next-auth";
 import { authOptions } from "@/lib/authOptions";
 import { redirect } from "next/navigation";
@@ -35,10 +35,6 @@ export default async function ApplicationsPage({ params }: ApplicationsPageProps
 
     return (
         <>
-            <div className="fixed -z-10 h-full w-screen">
-                <DemoOne />
-            </div>
-
             <main className="relative z-0 min-h-screen pb-20">
                 <header className="border-b border-border bg-card/80 backdrop-blur-md sticky top-0 z-10">
                     <div className="w-full px-4 py-4 sm:px-6 lg:px-8 flex justify-between items-center">

src/app/(user)/projects/[id]/page.tsx

@@ -1,5 +1,4 @@
 import { Metadata } from "next";
-import DemoOne from "@/components/ShaderBackground";
 import { ExternalLink, Github, Calendar, Users } from "lucide-react";
 import { notFound } from "next/navigation";
 import Link from "next/link";
@@ -180,10 +179,6 @@ export default async function ProjectPage({ params }: ProjectPageProps) {
 
   return (
     <>
-      <div className="fixed -z-10 h-full w-screen">
-        <DemoOne />
-      </div>
-
       <main className="relative min-h-screen pb-20">
         <header className="border-b border-border bg-card/80 backdrop-blur-md sticky top-0 z-10">
           <div className="w-full px-4 py-4 sm:px-6 lg:px-8">

src/app/contact/page.tsx

@@ -6,7 +6,6 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { z } from "zod";
 import { toast } from "sonner";
 import { Loader2, Mail, User, MessageSquare, Send } from "lucide-react";
-import DemoOne from "@/components/ShaderBackground";
 import { cn } from "@/lib/utils";
 import { sendContactEmail } from "../../../actions/contact";
 
@@ -59,9 +58,6 @@ export default function Contact() {
 
     return (
         <>
-            <div className="fixed -z-10 h-full w-screen">
-                <DemoOne />
-            </div>
             <main className="relative mb-20 z-10 min-h-screen flex flex-col items-center justify-center px-4 py-20">
                 <div className="w-full max-w-2xl">
                     <div className="text-center mb-12 animate-in fade-in slide-in-from-bottom-4 duration-700">

src/components/ClientLayoutShell.tsx

@@ -4,18 +4,19 @@ import { ProjectStackDock } from "@/components/ProjectStackNavbar";
 import { CreateProjectModal } from "@/components/CreateProjectModal";
 import { LoginModal } from "@/components/LoginModal";
 import { useState, useEffect } from "react";
-import { useSession } from "next-auth/react"; 
+import { useSession } from "next-auth/react";
 import { Toaster } from "sonner";
+import DemoOne from "@/components/ShaderBackground";
 
 type ClientLayoutShellProps = {
   children: React.ReactNode;
 };
 
 export function ClientLayoutShell({ children }: ClientLayoutShellProps) {
   const pathname = usePathname();
-  const { data: session } = useSession(); 
+  const { data: session } = useSession();
   const isEntryPage = pathname === "/" || pathname === "/onboarding";
-  
+
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [isLoginModalOpen, setIsLoginModalOpen] = useState(false);
   const [profileId, setProfileId] = useState<string | undefined>();
@@ -24,13 +25,13 @@ export function ClientLayoutShell({ children }: ClientLayoutShellProps) {
     const fetchProfileId = async () => {
       if (session?.user?.email) {
         try {
-          const response = await fetch('/api/profile');
+          const response = await fetch("/api/profile");
           if (response.ok) {
             const data = await response.json();
             setProfileId(data.profileId);
           }
         } catch (error) {
-          console.error('Error fetching profile:', error);
+          console.error("Error fetching profile:", error);
         }
       } else {
         setProfileId(undefined);
@@ -55,22 +56,27 @@ export function ClientLayoutShell({ children }: ClientLayoutShellProps) {
 
   return (
     <>
-      <Toaster theme="system" richColors /> 
+      {!isEntryPage && (
+        <div className="fixed -z-10 h-full w-screen">
+          <DemoOne />
+        </div>
+      )}
+      <Toaster theme="system" richColors />
       {children}
       {!isEntryPage && (
-        <ProjectStackDock 
-          onOpenCreateModal={handleCreateClick} 
-          profileId={profileId} 
+        <ProjectStackDock
+          onOpenCreateModal={handleCreateClick}
+          profileId={profileId}
           userImage={session?.user?.image}
-        /> 
+        />
       )}
-      <CreateProjectModal 
-        open={isCreateModalOpen} 
-        onClose={() => setIsCreateModalOpen(false)} 
+      <CreateProjectModal
+        open={isCreateModalOpen}
+        onClose={() => setIsCreateModalOpen(false)}
       />
-      <LoginModal 
-        open={isLoginModalOpen} 
-        onClose={() => setIsLoginModalOpen(false)} 
+      <LoginModal
+        open={isLoginModalOpen}
+        onClose={() => setIsLoginModalOpen(false)}
       />
     </>
   );