Fix #1034 home page loading delay

CODE_OF_CONDUCT.md

@@ -17,17 +17,14 @@ In the interest of fostering an open and welcoming environment, we as contributo
 We expect all participants to:
 
 1. **Be Respectful:**
-
    - Treat everyone with respect and courtesy.
    - Approach disagreements constructively and considerately.
 
 2. **Be Inclusive:**
-
    - Ensure everyone feels welcome and valued.
    - Avoid discriminatory, exclusionary, or harmful language and actions.
 
 3. **Be Collaborative:**
-
    - Share knowledge and help others.
    - Focus on improving the platform and the experience for all.
 
@@ -52,11 +49,9 @@ The following behaviors are unacceptable in the DevDisplay community:
 
 - **Join DevDisplay Discord Community**: [Discord Community](https://discord.gg/chyt2UgTv5)
 - **Join DevDisplay WhatsApp Community**: [WhatsApp Community](https://chat.whatsapp.com/Dcl21sgGDIpHURESSuH0p4)
-
   - Connect with other developers and collaborate on exciting projects.
 
 - **Reach Out to the Team**:
-
   - Organization Email: [email protected]
   - Creator's Email: [email protected]
 
@@ -69,7 +64,6 @@ The following behaviors are unacceptable in the DevDisplay community:
 ---
 
 2. **Provide Details:**
-
    - Include a description of the incident, relevant links, or screenshots if possible.
 
 3. **Expect a Response:**

SECURITY.md

@@ -23,19 +23,16 @@ We take the security of DevDisplay seriously. If you discover any security vulne
 ### For Contributors
 
 1. **Code Review**
-
    - All code changes must go through peer review
    - Security-sensitive code requires additional review
    - Follow secure coding guidelines
 
 2. **Dependencies**
-
    - Keep all dependencies up to date
    - Regularly check for known vulnerabilities in dependencies
    - Use only trusted and well-maintained packages
 
 3. **Authentication & Authorization**
-
    - Use strong password policies
    - Implement proper session management
    - Follow the principle of least privilege
@@ -48,7 +45,6 @@ We take the security of DevDisplay seriously. If you discover any security vulne
 ### For Users
 
 1. **Account Security**
-
    - Use strong, unique passwords
    - Enable two-factor authentication when available
    - Keep your access tokens secure

contribution/Portfolio.md

@@ -3,27 +3,22 @@
 To add your profile on DevDisplay, follow these steps:
 
 1. **Sign Up / Log In**:
-
    - Visit the [DevDisplay website](https://www.devdisplay.com).
    - If you don't have an account, sign up by providing the required details.
    - If you already have an account, log in using your credentials.
 
 2. **Navigate to Profile Section**:
-
    - Once logged in, go to the profile section by clicking on your avatar or username at the top right corner of the page.
    - Select "Edit Profile" from the dropdown menu.
 
 3. **Fill in Profile Information**:
-
    - Complete the profile form by providing your personal information, such as your name, bio, skills, and social media links.
    - Upload a profile picture to make your profile more recognizable.
 
 4. **Save Changes**:
-
    - After filling in all the necessary information, click the "Save" button to update your profile.
 
 5. **Verify Your Profile** (Optional):
-
    - To increase your profile's credibility, you can verify your email address and link your social media accounts.
 
 6. **Explore and Connect**:

package.json

@@ -15,6 +15,7 @@
     "@testing-library/user-event": "^14.5.2",
     "canvas-confetti": "^1.9.3",
     "cobe": "^0.6.3",
+    "d3": "^7.9.0",
     "devdisplay": "file:",
     "flag": "^5.0.1",
     "framer-motion": "^12.23.12",
@@ -30,6 +31,7 @@
     "react-scripts": "5.0.1",
     "sitemap": "^8.0.0",
     "styled-components": "^6.1.15",
+    "topojson-client": "^3.1.0",
     "web-vitals": "^5.0.3",
     "yocto-queue": "^1.2.0"
   },

public/data/Bipasha1005.json

@@ -19,6 +19,6 @@
     "GitHub": "https://github.com/Bipasha1005",
     "Twitter": "https://twitter.com/Acharje4Bipasha",
     "LinkedIn": "https://www.linkedin.com/in/bipasha-acharjee-b34939253",
-    "Email": "#"
+    "Email": "[email protected]"
   }
 }

