this is the videos part ,
the videos src is in props
<Route path='/projects/firstProject' element={<ProjectPage
firstImage="notessignup.png"
secondImage="noteslogin.png"
thirdImage="emptynotes.png"
fourthImage="notes.png"
firstVideo="/videos/notesSignUp_fixed.mp4"
secondVideo="/videos/notesLogin_fixed.mp4"
thirdVideo="/videos/notes_fixed.mp4"
and this is how it is now
<div className='relative bg-gradient-to-tl from-slate-600 to-slate-900 w-72 h-60 hover:w-80 hover:h-64 transition-all duration-200 rounded-2xl mt-20 '>
<video
src={firstVideo}
controls
autoPlay
muted
loop
className='w-full h-full absolute inset-0 rounded-2xl object-cover'></video>
</div>
<div className='relative bg-gradient-to-tl from-slate-600 to-slate-900 w-72 h-60 hover:w-80 hover:h-64 transition-all duration-200 rounded-2xl '>
<video
src={secondVideo}
controls
autoPlay
muted
loop
className='w-full h-full absolute inset-0 rounded-2xl object-cover'></video>
</div>
<div className='relative bg-gradient-to-tl from-slate-600 to-slate-900 w-72 h-60 hover:w-80 hover:h-64 transition-all duration-200 rounded-2xl '>
<video
src={thirdVideo}
controls
autoPlay
muted
loop
className='w-full h-full absolute inset-0 rounded-2xl object-cover'></video>
</div>
and this is vercel.json
{
"rewrites": [
{
"source": "/((?!.*\\..*$).*)",
"destination": "/index.html"
}
]
}
url : Vite + React
framewroks , react-dom-router , react-modals , react-icons