โœจ
WWCode Tokyo Creative Coding Study Session
  • ๐Ÿ README
  • ๐Ÿ—“๏ธSessions
    • ๐ŸŽจSession 1: "Great Artists Steal (With Permission)"
    • ๐Ÿ”ณSession 2: CSS Art
    • ๐Ÿ–Œ๏ธSession 3: Developer Tooling
    • Bonus Session: WWCode Connect
    • โš™๏ธSession 4: Processing
    • ๐Ÿ˜‚Session 5: Emoji
    • ๐Ÿ“–Session 6: Tech Zines
    • ๐Ÿ™Session 7: GitHub Profile Customization
    • ๐ŸกSession 8: Create a "Collection" Website
    • ๐Ÿค–A.I. for Humor
  • ๐ŸงฐResources
    • ๐ŸŒˆColor
    • ๐Ÿ› ๏ธTools
    • ๐Ÿ˜ŠUnicode: Emoji, Symbols, and more
    • ๐Ÿ–ผ๏ธImagery & Assets
    • ๐Ÿ‘ฏโ€โ™€๏ธMember Show and Tell
  • โ”F.A.Q.s
    • ๐Ÿช™What about NFTs?
Powered by GitBook
On this page
  • How does it work?
  • That's great, but why does this matter?
  • How do I get started?
  • I want to use a template
  • I want to design my own profile with components
  • Some (opinionated) advice on metrics
  • Sources & Further Reading
Edit on GitHub
  1. Sessions

Session 7: GitHub Profile Customization

PreviousSession 6: Tech ZinesNextSession 8: Create a "Collection" Website

Last updated 2 years ago

is one of the most popular places for developers to showcase their portfolio online. Did you know that you can make your profile unique by editing a special repository? Let's dive in!

How does it work?

Say your username is github-coder. If you create a new public repo with the same name as your username, e.g. https://github.com/github-coder/github-coder, this repo's README.md will be placed on your profile page at https://github.com/github-coder for everyone to see. The file uses , an open-source markup language that is popular with developers. A full guide is here:

That's great, but why does this matter?

GitHub is a place for storing code, but it's also a place to collaborate on projects, share your work, or even showcase your portfolio to land a new job. Let's take a look at some examples of unique GitHub profiles:

How do I get started?

I want to use a template

If you're looking for something simple, or not confident about design, check out the following tools

I want to design my own profile with components

Widgets (Badges, links, etc.)

Images

ASCII Art

Some (opinionated) advice on metrics

Many GitHub widgets focus a lot on metrics to measure output. These can be fun for some folks, but they notably don't measure quality, and sometimes conversations about GitHub commits are turned into an unreasonable measure. "Good developers" aren't measured in Lines of Code written, or commits per day.

Sources & Further Reading

I once wrote a bot that backed up our build server's configuration to GitHub every three hours. For security reasons, I created an isolated GitHub account with access to only one repo. The bot's commit history looked like a grid of uniform green. To the outside world, it might look like the perfect developer. But it was a mindless script running via . Remember that , and it's normal to take breaks, have work / life balance, and don't get overly focused on numbers.

๐Ÿ—“๏ธ
๐Ÿ™
Jenkins
cron job
commits can be gamed
https://github.com/rzashakeri/beautify-github-profile
https://medium.com/nerd-for-tech/stand-out-by-personalizing-your-github-profile-f0a5d73f2b4d
GitHub
Markdown
Managing your profile README - GitHub DocsGitHub Docs
Official Documentation on profile README
ann-kilzer - OverviewGitHub
This is the Author's profile, using Shields.io
GitHub - BrunnerLivio/brunnerlivioGitHub
This one uses a style from 90s era internet
GitHub - ari-hacks/ari-hacks: ๐Ÿ‘‹๐ŸพGitHub
This one features an animated gif and a minamalist layout
afc163 - OverviewGitHub
This one is simple but whimsical
GitHub - JessicaLim8/JessicaLim8: Profile ReadME! Join my community word cloud!GitHub
This profile leverages GitHub actions to dynamically re-render a word cloud
Logo
kylepls - OverviewGitHub
This example uses anchor links to drive a Tic-Tac-Toe game
GitHub - abhisheknaiidu/awesome-github-profile-readme: ๐Ÿ˜Ž A curated list of awesome GitHub Profile READMEs ๐Ÿ“GitHub
More examples of unique profiles
GitHub Profile Readme Generator
Fill out the form and this tool will generate the markdown for you
REHeader
Generates a header for a README file
Shields.io: Quality metadata badges for open source projects
Customizable badges for GitHub and Open Source
GitHub - Ileriayo/markdown-badges: Badges for your personal developer branding, profile, and projects.GitHub
Pre-made Shields.io badges for Markdown
GitHub - gautamkrishnar/blog-post-workflow: Show your latest blog posts from any sources or StackOverflow activity or Youtube Videos on your GitHub profile/project readme automatically using the RSS feedGitHub
Show your Blog Posts
GitHub Stats
GitHub - teoxoy/profile-readme-stats: Showcase your github stats on your profile README.mdGitHub
GitHub - rahul-jha98/github-stats-transparent: Automatically generate summary GitHub statistics images for your profile using Actions, no server requiredGitHub
Transparent Stats
GitHub - lowlighter/metrics: ๐Ÿ“Š An infographics generator with 30+ plugins and 300+ options to display stats about your GitHub account and render them as SVG, Markdown, PDF or JSON!GitHub
Unique Metrics templates
3 Ways to Add an Image to GitHub README | Sean C Davis
free-web-design-resources/ASSETS.md at main ยท ann-kilzer/free-web-design-resourcesGitHub
References for stock photography, backgrounds, etc.
Text to ASCII Art Generator (TAAG)
Logo
Logo
GitHub - ajmeese7/readme-ascii: Turns text into images of ASCII art for GitHub README files.GitHub
ASCII style image generator
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo
Logo