features(main) 🔹 UI and Performance improvements

✅ implemented react query hook
✅ dynamic data fetching
✅ optimized codebase
✅ improved reusability

.gitignore

@@ -33,3 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+/src/app/dynamicPages

package.json

@@ -23,6 +23,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^5.0.1",
+    "react-loader-spinner": "^6.1.6",
+    "react-query": "^3.39.3",
     "react-scroll": "^1.8.9",
     "three": "^0.156.1"
   }

public/projects/projectsData.json

@@ -0,0 +1,68 @@
+[
+    {
+        "imgSrc": "/projects/session.png",
+        "imgw": 220,
+        "imgh": 200,
+        "title": "Session",
+        "description": "Session is a social media app that allows users to share their thoughts with the world. It is a platform where users can chat with others, share their experiences, and discover new things. Session is designed to be simple, intuitive, and fun to use.",
+        "live": "https://github.com/realpxd/Session",
+        "github": "https://github.com/realpxd/Session"
+    },
+    {
+        "imgSrc": "/projects/gph_tp.png",
+        "imgw": 220,
+        "imgh": 200,
+        "title": "GPHisar",
+        "description": "GPHisar is an Official Government Institute Educational App. This app helps students and staff to quickly access Study Materials and News & Anouncements from the Institute.",
+        "live": "https://gphisar.ac.in/"
+    },
+    {
+        "imgSrc": "/projects/wod_tp.png",
+        "imgw": 220,
+        "imgh": 200,
+        "title": "WOD",
+        "description": "WOD - Whispers of Deception , is a Android Mobile App Project that comes with a unique idea of Voice communication among peoples from world .",
+        "live": "https://github.com/realpxd/WOD/blob/master/app/release/app-release.apk",
+        "github": "https://github.com/realpxd/WOD"
+    },
+    {
+        "imgSrc": "/projects/ngl-user.png",
+        "imgw": 220,
+        "imgh": 200,
+        "title": "NGL - Clone",
+        "description": "NGL is a anonymous-message sharing website that allow users to share their thoughts and messages without revealing their name or identity.",
+        "live": "https://ngl-clone-frontend.vercel.app/",
+        "github": "https://github.com/realpxd/Ngl-Clone",
+        "isDesk": true
+    },
+    {
+        "imgSrc": "/projects/ecom.png",
+        "imgw": 220,
+        "imgh": 200,
+        "title": "E-Commerce",
+        "description": "It is a E-Commerce Website template that includes admin panel for products listing , product deleting etc.",
+        "live": "https://realpxd.github.io/s-ecom-project/",
+        "github": "https://github.com/realpxd/s-ecom-project",
+        "isDesk": true
+    },
+    {
+        "imgSrc": "/projects/spotify-clone.png",
+        "imgw": 220,
+        "imgh": 200,
+        "title": "Spotify Clone",
+        "description": "Spotify is a website where the users can listen to songs and interact with the playlists, and control the songs volume, current time, play/pause etc.",
+        "live": "https://spotify-clone-phi-puce.vercel.app/",
+        "github": "https://github.com/realpxd/Spotify-Clone",
+        "isDesk": true
+    },
+    {
+        "imgSrc": "/projects/xclone-home.png",
+        "imgw": 220,
+        "imgh": 200,
+        "title": "X - Clone",
+        "description": "X (formerly twitter) is a social media app used to share our thoughts and communicate with the world in a very effecient way.",
+        "live": "https://x-clone-pxd.vercel.app/",
+        "github": "https://github.com/realpxd/X-Clone",
+        "isDesk": true
+    }
+]

src/app/components/Footer.jsx

