Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions3Comments3

All comments

  • Harsh• 210

    @HarshPrateek559

    Submitted

    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.

    Completed it using Pure CSS, ReactJS, React-Router, and Framer-Motion

    #accessibility#react#react-router#react-testing-library#framer-motion

    1

    P
    Georgios Anagnostou• 130

    @developedbygeo

    Posted

    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!

    Marked as helpful

    0
  • P
    Georgios Anagnostou• 130

    @developedbygeo

    Posted

    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:

    1. 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.

    2. 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.

    3. 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 :)

    0
  • Naser Y Abdulkadir• 190

    @naser23

    Submitted

    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?

    space tourism site solution with react.

    #accessibility#react#react-router

    1

    P
    Georgios Anagnostou• 130

    @developedbygeo

    Posted

    Looking clean! If you are open to suggestions, I would recommend the following:

    • The landing page button could direct to the next page.
    • Crew and destination pages tend to 'jump' a little bit when changing the active selection. You could solve this by adding height: 100% to the destination-info-container.
    • If you change pages, between Crew, Destination and Technology, you see the content is jumping around. Maybe you could set specific container dimensions so that it appears more uniform.
    1