clifolio. portfolios that live in the terminal.

This is a submission for the GitHub Copilot CLI Challenge

What I Built

clifolio is an interactive terminal-based portfolio/resume viewer. Developers create a simple YAML config file, host it as a GitHub Gist, and anyone in the world can view their portfolio by running:

npx clifolio @your-github-username

For example, you can see my own portfolio (GitHub Gist yml file):

npx clifolio @depapp

No websites to deploy, no frameworks to learn, just a beautiful, animated portfolio rendered right in the terminal.

Key Features

• ASCII art header, your name rendered in figlet with theme-matched colors
• Visual skill bars, animated progress bars for your tech stack
• Experience timeline, clean vertical timeline for work history
• Project showcase, cards with tech tags, GitHub star counts, and clickable URLs
• Education section, degrees and certifications
• Contact info, with emoji icons and full URLs
• Keyboard navigation, arrow keys or vim-style h/l to switch between sections
• Typing animation, smooth character-by-character text reveal
• 5 built-in themes: default, ocean, dracula, monokai, nord
• Interactive scaffolder, npx clifolio init walks you through creating your config
• Loading spinner, animated dots while fetching remote data
• Friendly error messages, clear guidance when things go wrong

How It Works

The key insight behind clifolio is that you don't need a website to share your portfolio. Instead, you host your config as a GitHub Gist, and anyone can view it from their terminal.

For portfolio owners:

1. Run npx clifolio@latest init to generate a clifolio.yml config file interactively
2. Edit it with your skills, experience, projects, and contact info
3. Preview locally with npx clifolio --file clifolio.yml
4. Go to gist.github.com and create a public gist named exactly clifolio.yml
5. Paste your config content and save

For viewers:

npx clifolio @your-github-username

That's it. no servers, no hosting, no deployments. The CLI fetches the gist via the GitHub API (api.github.com/users/{username}/gists), finds the file named clifolio.yml, downloads and validates the YAML with Zod schemas, and renders an interactive Ink (React for CLI) application with keyboard navigation and animations.

Anyone with a terminal and Node.js can view any published clifolio portfolio from anywhere in the world.

Tech Stack

• TypeScript + Node.js: type-safe, modern JavaScript
• Ink (React for CLI): component-based terminal UI
• Zod: runtime schema validation for YAML configs
• Figlet: ASCII art text generation
• Commander: CLI argument parsing with subcommands
• js-yaml: YAML config parsing

Demo

🔗 npm package: https://www.npmjs.com/package/clifolio
🔗 GitHub Repository: https://github.com/depapp/clifolio

Try it yourself

# Create your own
npx clifolio@latest init

# View the sample portfolio
npx clifolio --file clifolio.yml

# View with a different theme
npx clifolio --file clifolio.yml --theme dracula

Screenshots

Header with gradient ASCII art and navigation tabs:

Skills section with progress bars:

Friendly error handling:

My Experience with GitHub Copilot CLI

GitHub Copilot CLI was my development companion throughout this entire project, and it fundamentally changed how I approached building clifolio.

How I Used Copilot CLI

Architecture & Planning: I started by describing what I wanted to build: "a terminal portfolio generator with YAML config, GitHub Gist integration, and interactive keyboard navigation." Copilot CLI helped me think through the architecture, suggesting the component structure, the data flow from YAML → Zod validation → React/Ink rendering, and the theme system design.

Scaffolding at Speed: Copilot CLI generated the entire project scaffolding: package.json with ESM config, tsconfig.json with the right JSX settings for Ink, directory structure, and all the initial boilerplate. What would have taken 30+ minutes of documentation-reading was done in seconds.

Component Development: Each Ink component (Header, Skills, Experience, Projects, etc.) was built with Copilot CLI's assistance. It understood the Ink/React paradigm and generated proper TSX components with the right imports, hooks, and rendering patterns. The progress bar visualization in Skills and the timeline layout in Experience were particularly impressive. Copilot CLI suggested the Unicode block characters (█░) and pipe characters (│) that make the terminal UI feel polished.

The Tricky Parts: Copilot CLI was especially valuable for:

• Zod schema design, it suggested the right schema structure with optional fields, URL validation, and min/max constraints for skill levels
• GitHub Gist API integration, it knew the exact API endpoints and response shapes for fetching user gists
• Ink v4+ ESM setup, navigating the ESM-only configuration with React JSX transform settings is notoriously tricky, and Copilot CLI got it right
• Commander subcommands, setting up init as a subcommand with view as the default required careful Commander configuration

Debugging & Polish: When I hit runtime errors (like Ink's strict "text must be inside <Text>" rule), Copilot CLI quickly identified the issue and suggested the fix. It also helped me refactor the App component to properly separate the theme provider from the inner content that needs theme access.

Impact on Development

Building clifolio with Copilot CLI felt like pair programming with someone who deeply understands the entire Node.js/TypeScript/React ecosystem. The entire project, from zero to a fully functional, polished CLI with 5 themes, 9 components, keyboard navigation, animations, GitHub Gist integration, and interactive scaffolding was built in a single session.

The biggest win was confidence: Copilot CLI didn't just write code, it helped me make informed decisions about architecture, library choices, and edge cases I hadn't considered (like GitHub API rate limiting, Zod error formatting, and ESM compatibility).