clifolio

clifolio. portfolios that live in the terminal.

A CLI that generates a beautiful, interactive terminal-based portfolio/resume from a YAML config. Anyone can run npx clifolio @username to see your portfolio with animations, project showcases, and contact info — right in the terminal.

✨ Features

• 🎨 5 built-in themes — default, ocean, dracula, monokai, nord
• ⌨️ Keyboard navigation — arrow keys or vim-style h/l to switch sections
• 🔤 ASCII art header — your name rendered in figlet with theme-matched colors
• 📊 Visual skill bars — progress bar visualization for your tech stack
• 📁 Project showcase — cards with tech tags, star counts, and clickable links
• 💼 Work timeline — clean timeline layout for experience
• 🔗 Open links — press o to open project URLs or contact links in your browser
• ✍️ Typing animation — smooth character-by-character reveal effect
• 🖥️ GitHub Gist integration — host your config as a gist, share via npx clifolio @you
• 🛠️ Interactive scaffolder — npx clifolio@latest init creates a config file for you
• ⚡ Loading spinner — animated feedback while fetching remote portfolios
• 🎯 Friendly errors — clear, actionable error messages

🚀 Quick Start

# View someone's portfolio
npx clifolio @username

# View from a local YAML file
npx clifolio --file portfolio.yml

# Create your own portfolio config
npx clifolio@latest init

📋 Setup Your Portfolio

Step 1: Create your config file

npx clifolio@latest init

This will interactively ask for your name, title, tagline, and GitHub username, then generate a clifolio.yml file.

Step 2: Edit your config

Open clifolio.yml and fill in your skills, experience, projects, education, and contact info. See the Config Reference below for all available fields.

Step 3: Preview locally

npx clifolio --file clifolio.yml

Make sure everything looks good before publishing.

Step 4: Publish to GitHub Gist

This is how other people will access your portfolio from anywhere in the world.

• Go to gist.github.com
• Set the filename to exactly clifolio.yml
• Paste the contents of your local clifolio.yml into the gist
• Click "Create public gist" (must be public, not secret!)

⚠️ The gist filename must be clifolio.yml — this is how the CLI finds your portfolio.

Step 5: Share your portfolio

Once your gist is live, anyone can view your portfolio by running:

npx clifolio @yourgithubusername

That's it! No servers, no hosting, no deployments. Your portfolio lives as a simple gist and is viewable from any terminal in the world.

How it works under the hood

When someone runs npx clifolio @username, the CLI:

• Calls the GitHub API to list the user's public gists
• Finds the gist containing a file named clifolio.yml
• Downloads the raw YAML content
• Validates it against the schema
• Renders the interactive portfolio in the terminal

Usage

Usage: clifolio [options] [command]

🖥️  View developer portfolios right in your terminal

Options:
  -V, --version         output the version number
  -h, --help            display help for command

Commands:
  init                  Create a new clifolio.yml config file interactively
  view [options] [source]  View a portfolio in the terminal (default)

View command options

  -f, --file <path>     Path to local YAML config file
  -t, --theme <name>    Override theme (default, ocean, dracula, monokai, nord)
  --no-animation        Disable animations

⌨️ Keyboard Shortcuts

Key	Action
← / h	Previous section
→ / l	Next section
o	Open link in browser
q	Quit

📝 Config Reference

Create a clifolio.yml file with the following structure:

theme: ocean  # Options: default, ocean, dracula, monokai, nord
name: "Your Name"
title: "Your Title"
tagline: "Your tagline"

about: |
  A short bio about yourself...

skills:
  - name: TypeScript
    level: 95       # 0-100
  - name: React
    level: 90

experience:
  - company: "Company Name"
    role: "Your Role"
    period: "2022 - Present"
    description: "What you did..."

projects:
  - name: "Project Name"
    description: "What it does"
    tech: ["TypeScript", "React"]
    url: "https://github.com/you/project"
    stars: 100

education:
  - institution: "University"
    degree: "B.S. Computer Science"
    year: "2020"

contact:
  email: "[e-mail]"
  github: "yourusername"
  linkedin: "yourusername"
  twitter: "yourusername"
  website: "https://yoursite.dev"

🎨 Themes

Five built-in color themes:

Theme	Vibe
default	Clean dark (One Dark Pro)
ocean	GitHub-inspired blues
dracula	Purple-accented dark
monokai	Classic editor palette
nord	Arctic, cool-toned

Override with --theme:

npx clifolio@latest @username --theme dracula

🛠️ Development

# Install dependencies
npm install

# Build
npm run build

# Run locally
node dist/index.js --file examples/sample.yml

# Watch mode
npm run dev

🏗️ Built With

• Ink — React for interactive CLIs
• React — Component-based UI
• Zod — Schema validation
• Figlet — ASCII art generation
• Commander — CLI framework
• js-yaml — YAML parsing

📄 License

MIT