Skip to content
Submitted about 3 years ago

MyTeam Multi-Page Website using NextJS, Styled-Components, GSAP

Shivam•520
@shivjoshi1996
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...myteam multi-page website
  • HTML
  • CSS
  • JS
4advanced

Design comparison

SolutionDesign

Solution retrospective

Hey everyone,

I've used NextJS, Styled-components, and a little bit of GSAP (first time using it) to make this site. (The screenshot looks a little weird due to the animations playing).

Any general feedback would be appreciated, but would specifically appreciate feedback on:

  1. General code organization (any tips on how to make the CSS cleaner, and how to better organize React code).
  2. Feedback on how I've created the general layout - this was a CSS-heavy website so I'm sure there are plenty of ways I could've improved the code.
  3. Feedback on the navigation component - I split the component into two separate components (mobile and desktop) but I assume there is a cleaner way to do this.

I also see I have a few accessibility / HTML issues which I will clean up soon.

Any other comments would be appreciated as this is the hardest challenge I have done so far on the site :)

Community feedback

  • Jon•200
    @jonkarrerPosted about 3 years ago

    Positives : Cool animations, I have never heard of GSAP. Looked easy to set up and use. Everything looked well styled on the client end. Pretty much picture perfect. Better than my attempt I think.

    Negatives : Your code is clean, but the way you styled the divs kinda made it hard to read. The long variable names as components didn't look pretty in my eyes, but to each his own.

    Great Job.

    Marked as helpful
    1
    Shivam•520
    @shivjoshi1996Posted about 3 years ago

    @jonkarrer Thanks for the feedback Jon.

    Yes, GSAP is pretty straightforward to do some of the basic things I am doing, it's probably a bit of an overkill for such basic animations as the library is larger in size than some of the other animation libraries. I'm also going to take a look at Framer Motion, I've seen a few people on here use that. There is also https://motion.dev/ which is one of the smallest libraries.

    Thanks for your feedback in regards to variable names, it's something I'll try to simplify going forward, as I know having these types of long names will make it difficult for other developers to read / work on the code in real-world situations. I'll take a look at your solution for ideas on how to fix that!

    Appreciate the feedback. Thanks!

    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