react-particles-js | Particles.js for React | Frontend Framework library

This is my first time deploying onto GH Pages and it seemed like everything was right. It states "Your site is published at https://shayanvalaie.github.io/portfolio/" but after going to the address it gives me a getting started with react page.

After doing some research I found that it might be due to the fact that it is taking my master branch and the solution was to change to the gh-pages branch but after checking it seems I don't have a gh-pages branch.

This is my package.json

Today I worked on a react web project. So it worked fine.And then after that I created a another react project. But in that there was no any package.lock file. So I created manually it by using npm install . But after that when I'm adding dependency to that project with npm i react-particles-js command I got a error msg like this.

I have to build my first react project that uses react-router-dom

Yes, it's a multi-page project.

After, running the build command I have successfully tested my build file using Static Server - https://create-react-app.dev/docs/deployment/

Note: I have checked these links to deploy React application to the server

1. How to deploy a react app on cPanel? ( Followed this ).

2. https://dev.to/crishanks/deploy-host-your-react-app-with-cpanel-in-under-5-minutes-4mf6

3. https://ridbay.medium.com/simple-steps-on-how-to-deploy-or-host-your-reactjs-app-in-cpanel-31cfbcad444e

But, when I upload the project to my CPanel it opens the main pages successfully ( https://test.com/react-project/ ) but did not serve other routing pages ( https://test.com/react-project/page2 --- shows 404).

App.js code

I'm using React Particle JS. I want to get image to be shown among particles (like here - https://rpj.bembi.dev/#images), but can't see images, only bubbles are shown. Paths are correct. I'm including pathseg.js script through useEffect hook.

I have been trying to implement Particles.js on my portfolio website but have been rather unsuccessful. These are the following lines of code I have run in my library to get it running:

npm install tsparticles

npm install react-particles-js

I have referred to https://www.geeksforgeeks.org/how-to-use-particles-js-in-react-project/ and https://www.npmjs.com/package/react-particles-js and went about including their code as they went about it but nothing seems to appear on my page.

Here's an image of my page right now: How my page looks right now

This is my code for the page:

I want to execute React Codesplit. I have followed the documentation given by React, but there seems to be showing a 'init is not a function' error:

Here's my code:

Thank you for opening this page in advance. I am a self-taught coder. And now I am making my personal page with Bootstrap.

What I want to do now is; SPA feature of React.js. All I understand this feature is;

1. install "react-router-dom",
2. import { Link, NavLink } from "react-router-dom";
3. And replace those anchor and href tag to Link to=

The following code is in 'src' folder.

Navbar.js

Using react-particles-js as a background on a React project, I discover that disables the anchor tag, don't know if its my implementation

I have this installed react-particles-js, everything works fine as I see, but now I have created some custom design, and assigned it to the Particle via it params, just like this: