UI Update

package.json

@@ -9,6 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@pmndrs/assets": "^1.6.0",
     "@react-three/drei": "^9.88.5",
     "@react-three/fiber": "^8.14.2",

src/app/components/Footer.js

@@ -1,14 +1,20 @@
 import React from 'react'
 import styles from '../page.module.css'
 
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faLinkedin } from "@fortawesome/free-brands-svg-icons";
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+import { faInstagram } from "@fortawesome/free-brands-svg-icons";
+import { faTwitter } from "@fortawesome/free-brands-svg-icons";
+
 const Footer = () => {
     return (
         <div className={styles.footer}>
-            <div className={styles.contactForm}>
+            <div className={styles.contactForm} id='contact'>
                 <h2>Contact Me</h2>
                 <form>
-                    <input type="text" placeholder="Name" required/>
-                    <input type="email" placeholder="Email" required/>
+                    <input type="text" placeholder="Name" required />
+                    <input type="email" placeholder="Email" required />
                     <textarea placeholder="Message" required></textarea>
                     <button type="submit">Send</button>
                 </form>
@@ -17,9 +23,30 @@ const Footer = () => {
                 <div className={styles.socialMedia}>
                     <h3>Social Media</h3>
                     <div className={styles.socialMediaWrapper}>
-                            <a href='https://github.com/realpxd' ><i className="fab fa-github"></i></a>
-                            <a href='https://in.linkedin.com/in/programmerxd' ><i className="fab fa-linkedin-in"></i></a>
-                            <a href='https://instagram.com/programmerxd' ><i className="fab fa-instagram"></i></a>
+                        {/* <a href='https://github.com/realpxd' ><i className="fab fa-github"></i></a>
+                        <a href='https://in.linkedin.com/in/programmerxd' ><i className="fab fa-linkedin-in"></i></a>
+                        <a href='https://instagram.com/programmerxd' ><i className="fab fa-instagram"></i></a> */}
+                        <a href='https://in.linkedin.com/in/programmerxd' >
+                            <FontAwesomeIcon
+                                icon={faLinkedin}
+                                style={{ color: "red"}}
+                            /></a>
+                        <a href='https://github.com/realpxd' >
+                            <FontAwesomeIcon
+                                icon={faGithub}
+                                style={{ color: "red"}}
+                            /></a>
+                        <a href='https://instagram.com/programmerxd' >
+                            <FontAwesomeIcon
+                                icon={faInstagram}
+                                style={{ color: "red"}}
+                            /></a>
+                            <a href='https://twitter.com/PXD_Officials' >
+                        <FontAwesomeIcon
+                            icon={faTwitter}
+                            style={{ color: "red"}}
+                        /></a>
+
                     </div>
                 </div>
                 <p>Copyright &copy; ProgrammerXD 2023</p>

src/app/components/NavBar.js

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import styles from '../page.module.css';
 import Image from 'next/image';
+import  Link from 'next/link'
 
 const NavBar = () => {
   // Initialize the state to track whether the navbar should have the 'navBarScrolled' class
@@ -37,17 +38,17 @@ const NavBar = () => {
       <Image src={'/pxd.png'} width={120} height={60} alt='LOGO' />
       <p className={styles.hamburger}>&#9776;</p>
       <div>
-        <a href="#">
+        <Link href="#home">
           <p>Home</p>
-        </a>
+        </Link>
 
-        <a href="#">
-          <p>About</p>
-        </a>
+        <Link href="#projects">
+          <p>Projects</p>
+        </Link>
 
-        <a href="#">
+        <Link href="#contact">
           <p>Contact</p>
-        </a>
+        </Link>
       </div>
     </div>
   );

src/app/components/SectionA.js

@@ -1,25 +1,76 @@
-import React from 'react'
-import styles from '../page.module.css'
-import Model from './ModelObj.js'
+import React, { useEffect, useState } from 'react';
+import styles from '../page.module.css';
+import Model from './ModelObj.js';
 
 const SectionA = () => {
-    return (
-        <>
-            <div className={`${styles.container} ${styles.cA}`}>
-                <div className={`${styles.block} ${styles.bA}`}>
-                    <h1>Debugging My House</h1>
-                    {/* <p>I am 19 years old Web Developer, Codding is the thing in which I was always interested in 
-                        and I am always ready to grab new skills. I am a self-taught developer, 
-                        Constantly working on my Skills while 
-                        Gaining a Solid Knowledge & Understanding in 
-                        Development & Communication.</p> */}
-                        <p>Found Some Glitches in Wardrobe</p>
-                </div>
-                <Model />
-
-            </div>
-        </>
-    )
-}
-
-export default SectionA
+  const [text, setText] = useState('');
+  const arr = ['Website', 'Bedroom', 'Balcony' , 'Kitchen' , 'Teddy' , 'Shoes' , 'Potato' , 'Fridge' , 'Computer' , 'Wardrobe'];
+  const [counter, setCounter] = useState(0);
+  var isTextEmpty = false;
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      setCounter(prevCounter => (prevCounter + 1) % arr.length);
+    }, 2000);
+
+    return () => {
+      clearInterval(intervalId); // Clean up the interval on component unmount
+    };
+  }, [arr.length]);
+
+  useEffect(() => {
+    let intervalId;
+    const clearText = () => {
+      let index = 0;
+     intervalId = setInterval(() => {
+        if (text.length > 0) {
+          setText(prevText => prevText.slice(0, -1)); // Remove one character at a time
+        } else {
+          clearInterval(intervalId);
+          isTextEmpty = true;
+          index = (index + 1) % arr.length;
+          setText(arr[index]); // Set new text from the array
+        }
+      }, 250); // Speed of deletion, adjust as needed
+    };
+
+    clearText();
+
+    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)
+            })
+
+            console.log(charArr)
+            console.log(charStr)
+        }else{
+            clearInterval(intervalId);
+
+        }
+    }
+  }, [counter, arr]);
+
+  return (
+    <>
+      <div className={`${styles.container} ${styles.cA}`} id='home'>
+        <div className={`${styles.block} ${styles.bA}`}>
+          <h1>Debugging My House</h1>
+          <p>Found Some Glitches in {text}</p>
+        </div>
+        <Model />
+      </div>
+    </>
+  );
+};
+
+export default SectionA;

