dev.page

Your portfolio as code. Version control it like software.

Installation

npm install -g devpage

Quick Start

# Create new portfolio
devpage init

# Edit portfolio.yaml with your info

# Generate static site
devpage render portfolio.yaml

# Open in browser
open output/index.html

Commands

devpage init

Create a new portfolio.yaml with interactive prompts.

devpage init

devpage validate <file>

Validate your portfolio YAML file.

devpage validate portfolio.yaml

devpage render <file>

Generate a static website from your portfolio.

devpage render portfolio.yaml
devpage render portfolio.yaml --theme modern
devpage render portfolio.yaml --output ./dist

Options:

• -t, --theme <theme> - Theme to use (srcl, modern, minimal, dark-academia)
• -o, --output <dir> - Output directory (default: ./output)

YAML Schema

meta:
  name: Your Name
  title: Your Title
  location: Your Location
  timezone: America/Los_Angeles  # optional

contact:
  email: [email protected]
  github: username        # optional
  linkedin: username      # optional
  twitter: username       # optional
  website: https://...    # optional

bio: |
  A few sentences about yourself.
  Can be multiple lines.

sections:
  experience:
    - company: Company Name
      role: Your Role
      date:
        start: 2024-01
        end: present
      location: City, State  # optional
      highlights:
        - Achievement 1
        - Achievement 2

  projects:
    - name: Project Name
      url: https://github.com/...  # optional
      description: What the project does
      tags: [React, TypeScript]
      featured: true  # optional

  skills:
    Frontend: [React, TypeScript, Next.js]
    Backend: [Node.js, Python, Go]
    Tools: [Git, Docker, AWS]

  writing:
    - title: Article Title
      url: https://...
      date: 2024-12
      description: Brief description  # optional

  education:
    - institution: University Name
      degree: B.S. Computer Science
      date:
        start: 2016-09
        end: 2020-05
      location: City, State  # optional
      highlights:  # optional
        - Dean's List
        - Relevant coursework

theme: srcl  # srcl, modern, minimal, dark-academia

settings:
  show_grid: false       # show character grid overlay
  enable_hotkeys: true   # enable keyboard shortcuts
  color_scheme: dark     # dark or light
  animate: subtle        # none, subtle, or full

Themes

SRCL (Default)

Terminal-inspired aesthetic from sacred.computer.

• Monospace typography
• Character-based spacing
• Keyboard navigation (Ctrl+T, Ctrl+G)
• Dark/light mode toggle

Modern

Clean, contemporary design.

• Sans-serif fonts
• Card-based layout
• Smooth animations

Minimal

Brutalist aesthetic.

• System fonts only
• Black and white
• Zero decoration

Dark Academia

Classical, scholarly design.

• Serif typography
• Warm color palette
• Book-like layout

Keyboard Shortcuts

When enable_hotkeys: true:

| Key | Action | |-----|--------| | Ctrl+T | Toggle dark/light theme | | Ctrl+G | Toggle grid overlay | | 1-9 | Jump to section | | Esc | Close accordions |

Philosophy

Inspired by RenderCV. Your portfolio should be:

• Version controlled - Track changes with Git
• Content-first - Separate content from presentation
• Portable - Deploy anywhere (Vercel, Netlify, GitHub Pages)
• Fast - Static HTML, no JavaScript required
• Accessible - Semantic HTML, keyboard navigation

Development

# Install dependencies
npm install

# Run in dev mode
npm run dev

# Build
npm run build

# Link globally for testing
npm link

Examples

See the examples/ directory:

• minimal.yaml - Bare minimum required fields
• full.yaml - All sections and options
• engineer.yaml - Realistic software engineer example

License

MIT

Built with SRCL.