CV

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

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

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

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

Features

• 📝 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

Quick Start

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
   

Customization

Content

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'
---

[!TIP] This project uses Marked to parse markdown. Marked supports the original markdown.pl implementation, CommonMark and GitHub Flavored Markdown, which should generally suffice for most use cases. You could even add custom extensions to extend the functionality, if you needed to.

Customization Examples

Styling Changes

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

Icons and Section Headings

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 -->

Customize Technical Skills Display

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'
}

Modify Contact Information Display

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

PDF Generation

• 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

Deployment

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

Automated Deployment

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

GitHub 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!

GitLab Pages

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.

Resources

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

License

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