ASCII art for a developer portfolio

Make a developer portfolio stand out with an animated ASCII hero, a terminal-style about section and live ASCII charts.

Loading the builder…

/WHY

A portfolio has a few seconds to say who you are. An animated ASCII hero beside your name says you care about craft, and it costs a few kilobytes, so the page still loads instantly.

Type your name, a line about what you do and your projects, one per line. The builder writes a complete single-file site, ready for GitHub Pages, plus a GitHub profile README in the same style.

/EXAMPLES

Ready-made examples to copy

Each one is complete. Copy it as it is, or change the piece name to any piece in the library.

Projects as one line each

The builder reads name | description | link. Add as many lines as you like.

fastq | A job queue in 400 lines of Go | https://github.com/you/fastq
linty | Lint rules for API schemas | https://github.com/you/linty
notes | Writing about databases | https://you.dev/notes

GitHub profile README

A repo named exactly like your username shows its README on your profile.

<p align="center"><img src="spinning-torus.gif" alt="Spinning torus" width="600"></p>

### Hi, I'm Ada

Software engineer building developer tools.

- [**fastq**](https://github.com/you/fastq): A job queue in 400 lines of Go

A terminal-style about section

Pair the hero with a section that looks like a shell session.

<pre style="font:14px/1.6 ui-monospace,monospace;background:#000;color:#a3e635;padding:20px">
$ whoami
ada, software engineer
$ cat interests.txt
databases, compilers, small fast tools
$ ls projects/
fastq  linty  notes
</pre>

How to do it

Use a scene or a 3D shape as the hero.
Use a terminal session or a typewriter piece in your about section.
Embed each with the same script tag.

/GUIDE

Keep the work first

The art is the frame, your projects are the picture. One hero piece is enough; let the cards below link straight to the code, the demo or the write-up.

Publishing

Create a repository named yourname.github.io, add the index.html from the builder, push, and it is live within a minute. A custom domain is a CNAME file and one DNS record away.

Pieces that work well for this

Open any of them to copy the code or export.

Arctic IcebergsLandscapes

Aurora Cabin SnowfallLandscapes

Autumn ForestLandscapes

Autumn Pagoda MaplesLandscapes

Autumn Road CyclistLandscapes

Balloon Valley SunriseLandscapes

Blinking CursorLettering

Bouncing LettersLettering

/FAQS

ASCII art for a developer portfolio: frequently asked questions

Q. How do I make my developer portfolio stand out?

Lead with one detail that shows you care about craft, then let your work take over. An animated ASCII hero beside your name does that in a few kilobytes, and project cards below link straight to code and demos. The builder writes that whole developer portfolio as one HTML file.

Q. How do I build a terminal portfolio website?

Start with the builder's page, which already uses monospace labels on a dark background, and pick the Terminal Session piece as the hero for a shell look. Then add a terminal-style about section: a pre block with commands like whoami and ls projects, as in the example on this page.

Q. What does the developer portfolio builder generate?

It generates a complete single-file index.html: your name, what you do, links to your GitHub profile and email, an animated ASCII hero and a card for each project. It also writes a GitHub profile README in the same style and exports a 600-pixel GIF of the hero to go with it.

Q. How do I add my projects to the portfolio?

Type one project per line in the Projects box, as name, description and link separated by vertical bars. The builder turns each line into a card that links to the code, demo or write-up, and the preview shows the first three. Add as many lines as you like.

Q. How do I publish my developer portfolio on GitHub Pages?

Create a repository named yourusername.github.io, add the index.html from the builder, and push. It goes live at that address within a minute or two. To use your own domain, add a CNAME file with the domain name and point one DNS record at GitHub Pages.

Q. Do I need to know HTML to make the portfolio?

No. Fill in your name, role, projects, GitHub username, email and accent color, then download index.html. You can upload it to a GitHub repository through the website, with no command line at all. If you do know HTML, the file is short and easy to edit.

Q. Can the portfolio builder also make my GitHub profile README?

Yes. The GitHub profile README tab writes a README with the hero GIF, a short intro and your project list. Create a repository named exactly like your username, add that README, and save the GIF from GIF for profile README into the same repository so the image path works.

Q. How do I change the colors or the ASCII art later?

The accent color is one line at the top of the page's CSS, the --acc variable, so you can change it in seconds. To swap the art, change the piece attribute on the ascii-art element to another slug, or add a look attribute such as dots or binary.

Q. Which ASCII pieces suit a developer portfolio hero?

Shapes and systems read as technical without being loud: Wireframe Globe, Spinning Torus, Tesseract, Double Helix and Lissajous Scope. Game of Life and Digital Rain suit a code-heavy profile, while a scene such as Great Wall Sunset gives a more personal tone. Pick one; a single hero is enough.

Q. Will an animated ASCII hero slow down my portfolio?

No. Each piece is a few kilobytes, the script loads as a module after your content, and the piece only animates while it is on screen. Your name and role are real HTML text, so they appear first and recruiters can read them before the art even starts.

Q. Does the ASCII portfolio work on phones?

Yes. Below 800 pixels wide, the hero stacks the art under your name instead of beside it, and the project cards fall into a single column. The art box hides any overflow, so a wide piece crops neatly rather than making the page scroll sideways.

Q. How much ASCII art should a developer portfolio have?

One piece is plenty. The art is the frame and your projects are the picture, so let the hero set the tone and keep the rest of the page about your work. A second piece fits only where it explains something, such as a diagram beside a project write-up.

Other ways to use it

Each one has its own builder.

Dashboard

ASCII charts for status pages and dashboards

Animated ASCII bar charts, gauges, sparklines and uptime bars for status pages, internal dashboards and terminal tools.

AI agent

ASCII art with AI coding agents

Tell Claude, Cursor or any AI coding agent to add an animated ASCII piece to your project. Copy-paste instructions included.

ASCII art GIFs for newsletters and email

Export animated ASCII art as a GIF for newsletters and email, where scripts and video do not play.

README

Animated ASCII art for a GitHub README

Put an animated ASCII banner, scene or loader at the top of your GitHub README. Copy a GIF or SVG, no build step, works in GitHub's dark and light themes.

Website

An animated ASCII hero for GitHub Pages

Add a live, animated ASCII art hero to a GitHub Pages or personal website with one script tag. No framework, no build step, under 10 KB per piece.

Terminal

A terminal welcome screen with animated ASCII art

Show an animated ASCII piece every time you open a terminal, or set a still one as your server's message of the day. Works with zsh, bash and fish.