Bookmark landing page with React and Motion

Solution retrospective
I’m thrilled to have completed my first React project! Excited to keep improving and explore more advanced concepts. Feedback and suggestions are greatly appreciated!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Descieux360
Very clean design
- P@NikitaVologdin
- Layout:
- I am suggesting to increase with of the decoration elements to follow the design. But since you are using img tag to render svg from the figma it is impossible. So i suggest:
- use inline svg and with css control its width.
- or make a div and use border radiuses (this option you can checked in my work, it is still not perfect though). I believe this approach is more preferable due to less document size.
- "get it on firefox button on hover needed to be transparent"
- In the accordion component no bottom border for the last child.
- Animations:
- Tabs section. Cool animation idea though, but should look more smooth. Know framer motion not easy, just highlighting for further discussion.
- Animation glitch when start using tabs section for the first time.
- In the same section distance between left viewport border and decoration element I think can be fixed by the
- Accordion works funny when expanding items. They like expand in opposite direction.
- Also I believe you can add animation for error status on the email input.
- Responsiveness
- Dialog menu can be scrolled to the overflow on x,y axis. I suggest use css:
body:has(.dialog[open]) { overflow: hidden; }
- Download items looks odd from 672px width of the viewport.
- Performance
- Suggest you to check you app in the lighthouse. Can be found in chrome dev tools. You can improve performance hosting fonts, optimising images and etc.
Flawless work with the accessibility. Awesome layout implementation. Cool animation ideas. Very like your work. Thank you for reading.
Best, Nikita
- I am suggesting to increase with of the decoration elements to follow the design. But since you are using img tag to render svg from the figma it is impossible. So i suggest:
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