A résumé built especially with software professionals in mind. Impress your potential employer with a beautiful and incredibly fast résumé website, or generate a PDF for email and print.
Your résumé can also generate a secure URL that will display information not accessible on the public URL. The secure version can include private information such as email, phone number, and mailing address. You can send the private link to a potential employer or use it to generate a more complete PDF for yourself.
- Update your résumé with simple Markdown files
- Integration with external headless CMS systems is possible by integrating a custom fetcher
- Beautiful and accessible web app to view your résumé, link on social media, and send to potential employers
- Generate a PDF on demand to view, download, or print
- Use a secret link to generate the résumé with additional private information
- Easily customizable
- 19 accent color palettes out-of-the-box
- 6 neutral color palettes out-of-the-box
- Automatic light and dark modes for each palette
- Tailwind styling for making it your own
- Create custom color palettes
- Dynamic OG share images in light or dark mode
- Next.js
- TypeScript
- React-pdf
- Marked
- Front Matter
- Tailwind CSS
- Radix UI Colors
- Vercel OG Image Generation
- Jest
- Testing Library
- Vercel
Your résumé will use the latest Vercel technology including Next.js 13 server components and edge functions, and will load fast even on older devices and poor network conditions.
The project requires only a few steps to set up your custom config, add content to the internal CMS, and deploy to Vercel!
It may seem counter-intuitive, but the simplest way to get started is to clone and deploy in one step. Afterwards, you can edit the CMS and template to match your needs.
The project is designed to be deployed with Vercel. By clicking the "Deploy" button below, you will clone the project to your own repository and deploy to a free HTTPS domain with Vercel's high-performance edge network. The default project will include mock data that you can edit in the next step!
Clone the project you just created to your local machine. Open it in your favorite editor, and open up the edit-me/config/ folder at the root. Here you will find a couple of placeholder images that you can swap out if you want. You can also edit the manifest.json and resumeConfig.ts to meet your needs. The config file contains the following constants that will be used throughout the project (these are typed to provide appropriate autocomplete and error checking):
accentColor:string. The name of an accent palette from Radix UI Colors. If using a standard color, the contrasting text color will be white, and if using a bright color, the contrasting text color will be black.neutralColor:string. The name of a neutral palette from Radix UI Grays.ogImageTheme:'light' | 'dark'. Your OG share image will generate either a light or a dark variant.
The résumé generator provides 19 accent color palettes and 6 neutral color palettes out-of-the-box. Below are screenshots from a few variations in both light and dark mode.
| Light Mode | Dark Mode |
|---|---|
BLUE/MAUVE  |
BLUE/MAUVE  |
TOMATO/GRAY  |
TOMATO/GRAY  |
MINT/MAUVE  |
MINT/MAUVE  |
Your accent, neutral, and color scheme preferences also apply to the generated OG image.
| Light Mode | Dark Mode |
|---|---|
BLUE/MAUVE  |
BLUE/MAUVE  |
Next, modify the mock CMS data that is included in edit-me/cms/. Each Markdown file uses Front Matter fields that are used to add attributes to the item. These attributes are type safe, so the project won't run if required fields are missing or invalid. The rest of the Markdown file will be rendered as HTML to provide a description of the item.
Although the mock files should be pretty self-explanatory, you can view the CMS setup document for detailed descriptions of required and optional fields.
Regardless of where the app is deployed, it may need access to the following environment variables:
PRIVATE_KEY(optional): this is a code, determined by the author, which will provide URL access to a version of the résumé that includes private information. We recommend generating this code (e.g. a UUID or using a password generator)
Your project can be configured to provide a secret URL that will display more information than the public URL. This is helpful if you want to send a complete résumé to a potential employer, or if you want to generate a PDF for your own use. In this version, you can include personal information such as email, phone number, and address that you don't want visible to the general public.
The private URL will only work if you added a PRIVATE_KEY environment variable. If working locally, you can add this in a .env.local file:
PRIVATE_KEY=your-private-key
You can then visit https://your-url.com/private/your-private-key to see the private version of the résumé.
For the built-in Markdown integration, please note that you must be sure to not commit the private information to a public Git repo. Only use this feature in a private repo, and even then please be aware of the security concerns around commiting private information to any Git repo.
To add private data to the CMS, simply add it to the privateFields folder.
cms/privateFields/. Add as many private contact information fields as you want to display. They will appear in the order they are arranged in the folder, so you can use a number prefix to order them.label: required string. The label of the field, such as "Email" or "Address".
This private URL is only as secure as the people you send it to. To invalidate an old private URL, you simply need to change the PRIVATE_KEY environment variable.
The template is built to be responsive, beautiful, and accessible right out of the box. It supports automatic dark/light mode themeing in the web version, and a great single-page print layout in the PDF version. The project supports a minimal set of configurations such as accent colors, but if you're a front end developer or designer, you can easily open up the source code and customize it however you see fit.
If you really want to go deep on customization, you can create your own themes in the src/tokens folder to add custom accent and neutral palettes. You also have full control of the Tailwind configuration in the root folder tailwind.config.js file.
We use Vercel OG Image Generation to generate dynamic Open Graph (Facebook/Twitter) share images. You can edit the layout, styles, and text of OG Image using Tailwind classes in src/pages/api/og.tsx.
This dynamic share image will use your custom accentColor setting, as well as data from the CMS.