Description:
When using the profile generator and changing the description the page starts overflowing if the Grammarly browser plugin is used.

Device:
Browser: Chrome version 84.0.4147.125 (64-bit) (Engine: Blink)
Operating system: Ubuntu 20.04.1 LTS

Steps to reproduce:

• Open https://markdownprofile.com/
• Edit the description
• Scroll down to the end of the page
• Scroll to infinity and beyond 🚀

I'd love some tips, tricks, feedback and guidance on maintaining my first open-source project. I'm currently using a simple example contributing guide. I'd love to have some help formulating a proper contribution guide to the project. If you have any suggestions feel free to add pull requests to the contributing guide or to discuss below.

Currently the cards used to select the user's template are only clickable on the select button. There also isn't any hover effect on the card itself. The behaviour of the TemplateSelector component should be changed to have hover styling and to have the entire card be clickable.

For the generated code section to be more useful a copy-to-clipboard button should be added. In the generated section at the left top, a button should be added that copies the output markdown to the user's clipboard.

Welcome to the Markdown Profile open source project!

Have you got an awesome idea for a component which you'd like to offer on the website https://markdownprofile.com then this is your invitation to start contributing! The repository working with NextJS and React and there's a templating structure available to add your ideas. If you need some help please mention me in the issue and I can help you. I'd love to teach you a thing or two or to learn something myself.

Ideas might include:

• A template which allows the user to dynamically add badges from shield.io;
• A template which allows the user to post their latest dev.to content;
• A template which allows the user to post StackOverflow content.

Searching for Github markdown profile on your favourite search engine might even give you more inspiration.

How to contribute

In order to contribute, you can make a fork of the project and submit a pull request. To create a new template:

• Create a new issue on the repository with a short description of your idea so we can keep track of who's working on which idea.
• Check out the ReadMe file to find out how to start developing.
• Create a new template class component in the templates directory. Check out the other templates for examples of how to structure your template.
• Add your class component to the index.js file in the template directory.
• Your template should now render on the page.
• Commit, push and submit your awesome MR 🚀

It would be nice to show those that have contributed to the project somewhere on the site. I was thinking of putting a section in the footer where the profile pictures of the contributors (retrieved from Github) would be shown.

Description

Currently, the selection card displays quite weirdly in terms of height. The height of the images is a fixed height which causes them to stretch. The description and title fields can also cause the card to not align properly. Ideally, each field in the card should be the same height compared to the other card. This way the titles, images, authors and descriptions will line up neatly with each other.

Steps to reproduce

• Open the page on any resolution which displays two cards next to each other.
• Notice the difference in title, image, description and author heights.
• Notice the weird stretch in the images

Screenshots