changed file structure

src/App.jsx

@@ -2,12 +2,12 @@ import React from "react";
 
 import {BrowserRouter as Router , Routes , Route} from 'react-router-dom'
 
-import Home from "./components/Home/Home";
+import Home from "./components/Home";
 
-import PageNotFound from "./components/Pages/404Page/PageNotFound";
-import ComingSoon from "./components/Pages/ComingSoon/ComingSoon";
+import PageNotFound from "./components/Pages/PageNotFound";
+import ComingSoon from "./components/Pages/ComingSoon";
 
-import Project from "./components/Pages/Projects/Project";
+import Project from "./components/Pages/Project";
 
 const App = () => {
   return (

src/components/DotRing/DotRing.jsx → src/components/DotRing.jsx

@@ -1,13 +1,13 @@
 import React from "react";
-import "./dotRing.css";
+import "../styles/dotRing.css";
 
-import useMousePosition from "../../hooks/useMousePosition";
+import useMousePosition from "../hooks/useMousePosition";
 
 const DotRing = () => {
   const { x, y } = useMousePosition();
   return (
     <>
-      <div style={{ left: `${x}px`, top: `${y}px` }} className="ring"></div>
+      <div style={{ left: `${x}px`, top: `${y}px` }} className="ring_cursor"></div>
 
       <div style={{ left: `${x}px`, top: `${y}px` }} className="dot"></div>
     </>

src/components/Section/GithubProjects/demoProjectArray.jsx → src/components/ExternalComponents/demoProjectArray.jsx

@@ -1,9 +1,9 @@
-import img1 from "../../../assets/githubRepo/Img1.jfif";
-import img2 from "../../../assets/githubRepo/Img2.png";
-import img3 from "../../../assets/githubRepo/Img3.jpg";
-import img4 from "../../../assets/githubRepo/Img4.jfif";
-import img5 from "../../../assets/githubRepo/Img5.jfif";
-import img6 from "../../../assets/githubRepo/Img6.jfif";
+import img1 from "../../assets/githubRepo/Img1.jfif";
+import img2 from "../../assets/githubRepo/Img2.png";
+import img3 from "../../assets/githubRepo/Img3.jpg";
+import img4 from "../../assets/githubRepo/Img4.jfif";
+import img5 from "../../assets/githubRepo/Img5.jfif";
+import img6 from "../../assets/githubRepo/Img6.jfif";
 
 /*
 Image Source:

src/components/Home/Home.jsx → src/components/Home.jsx

@@ -1,15 +1,15 @@
 import React, { useState, useEffect } from "react";
 
-import About from "../Section/About/About";
-import Contact from "../Section/Contact/Contact";
-import Exp from "../Section/Experience/Exp";
-import Footer from "../Section/Footer/Footer";
-import Header from "../Section/Header/Header";
-import Nav from "../Section/Nav/Nav";
-import GithubRepo from "../Section/GithubProjects/GithubRepo";
-
-import PreLoader from "../PreLoader/PreLoader";
-import DotRing from "../DotRing/DotRing";
+import About from "./Section/About";
+import Contact from "./Section/Contact";
+import Exp from "./Section/Exp";
+import Footer from "./Section/Footer";
+import Header from "./Section/Header";
+import Nav from "./Section/Nav";
+import GithubRepo from "./Section/GithubRepo";
+
+import PreLoader from "./PreLoader";
+import DotRing from "./DotRing";
 
 const HomePage = (props) => {
   const [inView, setInView] = useState("");

src/components/Pages/AboutMe/AboutMe.Jsx → src/components/Pages/AboutMe.Jsx

@@ -1,9 +1,9 @@
 import React from "react";
-import "./aboutMe.css";
+import "../../styles/aboutMe.css";
 
-import Nav from "../../Section/Nav/Nav";
-import ComingSoon from "../ComingSoon/ComingSoon";
-import DotRing from "../../DotRing/DotRing";
+import Nav from "../Section/Nav";
+import ComingSoon from "./ComingSoon";
+import DotRing from "../DotRing";
 
 const AboutMe = () => {
   return (

src/components/Pages/ComingSoon/ComingSoon.jsx → src/components/Pages/ComingSoon.jsx

@@ -1,8 +1,8 @@
 import React, { useState, useRef, useEffect } from "react";
-import DotRing from "../../DotRing/DotRing";
+import DotRing from "../DotRing";
 
 // import Timer from './Timer';
-import "./comingSoon.css";
+import "../../styles/comingSoon.css";
 
 const ComingSoon = () => {
   const [timerDays, setTimerDays] = useState("00");

src/components/Pages/404Page/PageNotFound.jsx → src/components/Pages/PageNotFound.jsx

@@ -1,8 +1,8 @@
 import React from "react";
-import "./404.css";
-
 import { useLocation } from "react-router-dom";
-import DotRing from "../../DotRing/DotRing";
+
+import "../../styles/404.css";
+import DotRing from "../DotRing";
 
 const PageNotFount = () => {
   const location = useLocation();

src/components/Pages/Projects/Project.jsx → src/components/Pages/Project.jsx

@@ -1,9 +1,9 @@
 import React from "react";
-import DotRing from "../../DotRing/DotRing";
-import Nav from "../../Section/Nav/Nav";
-import "./project.css";
+import DotRing from "../DotRing";
+import Nav from "../Section/Nav";
+import "../../styles/project.css";
 
-import RepoStats from "./RepoStats";
+import RepoStats from "../ExternalComponents/RepoStats";
 
 const Project = () => {
   return (

src/components/PreLoader/PreLoader.jsx → src/components/PreLoader.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./preloader.scss";
+import "../styles/preloader.scss";
 
 const PreLoader = () => {
   return (

src/components/Section/About/About.jsx → src/components/Section/About.jsx

@@ -1,7 +1,5 @@
 import React from "react";
-import "./About.css";
-
-// import About_Image from "../../../assets/Pics/about_image.png";
+import "../../styles/About.css";
 
 import { FaAward } from "react-icons/fa";
 import { BsFolder } from "react-icons/bs";
@@ -30,7 +28,7 @@ const About = () => {
             <img src={About_Image} alt="profile_pic" />
           </div> */}
         <div className="me image-card">
-          <img src={require("../../../assets/Pics/me2.jpg")} alt="me" />
+          <img src={require("../../assets/Pics/me2.jpg")} alt="me" />
         </div>
         {/* </div> */}
 

src/components/Section/Contact/Contact.jsx → src/components/Section/Contact.jsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useState } from "react";
 import emailjs from "emailjs-com";
-import "./Contact.css";
+import "../../styles/Contact.css";
 
 import { HiOutlineMail } from "react-icons/hi";
 import { FaTelegramPlane } from "react-icons/fa";

src/components/Section/Experience/Exp.jsx → src/components/Section/Exp.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./Exp.css";
+import "../../styles/Exp.css";
 import { BsPatchCheck } from "react-icons/bs";
 
 const Exp = () => {

src/components/Section/Footer/Footer.jsx → src/components/Section/Footer.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "./Footer.css";
+import "../../styles/Footer.css";
 
 import {
   FaFacebookSquare,

src/components/Section/GithubProjects/GithubRepo.jsx → src/components/Section/GithubRepo.jsx

@@ -1,7 +1,7 @@
 import React from "react";
-import "./githubRepo.css";
+import "../../styles/githubRepo.css";
 
-import { data } from "./demoProjectArray";
+import { data } from "../ExternalComponents/demoProjectArray";
 
 const GithubRepo = () => {
   return (

src/components/Section/Header/Header.jsx → src/components/Section/Header.jsx

@@ -1,9 +1,9 @@
 import React from "react";
-import "./Header.css";
+import "../../styles/Header.css";
 
-import HeaderSocials from "./HeaderSocials";
-import TypingEffect from "./TypingEffect";
-import CTA from "./CTA";
+import HeaderSocials from "../ExternalComponents/HeaderSocials";
+import TypingEffect from "../ExternalComponents/TypingEffect";
+import CTA from "../ExternalComponents/CTA";
 
 const Header = () => {
   return (

src/components/Section/Nav/Nav.jsx → src/components/Section/Nav.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 
-import "./Nav.css";
+import "../../styles/Nav.css";
 
 const Nav = ({ inView }) => {
   const [activeNav, setActiveNav] = useState("#");

src/components/Section/Footer/Footer.css → src/styles/Footer.css

@@ -1,6 +1,6 @@
 footer {
   background-color: var(--color-bg);
-  background: url("../../../assets/othersPics/banner-bg.png");
+  background: url("../assets/othersPics/banner-bg.png");
   padding: 3rem 0;
   text-align: center;
   font-size: 0.9rem;

src/components/DotRing/dotRing.css → src/styles/dotRing.css

@@ -1,4 +1,4 @@
-.ring {
+.ring_cursor {
   position: fixed;
   width: 50px;
   height: 50px;