src/app/components/SectionC.js

@@ -1,44 +1,45 @@
 import React from 'react'
 import styles from '../page.module.css'
 import Image from 'next/image';
+import Link from 'next/link';
 
 const SectionC = () => {
     return (
         <>
             <div className={`${styles.container} ${styles.cC}`}>
-                <div className={`${styles.block} ${styles.bC}`}>
+                <div className={`${styles.block} ${styles.bC}`} id='projects'>
                     <h2>Projects</h2>
                     <div className={styles.projectsWrapper}>
                         <div className={styles.projectsContainer}>
-                            <Image src={"/me.webp"} width={250} height={300} ></Image>
+                            <Image src={"/projects/wod_tp.png"} width={220} height={200} quality={90} ></Image>
                             <div className={styles.projectData}>
-                                <h3>Project 1</h3>
-                                <p>Project Description</p>
+                                <h3>WOD</h3>
+                                <p>WOD - Whispers of Deception , is a Android Mobile App Project that comes with a unique idea of Voice communication among peoples from world .</p>
                                 <div>
-                                    <button>Github</button>
-                                    <button>Live</button>
+                                    <Link href="https://github.com/realpxd/WOD" className={styles.projectBtns}><button>Github</button></Link>
+                                    <Link href="https://github.com/realpxd/WOD/blob/master/app/release/app-release.apk" className={styles.projectBtns}><button>Use</button></Link>
                                 </div>
                             </div>
                         </div>
                         <div className={styles.projectsContainer}>
-                            <Image src={"/me.webp"} width={250} height={300} ></Image>
+                            <Image src={"/projects/gph_tp.png"} width={220} height={200} ></Image>
                             <div className={styles.projectData}>
-                                <h3>Project 2</h3>
-                                <p>Project Description</p>
+                                <h3>GPHisar</h3>
+                                <p>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. </p>
                                 <div>
-                                    <button>Github</button>
-                                    <button>Live</button>
+                                {/* <Link href="https://github.com/realpxd/WOD" className={styles.projectBtns}><button>Github</button></Link> */}
+                                <Link href="https://gphisar.ac.in/wp-content/uploads/2023/10/GPHisar.apk" className={styles.projectBtns}><button>Live</button></Link>
                                 </div>
                             </div>
                         </div>
                         <div className={styles.projectsContainer}>
-                            <Image src={"/me.webp"} width={250} height={300} ></Image>
+                            <Image src={"/projects/ecom.png"} width={220} height={200} className={styles.imgDesk}></Image>
                             <div className={styles.projectData}>
-                                <h3>Project 3</h3>
-                                <p>Project Description</p>
+                                <h3>E-Commerce</h3>
+                                <p>It is a E-Commerce Website template that includes admin panel for products listing , product deleting etc.</p>
                                 <div>
-                                    <button>Github</button>
-                                    <button>Live</button>
+                                <Link href="https://github.com/realpxd/s-ecom-project" className={styles.projectBtns}><button>Github</button></Link>
+                                <Link href="https://realpxd.github.io/s-ecom-project/" className={styles.projectBtns}><button>Live</button></Link>
                                 </div>
                             </div>
                         </div>

src/app/globals.css

@@ -87,6 +87,7 @@
   margin: 0 ;
   padding: 0;
   font-family: lato;
+  scroll-behavior: smooth;
 
 }
 *::selection{