
Space tourism website using React Router | Styled Componets | Motion
Design comparison
Solution retrospective
I focused on learning how to build a single-page application (SPA) using React Router and using Styled Components for styling.
What challenges did you encounter, and how did you overcome them?Details in my README.md file in github repo
What specific areas of your project would you like help with?When switching tabs for the first time, the animation feels a bit glitchy. Any tips on improving this with framer motion or any kind of feedback will be greatly appreciated. Thanks!
Community feedback
- P@markuslewinPosted about 2 months ago
Hi!
I think the glitch happens because the browser doesn't know how much space to allocate for an image that hasn't loaded yet. Adding
width
andheight
to the image should fix it, e.g:function Tabbed() { return ( <img src={activeTechnology.images.portrait} width={515} height={527} /> ); }
If I go to
/technology
, and refresh the page, I get a 404. Since you're building a SPA, you want to serveindex.html
for all paths. You can configure Vercel to do so by creating a filevercel.json
with the following content:{ "rewrites": [{ "source": "/(.*)", "destination": "/" }] }
Marked as helpful1 - @deveshshuklaPosted about 2 months ago
Good work buddy 👍
2 - P@okayishmaelPosted about 2 months ago
Boris awesome work. Looking forward to get on your level. :)
1 - @Shah-Faisal-cloudPosted about 2 months ago
Awesome Boris
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord