I’m trying to deploy a react made website on GH pages. I know GH pages doesnt natively support multiple pages websites but i wanted to do it anyway (silly me)

I tried multiple solutions but none of them seems to work. I tried using HashRouter, i tried tweaking the 404.html page following this guide. I believe i have tried everything but nothing works.

This is my code:

App.jsx

import { HashRouter as Router, Routes, Route } from 'react-router-dom';
...
...
...
return (
    <>
      <Router>
        { windowWidth > 768 ? null : <Header /> } {/* Render Navbar if window width is greater than 768 */ }
        <Navbar />
        <Routes>
          <Route path="/" element={ <Home /> } />
          <Route path="/about" element={ <About /> } />
          <Route path="/projects" element={ <Projects /> } />
          <Route path="/skills" element={ <Skills /> } />
          <Route path="/contact" element={ <Contact /> } />
          <Route path="/details/:id" element={ <Details /> } /> {/* Route for Details */ }
        </Routes>
        { windowWidth > 768 ? <Footer /> : null }
      </Router>
    </>
  );

main.jsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import { HashRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>
)

package.json

{
  "homepage": "https://orlifera.github.io/port/#",
  "name": "portfolio",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",
    "dev": "vite",
    "build": "vite build --outDir=build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emailjs/browser": "^4.3.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3",
    "react-simple-typewriter": "^5.0.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.0",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "gh-pages": "^6.1.1",
    "querystring": "^0.2.1",
    "react-icons": "^5.0.1",
    "vite": "^5.1.6"
  }
}