Collection of components for showcasing your Geek for Geeks profile in your portfolio ✨. Built with React and CSS

bamacharan.hashnode.dev/introducing-react-gfg

• 📈 Clean and simple GFG stats, as reusable components
• 🎨 Customizable themes and styles
• 🎉 Fully customizable using CSS
• 🍀 Open source - MIT License

With npm:

npm install react-gfg

With Yarn:

yarn add react-gfg

Each Component has their own default properties. You can overwrite the defaults by passing props into the loaders.

import { GFGProfile } from "react-gfg";

function App() {
  return (
    <div className="w-full flex justify-center items-center">
      <GFGProfile username="bamacharan" />
    </div>
  );
}

export default App;

import { GFGProfile } from "react-gfg";

function App() {
  return (
    <div className="w-full flex justify-center items-center">
      <GFGProfile username="bamacharan" img={"imageURL.png"}/>
    </div>
  );
}

export default App;

import { GFGProfile } from "react-gfg";

function App() {
  return (
    <div className="w-full flex justify-center items-center">
      <GFGProfile username="bamacharan" ShowImg={"none"}/>
    </div>
  );
}

export default App;

The GFGProfile component uses the following CSS classes and styles:

• .card: Styles for the main container of the profile card.
• .profile-container: Styles for the container that holds the profile image and information.
• .image-container: Styles for the container that holds the profile image.
• .profile-image: Styles for the profile image itself.
• .info-container: Styles for the container that holds the user's information.
• .username: Styles for the username text.
• .institution: Styles for the institution text.
• .info-row: Styles for the row that contains the institute rank, current streak, and max streak.
• .info: Styles for the labels in the information sections.
• .value: Styles for the values in the information sections.
• .info-main: Styles for the main information section that contains languages used, coding score, and total problems solved.
• .error: Styles for the error message when the username is not provided.

• body: Change the font family for the entire component.
• .card: Change the background color and gradient of the main card container.
• .username: Change the color and font weight of the username.
• .username a:hover: Change the color of the username link on hover.
• .institution: Change the color and font size of the institution text.
• .info-row: Change the color and border styles of the information row.
• .info: Change the font weight of the information labels.
• .value: Change the color and font weight of the information values.

• .card: Change the maximum width and border radius of the main card container.
• .image-container: Change the width and height of the profile image container.
• .profile-image: Change the object-fit property of the profile image.
• .profile-image:hover: Change the scale transformation of the profile image on hover.
• .info-container: Change the padding of the information container.

• .profile-image: Add or modify the transition animation for the profile image on hover.

You can also add or modify other styles as needed, such as font styles, spacing, and layout adjustments, by targeting the appropriate CSS classes or creating new ones. For more information here

• clone the repo

git clone https://github.com/BamaCharanChhandogi/react-gfg.git

• Install the packages

npm install
#or
yarn install

• To run example website

cd example

npm run dev
#or
yarn dev

• Run the test

npm run test
#or
yarn test

If you would like to contribute to this project, please follow these steps:

• Fork the repo
• Clone the repo git clone https://github.com/BamacharanChhandogi/react-gfg.git
• Create your feature branch (git checkout -b feature/YourFeature)
• Commit your changes (git commit -am 'Add some feature')
• Push to the branch (git push origin feature/YourFeature)
• Create a new Pull Request

react-gfg is released under the MIT license.