I built a terminal-style GitHub profile generator (animated, free, no install)

Most GitHub profiles are a wall of badges and stat cards. I wanted mine to look like a terminal, so I built
Termfolio: a generator that makes an animated, neofetch-style profile README in about a minute.

You fill in a form, watch a live preview, then copy or download the files. That's it. It runs entirely in your browser and sends nothing anywhere.

👉 Try it: https://termfolio01.netlify.app/
👉 Source: https://github.com/hereisVaibhav/termfolio

What it makes

Your profile gets a terminal window with:

• A neofetch block with your name, role, skills and location
• Animated pixel art (invader, rocket, ghost, robot, heart, coffee cup, UFO) next to it
• A ~/.plan checklist
• A blinking cursor and a row of link buttons

Then there are optional extra cards, each one editable:

• Skills bars that fill in and replay
• Performance rings, with an overall score averaged for you
• Stats cards (years of experience, projects, and so on)
• Four animated pixel-art characters for traits like dedication, hard work and focus
• An ID card with a shimmer effect
• A "Let's build together" grid
• A color palette grid

You can swap any character for another built-in one, or draw your own.

Draw your own pixel art

Custom art is just text. # is a filled square and . is empty:

..#####..
.#.....#.
#..#.#..#
#.......#
#.#...#.#
#..###..#
.#.....#.
..#####..

Add a blank line and another grid to make a second animation frame (up to 4). For characters there's a letter palette: H hair, S skin, C outfit, P pants, B boots, and so on, with color pickers to recolor them.

How to use it

1. Open the generator and type your GitHub username.
2. Fill in your info lines and pick your art and accent color.
3. Download each SVG, and copy the generated README.md.
4. Create a public repo named exactly like your username.
5. Upload the SVGs and the README. Refresh your profile._

One tip: upload the SVG files. Pasting SVG text into GitHub's web editor can corrupt it.

How to use it

1. Open https://termfolio01.netlify.app and type your GitHub username.
2. Fill in your details, pick the pixel art and colors, and switch the extra cards on or off.
3. Download each SVG (use the SVG file list), then click Copy README.md.
4. On GitHub, create a public repo named exactly like your username, with a README.
5. Click Add file → Upload files, drop in the SVGs and commit.
6. Open README.md, click the pencil icon, paste the copied README and commit.
7. Visit your profile and refresh (Ctrl+Shift+R).

Upload the SVGs as files. Pasting their text into GitHub's editor can corrupt them.

Not showing? Check that the repo name matches your username and that the repo is public. If you see an old image, change terminal.svg to terminal.svg?v=2 in the README.

How it works (and what bit me)

termfolio is one HTML file with plain JavaScript. No framework, no build step. The output is pure SVG, and here's what I learned making it work on GitHub:

1. READMEs can't run JavaScript or custom CSS.
So the whole terminal is an SVG shown with an <img> tag. SVG supports animation on its own (SMIL), which is how the cursor blinks and the bars fill.

2. Multi-frame animation with no JavaScript.
Each pixel-art frame is a group, and a discrete <animate> on opacity shows one frame at a time. Two frames already looks like an idle animation.

3. Pixel art from text.
A small sprite engine turns a grid into rectangles. It adds highlight and shadow shades from neighboring cells, draws a dark outline around the shape, and merges runs of same-colored cells into single path segments to keep files small.

4. Spaces get collapsed in SVG text.
xml:space="preserve" didn't help, so I place labels and values at calculated x positions instead of padding with spaces.

5. Keep the output boring.
The generated SVG is ASCII-only (other characters become entities), which avoids encoding surprises when GitHub serves the image.

What's next

• A click-to-draw pixel editor, so nobody has to type # and .
• More characters and theme presets
• Shareable links with your settings pre-filled

It's MIT licensed, so feel free to fork it, add your own pixel art styles, or just use it for your profile. If you try it, I'd love to see your result in the comments. And if it's useful, a ⭐ on the repo helps a lot.

Thanks for reading!