move all components that are exclusive to one page

src/App.jsx

@@ -1,8 +1,8 @@
 import './App.css'
 import { Routes, Route, Link } from 'react-router-dom';
-import HomePage from './pages/HomePage.jsx';
-import ProjectsPage from './pages/ProjectsPage';
-import ProjectDetailsPage from "./pages/ProjectDetailsPage.jsx";
+import HomePage from './pages/Home/HomePage.jsx';
+import ProjectsPage from './pages/Projects/ProjectsPage.jsx';
+import ProjectDetailsPage from "./pages/ProjectDetails/ProjectDetailsPage.jsx";
 
 
 function App() {

src/components/Projects/Projects.jsx

@@ -3,7 +3,7 @@ import "./Projects.css"
 import React, {useEffect, useState} from "react";
 import {Link, useLocation} from "react-router-dom";
 import NavBar from "../NavBar/NavBar.jsx";
-import Filter from "../Filter/Filter.jsx";
+import Filter from "../../pages/Projects/components/Filter/Filter.jsx";
 
 function Projects() {
     const [projects, setProjects] = useState([]);

src/pages/Home/HomePage.jsx

@@ -1,10 +1,10 @@
 import {useEffect, useState} from 'react'; // 1. Import useEffect
 import { useLocation } from 'react-router-dom'; // 2. Import useLocation
-import Home from '../components/Home/Home.jsx';
-import Experiences from '../components/Experiences/Experiences.jsx';
-import Projects from '../components/Projects/Projects.jsx';
-import Skills from '../components/Skills/Skills.jsx';
-import Footer from '../components/Footer/Footer.jsx';
+import Home from './components/Home/Home.jsx';
+import Experiences from './components/Experiences/Experiences.jsx';
+import Projects from '../../components/Projects/Projects.jsx';
+import Skills from './components/Skills/Skills.jsx';
+import Footer from '../../components/Footer/Footer.jsx';
 
 function HomePage() {
     const location = useLocation();

src/pages/Home/components/Home/Home.jsx

@@ -1,6 +1,6 @@
 import './Home.css';
-import Background from "../thirdParty/Background/Background.jsx";
-import NavBar from "../NavBar/NavBar.jsx";
+import Background from "../../../../components/thirdParty/Background/Background.jsx";
+import NavBar from "../../../../components/NavBar/NavBar.jsx";
 function Home() {
     return (
 

src/pages/Home/components/Skills/Skills.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import SkillCard from "../SkillCard/SkillCard.jsx";
+import SkillCard from "../../../../components/SkillCard/SkillCard.jsx";
 import "./Skills.css";
 
 function Skills() {

src/pages/ProjectDetails/ProjectDetailsPage.jsx

@@ -1,8 +1,8 @@
 import { useParams } from "react-router-dom";
 import React, { useEffect, useState } from "react";
-import NavBar from "../components/NavBar/NavBar.jsx";
-import ProjectDetails from "../components/ProjectDetails/ProjectDetails.jsx";
-import Footer from "../components/Footer/Footer.jsx";
+import NavBar from "../../components/NavBar/NavBar.jsx";
+import ProjectDetails from "./components/ProjectDetails/ProjectDetails.jsx";
+import Footer from "../../components/Footer/Footer.jsx";
 
 function ProjectDetailsPage() {
     const { id } = useParams();

src/pages/ProjectDetails/components/ProjectDetails/ProjectDetails.jsx

@@ -1,7 +1,7 @@
 import "./ProjectDetails.css"
-import SkillCard from "../SkillCard/SkillCard.jsx";
+import SkillCard from "../../../../components/SkillCard/SkillCard.jsx";
 import React, {useEffect, useState} from "react";
-import NavBar from "../NavBar/NavBar.jsx";
+import NavBar from "../../../../components/NavBar/NavBar.jsx";
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import {useNavigate} from "react-router-dom";

src/pages/Projects/ProjectsPage.jsx

@@ -1,5 +1,5 @@
-import Projects from "../components/Projects/Projects.jsx";
-import Footer from "../components/Footer/Footer.jsx";
+import Projects from "../../components/Projects/Projects.jsx";
+import Footer from "../../components/Footer/Footer.jsx";
 
 function ProjectsPage() {
     return (