All posts

3 min readWeb Development

I Put My Portfolio in the Terminal: npx somraj

Run npx somraj and my portfolio opens in your terminal. Here is how it works, and how you can build your own in an afternoon.

  • #nodejs
  • #cli
  • #npm
  • #npx
  • #portfolio

I Put My Portfolio in the Terminal: npx somraj

Open a terminal and run this:

npx somraj

You get my business card, right there in the terminal:

+───────────────────────────────────────────────+
│                                               │
│   § 00 — HELLO                                │
│                                               │
│   Somraj Mukherjee                            │
│   Frontend Engineer · Pune, India             │
│                                               │
│   web       portfolio-iamsomraj.vercel.app    │
│   github    github.com/iamsomraj              │
│   linkedin  linkedin.com/in/iamsomraj         │
│   x         x.com/iSomraj                     │
│   email     iamsomraj@gmail.com               │
│                                               │
│   run npx somraj any time to see this again   │
│                                               │
+───────────────────────────────────────────────+

Below it is a menu. Use the arrow keys to read about my experience, skills, projects and latest posts, or to open my GitHub or send me an email.

I saw this idea on another developer's GitHub and wanted one too. This post is a quick tour of how it works, so you can build your own.

Code: github.com/iamsomraj/somraj-cli · npm: npmjs.com/package/somraj

How npx runs your package

npx somraj downloads the package called somraj from npm and runs it. Which file it runs comes from the bin field in package.json:

{
  "name": "somraj",
  "type": "module",
  "bin": { "somraj": "bin/somraj.js" }
}

That file starts with a special first line. It tells the system to run the file with Node:

#!/usr/bin/env node

That's really the whole trick. Everything else is just a normal Node script.

The pieces

The CLI is small. Three parts do most of the work:

  • The card is drawn by hand with box characters like │ and ─. No library needed.
  • The menu uses @clack/prompts. It gives you a nice arrow-key select in a few lines.
  • The colours come from picocolors, a tiny colour library.

I kept the same look as this website: orange + corners and § section labels. Your CLI is part of your brand too, so make it feel like you.

Keep the data in one place

I didn't want to copy my experience and projects into a second repo. So the website serves them as JSON at /profile.json, built from the same config the site uses.

The CLI fetches that file. If the site is slow or you're offline, it uses a copy that ships with the package:

export async function loadProfile() {
  try {
    const res = await fetch(PROFILE_URL, {
      signal: AbortSignal.timeout(2000),
    });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    return await res.json();
  } catch {
    return loadSnapshot();
  }
}

The best part: when I change jobs or write a new post, npx somraj shows it straight away. No new release needed.

Be nice to the terminal

A few small things make a CLI feel polished:

  • No menu when piped. If someone runs npx somraj | less, there's no keyboard to answer a menu. So I check process.stdout.isTTY and print everything instead.
  • Respect NO_COLOR. Some people turn colours off. picocolors handles this for you.
  • Exit on purpose. A timed-out fetch can leave a socket open, and Node waits for it. So the script exits once the output is written:
process.stdout.write('', () => process.exit(0));

Publishing to npm

First, check that your name is free. A 404 means nobody has it:

npm view your-name

Then log in and publish:

npm login
npm publish --access public

For the first version, give it a few minutes. A brand-new package can take a while before npx can download it.

After that, set up trusted publishing in the package settings on npm. Point it at your GitHub repo and workflow. Now every GitHub release publishes the package for you, with no npm token stored anywhere. npm also shows a provenance badge, which proves the package was built from your repo.

Make your own

  • Pick a free name on npm, ideally your own name.
  • Add a bin file with the #!/usr/bin/env node line.
  • Draw a card and add a menu.
  • Publish, then share the command everywhere: your README, your resume, your email signature.

Or fork my repo, point SOMRAJ_PROFILE_URL (or the default URL in src/data.js) at your own JSON, and change the name.

That's it

A portfolio in the terminal is a small project, but it's fun, and people remember it. Give it a try:

npx somraj

Share this post