Submitted almost 3 years ago

Scoot multipage website | React, Framer Motion, Tailwind CSS

accessibility, framer-motion, react, tailwind-css, vite

Karol Binkowski•1,620

@GrzywN

A solution to the Scoot multi-page website challenge

Preview Code

Solution retrospective

Hey everyone 👋 !

Today I finally finished the project and what can I say, it was huge and took me a long time to do it. Some decisions in the design annoyed me a bit, because I had to use special props to change the gap between sections, and the arrows on the sections differed from each other, but only on certain breakpoints, which obviously doesn't fit a bit with the main idea of reusable components from React. Nevertheless, I'm happy with the final result, and you can judge this one for yourself.

In the project I additionally added an animation of the arrows in the main Hero section and simple transitions between pages using Framer Motion.

I tried to keep the code clean, but I am aware that some things are inconsistent and badly done mainly prop names, variables and functions/handlers. If you know of any best practices or any article about naming props, handlers typically for React I would appreciate it. You can also let me know where you think the name should be changed to a more meaningful name or just which name you think should be named differently. I'm also aware of cut off footer background (I might fix it in the future).

This was also my first intermediate challenge, so any feedback is welcome here 😁

Code

Please log in to post a comment

Community feedback

Miroslav•180
@miroslavdurin
Posted almost 3 years ago
Hello and congratulations on finishing this project. This was also my first intermediate project and it was a bigger challenge than I expected... I've found 2 issues, which had bothered me as well:
- on the main paige Learn more links don't seem to be working. Problem is that it can't find the route, since it is deployed on Netlify and not on a local server. You should go to your public folder and make a _redirects file. Then you should put this code inside: /* /index.html 200. You can read more about that here: LINK
- second issue is that I don't see animations working. I think the problem is somewhere in the utils folder, because if I simply put this code:
```
<motion.div
      initial={{opacity: 0}}
      animate={{opacity: 1}}
>
```
animations start to work. And btw, I've noticed that you have <AnimatePresence> component wrapped around your Router, this component is necessary only if you want to have exit animations on rout changes, and you haven't used exit animations...I would love to help you more with animations, but I don't really understand the code inside of utils folder, but if you need a help with exit animations let me know, or you can check on my GitHub too...
Marked as helpful
Lucas 👾•104,160
@correlucas
Posted almost 3 years ago
Hello Karol, congratulations, another great solution as always. I liked a lots that you've reached an extreme level of details, its almost pixel perfect (only the logo is a little bit bigger). Super cool 👏👏

Its really great the arrow animation you did animating two different elements at once, I just loved it.

You're the second person in FEM I saw with pixel perfect solutions, do you use any tool to help you building the html/css exactly as the Figma design or you just have a good eye for minimal details? There's something you do to overlay the reference and live seeing if they match?

I want to reach pixel perfect for my challenges too, its so cool see the slider matching 100% the reference.

I don't have any considerations about your solution is just perfect, I had only to give the compliments for the pixel perfect output. 👏👏👏

Lucas
Marked as helpful

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