Creating a Résumé Website and PDF Generator With Next.js

The Importance of a Beautiful Résumé

If you're a developer with a focus on the front end, your professional résumé is an opportunity to display your skills to a potential employer from the moment they receive your application. Since a role you are applying for is likely to involve the implementation of beautiful, accessible, and user-friendly designs, it's important that your résumé reflects these skills.

Many front end devs might choose a tool like Photoshop or InDesign to generate great looking résumés, but maintaining these documents and modifying content often requires complete reorganization when layouts no longer fit the way they did before. There are also plenty of ways to manage a portfolio website, but these services rarely include features for interacting with a recruiter or hiring manager.

A Modern Approach to Developer Résumés

When your strengths lie in front end web development, what‘s stopping you from generating your résumé using a web app? Today we‘ll look at a Next.js project that I created to help you get started with a digital résumé.

• A modern tech stack including the Next.js App Router and server components, deploys on Vercel, TypeScript, Tailwind CSS, and Radix Colors
• Type safe content management using Markdown files and Contentlayer
• 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

This tutorial and the application you will be deploying is based off my Next.js and Tailwind Résumé on GitHub. You can see an example of the final product at https://resume.colinhemphill.com.

Creating Your Own Static Résumé

Clone and Deploy

The simplest way to start is to clone and deploy the starter project. The walkthrough will ask you to create a private Git repo to link the project to, and will be deployed to Vercel in minutes.

In this deploy step you can provide an optional PRIVATE_KEY environment variable if you wish to include sensitive information behind a secret link. We recommend just generating this key as a UUID or with a password manager.

Local Development

To run the project locally, simply clone the Git repo you just created, install dependencies, and start dev mode.

git clone https://github.com/myuser/nextjs-resume.git
cd nextjs-resume
npm i
npm run dev

You should now see the starter project at localhost:3000.

Modifying the Content

All files that you may want to edit live in the edit-me folder at the project root, and the majority of text content lives in Markdown files at edit-me/content.

Contentlayer is the content SDK that we use to provide type-safe schemas for the content and convert it to JSX that is usable in the application. The schemas are described in contentlayer.config.ts at the app root if you want to see their details or modify the schemas to meet your needs. If a Markdown file doesn't match the schema requirements, the content will fail to build and an error will be visible in the console.

For content that is repeatable such as your list of achievements or past professional experience, the Markdown files live in a folder where you can create as many as you'd like (edit-me/content/achievements for example). Other files like additionalInfo.md and personal.md are designated as Singletons in the schema.

Customizing

Once you're happy with the content of your résumé, you can customize the look and feel or layouts as desired.

1. Start with edit-me/config/resumeConfig.ts and try out some different accent and neutral colors to choose the look and feel that best represents you. All color palettes are created with Radix Colors and are WCAG accessible in both light and dark modes.
2. Modify edit-me/config/links.ts to choose social media or any other external link you'd like to display. You can select any free or brand icon from Fontawesome to represent each link.

You of course have full control of the source code for your project, so these base customizations only scratch the surface. You can use Tailwind classes to modify styles throughout the application, modify Tailwind config in tailwind.config.ts, or update layouts and components in /src/app.

Always check the starter docs, as this blog post may not represent the latest changes. Follow the Next.js beta docs for any details on how the App Router is implemented, and the Contentlayer docs for details about content modeling, sources, and rendering.

A Note on the PDF Generator

Generating a PDF is not so easy compared to plain React. The project uses React-PDF to stream the content from a serverless endpoint. The layout of the PDF content is located at src/components/PDF/PDF.tsx, and while tt shares content and general configuration such as accent colors, the layouts and styles are handcrafted. So if you make changes in the web app version, you don't get the PDF changes for free. However, we've built this PDF layout in such a way that makes saving and printing possible, and it can be challenging to customize the layout while keeping it usable.

Wrapping Up

With only a few clicks you can deploy a fast React Server Component résumé on Vercel, and modifying the content of your résumé through type-safe Markdown is incredibly simple. By completing this guide, you should have your own HTTPS web application that loads fast on any device, scales well across devices, follows best practices for SEO and accessibility, and generates a PDF that you can send to a potential employer.

If you have any suggestions for improving the résumé generator, please feel free to open an issue on the GitHub repo.