Files
Reactive-Resume/docs/guides/choosing-a-template.mdx
T
2026-01-19 23:31:54 +01:00

157 lines
6.7 KiB
Plaintext

---
title: "Choosing a template"
description: "Learn how to choose the perfect template for your resume and explore all available template designs in Reactive Resume."
---
Reactive Resume offers a variety of unique templates, each with its own design aesthetic. This guide will help you understand the differences between templates and how to change your resume's template at any time.
## How to change your template
Changing your resume template is simple and can be done at any time without losing any of your content.
<Steps>
<Step title="Open your resume in the builder">
Navigate to your Dashboard and click on the resume you want to edit.
{/* TODO: Add screenshot of dashboard with resume cards */}
<Frame caption="Your resumes dashboard showing all your resume cards">
<img src="/images/choosing-template/dashboard-placeholder.jpg" alt="Dashboard showing resume cards" style={{ aspectRatio: "210/297" }} />
</Frame>
</Step>
<Step title="Open the right sidebar">
In the resume builder, look for the right sidebar. This is where you'll find all the design and layout options.
{/* TODO: Add screenshot of builder with right sidebar visible */}
<Frame caption="The resume builder with the right sidebar open">
<img src="/images/choosing-template/builder-sidebar-placeholder.jpg" alt="Resume builder showing the right sidebar" style={{ aspectRatio: "210/297" }} />
</Frame>
</Step>
<Step title="Navigate to the Template section">
In the right sidebar, find and click on the **Template** section to expand it.
{/* TODO: Add screenshot of template section in sidebar */}
<Frame caption="The Template section in the right sidebar">
<img src="/images/choosing-template/template-section-placeholder.jpg" alt="Template section expanded in the sidebar" style={{ aspectRatio: "210/297" }} />
</Frame>
</Step>
<Step title="Select your new template">
Browse through the available templates and click on the one you want to use. Your resume will instantly update to reflect the new design.
{/* TODO: Add screenshot showing template selection */}
<Frame caption="Selecting a new template from the available options">
<img src="/images/choosing-template/template-selection-placeholder.jpg" alt="Template selection dropdown or grid" style={{ aspectRatio: "210/297" }} />
</Frame>
</Step>
<Step title="Review and adjust">
After changing the template, review your resume in the live preview. You may want to adjust spacing, colors, or layout to optimize for the new design.
<Tip>
Different templates may display your content differently. Some templates work better with shorter content, while others are designed to handle more detailed information.
</Tip>
</Step>
</Steps>
## Tips for choosing the right template
<AccordionGroup>
<Accordion title="Consider your industry" icon="briefcase">
Different industries have different expectations:
- **Creative fields** (design, marketing, arts): Templates with more visual flair like Gengar or Pikachu
- **Corporate/Traditional** (finance, law, consulting): Clean, minimal templates like Onyx or Ditto
- **Tech/Startups**: Modern, balanced templates like Chikorita or Leafish
</Accordion>
<Accordion title="Think about content length" icon="ruler">
If you have a lot of experience to showcase, choose a template with efficient space usage. For shorter resumes, templates with more white space can make your content feel more substantial.
</Accordion>
<Accordion title="Match your personal brand" icon="palette">
Your resume is part of your personal brand. Choose a template that reflects your personality while remaining professional and appropriate for your target roles.
</Accordion>
<Accordion title="Test with real content" icon="file-lines">
Don't choose a template based on how it looks empty. Fill in your actual content and see how it flows across pages. What looks great with sample data might not work as well with your specific information.
</Accordion>
</AccordionGroup>
---
## Available templates
Reactive Resume includes a variety of professionally designed templates. Each template can be further customized with your choice of colors, fonts, and layout options.
<Info>
All templates support the same features and sections. The difference is purely in how they present your information visually.
</Info>
<Columns cols={2}>
<Frame caption="Azurill">
<img src="/images/templates/azurill.jpg" alt="Azurill template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Bronzor">
<img src="/images/templates/bronzor.jpg" alt="Bronzor template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Chikorita">
<img src="/images/templates/chikorita.jpg" alt="Chikorita template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Ditto">
<img src="/images/templates/ditto.jpg" alt="Ditto template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Gengar">
<img src="/images/templates/gengar.jpg" alt="Gengar template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Glalie">
<img src="/images/templates/glalie.jpg" alt="Glalie template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Kakuna">
<img src="/images/templates/kakuna.jpg" alt="Kakuna template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Lapras">
<img src="/images/templates/lapras.jpg" alt="Lapras template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Leafish">
<img src="/images/templates/leafish.jpg" alt="Leafish template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Onyx">
<img src="/images/templates/onyx.jpg" alt="Onyx template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Pikachu">
<img src="/images/templates/pikachu.jpg" alt="Pikachu template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
<Frame caption="Rhyhorn">
<img src="/images/templates/rhyhorn.jpg" alt="Rhyhorn template preview" style={{ aspectRatio: "210/297" }} />
</Frame>
</Columns>
---
## Customizing your template
After selecting a template, you can customize it further:
| Setting | Description |
|---------|-------------|
| **Colors** | Change the primary color scheme to match your personal brand |
| **Typography** | Choose from various Google Fonts for headings and body text |
| **Layout** | Adjust sidebar width, section order, and page margins |
| **Spacing** | Fine-tune gaps between sections and elements |
<Tip>
For more advanced customization options, check out [Using Custom CSS](/guides/using-custom-css).
</Tip>