Badges4-README.md-Profile VS markdown-badges

It's only possible because of Shields Project, Simple Icons & beloved all Contributors. We do respect & love our all contributors.

I started on GitHub by uploading a small project (a tool that converts host-names into IPs); so I wanted to make a beautiful README profile. I looked up some examples, and I found that most of them used badges from the alexandresanlim / Badges4-README.md-Profile (a huge collection that I recommend checking out). To be honest, I didn't really like them at first, simply because they were "too pointy". So, as a respectable developer, I decided to make my own.

Don't stop! Wherever you are in your journey, keep going. If you feel like something isn't working, adjust it. If you're getting technicals, but no offers do mock technicals and study up. If you're dumped at behavioral interviews, do mock behaviorals. Hearing nothing back? It's your resume. Don't just spin your wheels and wear yourself out, think like an engineer and try something else! Learn to not fear rejection. "What if the interviewer laughs at me, and says I'm dumb for not knowing x!" Then they're an asshole and they wasted your time. The literal worst that can happen is you figure out that you don't wanna work with them. Actually, the worst that can happen is not to try in the first place. If a job says they want 5 years or less of experience then apply anyway. Job postings are a wish list. If it says they have 2000 applicants already, apply anyway. If a company looks good to you and is asking for qualifications in the vague realm of anything you've seen before, apply. Sometimes a Sr level job posting could also be filled by 3-4 Jr's but you won't know if you don't apply. Qualify and prioritize you job leads. I will spend an hour or so finding job postings, saving the links, and then ordering them by which one's I am most excited about/ think I have the best shot of getting. Then I apply until I run out of energy and usually I won't make it to the end of the list. Then the next day I'll find more postings and order them including the one's I found the day before so I am only applying to postings I am really excited about. Last thing I can think of right now off the top of my head is to max out your LinkedIn and your GitHub profile, and to make a personal website from scratch (no word press). For LinkedIn fill out all the sections, list ONLY skills relevant to your job search, spin past experience to highlight transferable skills, list your title as the title you want, list your portfolio projects and links, and for bonus points make a custom profile banner in Figma or the like instead of the generic bland whatever banners most people have. For your website, make it simple AF (single page is best IMO), have your picture, links to projects, and a SHORT bio where you basically just say "hi." You want it short because recruiters are gonna spend .5 seconds on your website and you don't wanna spend to much time building it. Its not a project, its a display case for other projects (still put the code up on GH tho). Lastly, for GitHub make your profile look nice, have a nice picture of just your face as the prof pic, list your stack (use badges for some visual flair), and pin your projects to the page as well. Stats can be a good section to include as well. Avoid walls of text, no one will read it. Don't worry a ton about the "wall of green." If you are working on your projects consistently the commits you make naturally will be enough. As a bootcamper/self-taught/straight out of college/anyone with no professional tech experience, hiring managers are going to care most about your technical interview and your projects. They don't care about your GA cert, or the Udemy course you took, or the college degree you may or may not have. They care about what you can do. So show them. If you really knock these out of the park they will CARRY you (mostly, you still need to be able to explain them, and talk about your code in a meaningful way). Not all projects need to be visually flashy, and I am a big proponent of simple is better, BUT if your project has a GUI make it look decent. At the very least it will turn off recruiters and other non-technical people (and many technical people as well for that matter) if it is clear you put no effort into the appearance of your project. I can't stress enough that by look decent I mean a single column app that doesn't break when you change the screen size and has a color scheme that is intentional. Whatever you do, be intentional about it because you will need to be able to talk fluently and concisely about your intentions in your projects. Lastly, make your README docs spectacular. Have an intro section with a picture or (better yet) a GIF of your app in action, if it needs to be installed or setup in any way have directions that are so simple it is broken down BARNEY STYLE. Have a section where you talk about your planned features, what is the minimum viable product, and your proposed timeline for the project. If you do all this and really polish your README it WILL be noticed.

I cleaned up my GitHub a bit, based on the instructor's advice, then returned back to my little OS project on the old Acer Inspire 5740 (Win7, Intel i3, 4GB). I decided to install Peppermint 10 (so fast!) after pulling everything (15MB) off the old girl and onto an external 1TB usb drive. I might make the future-upgraded Dell a server.... and run some other light Linux system.

Thanks to Anuraghazra for the GitHub Stats badge Thanks to For The Badges for the powered by badges Thanks to Alexandresanlim for the social & language badges Thanks to Ileriayo for the language, tool, & framework badges

Tech stack badge images can be find here, Skill badge

Alexandresanlim’s Repo

Badges: https://github.com/Ileriayo/markdown-badges

