mirror of
https://github.com/AmruthPillai/Reactive-Resume.git
synced 2026-10-03 18:23:47 +10:00
Amruth Pillai
99ff19e4e8
Porygon lays the resume out as a ruled form after the Japanese résumé form (rirekisho). The header is a block of bordered field cells framed in the accent color with the photo in a cell of its own, and every section is a table with a solid title bar over one ruled cell per entry. Touching cells share one tinted rule. Smeargle sets the resume like a magazine feature: the headline as an uppercase kicker over a display name, the summary as an italic standfirst, and italic section headings at the user's heading size. Both are one-column and ATS-safe. Register them in the schema, renderer, semantic manifests and gallery, add gallery and docs previews, extract the new descriptions, regenerate the API spec, and list them wherever the docs enumerate templates.
252 lines
11 KiB
Plaintext
252 lines
11 KiB
Plaintext
---
|
|
title: "Choosing a template"
|
|
description: "Browse the 15 Reactive Resume templates drawn with your own content, preview one on the page, and apply it without losing any of your work."
|
|
---
|
|
|
|
A template decides the layout of your resume: where the header sits, whether there is a sidebar, and how headings and entries look. You can switch templates at any time. Your content, fonts and colors stay the same.
|
|
|
|
## Open the template gallery
|
|
|
|
<Steps>
|
|
<Step title="Open your resume">From **Documents**, open the resume you want to change.</Step>
|
|
<Step title="Switch to Design">
|
|
Select **Design** at the top of the editor, or press <kbd>2</kbd> while you are not typing in a field.
|
|
</Step>
|
|
<Step title="Find the Template group">
|
|
**Template** is the first group in the Design panel. Use the row of links at the top of the panel (**Template**,
|
|
**Type**, **Color**, **Page**, **Advanced**) to jump between groups.
|
|
</Step>
|
|
</Steps>
|
|
|
|
<Frame caption="The template gallery, with filters and the current template checked">
|
|
<img
|
|
src="/images/guides/choosing-a-template/template-gallery.webp"
|
|
alt="The Template group in the Design panel, showing the All, One column, Two columns and ATS-safe filters, a count of 15 of 15 shown, and thumbnails of the Azurill, Bronzor, Chikorita and Ditgar templates with Azurill checked"
|
|
/>
|
|
</Frame>
|
|
|
|
Each thumbnail shows the first page of **your** resume in that template, so you can judge it with your real content. While the thumbnails are being drawn, you briefly see a sample image instead.
|
|
|
|
## Filter the gallery
|
|
|
|
The chips above the thumbnails narrow the list:
|
|
|
|
| Filter | Shows |
|
|
| --------------- | -------------------------------------------------------------------------------------------------------- |
|
|
| **All** | All 17 templates. |
|
|
| **One column** | Templates that read top to bottom in a single column. |
|
|
| **Two columns** | Templates with a separate sidebar column. |
|
|
| **ATS-safe** | Templates with one reading order and plain text headings, which applicant tracking systems read cleanly. |
|
|
|
|
The counter on the right (for example "7 of 15 shown") tells you how many templates match.
|
|
|
|
## Preview and apply a template
|
|
|
|
<Steps>
|
|
<Step title="Preview it on the page">
|
|
Hover over a thumbnail, or move to it with <kbd>Tab</kbd>. The page on the right redraws in that template, and a
|
|
label above it reads "Previewing *name* · click to apply". Nothing is saved yet.
|
|
</Step>
|
|
<Step title="Apply it">
|
|
Click the thumbnail. The template is applied and a message confirms the change, with an **Undo** button if you
|
|
change your mind.
|
|
</Step>
|
|
<Step title="Or go back">
|
|
Move the pointer away from the thumbnails, or press <kbd>Esc</kbd>, to return to your current template.
|
|
</Step>
|
|
</Steps>
|
|
|
|
<Frame caption="Hovering over Chikorita previews it on the page before you apply it">
|
|
<img
|
|
src="/images/guides/choosing-a-template/template-hover-preview.webp"
|
|
alt="The Design panel with the pointer over the Chikorita thumbnail, and the page on the right showing the resume in the Chikorita template with a dark label reading Previewing Chikorita, click to apply"
|
|
/>
|
|
</Frame>
|
|
|
|
<Tip>
|
|
On a phone or tablet, press and hold a thumbnail to preview it, then tap it to apply it. On phones, Design opens as a
|
|
sheet over the lower half of the page and the templates scroll sideways in a strip.
|
|
</Tip>
|
|
|
|
## The 17 templates
|
|
|
|
All templates support the same sections and features. They differ only in how they arrange your information. The images below use the same resume in each template.
|
|
|
|
| Template | Columns | ATS-safe | Sidebar side |
|
|
| --------- | ------- | -------- | ------------ |
|
|
| Azurill | Two | No | Left |
|
|
| Bronzor | One | Yes | — |
|
|
| Chikorita | Two | No | Right |
|
|
| Ditgar | Two | No | Left |
|
|
| Ditto | Two | No | Left |
|
|
| Gengar | Two | No | Left |
|
|
| Glalie | Two | No | Left |
|
|
| Kakuna | One | Yes | — |
|
|
| Lapras | One | Yes | — |
|
|
| Leafish | Two | No | Right |
|
|
| Meowth | One | Yes | — |
|
|
| Onyx | One | Yes | — |
|
|
| Pikachu | Two | No | Left |
|
|
| Porygon | One | Yes | — |
|
|
| Rhyhorn | One | Yes | — |
|
|
| Scizor | One | Yes | — |
|
|
| Smeargle | One | Yes | — |
|
|
|
|
In a one-column template, sections you placed in the sidebar print after the main sections instead of beside them. Bronzor prints them as labelled rows. On two-column templates you can move the sidebar to the other side; see [Arranging the layout](/guides/arranging-the-layout).
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<Frame caption="Azurill">
|
|
<img
|
|
src="/images/templates/azurill.webp"
|
|
alt="First page of a resume in the Azurill template: centred photo and header, sidebar on the left"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Bronzor">
|
|
<img
|
|
src="/images/templates/bronzor.webp"
|
|
alt="First page of a resume in the Bronzor template: one column with labelled section rows"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Chikorita">
|
|
<img
|
|
src="/images/templates/chikorita.webp"
|
|
alt="First page of a resume in the Chikorita template: header over the main column and a colored sidebar on the right"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Ditgar">
|
|
<img
|
|
src="/images/templates/ditgar.webp"
|
|
alt="First page of a resume in the Ditgar template: header inside a colored left sidebar"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Ditto">
|
|
<img
|
|
src="/images/templates/ditto.webp"
|
|
alt="First page of a resume in the Ditto template: colored header band across the page, sidebar on the left"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Gengar">
|
|
<img
|
|
src="/images/templates/gengar.webp"
|
|
alt="First page of a resume in the Gengar template: header in a colored left sidebar with a tinted summary band"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Glalie">
|
|
<img
|
|
src="/images/templates/glalie.webp"
|
|
alt="First page of a resume in the Glalie template: header and contact details in a light left sidebar"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Kakuna">
|
|
<img
|
|
src="/images/templates/kakuna.webp"
|
|
alt="First page of a resume in the Kakuna template: centred header, one column"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Lapras">
|
|
<img
|
|
src="/images/templates/lapras.webp"
|
|
alt="First page of a resume in the Lapras template: one column with sections in outlined boxes"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Leafish">
|
|
<img
|
|
src="/images/templates/leafish.webp"
|
|
alt="First page of a resume in the Leafish template: tinted header across the page, sidebar on the right"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Meowth">
|
|
<img
|
|
src="/images/templates/meowth.webp"
|
|
alt="First page of a resume in the Meowth template: one column with position, organization and period on one line"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Onyx">
|
|
<img
|
|
src="/images/templates/onyx.webp"
|
|
alt="First page of a resume in the Onyx template: one column with the photo beside the header"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Pikachu">
|
|
<img
|
|
src="/images/templates/pikachu.webp"
|
|
alt="First page of a resume in the Pikachu template: colored header block over the main column, sidebar on the left"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Porygon">
|
|
<img
|
|
src="/images/templates/porygon.webp"
|
|
alt="First page of a resume in the Porygon template: a bordered header of field cells and each section as a ruled table under a solid title bar"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Rhyhorn">
|
|
<img
|
|
src="/images/templates/rhyhorn.webp"
|
|
alt="First page of a resume in the Rhyhorn template: minimal top header and one column"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Scizor">
|
|
<img
|
|
src="/images/templates/scizor.webp"
|
|
alt="First page of a resume in the Scizor template: one column with uppercase section headings"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
<Frame caption="Smeargle">
|
|
<img
|
|
src="/images/templates/smeargle.webp"
|
|
alt="First page of a resume in the Smeargle template: a large serif name under a small uppercase kicker, an italic introduction and italic section headings"
|
|
style={{ aspectRatio: "210/297" }}
|
|
/>
|
|
</Frame>
|
|
</div>
|
|
|
|
## Tips for choosing
|
|
|
|
- **Applying through job portals?** Start with the **ATS-safe** filter. Two-column layouts can be read out of order by applicant tracking systems, and Check mode warns you when sidebar sections might be affected. See [Checking your resume](/guides/checking-your-resume).
|
|
- **Lots of experience?** Compare how full each thumbnail's first page looks. After you apply a template, the page count in the zoom bar at the bottom of the page tells you the total.
|
|
- **Judge with real content.** Because the gallery draws your own resume, fill in your details first and then pick.
|
|
|
|
## Reset the design settings
|
|
|
|
If you have changed a lot of design settings and want a clean slate, open **Advanced** at the bottom of the Design panel and select **Reset design defaults**. This resets fonts, text size, line height, colors, level style, sidebar width, margins, spacing and the icon and underline switches. Your template, paper size, language, date format, section placement and custom CSS stay as they are. A message offers **Undo**.
|
|
|
|
The reset doesn't depend on the template: every template goes back to the same standard settings (IBM Plex Serif at 10 pt, a red accent, circle levels and hidden section icons). Pick a font pairing and accent color again afterwards if you want a different starting point.
|
|
|
|
<Note>
|
|
If Design's controls are greyed out, the resume is locked. Open the document name menu at the top left and select
|
|
**Unlock editing**.
|
|
</Note>
|
|
|
|
## Related guides
|
|
|
|
<CardGroup cols={2}>
|
|
<Card title="Customizing typography" icon="font" href="/guides/customizing-typography">
|
|
Pick a font pairing, text size and density.
|
|
</Card>
|
|
<Card title="Choosing colors" icon="palette" href="/guides/choosing-colors">
|
|
Set the accent color and check it reads well.
|
|
</Card>
|
|
<Card title="Arranging the layout" icon="table-columns" href="/guides/arranging-the-layout">
|
|
Move the sidebar, change its width and split sections across pages.
|
|
</Card>
|
|
<Card title="Fitting content on a page" icon="compress" href="/guides/fitting-content-on-a-page">
|
|
Keep your resume to the number of pages you planned.
|
|
</Card>
|
|
</CardGroup>
|