Git hub pages loads with blank white screen

[tyleroni]

Select Topic Area

Question

Body

Here is a link to my repo: https://github.com/tyleroni/tyleroni

I am trying to figure out why my index.html is not recognizing the root id. First it was in my public folder and github pages wouldn't recognize it at all and i received 404 error. I moved it out of the public folder and it now recognizes it but it comes up as white screen. On my local host it works fine but I cant seem to find the problem

here is my index.html:

<link rel="manifest" href="public/manifest.json" />
    <title>Tyler J Shin</title>

You need to enable JavaScript to run this app.

<script
  type="text/javascript"
  src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"
></script>
<script type="text/javascript">
  ;(function () {
    emailjs.init('-co4TL8Smd_fQEc4N')
  })()
</script>

Here is my package.json:

{

"name": "tyleroni",
"version": "0.1.0",
"homepage": "https://tyleroni.github.io/tyleroni/",
"private": false,
"dependencies": {
"@emailjs/browser": "^3.12.1",
"@fortawesome/free-brands-svg-icons": "^6.5.1",
"@fortawesome/free-solid-svg-icons": "^6.5.1",
"@fortawesome/react-fontawesome": "^0.2.0",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"animate.css": "^4.1.1",
"gh-pages": "^6.1.1",
"gsap-trial": "^3.12.5",
"loaders.css": "^0.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-leaflet": "^4.2.1",
"react-loaders": "^3.0.1",
"react-router-dom": "^6.21.3",
"react-scripts": "5.0.1",
"sass": "^1.70.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}

here is my app.js

import './App.scss';
import { Routes, Route } from 'react-router-dom';
import Layout from './Components/Layout';
import Home from './Components/Home';
import Projects from './Components/Projects';
import Contact from './Components/Contact';
import MindTreasure from './Components/MindTreasure'
import Impromptu from './Components/Impromptu'
import QuickFit from './Components/QuickFit'
import SugarCube from './Components/SugarCube'
import Starting from './Components/Starting'

function App() {
return (
<>

    <Routes>
      <Route index element ={<Starting />} />
      <Route path = "/" element={<Layout />} >
        <Route path = '/tyleroni/Home' element = {<Home />} />
        <Route path = '/tyleroni/projects' element = {<Projects />} />
        <Route path = '/tyleroni/contact' element = {<Contact />} />
        <Route path = '/tyleroni/mindtreasure/case/study' element = {<MindTreasure />} />
        <Route path = '/tyleroni/impromptu/case/study' element = {<Impromptu />} />
        <Route path = '/tyleroni/quickfit/case/study' element = {<QuickFit />} />
        <Route path = '/tyleroni/sugarcube/case/study' element = {<SugarCube />} />
      </Route>
    </Routes> 
  
</>

);
}

export default App

Here is my index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import { createRoot } from "react-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode >



</React.StrictMode>
);

reportWebVitals();

If anyone can help me please I have been trying for so long