Overviews
This is my first ever Hacktoberfest, it is perfect time for me to contribute more to open source community. In this project, I helped the author, Vikas Ukani, on his portfolio page. My pull request got merged and I am really happy about that.
Progress
To be more specific, Vikas faced a problem related to the alignment of his project cards.
After some fixes, the cards are now in good position and new animation when hovering cards has been added as well.
All the fixes are made using Vanilla CSS. Details:
Added a new CSS module file which is styles/ProjectList.module.css
Linked ProjectsList.jsx to the new created CSS module file
Created new classes for projects list and project cards inside ProjectList.jsx
Used Flex Box instead of Grid.
Added animation when users hover project cards.
After some test, I sent a pull request to Vikas.
Code Explanation
I use Flex Box with wrap property so that the cards will be in a same line and if there is not enough space, next cards will move to new line. This can also reduce the complication of grid template and the cards will be also compatible with different devices. After that, giving the cards a specific height will fix the problem of the alignment. To add an animation for the card, I gave a card a box shadow so that users can feel that the cards are floating on the page. When users hover the card, I unset the box shadow and add a margin to top by -5px so that users will see that the card is moving and focused.
Challenge
That was not a big fix but it took me a lot of time to think about the idea and design. I also did a lot of test so that the hovering animation is smooth and reasonable. Choosing appropriate positions and blur effect for the box shadow is a big issue too.
Links
Issue: https://github.com/vikas-ukani/react-next-portfolio-dev/issues/6
Pull request: https://github.com/vikas-ukani/react-next-portfolio-dev/pull/7
Top comments (0)