@@ -65,14 +65,14 @@ const Footer = () => {
                                 icon={faGithub}
                                 style={{ color: "red" }}
                             /></a>
-                        <a href='https://instagram.com/programmerxd' >
+                        <a href='https://twitter.com/dotpxd' >
                             <FontAwesomeIcon
-                                icon={faInstagram}
+                                icon={faTwitter}
                                 style={{ color: "red" }}
                             /></a>
-                        <a href='https://twitter.com/PXD_Officials' >
+                        <a href='https://instagram.com/programmerxd' >
                             <FontAwesomeIcon
-                                icon={faTwitter}
+                                icon={faInstagram}
                                 style={{ color: "red" }}
                             /></a>
 

src/app/components/ModelObj.jsx

@@ -12,24 +12,24 @@ export default function ModelObj() {
   const Model = () => {
     // location of the 3D model
     const gltf = useLoader(GLTFLoader, "/drone/scene.gltf");
-    const rotation = [-0.1, rotationAngle  , 0];
+    const rotation = [-0.1, rotationAngle, 0];
     return (
       <>
         {/* Use scale to control the size of the 3D model */}
-        <primitive object={gltf.scene} scale={1.08} rotation={rotation}  position={[0, -0.6, postionAngle]} />
+        <primitive object={gltf.scene} scale={1.08} rotation={rotation} position={[0, -0.6, postionAngle]} />
       </>
     );
   };
 
-  
+
   const [rotationAngle, setRotationAngle] = useState(2.5);
   const [postionAngle, setPositionAngle] = useState(0);
 
   // Function to handle scroll events
   const handleScroll = () => {
     const scrollY = window.scrollY;
     // Define the rotation angle based on the scroll position
-    const newRotationAngle = rotationAngle +  (scrollY / 200); // Adjust the factor as needed
+    const newRotationAngle = rotationAngle + (scrollY / 200); // Adjust the factor as needed
     const newPositionAngle = (scrollY / 500); // Adjust the factor as needed
     setRotationAngle(newRotationAngle);
     setPositionAngle(-newPositionAngle)
@@ -47,23 +47,23 @@ export default function ModelObj() {
 
   return (
     <Element name="ModelObj">
-    <div className={`${styles.model} ${styles.modelA}`}>
-      <Canvas shadows dpr={[1, 2]} camera={{ position: [0, 0, 4], fov: 50}}>
-        <ambientLight intensity={0.7} />
-        <spotLight intensity={0.5} angle={0.7} penumbra={1} position={[10, 15, 10]} castShadow />
-        <Suspense fallback={null}>
-          <Model />
-          <Environment  files={suspend(city)} />
-        </Suspense>
-        <OrbitControls 
-          enableZoom={false}   // Disable zooming
-          enablePan={false}   // Disable panning
-          enableRotate={false}
-        
+      <div className={`${styles.model} ${styles.modelA}`}>
+        <Canvas shadows dpr={[1, 2]} camera={{ position: [0, 0, 4], fov: 50 }}>
+          <ambientLight intensity={0.7} />
+          <spotLight intensity={0.5} angle={0.7} penumbra={1} position={[10, 15, 10]} castShadow />
+          <Suspense fallback={null}>
+            <Model />
+            <Environment files={suspend(city)} />
+          </Suspense>
+          <OrbitControls
+            enableZoom={false}   // Disable zooming
+            enablePan={false}   // Disable panning
+            enableRotate={false}
+
           />
-      </Canvas>
+        </Canvas>
 
-    </div>
+      </div>
     </Element>
   )
 }

src/app/components/ReactQueryClientProvider.jsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { QueryClient, QueryClientProvider } from 'react-query'
+import { useState } from 'react'
+
+export const ReactQueryClientProvider = ({ children }) => {
+    const [queryClient] = useState(
+        () =>
+            new QueryClient({
+                defaultOptions: {
+                    queries: {
+                        // With SSR, we usually want to set some default staleTime
+                        // above 0 to avoid refetching immediately on the client
+                        staleTime: 60 * 1000,
+                    },
+                },
+            })
+    )
+    return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+}

src/app/components/home/Home.jsx

@@ -1,17 +1,34 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { useQuery } from 'react-query'
 import SectionA from './SectionA';
 import SectionB from './SectionB';
 import SectionC from './SectionC';
 import Footer from '../Footer'
 import styles from '@/app/page.module.css'
 const Home = () => {
+    const { data: projectsData, isLoading, isError, error } = useQuery('projects', fetchProjectsData);
+
+    async function fetchProjectsData() {
+        const response = await fetch('/projects/projectsData.json');
+        if (!response.ok) {
+            throw new Error('Failed to fetch projects');
+        }
+        return response.json();
+    }
+
+
     return (
         <>
             <SectionA />
             <hr className={styles.hr} />
             <SectionB />
             <hr className={styles.hr} />
-            <SectionC />
+            <SectionC
+                projectsData={projectsData}
+                isLoading={isLoading}
+                isError={isError}
+                error={error}
+            />
             <hr className={styles.hr} />
             <Footer />
         </>

src/app/components/home/SectionA.jsx

@@ -4,7 +4,7 @@ import Model from '@/app/components/ModelObj';
 
 const SectionA = () => {
   const [text, setText] = useState('');
-  const arr = ['Website', 'Bedroom', 'Balcony' , 'Kitchen' , 'Teddy' , 'Shoes' , 'Potato' , 'Fridge' , 'Computer' , 'Wardrobe'];
+  const arr = ['Website', 'Bedroom', 'Balcony', 'Kitchen', 'Teddy', 'Shoes', 'Potato', 'Fridge', 'Computer', 'Wardrobe'];
   const [counter, setCounter] = useState(0);
   var isTextEmpty = false;
 
@@ -22,7 +22,7 @@ const SectionA = () => {
     let intervalId;
     const clearText = () => {
       let index = 0;
-     intervalId = setInterval(() => {
+      intervalId = setInterval(() => {
         if (text.length > 0) {
           setText(prevText => prevText.slice(0, -1)); // Remove one character at a time
         } else {
@@ -36,27 +36,27 @@ const SectionA = () => {
 
     clearText();
 
-    return() => {
-        if(isTextEmpty){
-            clearInterval(intervalId);
-            setText(arr[counter])
-            let charArr = [];
-            let charStr;
+    return () => {
+      if (isTextEmpty) {
+        clearInterval(intervalId);
+        setText(arr[counter])
+        let charArr = [];
+        let charStr;
 
-            arr[counter].split("").forEach((char , index) => {
-                charArr.push(...char)
-                charStr = charArr.join("")
-
-                setText(charStr)
-                console.log(charStr)
-            })
+        arr[counter].split("").forEach((char, index) => {
+          charArr.push(...char)
+          charStr = charArr.join("")
 
-            console.log(charArr)
-            console.log(charStr)
-        }else{
-            clearInterval(intervalId);
+          setText(charStr)
+          console.log(charStr)
+        })
 
-        }
+        console.log(charArr)
+        console.log(charStr)
+      } else {
+        clearInterval(intervalId);
+
+      }
     }
   }, [counter, arr]);