/skill-icons-builder

Skill Icons Builder is a powerful tool that allows you to showcase your skills effortlessly on your GitHub profile or résumé.

Primary LanguageTypeScriptMIT LicenseMIT

Showcase your skills on your GitHub or resumé with ease!

https://skill-icons-builder.vercel.app/



Skill Icons Builder is a powerful tool that allows you to showcase your skills effortlessly on your GitHub profile or résumé.

Built on top of Skill Icons by tandpfun, this project simplifies the process of showcasing your skills, offering various customization options to ensure the icons fit perfectly with your personal branding!

Features

  • 🔎 Search and Select Icons: Easily search for and select from a comprehensive list of skill icons.
  • 🎨 Customizable Layout: Control the number of icons displayed per line, and choose whether to center the icons.
  • 🌙 Dark and Light Themes: Toggle between dark and light themes to match your preferred style.
  • 🪄 Preview and Export: Preview selected icons and generate markdown or HTML code to easily embed on your GitHub profile or website.
  • 📲 Responsive Design (soon): Built with responsive design in mind, ensuring that you can customize seamlessly across all devices.

Usage

  1. Search for Icons:

    • Use the search bar to find specific skill icons.
    • Click on the icons to select or deselect them.

  2. Customize Your Icons:

    • Toggle between dark and light themes.
    • Center the icons or let them align to the left.
    • Adjust the number of icons per line using the slider.

  3. Generate and Copy Code:

    • Preview the selected icons.
    • Copy the generated Markdown or HTML code for use in your GitHub profile, website, or résumé.

Example

Here's a quick example of how the generated code might look:

  • Markdown: 
    [![My Skills](https://skillicons.dev/icons?i=react,tailwind,typescript&theme=dark&center=true&perline=5)](https://skillicons.dev)

My Skills

My Skills

  • HTML: 
    <p align="center">
  <a href="https://skillicons.dev">
    <img src="https://skillicons.dev/icons?i=react,tailwind,typescript&theme=dark&center=true&perline=5" />
  </a>
</p>

Contributing

Contributions are welcome! If you have ideas for improvements or find a bug, feel free to open an issue or submit a pull request.

  1. Fork the repository.
  2. Create a new branch for your feature or bugfix: git checkout -b my-new-feature.
  3. Commit your changes: git commit -am 'Add some feature'.
  4. Push to the branch: git push origin my-new-feature.
  5. Create a new Pull Request.

Acknowledgements

  • Skill Icons: This project heavily relies on the amazing work done by tandpfun in the Skill Icons repository.
  • shadcn: Styling is provided by shadcn, making the tool visually appealing and easy to use.

License

This project is licensed under the MIT License. See the LICENSE file for details.