reorganization of the tree structure

src/components/Experiences/Experiences.jsx

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

src/components/Footer/Footer.jsx

@@ -1,4 +1,4 @@
-import '../styles/Footer.css';
+import './Footer.css';
 function Footer() {
     const currentYear = new Date().getFullYear();
 

src/components/Home/Home.jsx

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

src/components/NavBar/NavBar.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import "../styles/NavBar.css";
+import "./NavBar.css";
 
 const NavBar = () => {
     const [active, setActive] = useState("home-section");

src/components/Projects/Projects.jsx

@@ -1,8 +1,8 @@
-import SingleProject from "./SingleProject.jsx";
-import "../styles/Projects.css"
+import SingleProject from "../SingleProject/SingleProject.jsx";
+import "./Projects.css"
 import React, {useEffect, useState} from "react";
 import {Link, useLocation} from "react-router-dom";
-import NavBar from "./NavBar.jsx";
+import NavBar from "../NavBar/NavBar.jsx";
 
 function Projects() {
     const [projects, setProjects] = useState([]);

src/components/SingleExperience/SingleExperience.jsx

@@ -1,4 +1,4 @@
-import '../styles/SingleExperience.css';
+import './SingleExperience.css';
 
 function SingleExperience({ experience, tasks }) {
     return (

src/components/SingleProject/SingleProject.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
-import SkillCard from "./SkillCard";
-import "../styles/SingleProject.css";
+import SkillCard from "../SkillCard/SkillCard.jsx";
+import "./SingleProject.css";
 
 function SingleProject({ image, title, description, skills, id, nbImage }) {
     const [imageID, setImageID] = useState(1);

src/components/SkillCard/SkillCard.jsx

@@ -1,4 +1,4 @@
-import "../styles/SkillCard.css";
+import "./SkillCard.css";
 
 function SkillCard({ text }) {
     return (

src/components/Skills/Skills.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
-import SkillCard from "./SkillCard.jsx";
-import "../styles/Skills.css";
+import SkillCard from "../SkillCard/SkillCard.jsx";
+import "./Skills.css";
 
 function Skills() {
     const [skills, setSkills] = useState([]);

src/components/thirdParty/Background/Background.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../styles/thirdParty/Background.css";
+import "./Background.css";
 
 export default function Background() {
     return (

src/pages/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.jsx';
-import Experiences from '../components/Experiences.jsx';
-import Projects from '../components/Projects.jsx';
-import Skills from '../components/Skills.jsx';
-import Footer from '../components/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/ProjectsPage.jsx

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