Creating a CV often feels like managing two separate entities—your portfolio website and your resume. But what if you could generate a polished CV directly from your website? In this guide, we’ll use Vite, React, and Tailwind CSS to style an about page that doubles as a printable CV.

Overview of the Strategy

The key idea is simple yet powerful:

1. Design your website’s About page for regular web viewing.
2. Use Tailwind’s print utilities to add styles for printing, transforming the page into a professional CV when exported to PDF.

This ensures both formats are always in sync, and you maintain a single source of truth.

Setting Up the Project

1. Create a Vite + React Project

First, create a new React project using Vite:

npm create vite@latest cv-portfolio --template react
cd cv-portfolio
npm install

Install Tailwind CSS and its dependencies:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Configure Tailwind CSS

Update tailwind.config.js to enable print utilities and customize the theme:

module.exports = {
  content: ["./src/**/*.{js,jsx}"],
  theme: {
    extend: {
      screens: {
        print: { raw: "print" }, // Apply styles only during print
        screen: { raw: "screen" }, // Apply styles for screen viewing
      },
    },
  },
  plugins: [],
};

Add Tailwind to your index.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

3. Set Up the Development Server

Start your development server to preview changes:

npm run dev

Creating the CV Component

Build a component that serves as both a web page and a printable CV. Here’s an example:

import React from "react";

export default function About() {
  return (
    <div className="print:max-w-a4 p-8 print:mx-auto print:p-4">
      {/* Header */}
      <header className="mb-8 print:mb-4">
        <h1 className="text-4xl font-bold print:text-2xl">Jane Developer</h1>
        <p className="text-gray-600 print:hidden">
          Full Stack Developer & Open Source Enthusiast
        </p>
        <p className="hidden print:block print:text-sm">
          contact@janedeveloper.com | (555) 123-4567
        </p>
      </header>

      {/* Professional Experience */}
      <section className="print:break-inside-avoid">
        <h2 className="mb-4 text-2xl font-semibold print:text-xl">
          Professional Experience
        </h2>
        <ul className="ml-4 list-disc print:text-sm">
          <li>Senior Developer at XYZ Corp (2020–Present)</li>
          <li>Open Source Contributor to ABC Project</li>
        </ul>
      </section>
    </div>
  );
}

Tailwind’s Print Utilities: A Quick Guide

Here are some key Tailwind classes that optimize the print version:

1. print:hidden: Hides elements in the print version. Useful for sections irrelevant to a CV (e.g., navigation).

2. print:block: Forces elements to display only in the print version. Use this for contact details formatted for print.

3. print:break-inside-avoid: Prevents awkward page breaks in sections.

4. print:max-w-{size}: Sets the maximum width for printed content. Example: print:max-w-a4.

5. print:text-{size}: Adjusts font size for print.

6. print:p-{size}: Tweaks padding for print.

   Pro Tip: Test your layout frequently using the browser’s print preview.

Exporting the CV to PDF

Use Puppeteer to automate the process of generating a PDF.

Add a Build Script

Install Puppeteer:

npm install puppeteer

Add a script to package.json:

{
  "scripts": {
    "build": "vite build && node scripts/generate-cv.js"
  }
}

Create the generate-cv.js Script

This script launches a headless browser, loads the About page, and saves it as a PDF:

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.goto("http://localhost:4173/about", { waitUntil: "networkidle0" });
  await page.pdf({
    path: "public/cv.pdf",
    format: "A4",
    printBackground: true,
    margin: {
      top: "20mm",
      bottom: "20mm",
      left: "20mm",
      right: "20mm",
    },
  });

  await browser.close();
})();

Run the Build

npm run build

Tips for a Better CV

1. Test Layouts Regularly: Use print preview during development.
2. Optimize Content: Prioritize concise, impactful details for the print version.
3. Consider Paper Sizes: Use A4 or Letter dimensions for global compatibility.
4. Style Images for Print: Optimize logos or graphics for high-quality printing.
5. Custom Fonts: Ensure your fonts look professional in both screen and print.

Conclusion

By leveraging Vite, React, and Tailwind CSS, you can maintain a unified, synchronized portfolio website and CV. With print-specific styling and automated PDF generation, updating your CV becomes as simple as updating your website.

Explore Tailwind’s powerful utilities, experiment with layouts, and take full control of your personal branding. Happy coding!