I have updated the solution of this website and added animations using framer motion. The only problem it has now is that a weird white light flashes when changing the page for the first time.
I know that it is because of the white background of the body element, but I cannot figure out how to fix it. It looks annoying and unprofessional. I hope someone might have an answer to this problem.
I hope everyone would love this solution too.
Looking pretty good (and the button animation was really clean!).
Commenting about the questions you asked in your post.
Since you are already using React, a relatively trivial way to go about adding animations is framer-motion, where u can animate both each independent component and also add page transitions.
I also did notice that you are using React Router 6, which makes the use of 'exact' on the Route component redundant.
In terms of the white flash that appears between the page transitions, this is due to the fact <body> defaults to white, so you would have to work around that.
Hope this helps!
Rate my work, please.
Looking pretty clean and following the design, so thumbs up for that!
If you were to improve a few things, here's what I would look into:
Your crew images are losing the original aspect ratio on desktop, making them look a bit squeezed. I would recommend looking into changing how you handle their width/height and adding object-fit to keep the original ratio.
Since you are using React Router, I would highly recommend adding a 404 page, because in this case, a 404 bugs your whole website out.
I'd also recommend looking into ways to make it responsive in mobile landscape viewports. It's a good opportunity to do this here, because design-wise, only a couple of adjustments are required.
Tl;dr: keep on rocking :)
This is the first project that i will use for my portfolio so i want to make sure it looks as good as it can be. what do you think I can do to improve upon this project?
Looking clean! If you are open to suggestions, I would recommend the following:
