devfolio.page - Your Portfolio as Code

INSTALLATION

NPM

Install devfolio-page globally using npm or your preferred package manager.

npm install -g devfolio-page

Or use npx to run without installing:

npx devfolio-page init

REQUIREMENTS

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

QUICK START

GET STARTED IN 5 STEPS

Install devfolio-page

npm install -g devfolio-page

Requires Node.js and npm. Don't have them? Install Node.js first.

Create your portfolio

devfolio-page init

Answer a few questions to create portfolio.yaml with your basic info

Add your content

cd my-portfolio

Open the folder in your editor (VS Code, Cursor, etc.) and add projects, experience, writing to portfolio.yaml. See portfolio structure for examples.

Render your site

devfolio-page render

Generates your site with all pages (home, projects, experiments, writing) in the site/ folder.

Preview with dev mode

devfolio-page dev

Opens at localhost:3000 with live reload. Edit portfolio.yaml and save to see updates instantly.

Ready to deploy? Upload the site/ folder to Vercel, Netlify, or GitHub Pages.

COMMANDS

devfolio-page init

Create a new portfolio folder

devfolio-page init

Interactive prompts will ask for:

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

devfolio-page dev

Start development server with auto-rebuild

devfolio-page dev [file] [options]

Option	Description
[file]	YAML file (default: portfolio.yaml)
--port, -p <port>	Dev server port (default: 3000)
--theme, -t <name>	Theme to use (default: srcl)

Features:

In-memory builds (no site/ folder created)
Auto-rebuild on file changes
Watches portfolio.yaml and images/
Faster than render for development

devfolio-page validate

Validate a portfolio YAML file

devfolio-page 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-page render

Generate static HTML from portfolio

devfolio-page 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.

ABOUT

Extended about section that generates a dedicated /about page.

Field	Type	Required	Description
short	string	no	Brief intro for homepage
long	string	no	Longer bio with markdown support

about:
  short: Brief intro for homepage
  long: |
    Longer bio with markdown support.

    Multiple paragraphs work great 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
featured	boolean	no	Highlight this article

PROJECTS (RICH)

Top-level projects field for multi-page portfolios with dedicated case study pages.

Field	Type	Required	Description
id	string	yes	URL slug (e.g., /projects/my-project.html)
title	string	yes	Project title
subtitle	string	no	Brief tagline
featured	boolean	no	Show on homepage
thumbnail	path	no	Thumbnail image
hero	path	no	Hero image for project page
meta.year	string\|number	no	Year completed
meta.role	string	no	Your role
meta.timeline	string	no	Project duration
meta.tech	string[]	no	Technologies used
meta.links.github	URL	no	GitHub repository
meta.links.demo	URL	no	Demo link
meta.links.live	URL	no	Live site
sections	array	no	Content sections

Section types: overview, image, gallery, metrics, outcomes, process, code, demo, interactive

projects:
  - id: my-project
    title: My Project
    featured: true
    meta:
      year: 2024
      role: Lead Developer
      tech: [React, Node.js]
    sections:
      - type: overview
        content: |
          Project description here.
      - type: metrics
        data:
          - label: Users
            value: "10,000+"

EXPERIMENTS

Side projects and explorations.

Field	Type	Required	Description
title	string	yes	Experiment title
description	string	no	Brief description
image	path	no	Preview image
github	URL	no	Repository link
demo	URL	no	Demo link
tags	string[]	no	Technologies used

experiments:
  - title: Creative Coding
    description: Generative art experiments
    github: https://github.com/...
    tags: [p5.js, WebGL]

PAGES

Customize titles and descriptions for each page.

Field	Type	Required	Description
projects.title	string	no	Projects page heading
projects.description	string	no	Projects page subheading
about.title	string	no	About page heading
about.description	string	no	About page subheading
experiments.title	string	no	Experiments page heading
experiments.description	string	no	Experiments page subheading
writing.title	string	no	Writing page heading
writing.description	string	no	Writing page subheading

pages:
  projects:
    title: My Work
    description: A curated selection of projects.
  about:
    title: About Me
    description: Designer and developer.

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