Skip to content
Submitted about 2 months ago

Space tourism website using React Router | Styled Componets | Motion

#framer-motion#react#react-router#vite#styled-components
P
Boris•3,920
@makogeboris
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Space tourism multi-page website
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

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
    markus•2,620
    @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 and height 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 serve index.html for all paths. You can configure Vercel to do so by creating a file vercel.json with the following content:

    {
  "rewrites": [{ "source": "/(.*)", "destination": "/" }]
}
    Marked as helpful
    1
    P
    Boris•3,920
    @makogeborisPosted about 2 months ago

    @markuslewin Thank you so much!

    1
  • Devesh shukla•340
    @deveshshuklaPosted about 2 months ago

    Good work buddy 👍

    2
    P
    Boris•3,920
    @makogeborisPosted about 2 months ago

    @deveshshukla Thank you

    1
  • P
    Ishmael Sunday•230
    @okayishmaelPosted about 2 months ago

    Boris awesome work. Looking forward to get on your level. :)

    1
    P
    Boris•3,920
    @makogeborisPosted about 2 months ago

    @okayishmael Thank you

    0
  • Shah Faisal•170
    @Shah-Faisal-cloudPosted about 2 months ago

    Awesome Boris

    1
    P
    Boris•3,920
    @makogeborisPosted about 2 months ago

    @Shah-Faisal-cloud Thank you

    1
  • Jane Odhiambo•80
    @JanespotPosted 28 days ago

    GREAT WORK!

    0
  • Meraki Arcana•40
    @Meraki-ArcanaPosted about 1 month ago

    Very well done!!!

    0

Please log in to post a comment

Log in with GitHub

Join 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