Code Monkey home page Code Monkey logo

coloredbadges's Introduction

Colored Badges for GitHub profiles

I've put together some badges I for my GitHub profile readme as shown below and thought they might be useful to others.

my github bio page!


The Badges

All badges are available as both SVG & PNG. I've also included the original Figma file I used to create these should you want to change the text.


How to add a readme on your profile

It's super simple!

Create a new repo using your GitHub username as the repo name. Voilร ! ๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰๐ŸŽ‰


Tips for using the Icons

I'm sure you're already a pro with creating GitHub markdown documents, but I thought I'd give you a quick tip anyways.

Always try to use the SVG icons over the png. SVGs are scalable and look fabulous no matter what size device or DPI settings the viewer is using.

You can add an SVG image with a link using the following snippet:

 <a href="#">
    <img src="help/badge1.svg" alt="example badge" style="vertical-align:top margin:6px 4px">
  </a>  

Note how I have also provided margins of 6px for top and bottom and 4px for left and right. This allows the badges to have a little bit of space between them.

Alignment

You can align the badges by wrapping the seconds in a paragraph tag and setting the alignment property.

Left Alignment

<p align="left">
  <!-- Badges go here>
</p>

blogger blogger blogger

Center Alignment

<p align="center">
  <!-- Badges go here>
</p>

blogger blogger blogger

Right Alignment

<p align="right">
  <!-- Badges go here>
</p>

blogger blogger blogger


Editing / Creating you own

The Figma file contains a page detailing how to match the existing badge styles.


Missing a badge you want?

Either create your own with the supplied files or create an issue and if enough others thumbs-up the issue then I'll do my best to get the badge made.

Badge requests

It's super useful to have a few bits of information to speed up badge creation. It's much appreciated but not obligatory for you to provide an example icon/reference image, preferred background color and the text label content.

 badge anatomy

Request Template:

Reference Icon(s):

Preferred Background: FF9900 / Orange

Label Text: Hello World


Badges

Blogging Platforms

blogger dev.to medium microblog rss tumblr wordpress


Developer Tech

Frameworks

angular avalonia bootstrap flutter godot ionic jquery laravel materialize nodejs nodejs_larger phonegap qt react sencha unity uwp vue wpf xamarin_android xamarin_forms xamarin_ios xamarin_mac

Languages

csharp csharp_dotnet css3 dart dart_colour fsharp fsharp_dotnet go html java js php python r rsoftware rust sass swift

Misc

ai chrome cloud datascience desktop edge firefox gamedev iot mobile security tablet tools vr web

Services

aws azure codechef codewars digitalocean dockerhub excercism exchange gcp google_cloud_platform hackerrank kubernetes leetcode npm nuget office 365

Tools

android_studio android_studio_colour bash docker eclipse jetbrains_appcode jetbrains_clion jetbrains_datagrip jetbrains_datalore jetbrains_goland jetbrains_intellij jetbrains_phpstorm jetbrains_pycharm jetbrains_rider jetbrains_rubymine jetbrains webstorm linqpad ndepend powershell visualstudio visualstudio_code vmware xcode


Devices / Manufacturers

cisco mac nintendo pc philips_hue playstation raspberrypi wearables xbox


Pronouns

he / him she / her they / them


Social & Professional

angellist email_me foursquare gitter gmail instagram linkedin meetup outlook reddit skype snapchat soundcloud speakerdeck stackoverflow steam telegram tiktok twitter untappd viber whatsapp


Streaming & Videos

mixer podast twitch vimeo youtube

coloredbadges's People

Contributors

mikecodesdotnet avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

coloredbadges's Issues

Add MySQL

Reference Icon(s): Maybe only the ๐Ÿฌ ?
Preferred Background: What works best
Label Text: MySQL

please create some icons i need

I'd like to have a new badge.

---Request Info:
Reference Icon(s): c(language),c++,sublime text,photoshop

Preferred Background: your wish ,you can select any color which is best for it

Label Text: C,C++,Sublime text,Photoshop

c++ Badge

I'd like to have a new badge.

---Request Info:
please make a c++ badge.

Add Docker and Laravel badge

Based on your Figma file, I made 2 new badges. One for Docker (not the hub) and Laravel framework.

I'll be making a pull request today so they can be added, however I didn't quite figure out which category docker should fall into?

Missing Badges

I'd like to have a new badge.

---Request Info: Could you add badges for; C Programming, XML, C++, Unix and Linux

GCP badge?

Thanks for doing this! would it possible for you to create a GCP badge?

Badges not showing on my profile readme.

I have copied the SVG folder in my repository, and the badges are showing in that repo readme. But the same badges are not getting displayed on my profile
Hope you understand what I meant.
Annotation 2020-07-30 164854
Annotation 2020-07-30 164832

How to use the badges

Hey there! Fantastic idea for creating the badges. I have a question regarding of recommended usage of them.
a) Should I copy the badges to my repo/
b) Should I just link them in my readme like https://github.com/MikeCodesDotNET/ColoredBadges/blob/master/png/devices/cisco%403x.png
c) Is there any CDN or GitHub page for getting the content?

Sorry if the question was a bit silly, but in your readme you gave and example with <img src="help/badge1.svg" alt="example badge" style="vertical-align:top margin:6px 4px"> which is only valid if I have the repo checkout in my personal repo.

Thanks in advance!
PS: Would you consider different styling for the icons for example white or transparent background?

Regards!

Replace current Godot Engine badge

Hi,
I'd like to see a more modern/minimal Godot Engine's badge, following the same style of the others.
Here's the one I've made following your directions:
Badge

This zip contains the badge in .svg, .png and .fig format.
GodotBadge.zip

Thank you very much, waiting for your reply.

[Icon Request] - RSS & Podcast

Might be a bit of a left-field request, but I'd love a mic-based or RSS-like badge as I create a bunch of podcasts that are tech-related. I feel like it would fit with the other icons in the social section.

Badge for R

I'd like to have a new badge.

---Request Info:

Can you create a badge for R Software? Thank you!

Add Scala Badge

HI, would love to have Scala added as a programming language. Thanks

Facebook Badge

I'd like to have a new badge.
i.e. Facebook badge
---Request Info:

Badge for webstorm

Would it be possible to add a badge for webstorm software? Thank you very much ^^

Missing Badges

I'd like to have a new badge.

---Request Info:
Add missing badges

Devpost Badge

I'd like to have a new badge.

Request Info:

I think a Devpost badge would be a great addition to show off hackathon projects!

devpost_logos

SysAdmin badges

I'd like to have a new badge.

---Request Info:

I'd liek to see some badges geared towards AysAdmins, eg Powershell/Bash, VMWare, Windows Server/Exchange/Office 365, Cisco

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.