devfolio.page - Your Portfolio as Code

INSTALLATION

NPM

Install devfolio globally using npm or your preferred package manager.

npm install -g devfolio

Or use npx to run without installing:

npx devfolio init

REQUIREMENTS

Requirement	Version	Notes
Node.js	>=18.0.0	LTS recommended
npm	>=8.0.0	Comes with Node.js

QUICK START

Create a new portfolio folder with the starter template:

devfolio init

This creates a folder with portfolio.yaml and an images/ directory for your assets.

COMMANDS

devfolio init

Create a new portfolio folder

devfolio init

Interactive prompts will ask for:

Folder name (default: portfolio)
Name, title, location, email
Theme selection
Optional: GitHub, LinkedIn, Twitter, website

devfolio validate

Validate a portfolio YAML file

devfolio validate <file>

Checks for:

Required fields (name, title, location, email, bio)
Valid date formats (YYYY-MM or YYYY-MM-DD)
Valid URLs and email addresses
Proper YAML structure

devfolio render

Generate static HTML from portfolio

devfolio render [file] [options]

Option	Description
[file]	YAML file (default: portfolio.yaml)
--theme, -t <name>	Theme to use (default: srcl)
--output, -o <dir>	Output directory (default: ./site)

YAML SCHEMA

Field	Type	Required	Description
name	string	yes	Your full name
title	string	yes	Your role or title
location	string	yes	City, Country
timezone	string	no	Timezone (e.g., UTC-5)

CONTACT

How people can reach you.

Field	Type	Required	Description
email	string	yes	Email address
website	URL	no	Personal website
github	string	no	GitHub username
linkedin	string	no	LinkedIn username
twitter	string	no	Twitter/X handle

BIO

A short description of yourself. Supports multiline with | syntax.

bio: |
  Line one of your bio.
  Line two continues here.

SECTIONS.EXPERIENCE

Array of work experiences.

Field	Type	Required	Description
company	string	yes	Company name
role	string	yes	Your role/title
date.start	YYYY-MM	yes	Start date
date.end	YYYY-MM \| "present"	yes	End date or "present"
description	string	no	Role description
highlights	string[]	no	Key achievements

SECTIONS.PROJECTS

Array of notable projects.

Field	Type	Required	Description
name	string	yes	Project name
description	string	no	Short description
url	URL	no	Project URL
tags	string[]	no	Technologies used
featured	boolean	no	Highlight this project

SECTIONS.SKILLS

Key-value pairs of skill categories.

skills:
  Languages: [TypeScript, Go, Python]
  Frameworks: [React, Next.js, Express]
  Tools: [Docker, Kubernetes, AWS]

SECTIONS.EDUCATION

Array of educational background.

Field	Type	Required	Description
institution	string	yes	School/University name
degree	string	yes	Degree or certificate
date.start	YYYY-MM	no	Start date
date.end	YYYY-MM	no	End date
description	string	no	Additional info

SECTIONS.WRITING

Array of articles, blog posts, or publications.

Field	Type	Required	Description
title	string	yes	Article title
url	URL	yes	Link to article
date	YYYY-MM-DD	no	Publication date
publication	string	no	Where published

THEMES

SRCL

Terminal aesthetic. Monospace fonts, dark theme, orange accents. Inspired by sacred.computer.

theme: srcl

MODERN

Clean and contemporary. Sans-serif typography, subtle shadows, professional feel.

theme: modern

DARK ACADEMIA

Scholarly aesthetic. Serif typography, warm browns, vintage academic feel.

theme: dark-academia

THEME SETTINGS

Configure theme behavior in your portfolio.yaml:

Setting	Type	Default	Description
color_scheme	"dark" \| "light"	dark	Default color scheme
show_grid	boolean	false	Show baseline grid overlay
enable_hotkeys	boolean	true	Enable keyboard shortcuts
animate	"none" \| "subtle" \| "full"	subtle	Animation level

DEPLOYMENT

Deploy instantly with the Vercel CLI:

# Install Vercel CLI
npm install -g vercel

# Deploy
cd site
vercel

Or connect your GitHub repo for automatic deployments.

DOCUMENTATION