src/App.css

@@ -5,6 +5,19 @@ body {
   font-family: 'Merriweather Sans', sans-serif;
 }
 
+/* Performance optimizations for animations */
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 0.7;
+    transform: scale(1); /* Use transform for hardware acceleration */
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.02); /* Subtle scale change for visual interest */
+  }
+}
+
 /* existing styles */
 
 @media (max-width: 768px) {

src/Homepage.jsx

@@ -6,6 +6,8 @@ import Sidebar from './components/Sidebar/Sidebar';
 import ErrorPage from './components/ErrorPage/ErrorPage';
 import NoResultFound from './components/NoResultFound/NoResultFound';
 import Pagination from './components/Pagination/Pagination';
+// PERFORMANCE ADDITION: Beautiful loading screen while data loads
+import LoadingScreen from './components/LoadingScreen/LoadingScreen';
 import './App.css';
 import filenames from './ProfilesList.json';
 // import GTranslateLoader from './components/GTranslateLoader';
@@ -19,6 +21,9 @@ function App() {
   const [shuffledProfiles, setShuffledProfiles] = useState([]);
   const [loadingProfiles, setLoadingProfiles] = useState(false);
 
+  // PERFORMANCE ADDITION: Track overall page loading state for loading screen
+  const [isPageLoading, setIsPageLoading] = useState(true);
+
   const recordsPerPage = 20;
 
   const currentUrl = window.location.pathname;
@@ -50,6 +55,11 @@ function App() {
         setShuffledProfiles([]);
       }
       setLoadingProfiles(false);
+
+      // Add a minimum loading time of 2 seconds for better UX
+      setTimeout(() => {
+        setIsPageLoading(false);
+      }, 2000);
     };
 
     combineData();
@@ -147,22 +157,28 @@ function App() {
   };
 
   return currentUrl === '/' ? (
-    <div className="App flex flex-col bg-primaryColor dark:bg-secondaryColor md:flex-row">
-      <Sidebar />
-      <div className="w-full pl-5 pr-4 md:h-screen md:w-[77%] md:overflow-y-scroll md:py-7" ref={profilesRef}>
-        <Search onSearch={handleSearch} />
-        {profiles.length === 0 && searching ? <NoResultFound /> : renderProfiles()}
-        {combinedData.length > 0 && (
-          <Pagination
-            currentPage={currentPage}
-            totalPages={Math.ceil((searching ? profiles.length : shuffledProfiles.length) / recordsPerPage)}
-            onNextPage={handleNextPage}
-            onPrevPage={handlePrevPage}
-          />
-        )}
+    <>
+      {/* PERFORMANCE ENHANCEMENT: Show beautiful loading screen while data loads */}
+      {/* This prevents showing empty/broken UI during initial data fetching */}
+      {isPageLoading && <LoadingScreen />}
+
+      <div className="App flex flex-col bg-primaryColor dark:bg-secondaryColor md:flex-row">
+        <Sidebar />
+        <div className="w-full pl-5 pr-4 md:h-screen md:w-[77%] md:overflow-y-scroll md:py-7" ref={profilesRef}>
+          <Search onSearch={handleSearch} />
+          {profiles.length === 0 && searching ? <NoResultFound /> : renderProfiles()}
+          {combinedData.length > 0 && (
+            <Pagination
+              currentPage={currentPage}
+              totalPages={Math.ceil((searching ? profiles.length : shuffledProfiles.length) / recordsPerPage)}
+              onNextPage={handleNextPage}
+              onPrevPage={handlePrevPage}
+            />
+          )}
+        </div>
+        {/* <GTranslateLoader /> */}
       </div>
-      {/* <GTranslateLoader /> */}
-    </div>
+    </>
   ) : (
     <ErrorPage />
   );

src/Page/Home.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import Navbar from '../components/Navbar';
-import Globe from '../components/Globe';
+// PERFORMANCE OPTIMIZATION: Replaced direct Globe import with LazyGlobe
+// This implements code splitting to reduce initial bundle size and loading time
+import LazyGlobe from '../components/LazyGlobe';
 import { Footer } from '../components/Footer/Footer';
 import LOGO from './WordMark.png';
 // import PoweredByDevDisplay from './PoweredByDevDisplay.png';
@@ -178,7 +180,9 @@ const Hero = () => {
         {/* <div className="flex items-center justify-center">
           <CountdownTimer />
         </div> */}
-        <Globe />
+        {/* PERFORMANCE OPTIMIZATION: Using LazyGlobe instead of direct Globe import */}
+        {/* This provides code splitting, lazy loading, and better loading UX */}
+        <LazyGlobe />
       </div>
       <div className="mb-20"></div>
     </section>
@@ -321,7 +325,7 @@ const StyledDot = styled.div`
 const TechFeatures = () => {
   return (
     <section className="tech-features-section mt-[60%] max-w-[90%] px-4 py-16 text-white xs:mt-0">
-      <div className="mx-auto my-12 max-w-[80%] text-center ">
+      <div className="mx-auto my-12 max-w-[80%] text-center">
         <h2 className="custom-font my-4 text-4xl font-bold text-[#00a6fb]">Dive into DevDisplay</h2>
         <div className="mb-6 mt-4 flex flex-col items-center">
           <p className="max-w-2xl text-center text-lg text-gray-400">

src/Page/OpportunitiesHub/CompetitionList.jsx

@@ -163,10 +163,7 @@ const CompetitionsCardComponent = ({ organizer, title, location, date, domains,
 
       <div className="mt-2 flex flex-wrap justify-center gap-2 p-2">
         {domains.map((domain, idx) => (
-          <span
-            key={idx}
-            className="bg-gray-1000 rounded-full border border-[#00a6fb]  px-2 py-1 text-xs text-gray-300"
-          >
+          <span key={idx} className="bg-gray-1000 rounded-full border border-[#00a6fb] px-2 py-1 text-xs text-gray-300">
             {domain}
           </span>
         ))}

src/Page/OpportunitiesHub/EventsList.jsx

@@ -254,10 +254,7 @@ const TecheventsCardComponent = ({ organizer, title, location, date, domains, ap
 
       <div className="mt-2 flex flex-wrap justify-center gap-2 p-2">
         {domains.map((domain, idx) => (
-          <span
-            key={idx}
-            className="bg-gray-1000 rounded-full border border-[#00a6fb]  px-2 py-1 text-xs text-gray-300"
-          >
+          <span key={idx} className="bg-gray-1000 rounded-full border border-[#00a6fb] px-2 py-1 text-xs text-gray-300">
             {domain}
           </span>
         ))}

src/Page/OpportunitiesHub/HackathonList.jsx

@@ -734,10 +734,7 @@ const HackathonCardComponent = React.forwardRef(
 
       <div className="mt-2 flex flex-wrap justify-center gap-2 p-2">
         {domains.map((domain, idx) => (
-          <span
-            key={idx}
-            className="bg-gray-1000 rounded-full border border-[#00a6fb]  px-2 py-1 text-xs text-gray-300"
-          >
+          <span key={idx} className="bg-gray-1000 rounded-full border border-[#00a6fb] px-2 py-1 text-xs text-gray-300">
             {domain}
           </span>
         ))}

src/Page/OpportunitiesHub/InternshipList.jsx

@@ -28,7 +28,7 @@ const Internship1 = () => {
           <div className="flex items-start justify-between">
             <div className="flex gap-4">
               <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl bg-white p-2">
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br  to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
                 <img src="/assets/LocalCompany/WOODESY.png" alt="Custom Icon" className="h-10 w-10" />
               </div>
               <div>
@@ -166,7 +166,7 @@ const Internship2 = () => {
           <div className="flex items-start justify-between">
             <div className="flex gap-4">
               <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl bg-white p-2">
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br  to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
                 <img src="/assets/LocalCompany/Vijetha Softwares Pvt.Ltd.jpg" alt="Custom Icon" className="h-10 w-10" />
               </div>
               <div>
@@ -308,7 +308,7 @@ const Internship3 = () => {
           <div className="flex items-start justify-between">
             <div className="flex gap-4">
               <div className="relative flex h-16 w-16 items-center justify-center rounded-2xl bg-white p-2">
-                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br  to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
+                <div className="absolute inset-0 rounded-2xl bg-gradient-to-br to-teal-500 opacity-20 blur-sm transition-opacity duration-300 group-hover:opacity-30" />
                 <img src="/assets/LocalCompany/Webfuture.jpg" alt="Custom Icon" className="h-10 w-10" />
               </div>
               <div>

src/Page/OpportunitiesHub/OpenSource.jsx

@@ -715,7 +715,7 @@ const OSProgramCardComponent = ({
             <div className="status-user" />
             Apply Now
           </a>
-          <div className="mt-2 flex flex-col items-start gap-1 rounded-lg border border-[#00a6fb] bg-gray-900 bg-opacity-50 px-14 py-3 text-sm text-xs text-white text-white shadow-lg backdrop-blur-md transition-all hover:bg-gray-800">
+          <div className="mt-2 flex flex-col items-start gap-1 rounded-lg border border-[#00a6fb] bg-gray-900 bg-opacity-50 px-14 py-3 text-sm text-xs text-white shadow-lg backdrop-blur-md transition-all hover:bg-gray-800">
             <div className="flex items-center">
               <FontAwesomeIcon icon={faCalendarAlt} className="mr-2 text-[#00a6fb]" />
               <span className="font-medium">{timeline}</span>

src/Page/Sponsor.jsx

@@ -20,7 +20,7 @@ const SponsorUs = () => {
           within the tech community.
         </p>
 
-        <div className="mb-8 ">
+        <div className="mb-8">
           <h6 className="mb-2 text-xl font-semibold">What is DevDisplay?</h6>
           <p className="mb-4">
             DevDisplay is a global open-source tech community with the mission to unite all tech-related needs under one

src/components/AchievementJourney/IndividualJourney.js

@@ -53,7 +53,7 @@ const AchieverJourneyPage = () => {
         </div>
       </header>
 
-      <section className=" mx-auto mt-4 p-8">
+      <section className="mx-auto mt-4 p-8">
         <motion.h2
           className="text-3xl font-bold text-[#00a6fb]"
           initial={{ opacity: 0, y: -20 }}
@@ -113,7 +113,7 @@ const AchieverJourneyPage = () => {
         </ul>
       </section>
 
-      <section className=" mx-auto mt-12 p-8">
+      <section className="mx-auto mt-12 p-8">
         <h2 className="text-2xl font-semibold text-[#00a6fb]">Interview Process</h2>
         <h3 className="mt-4 text-xl font-semibold">Preparation</h3>
         <ul className="list-disc pl-6">
@@ -158,7 +158,7 @@ const AchieverJourneyPage = () => {
         </ul>
       </section>
 
-      <section className=" mx-auto mt-12 p-8">
+      <section className="mx-auto mt-12 p-8">
         <h2 className="text-2xl font-semibold text-[#00a6fb]">Resources for Preparation</h2>
         {achieverData.resources.learningMaterials.map((material, index) => (
           <div key={index} className="mt-4">
@@ -179,7 +179,7 @@ const AchieverJourneyPage = () => {
         </ul>
       </section>
 
-      <section className=" mx-auto mt-12 p-8">
+      <section className="mx-auto mt-12 p-8">
         <h2 className="text-2xl font-semibold text-[#00a6fb]">Inspiration & Guidance</h2>
         {achieverData.inspirationAndGuidance.roadmaps.map((roadmap, index) => (
           <div key={index} className="mt-8">