Skip to content
Lesson 1 of 128% of the course

Make a GitHub profile README that works in light and dark

Build the README at the top of your GitHub profile from blocks in Profile README Studio, with badges and cards it draws itself, and publish it to your profile repository.

Nothing loads from YouTube until you press play. Then Google receives your IP address and may set its own storage. Narrated with an AI-generated voice. Privacy

The README at the top of your GitHub profile is the first thing people see. Profile README Studio builds it from blocks, shows it the way github.com shows it, and draws every badge and card itself, so none of them depends on another server.

Blocks on the left, your README as GitHub shows it in the middle, settings on the right.

Pick a layout, or bring your own

Open Profile README Studio. Start from one of the 31 layouts, from a minimal one to a full dashboard. If you already have a profile README, use Import: it fetches your current README or takes pasted markdown, turns the widgets it knows into blocks and keeps the rest as markdown.

Add your details

In Page settings, type your GitHub username once. Every stats card, streak and badge that needs it uses it from there. Fill from GitHub reads your public profile (name, bio, location, links) and shows each change before it is applied.

Build it from blocks

On the left are the blocks: a header, an about section, stats cards, top languages, a streak, tech icons, featured repositories, socials and more. Click one to add it at the end, or drag it onto the page. Outline lists every block, to reorder them by drag or keyboard.

Search the blocks, then click one to add it or drag it onto the page.

Edit right on the page: click a block to see its settings on the right, double-click text to type into it, and drag blocks to move them.

Check it in light, dark and on a phone

Above the preview, switch between GitHub's light and dark theme and between desktop and phone width. Many widgets have a separate theme for each; the studio sets both, so your README reads well whichever theme a visitor uses.

The same README in GitHub's light theme.

Know where the pictures come from

Most profile READMEs show badges and stats cards from free community servers, and those go down. The studio draws every badge, banner, icon and card itself. Pictures that need no data become files for a profile-assets folder in your profile repository; your stats cards are redrawn there every day by one workflow in that repository. Nothing in your README depends on another server, and the studio never loads other sites' pictures while you build. The blog post on stats cards explains why that matters.

Publish it

Click Export. Copy the markdown or download README.md, then Download all (.zip) for its pictures and add the workflow file if your blocks need one. The export links you to the right GitHub page: create a public repository with exactly your username as its name, and put the README at its root, with the profile-assets folder from the .zip next to it (on github.com: Add file, Upload files, and drag the folder in). GitHub shows it on your profile straight away.

Your progress stays in this browser only.
Contact