Markdown → CV

Syntax reference

How files in content/ are parsed and styled. Each example below shows the markdown source and the same HTML output used on /show/{slug} pages. Open the index to jump between sections.

Parse order

  1. # — page title (.cv-title)
  2. First > blockquote — role (.cv-role)
  3. ## — header rows (left label, optional body on the right)
  4. ### — sections; if the title contains , a job grid is used instead of a plain heading
  5. Body markdown — lists, blockquotes, ---, and trailing (n/3) ratings in list items

YAML frontmatter

Optional YAML between `---` fences. Documents without it still render. Common date fields: `date` (start/created) and `lastmod` (changed/updated). Editing a CV without frontmatter offers to add it; use the Raw view and frontmatter sidebar in the editor.

Markdown

---
title: Demo CV
slug: demo.en
date: 2024-01-15
lastmod: 2026-09-04
tags:
  - cv
  - demo
---
# Demo CV

> Example role

## Contact

[email protected]

HTML preview

Demo CV

Example role

Page title and role

The first `#` line is the page title. The first `>` blockquote after it becomes `.cv-role` in the header.

Markdown

# Harianto van Insulinde

> Front-End Developer

HTML preview

Harianto van Insulinde

Front-End Developer

## Header row

A `##` heading creates a header row: label in the left column (right-aligned). If there is body text below, it uses the right column on the next row.

Markdown

# Demo CV

> Example role

## Purpose

Short intro paragraph for this section.

HTML preview

Demo CV

Example role

Purpose

Short intro paragraph for this section.

## Header row (title only)

When a `##` block has no body, only the heading is shown. It uses a slightly larger font via `:only-child`.

Markdown

# Demo CV

> Example role

## Career

HTML preview

Demo CV

Example role

Career

### Section

A `###` heading is a normal section: heading in the left column (right-aligned when body exists), content in the right column.

Markdown

# Demo CV

> Example role

### Contact

The Hague, Netherlands  
[email protected]

HTML preview

Demo CV

Example role

### Job entry (` — `)

If a `###` title contains ` — `, it is parsed as a job row: period, role, company name, and optional place in parentheses. The job grid spans the full width; bullets and quotes sit in the right column below.

Markdown

# Demo CV

> Example role

## Career

### 2022–2024 — Front-End Developer — Myparcel (via Open Web BV) (Hoofddorp)
- Built interactive components with Vue 3 and Storybook
- Improved back-office workflows

> Tech: Vue, TypeScript, Storybook

HTML preview

Demo CV

Example role

Career

2022–2024Front-End DeveloperHoofddorpMyparcel (via Open Web BV)
  • Built interactive components with Vue 3 and Storybook
  • Improved back-office workflows

Tech: Vue, TypeScript, Storybook

Skill ratings in lists

List items ending with `(n/3)` split into two columns: label on the left, score on the right.

Markdown

# Demo CV

> Example role

## Specializations

### Frontend Architect
- Achieved complex state management (3/3)
- Focus on performance (2/3)
- Touch interaction design (1/3)

HTML preview

Demo CV

Example role

Specializations

Frontend Architect

  • Achieved complex state management(3/3)
  • Focus on performance(2/3)
  • Touch interaction design(1/3)

Blockquote in section body

Blockquotes inside `.cv-section-body` use a smaller font and no horizontal margins.

Markdown

# Demo CV

> Example role

### Relevant experience

Main bullet points appear here.

> Tech: Vue, Nuxt, Node.js

HTML preview

Demo CV

Example role

Relevant experience

Main bullet points appear here.

Tech: Vue, Nuxt, Node.js

Horizontal rules

A plain `---` in the body becomes a dashed divider. The last unclassed `hr` in a section is hidden. Use `<hr class="page-break" />` for print layout hints — the label is visible when logged in; printing always honours the break.

Markdown

# Demo CV

> Example role

### Section A

First block of content.

---

Second block after a divider.

HTML preview

Demo CV

Example role

Section A

First block of content.


Second block after a divider.