Next.js and Tailwind Résumé
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.
Features
- Update your résumé with simple Markdown files
- Type safe content management using Contentlayer
- Integration with external CMS systems will be possible in the future
- Beautiful and accessible web app to view your résumé, link on social media, and send to potential employers
- Use a secret link to generate the résumé with additional private information
- Generate a PDF on demand to view, download, or print in light or dark mode
- 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 classes to modify app and generated images
- Dynamic OG share images in light or dark mode
Technology
- Next.js
- TypeScript
- React-pdf
- Contentlayer
- Tailwind CSS
- Radix UI Colors
- Vercel Image Generation
- Testing Library
- Vercel
It's FAST
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.
How To Use This Project
The project requires only a few steps to set up your custom config, add content to the internal CMS, and deploy to Vercel!
Clone and Deploy
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!
Development
To customize your résumé, clone the project you just created to your local machine and cd to it.
cd my-resume
npm iI've tested the project with bun, npm, pnpm, and yarn and haven't run into any notable issues. For development the test runner defaults to bun.
Modify Custom Config
Open the project in favorite editor, and open up the edit-me/config/ folder at the root where you can edit the resumeConfig.ts file 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:AccentColor. 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:NeutralColor. The name of a neutral palette from Radix UI Grays.appTheme:'system' | 'light' | 'dark'. IfappThemeis set tosystem, the résumé site will default to the user's system preference. If set tolightordarkthe user's preference will be overriden.imageTheme:'light' | 'dark'. Your OG share image and app icons will be generated in either a light or a dark variant.pdfTheme:'light' | 'dark'. Your PDF will be generated in either a light or a dark variant.
You'll also find links.ts which generates external links at the bottom of the document. You can use any icon from the Fontawesome free and brand icon sets alongside these links.
Color Palette Examples
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  |
OG Image Examples
Your accent, neutral, and color scheme preferences also apply to the generated OG image.
| Light Mode | Dark Mode |
|---|---|
BLUE/MAUVE  |
BLUE/MAUVE  |
Set Up Your CMS
Next, modify the mock CMS data that is included in edit-me/content/. 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 Contentlayer config for detailed descriptions of required and optional fields.
Environment Variables
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)
Private Link
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.
Setup
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é.
Adding Private Content
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".
Security
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.
Design and Customizations
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 have full control of the Tailwind configuration in the root folder tailwind.config.ts file.
We use Vercel Image Generation to generate dynamic Open Graph (Facebook/Twitter) share images and app icons. You can edit the layout, styles, and text of OG Image using Tailwind classes in src/app/api/og/route.tsx and the icon in src/app/icon.tsx.
This dynamic share image will use your custom accentColor setting, as well as data from the CMS.
Getting the Latest Updates
To sync your personal résumé with the newest version of this project, you can do the following:
// add the original repo as a git remote
git remote add upstream [email protected]:colinhemphill/nextjs-resume.git
// pull changes from upstream
git pull upstream mainThen resolve any merge conflicts and make your desired changes. You'll need to look over the CHANGELOG to see what happened since the last time you pulled, and please note that upstream changes could break your customizations!