</code></li> <li><code><style></code></li> <li><code><xmp></code></li> <li><code><iframe></code></li> <li><code><noembed></code></li> <li><code><noframes></code></li> <li><code><script></code></li> <li><code><plaintext></code></li> </ul> <blockquote> <p>💡: To learn more, here's the <a href="https://github.github.com/gfm/#html-blocks">GitHub Flavored Markdown Spec</a> related to HTML blocks.</p> </blockquote> <h3> <a name="finding-inspiration" href="#finding-inspiration"> </a> Finding Inspiration </h3> <p>To help you get started, I suggest looking at other awesome GitHub profiles for ideas. You can go to <a href="https://github.com/abhisheknaiidu/awesome-github-profile-readme">awesome-github-profile-readme</a>, where I've found inspiration when making my profile. </p> <p>Since the profiles are open-source, you can use some of the good ideas for your awesome profile!</p> <p>You can also check out <a href="https://github.com/kshyun28">my profile</a> for some ideas. 😉</p> <h3> <a name="adding-badges" href="#adding-badges"> </a> Adding Badges </h3> <p>For adding badges to your profile, you can check out <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a>. The repository has a wide selection to choose from, ranging from programming languages to streaming platforms like Netflix.</p> <p>If you can't find what you're looking for or want to create custom badges, you can go to <a href="https://shields.io/">shields.io</a>, which is what <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> use. </p> <p>Here's an example where I used <a href="https://github.com/Ileriayo/markdown-badges">markdown-badges</a> on my profile.<br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--rlrJWZvX--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/badges-example_t6jyr6.png" alt="Markdown badges example" loading="lazy" width="800" height="127"></a></p> <h3> <a name="adding-icons" href="#adding-icons"> </a> Adding Icons </h3> <p>For adding a <code>skills</code> or <code>tech stack</code> section to your profile, I recommend using <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> which provide beautiful icons.</p> <p>If your icon is not supported, you can go to <a href="https://simpleicons.org/">simpleicons</a>, which has over 2900 SVG icons for popular brands.</p> <p>Here's an example where I used <a href="https://github.com/tandpfun/skill-icons">skill-icons</a> for my profile's tech stack section. <br> <a href="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--QcxDGziL--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_800/https://res.cloudinary.com/dlieqpdfd/image/upload/v1704616185/GitHub%2520Profile/icons-example_nyo1sn.png" alt="Icons example" loading="lazy" width="800" height="182"></a></p> <h3> <a name="using-emojis" href="#using-emojis"> </a> Using Emojis </h3> <p>In GitHub Flavored Markdown, you can use emojis. To see the full list of supported emojis, you can go to this <a href="https://github.com/ikatyang/emoji-cheat-sheet">emoji-cheat-sheet</a>.</p> <p>If you want to get the list of supported emojis yourself, you can use <a href="https://docs.github.com/en/rest/emojis/emojis#get-emojis">GitHub's Emoji API</a>.</p> <p>Going to <a href="https://api.github.com/emojis">https://api.github.com/emojis</a> on your browser should show a JSON response of all supported emojis.<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight json"><code><span class="p">{</span><span class="w"> </span><span class="nl">"+1"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f44d.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"-1"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f44e.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"100"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f4af.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"1234"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f522.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"1st_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f947.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"2nd_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f948.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"3rd_place_medal"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f949.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="nl">"8ball"</span><span class="p">:</span><span class="w"> </span><span class="s2">"https://github.githubassets.com/images/icons/emoji/unicode/1f3b1.png?v8"</span><span class="p">,</span><span class="w"> </span><span class="err">...</span><span class="w"> </span></code></pre> <div class="highlight__panel js-actions-panel"> <div class="highlight__panel-action js-fullscreen-code-action"> <svg xmlns="http://www.w3.org/2000/svg" width="20px" height="20px" viewbox="0 0 24 24" class="highlight-action crayons-icon highlight-action--fullscreen-on"><title>Enter fullscreen mode Exit fullscreen mode Here's an example where I used emojis for my profile. Adding GitHub Stats For adding cards and stats for your GitHub activity, I recommend using github-readme-stats. You can customize your stat cards with different layouts and themes. Here's an example where I added GitHub stats to my profile. Adding Quotes Adding random quotes to your profile can add a nice touch for visitors. I found github-readme-quotes to be useful for doing just that. Here's what it looks like on my profile. I personally like to add quotes to provide some value to my profile visitors. More Ideas For adding more infographics to your profile, I recommend checking out metrics. This is one of the most starred repositories on GitHub with the github-profile topic, so I couldn't leave this out. Then I found this beautiful resource beautify-github-profile, where you can find more ways to customize your profile. If you're also feeling adventurous, you can explore the github-profile topic here. The repositories are sorted by the number of stars by default. Feel free to explore repositories with the github-profile topic. You might even find ones that aren't used as much but are just what you need. GitHub Profile Achievements While this is not related to customizing your GitHub profile's README.md, I feel the need to include it. If you go to your GitHub profile, you'll notice an Achievements section on the left sidebar. These achievements are fun to collect and can improve your overall GitHub profile. To learn more about what achievements are available and how to get them, check out the list of GitHub profile achievements. Conclusion To recap, we walked through how to create your GitHub profile. Then I showed how to format your profile with GitHub Flavored Markdown and HTML. After that, I shared where you can get inspiration for your own profile. Finally, I gave tips and resources on ways to customize your profile. I hope this can help you in making your awesome GitHub profile. I'd love to see what you can come up with! Thank you for reading and feel free to comment or connect with me here. Resources Managing your GitHub profile README GitHub Basic Writing and Formatting Syntax awesome-github-profile-readme repository markdown-badges repository shields.io skill-icons repository simpleicons.org emoji-cheat-sheet GitHub's Emoji API github-readme-stats repository github-readme-quotes repository metrics repository beautify-github-profile repository repositories with "github-profile" topic github-profile-achievements list

Here is a page that compiles ready-made badges using shields.io that is copy/paste ready: https://github.com/Ileriayo/markdown-badges

Ileryayo

Thanks to Anuraghazra for the GitHub Stats badge Thanks to For The Badges for the powered by badges Thanks to Alexandresanlim for the social & language badges Thanks to Ileriayo for the language, tool, & framework badges

Markdown Badges by Ileriayo Adebiyi

Me: No, I don't make them but got that from a GitHub repository Ileriayo / markdown-badges you just have to copy and paste the code of the respective badge.

Linguagens, ferramentas e ícones de redes sociais Mais ícones