Joy DOM

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

{  "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

On this page