@SheeloveDol
Posted
Congrats on the end results!
I really like the fade-in animation you've added to the cards. And I must say that I'm quite impressed with the structure of your app in terms of how neat and readable it is. I hope to get to that level soon lol. So I'll be referencing your code here and there for my next project if you don't mind.
There is a part where when we're sizing down to smaller screens where the profile card is uneven with the activity cards but once you reach the mobile resolution it works perfectly again. So that might be something to look into but overall I don't think it is a huge deal.
Again, job well done!
@aweliego
Posted
@SudZero848 Thank you so much for your kind comment! I'm very flattered of course if that inspired you and helps you 😊
Indeed between the wide and smaller screens (the tablet styles if you will) there is a state where the sidebar does not have the same height as the cards (if that's what you meant). After many attempts to try and fix this, I actually decided to leave this alone since it was just a few pixels and the design was more about the computer and mobile views. 😆 But well spotted.
It's the first time I looked into that kind of animation, I was surprised by how simple it was to add it, just pure CSS!
As for the structure: if that's of any interest for you, this approach of really breaking down every thing in as many components as possible and keeping the CSS and JS files of each component together was the one taught in the React projects of Codecademy, so I just kept on using the same pattern since then. In my README I also referenced a video tutorial from John Smilga, in there all the CSS was in one single file but the way he breaks down the components was really inspiring too. So I can recommend these two resources if you're looking to get to that kind of structure. :) That being said, I also saw another solution to this challenge where they were only two components and one CSS file and thought it was quite a clear and readable solution as well (I even bookmarked it), so I do think other approaches are valid!
Cheers again!
