Resume
A one-page resume that prints cleanly.
A traditional one-page resume (header, summary, experience, education) is a perfect fit for Joy DOM. The whole document is a single page; the print breakpoint tweaks spacing for paper.
Example
Avery Chen
avery@example.com
Tokyo, JP
Summary
Product designer focused on cross-platform document systems.
Experience
Senior designer, Globex
Owned the company-wide design system migration to a JSON-native format.
{ "version": 1, "style": { ".page": { "display": "flex", "flexDirection": "column", "fontFamily": "\"Geist\", ui-sans-serif, system-ui, sans-serif", "gap": { "value": 20, "unit": "px" }, "padding": { "value": 48, "unit": "px" }, "maxWidth": { "value": 720, "unit": "px" } }, "h1": { "display": "flex", "fontSize": { "value": 28, "unit": "px" }, "fontWeight": "bold" }, "h2": { "display": "flex", "fontSize": { "value": 14, "unit": "px" }, "fontWeight": "bold", "textTransform": "uppercase", "letterSpacing": { "value": 2, "unit": "px" }, "color": "#475569" }, "p": { "display": "flex", "lineHeight": 1.5 }, ".header": { "display": "flex", "flexDirection": "column", "gap": { "value": 4, "unit": "px" } }, ".contact": { "display": "flex", "flexDirection": "row", "gap": { "value": 12, "unit": "px" }, "color": "#475569" }, ".section": { "display": "flex", "flexDirection": "column", "gap": { "value": 8, "unit": "px" } }, ".role": { "display": "flex", "flexDirection": "column", "gap": { "value": 2, "unit": "px" } }, ".role-head": { "display": "flex", "flexDirection": "row", "justifyContent": "space-between" }, ".role-meta": { "display": "flex", "color": "#475569", "fontSize": { "value": 13, "unit": "px" } }, ".role-title": { "display": "flex", "fontWeight": "bold" } }, "breakpoints": [ { "conditions": [ { "type": "type", "value": "print" } ], "nodes": {}, "style": { ".page": { "display": "flex", "padding": { "value": 24, "unit": "px" }, "gap": { "value": 14, "unit": "px" } } } }, { "conditions": [ { "type": "feature", "name": "width", "operator": "<", "value": 480, "unit": "px" } ], "nodes": {}, "style": { ".page": { "display": "flex", "padding": { "value": 24, "unit": "px" } }, ".role-head": { "display": "flex", "flexDirection": "column", "gap": { "value": 2, "unit": "px" } } } } ], "layout": { "type": "div", "props": { "className": [ "page" ] }, "children": [ { "type": "div", "props": { "className": [ "header" ] }, "children": [ { "type": "h1", "children": [ "Avery Chen" ] }, { "type": "div", "props": { "className": [ "contact" ] }, "children": [ { "type": "p", "children": [ "avery@example.com" ] }, { "type": "p", "children": [ "Tokyo, JP" ] } ] } ] }, { "type": "div", "props": { "className": [ "section" ] }, "children": [ { "type": "h2", "children": [ "Summary" ] }, { "type": "p", "children": [ "Product designer focused on cross-platform document systems." ] } ] }, { "type": "div", "props": { "className": [ "section" ] }, "children": [ { "type": "h2", "children": [ "Experience" ] }, { "type": "div", "props": { "className": [ "role" ] }, "children": [ { "type": "div", "props": { "className": [ "role-head" ] }, "children": [ { "type": "p", "props": { "className": [ "role-title" ] }, "children": [ "Senior designer, Globex" ] }, { "type": "p", "props": { "className": [ "role-meta" ] }, "children": [ "2024 – present" ] } ] }, { "type": "p", "children": [ "Owned the company-wide design system migration to a JSON-native format." ] } ] } ] } ] }}Multi-page resumes work too: use page-break breakpoints when the print spec lands (planned). For now keep it to one page, which is the recommended length anyway.
Spec references: §5.6 Typography · §5.2.6 justifyContent