Write your CV in Markdown and generate both a responsive web page and a professional PDF with minimal setup.

Contents generated with DocToc

• Features
• Quick Start
• Customization
  • Content
  • Customization Examples
    • Styling Changes
    • Icons and Section Headings
    • Customize Technical Skills Display
    • Modify Contact Information Display
  • PDF Generation
• Deployment
  • Automated Deployment
    • GitHub Pages
    • GitLab Pages
• Resources
• License

• 📝 Write your CV in simple Markdown (parsed with Marked)
• 🎨 Modern, responsive webpage built with Vite
• 📄 Print-optimized PDF generation using Puppeteer, with automatic PDF rebuilds via CI
• 💅 Beautiful icons from Phosphor Icons
• 🛠️ Easy to customize with SCSS and vanilla JavaScript
• 🚀 Ready to deploy to GitHub/GitLab Pages (or your preferred platform)
• ✨ No LaTeX knowledge required

1. Clone the repository
2. Install dependencies (requires Node.js 20+):

   npm install

3. Edit src/cv.md with your information
4. Preview your CV:

   npm run dev     # Start a dev server with live reload

5. Generate PDF:

   npm run pdf     # Generate PDF

Edit src/cv.md using Markdown. The file supports front matter for your personal information:

---
title: Your Name
headline: Your Title
email: you@example.com
github: '@username'
---

Modify colors, fonts, and layout in src/css/main.scss:

// Change the primary color
$color-primary: #0073e6;  // Default blue
$color-primary: #2ecc71;  // Change to green

// Change font family
$font-sans: avenir, montserrat, corbel, 'URW Gothic', sans-serif;       // default
$font-sans: optima, candara, 'Noto Sans', source-sans-pro, sans-serif;  // Use different fonts
// or, if you prefer a Serif font, you could specify $font-serif to replace $font-sans

Add icons to your section headings using Phosphor Icons. The project uses the regular style by default, but you can switch to thin, light, bold, fill, or duotone styles by updating the import in src/js/main.js:

// Default style
import '@phosphor-icons/web/regular'

// Or use another style
import '@phosphor-icons/web/bold'
import '@phosphor-icons/web/duotone'

Add icons to your markdown:

## Skills [ph-wrench]           <!-- Adds wrench icon -->

## Experience [ph-briefcase]    <!-- Adds briefcase icon -->

## Education [ph-graduation-cap] <!-- Adds graduation cap icon -->

Modify skill categories and icons in src/js/utils/skills.js:

// Change icons for skill categories
function getCategoryIcon(categoryText) {
  const category = categoryText.toLowerCase()
  const iconMap = {
    frontend: 'ph ph-browser',
    backend: 'ph ph-database',
    devops: 'ph ph-cloud',
    mobile: 'ph ph-device-mobile',
    // Add your own categories
  }
  // change Default icon from 'ph ph-toolbox' to, say 'ph-caret-double-right'
  return Object.entries(iconMap).find(([key]) => category.includes(key))?.[1] || 'ph-caret-double-right'
}

Adjust contact info layout in src/js/utils/header.js:

// Add new social media or contact types, for example, gitlab
if (metadata.gitlab) {
  const gitlabUsername = metadata.gitlab.replace(/^@/, '')
  contactDiv.appendChild(
    createContactItem('ph-gitlab-logo', metadata.gitlab, `https://gitlab.com/${gitlabUsername}`)
  )
}

// Change icon styles
// First update main.js to import duotone icons:
// import '@phosphor-icons/web/duotone'
// Then update the icon class:
iconElement.className = `ph-duotone ${iconClass}`  // Use duotone icons instead of regular

These files control the main aspects of the CV:

• src/css/main.scss - Overall styling and layout
• src/js/utils/skills.js - Technical skills section logic
• src/js/utils/header.js - Contact information and header
• src/js/utils/timeline.js - Experience and education entries
• src/js/utils/headings.js - Section headings and icons
• src/js/utils/table.js - Responsive table handling

• Run npm run pdf locally to create a PDF version of your CV
• PDFs are automatically generated by CI when you push to your repository:
  • For GitLab: The PDF is generated as a job artifact in the CI pipeline
  • For GitHub: The PDF will be generated as part of the GitHub Actions workflow

To build your project for production:

npm run build

The built site will be in the ./dist directory. You can preview the build via

npm run preview

This project includes ready-to-use CI/CD configurations for both GitHub and GitLab Pages.

1. Enable GitHub Pages in your repository:
   • Go to your repository's Settings
   • Navigate to "Pages" in the sidebar
   • Under "Build and deployment", select "GitHub Actions" as your source
2. Push your code to GitHub - the included GitHub Actions workflow will handle the rest!

1. The included .gitlab-ci.yml configuration will automatically deploy to GitLab Pages
2. For proper URL handling:
   • Go to your repository's Settings > Pages
   • Uncheck "Use unique domain" (this is checked by default)
   • Your CV will be available at https://<username>.gitlab.io/<repo-name>

You can also deploy your CV to other platforms like Cloudflare Pages, Vercel, Netlify, or your own server. See the Vite docs for more information.

• Vite Guide
• Marked Documentation
• Modern Font Stacks
• favicon generated via https://favicon.io/favicon-generator/
• og image by Amjith S on Unsplash

MIT - Feel free to use and adapt for your needs.